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

2025-06-02 17:13:01 +05:30 · 2025-06-02 17:13:01 +05:30 · 0d649fbc78
commit 0d649fbc78
parent 6217941b0a edf88a1d57
14 changed files with 748 additions and 90 deletions
--- a/src/components/Charts/Circle.jsx
+++ 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;
--- a/src/components/Charts/Circlechart.jsx
+++ b/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;
--- a/src/components/Dashboard/Activity.jsx
+++ b/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;
--- a/src/components/Dashboard/Attendance.jsx
+++ b/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;
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/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>
  );
--- a/src/components/Dashboard/PendingAttendance.jsx
+++ b/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;
--- a/src/components/Project/MapUsers.jsx
+++ b/src/components/Project/MapUsers.jsx
@ -14,9 +14,13 @@ 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( "" );
+  const [searchText, setSearchText] = useState("");

  const handleAllocationData = Array.isArray(allocation) ? allocation : [];

@ -96,9 +100,8 @@ const MapUsers = ({
    });
  };

-  const handleSubmit = () =>
-  {
-    setAssignedLoading(true)
+  const handleSubmit = () => {
+    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="md-2 mb-n5">
-              {(filteredData.length > 0 ||
-                  allocationEmployeesData.length > 0)&& (
-                  <div className="input-group">
-                    <input
-                      type="search"
-                      className="form-control form-control-sm"
-                      placeholder="Search employees..."
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                    />
-                  </div>
-                )}
-            </div>
+          <div className="modal-header text-center">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          </button>
          </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>
+          <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 input-group-sm mb-2">
+                <input
+                  type="search"
+                  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 className="modal-body p-sm-4 p-0">
            <table
              className="datatables-users table border-top dataTable no-footer dtr-column "
@ -141,21 +145,28 @@ 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 && (
-                  <p>No matching employees found.</p>
-                )}
+                {!employeeLoading &&
+                  allocationEmployeesData.length > 0 &&
+                  filteredData.length === 0 && (
+                    <tr>
+                      <td>No matching employees found.</td>
+                    </tr>
+                  )}

                {(filteredData.length > 0 ||
                  allocationEmployeesData.length > 0) &&
@ -174,14 +185,11 @@ const MapUsers = ({
          </div>
          <div className="modal-footer">
            {(filteredData.length > 0 ||
-                  allocationEmployeesData.length > 0) && (
-                <button
-                  className="btn btn-sm btn-success"
-                  onClick={handleSubmit}
-                >
-                  {assignedLoading ? "Please Wait...":"Assign to Project"}
-                </button>
-              )}
+              allocationEmployeesData.length > 0) && (
+              <button className="btn btn-sm btn-success" onClick={handleSubmit}>
+                {assignedLoading ? "Please Wait..." : "Assign to Project"}
+              </button>
+            )}

            <button
              type="button"
--- a/src/components/Project/Teams.jsx
+++ b/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();
  }, []);
--- a/src/components/common/DatePicker.jsx
+++ b/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"
--- a/src/components/common/DateRangePicker.jsx
+++ b/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,
--- a/src/hooks/useDashboard_Data.jsx
+++ b/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([]);
--- a/src/hooks/useProfile.js
+++ b/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 = () =>
-{
-  const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
-  
-    const [profile, setProfile] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
-  
-   
-  const fetchData = async () =>
-  {
-    try
-    {
-      setLoading( true )
+let hasFetched = false;
+
+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 () => {
+    try {
+      setLoading(true);
      let response = await AuthRepository.profile();
-      setProfile( response.data )
-      cacheProfileData( response.data )
-      setLoading( false );
-        
-    } catch ( error )
-    {
-      setLoading( false )
-      console.error( error );
-      setError( "Failed to fetch data." );
-    };
-  }
-  
-  
-  useEffect( () => {
-   
-    if (!loggedUser )
-    {
-    fetchData() 
-    } else
-    {
-      setProfile(loggedUser)
+      setProfile(response.data);
+      cacheProfileData(response.data);
+    } catch (error) {
+      setError("Failed to fetch data.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!hasFetched) {
+      hasFetched = true;
+      if (!loggedUser) {
+        fetchData();
+      } else {
+        setProfile(loggedUser);
+      }
    }
-    
-     },[])
  
-    return  { profile,loading,error}
-    
-  }
+      setProfile(loggedUser);
+  
+  }, [loggedUser]);
+
+  return { profile, loading, error };
+};
--- a/src/hooks/useProjects.js
+++ b/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 };
 };
--- a/src/repositories/GlobalRepository.jsx
+++ b/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`);
  },