account view subscription table added

src/RouteLinks.js

@@ -2,13 +2,17 @@ const RouteLinks = {
     loginPage: '/auth/login',
     homePage: '/',
     customerPage: '/customer',
+    accountDetails: '/account-view/*',
     subscriptions: '/subscriptions',
+    subscriptionDetails: '/subscription-view/*',
     billings: '/billings',
     recentSignup: '/recent-signup',
     loansPage: '/loans',
     transactionsPage: '/transactions',
     products: '/products',
     usersAdmin: '/users-admin',
+    productTemplates: '/products-template',
+    customTemplates: '/custom-template',
     transaction_details_page: '/transaction/details',
     errorPage: '*',
 }

src/SiteRoutes.jsx

@@ -1,5 +1,5 @@
-import { Suspense } from 'react'
+import {Suspense} from 'react'
-import { Routes, Route } from 'react-router-dom'
+import {Routes, Route} from 'react-router-dom'
 import RouteLinks from './RouteLinks'
 
 import UserExist from './authorization/UserExist'
@@ -16,39 +16,48 @@ import ProductsPage from './pages/ProductsPage' // PRODUCTS PAGE
 import ErrorPage from './pages/ErrorPage';
 
 import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
-import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE
+import TransactionDetailsPage from './pages/TransactionDetailsPage'
-
+import AccountDetailsPage from "./pages/AccountDetailsPage";
+import ProductTemplatePage from "./pages/ProductTemplatePage";
+import CustomTemplatePage from "./pages/CustomTemplatePage"; // TRANSACTION DETAILS PAGE
+import SubscriptionDetailViewPage from './pages/SubscriptionDetailViewPage' // SUBSCRIPTION DETAIL VIEW PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
 
 export default function SiteRoutes() {
-  return (
+    return (
-    <Routes>
+        <Routes>
-      <Route path={RouteLinks.loginPage} element={<LoginPage />} /> {`*/LOGIN PAGE*/`}
+            <Route path={RouteLinks.loginPage} element={<LoginPage/>}/> {`*/LOGIN PAGE*/`}
 
-      <Route element={<UserExist />}>
+            <Route element={<UserExist/>}>
-        <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
+                <Route path={RouteLinks.homePage} element={<HomePage/>}/> {`*/HOME PAGE*/`}
-        <Route path={RouteLinks.recentSignup} element={<RecentSignupPage />} /> {`*/RECENT SIGNUP PAGE*/`}
+                <Route path={RouteLinks.recentSignup} element={<RecentSignupPage/>}/> {`*/RECENT SIGNUP PAGE*/`}
-        <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage />} /> {`*/SUBSCRIPTIONS PAGE*/`}
+                <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage/>}/> {`*/SUBSCRIPTIONS PAGE*/`}
-        <Route path={RouteLinks.customerPage} element={<CustomerPage />} /> {`*/CUSTOMER PAGE*/`}
+                <Route path={RouteLinks.customerPage} element={<CustomerPage/>}/> {`*/CUSTOMER PAGE*/`}
-        <Route path={RouteLinks.billings} element={<BillingsPage />} /> {`*/BILLINGS PAGE*/`}
+                <Route path={RouteLinks.accountDetails} element={<AccountDetailsPage/>}/> {`*/CUSTOMER PAGE*/`}
-        <Route path={RouteLinks.products} element={<ProductsPage />} /> {`*/PRODUCTS PAGE*/`}
+                <Route path={RouteLinks.billings} element={<BillingsPage/>}/> {`*/BILLINGS PAGE*/`}
-        <Route path={RouteLinks.usersAdmin} element={<UsersAdminPage />} /> {`*/ADMIN USERS PAGE*/`}
+                <Route path={RouteLinks.products} element={<ProductsPage/>}/> {`*/PRODUCTS PAGE*/`}
-        
+                <Route path={RouteLinks.usersAdmin} element={<UsersAdminPage/>}/> {`*/ADMIN USERS PAGE*/`}
-        <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
-        <Route path={RouteLinks.transaction_details_page} element={<TransactionDetailsPage />} /> {`*/TRANSACTION PAGE*/`}
-      </Route>
 
-      {/* ERROR PAGE */}
+                <Route path={RouteLinks.productTemplates} element={<ProductTemplatePage/>}/> {`*/PRODUCTS TEMPLATE PAGE*/`}
-      <Route 
+                <Route path={RouteLinks.customTemplates} element={<CustomTemplatePage/>}/> {`*/CUSTOM TEMPLATES PAGE*/`}
-        path={RouteLinks.errorPage} // error page
+                <Route path={RouteLinks.subscriptionDetails} element={<SubscriptionDetailViewPage/>}/> {`*/SUBSCRIPTION DETAIL VIEW PAGE*/`}
-        element={
+
-          <Suspense fallback={<PageLoader />}>
+                <Route path={RouteLinks.loansPage} element={<LoansPage/>}/> {`*/LOANS PAGE*/`}
-            <ErrorPage />
+                <Route path={RouteLinks.transaction_details_page}
-          </Suspense>
+                       element={<TransactionDetailsPage/>}/> {`*/TRANSACTION PAGE*/`}
-        } 
+            </Route>
-      />
+
-    </Routes>
+            {/* ERROR PAGE */}
-  )
+            <Route
+                path={RouteLinks.errorPage} // error page
+                element={
+                    <Suspense fallback={<PageLoader/>}>
+                        <ErrorPage/>
+                    </Suspense>
+                }
+            />
+        </Routes>
+    )
 }

