marco.pms.web/src/components/Dashboard/ProjectProgressChart.jsx

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";

const ProjectProgressChart = ({
  ShowAllProject = true,
  DefaultRange = "15D",
}) => {
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
  const { projects } = useProjects();
  const [range, setRange] = useState(DefaultRange);
  const [showAllEmployees, setShowAllEmployees] = useState(false);

  const getDaysFromRange = (range) => {
    switch (range) {
      case "1D":
        return 1;
      case "1W":
        return 7;
      case "15D":
        return 15;
      case "1M":
        return 30;
      case "3M":
        return 90;
      case "1Y":
        return 365;
      case "5Y":
        return 1825;
      default:
        return 7;
    }
  };

  const days = getDaysFromRange(range);
  const today = new Date();
  const FromDate = today.toLocaleDateString("en-CA");

  const projectId =
    showAllEmployees || !selectedProject?.trim() ? null : selectedProject;

  const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
    days,
    FromDate,
    projectId,
  });

  const sortedDashboardData = [...dashboard_data].sort(
    (a, b) => new Date(a.date) - new Date(b.date)
  );

  const lineChartSeries = [
    {
      name: "Planned Work",
      data: sortedDashboardData.map((d) => d.plannedTask || 0),
    },
    {
      name: "Completed Work",
      data: sortedDashboardData.map((d) => d.completedTask || 0),
    },
  ];

  const lineChartCategories = sortedDashboardData.map((d) =>
    new Date(d.date).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
    })
  );
  const lineChartCategoriesDates = sortedDashboardData.map((d) =>
    new Date(d.date).toLocaleDateString("en-US", {
      weekday: "short",
      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">
      <div className="card-header">
        <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>

          {/* 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">
            {ShowAllProject == true && (
              <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">
          {["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"
              }`}
              style={{ cursor: "pointer", transition: "all 0.2s ease" }}
              onClick={() => setRange(key)}
            >
              {key}
            </button>
          ))}
        </div>
      </div>

      <div className="card-body">
        <LineChart
          seriesData={lineChartSeries}
          categories={lineChartCategories}
          loading={isLineChartLoading}
          lineChartCategoriesDates={lineChartCategoriesDates}
        />
      </div>
    </div>
  );
};

export default ProjectProgressChart;