From 9a55f2a05fe7b1f779edd34971f98e2dda258000 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Fri, 22 Aug 2025 17:42:37 +0100 Subject: [PATCH] fixed customer page table --- src/App.js | 23 ++++---- src/RouteLinks.js | 6 ++- src/SiteRoutes.jsx | 14 ++--- src/components/customer/CustomerCom.jsx | 54 ++++++++----------- .../layouts/aside/DashboardAside.jsx | 4 +- .../{LoanChargesCom.jsx => BillingsCom.jsx} | 30 +++++------ ...ansactionsCom.jsx => SubscriptionsCom.jsx} | 30 +++++------ src/pages/BillingsPage.jsx | 8 +++ src/pages/LoanChargesPage.jsx | 8 --- src/pages/SubscriptionsPage.jsx | 8 +++ src/pages/TransactionsPage.jsx | 8 --- src/services/siteServices.js | 43 ++++++++------- 12 files changed, 120 insertions(+), 116 deletions(-) rename src/components/loan_charges/{LoanChargesCom.jsx => BillingsCom.jsx} (87%) rename src/components/transactions/{TransactionsCom.jsx => SubscriptionsCom.jsx} (88%) create mode 100644 src/pages/BillingsPage.jsx delete mode 100644 src/pages/LoanChargesPage.jsx create mode 100644 src/pages/SubscriptionsPage.jsx delete mode 100644 src/pages/TransactionsPage.jsx diff --git a/src/App.js b/src/App.js index b4acaa9..ef7d8a1 100644 --- a/src/App.js +++ b/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 ( <> diff --git a/src/RouteLinks.js b/src/RouteLinks.js index bc5b1f1..ce8bbd8 100644 --- a/src/RouteLinks.js +++ b/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: '*', diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index 7312775..a868b6f 100644 --- a/src/SiteRoutes.jsx +++ b/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() { }> } /> {`*/HOME PAGE*/`} - } /> {`*/LOANS PAGE*/`} - } /> {`*/Transactions PAGE*/`} + } /> {`*/SUBSCRIPTIONS PAGE*/`} } /> {`*/CUSTOMER PAGE*/`} - } /> {`*/LOAN CHARGES PAGE*/`} + } /> {`*/BILLINGS PAGE*/`} + + } /> {`*/LOANS PAGE*/`} } /> {`*/TRANSACTION PAGE*/`} } /> {`*/LOAN OFFERS PAGE*/`} diff --git a/src/components/customer/CustomerCom.jsx b/src/components/customer/CustomerCom.jsx index 88e222e..1ae1493 100644 --- a/src/components/customer/CustomerCom.jsx +++ b/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 (
- +
{ isError ? -

{allTransactions?.error}

+

{allCustomers?.error}

: <> {/* filter section */} @@ -80,21 +81,18 @@ export default function CustomerCom() {
{/* end of filter section */} - + {({ data }) => ( <> - @@ -105,31 +103,25 @@ export default function CustomerCom() { - -
- Request + Name Account - Activity - Action
- Icon + {/* Icon */}
-
{item?.transaction_id}
-
{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}
+
{item?.firstname} {item?.lastname}
+
{item?.email}
+
{item?.id}
-
{item?.account_id}
-
{item?.type}
-
- 		-
-
50%
-
-
-
+
{item?.username}
+
{item?.member_uid}
+
{getDateFromDateString(item?.profile_completed)}
- +
@@ -139,7 +131,7 @@ export default function CustomerCom() { )) :
+
No Record Found
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index d46dda4..908d3c0 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/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 }, diff --git a/src/components/loan_charges/LoanChargesCom.jsx b/src/components/loan_charges/BillingsCom.jsx similarity index 87% rename from src/components/loan_charges/LoanChargesCom.jsx rename to src/components/loan_charges/BillingsCom.jsx index b989dcc..b8d86c8 100644 --- a/src/components/loan_charges/LoanChargesCom.jsx +++ b/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 (
- +
{ isError ? -

{allLoanCharges?.error}

+

{allBillings?.error}

: <> {/* filter section */} @@ -79,7 +79,7 @@ export default function LoansChargesCom() {
{/* end of filter section */} - + {({ data }) => ( <> diff --git a/src/components/transactions/TransactionsCom.jsx b/src/components/transactions/SubscriptionsCom.jsx similarity index 88% rename from src/components/transactions/TransactionsCom.jsx rename to src/components/transactions/SubscriptionsCom.jsx index be94371..321d699 100644 --- a/src/components/transactions/TransactionsCom.jsx +++ b/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 (
- +
{ isError ? -

{allTransactions?.error}

+

{allSubcriptions?.error}

: <> {/* filter section */} @@ -80,7 +80,7 @@ export default function TransactionsCom() {
{/* end of filter section */} - + {({ data }) => ( <>
diff --git a/src/pages/BillingsPage.jsx b/src/pages/BillingsPage.jsx new file mode 100644 index 0000000..4b1c7dc --- /dev/null +++ b/src/pages/BillingsPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import BillingsCom from '../components/loan_charges/BillingsCom' + +export default function BillingsPage() { + return ( + + ) +} diff --git a/src/pages/LoanChargesPage.jsx b/src/pages/LoanChargesPage.jsx deleted file mode 100644 index 9e232ce..0000000 --- a/src/pages/LoanChargesPage.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import LoanChargesCom from '../components/loan_charges/LoanChargesCom' - -export default function LoanChargesPage() { - return ( - - ) -} diff --git a/src/pages/SubscriptionsPage.jsx b/src/pages/SubscriptionsPage.jsx new file mode 100644 index 0000000..b682582 --- /dev/null +++ b/src/pages/SubscriptionsPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import SubscriptionsCom from '../components/transactions/SubscriptionsCom' + +export default function SubscriptionsPage() { + return ( + + ) +} diff --git a/src/pages/TransactionsPage.jsx b/src/pages/TransactionsPage.jsx deleted file mode 100644 index a87efe0..0000000 --- a/src/pages/TransactionsPage.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import TransactionsCom from '../components/transactions/TransactionsCom' - -export default function TransactionsPage() { - return ( - - ) -} diff --git a/src/services/siteServices.js b/src/services/siteServices.js index 98127f7..6c2138c 100644 --- a/src/services/siteServices.js +++ b/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 } -- 2.34.1