src/components/account_view/AccountProfileView.jsx

@@ -0,0 +1,52 @@
+
+
+
+export default function AccountProfileView() {
+    return <>
+        <div className="row" style={{paddingBottom:'20px'}}>
+            <div className="col-12 col-lg-12">
+                <div className="card card-statistics">
+                    <div className="card-header">
+                        <div className="card-heading">
+                            <h4 className="card-title"><b>Account Profile</b></h4>
+                        </div>
+                    </div>
+                    <div className="card-body">
+                        <div className="table-responsive">
+                            <table className="table table-hover mb-0" style={{width:'100%', backgroundColor: 'aliceblue', borderRadius: '10px'}}>
+                                <thead>
+                                <tr>
+                                    <th scope="col">#</th>
+                                    <th scope="col">First</th>
+                                    <th scope="col">Last</th>
+                                    <th scope="col">Handle</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <th scope="row">1</th>
+                                    <td>Mark</td>
+                                    <td>Otto</td>
+                                    <td>@mdo</td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">2</th>
+                                    <td>Jacob</td>
+                                    <td>Thornton</td>
+                                    <td>@fat</td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">3</th>
+                                    <td>Larry</td>
+                                    <td>the Bird</td>
+                                    <td>@twitter</td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+}

src/components/account_view/AccountViewCom.jsx

@@ -0,0 +1,70 @@
+import {useEffect, useState} from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import {useLocation, useNavigate, Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import RouteLinks from '../../RouteLinks'
+import { getAccountView } from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys'
+import CustomerAccountView from "./CustomerAccountView";
+import AccountProfileView from "./AccountProfileView";
+import CustomerSubscriptionsView from "./CustomerSubscriptionsView";
+import CustomerPaymentsView from "./CustomerPaymentsView";
+
+export default function AccountViewCom() {
+
+    const {state:{memberUID}} = useLocation()
+    const navigate = useNavigate()
+
+    useEffect(()=>{
+        if(!memberUID){
+            navigate(RouteLinks.customerPage, {replace: true})
+        }
+    },[])
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.account_view,
+        queryFn: () => {
+            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                member_uid: memberUID
+                // page,
+                // ...filterData
+            }
+            return getAccountView(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const accountsViewData = data?.data // ACCOUNT VIEW DATA
+    const account_info = accountsViewData?.account
+    const account_profile = accountsViewData?.account_profile
+    const subscriptions = accountsViewData?.subscriptions
+    const payments = accountsViewData?.payments
+    // console.log('DATA', payments, subscriptions)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title={`Account View [${memberUID}]`} paths={['Dashboard', 'Account View']}/>
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                        <>
+                            <CustomerAccountView accountInfo={account_info} />
+                            <AccountProfileView />
+                            <CustomerSubscriptionsView subscriptions={subscriptions} memberUID={memberUID} />
+                            <CustomerPaymentsView payments={payments} />
+                        </>
+
+                }
+
+            </div>
+        </div>
+    )
+}

src/components/account_view/CustomerAccountView.jsx

