employee attendance display sorted by date,

src/components/Employee/EmpAttendance.jsx

@@ -14,28 +14,24 @@ import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { localToUtc } from "../../utils/appUtils";
+import { useParams } from "react-router-dom";
 
-const EmpAttendance = ({ employee }) => {
+const EmpAttendance = () => {
+  const { employeeId } = useParams();
   const [attendances, setAttendnaces] = useState([]);
   const [selectedDate, setSelectedDate] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attendanceId, setAttendanecId] = useState();
 
   const methods = useForm({
-    resolver: zodResolver(
-      z.object({
-        startDate: z.string(),
-        endDate: z.string(),
-      })
-    ),
     defaultValues: {
-      startDate: "",
+      startDate: moment().subtract(6, "days").format("DD-MM-YYYY"),
-      endDate: "",
+      endDate: moment().format("DD-MM-YYYY"),
     },
   });
-  const { control, register, handleSubmit, reset, watch } = methods;
+  const { watch } = methods;
-  const startDate = watch("startDate");
+
-  const endDate = watch("endDate");
+  const [startDate, endDate] = watch(["startDate", "endDate"]);
   const {
     data = [],
     isLoading: loading,
@@ -44,76 +40,21 @@ const EmpAttendance = ({ employee }) => {
     error,
     refetch,
   } = useAttendanceByEmployee(
-    employee,
+    employeeId,
-    localToUtc(startDate),
+    startDate ? localToUtc(startDate) : null,
-    localToUtc(endDate)
+    endDate ? localToUtc(endDate) : null
   );
+
   const dispatch = useDispatch();
-
+  const sorted = [...data].sort(
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  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) => {
-    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 nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
-    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA?.localeCompare(nameB);
-  };
-
-  const group1 = data
-    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-    .sort(sortByName);
-  const group2 = data
-    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-    .sort(sortByName);
-  const group3 = data
-    .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-    .sort(sortByName);
-  const group4 = data
-    .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
-    .sort(sortByName);
-  const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
-
-
-  const uniqueMap = new Map();
-
-  [...group1, ...group2, ...group3, ...group4, ...group5].forEach((rec) => {
-    const date = moment(rec.checkInTime || rec.checkOutTime).format(
-      "YYYY-MM-DD"
-    );
-    const key = `${rec.employeeId}-${date}`;
-    const existing = uniqueMap.get(key);
-    if (
-      !existing ||
-      new Date(rec.checkInTime || rec.checkOutTime) >
-        new Date(existing.checkInTime || existing.checkOutTime)
-    ) {
-      uniqueMap.set(key, rec);
-    }
-  });
-
-  const sortedFinalList = [...uniqueMap.values()].sort(
     (a, b) =>
-      new Date(b.checkInTime || b.checkOutTime) -
+      new Date(b?.checkInTime).getTime() - new Date(a?.checkInTime).getTime()
-      new Date(a.checkInTime || a.checkOutTime)
   );
 
-  const currentDate = new Date().toLocaleDateString("en-CA");
+  console.log(sorted);
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    sortedFinalList,
+    sorted,
     ITEMS_PER_PAGE
   );
 
@@ -123,7 +64,6 @@ const EmpAttendance = ({ employee }) => {
   };
   const closeModal = () => setIsModalOpen(false);
 
-  const onSubmit = (formData) => {};
   return (
     <>
       {isModalOpen && (
@@ -136,20 +76,10 @@ const EmpAttendance = ({ employee }) => {
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"
         >
-          <div className="col-3 my-0 ">
+          <div className="col-4 col-md-3 my-0 ">
             <>
               <FormProvider {...methods}>
-                <form
+                <DateRangePicker1 />
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="p-2 text-start"
-                >
-                  <DateRangePicker1
-                    placeholder="DD-MM-YYYY To DD-MM-YYYY"
-                    startField="startDate"
-                    endField="endDate"
-                    defaultRange={true}
-                  />
-                </form>
               </FormProvider>
             </>
           </div>
@@ -234,7 +164,7 @@ const EmpAttendance = ({ employee }) => {
             </table>
           )}
         </div>
-        {!loading && sortedFinalList.length > 20 && (
+        {!loading && data.length > 20 && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li

src/hooks/useAttendance.js

@@ -138,35 +138,11 @@ export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
       const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
       return res.data;
     },
-    enabled: !!fromDate && !! toDate,
+    enabled
   });
 };
 
-// export const useRegularizationRequests = (projectId) => {
-//   const {
-//     data: regularizes = [],
-//     isLoading: loading,
-//     error,
-//     refetch,
-//   } = useQuery({
-//     queryKey: ["regularizedList", projectId],
-//     queryFn: async () => {
-//       const response = await AttendanceRepository.getRegularizeList(projectId);
-//       return response.data;
-//     },
-//     enabled: !!projectId,
-//     onError: (error) => {
-//       showToast(error.message || "Error while fetching Regularization Requests", "error");
-//     },
-//   });
 
-//   return {
-//     regularizes,
-//     loading,
-//     error,
-//     refetch,
-//   };
-// };
 
 export const useRegularizationRequests = (projectId, organizationId, IncludeInActive = false) => {
   const dispatch = useDispatch();

src/pages/employee/EmployeeProfile.jsx

@@ -65,7 +65,7 @@ const EmployeeProfile = () => {
       case "attendance": {
         return (
           <>
-            <EmpAttendance employee={employeeId} />
+            <EmpAttendance  />
           </>
         );
       }