Creating the Weidgets in Dashboard name Pending Attendance, Attendance, Activities.

src/components/Charts/Circle.jsx

@@ -2,79 +2,79 @@ import React from "react";
 import ReactApexChart from "react-apexcharts";
 
 const ApexChart = ({ completed = 0, planned = 1 }) => {
-const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
+    const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
 
-const options = {
+    const options = {
-chart: {
+        chart: {
-height: 200,
+            height: 200,
-type: "radialBar",
+            type: "radialBar",
-toolbar: { show: false },
+            toolbar: { show: false },
-},
+        },
-plotOptions: {
+        plotOptions: {
-radialBar: {
+            radialBar: {
-startAngle: -135,
+                startAngle: -135,
-endAngle: 225,
+                endAngle: 225,
-hollow: {
+                hollow: {
-margin: 0,
+                    margin: 0,
-size: "60%",
+                    size: "60%",
-background: "#fff",
+                    background: "#fff",
-dropShadow: {
+                    dropShadow: {
-enabled: true,
+                        enabled: true,
-top: 2,
+                        top: 2,
-left: 0,
+                        left: 0,
-blur: 3,
+                        blur: 3,
-opacity: 0.45,
+                        opacity: 0.45,
-},
+                    },
-},
+                },
-track: {
+                track: {
-background: "#f5f5f5",
+                    background: "#f5f5f5",
-strokeWidth: "67%",
+                    strokeWidth: "40%",
-dropShadow: { enabled: false },
+                    dropShadow: { enabled: false },
-},
+                },
-dataLabels: {
+                dataLabels: {
-show: true,
+                    show: true,
-name: {
+                    name: {
-offsetY: -10,
+                        offsetY: -10,
-color: "#888",
+                        color: "#888",
-fontSize: "14px",
+                        fontSize: "14px",
-},
+                    },
-value: {
+                    value: {
-formatter: (val) => `${val}%`,
+                        formatter: (val) => `${val}%`,
-color: "#111",
+                        color: "#111",
-fontSize: "24px",
+                        fontSize: "24px",
-show: true,
+                        show: true,
-},
+                    },
-},
+                },
-},
+            },
-},
+        },
-fill: {
+        fill: {
-type: "gradient",
+            type: "gradient",
-gradient: {
+            gradient: {
-shade: "dark",
+                shade: "dark",
-type: "horizontal",
+                type: "horizontal",
-shadeIntensity: 0.5,
+                shadeIntensity: 0.5,
-gradientToColors: ["#ABE5A1"],
+                gradientToColors: ["#ABE5A1"],
-opacityFrom: 1,
+                opacityFrom: 1,
-opacityTo: 1,
+                opacityTo: 1,
-stops: [0, 100],
+                stops: [0, 100],
-},
+            },
-},
+        },
-stroke: {
+        stroke: {
-lineCap: "round",
+            lineCap: "round",
-},
+        },
-labels: ["Progress"],
+        labels: ["Progress"],
-};
+    };
 
-return (
+    return (
-<div id="chart">
+        <div id="chart">
-<ReactApexChart
+            <ReactApexChart
-options={options}
+                options={options}
-series={[percentage]}
+                series={[percentage]}
-type="radialBar"
+                type="radialBar"
-height={200}
+                height={200}
-/>
+            />
-</div>
+        </div>
-);
+    );
 };
 
 export default ApexChart;

src/components/Charts/CircleChart1.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+const ApexChart1 = ({ Pending  = 0, Assigned = 1 }) => {
+    const percentage = Assigned > 0 ? Math.round((Pending / Assigned) * 100) : 0;
+
+    const options = {
+        chart: {
+            height: 200,
+            type: "radialBar",
+            toolbar: { show: false },
+        },
+        plotOptions: {
+            radialBar: {
+                startAngle: -135,
+                endAngle: 225,
+                hollow: {
+                    margin: 0,
+                    size: "60%",
+                    background: "#fff",
+                    dropShadow: {
+                        enabled: true,
+                        top: 2,
+                        left: 0,
+                        blur: 3,
+                        opacity: 0.45,
+                    },
+                },
+                track: {
+                    background: "#f5f5f5",
+                    strokeWidth: "40%",
+                    dropShadow: { enabled: false },
+                },
+                dataLabels: {
+                    show: true,
+                    name: {
+                        offsetY: -10,
+                        color: "#888",
+                        fontSize: "14px",
+                    },
+                    value: {
+                        formatter: (val) => `${val}%`,
+                        color: "#111",
+                        fontSize: "24px",
+                        show: true,
+                    },
+                },
+            },
+        },
+        fill: {
+            type: "gradient",
+            gradient: {
+                shade: "dark",
+                type: "horizontal",
+                shadeIntensity: 0.5,
+                gradientToColors: ["#ABE5A1"],
+                opacityFrom: 1,
+                opacityTo: 1,
+                stops: [0, 100],
+            },
+        },
+        stroke: {
+            lineCap: "round",
+        },
+        labels: ["Progress"],
+    };
+
+    return (
+        <div id="chart">
+            <ReactApexChart
+                options={options}
+                series={[percentage]}
+                type="radialBar"
+                height={200}
+            />
+        </div>
+    );
+};
+
+export default ApexChart1;

