diff --git a/src/components/customer/CustomerCom.jsx b/src/components/customer/CustomerCom.jsx index 29100d3..44e472c 100644 --- a/src/components/customer/CustomerCom.jsx +++ b/src/components/customer/CustomerCom.jsx @@ -1,10 +1,10 @@ -import { useEffect, useState } from 'react' +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 {getCustomers} from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; // import getTimeFromDateString from '../../helpers/GetTimeFromDateString'; // import localImgLoader from '../../helpers/localImageLoader'; @@ -13,23 +13,23 @@ import getDateFromDateString from '../../helpers/GetDateFromDateString'; export default function CustomerCom() { const [page, setPage] = useState(1) - const [allCustomers, setAllCustomers] = 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})) + + const handleFilter = ({target: {name, value}}) => { + setFilter(prev => ({...prev, [name]: value})) } const handleFilterByParams = () => { - if(filter.type && !filter.id){ + if (filter.type && !filter.id) { return - }else if(!filter.type){ + } else if (!filter.type) { setPage(1) setWillFilter(prev => !prev) setFilter({type: '', id: ''}) - }else{ + } else { setPage(1) setWillFilter(prev => !prev) } @@ -40,110 +40,122 @@ export default function CustomerCom() { const isFetching = allCustomers?.loading const isError = allCustomers?.error - useEffect(()=>{ - setAllCustomers(prev => ({...prev, loading:true})) + useEffect(() => { + setAllCustomers(prev => ({...prev, loading: true})) const payload = filter?.type ? {[filter?.type]: filter.id} : {} getCustomers({...payload, page}).then(res => { - if(res?.status != 200){ - setAllCustomers(prev => ({...prev, error:'Opps, an error occurred', loading:false})) + if (res?.status !== 200) { + setAllCustomers(prev => ({...prev, error: 'Opps, an error occurred', loading: false})) return } - setAllCustomers({loading:false, error:'', data:res?.data}) + setAllCustomers({loading: false, error: '', data: res?.data}) }).catch(err => { - setAllCustomers({loading:false, error:'error occurred', data:{}}) + setAllCustomers({loading: false, error: 'error occurred', data: {}}) console.log('ERR', err) }) - },[page, willFilter]) + }, [page, willFilter]) return (
- +
- { isError ? + {isError ?

{allCustomers?.error}

- : - <> - {/* filter section */} -
- -
- + : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+
-
- -
- -
- {/* end of filter section */} + {/* end of filter section */} - - {({ data }) => ( - <> - - - - - - - - - - {(data && data.length > 0) ? data?.map((item, index) => ( - - - - + + {({data}) => ( + <> +
- Name - - Account - - Action -
-
- {/* Icon */} -
-
{item?.firstname} {item?.lastname}
-
{item?.email}
-
{item?.id}
-
-
- 		-
-
{item?.username}
-
{item?.member_uid}
-
{getDateFromDateString(item?.profile_completed)}
-
- 		-
-
- - - -
-
-
+ + + + + - )) - : - - - - } - -
+ Name + + Account + + Action +
-
- No Record Found -
-
- - )} - - + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + +
+ {/* Icon */} +
+
{item?.firstname} {item?.lastname}
+
{item?.email}
+
{item?.id}
+
+
+ + +
+
{item?.username}
+
{item?.member_uid}
+
{getDateFromDateString(item?.profile_completed)}
+
+ + +
+
+ + + +
+
+ + + )) + : + + +
+ No Record Found +
+ + + } + + + + )} + + }
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index 232e97f..b616985 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/src/components/layouts/aside/DashboardAside.jsx @@ -5,8 +5,8 @@ import MainBtn from "../../MainBtn"; import AsideLink from "./AsideLink"; import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks"; // import { useSelector } from "react-redux"; -import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext"; -import { TbLogout2 } from "react-icons/tb"; +import {GeneralLayoutContext} from "../../../context/GeneralLayoutContext"; +import {TbLogout2} from "react-icons/tb"; import UserAvatar from '../../../assets/user_avatar.jpg' import Icons from "../../Icons"; @@ -19,138 +19,148 @@ export default function DashboardAside() { // const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS // const {role}= userDetails - return ( -
-
- -
- {/*
*/} + return ( +
+
+ +
+ {/*
*/} -
- {asideNavLinks.map((link, index) => { - let active = link.status === 1 ? true : false - let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false - if(active && !hasSubLinks){ - return ( -
- -
- ) - } - if(active && hasSubLinks){ - let subLinkList = [] - link.subLinks.forEach(item =>{ - if(item.to){ - subLinkList.push(item.to) - }else if(item.subLinks?.length > 0){ - item.subLinks.forEach(item => { +
+ {asideNavLinks.map((link, index) => { + let active = link.status === 1 ? true : false + let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false + if (active && !hasSubLinks) { + return ( +
+ +
+ ) + } + if (active && hasSubLinks) { + let subLinkList = [] + link.subLinks.forEach(item => { + if (item.to) { subLinkList.push(item.to) - }) - } - }) - return ( -
- {link.title && -

{link.title}

- } - - <> - {link.subLinks.map((subItem, index)=>{ - let active = subItem.status === 1 ? true : false - let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false - if(active && !hasSubLinks){ - return ( -
- -
- ) - }else if(active && hasSubLinks){ - let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open - if(item.to){ - return item.to - } - }) - return( - - <> - {subItem.subLinks.map((item, index)=>{ - let active = item.status === 1 ? true : false - if(active){ - return ( -
- + } else if (item.subLinks?.length > 0) { + item.subLinks.forEach(item => { + subLinkList.push(item.to) + }) + } + }) + return ( +
+ {link.title && +

{link.title}

+ } + + <> + {link.subLinks.map((subItem, index) => { + let active = subItem.status === 1 ? true : false + let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false + if (active && !hasSubLinks) { + return ( +
+
) - }else{ - return null - } - })} - - - ) - }else{ - return null - } - })} - - -
- ) - }else{ - return null - } - })} -
- -
-
-
- user avatar -
-

Username

-

username@gmail.com

-
-
- -
-
-
-
-

Username

-

username@gmail.com

+ } else if (active && hasSubLinks) { + let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open + if (item.to) { + return item.to + } + }) + return ( + + <> + {subItem.subLinks.map((item, index) => { + let active = item.status === 1 ? true : false + if (active) { + return ( +
+ +
+ ) + } else { + return null + } + })} + + + ) + } else { + return null + } + })} + +
+ ) + } else { + return null + } + })} +
+ +
+
+
+ user avatar +
+

