From 69b0f8a54dd84f651968f6d2d3702f3c2b4c9a4b Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 17 Sep 2024 19:19:47 +0100 Subject: [PATCH] added reference strict validation --- .../Dashboard/DashboardHomeIntro.tsx | 116 ++++++++------ .../home/DashboardHomeRefereeInfo.tsx | 8 +- src/components/MainBtn.tsx | 30 ++++ src/components/tableWrapper/TableWrapper.tsx | 149 ++++++++++++++++++ src/core/apiRequest.ts | 8 + src/pages/DashboardLegalsPage.tsx | 93 ++++++++++- 6 files changed, 352 insertions(+), 52 deletions(-) create mode 100644 src/components/MainBtn.tsx create mode 100644 src/components/tableWrapper/TableWrapper.tsx diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index 9087823..585ff37 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -3,13 +3,13 @@ import NairaBag from '../../assets/images/dashboard/naira-bag.png'; import {useNavigate} from 'react-router-dom' import { Button, Icons } from '../'; import { useSelector } from 'react-redux'; -import PendingList from '../paginated-list/PendingList'; import { PendingTableList } from '../../core/models'; import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter'; import { getUserPendingLoanList } from '../../core/apiRequest'; import {FormatAmount} from '../../lib/FormatAmount' import PendingLoanPopout from './PendingLoanPopout'; import { RouteHandler } from '../../router/routes'; +import TableWrapper from '../tableWrapper/TableWrapper'; export interface DashBoardCardProps { title?: string; @@ -170,58 +170,76 @@ const DashboardHomeIntro: FC = ({ )} {userLoanList.loading ? null : (
- - {(data: any) => ( -
- - - - - - - - - - - - {data.map((item: any, index: any) => ( - - - - - - - - ))} - + {({ data }:{data:any}) => ( + <> +
+
DateAmount - Payment Term - StatusAction
- {NewDateTimeFormatter(item?.added)} - - {FormatAmount(item?.loan_amount)} - - {item?.payment_month} - - - - -
+ + + + + + + + + + + {(data && data.length > 0) ? data?.map((item:any) => ( + + + + + + + + )) + : + + + + } +
+ Date + + Amount + + Payment Term + + Status + + Action +
+ {NewDateTimeFormatter(item?.added)} + + {FormatAmount(item?.loan_amount)} + + {item?.payment_month} + + + + +
+
+ No Record Found +
+
- )} - + + )} +
)} diff --git a/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx b/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx index ee00a6b..5366d67 100644 --- a/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx +++ b/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx @@ -42,16 +42,20 @@ const validationSchema = Yup.object().shape({ .min(11, "must be 11 digits") .max(11, "must be 11 digits"), ref_two_name: Yup.string() - .required("Required"), + .notOneOf([Yup.ref('ref_name')], "Name cannot be the same") + .required("Required"), ref_two_email: Yup.string() .email("Invalid") + .notOneOf([Yup.ref('ref_email')], "Email cannot be the same") .required("Required"), ref_two_phone_number: Yup.string() + .notOneOf([Yup.ref('ref_phone_number')], "Phone number cannot be the same") .required("Required"), ref_two_relationship: Yup.string() .required("Required"), ref_two_bvn: Yup.string() - .required("BVN is required") + .notOneOf([Yup.ref('ref_bvn')], "BVN number cannot be the same") + .required("Required") .test("no-e", "Invalid number", (value:any) => { if (value && /^[0-9]*$/.test(value) == false) { return false; diff --git a/src/components/MainBtn.tsx b/src/components/MainBtn.tsx new file mode 100644 index 0000000..35c1a46 --- /dev/null +++ b/src/components/MainBtn.tsx @@ -0,0 +1,30 @@ +type Props ={ + text: string + onClick?: ()=>any + className?: string + shrinkAside?: boolean + icon?: string + loading?: boolean + disabled?: boolean +} + +export default function MainBtn({ + onClick, + className, + text, + shrinkAside, + icon, + loading, + disabled +}:Props) { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/tableWrapper/TableWrapper.tsx b/src/components/tableWrapper/TableWrapper.tsx new file mode 100644 index 0000000..9897e00 --- /dev/null +++ b/src/components/tableWrapper/TableWrapper.tsx @@ -0,0 +1,149 @@ +import { ReactNode, useEffect, useState } from "react"; +import MainBtn from "../MainBtn"; + +const data1:{ name: string; email: string; status: string; location: string; }[] = []; + +type PaginatedListProps = { + data: any, + itemsPerPage: number, + filterItem?: string[], + titleClass?:string, + children: (data:any) => ReactNode; +} + +export default function TableWrapper({ + data = data1, + itemsPerPage = 5, + filterItem, + children, +}:PaginatedListProps) { + const [isLoading, setIsLoading] = useState(true) + const [searchTerm, setSearchTerm] = useState(""); + const [filteredData, setFilteredData] = useState(data); + + const [currentPage, setCurrentPage] = useState(0); + const [newData, setNewData] = useState<{ name: string; email: string; status: string; location: string; }[]>([]); + + const numberOfSelection = itemsPerPage; + + const handlePrev = () => { + if (currentPage != 0) { + setCurrentPage((prev:any) => prev - numberOfSelection); + } + }; + const handleNext = () => { + if (currentPage < data.length) { + setCurrentPage((prev:any) => prev + numberOfSelection); + } + }; + + const handleSearch = ({ target: { value } }:{target: {value:string}}, name:string) => { + setSearchTerm(value); + let newFilteredData:any = data.filter((item:any) => + item[name].toLowerCase().startsWith(value.toLowerCase()) + ); + setFilteredData(newFilteredData); + setCurrentPage(0); + }; + + useEffect(() => { + setIsLoading(true) + setTimeout(()=>{ + setNewData( + filteredData?.slice(currentPage, numberOfSelection + currentPage) + ); + setIsLoading(false) + },1000) + }, [currentPage, filteredData]); + + useEffect(()=>{ + setCurrentPage(0) + },[itemsPerPage]) + + return ( +
+ {data.length > 0 && filterItem && ( +
+ {filterItem.map((item, index) => ( + + ))} +
+ )} + +
+
+ {children({ data: newData })} +
+ + {/* PAGINATION BUTTON */} + {(newData.length > 0 && data.length > itemsPerPage) && +
+
Showing + {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`} of {data.length} +
+
+ + = data.length ? 'bg-sky-600/50 pointer-events-none' : 'bg-sky-600'} text-white-light`} + disabled={isLoading} + /> +
+
+ } +
+ + {/* show prev and next button if data exist */} + {/* {data.length > 0 && ( + {data.length && data.map((item, index)=>{ + item = item + if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){ + return ( + + ) + } + })} +
+ )} */} + {isLoading && } + + ); +} + +const TableIsLoading = () => { + return ( +
+

Loading...

+
+ ) +} \ No newline at end of file diff --git a/src/core/apiRequest.ts b/src/core/apiRequest.ts index 2005624..984da94 100644 --- a/src/core/apiRequest.ts +++ b/src/core/apiRequest.ts @@ -83,4 +83,12 @@ export const addCard = (postData:any) => { ...postData } return postAuxEnd('/addcard', reqData) +} + +// FUNCTION TO GET USER AGREEMENTS LIST +export const getAgreementsList = () => { + let reqData = { + uid: localStorage.getItem('uid'), + } + return getAuxEnd(`/agreements?uid=${reqData?.uid}`, null) } \ No newline at end of file diff --git a/src/pages/DashboardLegalsPage.tsx b/src/pages/DashboardLegalsPage.tsx index 5101c4f..613800b 100644 --- a/src/pages/DashboardLegalsPage.tsx +++ b/src/pages/DashboardLegalsPage.tsx @@ -1,5 +1,96 @@ +import {useEffect, useState} from 'react' +import TableWrapper from "../components/tableWrapper/TableWrapper"; +import { getAgreementsList } from '../core/apiRequest'; +import { NewDateTimeFormatter } from '../lib/NewDateTimeFormatter'; +import { FormatAmount } from '../lib/FormatAmount'; + export default function DashboardLegalsPage() { + + const [agreementList, setAgreementList] = useState({loading:true, data:[]}) + + useEffect(()=>{ + getAgreementsList() + .then((res) => { + if (!res || !res.data) { + setAgreementList({ loading: false, data: [] }); + return; + } + setAgreementList({ loading: false, data: res?.data }); + }) + .catch((err) => { + setAgreementList({ loading: false, data: [] }); + console.log(err) + }); + },[]) + return ( -
DashboardLegals
+
+

Agreements

+ {agreementList.loading ? null : ( +
+ + {({ data }:{data:any}) => ( + <> +
+ + + + + + + + + + + {(data && data.length > 0) ? data?.map((item:any) => ( + + + + + + + )) + : + + + + } + +
+ Date + + Amount + + Payment Term + + Status +
+ {NewDateTimeFormatter(item?.added)} + + {FormatAmount(item?.loan_amount)} + + {item?.payment_month} + + +
+
+ No Record Found +
+
+
+ + )} + +
+ )} +
) }