added pending filter for attendaces using toggle buttons

src/components/Activities/Attendance.jsx

@@ -5,9 +5,15 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
-import {ITEMS_PER_PAGE} from "../../utils/constants";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
 
-const Attendance = ({ attendance, getRole, handleModalData }) => {
+const Attendance = ({
+  attendance,
+  getRole,
+  handleModalData,
+  setshowOnlyCheckout,
+  showOnlyCheckout,
+}) => {
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
   const [todayDate, setTodayDate] = useState(new Date());
@@ -19,7 +25,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
   const sortByName = (a, b) => {
     const nameA = (a.firstName + a.lastName).toLowerCase();
     const nameB = (b.firstName + b.lastName).toLowerCase();
-    return nameA.localeCompare(nameB);
+    return nameA?.localeCompare(nameB);
   };
 
   // Filter employees based on activity
@@ -39,41 +45,47 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
   return (
     <>
       <div className="table-responsive text-nowrap">
+        <div className="d-flex text-start align-items-center py-2">
+          <strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
+
+          <div className="form-check form-switch text-start m-0 ms-5">
+            <input
+              type="checkbox"
+              className="form-check-input"
+              role="switch"
+              id="inactiveEmployeesCheckbox"
+              checked={showOnlyCheckout}
+              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
+            />
+            <label className="form-check-label ms-0">Show Pending</label>
+          </div>
+        </div>
         {attendance && attendance.length > 0 && (
           <>
             <table className="table ">
               <thead>
-                <tr className="border-none" style={{ textAlign: 'left' }}>
+                <tr className="border-top-1">
-                  <td style={{ borderBottom: 'none' }}>
+                  <th colSpan={2}>Name</th>
-                    <strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
+                  <th>Role</th>
-                  </td>
+                  <th>
-                  <td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
-                </tr>
-
-                <tr>
-                  <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>
                     <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
                   </th>
-                  <th className="border-top-0">Actions</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
-              <tbody className="table-border-bottom-0">
+              <tbody className="table-border-bottom-0 ">
                 {currentItems &&
                   currentItems
                     .sort((a, b) => {
                       // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
-                      const checkInA = a.checkInTime
+                      const checkInA = a?.checkInTime
                         ? new Date(a.checkInTime)
                         : new Date(0);
-                      const checkInB = b.checkInTime
+                      const checkInB = b?.checkInTime
                         ? new Date(b.checkInTime)
                         : new Date(0);
                       return checkInB - checkInA; // Sort in descending order of checkInTime
@@ -131,12 +143,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
               </tbody>
             </table>
 
-            {!loading>20 && (
+            {!loading > 20 && (
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">
                   <li
-                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
+                    className={`page-item  ${
-                      }`}
+                      currentPage === 1 ? "disabled" : ""
+                    }`}
                   >
                     <button
                       className="page-link btn-xs"
@@ -148,8 +161,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                   {[...Array(totalPages)].map((_, index) => (
                     <li
                       key={index}
-                      className={`page-item ${currentPage === index + 1 ? "active" : ""
+                      className={`page-item ${
-                        }`}
+                        currentPage === index + 1 ? "active" : ""
+                      }`}
                     >
                       <button
                         className="page-link "
@@ -160,8 +174,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                     </li>
                   ))}
                   <li
-                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    className={`page-item ${
-                      }`}
+                      currentPage === totalPages ? "disabled" : ""
+                    }`}
                   >
                     <button
                       className="page-link "

src/components/Activities/AttendcesLogs.jsx

@@ -11,7 +11,6 @@ import { getCachedData } from "../../slices/apiDataManager";
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
   const maxPage = Math.ceil(data.length / itemsPerPage);
-
   const currentItems = useMemo(() => {
     const startIndex = (currentPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage;
@@ -21,10 +20,21 @@ const usePagination = (data, itemsPerPage) => {
   const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
   const resetPage = useCallback(() => setCurrentPage(1), []);
 
-  return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
+  return {
+    currentPage,
+    totalPages: maxPage,
+    currentItems,
+    paginate,
+    resetPage,
+  };
 };
 
-const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
+const AttendanceLog = ({
+  handleModalData,
+  projectId,
+  setshowOnlyCheckout,
+  showOnlyCheckout,
+}) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
@@ -83,14 +93,24 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
     const group3 = filteredData
       .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
       .sort(sortByName);
-    const group4 = filteredData
+    const group4 = filteredData.filter(
-      .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
+      (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
+    );
     const group5 = filteredData
       .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
       .sort(sortByName);
-    const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
+    const group6 = filteredData
+      .filter((d) => d.activity === 5)
+      .sort(sortByName);
 
-    const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
+    const sortedList = [
+      ...group1,
+      ...group2,
+      ...group3,
+      ...group4,
+      ...group5,
+      ...group6,
+    ];
 
     // Group by date
     const groupedByDate = sortedList.reduce((acc, item) => {
@@ -103,17 +123,22 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
     }, {});
 
     // Sort dates in descending order
-    const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
+    const sortedDates = Object.keys(groupedByDate).sort(
+      (a, b) => new Date(b) - new Date(a)
+    );
 
     // Create the final sorted array
     const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
     setProcessedData(finalData);
   }, [data, showOnlyCheckout]);
 
-  const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
+  const {
-    processedData,
+    currentPage,
-    20
+    totalPages,
-  );
+    currentItems: paginatedAttendances,
+    paginate,
+    resetPage,
+  } = usePagination(processedData, 20);
 
   // Reset to the first page whenever processedData changes (due to switch on/off)
   useEffect(() => {
@@ -122,57 +147,89 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
 
   return (
     <>
-      
+      <div
-        <div
+        className="dataTables_length text-start py-2 d-flex justify-content-between"
-          className="dataTables_length text-start py-2 d-flex justify-content-between"
+        id="DataTables_Table_0_length"
-          id="DataTables_Table_0_length"
+      >
-        >
+        <div className="d-flex align-items-center my-0 ">
-          <div className="col-md-3 my-0 ">
+          <DateRangePicker
-            <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
+            onRangeChange={setDateRange}
-          </div>
+            defaultStartDate={yesterday}
-          <div className="col-md-2 m-0 text-end">
+          />
-            <i
+          <div className="form-check form-switch text-start m-0 ms-5">
-              className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+            <input
-                }`}
+              type="checkbox"
-              title="Refresh"
+              className="form-check-input"
-              onClick={() => setIsRefreshing(true)}
+              role="switch"
+              id="inactiveEmployeesCheckbox"
+              checked={showOnlyCheckout}
+              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
             />
+            <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-        <div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
+        <div className="col-md-2 m-0 text-end">
-          {data && data.length > 0 && (
+          <i
-            <table className="table mb-0">
+            className={`bx bx-refresh cursor-pointer fs-4 ${
-              <thead>
+              loading || isRefreshing ? "spin" : ""
+            }`}
+            title="Refresh"
+            onClick={() => setIsRefreshing(true)}
+          />
+        </div>
+      </div>
+      <div
+        className="table-responsive text-nowrap"
+        style={{ minHeight: "250px" }}
+      >
+        {data && data.length > 0 && (
+          <table className="table mb-0">
+            <thead>
+              <tr>
+                <th className="border-top-1" colSpan={2}>
+                  Name
+                </th>
+                <th className="border-top-1">Date</th>
+                <th>
+                  <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
+                  Check-In
+                </th>
+                <th>
+                  <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
+                </th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {(loading || isRefreshing) && (
                 <tr>
-                  <th className="border-top-1" colSpan={2}>
+                  <td colSpan={6}>Loading...</td>
-                    Name
-                  </th>
-                  <th className="border-top-1">Date</th>
-                  <th>
-                    <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
-                  </th>
-                  <th>
-                    <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
-                  </th>
-                  <th>Action</th>
                 </tr>
-              </thead>
+              )}
-              <tbody>
+              {!loading &&
-                {(loading || isRefreshing) && (
+                !isRefreshing &&
-                  <tr>
+                paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                    <td colSpan={6}>Loading...</td>
+                  const currentDate = moment(
-                  </tr>
+                    attendance.checkInTime || attendance.checkOutTime
-                )}
+                  ).format("YYYY-MM-DD");
-                {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                  const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
                   const previousAttendance = arr[index - 1];
-                  const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
+                  const previousDate = previousAttendance
+                    ? moment(
+                        previousAttendance.checkInTime ||
+                          previousAttendance.checkOutTime
+                      ).format("YYYY-MM-DD")
+                    : null;
 
                   if (!previousDate || currentDate !== previousDate) {
                     acc.push(
-                      <tr key={`header-${currentDate}`} className="table-row-header">
+                      <tr
+                        key={`header-${currentDate}`}
+                        className="table-row-header"
+                      >
                         <td colSpan={6} className="text-start">
-                          <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
+                          <strong>
+                            {moment(currentDate).format("DD-MM-YYYY")}
+                          </strong>
                         </td>
                       </tr>
                     );
@@ -186,10 +243,7 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
                             lastName={attendance.lastName}
                           />
                           <div className="d-flex flex-column">
-                            <a
+                            <a href="#" className="text-heading text-truncate">
-                              href="#"
-                              className="text-heading text-truncate"
-                            >
                               <span className="fw-normal">
                                 {attendance.firstName} {attendance.lastName}
                               </span>
@@ -198,11 +252,15 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
                         </div>
                       </td>
                       <td>
-                        {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
+                        {moment(
+                          attendance.checkInTime || attendance.checkOutTime
+                        ).format("DD-MMM-YYYY")}
                       </td>
                       <td>{convertShortTime(attendance.checkInTime)}</td>
                       <td>
-                        {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
+                        {attendance.checkOutTime
+                          ? convertShortTime(attendance.checkOutTime)
+                          : "--"}
                       </td>
                       <td className="text-center">
                         <RenderAttendanceStatus
@@ -216,40 +274,55 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
                   );
                   return acc;
                 }, [])}
-              </tbody>
+            </tbody>
-            </table>
+          </table>
-
+        )}
-
+        {!loading && !isRefreshing && data.length === 0 && (
-          )}
+          <span>No employee logs</span>
-          {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
+        )}
-          {error && !loading && !isRefreshing && (
+        {error && !loading && !isRefreshing && (
-            <tr>
+          <tr>
-              <td colSpan={6}>{error}</td>
+            <td colSpan={6}>{error}</td>
-            </tr>
+          </tr>
-          )}
+        )}
-        </div>
+      </div>
       {!loading && !isRefreshing && processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
-              <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
+              <button
+                className="page-link btn-xs"
+                onClick={() => paginate(currentPage - 1)}
+              >
                 &laquo;
               </button>
             </li>
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
-              <li
+              (pageNumber) => (
-                key={pageNumber}
+                <li
-                className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
+                  key={pageNumber}
-              >
+                  className={`page-item ${
-                <button className="page-link" onClick={() => paginate(pageNumber)}>
+                    currentPage === pageNumber ? "active" : ""
-                  {pageNumber}
+                  }`}
-                </button>
+                >
-              </li>
+                  <button
-            ))}
+                    className="page-link"
+                    onClick={() => paginate(pageNumber)}
+                  >
+                    {pageNumber}
+                  </button>
+                </li>
+              )
+            )}
             <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
+              className={`page-item ${
+                currentPage === totalPages ? "disabled" : ""
+              }`}
             >
-              <button className="page-link" onClick={() => paginate(currentPage + 1)}>
+              <button
+                className="page-link"
+                onClick={() => paginate(currentPage + 1)}
+              >
                 &raquo;
               </button>
             </li>

src/pages/Activities/AttendancePage.jsx

@@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
-  const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
+  const [showOnlyCheckout, setShowOnlyCheckout] = useState();
   const loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const { projects, loading: projectLoading } = useProjects();
@@ -112,7 +112,7 @@ const AttendancePage = () => {
   //   )
   //   : attendances;
   const filteredAttendance = showOnlyCheckout
-    ? attendances?.filter((att) => att?.checkOutTime === null)
+    ? attendances?.filter((att) => att?.checkInTime !== null && att?.checkOutTime === null)
     : attendances;
 
   return (
@@ -230,6 +230,8 @@ const AttendancePage = () => {
                     attendance={filteredAttendance}
                     handleModalData={handleModalData}
                     getRole={getRole}
+                    setshowOnlyCheckout={setShowOnlyCheckout}
+                    showOnlyCheckout={showOnlyCheckout}
                   />
                 </div>
               </>
@@ -240,6 +242,7 @@ const AttendancePage = () => {
                 <AttendanceLog
                   handleModalData={handleModalData}
                   projectId={selectedProject}
+                  setshowOnlyCheckout={setShowOnlyCheckout}
                   showOnlyCheckout={showOnlyCheckout}
                 />
               </div>