Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Feature_Directory

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;

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/Attendance.jsx

@@ -0,0 +1,218 @@
+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("Summary");
+
+  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  mb-1 pb-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">Attendance</h5>
+            <p className="card-subtitle">Daily Attendance Data</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>
+
+      <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5">
+        {/* Tabs */}
+        <div>
+          <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>
+        {/* ✅ Date Picker Aligned Left with Padding */}
+        <div className="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>
+      </div>
+
+      <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;

src/components/Dashboard/Dashboard.jsx

@@ -9,6 +9,7 @@ import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
+// import Attendance from "./Attendance";
 
 const Dashboard = () => {
   const { projectsCardData } = useDashboardProjectsCardData();
@@ -42,6 +43,10 @@ const Dashboard = () => {
         <div className="col-xxl-6 col-lg-6">
           <ProjectProgressChart />
         </div>
+
+        {/* <div className="col-xxl-6 col-lg-6">
+          <Attendance />
+        </div> */}
       </div>
     </div>
   );

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/components/Project/MapUsers.jsx

@@ -14,7 +14,11 @@ const MapUsers = ({
   assignedLoading,
   setAssignedLoading,
 }) => {
-  const { employeesList, loading: employeeLoading, error } = useAllEmployees(false);
+  const {
+    employeesList,
+    loading: employeeLoading,
+    error,
+  } = useAllEmployees(false);
   const [selectedEmployees, setSelectedEmployees] = useState([]);
   const [searchText, setSearchText] = useState("");
 
@@ -96,9 +100,8 @@ const MapUsers = ({
     });
   };
 
-  const handleSubmit = () =>
+  const handleSubmit = () => {
-  {
+    setAssignedLoading(true);
-    setAssignedLoading(true)
     const selected = selectedEmployees
       .filter((emp) => emp.isSelected)
       .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
@@ -108,32 +111,33 @@ const MapUsers = ({
     } else {
       showToast("Please select Employee", "error");
     }
-
   };
   return (
     <>
       <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
         <div className="modal-content">
-          <div className="modal-header ">
+          <div className="modal-header text-center">
-            <div className="md-2 mb-n5">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          </button>
+          </div>
+          <p className="m-0 fw-semibold fs-5">Assign Employee</p>
+
+          <div className="px-4 mt-4 col-md-4 text-start">
             {(filteredData.length > 0 ||
               allocationEmployeesData.length > 0) && (
-                  <div className="input-group">
+              <div className="input-group input-group-sm mb-2">
                 <input
                   type="search"
-                      className="form-control form-control-sm"
+                  className="form-control"
                   placeholder="Search employees..."
                   onChange={(e) => setSearchQuery(e.target.value)}
                 />
               </div>
             )}
+
+            <p className="mb-0 small text-muted fw-semibold">Select Employee</p>
           </div>
-          </div>
+
-          <div className="d-flex justify-content-start align-items-center px-4 mt-6">
-          <h5 className="mb-0 mt-1">
-            <i className=" text-warning me-3"></i> Select Employee
-          </h5>
-        </div>
           <div className="modal-body p-sm-4 p-0">
             <table
               className="datatables-users table border-top dataTable no-footer dtr-column "
@@ -141,20 +145,27 @@ const MapUsers = ({
               aria-describedby="DataTables_Table_0_info"
               style={{ width: "100%" }}
             >
-              
               <tbody>
                 {employeeLoading && allocationEmployeesData.length === 0 && (
-                  <p>Loading...</p>
+                  <tr>
+                    <td>Loading..</td>
+                  </tr>
                 )}
 
                 {!employeeLoading &&
                   allocationEmployeesData.length === 0 &&
                   filteredData.length === 0 && (
-                    <p>All employee assigned to Project.</p>
+                    <tr>
+                      <td>All employee assigned to Project.</td>
+                    </tr>
                   )}
 
-                {!employeeLoading && allocationEmployeesData.length > 0 && filteredData.length === 0 && (
+                {!employeeLoading &&
-                  <p>No matching employees found.</p>
+                  allocationEmployeesData.length > 0 &&
+                  filteredData.length === 0 && (
+                    <tr>
+                      <td>No matching employees found.</td>
+                    </tr>
                   )}
 
                 {(filteredData.length > 0 ||
@@ -175,10 +186,7 @@ const MapUsers = ({
           <div className="modal-footer">
             {(filteredData.length > 0 ||
               allocationEmployeesData.length > 0) && (
-                <button
+              <button className="btn btn-sm btn-success" onClick={handleSubmit}>
-                  className="btn btn-sm btn-success"
-                  onClick={handleSubmit}
-                >
                 {assignedLoading ? "Please Wait..." : "Assign to Project"}
               </button>
             )}

src/components/Project/Teams.jsx

@@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
 
 const Teams = ({ project }) => {
   const dispatch = useDispatch();
-  dispatch(changeMaster("Job Role"));
+
   const { data, loading } = useMaster();
   const [isModalOpen, setIsModelOpen] = useState(false);
   const [error, setError] = useState("");
@@ -46,7 +46,6 @@ const Teams = ({ project }) => {
           setEmployeeLoading(false);
         })
         .catch((error) => {
-          console.error(error);
           setError("Failed to fetch data.");
           setEmployeeLoading(false);
         });
@@ -132,6 +131,11 @@ const Teams = ({ project }) => {
     document.body.style.overflow = "auto";
   };
 
+  useEffect(() => {
+  dispatch(changeMaster("Job Role"));
+}, [dispatch]);
+
+
   useEffect(() => {
     fetchEmployees();
   }, []);

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/components/common/DateRangePicker.jsx

@@ -12,7 +12,9 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
 
     const fp = flatpickr(inputRef.current, {
       mode: "range",
-      dateFormat: "d-m-Y",
+      dateFormat: "Y-m-d",           // Format for backend (actual input value)
+      altInput: true,                // Enables a visually different field
+      altFormat: "d-m-Y",
       defaultDate: [fifteenDaysAgo, today],
       static: true,
       clickOpens: true,

src/hooks/useDashboard_Data.jsx

@@ -37,6 +37,37 @@ export const useDashboard_Data = ({ days, FromDate, projectId }) => {
   return { dashboard_data, loading: isLineChartLoading, error };
 };
 
+
+export const useDashboard_AttendanceData = (date, projectId) => {
+    const [dashboard_Attendancedata, setDashboard_AttendanceData] = useState([]);
+    const [isLineChartLoading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true);
+            setError("");
+
+            try {
+                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);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (date && projectId !== null) {
+            fetchData();
+        }
+    }, [date, projectId]);
+
+    return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
+};
+
+
 // 🔹 Dashboard Projects Card Data Hook
 export const useDashboardProjectsCardData = () => {
   const [projectsCardData, setProjectsData] = useState([]);

src/hooks/useProfile.js

@@ -3,46 +3,40 @@ import AuthRepository from "../repositories/AuthRepository";
 import {cacheProfileData, getCachedProfileData} from "../slices/apiDataManager";
 import {useSelector} from "react-redux";
 
-export const useProfile = () =>
+let hasFetched = false;
-{
-  const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
 
+export const useProfile = () => {
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
   const [profile, setProfile] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
-   
+  const fetchData = async () => {
-  const fetchData = async () =>
+    try {
-  {
+      setLoading(true);
-    try
-    {
-      setLoading( true )
       let response = await AuthRepository.profile();
-      setProfile( response.data )
+      setProfile(response.data);
-      cacheProfileData( response.data )
+      cacheProfileData(response.data);
-      setLoading( false );
+    } catch (error) {
-        
-    } catch ( error )
-    {
-      setLoading( false )
-      console.error( error );
       setError("Failed to fetch data.");
-    };
+    } finally {
+      setLoading(false);
     }
-  
+  };
 
   useEffect(() => {
-   
+    if (!hasFetched) {
-    if (!loggedUser )
+      hasFetched = true;
-    {
+      if (!loggedUser) {
-    fetchData() 
+        fetchData();
-    } else
+      } else {
-    {
+        setProfile(loggedUser);
-      setProfile(loggedUser)
+      }
     }
   
-     },[])
+      setProfile(loggedUser);
   
-    return  { profile,loading,error}
+  }, [loggedUser]);
 
-  }
+  return { profile, loading, error };
+};

src/hooks/useProjects.js

@@ -2,17 +2,18 @@ import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 
 export const useProjects = () => {
-  const { profile } = useProfile();
+
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser )
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    const projectIds = profile?.projects || [];
+    const projectIds = loggedUser?.projects || [];
 
     const filterProjects = (projectsList) => {
       return projectsList
@@ -43,12 +44,11 @@ export const useProjects = () => {
       }
     }
   };
-
   useEffect(() => {
-    if (profile) {
+    if (loggedUser) {
       fetchData();
     }
-  }, [profile]);
+  }, [loggedUser]);
 
   return { projects, loading, error, refetch: fetchData };
 };

src/repositories/GlobalRepository.jsx

@@ -18,6 +18,11 @@ const GlobalRepository = {
 
     return api.get(`/api/Dashboard/Progression?${params.toString()}`);
   },
+
+  getDashboardAttendanceData: ( date,projectId ) => {  
+
+  return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
+},
   getDashboardProjectsCardData: () => {
     return api.get(`/api/Dashboard/projects`);
   },