diff --git a/src/components/common/DatePicker.jsx b/src/components/common/DatePicker.jsx
index 9a3890fa..ddff1991 100644
--- a/src/components/common/DatePicker.jsx
+++ b/src/components/common/DatePicker.jsx
@@ -3,6 +3,7 @@ import { useController } from "react-hook-form";
 
 const DatePicker = ({
   name,
+ defaultDate,
   control,
   placeholder = "DD-MM-YYYY",
   className = "",
diff --git a/src/components/reports/Progress.jsx b/src/components/reports/Progress.jsx
index d620ac11..882c97df 100644
--- a/src/components/reports/Progress.jsx
+++ b/src/components/reports/Progress.jsx
@@ -1,52 +1,114 @@
 import React from "react";
 import Chart from "react-apexcharts";
+import { formatFigure } from "../../utils/appUtils";
 
 const Progress = ({
   color = "#00aaff",
-  series = 40,
-  progress_variant = "success",
-  height = 130,
+  series = 0,
+  total = 0,
+  height = 100,
+  width = 100,
+  completed =0,
 }) => {
   const options = {
     chart: {
       type: "radialBar",
     },
     colors: [color],
-
     plotOptions: {
       radialBar: {
-        hollow: {
-          size: "55%",
-        },
-        track: {
-          background: "#f1f1f1",
-        },
-
+        hollow: { size: "55%" },
+        track: { background: "#f1f1f1" },
         dataLabels: {
           name: { show: false },
           value: {
             show: true,
-            fontSize: "18px",
+            fontSize: "13px",
+            color: color,
             fontWeight: 600,
             offsetY: 7,
-            offsetY:7,
-            formatter: () => `${series}%`,
+            formatter: () => `${formatFigure(completed,{notation:"compact"})} / ${formatFigure(total,{notation:"compact"})}`,
           },
         },
       },
     },
-
     stroke: { lineCap: "round" },
   };
 
   return (
-    <Chart
-      options={options}
-      series={[Number(series)]}
-      type="radialBar"
-      height={height}
-    />
+    <div style={{ width: "fit-content" }}>
+      <Chart
+        options={options}
+        series={[Number(series)]}
+        type="radialBar"
+        height={height}
+        width={width}
+      />
+    </div>
   );
 };
-
 export default Progress;
+
+
+// const Progress = ({
+//   completed = 0,
+//   inProgress = 0,
+//   total = 100,
+//   height = 140,
+//   width = 140,
+// }) => {
+//   const completedPercent =
+//     total > 0 ? Math.round((completed / total) * 100) : 0;
+
+//   const progressPercent =
+//     total > 0 ? Math.round((completed / total) * 100) : 0;
+
+//   const options = {
+//     chart: {
+//       type: "radialBar",
+//     },
+
+//     colors: ["#28a745", "#0d6efd"],
+
+//     plotOptions: {
+//       radialBar: {
+//         hollow: {
+//           size: "35%",
+//         },
+
+//         track: {
+//           margin: 4,
+//         },
+
+//         dataLabels: {
+//           name: { show: false },
+
+//           value: {
+//             show: true,
+//             fontSize: "14px",
+//             fontWeight: 600,
+//             offsetY: 5,
+//             formatter: () => `${completed + inProgress}/${total}`,
+//           },
+//         },
+//       },
+//     },
+
+//     labels: ["Completed", "In Progress"],
+//     stroke: {
+//       lineCap: "round",
+//     },
+//   };
+
+//   return (
+//     <div style={{ width: "fit-content" }}>
+//       <Chart
+//         options={options}
+//         series={[completedPercent, progressPercent]}
+//         type="radialBar"
+//         height={height}
+//         width={width}
+//       />
+//     </div>
+//   );
+// };
diff --git a/src/components/reports/ReportsDonutCard.jsx b/src/components/reports/ReportsDonutCard.jsx
index 61f61382..d922c4cc 100644
--- a/src/components/reports/ReportsDonutCard.jsx
+++ b/src/components/reports/ReportsDonutCard.jsx
@@ -1,41 +1,66 @@
+import { getCompletionPercentage } from "../../utils/dateUtils";
+import Progress from "./Progress";
 import ReportsLegend from "./ReportsLegend";
 
 const ReportsDonutCard = ({
   title,
-  percentage,
   value,
+  total,
   donutClass = "",
-  footer = "Team members present on the site"
+  footer = "Team members present on the site",
+  chartColor,
 }) => {
   return (
-    <div className="reports-card">
+    <div className="border-top card border-primary py-4 px-2">
       <h4 className="reports-card-title">{title}</h4>
 
-      <div style={{ display: "flex", flexWrap: "wrap" }}>
-        <div
-          style={{
-            width: "50%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center"
-          }}
-        >
-          <div
-            className={`reports-donut thin ${donutClass}`}
-            style={{ percentage: percentage }}
-          >
-            <span>{value}</span>
-          </div>
+      <div className="d-flex justify-content-center align-items-center flex-column">
+        <div className="d-inline-flex flex-row align-items-center gap-12 gap-md-3">
+          <Progress
+            color={chartColor}
+            width={120}
+            height={120}
+            series={getCompletionPercentage(value, total)}
+            completed={value}
+            total={total}
+          />
+          <ReportsLegend />
         </div>
-
-        <ReportsLegend />
       </div>
 
-      <div style={{ padding: "10px", textAlign: "center" }}>
-        <p className="text-muted">{footer}</p>
+      <div className="text-center p-2">
+        <p className="text-muted mb-0">{footer}</p>
       </div>
     </div>
   );
 };
 
 export default ReportsDonutCard;
+
+export const ReportsCard = ({
+  title,
+  value,
+  total,
+  donutClass = "",
+  footer = "Team members present on the site",
+  chartColor,
+}) => {
+  return (
+    <div className="border-top card border-primary py-4 px-2">
+      <h4 className="reports-card-title">{title}</h4>
+
+      <div className="d-flex justify-content-start align-items-center flex-column">
+        <div className="d-inline-flex flex-row align-items-center gap-12 gap-md-3">
+         
+          <ReportsLegend />
+        </div>
+      </div>
+
+      <div className="text-center p-2">
+        <p className="text-muted mb-0">{footer}</p>
+      </div>
+    </div>
+  );
+};
+
+
diff --git a/src/components/reports/ReportsLegend.jsx b/src/components/reports/ReportsLegend.jsx
index 45eecde7..cd2a533c 100644
--- a/src/components/reports/ReportsLegend.jsx
+++ b/src/components/reports/ReportsLegend.jsx
@@ -1,19 +1,19 @@
 const ReportsLegend = () => {
   return (
-    <div className="reports-legend" style={{ width: "50%", padding: "15px" }}>
-      <div className="reports-legend-item">
-        <span className="reports-legend-color reports-legend-green" />
-        Completed
+    <div className=" d-inline-flex flex-column text-start gap-2 pe-5">
+      <div className=" d-flex align-items-center gap-2">
+        <span className="reports-legend-color reports-legend-green"></span>
+        <span>Completed</span>
       </div>
 
-      <div className="reports-legend-item">
-        <span className="reports-legend-color reports-legend-blue" />
-        In Progress
+      <div className=" d-flex align-items-center gap-2">
+        <span className="reports-legend-color reports-legend-blue"></span>
+        <span>In Progress</span>
       </div>
 
-      <div className="reports-legend-item">
-        <span className="reports-legend-color reports-legend-gray" />
-        Pending
+      <div className=" d-flex align-items-center gap-2">
+        <span className="reports-legend-color reports-legend-gray"></span>
+        <span>Pending</span>
       </div>
     </div>
   );
diff --git a/src/components/reports/report-dpr.jsx b/src/components/reports/report-dpr.jsx
index 6dc8dedf..c9f7f66d 100644
--- a/src/components/reports/report-dpr.jsx
+++ b/src/components/reports/report-dpr.jsx
@@ -2,794 +2,69 @@ import React from "react";
 import { useProjectReportByProject } from "../../hooks/useReports";
 import Progress from "./Progress";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { localToUtc } from "../../utils/appUtils";
+import ReportsDonutCard, { ReportsCard } from "./ReportsDonutCard";
 
-const ReportDPR = ({ project, day }) => {
-  const { data, isLoading, isError, error } =
-    useProjectReportByProject(project);
-  console.log(data);
+const ReportDPR = ({ project, date }) => {
+  const { data, isLoading, isError, error } = useProjectReportByProject(
+    project,
+    localToUtc(date)
+  );
   return (
     <>
-      {" "}
       <div className="card">
-        {/* <div class="reports-container"> */}
-        {/* <!-- Header */}
-        {/* <div class="reports-header">
-          <div class="d-flex flex-wrap align-items-start reports-project-info">
-            <strong>Project:</strong>
-            <select class="form-select" aria-label="Default select example">
-              <option selected>Select Project</option>
-              <option value="1">ANP ultimas wakad</option>
-              <option value="2">Raja Bahadur</option>
-              <option value="3">Godrej</option>
-            </select>
-            <br />
-            <strong>Date:</strong> 17 September 2025
-            <div class="col-md-6 col-12 mb-6">
-              <label for="flatpickr-date" class="form-label">
-                Date Picker
-              </label>
-              <div class="flatpickr-wrapper">
-                <input
-                  type="text"
-                  class="form-control flatpickr-input active"
-                  placeholder="YYYY-MM-DD"
-                  id="flatpickr-date"
-                  readonly="readonly"
-                />
-                <div
-                  class="flatpickr-calendar animate static arrowTop arrowLeft"
-                  tabindex="-1"
-                >
-                  <div class="flatpickr-months">
-                    <span class="flatpickr-prev-month">
-                      <svg
-                        version="1.1"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                        viewBox="0 0 17 17"
-                      >
-                        <g></g>
-                        <path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path>
-                      </svg>
-                    </span>
-                    <div class="flatpickr-month">
-                      <div class="flatpickr-current-month">
-                        <span class="cur-month">November </span>
-                        <div class="numInputWrapper">
-                          <input
-                            class="numInput cur-year"
-                            type="number"
-                            tabindex="-1"
-                            aria-label="Year"
-                          />
-                          <span class="arrowUp"></span>
-                          <span class="arrowDown"></span>
-                        </div>
-                      </div>
-                    </div>
-                    <span class="flatpickr-next-month">
-                      <svg
-                        version="1.1"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                        viewBox="0 0 17 17"
-                      >
-                        <g></g>
-                        <path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path>
-                      </svg>
-                    </span>
-                  </div>
-                  <div class="flatpickr-innerContainer">
-                    <div class="flatpickr-rContainer">
-                      <div class="flatpickr-weekdays">
-                        <div class="flatpickr-weekdaycontainer">
-                          <span class="flatpickr-weekday">Sun</span>
-                          <span class="flatpickr-weekday">Mon</span>
-                          <span class="flatpickr-weekday">Tue</span>
-                          <span class="flatpickr-weekday">Wed</span>
-                          <span class="flatpickr-weekday">Thu</span>
-                          <span class="flatpickr-weekday">Fri</span>
-                          <span class="flatpickr-weekday">Sat</span>
-                        </div>
-                      </div>
-                      <div class="flatpickr-days" tabindex="-1">
-                        <div class="dayContainer">
-                          <span
-                            class="flatpickr-day prevMonthDay"
-                            aria-label="October 26, 2025"
-                            tabindex="-1"
-                          >
-                            26
-                          </span>
-                          <span
-                            class="flatpickr-day prevMonthDay"
-                            aria-label="October 27, 2025"
-                            tabindex="-1"
-                          >
-                            27
-                          </span>
-                          <span
-                            class="flatpickr-day prevMonthDay"
-                            aria-label="October 28, 2025"
-                            tabindex="-1"
-                          >
-                            28
-                          </span>
-                          <span
-                            class="flatpickr-day prevMonthDay"
-                            aria-label="October 29, 2025"
-                            tabindex="-1"
-                          >
-                            29
-                          </span>
-                          <span
-                            class="flatpickr-day prevMonthDay"
-                            aria-label="October 30, 2025"
-                            tabindex="-1"
-                          >
-                            30
-                          </span>
-                          <span
-                            class="flatpickr-day prevMonthDay"
-                            aria-label="October 31, 2025"
-                            tabindex="-1"
-                          >
-                            31
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 1, 2025"
-                            tabindex="-1"
-                          >
-                            1
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 2, 2025"
-                            tabindex="-1"
-                          >
-                            2
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 3, 2025"
-                            tabindex="-1"
-                          >
-                            3
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 4, 2025"
-                            tabindex="-1"
-                          >
-                            4
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 5, 2025"
-                            tabindex="-1"
-                          >
-                            5
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 6, 2025"
-                            tabindex="-1"
-                          >
-                            6
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 7, 2025"
-                            tabindex="-1"
-                          >
-                            7
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 8, 2025"
-                            tabindex="-1"
-                          >
-                            8
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 9, 2025"
-                            tabindex="-1"
-                          >
-                            9
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 10, 2025"
-                            tabindex="-1"
-                          >
-                            10
-                          </span>
-                          <span
-                            class="flatpickr-day today"
-                            aria-label="November 11, 2025"
-                            aria-current="date"
-                            tabindex="-1"
-                          >
-                            11
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 12, 2025"
-                            tabindex="-1"
-                          >
-                            12
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 13, 2025"
-                            tabindex="-1"
-                          >
-                            13
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 14, 2025"
-                            tabindex="-1"
-                          >
-                            14
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 15, 2025"
-                            tabindex="-1"
-                          >
-                            15
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 16, 2025"
-                            tabindex="-1"
-                          >
-                            16
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 17, 2025"
-                            tabindex="-1"
-                          >
-                            17
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 18, 2025"
-                            tabindex="-1"
-                          >
-                            18
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 19, 2025"
-                            tabindex="-1"
-                          >
-                            19
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 20, 2025"
-                            tabindex="-1"
-                          >
-                            20
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 21, 2025"
-                            tabindex="-1"
-                          >
-                            21
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 22, 2025"
-                            tabindex="-1"
-                          >
-                            22
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 23, 2025"
-                            tabindex="-1"
-                          >
-                            23
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 24, 2025"
-                            tabindex="-1"
-                          >
-                            24
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 25, 2025"
-                            tabindex="-1"
-                          >
-                            25
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 26, 2025"
-                            tabindex="-1"
-                          >
-                            26
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 27, 2025"
-                            tabindex="-1"
-                          >
-                            27
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 28, 2025"
-                            tabindex="-1"
-                          >
-                            28
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 29, 2025"
-                            tabindex="-1"
-                          >
-                            29
-                          </span>
-                          <span
-                            class="flatpickr-day"
-                            aria-label="November 30, 2025"
-                            tabindex="-1"
-                          >
-                            30
-                          </span>
-                          <span
-                            class="flatpickr-day nextMonthDay"
-                            aria-label="December 1, 2025"
-                            tabindex="-1"
-                          >
-                            1
-                          </span>
-                          <span
-                            class="flatpickr-day nextMonthDay"
-                            aria-label="December 2, 2025"
-                            tabindex="-1"
-                          >
-                            2
-                          </span>
-                          <span
-                            class="flatpickr-day nextMonthDay"
-                            aria-label="December 3, 2025"
-                            tabindex="-1"
-                          >
-                            3
-                          </span>
-                          <span
-                            class="flatpickr-day nextMonthDay"
-                            aria-label="December 4, 2025"
-                            tabindex="-1"
-                          >
-                            4
-                          </span>
-                          <span
-                            class="flatpickr-day nextMonthDay"
-                            aria-label="December 5, 2025"
-                            tabindex="-1"
-                          >
-                            5
-                          </span>
-                          <span
-                            class="flatpickr-day nextMonthDay"
-                            aria-label="December 6, 2025"
-                            tabindex="-1"
-                          >
-                            6
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div> */}
-
-        {/* <!-- Status Note */}
-        {/* <div class="reports-status-note">
-          * Project Status Reported - Generated at 18-Sep-2025 03:30:03 UTC
-        </div> */}
-        <div className="d-flex text-start px-6 mt-2">
+        <div className="d-flex text-start px-2 mt-2">
           Project Status Reported - Generated at{" "}
           {formatUTCToLocalTime(data?.date, true)}
         </div>
 
         {/* <!-- Status Cards */}
-        <div class="reports-status-cards">
-          <div class="reports-card">
-            <h4 class="reports-card-title">TODAY'S ATTENDANCE</h4>
-            <div style={{ display: "flex", flexwrap: "wrap" }}>
-              {/* <!-- Left Column */}
-              <div
-                style={{
-                  width: "50%",
-                  boxSizing: "bordtarter-box",
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                {/* <!-- Medium */}
-                <div class="reports-donut thin" style={{ percentage: 90 }}>
-                  <span>20 / 30</span>
-                </div>
-              </div>
+        <div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-2">
+          <ReportsDonutCard
+            title={"TODAY'S ATTENDANCE"}
+            total={data?.totalEmployees}
+            value={data?.todaysAttendances}
+          />
+          <ReportsDonutCard
+            title={"DAILY TASKS COMPLETED"}
+            total={data?.totalCompletedTask}
+            value={data?.totalPlannedWork}
+            chartColor={"blue"}
+          />
 
-              {/* <!-- Right Column */}
-              <div
-                class="reports-legend"
-                style={{
-                  width: "50%",
-                  padding: "15px",
-                  boxSizing: "border-box",
-                }}
-              >
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-green"></span>{" "}
-                  Completed
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-blue"></span>{" "}
-                  In Progress
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-gray"></span>{" "}
-                  Pending
-                </div>
-              </div>
-            </div>
-            <div>
-              <div style={{ padding: "10px", textAlign: "center" }}>
-                <p class="text-muted">Team members present on the site</p>
-              </div>
-            </div>
-          </div>
+          <ReportsDonutCard
+            title={"PROJECT COMPLETION STATUS"}
+            total={data?.totalPlannedWork}
+            value={data?.totalCompletedWork}
+            chartColor={"green"}
+          />
 
-          <div class="reports-card">
-            <h4 class="reports-card-title">DAILY TASKS COMPLETED</h4>
-            <div style={{ display: "flex", flexWrap: "wrap" }}>
-              {/* <!-- Left Column */}
-              <div
-                style={{
-                  width: "50%",
-                  boxSizing: "border-box",
-                  display: "flex",
-                  justify: "center",
-                  alignItems: "center",
-                }}
-              >
-                {/* <!-- Medium */}
-                <div
-                  class="reports-donut thin reports-donut-primary"
-                  style={{ percentage: "66" }}
-                >
-                  <span>20 / 30</span>
-                </div>
-              </div>
-
-              {/* <!-- Right Column */}
-              <div
-                class="reports-legend"
-                style={{
-                  width: "50%",
-                  padding: "15px",
-                  boxSizing: "border-box",
-                }}
-              >
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-green"></span>{" "}
-                  Completed
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-blue"></span>{" "}
-                  In Progress
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-gray"></span>{" "}
-                  Pending
-                </div>
-              </div>
-            </div>
-            <div>
-              <div style={{ padding: "10px", textAlign: "center" }}>
-                <p class="text-muted">Team members present on the site</p>
-              </div>
-            </div>
-          </div>
-          <div class="reports-card">
-            <h4 class="reports-card-title">DAILY TASKS COMPLETED</h4>
-            <p class="reports-value reports-tasks">20 / 30</p>
+          <div class="card px-3 border-top border-warning">
+            <h4 class="reports-card-title">Attendance Pending Report</h4>
             <p>Team member present</p>
-            <div class="reports-legend">
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-blue"></span>{" "}
-                Completed
+            <div className="d-flex flex-column gap-2">
+              <div className="d-flex justify-content-between">
+                <span className="text-secondry"> Regualrization</span>{" "}
+                <span className="text-secondry">
+                  {" "}
+                  {data?.regularizationPending}
+                </span>{" "}
               </div>
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-green"></span>{" "}
-                In Progress
+              <div className="d-flex justify-content-between">
+                <span className="text-secondry"> Checking</span>{" "}
+                <span className="text-secondry"> {data?.checkoutPending}</span>{" "}
               </div>
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-gray"></span>{" "}
-                Pending
+              <div className="d-flex justify-content-between">
+                <span className="text-secondry"> Total Employee</span>{" "}
+                <span className="text-secondry">
+                  {" "}
+                  {data?.totalEmployees - data?.todaysAttendances}
+                </span>{" "}
               </div>
             </div>
           </div>
 
-          <div class="reports-card">
-            <h4 class="reports-card-title">PROJECT COMPLETION STATUS</h4>
-            <p class=" reports-value reports-completion">20 / 30</p>
-            <p>Team member present</p>
-            <div class="reports-legend">
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-green"></span>{" "}
-                Completed
-              </div>
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-blue"></span>{" "}
-                In Progress
-              </div>
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-gray"></span>{" "}
-                Pending
-              </div>
-            </div>
-          </div>
-
-          <div class="reports-card">
-            <h4 class="reports-card-title">Regularization Pending</h4>
-            <p class="reports-value reports-tasks">28/32</p>
-            <p class="text-muted">Regularization Pending</p>
-            <div class="reports-legend">
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-green"></span>{" "}
-                Completed
-              </div>
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-blue"></span>{" "}
-                In Progress
-              </div>
-              <div class="reports-legend-item">
-                <span class="reports-legend-color reports-legend-gray"></span>{" "}
-                Pending
-              </div>
-            </div>
-          </div>
-
-          <div class="reports-card">
-            {/* {/* <!-- Row 1: Header */}
-            <div>
-              <h4 class="reports-card-title">Checkout Pending</h4>
-            </div>
-
-            {/* {/* <!-- Row 2: Two Columns */}
-            <div style={{ display: "flex", flexWrap: "wrap" }}>
-              {/* {/* <!-- Left Column */}
-              <div
-                style={{
-                  width: "50%",
-                  boxSizing: "border-box",
-                  display: "flex",
-                  justify: "center",
-                  alignItems: "center",
-                }}
-              >
-                {/* {/* <!-- Medium */}
-                <div
-                  class="reports-donut thin reports-donut-success"
-                  style={{ percentage: "73" }}
-                >
-                  <span>73%</span>
-                </div>
-              </div>
-
-              {/* {/* <!-- Right Column */}
-              <div
-                class="reports-legend"
-                style={{
-                  width: "50%",
-                  padding: "15px",
-                  boxSizing: "border-box",
-                }}
-              >
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-green"></span>{" "}
-                  Completed
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-blue"></span>{" "}
-                  In Progress
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-gray"></span>{" "}
-                  Pending
-                </div>
-              </div>
-            </div>
-
-            {/* {/* <!-- Row 3: Full Width */}
-            <div>
-              <div style={{ padding: "10px", textAlign: "center" }}>
-                <p class="text-muted">Team members present on the site</p>
-              </div>
-            </div>
-          </div>
-          <div class="reports-card">
-            <div>
-              <h4 class="reports-card-title">Activity Report Pending</h4>
-            </div>
-            <div style={{ display: "flex", flexWrap: "wrap" }}>
-              {/* {/* <!-- Left Column */}
-              <div
-                style={{
-                  width: "50%",
-                  boxSizing: "border-box",
-                  display: "flex",
-                  justify: "center",
-                  alignItems: "center",
-                }}
-              >
-                {/* {/* <!-- Medium */}
-                <div
-                  class="reports-donut thin reports-donut-warning"
-                  style={{ percentage: "0" }}
-                >
-                  <span>0%</span>
-                </div>
-              </div>
-
-              {/* {/* <!-- Right Column */}
-              <div
-                class="reports-legend"
-                style={{
-                  width: "50%",
-                  padding: "15px",
-                  boxSizing: "border-box",
-                }}
-              >
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-green"></span>{" "}
-                  Completed
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-blue"></span>{" "}
-                  In Progress
-                </div>
-                <div
-                  class="reports-legend-item"
-                  style={{
-                    marginBottom: "10px",
-                    textAlign: "left",
-                    display: "left",
-                    justify: "left",
-                    alignItems: "left!important",
-                  }}
-                >
-                  <span class="reports-legend-color reports-legend-gray"></span>{" "}
-                  Pending
-                </div>
-              </div>
-            </div>
-            <div>
-              <div style={{ padding: "10px", textAlign: "center" }}>
-                <p class="text-muted">Team members present on the site</p>
-              </div>
-            </div>
-          </div>
-          <div class="reports-card">
+          <div className="reports-card">
             {/* {/* <!-- Row 1: Header */}
             <div>
               <h4 class="reports-card-title">Team Strength on Site</h4>
@@ -811,9 +86,9 @@ const ReportDPR = ({ project, day }) => {
         </div>
 
         {/* {/* <!-- Activities */}
-        <div class="reports-activities">
+        <div className="reports-activities">
           <h2>Activities (Tasks) Performed 17-Sep-2025</h2>
-          <table class="reports-table">
+          <table className="reports-table">
             <thead>
               <tr>
                 <th>NAME</th>
@@ -823,24 +98,18 @@ const ReportDPR = ({ project, day }) => {
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>Siddharth Barde</td>
-                <td>Site Engineer</td>
-                <td>17-Sep-2025 11:47 AM</td>
-                <td>-</td>
-              </tr>
-              <tr>
-                <td>Siddharth Barde</td>
-                <td>Site Engineer</td>
-                <td>17-Sep-2025 11:47 AM</td>
-                <td>-</td>
-              </tr>
-              <tr>
-                <td>Siddharth Barde</td>
-                <td>Site Engineer</td>
-                <td>17-Sep-2025 11:47 AM</td>
-                <td>-</td>
-              </tr>
+              {data?.performedAttendance?.map((att) => (
+                <tr>
+                  <td>{att.name}</td>
+                  <td>{att.roleName}</td>
+                  <td>{formatUTCToLocalTime(att.inTime, true)}</td>
+                  <td>
+                    {att.outTime
+                      ? formatUTCToLocalTime(att.outTime, true)
+                      : "--"}
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>
diff --git a/src/hooks/useReports.js b/src/hooks/useReports.js
index 40c7b9ec..b6461bd9 100644
--- a/src/hooks/useReports.js
+++ b/src/hooks/useReports.js
@@ -1,14 +1,16 @@
-import { useQuery } from "@tanstack/react-query"
-import { ReportsRepository } from "../repositories/GlobalRepository"
+import { useQuery } from "@tanstack/react-query";
+import { ReportsRepository } from "../repositories/GlobalRepository";
 
-
-export const useProjectReportByProject = (projectId)=>{
-    return useQuery({
-        queryKey:["daily_report",projectId],
-        queryFn:async()=>{
-            const resp = await ReportsRepository.getDailyProgressByProject(projectId);
-            return resp.data;
-        },
-        enabled:!!projectId
-    })
-}
\ No newline at end of file
+export const useProjectReportByProject = (projectId, date) => {
+  return useQuery({
+    queryKey: ["daily_report", projectId, date],
+    queryFn: async () => {
+      const resp = await ReportsRepository.getDailyProgressByProject(
+        projectId,
+        date
+      );
+      return resp.data;
+    },
+    enabled: !!projectId && !!date,
+  });
+};
diff --git a/src/pages/reports/Reports.jsx b/src/pages/reports/Reports.jsx
index 8166d277..cba927b3 100644
--- a/src/pages/reports/Reports.jsx
+++ b/src/pages/reports/Reports.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import ReportDPR from "../../components/reports/report-dpr";
 import "./Reports.css";
@@ -8,15 +8,23 @@ import DatePicker from "../../components/common/DatePicker";
 import { useForm } from "react-hook-form";
 
 const Reports = () => {
-  const [selectedProject, setSelectedProject] = useState("");
+  const [selectedProject, setSelectedProject] = useState();
   const { projectNames, isError, loading } = useProjectName(true);
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
   const { control, watch } = useForm({
     defaultValues: {
-      startDate: "",
+      startDate: yesterday.toISOString().split("T")[0],
     },
   });
   const selelectedDate = watch("startDate");
 
+
+  useEffect(()=>{
+     if(!selectedProject && projectNames){
+      setSelectedProject(projectNames[0]?.id)
+     }
+  },[projectNames])
   return (
     <div className="container-fluid">
       <Breadcrumb
@@ -53,7 +61,7 @@ const Reports = () => {
           </div>
         </div>
       </div>
-      <ReportDPR project={selectedProject} day={selelectedDate} />
+      <ReportDPR project={selectedProject} date={selelectedDate} />
     </div>
   );
 };
diff --git a/src/repositories/GlobalRepository.jsx b/src/repositories/GlobalRepository.jsx
index b6441937..d5a984cf 100644
--- a/src/repositories/GlobalRepository.jsx
+++ b/src/repositories/GlobalRepository.jsx
@@ -97,6 +97,6 @@ const GlobalRepository = {
 export default GlobalRepository;
 
 export const ReportsRepository = {
-  getDailyProgressByProject: (projectId) =>
-    api.get(`/api/Market/get/project/report/${projectId}`),
+  getDailyProgressByProject: (projectId,date) =>
+    api.get(`/api/Market/get/project/report/${projectId}?date=${date}`),
 };