diff --git a/src/components/Charts/Circle.jsx b/src/components/Charts/Circle.jsx
new file mode 100644
index 00000000..6b0669bf
--- /dev/null
+++ b/src/components/Charts/Circle.jsx
@@ -0,0 +1,80 @@
+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 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: "67%",
+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 ApexChart;
\ No newline at end of file
diff --git a/src/components/Dashboard/Attendance.jsx b/src/components/Dashboard/Attendance.jsx
new file mode 100644
index 00000000..b7e5a3b2
--- /dev/null
+++ b/src/components/Dashboard/Attendance.jsx
@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from "react";
+import LineChart from "../Charts/LineChart";
+import { useProjects } from "../../hooks/useProjects";
+import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
+import ApexChart from "../Charts/Circle";
+
+const LOCAL_STORAGE_PROJECT_KEY = "selectedAttendanceProjectId";
+
+const Attendance = () => {
+    const { projects } = useProjects();
+    const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
+    const [selectedDate, setSelectedDate] = useState(today);
+    const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
+    const initialProjectId = storedProjectId || "all";
+    const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
+    const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
+    const [activeTab, setActiveTab] = useState("all");
+
+    const { dashboard_Attendancedata: AttendanceData, isLoading, error: isError } =
+        useDashboard_AttendanceData(selectedDate, selectedProjectId);
+
+    useEffect(() => {
+        if (selectedProjectId === "all") {
+            setDisplayedProjectName("All Projects");
+        } else if (projects) {
+            const foundProject = projects.find((p) => p.id === selectedProjectId);
+            setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
+        } else {
+            setDisplayedProjectName("Select Project");
+        }
+
+        localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
+    }, [selectedProjectId, projects]);
+
+    const handleProjectSelect = (projectId) => {
+        setSelectedProjectId(projectId);
+    };
+
+    const handleDateChange = (e) => {
+        setSelectedDate(e.target.value);
+    };
+
+    return (
+        <div className="card h-100">
+            <div className="card-header">
+                <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
+                    <div className="card-title mb-0 text-start">
+                        <h5 className="mb-1">Attendance</h5>
+                        <p className="card-subtitle">Attendance Progress Chart</p>
+                    </div>
+
+                    <div className="btn-group">
+                        <button
+                            className="btn btn-outline-primary btn-sm dropdown-toggle"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                        >
+                            {displayedProjectName}
+                        </button>
+                        <ul className="dropdown-menu">
+                            <li>
+                                <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
+                                    All Projects
+                                </button>
+                            </li>
+                            {projects?.map((project) => (
+                                <li key={project.id}>
+                                    <button
+                                        className="dropdown-item"
+                                        onClick={() => handleProjectSelect(project.id)}
+                                    >
+                                        {project.name}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {/* ✅ Date Picker Aligned Left with Padding */}
+            <div className="d-flex justify-content-start ps-6 mb-3 mt-0">
+                <div style={{ width: "120px" }}>
+                    <input
+                        type="date"
+                        className="form-control p-1"
+                        // style={{ fontSize: "1rem" }}
+                        value={selectedDate}
+                        onChange={handleDateChange}
+                    />
+                </div>
+            </div>
+
+
+            {/* Tabs */}
+            <ul className="nav nav-tabs " role="tablist">
+                <li className="nav-item">
+                    <button
+                        type="button"
+                        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>
+
+            <div className="card-body">
+                {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">
+                            {isLoading ? (
+                                <p>Loading Attendance data...</p>
+                            ) : isError ? (
+                                <p>No data available.</p>
+                            ) : (
+                                AttendanceData && (
+                                    <>
+                                        <h5 className="fw-bold mb-0 text-center w-100">
+                                            <i className="bx bx-task text-info"></i> Attendance
+                                        </h5>
+                                        <h4 className="mb-0 fw-bold">
+                                            {AttendanceData.checkedInEmployee?.toLocaleString()}/
+                                            {AttendanceData.assignedEmployee?.toLocaleString()}
+                                        </h4>
+                                        <small className="text-muted">Checked-In / Assigned</small>
+                                        <div style={{ maxWidth: "180px" }}>
+                                            <ApexChart
+                                                completed={AttendanceData.checkedInEmployee}
+                                                planned={AttendanceData.assignedEmployee}
+                                            />
+                                        </div>
+                                    </>
+                                )
+                            )}
+                        </div>
+                    </div>
+
+                )}
+
+                {activeTab === "Details" && (
+                    <div className="table-responsive" style={{ maxHeight: "300px", overflowY: "auto" }}>
+                        <table className="table table-hover mb-0 text-start">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Checkin</th>
+                                    <th>Checkout</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {AttendanceData?.attendanceTable && AttendanceData.attendanceTable.length > 0 ? (
+                                    AttendanceData.attendanceTable.map((record, index) => (
+                                        <tr key={index}>
+                                            <td>{record.firstName}  {record.lastName}</td>
+                                            <td>{new Date(record.inTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
+                                            <td>{new Date(record.outTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
+
+                                        </tr>
+                                    ))
+                                ) : (
+                                    <tr>
+                                        <td colSpan="3" className="text-center">No attendance data available</td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+
+            </div>
+        </div>
+    );
+};
+
+export default Attendance;
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 93e9f18e..6bbdd11f 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -9,14 +9,13 @@ import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
-import Activity from "./Activity";
+import Attendance from "./Attendance";
 
 const Dashboard = () => {
   const { projectsCardData } = useDashboardProjectsCardData();
   const { teamsCardData } = useDashboardTeamsCardData();
   const { tasksCardData } = useDashboardTasksCardData();
-  // const { ActivityData } = useDashboardActivityData();
-  
+
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
@@ -46,7 +45,7 @@ const Dashboard = () => {
         </div>
 
         <div className="col-xxl-6 col-lg-6">
-          <Activity />
+          <Attendance />
         </div>
       </div>
     </div>
diff --git a/src/hooks/useDashboard_Data.jsx b/src/hooks/useDashboard_Data.jsx
index c3e357ec..a46aa0c8 100644
--- a/src/hooks/useDashboard_Data.jsx
+++ b/src/hooks/useDashboard_Data.jsx
@@ -37,8 +37,9 @@ export const useDashboard_Data = ({ days, FromDate, projectId }) => {
   return { dashboard_data, loading: isLineChartLoading, error };
 };
 
-export const useDashboard_ActivityData = (date, projectId) => {
-    const [dashboard_Activitydata, setDashboard_ActivityData] = useState([]);
+
+export const useDashboard_AttendanceData = (date, projectId) => {
+    const [dashboard_Attendancedata, setDashboard_AttendanceData] = useState([]);
     const [isLineChartLoading, setLoading] = useState(false);
     const [error, setError] = useState("");
 
@@ -48,8 +49,8 @@ export const useDashboard_ActivityData = (date, projectId) => {
             setError("");
 
             try {
-                const response = await GlobalRepository.getDashboardActivityData(date,projectId); // date in 2nd param
-                setDashboard_ActivityData(response.data);
+                const response = await GlobalRepository.getDashboardAttendanceData(date,projectId); // date in 2nd param
+                setDashboard_AttendanceData(response.data);
             } catch (err) {
                 setError("Failed to fetch dashboard data.");
                 console.error(err);
@@ -63,7 +64,7 @@ export const useDashboard_ActivityData = (date, projectId) => {
         }
     }, [date, projectId]);
 
-    return { dashboard_Activitydata, isLineChartLoading: isLineChartLoading, error };
+    return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
 };
 
 
@@ -150,31 +151,3 @@ export const useDashboardTasksCardData = () => {
 
   return { tasksCardData, loading, error };
 };
-
-
-// export const useDashboardActivityData = () => {
-//   const [ActivityData, setActivityData] = useState([]);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState("");
-
-//   useEffect(() => {
-//     const fetchTasksData = async () => {
-//       setLoading(true);
-//       setError("");
-
-//       try {
-//         const response = await GlobalRepository.getDashboardActivityData();
-//         setActivityData(response.data);
-//       } catch (err) {
-//         setError("Failed to fetch tasks card data.");
-//         console.error(err);
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchTasksData();
-//   }, []);
-
-//   return { ActivityData, loading, error };
-// };
diff --git a/src/repositories/GlobalRepository.jsx b/src/repositories/GlobalRepository.jsx
index eb84be2a..eda5312e 100644
--- a/src/repositories/GlobalRepository.jsx
+++ b/src/repositories/GlobalRepository.jsx
@@ -19,22 +19,10 @@ const GlobalRepository = {
     return api.get(`/api/Dashboard/Progression?${params.toString()}`);
   },
 
- 
- getDashboardActivityData: ( date,projectId ) => {  
+  getDashboardAttendanceData: ( date,projectId ) => {  
 
-  return api.get(`/api/Dashboard/activities/${projectId}?date=${date}`);
+  return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
 },
-
-//  getDashboardActivityData: (date, projectId) => {
-//     let url = `/api/Dashboard/activities`;
-//     if (projectId) {
-//       url += `/${projectId}?date=${date}`;
-//     } else {
-//       url += `?date=${date}`; // Fetch for all projects
-//     }
-//     return api.get(url);
-//   },
-
   getDashboardProjectsCardData: () => {
     return api.get(`/api/Dashboard/projects`);
   },
@@ -44,9 +32,6 @@ const GlobalRepository = {
   getDashboardTasksCardData: () => {
     return api.get(`/api/Dashboard/tasks`);
   },
-getDashboardPendingAttendence: () => {
-    return api.get(`/api/dashboard/pending-attendance`);
-  },
 
 };