Changes in Emp Attendance and DateRange picker.

src/components/Activities/AttendcesLogs.jsx

@@ -38,134 +38,134 @@ const usePagination = (data, itemsPerPage) => {
 };
 
 const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
-const selectedProject = useSelectedProject();
+  const selectedProject = useSelectedProject();
-const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-const dispatch = useDispatch();
+  const dispatch = useDispatch();
-const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-const [showPending, setShowPending] = useState(false);
+  const [showPending, setShowPending] = useState(false);
-const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
-const today = new Date();
+  const today = new Date();
-today.setHours(0, 0, 0, 0);
+  today.setHours(0, 0, 0, 0);
 
-const yesterday = new Date();
+  const yesterday = new Date();
-yesterday.setDate(yesterday.getDate() - 1);
+  yesterday.setDate(yesterday.getDate() - 1);
 
-const isSameDay = (dateStr) => {
+  const isSameDay = (dateStr) => {
-  if (!dateStr) return false;
+    if (!dateStr) return false;
-  const d = new Date(dateStr);
+    const d = new Date(dateStr);
-  d.setHours(0, 0, 0, 0);
+    d.setHours(0, 0, 0, 0);
-  return d.getTime() === today.getTime();
+    return d.getTime() === today.getTime();
-};
+  };
 
-const isBeforeToday = (dateStr) => {
+  const isBeforeToday = (dateStr) => {
-  if (!dateStr) return false;
+    if (!dateStr) return false;
-  const d = new Date(dateStr);
+    const d = new Date(dateStr);
-  d.setHours(0, 0, 0, 0);
+    d.setHours(0, 0, 0, 0);
-  return d.getTime() < today.getTime();
+    return d.getTime() < today.getTime();
-};
+  };
 
-const sortByName = (a, b) => {
+  const sortByName = (a, b) => {
-  const nameA = (a.firstName + a.lastName).toLowerCase();
+    const nameA = (a.firstName + a.lastName).toLowerCase();
-  const nameB = (b.firstName + b.lastName).toLowerCase();
+    const nameB = (b.firstName + b.lastName).toLowerCase();
-  return nameA.localeCompare(nameB);
+    return nameA.localeCompare(nameB);
-};
+  };
 
