diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index 26648f5..055fa66 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -6,6 +6,8 @@ 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'; export interface DashBoardCardProps { title?: string; @@ -77,12 +79,22 @@ interface DashboardHomeIntroProps { step?: number | string; } +interface PopoutProps { + show?: boolean + data?: T +} + const DashboardHomeIntro: FC = ({ handleNextStep, step, }) => { const { userDetails } = useSelector((state: any) => state?.userDetails); // CHECKS IF USER Details are avaliable + const [loanPopout, setLoanPopout] = useState>({show:false, data:{}}) + const closePopout = () => { + setLoanPopout({show:false, data:{}}) + } + const [userLoanList, setUserLoanList] = useState<{ loading: boolean; data: PendingTableList; @@ -111,100 +123,109 @@ const DashboardHomeIntro: FC = ({ }, []); return ( -
- {step == 1 ? ( - <> -

- Hello, {userDetails.firstname} -

-
- handleNextStep({})} - /> -
- - ) : ( - <> -

- Welcome Back, {userDetails.firstname} -

-
- -
- - )} - {userLoanList.loading ? null : ( -
- - {(data: any) => ( -
- - - - - - - - - - - - {data.map((item: any, index: any) => ( - - - - - - + <> +
+ {step == 1 ? ( + <> +

+ Hello, {userDetails.firstname} +

+
+ handleNextStep({})} + /> +
+ + ) : ( + <> +

+ Welcome Back, {userDetails.firstname} +

+
+ +
+ + )} + {userLoanList.loading ? null : ( +
+ + {(data: any) => ( +
+
DateAmount - Payment Term - StatusAction
- {NewDateTimeFormatter(item?.added)} - - {item?.loan_amount} - - {item?.payment_month} - - {item?.status} - - -
+ + + + + + + - ))} - -
DateAmount + Payment Term + StatusAction
-
- )} - -
- )} -
+ + + {data.map((item: any, index: any) => ( + + + {NewDateTimeFormatter(item?.added)} + + + {FormatAmount(item?.loan_amount)} + + + {item?.payment_month} + + + + + + + + + ))} + + + + )} + + + )} + + + {loanPopout.show && } + ); }; diff --git a/src/components/Dashboard/PendingLoanPopout.tsx b/src/components/Dashboard/PendingLoanPopout.tsx new file mode 100644 index 0000000..f382fd2 --- /dev/null +++ b/src/components/Dashboard/PendingLoanPopout.tsx @@ -0,0 +1,75 @@ +import React from 'react' +import ModalWrapper from '../modal/ModalWrapper' +import { PendingTableList } from '../../core/models' +import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter' + + +interface Props { + action?: ()=>void + data?: T + } + +export default function PendingLoanPopout({data, action}:Props) { + const addCard = () => { + console.log('good') + } + return ( + +
+
+

Add Card

+ +
+
+
+
+

ID :

+

{data?.application_uid}

+
+
+

Loan Amount :

+

{data?.loan_amount}

+
+
+

Payment Month :

+

{data?.payment_month}

+
+
+

Added :

+

{NewDateTimeFormatter(data?.added)}

+
+
+
+
+ + +
+
+ + ) +} diff --git a/src/components/modal/ModalWrapper.tsx b/src/components/modal/ModalWrapper.tsx new file mode 100644 index 0000000..8b982c1 --- /dev/null +++ b/src/components/modal/ModalWrapper.tsx @@ -0,0 +1,14 @@ +import { ReactNode } from "react" + +type Props = { + children: ReactNode +} + +export default function ModalWrapper({children}:Props) { + return ( +
+
+
{children}
+
+ ) +} diff --git a/src/core/models.ts b/src/core/models.ts index 90a29f9..d322d2f 100644 --- a/src/core/models.ts +++ b/src/core/models.ts @@ -19,9 +19,14 @@ export interface User { export type PendingTableList = { - status?: string | boolean; + status?: string | boolean application_uid?: string added?: string loan_amount?: string - payment_month?: string + payment_month?: string + status_text?: { + text?: string + button?: boolean + advise?: string + } }[]; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 6be9638..0505ba0 100644 --- a/src/index.css +++ b/src/index.css @@ -17,4 +17,33 @@ body { /* @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; */ @apply container mx-auto px-5 max-w-[1500px] } + + .custom-btn{@apply min-w-[100px] transition-all duration-300 p-2 rounded-full} + + + /* MODAL COMPONENT */ + .modal-container{ + animation-name: zoom; + animation-duration: .2s; + animation-timing-function: linear; + @apply w-4/5 max-w-[600px] bg-white shadow-md rounded-2xl overflow-hidden + } + .modal-header { + @apply w-full flex items-center justify-between p-5 py-8 border-b bg-sky-500 + } + .modal-title { + @apply text-2xl leading-8 font-bold text-white dark:text-white tracking-wide flex items-center + } + .modal-close-btn { + @apply text-white dark:text-red-500 + } + .modal-body { + @apply w-full p-5 min-h-[150px] max-h-[500px] overflow-y-auto break-words flex flex-col justify-center items-center + } + .modal-footer { + @apply w-full p-5 border-t flex justify-between items-center gap-4 + } + /* MODAL COMPONENT */ + + } \ No newline at end of file diff --git a/src/lib/FormatAmount.ts b/src/lib/FormatAmount.ts new file mode 100644 index 0000000..2730d4b --- /dev/null +++ b/src/lib/FormatAmount.ts @@ -0,0 +1,24 @@ +// FUNCTION TO RETURN AMOUNT TO TWO DECIMAL PLACES +export const FormatAmount = ( + amount = "00", + ) => { + // Convert the number to a string + let numStr = String(amount); + + // Split the string into integer and decimal parts + let parts = numStr.split("."); + let integerPart = parts[0] || ""; + let decimalPart = parts[1] || ""; + + // Add thousands separators to the integer part + let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ','); + + // Truncate or pad the decimal part to two decimal points + let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0"); + + // Combine the formatted integer and decimal parts + let formattedNumber = '₦' + formattedInteger + '.' + formattedDecimal; + + // return formattedNumber; + return formattedNumber; + }; \ No newline at end of file