From 099a3bcc367dcb236067bb8d3abc29f4d18f4bc2 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 6 May 2025 22:52:59 +0530
Subject: [PATCH] handled proper loading, pagination only display if record
 have greather than 5 and added refresh button

---
 .../employee/AttendancesEmployeeRecords.jsx   | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/pages/employee/AttendancesEmployeeRecords.jsx b/src/pages/employee/AttendancesEmployeeRecords.jsx
index 077bb386..5d109255 100644
--- a/src/pages/employee/AttendancesEmployeeRecords.jsx
+++ b/src/pages/employee/AttendancesEmployeeRecords.jsx
@@ -84,7 +84,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
         })
       );
     }
-  }, [dateRange, employee]);
+  }, [dateRange, employee,isRefreshing]);
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -132,14 +132,20 @@ const AttendancesEmployeeRecords = ({ employee }) => {
             <i
               className={`bx bx-refresh cursor-pointer fs-4 ${
                 loading ? "spin" : ""
-              }`}
+                }`}
+              data-toggle="tooltip" 
               title="Refresh"
               onClick={() => setIsRefreshing(!isRefreshing)}
             />
           </div>
         </div>
         <div className="table-responsive text-nowrap">
-          {data && data.length > 0 ? (
+        {(!loading && data.length === 0) &&
+             <span>No employee logs</span>
+          }
+          {error && <div className="text-center">{error }</div>}
+          {(loading && !data ) && <div className="text-center">Loading...</div>}
+          {(data && data.length > 0 ) && (
             <table className="table mb-0">
               <thead>
                 <tr>
@@ -159,15 +165,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                 </tr>
               </thead>
               <tbody>
-                {loading && <td colSpan={5}>Loading...</td>}
-                {error && <td colSpan={5}>{error}</td>}
-                {data && data.length === 0 && (
-                  <tr>
-                    <td colSpan={5}>No Data Found</td>
-                  </tr>
-                )}
-
-                {currentItems?.map((attendance, index) => (
+                {currentItems?.map( ( attendance, index ) => (
                   <tr key={index}>
                     <td colSpan={2}>
                       <div className="d-flex justify-content-start align-items-center">
@@ -186,12 +184,12 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                     </td>
                     <td>
                       {" "}
-                      {moment(attendance.checkInTime).format("DD-MMM-YYYY")}
+                      {moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
                     </td>
-                    <td>{convertShortTime(attendance.checkInTime)}</td>
+                    <td>{convertShortTime( attendance.checkInTime )}</td>
                     <td>
                       {attendance.checkOutTime
-                        ? convertShortTime(attendance.checkOutTime)
+                        ? convertShortTime( attendance.checkOutTime )
                         : "--"}
                     </td>
 
@@ -202,20 +200,18 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                         tabIndex="0"
                         aria-controls="DataTables_Table_0"
                         data-bs-toggle="modal"
-                        onClick={() => openModal(attendance.id)}
+                        onClick={() => openModal( attendance.id )}
                       >
                         View
                       </button>
                     </td>
                   </tr>
-                ))}
+                ) )}
               </tbody>
             </table>
-          ) : (
-            <span>No employee logs</span>
-          )}
+          ) } 
         </div>
-        {!loading && (
+        {(!loading && currentItems < 5) && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li