admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Creating a toggle button in Project Progress.

Browse Source
This commit is contained in:
Umesh Desai 2025-06-12 23:56:43 +05:30
parent da440060e8
commit edf092e85e
2 changed files with 133 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/Dashboard/ProjectProgressChart.jsx
View File

@ -2,14 +2,13 @@ import React, { useState } from "react";
import LineChart from "../Charts/LineChart"; import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects"; import { useProjects } from "../../hooks/useProjects";
import { useDashboard_Data } from "../../hooks/useDashboard_Data"; 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 selectedProject = useSelector((store) => store.localVariables.projectId);
const { projects } = useProjects(); const { projects } = useProjects();
// const [selectedProjectId, setSelectedProjectId] = useState("all");
const [range, setRange] = useState("1W"); const [range, setRange] = useState("1W");
const [showAllEmployees, setShowAllEmployees] = useState(false);
const getDaysFromRange = (range) => { const getDaysFromRange = (range) => {
switch (range) { switch (range) {
@ -26,12 +25,16 @@ const ProjectProgressChart = () =>
const days = getDaysFromRange(range); const days = getDaysFromRange(range);
const today = new Date(); 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({ const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
days, days,
FromDate, FromDate,
projectId: selectedProject === " " ? "all" : selectedProject// selectedProjectId === "all" ? null : selectedProjectId, projectId,
}); });
const sortedDashboardData = [...dashboard_data].sort( const sortedDashboardData = [...dashboard_data].sort(
@ -53,59 +56,58 @@ const ProjectProgressChart = () =>
new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }) new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })
); );
const lineChartCategoriesDates = sortedDashboardData.map((d) => 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 ( return (
<div className="card h-100"> <div className="card h-100">
<div className="card-header"> <div className="card-header">
{/* Row 1: Title + Project Selector */} <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
<div className="d-flex flex-wrap justify-content-between align-items-center mb-2"> {/* Left: Title */}
<div className="card-title mb-0 text-start"> <div className="card-title text-start">
<h5 className="mb-1">Project Progress</h5> <h5 className="mb-1">Project Progress</h5>
<p className="card-subtitle">Progress Overview by Project</p> <p className="card-subtitle">Progress Overview by Project</p>
</div> </div>
{/* <div className="btn-group"> {/* Right: Checkbox and Project Name */}
<button <div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
className="btn btn-outline-primary btn-sm dropdown-toggle" <div className="form-check form-switch mb-1 d-flex align-items-center">
type="button" <input
data-bs-toggle="dropdown" className="form-check-input"
aria-expanded="false" type="checkbox"
> role="switch"
{selectedProjectId === "all" id="showAllEmployees"
? "All Projects" checked={showAllEmployees}
: projects?.find((p) => p.id === selectedProjectId)?.name || "Select Project"} onChange={(e) => setShowAllEmployees(e.target.checked)}
</button> />
<label className="form-check-label ms-2" htmlFor="showAllEmployees">
<ul className="dropdown-menu"> All Projects
<li> </label>
<button className="dropdown-item" onClick={() => setSelectedProjectId("all")}> </div>
All Projects {!showAllEmployees && selectedProjectName && (
</button> <p className="text-muted mb-0 small">
</li> <span className="card-subtitle">{selectedProjectName}</span>
{projects?.map((project) => ( </p>
<li key={project.id}> )}
<button </div>
className="dropdown-item" </div>
onClick={() => setSelectedProjectId(project.id)}
>
{project.name}
</button>
</li>
))}
</ul>
</div> */}
</div>
{/* Row 2: Time Range Buttons */} {/* Row 2: Time Range Buttons */}
<div className="d-flex flex-wrap  mt-2"> <div className="d-flex flex-wrap mt-2">
{["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => ( {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
<button <button
key={key} key={key}
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${ className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key ? "border-bottom border-primary text-primary" : "text-muted"
range === key ? " border-bottom border-primary text-primary" : "text-muted" }`}
}`}
style={{ cursor: "pointer", transition: "all 0.2s ease" }} style={{ cursor: "pointer", transition: "all 0.2s ease" }}
onClick={() => setRange(key)} onClick={() => setRange(key)}
> >
@ -114,7 +116,8 @@ const ProjectProgressChart = () =>
))} ))}
</div> </div>
</div> </div>
<div className="card-body ">
<div className="card-body">
<LineChart <LineChart
seriesData={lineChartSeries} seriesData={lineChartSeries}
categories={lineChartCategories} categories={lineChartCategories}

192
src/pages/employee/EmployeeList.jsx
View File

