handled proper loading, pagination only display if record have greather than 5 and added refresh button

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -84,7 +84,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
         })
       );
     }
-  }, [dateRange, employee]);
+  }, [dateRange, employee,isRefreshing]);
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -133,13 +133,19 @@ const AttendancesEmployeeRecords = ({ employee }) => {
               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,14 +165,6 @@ 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 ) => (
                   <tr key={index}>
                     <td colSpan={2}>
@@ -211,11 +209,9 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                 ) )}
               </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