-const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
+  const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
-  selectedProject,
+    selectedProject,
-  dateRange.startDate,
+    dateRange.startDate,
-  dateRange.endDate,
+    dateRange.endDate,
-  organizationId
+    organizationId
-);
-
-const processedData = useMemo(() => {
-  const filteredData = showPending
-    ? data.filter((item) => item.checkOutTime === null)
-    : data;
-
-  const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
-  const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
-  const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
-  const group4 = filteredData.filter((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 sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-
-  const groupedByDate = sortedList.reduce((acc, item) => {
-    const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
-    if (date) {
-      acc[date] = acc[date] || [];
-      acc[date].push(item);
-    }
-    return acc;
-  }, {});
-
-  const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
-  return sortedDates.flatMap((date) => groupedByDate[date]);
-}, [data, showPending]);
-
-const filteredSearchData = useMemo(() => {
-  if (!searchTerm) return processedData;
-
-  const lowercased = searchTerm.toLowerCase();
-  return processedData.filter((item) =>
-    `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
   );
-}, [processedData, searchTerm]);
 
-const {
+  const processedData = useMemo(() => {
-  currentPage,
+    const filteredData = showPending
-  totalPages,
+      ? data.filter((item) => item.checkOutTime === null)
-  currentItems: paginatedAttendances,
+      : data;
-  paginate,
-  resetPage,
-} = usePagination(filteredSearchData, 20);
 
-useEffect(() => {
+    const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
-  resetPage();
+    const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
-}, [filteredSearchData]);
+    const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
+    const group4 = filteredData.filter((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 handler = useCallback(
+    const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-  (msg) => {
-    const { startDate, endDate } = dateRange;
-    const checkIn = msg.response.checkInTime.substring(0, 10);
 
-    if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
+    const groupedByDate = sortedList.reduce((acc, item) => {
-      queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
+      const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
-        if (!oldData) {
+      if (date) {
-          queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
+        acc[date] = acc[date] || [];
-          return;
+        acc[date].push(item);
-        }
+      }
-        return oldData.map((record) =>
+      return acc;
-          record.id === msg.response.id ? { ...record, ...msg.response } : record
+    }, {});
-        );
-      });
-      resetPage();
-    }
-  },
-  [selectedProject, dateRange, resetPage]
-);
 
-useEffect(() => {
+    const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
-  eventBus.on("attendance_log", handler);
+    return sortedDates.flatMap((date) => groupedByDate[date]);
-  return () => eventBus.off("attendance_log", handler);
+  }, [data, showPending]);
-}, [handler]);
 
-const employeeHandler = useCallback(
+  const filteredSearchData = useMemo(() => {
-  (msg) => {
+    if (!searchTerm) return processedData;
-    const { startDate, endDate } = dateRange;
-    if (data.some((item) => item.employeeId == msg.employeeId)) {
-      refetch();
-    }
-  },
-  [data, refetch]
-);
 
-useEffect(() => {
+    const lowercased = searchTerm.toLowerCase();
-  eventBus.on("employee", employeeHandler);
+    return processedData.filter((item) =>
-  return () => eventBus.off("employee", employeeHandler);
+      `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
-}, [employeeHandler]);
+    );
+  }, [processedData, searchTerm]);
+
+  const {
+    currentPage,
+    totalPages,
+    currentItems: paginatedAttendances,
+    paginate,
+    resetPage,
+  } = usePagination(filteredSearchData, 20);
+
+  useEffect(() => {
+    resetPage();
+  }, [filteredSearchData]);
+
+  const handler = useCallback(
+    (msg) => {
+      const { startDate, endDate } = dateRange;
+      const checkIn = msg.response.checkInTime.substring(0, 10);
+
+      if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
+        queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
+          if (!oldData) {
+            queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
+            return;
+          }
+          return oldData.map((record) =>
+            record.id === msg.response.id ? { ...record, ...msg.response } : record
+          );
+        });
+        resetPage();
+      }
+    },
+    [selectedProject, dateRange, resetPage]
+  );
+
+  useEffect(() => {
+    eventBus.on("attendance_log", handler);
+    return () => eventBus.off("attendance_log", handler);
+  }, [handler]);
+
+  const employeeHandler = useCallback(
+    (msg) => {
+      const { startDate, endDate } = dateRange;
+      if (data.some((item) => item.employeeId == msg.employeeId)) {
+        refetch();
+      }
+    },
+    [data, refetch]
+  );
+
+  useEffect(() => {
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
 
 
 
@@ -175,24 +175,32 @@ useEffect(() => {
         className="dataTables_length text-start py-2 d-flex justify-content-between "
         id="DataTables_Table_0_length"
       >
-        <div className="d-flex align-items-center my-0 ">
+        <div className="d-flex flex-wrap align-items-center gap-2 gap-md-3 my-0">
-          <DateRangePicker
+          {/* Date Range Picker */}
-            onRangeChange={setDateRange}
+          <div className="flex-grow-1 flex-md-grow-0">
-            defaultStartDate={yesterday}
+            <DateRangePicker
-          />
+              onRangeChange={setDateRange}
-          <div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
+              defaultStartDate={yesterday}
+            />
+          </div>
+
+          {/* Pending Attendance Switch */}
+          <div className="form-check form-switch text-start mb-0">
             <input
               type="checkbox"
               className="form-check-input"
               role="switch"
-              disabled={isFetching}
               id="inactiveEmployeesCheckbox"
+              disabled={isFetching}
               checked={showPending}
               onChange={(e) => setShowPending(e.target.checked)}
             />
-            <label className="form-check-label ms-0">Pending Attendance</label>
+            <label className="form-check-label ms-0 ms-md-0">
+              Pending Attendance
+            </label>
           </div>
         </div>
+
       </div>
       <div
         className="table-responsive text-nowrap"
@@ -232,9 +240,9 @@ useEffect(() => {
                 const previousAttendance = arr[index - 1];
                 const previousDate = previousAttendance
                   ? moment(
-                      previousAttendance.checkInTime ||
+                    previousAttendance.checkInTime ||
-                        previousAttendance.checkOutTime
+                    previousAttendance.checkOutTime
-                    ).format("YYYY-MM-DD")
+                  ).format("YYYY-MM-DD")
                   : null;
 
                 if (!previousDate || currentDate !== previousDate) {
@@ -326,9 +334,8 @@ useEffect(() => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    currentPage === pageNumber ? "active" : ""
+                    }`}
-                  }`}
                 >
                   <button
                     className="page-link"
@@ -340,9 +347,8 @@ useEffect(() => {
               )
             )}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                currentPage === totalPages ? "disabled" : ""
+                }`}
-              }`}
             >
               <button
                 className="page-link"

src/components/common/DateRangePicker.jsx

@@ -73,7 +73,7 @@ const DateRangePicker = ({
   />
 
   <i
-    className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
+    className="bx bx-calendar calendar-icon cursor-pointer position-absolute ms-n6 top-50 end-30 translate-middle-y me-2 "
     onClick={handleIconClick}
   />
 </div>

src/pages/project/ProjectPage.jsx

@@ -96,8 +96,8 @@ const ProjectPage = () => {
   }, [data, isLoading, selectedStatuses]);
 
 
-  if(isLoading) return <div className="page-min-h"><Loader/></div>
+  if (isLoading) return <div className="page-min-h"><Loader /></div>
-   if(isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
+  if (isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
   return (
     <ProjectContext.Provider value={contextDispatcher}>
       <div className="container-fluid">
@@ -128,9 +128,8 @@ const ProjectPage = () => {
                 <div className="d-flex gap-2 mb-2">
                   <button
                     type="button"
-                    className={`btn  btn-sm p-1 ${
+                    className={`btn  btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
-                      !listView ? "btn-primary" : "btn-outline-primary"
+                      }`}
-                    }`}
                     onClick={() => setListView(false)}
                     data-bs-toggle="tooltip"
                     data-bs-custom-class="tooltip"
@@ -140,9 +139,8 @@ const ProjectPage = () => {
                   </button>
                   <button
                     type="button"
-                    className={`btn btn-sm p-1  ${
+                    className={`btn btn-sm p-1  ${listView ? "btn-primary" : "btn-outline-primary"
-                      listView ? "btn-primary" : "btn-outline-primary"
+                      }`}
-                    }`}
                     onClick={() => setListView(true)}
                     data-bs-toggle="tooltip"
                     data-bs-custom-class="tooltip"
@@ -180,20 +178,22 @@ const ProjectPage = () => {
                 </div>
               </div>
 
-              <div>
+              {HasManageProject && (
-              {HasManageProject && (  <button
+                <div className="ms-auto">
-                  className="btn btn-sm btn-primary"
+                  <button
-                  type="button"
+                    className="btn btn-sm btn-primary"
-                  onClick={() =>
+                    type="button"
-                    setMangeProject({ isOpen: true, Project: null })
+                    onClick={() =>
-                  }
+                      setMangeProject({ isOpen: true, Project: null })
-                >
+                    }
-                  <i className="bx bx-plus-circle me-2"></i>
+                  >
-                  <span className="d-none d-md-inline-block">
+                    <i className="bx bx-plus-circle me-2"></i>
-                    Add New Project
+                    <span className="d-none d-md-inline-block">
-                  </span>
+                      Add New Project
-                </button>)}
+                    </span>
-              </div>
+                  </button>
+                </div>
+              )}
             </div>
           </div>
         </div>