Creating a toggle button in Project Progress.
This commit is contained in:
parent
da440060e8
commit
edf092e85e
@ -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 (
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
{/* Row 1: Title + Project Selector */}
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
|
||||
{/* Left: Title */}
|
||||
<div className="card-title text-start">
|
||||
<h5 className="mb-1">Project Progress</h5>
|
||||
<p className="card-subtitle">Progress Overview by Project</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"
|
||||
>
|
||||
{selectedProjectId === "all"
|
||||
? "All Projects"
|
||||
: projects?.find((p) => p.id === selectedProjectId)?.name || "Select Project"}
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => setSelectedProjectId("all")}>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
{projects?.map((project) => (
|
||||
<li key={project.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => setSelectedProjectId(project.id)}
|
||||
>
|
||||
{project.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* Right: Checkbox and Project Name */}
|
||||
<div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
|
||||
<div className="form-check form-switch mb-1 d-flex align-items-center">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
id="showAllEmployees"
|
||||
checked={showAllEmployees}
|
||||
onChange={(e) => setShowAllEmployees(e.target.checked)}
|
||||
/>
|
||||
<label className="form-check-label ms-2" htmlFor="showAllEmployees">
|
||||
All Projects
|
||||
</label>
|
||||
</div>
|
||||
{!showAllEmployees && selectedProjectName && (
|
||||
<p className="text-muted mb-0 small">
|
||||
<span className="card-subtitle">{selectedProjectName}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
|
||||
range === key ? " border-bottom border-primary text-primary" : "text-muted"
|
||||
}`}
|
||||
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key ? "border-bottom border-primary text-primary" : "text-muted"
|
||||
}`}
|
||||
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
|
||||
onClick={() => setRange(key)}
|
||||
>
|
||||
@ -114,7 +116,8 @@ const ProjectProgressChart = () =>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body ">
|
||||
|
||||
<div className="card-body">
|
||||
<LineChart
|
||||
seriesData={lineChartSeries}
|
||||
categories={lineChartCategories}
|
||||
|
||||
@ -40,7 +40,7 @@ const EmployeeList = () => {
|
||||
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%" }}
|
||||
>
|
||||
<div className="row mb-2 ">
|
||||
<div className="col-md-3 col-sm-6 ">
|
||||
<div className="form-check text-start">
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
{/* Switches: All Employees + Inactive */}
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
{/* All Employees Switch */}
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="allEmployeesCheckbox"
|
||||
checked={showAllEmployees}
|
||||
onChange={handleAllEmployeesToggle}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="allEmployeesCheckbox">
|
||||
<label className="form-check-label ms-0" htmlFor="allEmployeesCheckbox">
|
||||
All Employees
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9 col-sm-6">
|
||||
<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
|
||||
id="DataTables_Table_0_filter"
|
||||
className="dataTables_filter"
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
type="search"
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search User"
|
||||
aria-controls="DataTables_Table_0"
|
||||
></input>
|
||||
|
||||
{/* Show Inactive Employees Switch */}
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showInactive}
|
||||
onChange={handleToggle}
|
||||
/>
|
||||
<label className="form-check-label ms-0" htmlFor="inactiveEmployeesCheckbox">
|
||||
Show Inactive Employees
|
||||
</label>
|
||||
</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 className="d-flex justify-content-end mb-2">
|
||||
{/* Show Inactive Employees Checkbox */}
|
||||
<div className={`${showAllEmployees ? '' : selectedProject ? 'd-none' : ''}`}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showInactive}
|
||||
onChange={handleToggle}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="inactiveEmployeesCheckbox">
|
||||
Show Inactive Employees
|
||||
|
||||
{/* Right side: Search + Export + Add Employee */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
|
||||
{/* Search */}
|
||||
<div className="dataTables_filter">
|
||||
<label className="mb-0">
|
||||
<input
|
||||
type="search"
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search User"
|
||||
aria-controls="DataTables_Table_0"
|
||||
/>
|
||||
</label>
|
||||
</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>
|
||||
|
||||
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
id="DataTables_Table_0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user