Adding New Weidge in Dashboard Name is "Activity".

src/components/Charts/Circlechart.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+const ApexChart = () => {
+    const [state] = React.useState({
+        series: [75], // Replace this with dynamic value if needed
+        options: {
+            chart: {
+                height: 200, // Smaller height
+                type: "radialBar",
+                toolbar: {
+                    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"],
+        },
+    });
+
+    return (
+        <div id="chart">
+            <ReactApexChart
+                options={state.options}
+                series={state.series}
+                type="radialBar"
+                height={200} // Also apply to component
+            />
+        </div>
+    );
+};
+
+export default ApexChart;

src/components/Dashboard/Activity.jsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from "react";
+import LineChart from "../Charts/LineChart";
+import { useProjects } from "../../hooks/useProjects";
+import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
+import ApexChart from "../Charts/Circlechart";
+
+const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
+
+const Activity = () => {
+    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_Activitydata: ActivityData, isLoading, error: isError } =
+        useDashboard_ActivityData(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">Activity</h5>
+                        <p className="card-subtitle">Activity 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-3 mb-3">
+                <div style={{ width: "150px" }}>
+                    <input
+                        type="date"
+                        className="form-control"
+                        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 === "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">
+                            {isLoading ? (
+                                <p>Loading activity data...</p>
+                            ) : isError ? (
+                                <p>No data available.</p>
+                            ) : (
+                                ActivityData && (
+                                    <>
+                                        <h5 className="fw-bold mb-0 text-start w-80">
+                                            <i className="bx bx-task text-info"></i> Allocated Task
+                                        </h5>
+                                        <h4 className="mb-0 fw-bold">
+                                            {ActivityData.totalCompletedWork?.toLocaleString()}/
+                                            {ActivityData.totalPlannedWork?.toLocaleString()}
+                                        </h4>
+                                        <small className="text-muted">Completed / Assigned</small>
+                                        <div style={{ maxWidth: "180px" }}>
+                                            <ApexChart />
+                                        </div>
+                                    </>
+                                )
+                            )}
+                        </div>
+
+                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+                            {!isLoading && !isError && ActivityData && (
+                                <>
+                                    <h5 className="fw-bold mb-0 text-start w-110">
+                                        <i className="bx bx-task text-info"></i> Activities
+                                    </h5>
+                                    <h4 className="mb-0 fw-bold">
+                                        {ActivityData.totalCompletedWork?.toLocaleString()}/
+                                        {ActivityData.totalPlannedWork?.toLocaleString()}
+                                    </h4>
+                                    <small className="text-muted ">Pending / Assigned</small>
+                                    <div style={{ maxWidth: "180px" }}>
+                                        <ApexChart />
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {activeTab === "logs" && (
+                    <div className="table-responsive">
+                        <table className="table table-bordered table-hover">
+                            <thead>
+                                <tr>
+                                    <th>Activity / Location</th>
+                                    <th>Assigned / Completed</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {[{
+                                    activity: "Code Review / Remote",
+                                    assignedToday: 3,
+                                    completed: 2
+                                }].map((log, index) => (
+                                    <tr key={index}>
+                                        <td>{log.activity}</td>
+                                        <td>{log.assignedToday} / {log.completed}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Activity;

src/components/Dashboard/Dashboard.jsx

@@ -9,11 +9,13 @@ import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
+import Activity from "./Activity";
 
 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">
@@ -42,6 +44,10 @@ const Dashboard = () => {
         <div className="col-xxl-6 col-lg-6">
           <ProjectProgressChart />
         </div>
+
+        <div className="col-xxl-6 col-lg-6">
+          <Activity />
+        </div>
       </div>
     </div>
   );

src/components/common/DatePicker.jsx

@@ -23,9 +23,9 @@ const DatePicker = ({ onDateChange }) => {
   return (
     <div className="container mt-3">
       <div className="mb-3">
-        <label htmlFor="flatpickr-single" className="form-label">
+        {/* <label htmlFor="flatpickr-single" className="form-label">
           Select Date
-        </label>
+        </label> */}
         <input
           type="text"
           id="flatpickr-single"

src/hooks/useDashboard_Data.jsx

@@ -37,6 +37,36 @@ 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([]);
+    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 = () => {
   const [projectsCardData, setProjectsData] = useState([]);
@@ -120,3 +150,31 @@ 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 };
+// };

src/repositories/GlobalRepository.jsx

@@ -18,6 +18,23 @@ const GlobalRepository = {
 
     return api.get(`/api/Dashboard/Progression?${params.toString()}`);
   },
+
+ 
+ getDashboardActivityData: ( date,projectId ) => {  
+
+  return api.get(`/api/Dashboard/activities/${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`);
   },