src/components/account_view/AccountViewCom.jsx

@@ -1,16 +1,55 @@
 import {useEffect, useState} from 'react'
-import {Link} from 'react-router-dom'
+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 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?.products // ACCOUNT VIEW DATA
+    const pagination = data?.data?.pagination
+    console.log('DATA', data?.data)
+
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Account View [PUT MEMBER_UID]' paths={['Dashboard', 'Account View']}/>
+            <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>
+                :
+                    <p className='text-slate-800'>coming soon</p>
+                }
 
             </div>
         </div>

src/components/customer/CustomerCom.jsx

@@ -134,7 +134,7 @@ export default function CustomerCom() {
                                                             <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={`/account-view/${item?.member_uid}`}
-                                                                      state={{customerID: item?.id}}>
+                                                                      state={{customerID: item?.id, memberUID: item?.member_uid}}>
                                                                     <Icons name='eye'/>
                                                                 </Link>
                                                             </div>

src/components/products/CustomTemplates.jsx

@@ -5,7 +5,7 @@ import queryKeys from '../../services/queryKeys'
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getProducts } from '../../services/siteServices'
+import { getCustomTemplate } from '../../services/siteServices'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
 
 export default function CustomTemplates() {
@@ -32,18 +32,18 @@ export default function CustomTemplates() {
     }
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.products, page, willFilter],
+        queryKey: [...queryKeys.custom_template, page, willFilter],
         queryFn: () => {
             const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
             const reqData = {
                 page,
                 ...filterData
             }
-            return getProducts(reqData)
+            return getCustomTemplate(reqData)
         },
         staleTime: 0 //0 mins
     })
-    const productsData = data?.data?.products // PRODUCTS LIST
+    const customTemData = data?.data?.products // CUSTOM TEMPLATE LIST
     const pagination = data?.data?.pagination
     // console.log('DATA', data?.data)
 
@@ -72,20 +72,20 @@ export default function CustomTemplates() {
                         </div>
                         {/* end of filter section */}
 
-                        <TablePaginatedWrapper data={productsData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                        <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">
-                                                Added
+                                                ID
                                             </th>
                                             <th scope="col" className="px-2">
-                                                Name
+                                                Custom ID
                                             </th>
                                             <th scope="col" className="px-2">
-                                                Product ID
+                                                Provision Name
                                             </th>
                                             <th scope="col" className="px-2 text-right">
                                                 Status

src/components/products/ProductTemplates.jsx

@@ -5,7 +5,7 @@ import queryKeys from '../../services/queryKeys'
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getProducts } from '../../services/siteServices'
+import { getProductsTemplate } from '../../services/siteServices'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
 
 export default function ProductTemplates() {
@@ -32,18 +32,18 @@ export default function ProductTemplates() {
     }
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: [...queryKeys.products, page, willFilter],
+        queryKey: [...queryKeys.products_template, page, willFilter],
         queryFn: () => {
             const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
             const reqData = {
                 page,
                 ...filterData
             }
-            return getProducts(reqData)
+            return getProductsTemplate(reqData)
         },
         staleTime: 0 //0 mins
     })
-    const productsData = data?.data?.products // PRODUCTS LIST
+    const productsTemData = data?.data?.products // PRODUCTS TEMPLATE LIST
     const pagination = data?.data?.pagination
     // console.log('DATA', data?.data)
 
@@ -72,20 +72,20 @@ export default function ProductTemplates() {
                         </div>
                         {/* end of filter section */}
 
-                        <TablePaginatedWrapper data={productsData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                        <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">
-                                                Added
+                                                Product ID
                                             </th>
                                             <th scope="col" className="px-2">
                                                 Name
                                             </th>
                                             <th scope="col" className="px-2">
-                                                Product ID
+                                                Provision Name
                                             </th>
                                             <th scope="col" className="px-2 text-right">
                                                 Status

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,9 +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-template`, postData)
+}
 
+// FUNCTION TO GET CUSTOM TEMPLATE DATA
+export const getCustomTemplate = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/custom-template`, postData)
+}
 
-
+// FUNCTION TO VIEW SELECTED ACCOUNT DATA
+export const getAccountView = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/account-view`, postData)
+}