src/components/Dashboard/Dashboard.jsx

@@ -3,36 +3,45 @@ 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 PendingAttendance from "./PendingAttendance";
 
 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 */}
+        <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 />

src/components/Dashboard/PendingAttendance.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useDashboardPendingAttendenceData } from "../../hooks/useDashboard_Data";
+
+const PendingAttendance = () => {
+  const { PendingAttendenceData } = useDashboardPendingAttendenceData();
+
+  return (
+    <div className="card p-3 h-100 text-center d-flex justify-content-between">
+      <div className="d-flex justify-content-start align-items-center mb-3">
+        <h5 className="fw-bold mb-0 ms-2">
+          <i className="bx bx-group text-warning"></i> Pending Attendence
+        </h5>
+      </div>
+      <div className="d-flex justify-content-around align-items-start mt-n2">
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {PendingAttendenceData.pendingCheckOut?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Checkout</small>
+        </div>
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {PendingAttendenceData.pendingRegularization?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Regularization</small>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PendingAttendance;

src/hooks/useDashboard_Data.jsx

@@ -120,3 +120,31 @@ export const useDashboardTasksCardData = () => {
 
   return { tasksCardData, loading, error };
 };
+
+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

@@ -27,6 +27,9 @@ const GlobalRepository = {
   getDashboardTasksCardData: () => {
     return api.get(`/api/Dashboard/tasks`);
   },
+getDashboardPendingAttendence: () => {
+    return api.get(`/api/dashboard/pending-attendance`);
+  },
 
 };