diff --git a/src/assets/loans.png b/src/assets/loans.png new file mode 100644 index 0000000..b5c0435 Binary files /dev/null and b/src/assets/loans.png differ diff --git a/src/assets/loans2.png b/src/assets/loans2.png new file mode 100644 index 0000000..7ea9e54 Binary files /dev/null and b/src/assets/loans2.png differ diff --git a/src/assets/repay.png b/src/assets/repay.png new file mode 100644 index 0000000..ea661d1 Binary files /dev/null and b/src/assets/repay.png differ diff --git a/src/components/loan_charges/LoanChargesCom.jsx b/src/components/loan_charges/LoanChargesCom.jsx index b989dcc..1ef9d0c 100644 --- a/src/components/loan_charges/LoanChargesCom.jsx +++ b/src/components/loan_charges/LoanChargesCom.jsx @@ -1,33 +1,33 @@ -import { useEffect, useState } from 'react' +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 {getLoanCharges} from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; import formatNumber from '../../helpers/formatNumber' -import Avatar from '../../assets/user_avatar.jpg' +import Avatar from '../../assets/repay.png' export default function LoansChargesCom() { const [page, setPage] = useState(1) - const [allLoanCharges, setAllLoanCharges] = useState({loading:true, error:'', data:{}}) + const [allLoanCharges, setAllLoanCharges] = 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) } @@ -38,117 +38,130 @@ export default function LoansChargesCom() { const isFetching = allLoanCharges?.loading const isError = allLoanCharges?.error - useEffect(()=>{ - setAllLoanCharges(prev => ({...prev, loading:true})) + useEffect(() => { + setAllLoanCharges(prev => ({...prev, loading: true})) const payload = filter?.type ? {[filter?.type]: filter.id} : {} getLoanCharges({...payload, page}).then(res => { - if(res?.status != 200){ - setAllLoanCharges(prev => ({...prev, loading:false})) + if (res?.status != 200) { + setAllLoanCharges(prev => ({...prev, loading: false})) return } - setAllLoanCharges({loading:false, error:'', data:res?.data}) + setAllLoanCharges({loading: false, error: '', data: res?.data}) }).catch(err => { - setAllLoanCharges({loading:false, error:'error occurred', data:{}}) + setAllLoanCharges({loading: false, error: 'error occurred', data: {}}) console.log('ERR', err) }) - },[page, willFilter]) + }, [page, willFilter]) return (
- +
- { isError ? + {isError ?

{allLoanCharges?.error}

- : - <> - {/* filter section */} -
- -
- + : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+
-
- -
- -
- {/* end of filter section */} + {/* end of filter section */} - - {({ data }) => ( - <> - - - - - {/* + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + + + + + )) + : + + + + } + +
- Name - + + {({data}) => ( + <> + + + + + {/* */} - - - - - - - {(data && data.length > 0) ? data?.map((item, index) => ( - - - - - + + + - )) - : - - - - } - -
+ TransactionID/Fee Type + Loan - Amount - - Added - - Action -
-
- Jese image -
-
{item?.transaction_id || ''}
-
{item?.code}
-
-
- 		-
- {/*
{formatNumber(item?.initial_loan_amount)}
*/} -
{formatNumber(item?.amount)}
-
- 		-
-
{getDateFromDateString(item?.created_at)}
-
- 		-
-
- -
-
- 		+ Amount + + Added + + Action +
-
- No Record Found -
-
- - )} - - +
+
+ Jese image +
+
{item?.transaction_id || ''}
+
{item?.code}
+
+
+ 		+
+ {/*
{formatNumber(item?.initial_loan_amount)}
*/} +
#{formatNumber(item?.amount)}
+
+ 		+
+
{getDateFromDateString(item?.created_at)}
+
+ 		+
+
+ +
+
+
+
+ No Record Found +
+
+ + )} + + }
diff --git a/src/components/loanscom/LoansCom.jsx b/src/components/loanscom/LoansCom.jsx index 1d0b061..14cdfe5 100644 --- a/src/components/loanscom/LoansCom.jsx +++ b/src/components/loanscom/LoansCom.jsx @@ -1,34 +1,34 @@ -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 Avatar from '../../assets/loans.png' import RouteLinks from '../../RouteLinks'; 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,152 @@ 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 image -
-
{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 image +
+
{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/repayments/RepaymentsCom.jsx b/src/components/repayments/RepaymentsCom.jsx index 3fd1749..b098e50 100644 --- a/src/components/repayments/RepaymentsCom.jsx +++ b/src/components/repayments/RepaymentsCom.jsx @@ -1,32 +1,32 @@ -import { useEffect, useState } from 'react' +import {useEffect, useState} from 'react' import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' import Icons from '../Icons' -import { getRepayments } from '../../services/siteServices' +import {getRepayments} from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; -import Avatar from '../../assets/user_avatar.jpg' +import Avatar from '../../assets/loans2.png'; export default function RepaymentsCom() { const [page, setPage] = useState(1) - const [allRepayments, setAllRepayments] = useState({loading:true, error:'', data:{}}) + const [allRepayments, setAllRepayments] = 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) } @@ -37,114 +37,127 @@ export default function RepaymentsCom() { const isFetching = allRepayments?.loading const isError = allRepayments?.error - useEffect(()=>{ - setAllRepayments(prev => ({...prev, loading:true})) + useEffect(() => { + setAllRepayments(prev => ({...prev, loading: true})) const payload = filter?.type ? {[filter?.type]: filter.id} : {} getRepayments({...payload, page}).then(res => { - if(res?.status != 200){ - setAllRepayments(prev => ({...prev, loading:false})) + if (res?.status != 200) { + setAllRepayments(prev => ({...prev, loading: false})) return } - setAllRepayments({loading:false, error:'', data:res?.data}) + setAllRepayments({loading: false, error: '', data: res?.data}) }).catch(err => { - setAllRepayments({loading:false, error:'error occurred', data:{}}) + setAllRepayments({loading: false, error: 'error occurred', data: {}}) console.log('ERR', err) }) - },[page, willFilter]) + }, [page, willFilter]) return (
- +
- { isError ? + {isError ?

{allRepayments?.error}

- : - <> - {/* filter section */} -
- -
- + : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+
-
- -
- -
- {/* end of filter section */} + {/* end of filter section */} - - {({ data }) => ( - <> - - - - - {/* + } + +
- Name - + + {({data}) => ( + <> + + + + + {/* */} - - - - - - {(data && data.length > 0) ? data?.map((item, index) => ( - - - {/* + + + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + + {/* */} - - + + + )) + : + + - - )) - : - - - - } - -
+ CustomerID / ID:TrxID + Loan - Added - - Action -
-
- Jese image -
-
{item?.customer_id || ''}
-
{item?.loan_id} : {item?.transaction_id}
-
-
- 		+ + Added + + Action +
+
+ Jese image +
+
{item?.customer_id || ''}
+
{item?.loan_id} : {item?.transaction_id} +
+
+
+
{item?.loan}
{item?.description}
 -
-
{getDateFromDateString(item?.created_at)}
-
- 		-
-
- +
+
+
{getDateFromDateString(item?.created_at)}
+
+ 		+
+
+ +
+
+
+
+ No Record Found
- -
-
- No Record Found -
-
- - )} - - + +
+ + )} + + }
diff --git a/src/components/transactionDetails/LoanDetails.jsx b/src/components/transactionDetails/LoanDetails.jsx index c3e4409..a5d646f 100644 --- a/src/components/transactionDetails/LoanDetails.jsx +++ b/src/components/transactionDetails/LoanDetails.jsx @@ -3,7 +3,7 @@ import {useQuery} from "@tanstack/react-query"; import Icons from '../Icons' -import Avatar from '../../assets/user_avatar.jpg' +import Avatar from '../../assets/loans.png' import queryKeys from '../../services/queryKeys' import {getLoans} from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; diff --git a/src/components/transactions/TransactionsCom.jsx b/src/components/transactions/TransactionsCom.jsx index be94371..5e8be18 100644 --- a/src/components/transactions/TransactionsCom.jsx +++ b/src/components/transactions/TransactionsCom.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 { getTransactions } from '../../services/siteServices' +import {getTransactions} from '../../services/siteServices' import getDateFromDateString from '../../helpers/GetDateFromDateString'; import getTimeFromDateString from '../../helpers/GetTimeFromDateString'; import localImgLoader from '../../helpers/localImageLoader'; @@ -13,22 +13,22 @@ import RouteLinks from '../../RouteLinks'; export default function TransactionsCom() { const [page, setPage] = useState(1) - const [allTransactions, setAllTransaction] = useState({loading:true, error:'', data:{}}) + 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 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,119 +39,131 @@ export default function TransactionsCom() { const isFetching = allTransactions?.loading const isError = allTransactions?.error - useEffect(()=>{ - setAllTransaction(prev => ({...prev, loading:true})) + useEffect(() => { + setAllTransaction(prev => ({...prev, loading: true})) const payload = filter?.type ? {[filter?.type]: filter.id} : {} getTransactions({...payload, page}).then(res => { - if(res?.status != 200){ - setAllTransaction(prev => ({...prev, loading:false})) + if (res?.status != 200) { + setAllTransaction(prev => ({...prev, loading: false})) return } - setAllTransaction({loading:false, error:'', data:res?.data}) + setAllTransaction({loading: false, error: '', data: res?.data}) }).catch(err => { - setAllTransaction({loading:false, error:'error occurred', data:{}}) + setAllTransaction({loading: false, error: 'error occurred', data: {}}) console.log('ERR', err) }) - },[page, willFilter]) + }, [page, willFilter]) return (
- +
- { isError ? + {isError ?

{allTransactions?.error}

- : - <> - {/* filter section */} -
- -
- + : + <> + {/* filter section */} +
+ +
+ +
+
+ +
+
-
- -
- -
- {/* end of filter section */} + {/* end of filter section */} - - {({ data }) => ( - <> - - - - - - - - - - - {(data && data.length > 0) ? data?.map((item, index) => ( - - - - - + + {({data}) => ( + <> +
- Request - - Account - - Activity - - Action -
-
- Icon -
-
{item?.transaction_id}
-
{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}
-
-
- 		-
-
{item?.account_id}
-
{item?.type}
-
- 		-
-
50%
-
-
-
-
- 		-
-
- - - -
-
-
+ + + + + + - )) - : - - - - } - -
+ Request + + Account + + Customer/ID + + Action +
-
- No Record Found -
-
- - )} - - + + + {(data && data.length > 0) ? data?.map((item, index) => ( + + +
+ Icon +
+
{item?.transaction_id}
+
{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}
+
+
+ + +
+
{item?.account_id}
+
{item?.type}
+
+ + +
+
{item?.customer_id}
+
ID:{item?.id}
+
+ + +
+
+ + + +
+
+ + + )) + : + + +
+ No Record Found +
+ + + } + + + + )} + + }