From a2e039eab415eab6a05e0520f53ecf4155d2cc89 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 6 May 2024 14:44:42 +0100 Subject: [PATCH] initial commit --- .../Dashboard/DashboardHomeIntro.tsx | 55 +++++++- src/components/Icons/Icons.tsx | 4 +- src/components/paginated-list/PendingList.tsx | 133 ++++++++++++++++++ src/lib/NewDateTimeFormatter.ts | 18 +++ src/models/DataTypes.ts | 9 ++ 5 files changed, 215 insertions(+), 4 deletions(-) create mode 100644 src/components/paginated-list/PendingList.tsx create mode 100644 src/lib/NewDateTimeFormatter.ts create mode 100644 src/models/DataTypes.ts diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index 9406594..4a656c7 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -1,7 +1,8 @@ import React, { FC } 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"; export interface DashBoardCardProps { title?: string; @@ -76,7 +77,7 @@ interface DashboardHomeIntroProps { const DashboardHomeIntro: FC = ({ handleNextStep, step }) => { const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable return ( - <> +
{step == 1 ? <>

Hello, {userDetails.firstname}

@@ -114,12 +115,60 @@ const DashboardHomeIntro: FC = ({ handleNextStep, step
} - +
+ + {({data}:any)=>( +
+ + + + + + + + + + + + {data.map((item:any, index:any) =>( + + + + + + + + ))} + +
DateAmountPayment TermStatusAction
{'item.date'}The Sliding Mr. Bones (Next Stop, Pottersville)12Malcolm Lockyer + +
+
+ )} + +
+ ); }; export default DashboardHomeIntro; +const dummyData = [ + {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'}, + {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'}, + {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'}, + {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'}, + {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'}, + {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'} +] + // {/*
// ) :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..d054e2f --- /dev/null +++ b/src/components/paginated-list/PendingList.tsx @@ -0,0 +1,133 @@ +import { ReactNode, useEffect, useState } from "react"; + +type PaginatedListProps = { + data: { id: number, name: string, last_login: string, image: string }[], + itemsPerPage?: number, + filterItem?: string[], + tableTitle?: string, + titleClass?:string, + children: (data:any) => 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({ data: 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/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 diff --git a/src/models/DataTypes.ts b/src/models/DataTypes.ts new file mode 100644 index 0000000..f98869b --- /dev/null +++ b/src/models/DataTypes.ts @@ -0,0 +1,9 @@ + +export type TableListProps = { + id?: number; + name?: string; + date?: string; + amount?: string; + payment_term?: string; + status?: boolean; +}[]; \ No newline at end of file