automatic user logout after inactivity. Dafault to 7 mins

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<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 ?
       <>
         <h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
@@ -114,7 +141,50 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
         </div>
     </>
     }
-    </>
+    {userLoanList.loading ?
+    null
+    :
+      <div className='mt-5 w-full'>
+        <PendingList
+          data={userLoanList.data}
+          itemsPerPage={5}
+          tableTitle='Current Applications'
+        >
+          {(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="text-[12px] sm:text-base 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 text-right'>Amount</th>
+                    <th className='px-1 py-4 text-center min-w-[110px]'>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'>{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
+                          <Icons name='arrow-right' />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </PendingList>
+      </div>
+    }
+    </div>
   );
 };
 

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) {
         </svg>
       ) :name == 'arrow-down'?
           <FaCaretDown className={`text-xl ${className && className}`} />
+        :name == 'arrow-right'?
+          <FaCaretRight className={`text-xl ${className && className}`} />
         :name == "dash-icon" ? (
         <img src={dashIcon} alt="dash-icon" />
       ) : null}

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<any>([]);
+
+  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 (
+    <div className="w-full">
+      <h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1>
+
+      {data.length > 0 && filterItem && (
+        <div className="mb-10 flex justify-end items-center gap-2">
+          {filterItem.map((item, index) => (
+            <label
+              key={index}
+              className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
+            >
+              Search by {item[0].toUpperCase() + item.slice(1)}
+              <input
+                name={item}
+                type="text"
+                className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
+                value={searchTerm}
+                onChange={(e) => {
+                  handleSearch(e, item);
+                }}
+              />
+            </label>
+          ))}
+        </div>
+      )}
+
+      {children(newData)}
+
+      {/* show prev and next button if data exist */}
+      {(data.length > 0 && data.length > itemsPerPage) && (
+        <div className="mt-5 md:mt-10 w-full flex gap-4 justify-center items-center">
+        <button
+          onClick={handlePrev}
+          className={`w-6 h-6 md:w-12 md:h-12 text-sm md:text-lg rounded-full flex justify-center items-center transition-all duration-300 ${
+            currentPage == 0
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
+          }`}
+        >
+          &lt;
+        </button>
+
+        {data.length && data.map((item, index)=>{
+          item = item
+          if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
+            return (
+              <button
+                key={index}
+                onClick={handleNext}
+                className={`w-6 h-6 md:w-12 md:h-12 text-sm md:text-lg rounded-full flex justify-center items-center border transition-all duration-300 ${
+                  currentPage != index
+                    ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
+                    : "text-slate-600 border-slate-600 dark:text-white dark:border-white pointer-events-none"
+                }`}
+              >
+                {index/itemsPerPage +1}
+              </button>
+            )
+          }
+        })}
+
+        <button
+          onClick={handleNext}
+          className={`w-6 h-6 md:w-12 md:h-12 text-sm md:text-lg rounded-full flex justify-center items-center transition-all duration-300 ${
+            currentPage + numberOfSelection >= data.length
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
+          }`}
+        >
+          &gt;
+        </button>
+      </div>
+      )}
+    </div>
+  );
+}

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/layouts/DashboardLayout/Aside.tsx

@@ -1,31 +1,62 @@
-import { useState } from "react";
+import { useState, useEffect } from 'react';
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
-import Logo from "../../assets/icons/logo.svg";
+import Logo from '../../assets/icons/logo.svg';
-import { Icons } from "../../components";
+import { Icons } from '../../components';
 
 type Props = {
   asideDisplay?: () => void;
-  logoutUser: () => void
+  logoutUser: () => void;
 };
 
 export default function Aside({ asideDisplay, logoutUser }: Props) {
   const { pathname } = useLocation();
 
   const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
-    { name: "" }
+    { name: '' }
   );
 
   const handleOpenNestedLink = (e: any) => {
     if (!e || !e.target) {
-      return setOpenNestedLink({ name: "" });
+      return setOpenNestedLink({ name: '' });
     }
     if (openNestedLink.name && openNestedLink.name == e.target.name) {
-      setOpenNestedLink({ name: "" });
+      setOpenNestedLink({ name: '' });
     } else {
       setOpenNestedLink({ name: e.target.name });
     }
   };
 