@@ -0,0 +1,93 @@
+import {Link} from 'react-router-dom'
+import Icons from "../Icons";
+
+export default function CustomerAccountView({accountInfo}) {
+    return <>
+        <div className="pb-5">
+            <div className="flex flex-col gap-1">
+                <div className="w-full">
+                    <h4 className="font-semibold text-lg">Account Info</h4>
+                </div>
+                <div className="w-full overflow-x-auto">
+                    <>
+                        <table className="py-2 w-full text-sm" style={{backgroundColor: 'aliceblue', borderRadius: '10px'}}>
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                            <tr>
+                                <th scope="col" className="px-2 py-2">
+                                    #
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Firstname
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Lastname
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Username
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Email
+                                </th>
+                                <th scope="col" className="px-2 text-right">
+                                    Action
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {(accountInfo && Object.keys(accountInfo).length > 0) ? 
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-2 py-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{1}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.firstname}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.lastname}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.username}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">{accountInfo?.email}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2 text-right">
+                                        <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                            <div
+                                                className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                <Link 
+                                                    // to={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}
+                                                >
+                                                    <Icons name='eye'/>
+                                                </Link>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                :
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-3 py-2" colSpan={6}>
+                                        <div className="flex justify-center items-center">
+                                            No Record Found
+                                        </div>
+                                    </td>
+                                </tr>
+                            }
+                            </tbody>
+                        </table>
+                    </>
+                </div>
+            </div>
+        </div>
+    </>
+}

src/components/account_view/CustomerPaymentsView.jsx

@@ -0,0 +1,69 @@
+
+export default function CustomerPaymentsView({payments}) {
+    return <>
+        <div className="pb-5">
+            <div className="flex flex-col gap-1">
+                <div className="w-full">
+                    <h4 className="font-semibold text-lg">Payments</h4>
+                </div>
+                <div className="w-full overflow-x-auto">
+                    <>
+                        <table className="py-2 w-full text-sm" style={{backgroundColor: 'aliceblue', borderRadius: '10px'}}>
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                            <tr>
+                                <th scope="col" className="px-2 py-2">
+                                    #
+                                </th>
+                                <th scope="col" className="px-2">
+                                    First
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Last
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Handle
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {(payments && payments.length > 0) ? payments?.map((item, index) => (
+                                    <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-2 py-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{index+1}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.first}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.last}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.handle}</div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))
+                                :
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-3 py-2" colSpan={4}>
+                                        <div className="flex justify-center items-center">
+                                            No Record Found
+                                        </div>
+                                    </td>
+                                </tr>
+                            }
+                            </tbody>
+                        </table>
+                    </>
+                </div>
+            </div>
+        </div>
+    </>
+}

src/components/account_view/CustomerSubscriptionsView.jsx

@@ -0,0 +1,94 @@
+import getDateTimeFromDateString from "../../helpers/getDateTimeFromDateString";
+import RouteLinks from "../../RouteLinks";
+import Icons from "../Icons";
+import {Link} from 'react-router-dom'
+
+export default function CustomerSubscriptionsView({subscriptions, memberUID}) {
+    return <>
+        <div className="pb-5">
+            <div className="flex flex-col gap-1">
+                <div className="w-full">
+                    <h4 className="font-semibold text-lg">Subscriptions</h4>
+                </div>
+                <div className="w-full overflow-x-auto">
+                    <>
+                        <table className="py-2 w-full text-sm" style={{backgroundColor: 'aliceblue', borderRadius: '10px'}}>
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                            <tr>
+                                <th scope="col" className="px-2 py-2">
+                                    #
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Added
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Product
+                                </th>
+                                <th scope="col" className="px-2">
+                                    URL
+                                </th>
+                                <th scope="col" className="px-2">
+                                    Status
+                                </th>
+                                <th scope="col" className="px-2 text-right">
+                                    Action
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {(subscriptions && subscriptions.length > 0) ? subscriptions?.map((item, index) => (
+                                    <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-2 py-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{index+1}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.product_id}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-left">
+                                                <div className="text-base font-semibold">{item?.internal_url}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2">
+                                            <div className="text-right">
+                                                <div className="text-base font-semibold">{item?.status}</div>
+                                            </div>
+                                        </td>
+                                        <td className="px-2 text-right">
+                                            <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                <div
+                                                    className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                    <Link to={`/subscription-view/${memberUID}`} state={{customerID: item?.id, memberUID}}>
+                                                        <Icons name='eye'/>
+                                                    </Link>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))
+                                :
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-3 py-2" colSpan={6}>
+                                        <div className="flex justify-center items-center">
+                                            No Record Found
+                                        </div>
+                                    </td>
+                                </tr>
+                            }
+                            </tbody>
+                        </table>
+                    </>
+                </div>
+            </div>
+        </div>
+    </>
+}

