From edf092e85ee31b30a412b2c7076d150ea32e1280 Mon Sep 17 00:00:00 2001 From: Umesh Desai Date: Thu, 12 Jun 2025 23:56:43 +0530 Subject: [PATCH] Creating a toggle button in Project Progress. --- .../Dashboard/ProjectProgressChart.jsx | 95 ++++----- src/pages/employee/EmployeeList.jsx | 192 ++++++++---------- 2 files changed, 133 insertions(+), 154 deletions(-) diff --git a/src/components/Dashboard/ProjectProgressChart.jsx b/src/components/Dashboard/ProjectProgressChart.jsx index 41a3453d..15f19582 100644 --- a/src/components/Dashboard/ProjectProgressChart.jsx +++ b/src/components/Dashboard/ProjectProgressChart.jsx @@ -2,14 +2,13 @@ import React, { useState } from "react"; import LineChart from "../Charts/LineChart"; import { useProjects } from "../../hooks/useProjects"; import { useDashboard_Data } from "../../hooks/useDashboard_Data"; -import {useSelector} from "react-redux"; +import { useSelector } from "react-redux"; -const ProjectProgressChart = () => -{ +const ProjectProgressChart = () => { const selectedProject = useSelector((store) => store.localVariables.projectId); const { projects } = useProjects(); - // const [selectedProjectId, setSelectedProjectId] = useState("all"); const [range, setRange] = useState("1W"); + const [showAllEmployees, setShowAllEmployees] = useState(false); const getDaysFromRange = (range) => { switch (range) { @@ -26,12 +25,16 @@ const ProjectProgressChart = () => const days = getDaysFromRange(range); const today = new Date(); - const FromDate = today.toLocaleDateString('en-CA'); + const FromDate = today.toLocaleDateString("en-CA"); + + const projectId = showAllEmployees || !selectedProject?.trim() + ? null + : selectedProject; const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({ days, FromDate, - projectId: selectedProject === " " ? "all" : selectedProject// selectedProjectId === "all" ? null : selectedProjectId, + projectId, }); const sortedDashboardData = [...dashboard_data].sort( @@ -53,59 +56,58 @@ const ProjectProgressChart = () => new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }) ); const lineChartCategoriesDates = sortedDashboardData.map((d) => - new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) + new Date(d.date).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }) ); + const selectedProjectData = projects?.find((p) => p.id === selectedProject); + const selectedProjectName = selectedProjectData?.shortName?.trim() + ? selectedProjectData.shortName + : selectedProjectData?.name; + return (
- {/* Row 1: Title + Project Selector */} -
-
+
+ {/* Left: Title */} +
Project Progress

Progress Overview by Project

- {/*
- - -
    -
  • - -
    • - {projects?.map((project) => ( -
  • - -
    • - ))} -
-
*/} -
+ {/* Right: Checkbox and Project Name */} +
+
+ setShowAllEmployees(e.target.checked)} + /> + +
+ {!showAllEmployees && selectedProjectName && ( +

+ {selectedProjectName} +

+ )} +
+
{/* Row 2: Time Range Buttons */} -
+
{["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
-
+ +
{ const [employeeList, setEmployeeList] = useState([]); const [modelConfig, setModelConfig] = useState(); const [currentPage, setCurrentPage] = useState(1); - const [itemsPerPage] = useState(15); + const [itemsPerPage] = useState(20); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false); const [searchText, setSearchText] = useState(""); @@ -184,8 +184,6 @@ const EmployeeList = () => { const handleAllEmployeesToggle = (e) => { const isChecked = e.target.checked; setShowAllEmployees(isChecked); - // If "All Employees" is checked, we don't want to filter by project, - // so we pass null for selected project. Otherwise, use the currently selected project. recallEmployeeData(showInactive, isChecked ? null : selectedProject); }; @@ -203,7 +201,6 @@ const EmployeeList = () => { const handleProjectSelection = (e) => { const newProjectId = e.target.value; setSelectedProject(newProjectId); - // If a specific project is selected, uncheck "All Employees" if (newProjectId) { setShowAllEmployees(false); } @@ -279,128 +276,107 @@ const EmployeeList = () => { className="dataTables_wrapper dt-bootstrap5 no-footer" style={{ width: "98%" }} > -
-
-
+
+ {/* Switches: All Employees + Inactive */} +
+ {/* All Employees Switch */} +
-
-
-
-
-
-
+
-
-
- {/* Show Inactive Employees Checkbox */} -
-
- -
+