From 3157a309482506ac58cbf5967bbcd846df58b428 Mon Sep 17 00:00:00 2001
From: "kartik.sharma" <kartik.sharma@marcoaiot.com>
Date: Thu, 22 May 2025 16:39:42 +0530
Subject: [PATCH] Adding Switch button in attendence component.

---
 src/components/Activities/AttendcesLogs.jsx | 25 +++++++----
 src/pages/Activities/AttendancePage.jsx     | 48 +++++++++++++++++----
 2 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx
index c42ce1ab..5c62c912 100644
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@@ -9,7 +9,7 @@ import DateRangePicker from "../common/DateRangePicker";
 import { getCachedData } from "../../slices/apiDataManager";
 import usePagination from "../../hooks/usePagination";
 
-const AttendanceLog = ({ handleModalData, projectId }) => {
+const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
@@ -56,21 +56,26 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   }, [dateRange, projectId, isRefreshing]);
 
   useEffect(() => {
-    const group1 = data
+    // Filter the raw data based on showOnlyCheckout
+    const filteredData = showOnlyCheckout
+      ? data.filter((item) => item.checkInTime && item.checkOutTime)
+      : data;
+
+    const group1 = filteredData
       .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
       .sort(sortByName);
-    const group2 = data
+    const group2 = filteredData
       .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
       .sort(sortByName);
-    const group3 = data
+    const group3 = filteredData
       .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
       .sort(sortByName);
-    const group4 = data
+    const group4 = filteredData
       .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
-    const group5 = data
+    const group5 = filteredData
       .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
       .sort(sortByName);
-    const group6 = data.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];
 
@@ -90,7 +95,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
     // Create the final sorted array
     const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
     setProcessedData(finalData);
-  }, [data]);
+  }, [data, showOnlyCheckout]); // Re-run this effect when data or showOnlyCheckout changes
 
   const { currentPage, totalPages, currentItems: paginatedAttendances, paginate } = usePagination(
     processedData,
@@ -226,4 +231,6 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   );
 };
 
-export default AttendanceLog;
\ No newline at end of file
+export default AttendanceLog;
+
+
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index 85ec52fe..6f4c6c0b 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/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 loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const { projects, loading: projectLoading } = useProjects();
@@ -86,6 +86,10 @@ const AttendancePage = () => {
       });
   };
 
+  const handleToggle = (event) => {
+    setShowOnlyCheckout(event.target.checked);
+  };
+
   useEffect(() => {
     if (modelConfig !== null) {
       openModel();
@@ -100,6 +104,16 @@ const AttendancePage = () => {
       dispatch(setProjectId(loginUser?.projects[0]));
     }
   }, [selectedProject, loginUser?.projects]);
+
+
+  // Filter attendance data based on the toggle
+  const filteredAttendance = showOnlyCheckout
+    ? attendances?.filter(
+      (att) => att?.checkOutTime !== null && att?.checkInTime !== null
+    )
+    : attendances;
+
+
   return (
     <>
       {isCreateModalOpen && modelConfig && (
@@ -161,7 +175,7 @@ const AttendancePage = () => {
               )}
             </div>
           </ul>
-          
+
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
               <button
@@ -188,9 +202,8 @@ const AttendancePage = () => {
             <li className={`nav-item ${!DoRegularized && "d-none"}`}>
               <button
                 type="button"
-                className={`nav-link ${
-                  activeTab === "regularization" ? "active" : ""
-                }`}
+                className={`nav-link ${activeTab === "regularization" ? "active" : ""
+                  }`}
                 onClick={() => setActiveTab("regularization")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-messages"
@@ -198,6 +211,24 @@ const AttendancePage = () => {
                 Regularization
               </button>
             </li>
+
+            <li className="nav-item ms-auto"> {/* Added ms-auto to push to the right */}
+              <label className="switch switch-primary">
+                <input
+                  type="checkbox"
+                  className="switch-input"
+                  checked={showOnlyCheckout}
+                  onChange={handleToggle}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label m-2">
+                  Show Employees
+                </span>
+              </label>
+            </li>
           </ul>
           <div className="tab-content attedanceTabs py-2">
             {projectLoading && <span>Loading..</span>}
@@ -205,25 +236,26 @@ const AttendancePage = () => {
 
             {activeTab === "all" && (
               <>
-                {!projectLoading && attendances.length === 0 && (
+                {!projectLoading && filteredAttendance?.length === 0 && (
                   <p>No Employee assigned yet.</p>
                 )}
                 <div className="tab-pane fade show active py-0">
                   <Attendance
-                    attendance={attendances}
+                    attendance={filteredAttendance}
                     handleModalData={handleModalData}
                     getRole={getRole}
                   />
                 </div>
               </>
             )}
-            
+
 
             {activeTab === "logs" && (
               <div className="tab-pane fade show active py-0">
                 <AttendanceLog
                   handleModalData={handleModalData}
                   projectId={selectedProject}
+                  showOnlyCheckout={showOnlyCheckout}
                 />
               </div>
             )}