src/components/Charts/Circlechart.jsx

@@ -1,85 +1,80 @@
 import React from "react";
 import ReactApexChart from "react-apexcharts";
 
-const ApexChart = () => {
+const ApexChart = ({ completed = 0, planned = 1 }) => {
-    const [state] = React.useState({
+    const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
-        series: [75], // Replace this with dynamic value if needed
+
-        options: {
+    const options = {
-            chart: {
+        chart: {
-                height: 200, // Smaller height
+            height: 200,
-                type: "radialBar",
+            type: "radialBar",
-                toolbar: {
+            toolbar: { show: false },
-                    show: false, // Hide toolbar
-                },
-            },
-            plotOptions: {
-                radialBar: {
-                    startAngle: -135,
-                    endAngle: 225,
-                    hollow: {
-                        margin: 0,
-                        size: "60%", // Smaller inner circle
-                        background: "#fff",
-                        dropShadow: {
-                            enabled: true,
-                            top: 2,
-                            left: 0,
-                            blur: 3,
-                            opacity: 0.45,
-                        },
-                    },
-                    track: {
-                        background: "#f5f5f5",
-                        strokeWidth: "67%",
-                        dropShadow: {
-                            enabled: false,
-                        },
-                    },
-                    dataLabels: {
-                        show: true,
-                        name: {
-                            offsetY: -10,
-                            color: "#888",
-                            fontSize: "14px",
-                        },
-                        value: {
-                            formatter: (val) => parseInt(val),
-                            color: "#111",
-                            fontSize: "24px", // Smaller number
-                            show: true,
-                        },
-                    },
-                },
-            },
-            fill: {
-                type: "gradient",
-                gradient: {
-                    shade: "dark",
-                    type: "horizontal",
-                    shadeIntensity: 0.5,
-                    gradientToColors: ["#ABE5A1"],
-                    opacityFrom: 1,
-                    opacityTo: 1,
-                    stops: [0, 100],
-                },
-            },
-            stroke: {
-                lineCap: "round",
-            },
-            labels: ["Percent"],
         },
-    });
+        plotOptions: {
+            radialBar: {
+                startAngle: -135,
+                endAngle: 225,
+                hollow: {
+                    margin: 0,
+                    size: "60%",
+                    background: "#fff",
+                    dropShadow: {
+                        enabled: true,
+                        top: 2,
+                        left: 0,
+                        blur: 3,
+                        opacity: 0.45,
+                    },
+                },
+                track: {
+                    background: "#f5f5f5",
+                    strokeWidth: "40%",
+                    dropShadow: { enabled: false },
+                },
+                dataLabels: {
+                    show: true,
+                    name: {
+                        offsetY: -10,
+                        color: "#888",
+                        fontSize: "14px",
+                    },
+                    value: {
+                        formatter: (val) => `${val}%`,
+                        color: "#111",
+                        fontSize: "24px",
+                        show: true,
+                    },
+                },
+            },
+        },
+        fill: {
+            type: "gradient",
+            gradient: {
+                shade: "dark",
+                type: "horizontal",
+                shadeIntensity: 0.5,
+                gradientToColors: ["#ABE5A1"],
+                opacityFrom: 1,
+                opacityTo: 1,
+                stops: [0, 100],
+            },
+        },
+        stroke: {
+            lineCap: "round",
+        },
+        labels: ["Progress"],
+    };
 
     return (
         <div id="chart">
             <ReactApexChart
-                options={state.options}
+                options={options}
-                series={state.series}
+                series={[percentage]}
                 type="radialBar"
-                height={200} // Also apply to component
+                height={200}
             />
         </div>
     );
 };
 
-export default ApexChart;
+export default ApexChart;

src/components/Dashboard/Activity.jsx

@@ -3,6 +3,7 @@ import LineChart from "../Charts/LineChart";
 import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
 import ApexChart from "../Charts/Circlechart";
+import ApexChart1 from "../Charts/CircleChart1";
 
 const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
 
@@ -14,7 +15,7 @@ const Activity = () => {
     const initialProjectId = storedProjectId || "all";
     const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
     const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
-    const [activeTab, setActiveTab] = useState("all");
+    const [activeTab, setActiveTab] = useState("Summary");
 
     const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
         useDashboard_ActivityData(selectedDate, selectedProjectId);
@@ -24,7 +25,9 @@ const Activity = () => {
             setDisplayedProjectName("All Projects");
         } else if (projects) {
             const foundProject = projects.find((p) => p.id === selectedProjectId);
-            setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
+            setDisplayedProjectName(
+                foundProject ? foundProject.name : "Select Project"
+            );
         } else {
             setDisplayedProjectName("Select Project");
         }
@@ -42,11 +45,11 @@ const Activity = () => {
 
     return (
         <div className="card h-100">
-            <div className="card-header">
+            <div className="card-header mb-1 pb-0">
-                <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
+                <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 pb-0">
                     <div className="card-title mb-0 text-start">
                         <h5 className="mb-1">Activity</h5>
-                        <p className="card-subtitle">Activity Progress Chart</p>
+                        <p className="card-subtitle">Daily Activity Data</p>
                     </div>
 
                     <div className="btn-group">
@@ -58,6 +61,7 @@ const Activity = () => {
                         >
                             {displayedProjectName}
                         </button>
+
                         <ul className="dropdown-menu">
                             <li>
                                 <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
@@ -79,46 +83,59 @@ const Activity = () => {
                 </div>
             </div>
 
-            {/* ✅ Date Picker Aligned Left with Padding */}
+
-            <div className="d-flex justify-content-start ps-3 mb-3">
+            {/* Tabs */}
-                <div style={{ width: "150px" }}>
+            <div className="d-flex flex-wrap justify-content-between align-items-center ms-1">
-                    <input
+                <ul className="nav nav-tabs " role="tablist">
-                        type="date"
+                    <li className="nav-item">
-                        className="form-control"
+                        <button
-                        value={selectedDate}
+                            type="button"
-                        onChange={handleDateChange}
+                            className={`nav-link ${activeTab === "Summary" ? "active" : ""}`}
-                    />
+                            onClick={() => setActiveTab("Summary")}
+                            data-bs-toggle="tab"
+                        >
+                            Summary
+                        </button>
+                    </li>
+                    <li className="nav-item">
+                        <button
+                            type="button"
+                            className={`nav-link ${activeTab === "Details" ? "active" : ""}`}
+                            onClick={() => setActiveTab("Details")}
+                            data-bs-toggle="tab"
+                        >
+                            Details
+                        </button>
+                    </li>
+                </ul>
+
+                {/* ✅ Date Picker Aligned Left with Padding */}
+
+                <div className="ps-6 mt-0 me-6 ">
+                    <div style={{ width: "160px" }}>
+                        <input
+                            type="date"
+                            style={{
+                                height: "25px",       
+                                fontSize: "0.8rem",   
+                                padding: "10px 10px", 
+                                width: "100%",        
+                                border: "1.5px solid #3b82f6", 
+                                borderRadius: "4px",           
+                                outline: "none"
+                            }}
+                            value={selectedDate}
+                            onChange={handleDateChange}
+                        />
+                    </div>
                 </div>
             </div>
 
-            {/* Tabs */}
+            {/* #CircleChart for this function? */}
-            <ul className="nav nav-tabs " role="tablist">
+            <div className="card-body p-3">
-                <li className="nav-item">
+                {activeTab === "Summary" && (
-                    <button
-                        type="button"
-                        className={`nav-link ${activeTab === "all" ? "active" : ""}`}
-                        onClick={() => setActiveTab("all")}
-                        data-bs-toggle="tab"
-                    >
-                        Summary
-                    </button>
-                </li>
-                <li className="nav-item">
-                    <button
-                        type="button"
-                        className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
-                        onClick={() => setActiveTab("logs")}
-                        data-bs-toggle="tab"
-                    >
-                        Details
-                    </button>
-                </li>
-            </ul>
-
-            <div className="card-body">
-                {activeTab === "all" && (
                     <div className="row justify-content-between">
-                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+                        <div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
                             {isLoading ? (
                                 <p>Loading activity data...</p>
                             ) : isError ? (
@@ -135,13 +152,17 @@ const Activity = () => {
                                         </h4>
                                         <small className="text-muted">Completed / Assigned</small>
                                         <div style={{ maxWidth: "180px" }}>
-                                            <ApexChart />
+                                            <ApexChart
+                                                completed={ActivityData.totalCompletedWork}
+                                                planned={ActivityData.totalPlannedWork}
+                                            />
                                         </div>
                                     </>
                                 )
                             )}
                         </div>
 
+                        {/* #CircleChart1 for this function */}
                         <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
                             {!isLoading && !isError && ActivityData && (
                                 <>
@@ -149,12 +170,15 @@ const Activity = () => {
                                         <i className="bx bx-task text-info"></i> Activities
                                     </h5>
                                     <h4 className="mb-0 fw-bold">
-                                        {ActivityData.totalCompletedWork?.toLocaleString()}/
+                                        {ActivityData.reportPending?.toLocaleString()}/
-                                        {ActivityData.totalPlannedWork?.toLocaleString()}
+                                        {ActivityData.todaysAssigned?.toLocaleString()}
                                     </h4>
                                     <small className="text-muted ">Pending / Assigned</small>
                                     <div style={{ maxWidth: "180px" }}>
-                                        <ApexChart />
+                                        <ApexChart1
+                                            Assigned={ActivityData.todaysAssigned}
+                                            Pending={ActivityData.reportPending}
+                                        />
                                     </div>
                                 </>
                             )}
@@ -162,33 +186,47 @@ const Activity = () => {
                     </div>
                 )}
 
-                {activeTab === "logs" && (
+                {activeTab === "Details" && (
-                    <div className="table-responsive">
+                    <div className="table-responsive" style={{ maxHeight: "300px", overflowY: "auto" }}>
-                        <table className="table table-bordered table-hover">
+                        <table className="table table-hover mb-0 text-start">
                             <thead>
                                 <tr>
-                                    <th>Activity / Location</th>
+                                    <th className="px-3" style={{ width: "60%" }}>Location / Activity</th>
-                                    <th>Assigned / Completed</th>
+                                    <th >Assigned / Completed</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                {[{
+                                {ActivityData?.performedActivites && ActivityData.performedActivites.length > 0 ? (
-                                    activity: "Code Review / Remote",
+                                    ActivityData.performedActivites.map((activity, index) => (
-                                    assignedToday: 3,
+                                        <tr key={index}>
-                                    completed: 2
+                                            <td >
-                                }].map((log, index) => (
+                                                {activity.buldingName}, {activity.floorName}, {activity.workAreaName}<br />
-                                    <tr key={index}>
+                                                <small style={{ fontSize: "0.7rem" }}>
-                                        <td>{log.activity}</td>
+                                                    {activity.activityName}
-                                        <td>{log.assignedToday} / {log.completed}</td>
+                                                </small>
+
+
+                                            </td>
+
+                                            <td className="text-center">{activity.assignedToday} / {activity.completedToday}</td> {/* <-- Right aligned */}
+                                        </tr>
+                                    ))
+                                ) : (
+                                    <tr>
+                                        <td colSpan="2" className="text-center">No activity data available</td>
                                     </tr>
-                                ))}
+                                )}
                             </tbody>
                         </table>
                     </div>
                 )}
+
             </div>
-        </div>
+        </div >
     );
 };
 
 export default Activity;
+
+
+

src/components/Dashboard/Attendance.jsx

@@ -88,16 +88,15 @@ const Attendance = () => {
         </div>
       </div>
 
-      <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5">
+      {/* Tabs */}
-        {/* Tabs */}
+      <div className="d-flex flex-wrap justify-content-between align-items-center ms-1">
         <div>
           <ul className="nav nav-tabs " role="tablist">
             <li className="nav-item">
               <button
                 type="button"
-                className={`nav-link ${
+                className={`nav-link ${activeTab === "Summary" ? "active" : ""
-                  activeTab === "Summary" ? "active" : ""
+                  }`}
-                }`}
                 onClick={() => setActiveTab("Summary")}
                 data-bs-toggle="tab"
               >
@@ -107,9 +106,8 @@ const Attendance = () => {
             <li className="nav-item">
               <button
                 type="button"
-                className={`nav-link ${
+                className={`nav-link ${activeTab === "Details" ? "active" : ""
-                  activeTab === "Details" ? "active" : ""
+                  }`}
-                }`}
                 onClick={() => setActiveTab("Details")}
                 data-bs-toggle="tab"
               >
@@ -118,21 +116,30 @@ const Attendance = () => {
             </li>
           </ul>
         </div>
+
         {/* ✅ Date Picker Aligned Left with Padding */}
-        <div className="ps-6 mb-3 mt-0">
+        <div className="ps-6 mt-0 me-6 ">
-          <div style={{ width: "120px" }}>
+          <div style={{ width: "160px" }}>
             <input
               type="date"
-              className="form-control p-1"
+              style={{
-              // style={{ fontSize: "1rem" }}
+                height: "25px",
+                fontSize: "0.8rem",
+                padding: "10px 10px",
+                width: "100%",
+                border: "1.5px solid #3b82f6",
+                borderRadius: "4px",
+                outline: "none"
+              }}
               value={selectedDate}
               onChange={handleDateChange}
             />
           </div>
         </div>
+
       </div>
 
-      <div className="card-body">
+      <div className="card-body p-3">
         {activeTab === "Summary" && (
           <div className="row justify-content-center">
             <div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
@@ -166,20 +173,21 @@ const Attendance = () => {
 
         {activeTab === "Details" && (
           <div
-            className="table-responsive"
+            className="table-responsive mt-1"
-            style={{ maxHeight: "300px", overflowY: "auto" }}
+            style={{ maxHeight: "300px", overflowY: "auto", fontSize: "0.8rem" }}
           >
             <table className="table table-hover mb-0 text-start">
               <thead>
                 <tr>
-                  <th>Name</th>
+                  <th className="px-3" style={{ width: "45%" }}>Name</th>
-                  <th>Checkin</th>
+                  <th className="px-3" style={{ width: "35%" }}>Checkin</th>
-                  <th>Checkout</th>
+                  <th className="px-3" style={{ width: "40%" }}>Checkout</th>
+
                 </tr>
               </thead>
               <tbody>
                 {AttendanceData?.attendanceTable &&
-                AttendanceData.attendanceTable.length > 0 ? (
+                  AttendanceData.attendanceTable.length > 0 ? (
                   AttendanceData.attendanceTable.map((record, index) => (
                     <tr key={index}>
                       <td>
@@ -191,7 +199,7 @@ const Attendance = () => {
                           minute: "2-digit",
                         })}
                       </td>
-                      <td>
+                      <td className="px-5 align-middle">
                         {new Date(record.outTime).toLocaleTimeString([], {
                           hour: "2-digit",
                           minute: "2-digit",

src/components/Dashboard/Dashboard.jsx

@@ -3,37 +3,46 @@ import {
   useDashboardProjectsCardData,
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
+  useDashboardPendingAttendenceData,
 } from "../../hooks/useDashboard_Data";
 import Projects from "./Projects";
 import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
-// import Attendance from "./Attendance";
+import Attendance from "./Attendance";
+import PendingAttendance from "./PendingAttendance";
+import Activity from "./Activity";
 
 const Dashboard = () => {
   const { projectsCardData } = useDashboardProjectsCardData();
   const { teamsCardData } = useDashboardTeamsCardData();
   const { tasksCardData } = useDashboardTasksCardData();
+  const { PendingAttendenceData} = useDashboardPendingAttendenceData();
 
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
         {/* Projects Card */}
-        <div className="col-sm-6 col-lg-4">
+        <div className="col-sm-6 col-lg-3">
           <Projects projectsCardData={projectsCardData} />
         </div>
 
         {/* Teams Card */}
-        <div className="col-sm-6 col-lg-4">
+        <div className="col-sm-6 col-lg-3">
           <Teams teamsCardData={teamsCardData} />
         </div>
 
         {/* Tasks Card */}
-        <div className="col-sm-6 col-lg-4">
+        <div className="col-sm-6 col-lg-3">
           <TasksCard tasksCardData={tasksCardData} />
         </div>
 
+        {/* Pending Attendance Card */}
+        <div className="col-sm-6 col-lg-3">
+          <PendingAttendance PendingAttendenceData={PendingAttendenceData}/>
+        </div>
+
         {/* Bar Chart (Project Completion) */}
         <div className="col-xxl-6 col-lg-6">
           <ProjectCompletionChart />
@@ -44,9 +53,13 @@ const Dashboard = () => {
           <ProjectProgressChart />
         </div>
 
-        {/* <div className="col-xxl-6 col-lg-6">
+        <div className="col-xxl-6 col-lg-6">
           <Attendance />
-        </div> */}
+        </div>
+
+        <div className="col-xxl-6 col-lg-6">
+          <Activity/>
+        </div>
       </div>
     </div>
   );

src/hooks/useDashboard_Data.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import GlobalRepository from "../repositories/GlobalRepository";
+import Attendance from "../components/Dashboard/Attendance";
 
 // 🔹 Dashboard Progression Data Hook
 export const useDashboard_Data = ({ days, FromDate, projectId }) => {
@@ -67,6 +68,38 @@ export const useDashboard_AttendanceData = (date, projectId) => {
     return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
 };
 
+// Activity weidget
+
+export const useDashboard_ActivityData = (date, projectId) => {
+    const [dashboard_Activitydata, setDashboard_ActivityData] = useState([]);
+    const [isLineChartLoading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true);
+            setError("");
+
+            try {
+                const response = await GlobalRepository.getDashboardActivityData(date,projectId); // date in 2nd param
+                setDashboard_ActivityData(response.data);
+            } catch (err) {
+                setError("Failed to fetch dashboard data.");
+                console.error(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (date && projectId !== null) {
+            fetchData();
+        }
+    }, [date, projectId]);
+
+    return { dashboard_Activitydata, isLineChartLoading: isLineChartLoading, error };
+};
+
+
 
 // 🔹 Dashboard Projects Card Data Hook
 export const useDashboardProjectsCardData = () => {
@@ -151,3 +184,31 @@ export const useDashboardTasksCardData = () => {
 
   return { tasksCardData, loading, error };
 };
+
+// Pending Attendance
+export const useDashboardPendingAttendenceData = () => {
+  const [PendingAttendenceData, setPendingAttendence] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchPendingAttendence = async () => {
+      setLoading(true);
+      setError("");
+
+      try {
+        const response = await GlobalRepository.getDashboardPendingAttendence();
+        setPendingAttendence(response.data);
+      } catch (err) {
+        setError("Failed to fetch Pending Attendence card data.");
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPendingAttendence();
+  }, []);
+
+  return { PendingAttendenceData, loading, error };
+};

src/repositories/GlobalRepository.jsx

@@ -3,12 +3,12 @@ import { api } from "../utils/axiosClient";
 const GlobalRepository = {
   getDashboardProgressionData: ({ days = '', FromDate = '', projectId = '' }) => {
     let params;
-    if(projectId == null){
+    if (projectId == null) {
       params = new URLSearchParams({
         days: days.toString(),
         FromDate,
       });
-    }else{
+    } else {
       params = new URLSearchParams({
         days: days.toString(),
         FromDate,
@@ -19,10 +19,10 @@ const GlobalRepository = {
     return api.get(`/api/Dashboard/Progression?${params.toString()}`);
   },
 
-  getDashboardAttendanceData: ( date,projectId ) => {  
+  getDashboardAttendanceData: (date, projectId) => {
 
-  return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
+    return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
-},
+  },
   getDashboardProjectsCardData: () => {
     return api.get(`/api/Dashboard/projects`);
   },
@@ -32,6 +32,12 @@ const GlobalRepository = {
   getDashboardTasksCardData: () => {
     return api.get(`/api/Dashboard/tasks`);
   },
+  getDashboardPendingAttendence: () => {
+    return api.get(`/api/dashboard/pending-attendance`);
+  },
+  getDashboardActivityData: ( date,projectId ) => { 
+  return api.get(`/api/Dashboard/activities/${projectId}?date=${date}`);
+},
 
 };