Attendance "No record" message improvement

src/components/Activities/AttendcesLogs.jsx

@@ -38,47 +38,47 @@ 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;
     const d = new Date(dateStr);
     d.setHours(0, 0, 0, 0);
     return d.getTime() === today.getTime();
-};
+  };
 
-const isBeforeToday = (dateStr) => {
+  const isBeforeToday = (dateStr) => {
     if (!dateStr) return false;
     const d = new Date(dateStr);
     d.setHours(0, 0, 0, 0);
     return d.getTime() < today.getTime();
-};
+  };
 
-const sortByName = (a, b) => {
+  const sortByName = (a, b) => {
     const nameA = (a.firstName + a.lastName).toLowerCase();
     const nameB = (b.firstName + b.lastName).toLowerCase();
     return nameA.localeCompare(nameB);
-};
+  };
 
-const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
+  const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
     selectedProject,
     dateRange.startDate,
     dateRange.endDate,
     organizationId
-);
+  );
 
-const processedData = useMemo(() => {
+  const processedData = useMemo(() => {
     const filteredData = showPending
       ? data.filter((item) => item.checkOutTime === null)
       : data;
@@ -103,30 +103,30 @@ const processedData = useMemo(() => {
 
     const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
     return sortedDates.flatMap((date) => groupedByDate[date]);
-}, [data, showPending]);
+  }, [data, showPending]);
 
-const filteredSearchData = useMemo(() => {
+  const filteredSearchData = useMemo(() => {
     if (!searchTerm) return processedData;
 
     const lowercased = searchTerm.toLowerCase();
     return processedData.filter((item) =>
       `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
     );
-}, [processedData, searchTerm]);
+  }, [processedData, searchTerm]);
 
-const {
+  const {
     currentPage,
     totalPages,
     currentItems: paginatedAttendances,
     paginate,
     resetPage,
-} = usePagination(filteredSearchData, 20);
+  } = usePagination(filteredSearchData, 20);
 
-useEffect(() => {
+  useEffect(() => {
     resetPage();
-}, [filteredSearchData]);
+  }, [filteredSearchData]);
 
-const handler = useCallback(
+  const handler = useCallback(
     (msg) => {
       const { startDate, endDate } = dateRange;
       const checkIn = msg.response.checkInTime.substring(0, 10);
@@ -145,14 +145,14 @@ const handler = useCallback(
       }
     },
     [selectedProject, dateRange, resetPage]
-);
+  );
 
-useEffect(() => {
+  useEffect(() => {
     eventBus.on("attendance_log", handler);
     return () => eventBus.off("attendance_log", handler);
-}, [handler]);
+  }, [handler]);
 
-const employeeHandler = useCallback(
+  const employeeHandler = useCallback(
     (msg) => {
       const { startDate, endDate } = dateRange;
       if (data.some((item) => item.employeeId == msg.employeeId)) {
@@ -160,12 +160,12 @@ const employeeHandler = useCallback(
       }
     },
     [data, refetch]
-);
+  );
 
-useEffect(() => {
+  useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
-}, [employeeHandler]);
+  }, [employeeHandler]);
 
 
 
@@ -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,8 +325,7 @@ useEffect(() => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    currentPage === pageNumber ? "active" : ""
                     }`}
                 >
                   <button
@@ -340,8 +338,7 @@ useEffect(() => {
               )
             )}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                currentPage === totalPages ? "disabled" : ""
                 }`}
             >
               <button