diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index 9406594..c32fcd7 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -1,7 +1,11 @@ -import React, { FC } from "react"; +import React, { FC, useState, useEffect } from "react"; import NairaBag from "../../assets/images/dashboard/naira-bag.png"; -import { Button } from "../"; +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"; export interface DashBoardCardProps { title?: string; @@ -75,8 +79,31 @@ interface DashboardHomeIntroProps { const DashboardHomeIntro: FC = ({ handleNextStep, step }) => { const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable + + const [userLoanList, setUserLoanList] = useState<{loading:boolean, data:PendingTableList}>({loading: true, data:[]}) + + useEffect(()=>{ + let token = localStorage.getItem('token') + let uid = localStorage.getItem('uid') + if(!token || !uid){ + return + } + getUserPendingLoanList(uid).then(res => { + console.log('RES', res) + console.log('RES', userLoanList) + if(!res || !res.data.loans){ + setUserLoanList({loading:false, data:[]}) + return + } + setUserLoanList({loading:false, data:res?.data?.loans}) + }).catch(err => { + console.log(err) + setUserLoanList({loading:false, data:[]}) + }) + },[]) + return ( - <> +
{step == 1 ? <>

Hello, {userDetails.firstname}

@@ -114,7 +141,50 @@ const DashboardHomeIntro: FC = ({ handleNextStep, step
} - + {userLoanList.loading ? + null + : +
+ + {(data:any)=>( +
+ + + + + + + + + + + + {data.map((item:any, index:any) =>( + + + + + + + + ))} + +
DateAmountPayment TermStatusAction
{NewDateTimeFormatter(item?.added)}{item?.loan_amount}{item?.payment_month}{item?.status} + +
+
+ )} + +
+ } + ); }; diff --git a/src/components/Icons/Icons.tsx b/src/components/Icons/Icons.tsx index 70e8584..ec8bbc6 100644 --- a/src/components/Icons/Icons.tsx +++ b/src/components/Icons/Icons.tsx @@ -1,4 +1,4 @@ -import { FaCaretDown } from "react-icons/fa"; +import { FaCaretDown, FaCaretRight } from "react-icons/fa"; import dashIcon from "../../assets/images/dashboard/dashDefault.svg"; type Props = { @@ -111,6 +111,8 @@ export default function Icons({ name, fillColor, className }: Props) { ) :name == 'arrow-down'? + :name == 'arrow-right'? + :name == "dash-icon" ? ( dash-icon ) : null} diff --git a/src/components/paginated-list/PendingList.tsx b/src/components/paginated-list/PendingList.tsx new file mode 100644 index 0000000..990e4e8 --- /dev/null +++ b/src/components/paginated-list/PendingList.tsx @@ -0,0 +1,134 @@ +import { ReactNode, useEffect, useState } from "react"; +import { PendingTableList } from "../../core/models"; + +type PaginatedListProps = { + data: PendingTableList, + itemsPerPage?: number, + filterItem?: string[], + tableTitle?: string, + titleClass?:string, + children: (data:PendingTableList) => ReactNode; +} + +export default function PendingList({ + 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/core/apiRequest.ts b/src/core/apiRequest.ts index 916615f..00c85c9 100644 --- a/src/core/apiRequest.ts +++ b/src/core/apiRequest.ts @@ -26,11 +26,18 @@ export const applyForLoan = (postData:any) => { return postAuxEnd('/loan/apply', reqData) } - // FUNCTION TO GET USER BY CUSTOMER UID export const getUserByID = (uid:string) => { let reqData = { // customer_uid: localStorage.getItem('uid'), } return getAuxEnd(`/profile?uid=${uid}`, reqData) +} + +// FUNCTION TO GET USER BY CUSTOMER UID +export const getUserPendingLoanList = (uid:string) => { + let reqData = { + // customer_uid: localStorage.getItem('uid'), + } + return getAuxEnd(`/dash?uid=${uid}`, reqData) } \ No newline at end of file diff --git a/src/core/models.ts b/src/core/models.ts index a0da8dd..90a29f9 100644 --- a/src/core/models.ts +++ b/src/core/models.ts @@ -15,4 +15,13 @@ export interface User { token?:string customer_uid?:string call_return?:string - } \ No newline at end of file + } + + +export type PendingTableList = { + status?: string | boolean; + application_uid?: string + added?: string + loan_amount?: string + payment_month?: string +}[]; \ No newline at end of file diff --git a/src/lib/NewDateTimeFormatter.ts b/src/lib/NewDateTimeFormatter.ts new file mode 100644 index 0000000..18da0e7 --- /dev/null +++ b/src/lib/NewDateTimeFormatter.ts @@ -0,0 +1,18 @@ + +export function NewDateTimeFormatter(isoDateString:any, addHour = true) { + const date = new Date(isoDateString); + if (addHour) { + date.setTime(date.getTime() + 1 * 60 * 60 * 1000); + } + const formattedDate = date.toLocaleDateString("en-US", { + year: "numeric", + month: "numeric", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + // second: "2-digit", + hour12: true, + timeZone: "UTC", + }); + return formattedDate; + } \ No newline at end of file