src/components/customer/CustomerCom.jsx

@@ -133,7 +133,8 @@ export default function CustomerCom() {
                                                         <div className='flex items-center justify-end gap-3 md:gap-4'>
                                                             <div
                                                                 className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                                <Link to={''} state={{customerID: item?.id}}>
+                                                                <Link to={`/account-view/${item?.member_uid}`}
+                                                                      state={{customerID: item?.id, memberUID: item?.member_uid}}>
                                                                     <Icons name='eye'/>
                                                                 </Link>
                                                             </div>

src/components/layouts/aside/DashboardAside.jsx

@@ -158,6 +158,8 @@ const asideNavLinks = [
             {
                 name: 'Configurations', status: 1, icon: 'arrow-right', subLinks: [
                     {name: 'Product Settings', status: 1, icon: 'dot', to: RouteLinks.products},
+                    {name: 'Product Templates', status: 1, icon: 'dot', to: RouteLinks.productTemplates},
+                    {name: 'Custom Templates', status: 1, icon: 'dot', to: RouteLinks.customTemplates},
                     {name: 'Admin Manager', status: 1, icon: 'dot', to: RouteLinks.usersAdmin},
                 ]
             },

src/components/products/CustomTemplates.jsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { getCustomTemplate } from '../../services/siteServices'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+
+export default function CustomTemplates() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.custom_template, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getCustomTemplate(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const customTemData = data?.data?.templates // CUSTOM TEMPLATE LIST
+    const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Custom Templates' paths={['Dashboard', 'Custom Templates']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</p>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl' />
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='name'>Name</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                        </div>
+                        {/* end of filter section */}
+
+                        <TablePaginatedWrapper data={customTemData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({ data }) => (
+                                <>
+                                    <table className="py-2 w-full text-sm">
+                                        <thead className="py-2 text-sm text-slate-500 text-left">
+                                        <tr>
+                                            <th scope="col" className="px-2 py-2">
+                                                ID
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Custom ID
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Provision Name
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {(data && data.length > 0) ? data?.map((item, index) => (
+                                                <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                                    <td className="px-2 py-2">
+                                                        <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                            <div className="text-left">
+                                                                <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.custom_id}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.provision_name}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div className="text-base font-semibold">{item?.status}</div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/products/ProductTemplates.jsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+import { getProductsTemplate } from '../../services/siteServices'
+// import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+
+export default function ProductTemplates() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.products_template, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getProductsTemplate(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const productsTemData = data?.data?.templates // PRODUCTS TEMPLATE LIST
+    const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Product Templates' paths={['Dashboard', 'Product Templates']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { isError ?
+                    <p className='text-red-500'>{error?.message}</p>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl' />
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='name'>Name</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
+                        </div>
+                        {/* end of filter section */}
+
+                        <TablePaginatedWrapper data={productsTemData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({ data }) => (
+                                <>
+                                    <table className="py-2 w-full text-sm">
+                                        <thead className="py-2 text-sm text-slate-500 text-left">
+                                        <tr>
+                                            <th scope="col" className="px-2 py-2">
+                                                Product ID
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Name
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Provision Name
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {(data && data.length > 0) ? data?.map((item, index) => (
+                                                <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                                    <td className="px-2 py-2">
+                                                        <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                            <div className="text-left">
+                                                                <div className="text-base font-semibold">{item?.product_id}</div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.name}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.provision_name}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div className="text-base font-semibold">{item?.status}</div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
+                }
+            </div>
+        </div>
+    )
+}

src/components/subscription_view/SubscriptionDetailViewCom.jsx

@@ -0,0 +1,56 @@
+import {useEffect, useState} from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import {useLocation, useNavigate, Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import RouteLinks from '../../RouteLinks'
+import { getAccountView } from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys'
+
+export default function SubscriptionDetailViewCom() {
+
+    const {state:{memberUID}} = useLocation()
+    const navigate = useNavigate()
+
+    useEffect(()=>{
+        if(!memberUID){
+            navigate(`/account-view/${memberUID}`, {replace: true, state:{memberUID}})
+        }
+    },[])
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.account_view,
+        queryFn: () => {
+            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                member_uid: memberUID
+                // page,
+                // ...filterData
+            }
+            // return getAccountView(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const subscriptionViewData = data?.data // SUBSCRIPTION VIEW DATA
+    // console.log('DATA', payments, subscriptions)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title={`Subscription View [${memberUID}]`} paths={['Dashboard', 'Subscription View']}/>
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                    <p className='text-slate-800'>Coming soon</p>
+                }
+
+            </div>
+        </div>
+    )
+}

src/components/transactions/SubscriptionsCom.jsx

@@ -1,4 +1,6 @@
 import { useState } from 'react'
+import {Link} from 'react-router-dom'
+
 // import {Link} from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
@@ -93,6 +95,9 @@ export default function SubscriptionsCom() {
                                         <th scope="col" className="px-2 text-right">
                                             Status
                                         </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -122,6 +127,17 @@ export default function SubscriptionsCom() {
                                                     <div className="text-base font-semibold">{item?.status}</div>
                                                 </div> 
                                             </td>
+                                            <td className="px-2 text-right">
+                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                    <div
+                                                        className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Link to={`/subscription-view/${item?.subscription_uid}`}
+                                                              state={{customerID: item?.id, memberUID: item?.member_uid}}>
+                                                            <Icons name='eye'/>
+                                                        </Link>
+                                                    </div>
+                                                </div>
+                                            </td>
                                         </tr>
                                     ))
                                     :

src/components/users_admin/UsersAdmin.jsx

@@ -62,12 +62,13 @@ export default function UsersAdmin() {
                 :
                 <>
                     {/* filter section */}
-                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2' >
                         <Icons name='filter' className='text-3xl' />
                         <div className='w-full sm:max-w-48'>
                             <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
                                 <option value=''>All</option>
                                 <option value='name'>Name</option>
+                                <option value='username'>Username</option>
                             </select>
                         </div>
                         <div className='w-full sm:max-w-48'>
@@ -90,7 +91,7 @@ export default function UsersAdmin() {
                                         Added
                                     </th>
                                     <th scope="col" className="px-2">
-                                        Firstnane
+                                        Firstname
                                     </th>
                                     <th scope="col" className="px-2">
                                         Lastname

src/pages/AccountDetailsPage.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import AccountViewCom from "../components/account_view/AccountViewCom";
+export default function AccountDetailsPage() {
+    return (
+        <AccountViewCom />
+    )
+}

src/pages/CustomTemplatePage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import CustomTemplates from "../components/products/CustomTemplates";
+
+export default function CustomTemplatePage() {
+    return (
+        <CustomTemplates />
+    )
+}

src/pages/ProductTemplatePage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import ProductTemplates from "../components/products/ProductTemplates";
+
+export default function ProductTemplatePage() {
+    return (
+        <ProductTemplates />
+    )
+}

src/pages/SubscriptionDetailViewPage.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import SubscriptionDetailViewCom from "../components/subscription_view/SubscriptionDetailViewCom";
+export default function SubscriptionDetailViewPage() {
+    return (
+        <SubscriptionDetailViewCom />
+    )
+}

src/services/queryKeys.js

@@ -17,6 +17,9 @@ const queryKeys = {
     right_sidebar: ['right_sidebar'],
     recent_signup: ['recent_signup'],
     products: ['products'],
+    products_template: ['products_template'],
+    custom_template: ['custom_template'],
+    account_view: ['account_view'],
     users_admin: ['users_admin'],
 }
 

src/services/siteServices.js

@@ -98,11 +98,23 @@ export const getUsers = (reqData) => {
     return getAuxEnd(`/users`, postData)
 }
 
+// FUNCTION TO GET PRODUCTS TEMPLATE DATA
+export const getProductsTemplate = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/products-templates`, postData)
+}
 
+// FUNCTION TO GET CUSTOM TEMPLATE DATA
+export const getCustomTemplate = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/custom-templates`, postData)
+}
 
-
+// FUNCTION TO VIEW SELECTED ACCOUNT DATA
-
+export const getAccountView = (reqData) => {
-
+    const postData = { ...reqData }
+    return getAuxEnd(`/account-view`, postData)
+}
 
 
 // FUNCTION TO GET LOANS TABLE