src/App.js

@@ -8,6 +8,18 @@ import { generalLayoutContext } from './context/GeneralLayoutContext';
 
 import './App.css';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 3,
+      staleTime: 300000 //5 mins
+      // refetchOnMount: false,
+      // staleTime: Infinity // can also be a number in millisecond
+    },
+  },
+})
+
 function App() {
 
   const {pathname} = useLocation()
@@ -18,17 +30,6 @@ function App() {
     window.scrollTo(0,0)
   },[pathname])
 
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        refetchOnWindowFocus: false,
-        retry: 3,
-        staleTime: 300000 //5 mins
-        // refetchOnMount: false,
-        // staleTime: Infinity // can also be a number in millisecond
-      },
-    },
-  })
 
   return (
     <>

src/RouteLinks.js

@@ -1,10 +1,12 @@
 const RouteLinks = {
     loginPage: '/auth/login',
     homePage: '/',
+    customerPage: '/customer',
+    subscriptions: '/subscriptions',
+    billings: '/billings',
+    
     loansPage: '/loans',
     transactionsPage: '/transactions',
-    customerPage: '/customer',
-    loanChargesPage: '/loan-charges',
     offers: '/offers',
     transaction_details_page: '/transaction/details',
     errorPage: '*',

src/SiteRoutes.jsx

@@ -7,10 +7,11 @@ import PageLoader from './components/PageLoader'
 
 import LoginPage from './pages/LoginPage' // LOGIN PAGE
 import HomePage from './pages/HomePage' // Home PAGE
-import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
-import TransactionsPage from './pages/TransactionsPage' // TRANSACTIONS PAGE
 import CustomerPage from './pages/CustomerPage' // REPAYMENTS PAGE
-import LoanChargesPage from './pages/LoanChargesPage' // LOAN CHARGES PAGE
+import SubscriptionsPage from './pages/SubscriptionsPage' // TRANSACTIONS PAGE
+import BillingsPage from './pages/BillingsPage' // LOAN CHARGES PAGE
+
+import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
 import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE
 import OffersPage from './pages/OffersPage' // LOAN OFFERS PAGE
 import ErrorPage from './pages/ErrorPage' // ERROR PAGE
@@ -25,10 +26,11 @@ export default function SiteRoutes() {
 
       <Route element={<UserExist />}>
         <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
-        <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
-        <Route path={RouteLinks.transactionsPage} element={<TransactionsPage />} /> {`*/Transactions PAGE*/`}
+        <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage />} /> {`*/SUBSCRIPTIONS PAGE*/`}
         <Route path={RouteLinks.customerPage} element={<CustomerPage />} /> {`*/CUSTOMER PAGE*/`}
-        <Route path={RouteLinks.loanChargesPage} element={<LoanChargesPage />} /> {`*/LOAN CHARGES PAGE*/`}
+        <Route path={RouteLinks.billings} element={<BillingsPage />} /> {`*/BILLINGS PAGE*/`}
+        
+        <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
         <Route path={RouteLinks.transaction_details_page} element={<TransactionDetailsPage />} /> {`*/TRANSACTION PAGE*/`}
         <Route path={RouteLinks.offers} element={<OffersPage />} /> {`*/LOAN OFFERS PAGE*/`}
       </Route>

src/components/customer/CustomerCom.jsx

@@ -13,10 +13,11 @@ import RouteLinks from '../../RouteLinks';
 export default function CustomerCom() {
 
     const [page, setPage] = useState(1)
-    const [allTransactions, setAllTransaction] = useState({loading:true, error:'', data:{}})
+    const [allCustomers, setAllCustomers] = useState({loading:true, error:'', data:{}})
 
     const [willFilter, setWillFilter] = useState(false)
     const [filter, setFilter] = useState({type: '', id: ''})
+    
     const handleFilter = ({target:{name, value}}) => {
         setFilter(prev => ({...prev, [name]:value}))
     }
@@ -34,33 +35,33 @@ export default function CustomerCom() {
         }
     }
 
-    const transactions = allTransactions?.data?.transactions // TRANSACTIONS LIST
-    const pagination = allTransactions?.data?.pagination
-    const isFetching = allTransactions?.loading
-    const isError = allTransactions?.error
+    const customers = allCustomers?.data?.customers // TRANSACTIONS LIST
+    const pagination = allCustomers?.data?.pagination
+    const isFetching = allCustomers?.loading
+    const isError = allCustomers?.error
 
     useEffect(()=>{
-        setAllTransaction(prev => ({...prev, loading:true}))
+        setAllCustomers(prev => ({...prev, loading:true}))
         const payload = filter?.type ? {[filter?.type]: filter.id} : {}
         getCustomers({...payload, page}).then(res => {
             if(res?.status != 200){
-                setAllTransaction(prev => ({...prev, loading:false}))
+                setAllCustomers(prev => ({...prev, error:'Opps, an error occurred', loading:false}))
                 return
             }
-            setAllTransaction({loading:false, error:'', data:res?.data})
+            setAllCustomers({loading:false, error:'', data:res?.data})
         }).catch(err => {
-            setAllTransaction({loading:false, error:'error occurred', data:{}})
+            setAllCustomers({loading:false, error:'error occurred', data:{}})
             console.log('ERR', err)
         })
     },[page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+            <BreadcrumbCom title='Customers' paths={['Dashboard', 'Customers']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 { isError ?
-                    <p className='text-red-500'>{allTransactions?.error}</p>
+                    <p className='text-red-500'>{allCustomers?.error}</p>
                 :
                 <>
                     {/* filter section */}
@@ -80,21 +81,18 @@ export default function CustomerCom() {
                     </div>
                      {/* end of filter section */}
 
-                    <TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination} >
+                    <TablePaginatedWrapper data={customers} 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">
-                                            Request
+                                            Name
                                         </th>
                                         <th scope="col" className="px-2">
                                             Account
                                         </th>
-                                        <th scope="col" className="px-2">
-                                            Activity
-                                        </th>
                                         <th scope="col" className="px-2 text-right">
                                             Action
                                         </th>
@@ -105,31 +103,25 @@ export default function CustomerCom() {
                                         <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'>
-                                                <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
+                                                {/* <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" /> */}
                                                 <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.transaction_id}</div>
-                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
+                                                    <div className="text-base font-semibold">{item?.firstname} {item?.lastname}</div>
+                                                    <div className="font-normal text-gray-500">{item?.email}</div>
+                                                    <div className="font-normal text-gray-500">{item?.id}</div>
                                                 </div>  
                                                 </div>
                                             </td>
                                             <td className="px-2">
                                                 <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.account_id}</div>
-                                                    <div className="font-normal text-gray-500">{item?.type}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="font-normal text-gray-500">50%</div>
-                                                    <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
-                                                    <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
-                                                    </div>
+                                                    <div className="text-base font-semibold">{item?.username}</div>
+                                                    <div className="font-normal text-gray-500">{item?.member_uid}</div>
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.profile_completed)}</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={RouteLinks.transaction_details_page} state={{transactionID: item?.transaction_id}}>
+                                                        <Link to={''} state={{customerID: item?.id}}>
                                                             <Icons name='eye' />
                                                         </Link>
                                                     </div>
@@ -139,7 +131,7 @@ export default function CustomerCom() {
                                     ))
                                     :
                                     <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={4}>
+                                        <td className="px-3 py-2" colSpan={3}>
                                             <div className="flex justify-center items-center">
                                                 No Record Found
                                             </div>

src/components/layouts/aside/DashboardAside.jsx

@@ -139,9 +139,9 @@ const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
     {name:'Deployments', title:'Activities', status:1, icon: 'arrow-right', subLinks: [
         {name: 'Active', status:1, icon: 'dot', to: RouteLinks.transactionsPage},
-        {name: 'System', status:1, icon: 'dot', to: RouteLinks.loansPage},
+        {name: 'Subscriptions', status:1, icon: 'dot', to: RouteLinks.subscriptions},
         {name: 'Customers', status:1, icon: 'dot', to: RouteLinks.customerPage},
-        {name: 'Billings', status:1, icon: 'dot', to: RouteLinks.loanChargesPage},
+        {name: 'Billings', status:1, icon: 'dot', to: RouteLinks.billings},
         {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [
             {name: 'Product Settings', status:1, icon: 'dot', to: RouteLinks.offers },
             {name: 'Manage 2', status:1, icon: 'dot', to: RouteLinks.offers },

src/components/loan_charges/BillingsCom.jsx

@@ -3,16 +3,16 @@ import { useEffect, useState } from 'react'
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getLoanCharges } from '../../services/siteServices'
+import { getBillings } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import formatNumber from '../../helpers/formatNumber'
 import Avatar from '../../assets/user_avatar.jpg'
 
 
-export default function LoansChargesCom() {
+export default function BillingsCom() {
 
     const [page, setPage] = useState(1)
-    const [allLoanCharges, setAllLoanCharges] = useState({loading:true, error:'', data:{}})
+    const [allBillings, setAllBillings] = useState({loading:true, error:'', data:{}})
 
     const [willFilter, setWillFilter] = useState(false)
     const [filter, setFilter] = useState({type: '', id: ''})
@@ -33,33 +33,33 @@ export default function LoansChargesCom() {
         }
     }
 
-    const loanCharges = allLoanCharges?.data?.loan_charges // LOAN CHARGES LIST
-    const pagination = allLoanCharges?.data?.pagination
-    const isFetching = allLoanCharges?.loading
-    const isError = allLoanCharges?.error
+    const billings = allBillings?.data?.loan_charges // LOAN CHARGES LIST
+    const pagination = allBillings?.data?.pagination
+    const isFetching = allBillings?.loading
+    const isError = allBillings?.error
 
     useEffect(()=>{
-        setAllLoanCharges(prev => ({...prev, loading:true}))
+        setAllBillings(prev => ({...prev, loading:true}))
         const payload = filter?.type ? {[filter?.type]: filter.id} : {}
-        getLoanCharges({...payload, page}).then(res => {
+        getBillings({...payload, page}).then(res => {
             if(res?.status != 200){
-                setAllLoanCharges(prev => ({...prev, loading:false}))
+                setAllBillings(prev => ({...prev, error:'Opps, an error occurred', loading:false}))
                 return
             }
-            setAllLoanCharges({loading:false, error:'', data:res?.data})
+            setAllBillings({loading:false, error:'', data:res?.data})
         }).catch(err => {
-            setAllLoanCharges({loading:false, error:'error occurred', data:{}})
+            setAllBillings({loading:false, error:'error occurred', data:{}})
             console.log('ERR', err)
         })
     },[page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+            <BreadcrumbCom title='Billings' paths={['Dashboard', 'Billings']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 { isError ?
-                    <p className='text-red-500'>{allLoanCharges?.error}</p>
+                    <p className='text-red-500'>{allBillings?.error}</p>
                 :
                 <>
                     {/* filter section */}
@@ -79,7 +79,7 @@ export default function LoansChargesCom() {
                     </div>
                      {/* end of filter section */}
 
-                    <TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    <TablePaginatedWrapper data={billings} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="py-2 w-full text-sm">

src/components/transactions/SubscriptionsCom.jsx

@@ -4,16 +4,16 @@ import {Link} from 'react-router-dom'
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getTransactions } from '../../services/siteServices'
+import { getSubcriptions } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
 import RouteLinks from '../../RouteLinks';
 
-export default function TransactionsCom() {
+export default function SubscriptionsCom() {
 
     const [page, setPage] = useState(1)
-    const [allTransactions, setAllTransaction] = useState({loading:true, error:'', data:{}})
+    const [allSubcriptions, setAllSubcriptions] = useState({loading:true, error:'', data:{}})
 
     const [willFilter, setWillFilter] = useState(false)
     const [filter, setFilter] = useState({type: '', id: ''})
@@ -34,33 +34,33 @@ export default function TransactionsCom() {
         }
     }
 
-    const transactions = allTransactions?.data?.transactions // TRANSACTIONS LIST
-    const pagination = allTransactions?.data?.pagination
-    const isFetching = allTransactions?.loading
-    const isError = allTransactions?.error
+    const subcriptions = allSubcriptions?.data?.transactions // TRANSACTIONS LIST
+    const pagination = allSubcriptions?.data?.pagination
+    const isFetching = allSubcriptions?.loading
+    const isError = allSubcriptions?.error
 
     useEffect(()=>{
-        setAllTransaction(prev => ({...prev, loading:true}))
+        setAllSubcriptions(prev => ({...prev, loading:true}))
         const payload = filter?.type ? {[filter?.type]: filter.id} : {}
-        getTransactions({...payload, page}).then(res => {
+        getSubcriptions({...payload, page}).then(res => {
             if(res?.status != 200){
-                setAllTransaction(prev => ({...prev, loading:false}))
+                setAllSubcriptions(prev => ({...prev, error:'Opps, an error occurred', loading:false}))
                 return
             }
-            setAllTransaction({loading:false, error:'', data:res?.data})
+            setAllSubcriptions({loading:false, error:'', data:res?.data})
         }).catch(err => {
-            setAllTransaction({loading:false, error:'error occurred', data:{}})
+            setAllSubcriptions({loading:false, error:'error occurred', data:{}})
             console.log('ERR', err)
         })
     },[page, willFilter])
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
+            <BreadcrumbCom title='Subscriptions' paths={['Dashboard', 'Subscriptions']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 { isError ?
-                    <p className='text-red-500'>{allTransactions?.error}</p>
+                    <p className='text-red-500'>{allSubcriptions?.error}</p>
                 :
                 <>
                     {/* filter section */}
@@ -80,7 +80,7 @@ export default function TransactionsCom() {
                     </div>
                      {/* end of filter section */}
 
-                    <TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    <TablePaginatedWrapper data={subcriptions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="py-2 w-full text-sm">

src/pages/BillingsPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import BillingsCom from '../components/loan_charges/BillingsCom'
+
+export default function BillingsPage() {
+  return (
+    <BillingsCom />
+  )
+}

src/pages/LoanChargesPage.jsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import LoanChargesCom from '../components/loan_charges/LoanChargesCom'
-
-export default function LoanChargesPage() {
-  return (
-    <LoanChargesCom />
-  )
-}

src/pages/SubscriptionsPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import SubscriptionsCom from '../components/transactions/SubscriptionsCom'
+
+export default function SubscriptionsPage() {
+  return (
+    <SubscriptionsCom />
+  )
+}

src/pages/TransactionsPage.jsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import TransactionsCom from '../components/transactions/TransactionsCom'
-
-export default function TransactionsPage() {
-  return (
-    <TransactionsCom />
-  )
-}

src/services/siteServices.js

@@ -56,36 +56,43 @@ export const getDashData = (reqData) => {
     return getAuxEnd(`/dashboard`, postData)
 }
 
+// FUNCTION TO GET CUSTOMERS
+export const getCustomers = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/customers`, postData)
+}
+
+// FUNCTION TO GET BILLINGS
+export const getBillings = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/billings`, postData)
+}
+
+// FUNCTION TO GET SUBSCRIPTIONS
+export const getSubcriptions = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/subcriptions`, postData)
+}
+
+
+
+
+
+
+
+
 // FUNCTION TO GET LOANS TABLE
 export const getLoans = (reqData) => {
     const postData = { ...reqData }
     return getAuxEnd(`/loans`, postData)
 }
 
-// FUNCTION TO GET TRANSACTIONS TABLE
-export const getCustomers = (reqData) => {
-    const postData = { ...reqData }
-    return getAuxEnd(`/customers`, postData)
-}
-
-// FUNCTION TO GET TRANSACTIONS TABLE
-export const getTransactions = (reqData) => {
-    const postData = { ...reqData }
-    return getAuxEnd(`/transactions`, postData)
-}
-
 // FUNCTION TO GET REPAYMENTS TABLE
 export const getRepayments = (reqData) => {
     const postData = { ...reqData }
     return getAuxEnd(`/repayments`, postData)
 }
 
-// FUNCTION TO GET LOAN CHARGES TABLE
-export const getLoanCharges = (reqData) => {
-    const postData = { ...reqData }
-    return getAuxEnd(`/loan-charges`, postData)
-}
-
 // FUNCTION TO GET OFFERS LIST TABLE
 export const getOffers = (reqData) => {
     const postData = { ...reqData }