+  // Track user activity
+  useEffect(() => {
+    let timeout: number;
+
+    const resetTimeout = () => {
+      clearTimeout(timeout);
+      timeout = window.setTimeout(() => {
+        // Logout user after 7 minutes of inactivity
+        logoutUser();
+      }, 7 * 60 * 1000); // 7 minutes in milliseconds
+    };
+
+    const handleUserActivity = () => {
+      resetTimeout();
+    };
+
+    // Attach event listeners to track user activity
+    document.addEventListener('mousemove', handleUserActivity);
+    document.addEventListener('keypress', handleUserActivity);
+
+    // Initialize timeout
+    resetTimeout();
+
+    // Clear timeout and remove event listeners on component unmount
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener('mousemove', handleUserActivity);
+      document.removeEventListener('keypress', handleUserActivity);
+    };
+  }, [logoutUser]);
+
   return (
     <div className="py-5 px-10 flex flex-col h-full bg-inherit">
       <Link to="/">
@@ -45,8 +76,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                   onClick={(e) => handleOpenNestedLink(e)}
                   className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg flex justify-between items-center z-10 bg-inherit ${
                     allNestedLinks.includes(pathname)
-                      ? " text-[#5C2684]"
+                      ? ' text-[#5C2684]'
-                      : " text-[#585858]"
+                      : ' text-[#585858]'
                   }`}
                 >
                   {link.name}
@@ -60,8 +91,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                 <div
                   className={`transition-all duration-300 w-full z-1 ${
                     openNestedLink.name == link.name
-                      ? "relative top-0"
+                      ? 'relative top-0'
-                      : "absolute -top-[500px]"
+                      : 'absolute -top-[500px]'
                   }`}
                 >
                   {link.nestedLink.map((nextLink, index) => (
@@ -70,17 +101,17 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                         asideDisplay && asideDisplay();
                       }}
                       key={index}
-                      to={nextLink.link ? nextLink.link : "#"}
+                      to={nextLink.link ? nextLink.link : '#'}
                       className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium ${
                         pathname == nextLink.link
-                          ? " text-[#5C2684]"
+                          ? ' text-[#5C2684]'
-                          : "text-[#585858]"
+                          : 'text-[#585858]'
                       }`}
                     >
                       <Icons
                         name={nextLink.icon}
                         fillColor={`${
-                          pathname == nextLink.link ? "#5C2684" : "#585858"
+                          pathname == nextLink.link ? '#5C2684' : '#585858'
                         }`}
                       />
                       {nextLink.name}
@@ -96,14 +127,14 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                   asideDisplay && asideDisplay();
                 }}
                 key={index}
-                to={link.link ? link.link : "#"}
+                to={link.link ? link.link : '#'}
                 className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${
-                  pathname == link.link ? "text-[#5C2684]" : "text-[#585858]"
+                  pathname == link.link ? 'text-[#5C2684]' : 'text-[#585858]'
                 }`}
               >
                 <Icons
                   name={link.icon}
-                  fillColor={`${pathname == link.link ? "#5C2684" : "#585858"}`}
+                  fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`}
                 />
                 {link.name}
               </Link>
@@ -119,7 +150,6 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
           Log out
         </button>
 
-      
         <div className="flex flex-col gap-[.4375rem] text-[.75rem]">
           <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
             For more enquiries and support
@@ -131,7 +161,6 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
             Email: fcmbloan@support.com
           </p>
         </div>
-      
       </div>
     </div>
   );
@@ -149,29 +178,34 @@ type AsideLinksType = {
 }[];
 
 const asideLinks: AsideLinksType = [
-  { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
   {
-    name: "Your Profile",
+    name: 'Dashboard',
-    link: "/dashboard/profile",
+    link: '/dashboard/home',
-    icon: "dash-icon",
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Employment Details",
+    name: 'Your Profile',
-    link: "/dashboard/verification",
+    link: '/dashboard/profile',
-    icon: "dash-icon",
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Reference Details",
+    name: 'Employment Details',
-    link: "/dashboard/payments",
+    link: '/dashboard/verification',
-    icon: "dash-icon",
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Agreements",
+    name: 'Reference Details',
-    link: "/dashboard/legals",
+    link: '/dashboard/payments',
-    icon: "dash-icon",
+    icon: 'dash-icon',
+    nestedLink: [],
+  },
+  {
+    name: 'Agreements',
+    link: '/dashboard/legals',
+    icon: 'dash-icon',
     nestedLink: [],
   },
   // {name: 'Nested Link', icon: 'home', nestedLink:[

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -83,8 +83,8 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
               </div>
           </div>
         </header>
-        <div className="flex p-5 relative">
+        <div className="flex p-2 md:p-5 relative">
-          <div className="w-full p-5">{children}</div>
+          <div className="w-full p-2 md:p-5">{children}</div>
         </div>
       </main>
     </div>

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;
+  }