action button moved to extreme right

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,11 +1,11 @@
-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";
+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;
@@ -55,7 +55,7 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
         )}
         {desc && (
           <p className={`text-lg text-left ${descClass && descClass}`}>
-            {desc}{" "}
+            {desc}{' '}
             {descSpan && (
               <span className={`${descSpanClass && descSpanClass}`}>
                 {descSpan}
@@ -73,117 +73,137 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
 };
 
 interface DashboardHomeIntroProps {
-  handleNextStep:(value:{})=>any
-  step?:number|string
+  handleNextStep: (value: {}) => any;
+  step?: number | string;
 }
 
-const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
-  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
+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:[]})
+  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
+  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:[]})
-    })
-  },[])
+    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>
-        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
-          <DashBoardCard
-            cardClass="bg-[#5C2684] relative"
-            desc="Begin your application and get up to "
-            descSpan="5 million naira loan."
-            descClass="leading-[1.5625rem] text-lg text-white"
-            descSpanClass="font-bold"
-            btnTitle="Apply here"
-            btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
-            image={NairaBag}
-            imgClass="translate-y-4 -rotate-6"
-            onClick={()=>handleNextStep({})}
+    <div className="w-full">
+      {step == 1 ? (
+        <>
+          <h1 className="font-bold my-5 text-2xl">
+            Hello, {userDetails.firstname}
+          </h1>
+          <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+            <DashBoardCard
+              cardClass="bg-[#5C2684] relative"
+              desc="Begin your application and get up to "
+              descSpan="5 million naira loan."
+              descClass="leading-[1.5625rem] text-lg text-white"
+              descSpanClass="font-bold"
+              btnTitle="Apply here"
+              btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
+              image={NairaBag}
+              imgClass="translate-y-4 -rotate-6"
+              onClick={() => handleNextStep({})}
             />
-        </div>
-      </>
-      :
-      <>
-        <h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
-        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
-          <DashBoardCard
-            cardClass="bg-[#5C2684] relative"
-            desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
-            // descSpan="5 million naira loan."
-            descClass="leading-[1.5625rem] text-lg text-white"
-            // descSpanClass="font-bold"
-            btnTitle="View and accept"
-            btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
-            image={NairaBag}
-            imgClass="translate-y-4 -rotate-6"
-            // onClick={handleNextStep}
+          </div>
+        </>
+      ) : (
+        <>
+          <h1 className="font-bold my-5 text-2xl">
+            Welcome Back, {userDetails.firstname}
+          </h1>
+          <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+            <DashBoardCard
+              cardClass="bg-[#5C2684] relative"
+              desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
+              // descSpan="5 million naira loan."
+              descClass="leading-[1.5625rem] text-lg text-white"
+              // descSpanClass="font-bold"
+              btnTitle="View and accept"
+              btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
+              image={NairaBag}
+              imgClass="translate-y-4 -rotate-6"
+              // onClick={handleNextStep}
             />
-        </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>
+          </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 text-right">Action</th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </PendingList>
-      </div>
-    }
+                  </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 text-right">
+                          <button className="px-2 py-1 border-2 border-black">
+                            View
+                            <Icons name="arrow-right" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </PendingList>
+        </div>
+      )}
     </div>
   );
 };

src/layouts/DashboardLayout/Aside.tsx

@@ -1,62 +1,31 @@
-import { useState, useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import Logo from '../../assets/icons/logo.svg';
-import { Icons } from '../../components';
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import Logo from "../../assets/icons/logo.svg";
+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="/">
@@ -76,8 +45,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-[#585858]'
+                      ? " text-[#5C2684]"
+                      : " text-[#585858]"
                   }`}
                 >
                   {link.name}
@@ -91,8 +60,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'
-                      : 'absolute -top-[500px]'
+                      ? "relative top-0"
+                      : "absolute -top-[500px]"
                   }`}
                 >
                   {link.nestedLink.map((nextLink, index) => (
@@ -101,17 +70,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-[#585858]'
+                          ? " text-[#5C2684]"
+                          : "text-[#585858]"
                       }`}
                     >
                       <Icons
                         name={nextLink.icon}
                         fillColor={`${
-                          pathname == nextLink.link ? '#5C2684' : '#585858'
+                          pathname == nextLink.link ? "#5C2684" : "#585858"
                         }`}
                       />
                       {nextLink.name}
@@ -127,14 +96,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>
@@ -150,6 +119,7 @@ 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
@@ -161,6 +131,7 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
             Email: fcmbloan@support.com
           </p>
         </div>
+      
       </div>
     </div>
   );
@@ -178,34 +149,29 @@ type AsideLinksType = {
 }[];
 
 const asideLinks: AsideLinksType = [
+  { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
   {
-    name: 'Dashboard',
-    link: '/dashboard/home',
-    icon: 'dash-icon',
+    name: "Your Profile",
+    link: "/dashboard/profile",
+    icon: "dash-icon",
     nestedLink: [],
   },
   {
-    name: 'Your Profile',
-    link: '/dashboard/profile',
-    icon: 'dash-icon',
+    name: "Employment Details",
+    link: "/dashboard/verification",
+    icon: "dash-icon",
     nestedLink: [],
   },
   {
-    name: 'Employment Details',
-    link: '/dashboard/verification',
-    icon: 'dash-icon',
+    name: "Reference Details",
+    link: "/dashboard/payments",
+    icon: "dash-icon",
     nestedLink: [],
   },
   {
-    name: 'Reference Details',
-    link: '/dashboard/payments',
-    icon: 'dash-icon',
-    nestedLink: [],
-  },
-  {
-    name: 'Agreements',
-    link: '/dashboard/legals',
-    icon: 'dash-icon',
+    name: "Agreements",
+    link: "/dashboard/legals",
+    icon: "dash-icon",
     nestedLink: [],
   },
   // {name: 'Nested Link', icon: 'home', nestedLink:[