diff --git a/src/components/Employee/EmpAttendance.jsx b/src/components/Employee/EmpAttendance.jsx
index dfa12e98..0aa03cf3 100644
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import moment from "moment";
-import DateRangePicker from "../common/DateRangePicker";
+import DateRangePicker, { DateRangePicker1 } from "../common/DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchEmployeeAttendanceData } from "../../slices/apiSlice/employeeAttendanceSlice";
 import usePagination from "../../hooks/usePagination";
@@ -11,6 +11,12 @@ import AttendLogs from "../Activities/AttendLogs";
 import { useAttendanceByEmployee } from "../../hooks/useAttendance";
 import GlobalModel from "../common/GlobalModel";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { localToUtc } from "../../utils/appUtils";
+
+
 
 const EmpAttendance = ({ employee }) => {
   const [attendances, setAttendnaces] = useState([]);
@@ -18,6 +24,21 @@ const EmpAttendance = ({ employee }) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attendanceId, setAttendanecId] = useState();
+
+
+  const methods = useForm({
+    resolver: zodResolver(z.object({
+      startDate: z.string(),
+      endDate: z.string()
+    })),
+    defaultValues: {
+      startDate: "",
+      endDate: ""
+    },
+  });
+  const { control, register, handleSubmit, reset, watch } = methods;
+  const startDate = watch('startDate')
+  const endDate = watch('endDate')
   const {
     data = [],
     isLoading: loading,
@@ -25,7 +46,7 @@ const EmpAttendance = ({ employee }) => {
     isError,
     error,
     refetch,
-  } = useAttendanceByEmployee(employee, dateRange.startDate, dateRange.endDate);
+  } = useAttendanceByEmployee(employee, localToUtc(startDate), localToUtc(endDate));
   const dispatch = useDispatch();
 
   // const { data, loading, error } = useSelector(
@@ -90,7 +111,7 @@ const EmpAttendance = ({ employee }) => {
     if (
       !existing ||
       new Date(rec.checkInTime || rec.checkOutTime) >
-        new Date(existing.checkInTime || existing.checkOutTime)
+      new Date(existing.checkInTime || existing.checkOutTime)
     ) {
       uniqueMap.set(key, rec);
     }
@@ -114,6 +135,11 @@ const EmpAttendance = ({ employee }) => {
   };
   const closeModal = () => setIsModalOpen(false);
 
+
+
+  const onSubmit = (formData) => {
+
+  }
   return (
     <>
       {isModalOpen && (
@@ -127,17 +153,26 @@ const EmpAttendance = ({ employee }) => {
           id="DataTables_Table_0_length"
         >
           <div className="col-md-4 my-0 ">
-            <DateRangePicker
-              DateDifference="7"
-              onRangeChange={setDateRange}
-              endDateMode="today"
-            />
+            <>
+              <FormProvider {...methods}>
+                <form 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>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${
-                isFetching ? "spin" : ""
-              }`}
+              className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
+                }`}
               data-toggle="tooltip"
               title="Refresh"
               onClick={() => refetch()}
@@ -230,9 +265,8 @@ const EmpAttendance = ({ employee }) => {
               {[...Array(totalPages)].map((_, index) => (
                 <li
                   key={index}
-                  className={`page-item ${
-                    currentPage === index + 1 ? "active" : ""
-                  }`}
+                  className={`page-item ${currentPage === index + 1 ? "active" : ""
+                    }`}
                 >
                   <button
                     className="page-link "
@@ -243,9 +277,8 @@ const EmpAttendance = ({ employee }) => {
                 </li>
               ))}
               <li
-                className={`page-item ${
-                  currentPage === totalPages ? "disabled" : ""
-                }`}
+                className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                  }`}
               >
                 <button
                   className="page-link "
diff --git a/src/hooks/useAttendance.js b/src/hooks/useAttendance.js
index 708cde50..a7cdb7ac 100644
--- a/src/hooks/useAttendance.js
+++ b/src/hooks/useAttendance.js
@@ -108,7 +108,7 @@ export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
       const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
       return res.data;
     },
-    enabled,
+    enabled: !!fromDate && !! toDate,
   });
 };
 
diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js
index 6e7ff0c6..21f7fa5a 100644
--- a/src/utils/appUtils.js
+++ b/src/utils/appUtils.js
@@ -72,6 +72,8 @@ export const normalizeAllowedContentTypes = (allowedContentType) => {
 
 
 export function localToUtc(localDateString) {
-  const date = new Date(localDateString); 
-  return date.toISOString(); 
+  if (!localDateString || localDateString.trim() === "") return null; // return null instead of undefined
+  const date = new Date(localDateString);
+  if (isNaN(date.getTime())) return null; // invalid date check
+  return date.toISOString();
 }
\ No newline at end of file