Username

+

username@gmail.com

-
- setLogoutModal(true)} - > - - +
+ +
+
+
+
+

Username

+

username@gmail.com

+
+
+
+ setLogoutModal(true)} + > + + +
-
- ) + ) } 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: 'Provisions', status:1, icon: 'dot', to: RouteLinks.subscriptions}, - {name: 'Customers', status:1, icon: 'dot', to: RouteLinks.customerPage}, - {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: 'Admin Manager', status:1, icon: 'dot', to: RouteLinks.offers }, - ] - }, + {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: 'Provisions', status: 1, icon: 'dot', to: RouteLinks.subscriptions}, + {name: 'Customers', status: 1, icon: 'dot', to: RouteLinks.customerPage}, + {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: 'Admin Manager', status: 1, icon: 'dot', to: RouteLinks.offers}, + ] + }, ], }, ] diff --git a/src/components/loanscom/LoansCom.jsx b/src/components/loanscom/LoansCom.jsx index 79ecad3..d4af909 100644 --- a/src/components/loanscom/LoansCom.jsx +++ b/src/components/loanscom/LoansCom.jsx @@ -1,10 +1,10 @@ -import { useEffect, useState } from 'react' +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 { getLoans } from '../../services/siteServices' +import {getLoans} from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; import Avatar from '../../assets/user_avatar.jpg' import RouteLinks from '../../RouteLinks'; @@ -13,22 +13,22 @@ import formatNumber from '../../helpers/formatNumber' export default function LoansCom() { const [page, setPage] = useState(1) - const [allLoans, setAllLoans] = useState({loading:true, error:'', data:{}}) + const [allLoans, setAllLoans] = 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 handleFilter = ({target: {name, value}}) => { + setFilter(prev => ({...prev, [name]: value})) } const handleFilterByParams = () => { - if(filter.type && !filter.id){ + if (filter.type && !filter.id) { return - }else if(!filter.type){ + } else if (!filter.type) { setPage(1) setWillFilter(prev => !prev) setFilter({type: '', id: ''}) - }else{ + } else { setPage(1) setWillFilter(prev => !prev) } @@ -39,134 +39,151 @@ export default function LoansCom() { const isFetching = allLoans?.loading const isError = allLoans?.error - useEffect(()=>{ - setAllLoans(prev => ({...prev, loading:true})) + useEffect(() => { + setAllLoans(prev => ({...prev, loading: true})) const payload = filter?.type ? {[filter?.type]: filter.id} : {} getLoans({...payload, page}).then(res => { - if(res?.status != 200){ - setAllLoans(prev => ({...prev, loading:false})) + if (res?.status !== 200) { + setAllLoans(prev => ({...prev, loading: false})) return } - setAllLoans({loading:false, error:'', data:res?.data}) + setAllLoans({loading: false, error: '', data: res?.data}) }).catch(err => { - setAllLoans({loading:false, error:'error occurred', data:{}}) + setAllLoans({loading: false, error: 'error occurred', data: {}}) console.log('ERR', err) }) - },[page, willFilter]) + }, [page, willFilter]) return (
- +
- { isError ? + {isError ?

{allLoans?.error}

- : - <> - {/* filter section */} -
- -
- + : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+
-
- -
- -
- {/* end of filter section */} + {/* end of filter section */} - - {({ data }) => ( - <> - - - - - - - - - - - - - {(data && data.length > 0) ? data?.map((item, index) => ( - - - - - - - + + {({data}) => ( + <> +
- Name - - Loan Amount - - Product/Tenor - - Repay/Install Amount - - Added - - Action -
-
- Jese -
-
{item?.account_id || ''}
-
{item?.id} : {item?.transaction_id}
-
-
- 		-
- {/*
{formatNumber(item?.initial_loan_amount)}
*/} -
{formatNumber(item?.initial_loan_amount)}
-
- 		-
-
{formatNumber(item?.product_id)}
-
{item?.tenor} days
-
- 		-
-
{formatNumber(item?.repayment_amount)}
-
{formatNumber(item?.installment_amount)}
-
- 		-
-
{getDateFromDateString(item?.created_at)}
-
- 		-
-
- - - -
-
-
+ + + + + + + + - )) - : - - - - } - -
+ Name + + Loan Amount + + Product/Tenor + + Repay/Install Amount + + Added + + Action +
-
- No Record Found -
-
- - )} - - + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + +
+ Jese +
+
{item?.account_id || ''}
+
{item?.id} : {item?.transaction_id}
+
+
+ + +
+ {/*
{formatNumber(item?.initial_loan_amount)}
*/} +
{formatNumber(item?.initial_loan_amount)}
+
+ + +
+
{formatNumber(item?.product_id)}
+
{item?.tenor} days +
+
+ + +
+
{formatNumber(item?.repayment_amount)}
+
{formatNumber(item?.installment_amount)}
+
+ + +
+
{getDateFromDateString(item?.created_at)}
+
+ + +
+
+ + + +
+
+ + + )) + : + + +
+ No Record Found +
+ + + } + + + + )} + + }
diff --git a/src/components/transactionDetails/LoanChargeDetails.jsx b/src/components/transactionDetails/LoanChargeDetails.jsx index ce7559f..8fe42ca 100644 --- a/src/components/transactionDetails/LoanChargeDetails.jsx +++ b/src/components/transactionDetails/LoanChargeDetails.jsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react' -import { useQuery } from "@tanstack/react-query"; +import React, {useState} from 'react' +import {useQuery} from "@tanstack/react-query"; // import Icons from '../Icons' @@ -26,15 +26,15 @@ export default function LoanChargeDetails({transactionID}) { return (

Loan Charges

- {isFetching ? - <> -

Loading...

- - : isError ? -

{error.message}

- : - - + {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : +
+ */} - - + + {(loanCharges && loanCharges.length > 0) ? loanCharges?.map((item, index) => ( - - - - - {/* + + + + {/* */} + + )) + : + + - )) - : - - - } - -
Name @@ -52,51 +52,53 @@ export default function LoanChargeDetails({transactionID}) { Action
-
- Jese -
-
{item?.transaction_id || ''}
- {/*
{item?.description}
*/} -
{item?.loan_id} : {item?.code}
-
-
- 		-
- {/*
{formatNumber(item?.initial_loan_amount)}
*/} -
{formatNumber(item?.amount)}
-
- 		-
-
{item?.created_at ? getDateFromDateString(item?.created_at) : 'Not available'}
-
- 		+
+
+ Jese +
+
{item?.transaction_id || ''}
+ {/*
{item?.description}
*/} +
{item?.loan_id} : {item?.code}
+
+
+ 		+
+ {/*
{formatNumber(item?.initial_loan_amount)}
*/} +
{formatNumber(item?.amount)}
+
+ 		+
+
{item?.created_at ? getDateFromDateString(item?.created_at) : 'Not available'}
+
+
+
+ No Record Found +
+
-
- No Record Found -
-
+ + }
)