From 3839962e33588d1e70c617a0d562556e3994fd3c Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 9 May 2024 07:25:29 +0100 Subject: [PATCH] aplication and bvn list added --- .../paginatedListing/RecentBVNList.tsx | 137 ++++++++++ .../paginatedListing/RecentLoanAppList.tsx | 137 ++++++++++ .../partials/widgets/lists/ListsWidget3.tsx | 56 +++-- .../widgets/tables/TablesWidget10.tsx | 236 +++++++++--------- src/app/pages/dashboard/DashboardWrapper.tsx | 3 +- src/app/pages/dashboard/model.ts | 71 +++--- 6 files changed, 470 insertions(+), 170 deletions(-) create mode 100644 src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx create mode 100644 src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx diff --git a/src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx b/src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx new file mode 100644 index 0000000..2c49f2c --- /dev/null +++ b/src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx @@ -0,0 +1,137 @@ +import { ReactNode, useEffect, useState } from "react"; +import { RecentBVNProps } from "../../../../app/pages/dashboard/model"; + +type PaginatedListProps = { + data: RecentBVNProps, + itemsPerPage?: number, + filterItem?: string[], + tableTitle?: string, + titleClass?:string, + children: (data:RecentBVNProps) => ReactNode; +} + +export default function RecentBVNList({ + data, + itemsPerPage = 5, + filterItem, + tableTitle, + titleClass, + children, +}:PaginatedListProps) { + const [searchTerm, setSearchTerm] = useState(""); + const [filteredData, setFilteredData] = useState(data); + + const [currentPage, setCurrentPage] = useState(0); + const [newData, setNewData] = useState([]); + + const numberOfSelection = itemsPerPage; + + const handlePrev = () => { + if (currentPage != 0) { + setCurrentPage((prev) => prev - numberOfSelection); + } + }; + const handleNext = () => { + if (currentPage < data.length) { + setCurrentPage((prev) => 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(() => { + setNewData( + filteredData?.slice(currentPage, numberOfSelection + currentPage) + ); + }, [currentPage, filteredData]); + + useEffect(()=>{ + setCurrentPage(0) + },[itemsPerPage]) + + return ( +
+

{tableTitle}

+ + {data.length > 0 && filterItem && ( +
+ {filterItem.map((item, index) => ( + + ))} +
+ )} + + {children(newData)} + + {/* show prev and next button if data exist */} + {(data.length > 0 && data.length > itemsPerPage) && ( +
+ + + {data.length && data.map((item, index)=>{ + item = item + if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){ + return ( + + ) + } + })} + + +
+ )} +
+ ); +} diff --git a/src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx b/src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx new file mode 100644 index 0000000..271dbea --- /dev/null +++ b/src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx @@ -0,0 +1,137 @@ +import { ReactNode, useEffect, useState } from "react"; +import { RecentApplicationsProps } from "../../../../app/pages/dashboard/model"; + +type PaginatedListProps = { + data: RecentApplicationsProps, + itemsPerPage?: number, + filterItem?: string[], + tableTitle?: string, + titleClass?:string, + children: (data:RecentApplicationsProps) => ReactNode; +} + +export default function RecentLoanAppList({ + data, + itemsPerPage = 5, + filterItem, + tableTitle, + titleClass, + children, +}:PaginatedListProps) { + const [searchTerm, setSearchTerm] = useState(""); + const [filteredData, setFilteredData] = useState(data); + + const [currentPage, setCurrentPage] = useState(0); + const [newData, setNewData] = useState([]); + + const numberOfSelection = itemsPerPage; + + const handlePrev = () => { + if (currentPage != 0) { + setCurrentPage((prev) => prev - numberOfSelection); + } + }; + const handleNext = () => { + if (currentPage < data.length) { + setCurrentPage((prev) => 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(() => { + setNewData( + filteredData?.slice(currentPage, numberOfSelection + currentPage) + ); + }, [currentPage, filteredData]); + + useEffect(()=>{ + setCurrentPage(0) + },[itemsPerPage]) + + return ( +
+

{tableTitle}

+ + {data.length > 0 && filterItem && ( +
+ {filterItem.map((item, index) => ( + + ))} +
+ )} + + {children(newData)} + + {/* show prev and next button if data exist */} + {(data.length > 0 && data.length > itemsPerPage) && ( +
+ + + {data.length && data.map((item, index)=>{ + item = item + if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){ + return ( + + ) + } + })} + + +
+ )} +
+ ); +} diff --git a/src/_digifi/partials/widgets/lists/ListsWidget3.tsx b/src/_digifi/partials/widgets/lists/ListsWidget3.tsx index ef2edf2..8f1e0ea 100644 --- a/src/_digifi/partials/widgets/lists/ListsWidget3.tsx +++ b/src/_digifi/partials/widgets/lists/ListsWidget3.tsx @@ -3,11 +3,12 @@ import React from 'react' import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter' // import {KTIcon} from '../../../helpers' // import {Dropdown1} from '../../content/dropdown/Dropdown1' -import { dashDataProps } from '../../../../app/pages/dashboard/model' +import { DashDataProps, RecentBVNProps } from '../../../../app/pages/dashboard/model' +import RecentBVNList from '../../../layout/components/paginatedListing/RecentBVNList' type Props = { className: string - dashData?: dashDataProps + dashData?: DashDataProps } const ListsWidget3: React.FC = ({dashData, className}) => { @@ -38,27 +39,36 @@ const ListsWidget3: React.FC = ({dashData, className}) => { null : dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ? - dashData?.data?.recent_bvn.map(item => ( -
- {/* begin::Bullet */} - - {/* end::Bullet */} - {/* begin::Checkbox */} -
- -
- {/* end::Checkbox */} - {/* begin::Description */} -
- - {item?.bvn} - - {NewDateTimeFormatter(item?.added)} -
- {/* end::Description */} - New -
- )) + + {(data:RecentBVNProps) => ( + <> + {data?.map(item => ( +
+ {/* begin::Bullet */} + + {/* end::Bullet */} + {/* begin::Checkbox */} +
+ +
+ {/* end::Checkbox */} + {/* begin::Description */} +
+ + {item?.bvn} + + {NewDateTimeFormatter(item?.added)} +
+ {/* end::Description */} + New +
+ ))} + + )} + :

No list Found!

} diff --git a/src/_digifi/partials/widgets/tables/TablesWidget10.tsx b/src/_digifi/partials/widgets/tables/TablesWidget10.tsx index b764410..03188af 100644 --- a/src/_digifi/partials/widgets/tables/TablesWidget10.tsx +++ b/src/_digifi/partials/widgets/tables/TablesWidget10.tsx @@ -1,18 +1,17 @@ import { FC } from 'react' import {KTIcon, toAbsoluteUrl} from '../../../helpers' -import { dashDataProps } from '../../../../app/pages/dashboard/model' +import { DashDataProps, RecentApplicationsProps } from '../../../../app/pages/dashboard/model' import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter' - +import RecentLoanAppList from '../../../layout/components/paginatedListing/RecentLoanAppList' type Props = { className: string - dashData?: dashDataProps + dashData?: DashDataProps } const TablesWidget10: FC = ({className, dashData}) => { - console.log('dashData', dashData?.data?.recent_applications) return (
{/* begin::Header */} @@ -42,116 +41,127 @@ const TablesWidget10: FC = ({className, dashData}) => { {/* begin::Body */} {dashData?.loading ? null + : dashData?.data?.recent_applications ? + + {(data:RecentApplicationsProps)=>( + <> +
+ {/* begin::Table container */} +
+ {/* begin::Table */} + + {/* begin::Table head */} + + + + + + + + + + {/* end::Table head */} + {/* begin::Table body */} + + {data && data.length ? + data.map(item => ( + + + + + + + + )) + : + + + + } + + {/* end::Table body */} +
+
+ +
+ 		AuthorsAmountProgressActions
+
+ +
+ 		+
+
+ +
+
+ + {item?.firstname} {item?.lastname} + + + {NewDateTimeFormatter(item?.added)} + +
+
+ 		+ + {item.loan_amount} + + + {item?.sales_agent? `Agent: ${item?.sales_agent}` : ``} + + +
+
+ 50% +
+
+
+
+
+ 		+ +
No data found!
+ {/* end::Table */} +
+ {/* end::Table container */} +
+ + )} + : -
- {/* begin::Table container */} -
- {/* begin::Table */} - - {/* begin::Table head */} - - - - - - - - - - {/* end::Table head */} - {/* begin::Table body */} - - {dashData?.data.recent_applications && dashData?.data.recent_applications.length ? - dashData?.data.recent_applications.map(item => ( - - - - - - - - )) - : - - - - } - - {/* end::Table body */} -
-
- -
- 		AuthorsCompanyProgressActions
-
- -
- 		-
-
- -
-
- - {item?.firstname} {item?.lastname} - - - {NewDateTimeFormatter(item?.added)} - -
-
- 		- - Intertico - - - Web, UI/UX Design - - -
-
- 50% -
-
-
-
-
- 		- -
No data found!
- {/* end::Table */} -
- {/* end::Table container */} -
+ null } {/* begin::Body */} diff --git a/src/app/pages/dashboard/DashboardWrapper.tsx b/src/app/pages/dashboard/DashboardWrapper.tsx index 5d889fd..e888ab1 100644 --- a/src/app/pages/dashboard/DashboardWrapper.tsx +++ b/src/app/pages/dashboard/DashboardWrapper.tsx @@ -19,9 +19,10 @@ import { import { ToolbarWrapper } from '../../../_digifi/layout/components/toolbar'; import { Content } from '../../../_digifi/layout/components/content'; import { getUserDashDetails } from '../../modules/auth/core/_requests'; +import { DashDataProps } from './model'; const DashboardPage: FC = () => { - const [dashDetails, setDashDetails] = useState({loading:true, data:{}}) + const [dashDetails, setDashDetails] = useState({loading:true, data:{}}) useEffect(()=>{ getUserDashDetails().then(res => { diff --git a/src/app/pages/dashboard/model.ts b/src/app/pages/dashboard/model.ts index 8ff8fd2..fa2dcf8 100644 --- a/src/app/pages/dashboard/model.ts +++ b/src/app/pages/dashboard/model.ts @@ -1,38 +1,43 @@ -export type dashDataProps = { +export type RecentApplicationsProps = { + firstname?: string + lastname?: string + uid?: string + loan_amount?: string + payment_month?: string + sales_agent?: string + gender?: string | null + marital_status?: string + email?: string + address?: string + state?: string + country?: string + status?: string + added?: string + updated?: string +}[] + +export type RecentBVNProps = { + id?: string + uid?: string + bvn?: string + status?: string + added?: string + updated?: string + firstname?: string | null + lastname?: string | null + middlename?: string | null + gender?: string | null + birthdate?: string | null + phone?: string | null + nationality?: string | null +}[] + + +export type DashDataProps = { loading: boolean, data: { call_return?: string - recent_applications? : { - firstname?: string - lastname?: string - uid?: string - loan_amount?: string - payment_month?: string - sales_agent?: string - gender?: string | null - marital_status?: string - email?: string - address?: string - state?: string - country?: string - status?: string - added?: string - updated?: string - }[] - recent_bvn?: { - id?: string - uid?: string - bvn?: string - status?: string - added?: string - updated?: string - firstname?: string | null - lastname?: string | null - middlename?: string | null - gender?: string | null - birthdate?: string | null - phone?: string | null - nationality?: string | null - }[] + recent_applications? : RecentApplicationsProps + recent_bvn?: RecentBVNProps } } \ No newline at end of file -- 2.34.1