action button moved to extreme right

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useState, useEffect } from "react";
+import React, { FC, useState, useEffect } from 'react';
-import NairaBag from "../../assets/images/dashboard/naira-bag.png";
+import NairaBag from '../../assets/images/dashboard/naira-bag.png';
-import { Button, Icons } from "../";
+import { Button, Icons } from '../';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
-import PendingList from "../paginated-list/PendingList";
+import PendingList from '../paginated-list/PendingList';
-import { PendingTableList } from "../../core/models";
+import { PendingTableList } from '../../core/models';
-import { NewDateTimeFormatter } from "../../lib/NewDateTimeFormatter";
+import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter';
-import { getUserPendingLoanList } from "../../core/apiRequest";
+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,40 +73,50 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
 };
 
 interface DashboardHomeIntroProps {
-  handleNextStep:(value:{})=>any
+  handleNextStep: (value: {}) => any;
-  step?:number|string
+  step?: number | string;
 }
 
-const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
+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 token = localStorage.getItem('token');
-    let uid = localStorage.getItem('uid')
+    let uid = localStorage.getItem('uid');
     if (!token || !uid) {
-      return
+      return;
     }
-    getUserPendingLoanList(uid).then(res => {
+    getUserPendingLoanList(uid)
-      console.log('RES', res)
+      .then((res) => {
-      console.log('RES', userLoanList)
+        console.log('RES', res);
+        console.log('RES', userLoanList);
         if (!res || !res.data.loans) {
-        setUserLoanList({loading:false, data:[]})
+          setUserLoanList({ loading: false, data: [] });
-        return
+          return;
         }
-      setUserLoanList({loading:false, data:res?.data?.loans})
+        setUserLoanList({ loading: false, data: res?.data?.loans });
-    }).catch(err => {
-      console.log(err)
-      setUserLoanList({loading:false, data:[]})
       })
-  },[])
+      .catch((err) => {
+        console.log(err);
+        setUserLoanList({ loading: false, data: [] });
+      });
+  }, []);
 
   return (
-    <div className='w-full'>
+    <div className="w-full">
-    {step == 1 ?
+      {step == 1 ? (
         <>
-        <h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
+          <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"
@@ -122,9 +132,11 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
             />
           </div>
         </>
-      :
+      ) : (
         <>
-        <h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
+          <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"
@@ -140,39 +152,47 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
             />
           </div>
         </>
-    }
+      )}
-    {userLoanList.loading ?
+      {userLoanList.loading ? null : (
-    null
+        <div className="mt-5 w-full">
-    :
-      <div className='mt-5 w-full'>
           <PendingList
             data={userLoanList.data}
             itemsPerPage={5}
-          tableTitle='Current Applications'
+            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'>
+                    <tr className="text-left border-b-2">
-                    <th className='px-1 py-4'>Date</th>
+                      <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-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 min-w-[110px]">
-                    <th className='px-1 py-4 text-center'>Status</th>
+                        Payment Term
-                    <th className='px-1 py-4'>Action</th>
+                      </th>
+                      <th className="px-1 py-4 text-center">Status</th>
+                      <th className="px-1 py-4 text-right">Action</th>
                     </tr>
                   </thead>
                   <tbody>
                     {data.map((item: any, index: any) => (
-                    <tr key={index || item} className='even:bg-slate-100'>
+                      <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">
-                      <td className='px-1 py-2 text-right'>{item?.loan_amount}</td>
+                          {NewDateTimeFormatter(item?.added)}
-                      <td className='px-1 py-2 text-center'>{item?.payment_month}</td>
+                        </td>
-                      <td className='px-1 py-2 text-center'>{item?.status}</td>
+                        <td className="px-1 py-2 text-right">
-                      <td className='px-1 py-2'>
+                          {item?.loan_amount}
-                        <button className='px-2 py-1 border-2 border-black flex gap-2 items-center'>
+                        </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' />
+                            <Icons name="arrow-right" />
                           </button>
                         </td>
                       </tr>
@@ -183,7 +203,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
             )}
           </PendingList>
         </div>
-    }
+      )}
     </div>
   );
 };