@ -40,7 +40,7 @@ const EmployeeList = () => {
const [employeeList, setEmployeeList] = useState([]); const [employeeList, setEmployeeList] = useState([]);
const [modelConfig, setModelConfig] = useState(); const [modelConfig, setModelConfig] = useState();
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(15); const [itemsPerPage] = useState(20);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false); const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
@ -184,8 +184,6 @@ const EmployeeList = () => {
const handleAllEmployeesToggle = (e) => { const handleAllEmployeesToggle = (e) => {
const isChecked = e.target.checked; const isChecked = e.target.checked;
setShowAllEmployees(isChecked); 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); recallEmployeeData(showInactive, isChecked ? null : selectedProject);
}; };
@ -203,7 +201,6 @@ const EmployeeList = () => {
const handleProjectSelection = (e) => { const handleProjectSelection = (e) => {
const newProjectId = e.target.value; const newProjectId = e.target.value;
setSelectedProject(newProjectId); setSelectedProject(newProjectId);
// If a specific project is selected, uncheck "All Employees"
if (newProjectId) { if (newProjectId) {
setShowAllEmployees(false); setShowAllEmployees(false);
} }
@ -279,128 +276,107 @@ const EmployeeList = () => {
className="dataTables_wrapper dt-bootstrap5 no-footer" className="dataTables_wrapper dt-bootstrap5 no-footer"
style={{ width: "98%" }} style={{ width: "98%" }}
> >
<div className="row mb-2 "> <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
<div className="col-md-3 col-sm-6 "> {/* Switches: All Employees + Inactive */}
<div className="form-check text-start"> <div className="d-flex flex-wrap align-items-center gap-3">
{/* All Employees Switch */}
<div className="form-check form-switch text-start">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
role="switch"
id="allEmployeesCheckbox" id="allEmployeesCheckbox"
checked={showAllEmployees} checked={showAllEmployees}
onChange={handleAllEmployeesToggle} onChange={handleAllEmployeesToggle}
/> />
<label className="form-check-label" htmlFor="allEmployeesCheckbox"> <label className="form-check-label ms-0" htmlFor="allEmployeesCheckbox">
All Employees All Employees
</label> </label>
</div> </div>
</div>
<div className="col-md-9 col-sm-6"> {/* Show Inactive Employees Switch */}
<div className="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-sm-end justify-content-between gap-2 flex-md-row flex-sm-column mb-3 mb-md-0 mt-1 mt-md-0 gap-md-4"> <div className="form-check form-switch text-start">
<div <input
id="DataTables_Table_0_filter" type="checkbox"
className="dataTables_filter" className="form-check-input"
> role="switch"
<label> id="inactiveEmployeesCheckbox"
<input checked={showInactive}
type="search" onChange={handleToggle}
value={searchText} />
onChange={handleSearch} <label className="form-check-label ms-0" htmlFor="inactiveEmployeesCheckbox">
className="form-control form-control-sm" Show Inactive Employees
placeholder="Search User"
aria-controls="DataTables_Table_0"
></input>
</label> </label>
</div> </div>
<div className="dt-buttons btn-group flex-wrap">
{" "}
<div className=" d-flex justify-contend-end">
<button
aria-label="Click me"
className="btn btn-sm btn-label-secondary me-4 dropdown-toggle "
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-export me-2 bx-sm"></i>Export
</button>
<ul className="dropdown-menu">
<li>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("print")}
>
<i className="bx bx-printer me-1"></i> Print
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("csv")}
>
<i className="bx bx-file me-1"></i> CSV
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("excel")}
>
<i className="bx bxs-file-export me-1"></i>{" "}
Excel
</a>
</li>
<li>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("pdf")}
>
<i className="bx bxs-file-pdf me-1"></i> PDF
</a>
</li>
</ul>
<button
className={`btn btn-sm add-new btn-primary ${!Manage_Employee && "d-none"
}`}
tabIndex="0"
type="button"
onClick={() => {
handleEmployeeModel(null);
}}
>
<span>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">
Add New Employee
</span>
</span>
</button>{" "}
</div>
</div>
</div>
</div> </div>
</div>
<div className="d-flex justify-content-end mb-2"> {/* Right side: Search + Export + Add Employee */}
{/* Show Inactive Employees Checkbox */} <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
<div className={`${showAllEmployees ? '' : selectedProject ? 'd-none' : ''}`}> {/* Search */}
<div className="form-check"> <div className="dataTables_filter">
<input <label className="mb-0">
type="checkbox" <input
className="form-check-input" type="search"
id="inactiveEmployeesCheckbox" value={searchText}
checked={showInactive} onChange={handleSearch}
onChange={handleToggle} className="form-control form-control-sm"
/> placeholder="Search User"
<label className="form-check-label" htmlFor="inactiveEmployeesCheckbox"> aria-controls="DataTables_Table_0"
Show Inactive Employees />
</label> </label>
</div> </div>
{/* Export Dropdown */}
<div className="dropdown">
<button
aria-label="Click me"
className="btn btn-sm btn-label-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-export me-2 bx-sm"></i>Export
</button>
<ul className="dropdown-menu">
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("print")}>
<i className="bx bx-printer me-1"></i> Print
</a>
</li>
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("csv")}>
<i className="bx bx-file me-1"></i> CSV
</a>
</li>
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("excel")}>
<i className="bx bxs-file-export me-1"></i> Excel
</a>
</li>
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("pdf")}>
<i className="bx bxs-file-pdf me-1"></i> PDF
</a>
</li>
</ul>
</div>
{/* Add Employee */}
{Manage_Employee && (
<button
className="btn btn-sm btn-primary"
type="button"
onClick={() => handleEmployeeModel(null)}
>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">Add New Employee</span>
</button>
)}
</div> </div>
</div> </div>
<table <table
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap" className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
id="DataTables_Table_0" id="DataTables_Table_0"