Merge pull request 'Attendance "No record" message improvement' (#480) from Kartik_Bug#1437 into Issues_Oct_main_2W

Reviewed-on: #480
merged

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]);
 
 
 
@@ -232,9 +232,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) {
@@ -297,8 +297,7 @@ useEffect(() => {
         ) : (
           <div className="my-12">
             <span className="text-secondary">
-              No data available for the selected date range. Please Select
+              No attendance record found in selected date range.
-              another date.
             </span>
           </div>
         )}
@@ -326,9 +325,8 @@ useEffect(() => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    currentPage === pageNumber ? "active" : ""
+                    }`}
-                  }`}
                 >
                   <button
                     className="page-link"
@@ -340,9 +338,8 @@ useEffect(() => {
               )
             )}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                currentPage === totalPages ? "disabled" : ""
+                }`}
-              }`}
             >
               <button
                 className="page-link"