public/assets/css/default.css

@@ -151,3 +151,12 @@
 .font-italic {
   font-style: italic;
 }
+
+.text-sm {
+  font-size: 0.7em;
+}
+
+.menu-vertical .menu-item .menu-link {
+  font-size: 0.7375rem;
+  min-block-size: 0.7375rem;
+}

src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React,{useState}from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -6,25 +6,33 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
 
-
+const Attendance = ({ attendance, getRole, handleModalData }) => {
-const Attendance = ( {attendance, getRole, handleModalData} ) =>
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-{
+    attendance,
-
+    5
-  const { currentPage, totalPages, currentItems, paginate } = usePagination(attendance, 5);
+  );
-  const [loading,setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   return (
     <>
       <div className="table-responsive text-nowrap">
-              {attendance && attendance.length > 0 ? (<>
+        {attendance && attendance.length > 0 ? (
+          <>
             <table className="table ">
-                  <thead >
+              <thead>
                 <tr>
-                      <th className="border-top-0" colSpan={2}>Name</th>
+                  <th className="border-top-0" colSpan={2}>
+                    Name
+                  </th>
                   <th className="border-top-0">Role</th>
-                      <th className="border-top-0"><i className='bx bxs-down-arrow-alt text-success' ></i>Check-In</th>
+                  <th className="border-top-0">
-                      <th className="border-top-0"><i className='bx bxs-up-arrow-alt text-danger' ></i>Check-Out</th>
+                    <i className="bx bxs-down-arrow-alt text-success"></i>
+                    Check-In
+                  </th>
+                  <th className="border-top-0">
+                    <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
+                  </th>
                   <th className="border-top-0">Actions</th>
                 </tr>
               </thead>
@@ -33,11 +41,15 @@ const Attendance = ( {attendance, getRole, handleModalData} ) =>
                   currentItems
                     .sort((a, b) => {
                       // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
-                  const checkInA = a.checkInTime ? new Date(a.checkInTime) : new Date(0);
+                      const checkInA = a.checkInTime
-                  const checkInB = b.checkInTime ? new Date(b.checkInTime) : new Date(0);
+                        ? new Date(a.checkInTime)
+                        : new Date(0);
+                      const checkInB = b.checkInTime
+                        ? new Date(b.checkInTime)
+                        : new Date(0);
                       return checkInB - checkInA; // Sort in descending order of checkInTime
                     })
-                  .map( ( item ) => (
+                    .map((item) => (
                       <tr key={item.employeeId}>
                         <td colSpan={2}>
                           <div className="d-flex justify-content-start align-items-center">
@@ -47,10 +59,14 @@ const Attendance = ( {attendance, getRole, handleModalData} ) =>
                             ></Avatar>
                             <div className="d-flex flex-column">
                               <a
-                                  onClick={(e) =>navigate(`/employee/${item.employeeId}?for=attendance`)}
+                                onClick={(e) =>
+                                  navigate(
+                                    `/employee/${item.employeeId}?for=attendance`
+                                  )
+                                }
                                 className="text-heading text-truncate cursor-pointer"
                               >
-                                  <span className="fw-medium">
+                                <span className="fw-normal">
                                   {item.firstName} {item.lastName}
                                 </span>
                               </a>
@@ -58,51 +74,81 @@ const Attendance = ( {attendance, getRole, handleModalData} ) =>
                           </div>
                         </td>
 
+                        <td>{item.jobRoleName}</td>
                         <td>
-                            {item.jobRoleName}
+                          {item.checkInTime
-                       
+                            ? convertShortTime(item.checkInTime)
+                            : "--"}
+                        </td>
+                        <td>
+                          {item.checkOutTime
+                            ? convertShortTime(item.checkOutTime)
+                            : "--"}
                         </td>
-                         <td>{item.checkInTime ? convertShortTime(item.checkInTime):"--"}</td>
-                         <td>{item.checkOutTime ? convertShortTime(item.checkOutTime):"--"}</td>
 
-                          <td className="text-center" >    
+                        <td className="text-center">
-                          <RenderAttendanceStatus attendanceData={item} handleModalData={handleModalData} Tab={1} currentDate={null}/>
+                          <RenderAttendanceStatus
+                            attendanceData={item}
+                            handleModalData={handleModalData}
+                            Tab={1}
+                            currentDate={null}
+                          />
                         </td>
                       </tr>
                     ))}
               </tbody>
-                
             </table>
 
-
+            {!loading && (
-
+              <nav aria-label="Page ">
-{
-  !loading && (
-    <nav aria-label="Page " >
                 <ul className="pagination pagination-sm justify-content-end py-1">
-         <li className={`page-item  ${currentPage === 1 ? 'disabled' : ''}`}>
+                  <li
-             <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>&laquo;</button>
+                    className={`page-item  ${
+                      currentPage === 1 ? "disabled" : ""
+                    }`}
+                  >
+                    <button
+                      className="page-link btn-xs"
+                      onClick={() => paginate(currentPage - 1)}
+                    >
+                      &laquo;
+                    </button>
                   </li>
                   {[...Array(totalPages)].map((_, index) => (
-           <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
+                    <li
-              <button className="page-link " onClick={() => paginate(index + 1)}>
+                      key={index}
+                      className={`page-item ${
+                        currentPage === index + 1 ? "active" : ""
+                      }`}
+                    >
+                      <button
+                        className="page-link "
+                        onClick={() => paginate(index + 1)}
+                      >
                         {index + 1}
                       </button>
                     </li>
                   ))}
-        <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
+                  <li
-            <button className="page-link " onClick={() => paginate(currentPage + 1)}>&raquo;</button>
+                    className={`page-item ${
+                      currentPage === totalPages ? "disabled" : ""
+                    }`}
+                  >
+                    <button
+                      className="page-link "
+                      onClick={() => paginate(currentPage + 1)}
+                    >
+                      &raquo;
+                    </button>
                   </li>
                 </ul>
               </nav>
-  )
+            )}
-}
+          </>
-
+        ) : (
-            </>  ) : (
           <span>No employees assigned to the project</span>
         )}
       </div>
- 
     </>
   );
 };

src/components/Activities/AttendcesLogs.jsx

@@ -87,7 +87,7 @@ const AttendanceLog = ({ attendance, handleModalData, projectId }) => {
                       />
                       <div className="d-flex flex-column">
                         <a href="#" className="text-heading text-truncate">
-                          <span className="fw-medium">
+                          <span className="fw-normal">
                             {attendance.firstName} {attendance.lastName}
                           </span>
                         </a>

src/components/Activities/Regularization.jsx

@@ -47,7 +47,7 @@ const Regularization = ({ handleRequest }) => {
                       ></Avatar>
                       <div className="d-flex flex-column">
                         <a href="#" className="text-heading text-truncate">
-                          <span className="fw-medium">
+                          <span className="fw-normal">
                             {att.firstName} {att.lastName}
                           </span>
                         </a>

src/components/Layout/Header.jsx

@@ -76,7 +76,7 @@ const Header = () => {
         {/* Search */}
         <div className="navbar-nav align-items-center">
           <div className="nav-item navbar-search-wrapper mb-0">
-            <a className="nav-item nav-link search-toggler px-0" href="#;">
+            <a className="nav-item nav-link search-toggler px-0" href="#">
               <span
                 className="d-inline-block text-body-secondary fw-normal"
                 id="autocomplete"

src/components/common/Breadcrumb.jsx

@@ -5,16 +5,17 @@ const Breadcrumb = ({ data }) => {
   const navigate = useNavigate();
   return (
     <nav aria-label="breadcrumb">
-      <ol className="breadcrumb breadcrumb-style1">
+      <ol className="breadcrumb breadcrumb-custom-icon">
         {data.map((item, index) =>
           item.link ? (
             <li className="breadcrumb-item cursor-pointer" key={index}>
               <a
-                aria-label="pagination link link-underline-primary "
+                aria-label="breadcrumb link link-underline-primary "
                 onClick={() => navigate(item.link)}
               >
                 {item.label}
               </a>
+              <i className="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
             </li>
           ) : (
             <li

src/pages/employee/EmployeeList.jsx

@@ -366,7 +366,7 @@ const EmployeeList = () => {
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
-                                  <span className="fw-medium">
+                                  <span className="fw-normal">
                                     {item.firstName} {item.lastName}
                                   </span>
                                 </a>