diff --git a/src/components/Dashboard/AttendanceChart.jsx b/src/components/Dashboard/AttendanceChart.jsx
index 3b58b897..0eefb1e8 100644
--- a/src/components/Dashboard/AttendanceChart.jsx
+++ b/src/components/Dashboard/AttendanceChart.jsx
@@ -17,28 +17,30 @@ const formatDate = (dateStr) => {
 const AttendanceOverview = () => {
   const [dayRange, setDayRange] = useState(7);
   const [view, setView] = useState("chart");
-   const selectedProject = useSelectedProject()
+  const selectedProject = useSelectedProject();
+
   const { data: attendanceOverviewData, isLoading, isError, error } = useAttendanceOverviewData(
     selectedProject,
     dayRange
   );
 
+  // Use empty array while loading
+  const attendanceData = attendanceOverviewData || [];
+
   const { tableData, roles, dates } = useMemo(() => {
-    if (!attendanceOverviewData || attendanceOverviewData.length === 0) {
+    if (!attendanceData || attendanceData.length === 0) {
       return { tableData: [], roles: [], dates: [] };
     }
 
     const map = new Map();
 
-    attendanceOverviewData.forEach((entry) => {
+    attendanceData.forEach((entry) => {
       const date = formatDate(entry.date);
       if (!map.has(date)) map.set(date, {});
       map.get(date)[entry.role.trim()] = entry.present;
     });
 
-    const uniqueRoles = [
-      ...new Set(attendanceOverviewData.map((e) => e.role.trim())),
-    ];
+    const uniqueRoles = [...new Set(attendanceData.map((e) => e.role.trim()))];
     const sortedDates = [...map.keys()];
 
     const tableData = sortedDates.map((date) => {
@@ -50,7 +52,7 @@ const AttendanceOverview = () => {
     });
 
     return { tableData, roles: uniqueRoles, dates: sortedDates };
-  }, [attendanceOverviewData,isLoading,selectedProject,dayRange]);
+  }, [attendanceData]);
 
   const chartSeries = roles.map((role) => ({
     name: role,
@@ -58,29 +60,24 @@ const AttendanceOverview = () => {
   }));
 
   const chartOptions = {
-    chart: {
-      type: "bar",
-      stacked: true,
-      height: 400,
-      toolbar: { show: false },
-    },
+    chart: { type: "bar", stacked: true, height: 400, toolbar: { show: false } },
     plotOptions: { bar: { borderRadius: 2, columnWidth: "60%" } },
     xaxis: { categories: tableData.map((row) => row.date) },
-    yaxis: {
-      show: true,
-      axisBorder: { show: true, color: "#78909C" },
-      axisTicks: { show: true, color: "#78909C", width: 6 },
-    },
+    yaxis: { show: true, axisBorder: { show: true, color: "#78909C" }, axisTicks: { show: true, color: "#78909C", width: 6 } },
     legend: { position: "bottom" },
     fill: { opacity: 1 },
     colors: roles.map((_, i) => flatColors[i % flatColors.length]),
   };
 
-  if (isLoading) return <div>Loading...</div>;
-  if (isError) return <p className="text-danger">{error.message}</p>;
-
   return (
-    <div className="bg-white p-4 rounded shadow d-flex flex-column">
+    <div className="bg-white p-4 rounded shadow d-flex flex-column position-relative">
+      {/* Optional subtle loading overlay */}
+      {isLoading && (
+        <div className="position-absolute w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-50 z-index-1">
+          <span>Loading...</span>
+        </div>
+      )}
+
       {/* Header */}
       <div className="d-flex justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">
@@ -88,27 +85,15 @@ const AttendanceOverview = () => {
           <p className="card-subtitle">Role-wise present count</p>
         </div>
         <div className="d-flex gap-2">
-          <select
-            className="form-select form-select-sm"
-            value={dayRange}
-            onChange={(e) => setDayRange(Number(e.target.value))}
-          >
+          <select className="form-select form-select-sm" value={dayRange} onChange={(e) => setDayRange(Number(e.target.value))}>
             <option value={7}>Last 7 Days</option>
             <option value={15}>Last 15 Days</option>
             <option value={30}>Last 30 Days</option>
           </select>
-          <button
-            className={`btn btn-sm p-1 ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
-            onClick={() => setView("chart")}
-            title="Chart View"
-          >
+          <button className={`btn btn-sm p-1 ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`} onClick={() => setView("chart")} title="Chart View">
             <i className="bx bx-bar-chart-alt-2"></i>
           </button>
-          <button
-            className={`btn btn-sm p-1 ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
-            onClick={() => setView("table")}
-            title="Table View"
-          >
+          <button className={`btn btn-sm p-1 ${view === "table" ? "btn-primary" : "btn-outline-primary"}`} onClick={() => setView("table")} title="Table View">
             <i className="bx bx-list-ul fs-5"></i>
           </button>
         </div>
@@ -127,9 +112,7 @@ const AttendanceOverview = () => {
                 <tr>
                   <th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
                   {dates.map((date, idx) => (
-                    <th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>
-                      {date}
-                    </th>
+                    <th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>{date}</th>
                   ))}
                 </tr>
               </thead>
@@ -152,4 +135,4 @@ const AttendanceOverview = () => {
   );
 };
 
-export default AttendanceOverview;
\ No newline at end of file
+export default AttendanceOverview;
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index bef66711..362b53da 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -14,34 +14,32 @@ import { useDispatch, useSelector } from "react-redux";
 // import ProjectProgressChart from "./ProjectProgressChart";
 // import ProjectOverview from "../Project/ProjectOverview";
 import AttendanceOverview from "./AttendanceChart";
-import ExpenseChartDesign2 from "./ExpenseChartDesign2";
+import ExpenseChartDesign from "./ExpenseChartDesign";
 
 const Dashboard = () => {
-  
   // const { projectsCardData } = useDashboardProjectsCardData();
   // const { teamsCardData } = useDashboardTeamsCardData();
   // const { tasksCardData } = useDashboardTasksCardData();
 
-    // Get the selected project ID from Redux store
-    const projectId = useSelector((store) => store.localVariables.projectId);
-    const isAllProjectsSelected = projectId === null;
+  // Get the selected project ID from Redux store
+  const projectId = useSelector((store) => store.localVariables.projectId);
+  const isAllProjectsSelected = projectId === null;
 
-    return (
-        <div className="container-fluid mt-5">
-            <div className="row gy-4">
-                
-                <div className="col-xxl-6 col-lg-6">
-                    <ExpenseChartDesign2 />
-                </div>
-               
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <AttendanceOverview /> {/* Removed unnecessary projectId prop */}
-                    </div>
-                )}
-            </div>
+  return (
+    <div className="container-fluid mt-5">
+      <div className="row gy-4">
+        <div className="col-xxl-6 col-lg-6">
+          <ExpenseChartDesign />
         </div>
-    );
+
+        {!isAllProjectsSelected && (
+          <div className="col-xxl-6 col-lg-6">
+            <AttendanceOverview /> {/* Removed unnecessary projectId prop */}
+          </div>
+        )}
+      </div>
+    </div>
+  );
 };
 
 export default Dashboard;
diff --git a/src/components/Dashboard/ExpenseChartDesign.jsx b/src/components/Dashboard/ExpenseChartDesign.jsx
new file mode 100644
index 00000000..b9ec9f91
--- /dev/null
+++ b/src/components/Dashboard/ExpenseChartDesign.jsx
@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+import Chart from "react-apexcharts";
+import { useDashboard_ExpenseData } from "../../hooks/useDashboard_Data";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { DateRangePicker1 } from "../common/DateRangePicker";
+import { FormProvider, useForm } from "react-hook-form";
+import { localToUtc } from "../../utils/appUtils";
+
+const ExpenseChartDesign = () => {
+  const projectId = useSelectedProject();
+
+  const methods = useForm({
+    defaultValues: {
+      startDate: "",
+      endDate: "",
+    },
+  });
+
+  const { watch } = methods;
+
+  const [startDate, endDate] = watch(["startDate", "endDate"]);
+ console.log(startDate,endDate)
+ const { data, isLoading, isError, error, isFetching } = useDashboard_ExpenseData(
+  projectId,
+  localToUtc(startDate),
+  localToUtc(endDate)
+);
+
+  if (isError) return <div>{error.message}</div>;
+
+  const report = data?.report || [];
+
+  const labels = report.map((item) => item.projectName);
+  const series = report.map((item) => item.totalApprovedAmount || 0);
+  const total = data?.totalAmount || 0;
+
+  const donutOptions = {
+    chart: { type: "donut" },
+    labels,
+    legend: { show: false },
+    dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
+    colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
+    plotOptions: {
+      pie: {
+        donut: {
+          size: "70%",
+          labels: {
+            show: true,
+            total: {
+              show: true,
+              label: "Total",
+              fontSize: "16px",
+              formatter: () => `${total}`,
+            },
+          },
+        },
+      },
+    },
+  };
+
+
+  if (data?.report === 0) {
+    return <div>No data found</div>;
+  }
+
+  return (
+      <div className="card shadow-sm" style={{ minHeight: "500px" }}>
+    <div className="card-header d-flex justify-content-between align-items-center mt-3">
+      <div>
+        <h5 className="mb-1 fw-bold">Expense Breakdown</h5>
+        <p className="card-subtitle me-3">Detailed project expenses</p>
+      </div>
+      
+        <div className="text-end">
+            <FormProvider {...methods}>
+          <DateRangePicker1 />
+          </FormProvider>
+        </div>
+    </div>
+
+    <div className="card-body position-relative">
+      {/* Initial loading: show full loader */}
+      {isLoading && (
+        <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+          <span>Loading...</span>
+        </div>
+      )}
+
+      {/* Data display */}
+      {!isLoading && report.length === 0 && (
+        <div className="text-center text-muted py-5">No data found</div>
+      )}
+
+      {!isLoading && report.length > 0 && (
+        <>
+          {/* Overlay spinner for refetch */}
+          {isFetching && (
+            <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
+              <span>Loading...</span>
+            </div>
+          )}
+
+          <div className="d-flex justify-content-center mb-8">
+            <Chart
+              options={donutOptions}
+              series={report.map((item) => item.totalApprovedAmount || 0)}
+              type="donut"
+              width="320"
+            />
+          </div>
+
+          <div className="mb-2 w-100">
+            <div className="row">
+              {report.map((item, idx) => (
+                <div className="col-6 d-flex justify-content-start align-items-start mb-2" key={idx}>
+                  <div className="avatar me-2">
+                    <span
+                      className="avatar-initial rounded-2"
+                      style={{
+                        backgroundColor: donutOptions.colors[idx % donutOptions.colors.length],
+                      }}
+                    >
+                      <i className="bx bx-receipt fs-4"></i>
+                    </span>
+                  </div>
+                  <div className="d-flex flex-column gap-1 text-start">
+                    <small className="fw-bold fs-6">{item.projectName}</small>
+                    <span className="fw-bold text-muted ms-1">{item.totalApprovedAmount}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  </div>
+
+  );
+};
+
+export default ExpenseChartDesign;
diff --git a/src/components/Dashboard/ExpenseChartDesign2.jsx b/src/components/Dashboard/ExpenseChartDesign2.jsx
deleted file mode 100644
index e5df1bb2..00000000
--- a/src/components/Dashboard/ExpenseChartDesign2.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState } from "react";
-import Chart from "react-apexcharts";
-import DateRangePicker from "../common/DateRangePicker";
-import { useDashboard_ExpenseData } from "../../hooks/useDashboard_Data";
-import { useSelectedProject } from "../../slices/apiDataManager";
-
-const ExpenseChartDesign2 = () => {
-    const projectId = useSelectedProject()
-    const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-
-    const { data, isLoading, isError, error } = useDashboard_ExpenseData(
-        projectId,
-        dateRange.startDate,
-        dateRange.endDate
-    );
-
-    if (isLoading) return <div>Loading....</div>
-    if (isError) return <div>{error.message}</div>;
-
-    const report = data?.report || [];
-
-    // Map the API data to chart labels and series
-    const labels = report.map((item) => item.projectName);
-    const series = report.map((item) => item.totalApprovedAmount || 0);
-    const total = data?.totalAmount || 0;
-
-    const donutOptions = {
-        chart: { type: "donut" },
-        labels,
-        legend: { show: false },
-        dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
-        colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
-        plotOptions: {
-            pie: {
-                donut: {
-                    size: "70%",
-                    labels: {
-                        show: true,
-                        total: {
-                            show: true,
-                            label: "Total",
-                            fontSize: "16px",
-                            formatter: () => `${total}`,
-                        },
-                    },
-                },
-            },
-        },
-    };
-
-    if (data?.report === 0) {
-        return <div>
-            No data found
-        </div>
-    }
-
-    return (
-        <div className="card shadow-sm" style={{ minHeight: "500px" }}>
-            <div className="card-header d-flex justify-content-between align-items-center mt-3">
-                <div>
-                    <h5 className="mb-1 fw-bold">Expense Breakdown</h5>
-                    <p className="card-subtitle me-3">Detailed project expenses</p>
-                </div>
-                <div className="text-end">
-                    <DateRangePicker
-                        DateDifference="7"
-                        onRangeChange={setDateRange}
-                        endDateMode="today"
-                    />
-                </div>
-            </div>
-
-            <div className="card-body">
-                {report.length === 0 ? (
-                    <div className="text-center text-muted py-5">
-                        No data found
-                    </div>
-                ) : (
-                    <>
-                        <div className="d-flex justify-content-center mb-8">
-                            <Chart
-                                options={donutOptions}
-                                series={report.map((item) => item.totalApprovedAmount || 0)}
-                                type="donut"
-                                width="320"
-                            />
-                        </div>
-
-                        <div className="mb-2 w-100">
-                            <div className="row">
-                                {report.map((item, idx) => (
-                                    <div
-                                        className="col-6 d-flex justify-content-start align-items-start mb-2"
-                                        key={idx}
-                                    >
-                                        <div className="avatar me-2">
-                                            <span
-                                                className="avatar-initial rounded-2"
-                                                style={{ backgroundColor: donutOptions.colors[idx % donutOptions.colors.length] }}
-                                            >
-                                                <i className="bx bx-receipt fs-4"></i>
-                                            </span>
-                                        </div>
-                                        <div className="d-flex flex-column gap-1 text-start">
-                                            <small className="fw-bold fs-6">{item.projectName}</small>
-                                            <span className="fw-bold text-muted ms-1">{item.totalApprovedAmount}</span>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default ExpenseChartDesign2;
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index ec55b48c..870672e3 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -67,7 +67,7 @@ const Header = () => {
     if (projectLoading) return "Loading...";
     if (!projectNames?.length) return "No Projects Assigned";
     if (projectNames.length === 1) return projectNames[0].name;
-
+         if (selectedProject === null) return "All Projects";
     const selectedObj = projectNames.find((p) => p.id === selectedProject);
     return selectedObj
   ? selectedObj.name
@@ -199,6 +199,14 @@ const Header = () => {
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}
                   >
+
+                     <li>
+                          <button
+                            className="dropdown-item"
+                            onClick={() => handleProjectChange(null)}
+                          >All Project</button>
+                          </li>
+                        
                     {[...projectsForDropdown]
                       .sort((a, b) => a?.name?.localeCompare(b.name))
                       .map((project) => (
diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index 72aad155..99fae06f 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -14,7 +14,6 @@ const DateRangePicker = ({
     if (endDateMode === "yesterday") {
       endDate.setDate(endDate.getDate() - 1);
     }
-
     endDate.setHours(0, 0, 0, 0);
 
     const startDate = new Date(endDate);
@@ -30,9 +29,14 @@ const DateRangePicker = ({
       static: true,
       clickOpens: true,
       maxDate: endDate,
-      onChange: (selectedDates, dateStr) => {
-        const [startDateString, endDateString] = dateStr.split(" to ");
-        onRangeChange?.({ startDate: startDateString, endDate: endDateString });
+      onChange: (selectedDates) => {
+        if (selectedDates.length === 2) {
+          const [start, end] = selectedDates;
+          onRangeChange?.({
+            startDate: start.toLocaleDateString("en-CA"),
+            endDate: end.toLocaleDateString("en-CA"),
+          });
+        }
       },
     });
 
@@ -47,9 +51,7 @@ const DateRangePicker = ({
   }, [onRangeChange, DateDifference, endDateMode]);
 
   const handleIconClick = () => {
-    if (inputRef.current) {
-      inputRef.current._flatpickr.open(); // directly opens flatpickr
-    }
+    inputRef.current?._flatpickr?.open();
   };
 
   return (
@@ -61,9 +63,9 @@ const DateRangePicker = ({
         id="flatpickr-range"
         ref={inputRef}
       />
-
       <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50  translate-middle-y " onClick={handleIconClick}
+        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y"
+        onClick={handleIconClick}
         style={{ right: "22px", bottom: "-8px" }}
       ></i>
     </div>
@@ -72,10 +74,6 @@ const DateRangePicker = ({
 
 export default DateRangePicker;
 
-
-
-
-
 export const DateRangePicker1 = ({
   startField = "startDate",
   endField = "endDate",
@@ -85,6 +83,8 @@ export const DateRangePicker1 = ({
   resetSignal,
   defaultRange = true,
   maxDate = null,
+  sm,
+  md,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -118,7 +118,7 @@ export const DateRangePicker1 = ({
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
-      maxDate ,
+      maxDate,
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
@@ -148,31 +148,31 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-  if (resetSignal !== undefined) {
-    if (defaultRange) {
-      applyDefaultDates();
-    } else {
-      setValue(startField, "", { shouldValidate: true });
-      setValue(endField, "", { shouldValidate: true });
+    if (resetSignal !== undefined) {
+      if (defaultRange) {
+        applyDefaultDates();
+      } else {
+        setValue(startField, "", { shouldValidate: true });
+        setValue(endField, "", { shouldValidate: true });
 
-      if (inputRef.current?._flatpickr) {
-        inputRef.current._flatpickr.clear();
+        if (inputRef.current?._flatpickr) {
+          inputRef.current._flatpickr.clear();
+        }
       }
     }
-  }
-}, [resetSignal, defaultRange, setValue, startField, endField]);
-
+  }, [resetSignal, defaultRange, setValue, startField, endField]);
 
   const start = getValues(startField);
   const end = getValues(endField);
   const formattedValue = start && end ? `${start} To ${end}` : "";
 
   return (
-    <div className={`position-relative ${className}`}>
+    <div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
       <input
         type="text"
-        className="form-control form-control-sm"
-        placeholder={placeholder}
+        className="form-control form-control-sm ps-2 pe-5 me-4 cursor-pointer"
+        placeholder="From to End"
+        id="flatpickr-range"
         defaultValue={formattedValue}
         ref={(el) => {
           inputRef.current = el;
@@ -181,13 +181,10 @@ export const DateRangePicker1 = ({
         readOnly={!allowText}
         autoComplete="off"
       />
-      <span
-        className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
+      <i
+        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2"
         onClick={() => inputRef.current?._flatpickr?.open()}
-      >
-        <i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
-      </span>
+      ></i>
     </div>
   );
 };
-
diff --git a/src/hooks/useDashboard_Data.jsx b/src/hooks/useDashboard_Data.jsx
index a65320e0..74731695 100644
--- a/src/hooks/useDashboard_Data.jsx
+++ b/src/hooks/useDashboard_Data.jsx
@@ -212,12 +212,19 @@ export const useDashboard_AttendanceData = (date, projectId) => {
 }
 
 export const useDashboard_ExpenseData = (projectId, startDate, endDate) => {
+   const hasBothDates = !!startDate && !!endDate;
+  const noDatesSelected = !startDate && !endDate;
+
+  const shouldFetch =
+    noDatesSelected ||
+    hasBothDates;
   return useQuery({
     queryKey: ["dashboardExpenses", projectId, startDate, endDate],
     queryFn: async () => {
       const resp = await GlobalRepository.getExpenseData(projectId, startDate, endDate);
-      return resp.data; // this will return the "data" object from API response
+      return resp.data; 
     },
+    enabled:shouldFetch
   });
 };
 
@@ -242,16 +249,17 @@ export const useDashboardTasksCardData = (projectId) => {
     }
   })
 }
-// export const useAttendanceOverviewData = (projectId, days) => {
-//    return useQuery({
-//     queryKey:["dashboardAttendanceOverView",projectId],
-//     queryFn:async()=> {
+export const useAttendanceOverviewData = (projectId, days) => {
+  return useQuery({
+    queryKey: ["dashboardAttendanceOverView", projectId, days],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getAttendanceOverview(projectId, days);
+      return resp.data;
+    },
+    enabled: !!projectId, 
+  });
+};
 
-//      const resp =  await GlobalRepository.getAttendanceOverview(projectId, days);
-//      return resp.data;
-//     }
-//   })
-// }
 
 export const useDashboardProjectsCardData = () => {
   return useQuery({
diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js
index 0766514a..5f117ce6 100644
--- a/src/utils/appUtils.js
+++ b/src/utils/appUtils.js
@@ -72,11 +72,11 @@ export const normalizeAllowedContentTypes = (allowedContentType) => {
 export function localToUtc(localDateString) {
   if (!localDateString || typeof localDateString !== "string") return null;
 
-  
-  const [year, month, day] = localDateString.trim().split("-");
-  if (!year || !month || !day) return null;
+  const [day, month, year] = localDateString.trim().split("-");
+  if (!day || !month || !year) return null;
 
+  // Create date in UTC
   const date = new Date(Date.UTC(Number(year), Number(month) - 1, Number(day), 0, 0, 0));
 
   return isNaN(date.getTime()) ? null : date.toISOString();
-}
\ No newline at end of file
+}