marco.pms.web/src/components/Project/Infrastructure/WorkArea.jsx

import React, { useEffect, useState } from "react";
import WorkItem from "./WorkItem";
import { useProjectDetails } from "../../../hooks/useProjects";
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
import {useDispatch} from "react-redux";
import {refreshData} from "../../../slices/localVariablesSlice";
import ProjectRepository from "../../../repositories/ProjectRepository";
import showToast from "../../../services/toastService";

const WorkArea = ({ workArea, floor, forBuilding }) => {
  const [ workItems, setWorkItems ] = useState( [] );
  const dispatch = useDispatch()
  const [ Project, setProject ] = useState()
  
    const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => setIsExpanded(!isExpanded);

  useEffect(() => {
    const project = getCachedData( "projectInfo" );
    setProject(project)
    
    if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
    const building = project.buildings?.find((b) => b.id === forBuilding.id);
    const floors = building?.floors?.find((f) => f.id === floor.id);
    const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);
    setWorkItems(workAreas?.workItems || []);
  }, [ workArea, floor, floor ] );

    const HanldeDeleteActivity = async (workItemId) => {

    try
    {
      const updatedProject = { ...Project.data };
      const response = await ProjectRepository.deleteProjectTask( workItemId);
      const newProject = {
        ...updatedProject,
        buildings: updatedProject?.buildings.map((building) =>
          building?.id === building?.id
            ? {
                ...building,
                floors: building?.floors?.map((floor) =>
                  floor.id === floor?.id
                    ? {
                        ...floor,
                        workAreas: floor.workAreas.map((workArea) =>
                          workArea.id === workArea?.id
                            ? {
                                ...workArea,
                                workItems: workArea.workItems.filter(
                                  (item) =>
                                    String(item?.workItem?.id ?? item?.id) !==
                                    String(workItemId)
                                ),
                              }
                            : workArea
                        ),
                      }
                    : floor
                ),
              }
            : building
        ),
      };
    
      cacheData("projectInfo", {
        projectId: newProject.id,
        data: newProject,
      } );

      dispatch(refreshData(true));
     
   
      showToast("Activity Deleted Successfully", "success");
    } catch (error) {
      const message =
        error.response?.data?.message ||
        error.message ||
        "An unexpected error occurred";
           showToast(message, "error");
    }
  };
  
  return (
    <React.Fragment key={workArea.id}>
       <tr>
    <td colSpan="4" className="text-start table-cell">
          <div className="row ps-2 ">
          
            {/* <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
             
          
          </div> */}
            <div className="text-start col-11 col-md-11" >
               {workArea?.workItems?.length > 0 && (
                <button
                  className="btn p-0"
                  onClick={toggleExpand}
                >
                  {isExpanded ? <i className="bx bx-minus-circle" /> : <i className="bx bx-plus-circle" />}
                </button>
)}
              {/* <span className="fw-semibold text-primary text-start ps-2">Floor:&nbsp;</span> */}
               <span className={`fw-semibold text-primary text-start ${workArea?.workItems?.length > 0 ? "ps-2" : "ps-7"  }`}>Floor:&nbsp;</span>
              <span className="fw-normal text-darkgreen">{floor.floorName}</span>
              <span className="ms-10 fw-semibold text-primary">Work Area:&nbsp;</span>
            <span className="fw-normal text-darkgreen">{workArea.areaName}</span>
          </div>
          
     </div>
       
    </td>
  </tr>

      {isExpanded && workArea?.workItems?.length > 0 && (
        <tr className="overflow-auto">
          <td colSpan={4}>
            <table className="table mx-1">
              <thead>
                <tr>
                  <th className="infra-activity-table-header-first">Activity</th>
                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">Status</th>
                  <th className="infra-activity-table-header d-none d-md-table-cell">Planned</th>
                  <th className="infra-activity-table-header d-none d-md-table-cell">Completed</th>
                  <th className="infra-activity-table-header">Progress</th>
                  <th className="infra-activity-table-header text-end">
                    <span className="px-3">Actions</span>
                  </th>
                </tr>
              </thead>
              <tbody className="table-border-bottom-0">
                {workArea.workItems.map((workItem) => (
                  <WorkItem
                    key={workItem.workItemId}
                    workItem={workItem}
                    forBuilding={forBuilding}
                    forFloor={floor}
                    forWorkArea={workArea}
                    deleteHandleTask={HanldeDeleteActivity}
                  />
                ))}
              </tbody>
            </table>
          </td>
        </tr>
      )}

      {isExpanded && (!workArea?.workItems || workArea?.workItems.length === 0) && (
        <tr>
          <td colSpan="4" className="text-center">No Data</td>
        </tr>
      )}
    </React.Fragment>
  );
};
export default WorkArea;