marco.pms.web/src/pages/project/ProjectDetails.jsx

import { useParams } from "react-router-dom";
import React, { useState, useEffect } from "react";

import ActivityTimeline from "../../components/Project/ActivityTimeline";
import ProjectOverview from "../../components/Project/ProjectOverview";
import AboutProject from "../../components/Project/AboutProject";
import ProjectNav from "../../components/Project/ProjectNav";
import ProjectBanner from "../../components/Project/ProjectBanner";
import Teams from "../../components/Project/Teams";
import ProjectInfra from "../../components/Project/ProjectInfra";
import Loader from "../../components/common/Loader";
import WorkPlan from "../../components/Project/WorkPlan";
import Breadcrumb from "../../components/common/Breadcrumb";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import ProjectRepository from "../../repositories/ProjectRepository";
import { ActivityeRepository } from "../../repositories/MastersRepository";

import "./ProjectDetails.css";
import {useEmployeesByProjectAllocated} from "../../hooks/useProjects";


const ProjectDetails = () => {
  let { projectId } = useParams();
 
  const [project, setProject] = useState(null);
  const [ projectDetails, setProjectDetails ] = useState( null );
  const [activities, setActivities] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const fetchActivities = async () => {
  
      const activities_cache = getCachedData("activitiesMaster");

      if (!activities_cache) {
        ActivityeRepository.getActivities()
          .then((response) => {
            setActivities(response.data);
            cacheData("activitiesMaster", response.data);
          })
          .catch((error) => {
            setError("Failed to fetch data.");
          });
      
      } else {
        setActivities(activities_cache);
      }
  
  };

  const fetchData = async () => {
    
      const project_cache = getCachedData(`projectinfo-${projectId}`);
      if (!project_cache) {
        ProjectRepository.getProjectByprojectId(projectId)
          .then( ( response ) =>
          {
            setProjectDetails(response.data);
            setProject(response.data);
            cacheData( `projectinfo-${ projectId }`, response.data );
            setLoading(false)
          })
          .catch((error) => {
            console.error(error);
            setError( "Failed to fetch data." );
            setLoading(false)
          });
      } else {
        setProjectDetails( project_cache );
        setProject( project_cache );
        setLoading(false)
      } 
    
  };

  const [activePill, setActivePill] = useState("profile");

 
  const handlePillClick = (pillKey) => {
    setActivePill(pillKey);
  };

  const handleDataChange = (data) => {
    fetchData();
  };

 
  const renderContent = () => {
    if (loading) return <Loader></Loader>;
    switch (activePill) {
      case "profile": {
        return (
          <div className="row">
            <div className="col-xl-4 col-lg-5 col-md-5">
              {/* About User */}
              <AboutProject data={projectDetails}></AboutProject>
              {/* About User */}
            </div>
            <div className="col-xl-4 col-lg-5 col-md-5">
              {/* Profile Overview */}
              <ProjectOverview project={ project} />
              {/* Profile Overview */}
            </div>
          </div>
        );
      }
      case "teams": {
        return (
          <div className="row">
            <div className="col-lg-12 col-xl-12">
              {/* Teams */}
              <Teams project={projectDetails}></Teams>
              {/* Teams */}
            </div>
          </div>
        );
        break;
      }
      case "infra": {
        return (
          <ProjectInfra
            data={projectDetails}
            activityMaster={activities}
            onDataChange={handleDataChange}
          ></ProjectInfra>
        );
        break;
      }
      case "workplan": {
        return (
          <WorkPlan
            data={projectDetails}
            activityMaster={activities}
            onDataChange={handleDataChange}
          ></WorkPlan>
        );
        break;
      }
      case "activities": {
        return (
          <div className="row">
            <div className="col-lg-12 col-xl-12">
              <ActivityTimeline></ActivityTimeline>
            </div>
          </div>
        );
      }
    
      default:
        return <div>Select a pill to display content here.</div>;
    }
  };

  useEffect(() => {
    fetchData();
    fetchActivities();
  }, []);

  return (

    <>
      <div className="container-xxl flex-grow-1 container-p-y">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Projects", link: "/projects" },
            { label: "Details", link: null },
          ]}
        ></Breadcrumb>

        <div className="row">
          {loading && <p>Loading....</p>}
          {!loading && <ProjectBanner project_data={project}  ></ProjectBanner>}
        </div>
      
        <div className="row">
          <ProjectNav
            onPillClick={handlePillClick}
            activePill={activePill}
          ></ProjectNav>
        </div>

        {renderContent()}
      </div>
    </>
  );
};

export default ProjectDetails;