src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,8 +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, 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;
@@ -76,6 +79,29 @@ interface DashboardHomeIntroProps {
 
 const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ 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 (
     <div className='w-full'>
     {step == 1 ?
@@ -115,31 +141,34 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
         </div>
     </>
     }
+    {userLoanList.loading ?
+    null
+    :
       <div className='mt-5 w-full'>
         <PendingList
-          data={dummyData}
+          data={userLoanList.data}
           itemsPerPage={5}
           tableTitle='Current Applications'
         >
-          {({data}:any)=>(
+          {(data:any)=>(
             <div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
               <table className="w-full table-auto">
                 <thead>
                   <tr className='text-left border-b-2'>
                     <th className='px-1 py-4'>Date</th>
-                    <th className='px-1 py-4'>Amount</th>
-                    <th className='px-1 py-4'>Payment Term</th>
-                    <th className='px-1 py-4'>Status</th>
+                    <th className='px-1 py-4 text-right'>Amount</th>
+                    <th className='px-1 py-4 text-center'>Payment Term</th>
+                    <th className='px-1 py-4 text-center'>Status</th>
                     <th className='px-1 py-4'>Action</th>
                   </tr>
                 </thead>
                 <tbody>
                   {data.map((item:any, index:any) =>(
                     <tr key={index || item} className='even:bg-slate-100'>
-                      <td className='px-1 py-2'>{'item.date'}</td>
-                      <td className='px-1 py-2'>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
-                      <td className='px-1 py-2'>12</td>
-                      <td className='px-1 py-2'>Malcolm Lockyer</td>
+                      <td className='px-1 py-2'>{NewDateTimeFormatter(item?.added)}</td>
+                      <td className='px-1 py-2 text-right'>{item?.loan_amount}</td>
+                      <td className='px-1 py-2 text-center'>{item?.payment_month}</td>
+                      <td className='px-1 py-2 text-center'>{item?.status}</td>
                       <td className='px-1 py-2'>
                         <button className='px-2 py-1 border-2 border-black flex gap-2 items-center'>
                           View
@@ -154,21 +183,13 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
           )}
         </PendingList>
       </div>
+    }
     </div>
   );
 };
 
 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'}
-]
-
 //  {/* <div className="group w-full lg:w-96 h-32">
 //         <DefaultCard
 //           descText="You currently do not have any open application. Click on apply for a loan to get started."

src/components/paginated-list/PendingList.tsx

@@ -1,12 +1,13 @@
 import { ReactNode, useEffect, useState } from "react";
+import { PendingTableList } from "../../core/models";
 
 type PaginatedListProps = {
-    data: { id: number, name: string, last_login: string, image: string }[],
+    data: PendingTableList,
     itemsPerPage?: number,
     filterItem?: string[],
     tableTitle?: string,
     titleClass?:string,
-    children: (data:any) => ReactNode;
+    children: (data:PendingTableList) => ReactNode;
 }
 
 export default function PendingList({
@@ -81,7 +82,7 @@ export default function PendingList({
         </div>
       )}
 
-      {children({ data: newData })}
+      {children(newData)}
 
       {/* show prev and next button if data exist */}
       {(data.length > 0 && data.length > itemsPerPage) && (

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)
 }

src/core/models.ts

@@ -15,4 +15,13 @@ export interface User {
     token?:string
     customer_uid?:string
     call_return?:string
-  }
+  }
+
+
+export type PendingTableList = {
+    status?: string | boolean;
+    application_uid?: string
+    added?: string
+    loan_amount?: string
+    payment_month?: string    
+}[];

src/models/DataTypes.ts

@@ -1,9 +0,0 @@
-
-export type TableListProps = {
-    id?: number;
-    name?: string;
-    date?: string;
-    amount?: string;
-    payment_term?: string;
-    status?: boolean;
-}[];