diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..3cc32b5 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..57d78d0 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..d49a3aa Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..134531c Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..a16fed3 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 90e2046..7148422 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/RouteLinks.js b/src/RouteLinks.js index e2960ca..bc5b1f1 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -3,7 +3,7 @@ const RouteLinks = { homePage: '/', loansPage: '/loans', transactionsPage: '/transactions', - repaymentsPage: '/repayments', + customerPage: '/customer', loanChargesPage: '/loan-charges', offers: '/offers', transaction_details_page: '/transaction/details', diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index 120568b..7312775 100644 --- a/src/SiteRoutes.jsx +++ b/src/SiteRoutes.jsx @@ -9,7 +9,7 @@ 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 RepaymentsPage from './pages/RepaymentsPage' // REPAYMENTS PAGE +import CustomerPage from './pages/CustomerPage' // REPAYMENTS PAGE import LoanChargesPage from './pages/LoanChargesPage' // LOAN CHARGES PAGE import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE import OffersPage from './pages/OffersPage' // LOAN OFFERS PAGE @@ -27,7 +27,7 @@ export default function SiteRoutes() { } /> {`*/HOME PAGE*/`} } /> {`*/LOANS PAGE*/`} } /> {`*/Transactions PAGE*/`} - } /> {`*/REPAYMENTS PAGE*/`} + } /> {`*/CUSTOMER PAGE*/`} } /> {`*/LOAN CHARGES PAGE*/`} } /> {`*/TRANSACTION PAGE*/`} } /> {`*/LOAN OFFERS PAGE*/`} diff --git a/src/components/customer/CustomerCom.jsx b/src/components/customer/CustomerCom.jsx new file mode 100644 index 0000000..88e222e --- /dev/null +++ b/src/components/customer/CustomerCom.jsx @@ -0,0 +1,159 @@ +import { useEffect, useState } from 'react' +import {Link} from 'react-router-dom' + +import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' +import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' +import Icons from '../Icons' +import { getCustomers } 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 CustomerCom() { + + const [page, setPage] = useState(1) + const [allTransactions, setAllTransaction] = 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})) + } + + 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 transactions = allTransactions?.data?.transactions // TRANSACTIONS LIST + const pagination = allTransactions?.data?.pagination + const isFetching = allTransactions?.loading + const isError = allTransactions?.error + + useEffect(()=>{ + setAllTransaction(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})) + return + } + setAllTransaction({loading:false, error:'', data:res?.data}) + }).catch(err => { + setAllTransaction({loading:false, error:'error occurred', data:{}}) + console.log('ERR', err) + }) + },[page, willFilter]) + + return ( +
+ + +
+ { isError ? +

{allTransactions?.error}

+ : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+ +
+ {/* end of filter section */} + + + {({ data }) => ( + <> + + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + )) + : + + + + } + +
+ Request + + Account + + Activity + + Action +
+
+ Icon +
+
{item?.transaction_id}
+
{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}
+
+
+ 		+
+
{item?.account_id}
+
{item?.type}
+
+ 		+
+
50%
+
+
+
+
+ 		+
+
+ + + +
+
+
+
+ No Record Found +
+
+ + )} + + + } +
+
+ ) +} \ No newline at end of file diff --git a/src/components/customer/_CustomerCom.jsx b/src/components/customer/_CustomerCom.jsx new file mode 100644 index 0000000..6f56217 --- /dev/null +++ b/src/components/customer/_CustomerCom.jsx @@ -0,0 +1,163 @@ +import React, { useState } from 'react' +import { useQuery, useQueryClient } from "@tanstack/react-query"; +import {Link} from 'react-router-dom' + +import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' +import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' +import Icons from '../Icons' + +import Avatar from '../../assets/user_avatar.jpg' +import queryKeys from '../../services/queryKeys' +import {getCustomers} 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 CustomerCom() { + + const queryClient = useQueryClient() + + const [page, setPage] = useState(1) + + const [filter, setFilter] = useState({transaction_id: '', account_id: ''}) + const handleFilter = ({target:{name, value}}) => { + setFilter(prev => ({...prev, [name]:value})) + } + + const handleFilterByParams = () => { + // setPage(1) + queryClient.invalidateQueries({ queryKey: [...queryKeys.customer] }) + } + + const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({ + queryKey: [...queryKeys.customer, page], + queryFn: () => getCustomers({...filter, page}), + staleTime: 0, + // placeholderData: keepPreviousData, + }) + + const transactions = data?.data?.transactions // TRANSACTIONS LIST + const pagination = data?.data?.pagination + + return ( +
+ + +
+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : + <> + {/* filter section */} +
+ +
+
+

Transaction ID

+ +
+
+

Account ID

+ +
+
+ +
+ {/* end of filter section */} + + + {({ data }) => ( + <> + + + + + + + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + )) + : + + + + } + +
+ Request + + Account + + Activity + + Action +
+
+ Icon +
+
{item?.transaction_id}
+
{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}
+
+
+ 		+
+
{item?.account_id}
+
{item?.type}
+
+ 		+
+
50%
+
+
+
+
+ 		+
+
+ + + +
+
+
+
+ No Record Found +
+
+ + )} + + + } +
+
+ ) +} \ No newline at end of file diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index 2a24eaf..d46dda4 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/src/components/layouts/aside/DashboardAside.jsx @@ -137,10 +137,10 @@ export default function DashboardAside() { const asideNavLinks = [ {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage}, - {name:'Deployments', title:'Loan', status:1, icon: 'arrow-right', subLinks: [ + {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: 'Customers', status:1, icon: 'dot', to: RouteLinks.repaymentsPage}, + {name: 'Customers', status:1, icon: 'dot', to: RouteLinks.customerPage}, {name: 'Billings', status:1, icon: 'dot', to: RouteLinks.loanChargesPage}, {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [ {name: 'Product Settings', status:1, icon: 'dot', to: RouteLinks.offers }, diff --git a/src/pages/CustomerPage.jsx b/src/pages/CustomerPage.jsx new file mode 100644 index 0000000..428fdc0 --- /dev/null +++ b/src/pages/CustomerPage.jsx @@ -0,0 +1,7 @@ +import React from 'react' +import CustomerCom from '../components/customer/CustomerCom' +export default function CustomerPage() { + return ( + + ) +} diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index 86ff66a..46e18ae 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -1,5 +1,6 @@ const queryKeys = { dashboard: ['dashboard'], + customer:['customer'], loans: ['loans'], transactions: ['transactions'], repayment_schedule: ['repayment-schedule'], diff --git a/src/services/siteServices.js b/src/services/siteServices.js index 25d37ff..98127f7 100644 --- a/src/services/siteServices.js +++ b/src/services/siteServices.js @@ -62,6 +62,12 @@ export const getLoans = (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 }