added bootstrap accordation

src/components/Project/Infrastructure/WorkArea.jsx

@@ -2,37 +2,31 @@ 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 { useDispatch } from "react-redux";
-import {refreshData} from "../../../slices/localVariablesSlice";
+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 [workItems, setWorkItems] = useState([]);
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
-  const [ Project, setProject ] = useState()
+  const [Project, setProject] = useState();
-  
-    const [isExpanded, setIsExpanded] = useState(false);
-
-  const toggleExpand = () => setIsExpanded(!isExpanded);
 
   useEffect(() => {
-    const project = getCachedData( "projectInfo" );
+    const project = getCachedData("projectInfo");
-    setProject(project)
+    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 ] );
+  }, [workArea, floor, floor]);
 
-    const HanldeDeleteActivity = async (workItemId) => {
+  const HanldeDeleteActivity = async (workItemId) => {
-
+    try {
-    try
-    {
       const updatedProject = { ...Project.data };
-      const response = await ProjectRepository.deleteProjectTask( workItemId);
+      const response = await ProjectRepository.deleteProjectTask(workItemId);
       const newProject = {
         ...updatedProject,
         buildings: updatedProject?.buildings.map((building) =>
@@ -62,108 +56,167 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
             : 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");
+      showToast(message, "error");
     }
   };
-  
+
+  useEffect(() => {
+    const toggleButtons = document.querySelectorAll(".accordion-button");
+
+    toggleButtons.forEach((btn) => {
+      const icon = btn.querySelector(".toggle-icon");
+
+      btn.addEventListener("click", () => {
+        setTimeout(() => {
+          if (btn.classList.contains("collapsed")) {
+            icon.classList.remove("bx-minus-circle");
+            icon.classList.add("bx-plus-circle");
+          } else {
+            icon.classList.remove("bx-plus-circle");
+            icon.classList.add("bx-minus-circle");
+          }
+        }, 300); // allow Bootstrap collapse to complete
+      });
+    });
+
+    return () => {
+      toggleButtons.forEach((btn) => {
+        btn.removeEventListener("click", () => {});
+      });
+    };
+  }, []);
+
   return (
     <React.Fragment key={workArea.id}>
-       <tr>
+      <tr>
-    <td colSpan="4" className="text-start table-cell">
+        <td colSpan="4" className="p-0">
-          <div className="row ps-2 ">
+          <div
-          
+            className="accordion border-none"
-            {/* <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
+            id={`accordion-${workArea.id}`}
-             
+          >
-          
+            <div className="accordion-item background border-0">
-          </div> */}
+              {/* Accordion Header */}
-            <div className="text-start col-11 col-md-11" >
+              <p
-               {workArea?.workItems?.length > 0 && (
+                className="accordion-header mb-0"
+                id={`heading-${workArea.id}`}
+              >
                 <button
-                  className="btn p-0"
+                  className={`accordion-button text-start px-2 py-2 custom-accordion-btn ${
-                  onClick={toggleExpand}
+                    workItems && workItems.length > 0 ? "collapsed" : "disabled"
+                  }`}
+                  type="button"
+                  data-bs-toggle={
+                    workItems && workItems.length > 0 ? "collapse" : ""
+                  }
+                  data-bs-target={
+                    workItems && workItems.length > 0
+                      ? `#collapse-${workArea.id}`
+                      : undefined
+                  }
+                  aria-expanded="false"
+                  aria-controls={`collapse-${workArea.id}`}
+                  disabled={!(workItems && workItems.length > 0)}
                 >
-                  {isExpanded ? <i className="bx bx-minus-circle" /> : <i className="bx bx-plus-circle" />}
+                  <i
+                    className={`bx me-2 toggle-icon ${
+                      workItems && workItems.length > 0
+                        ? "bx-plus-circle"
+                        : "bx-block"
+                    }`}
+                    style={{
+                      fontSize: "1.2rem",
+                      color:
+                        workItems && workItems.length > 0 ? "" : "transparent",
+                    }}
+                  ></i>
+
+                  <div className="d-flex justify-content-start gap-12">
+                    <div className="d-flex">
+                      <span className="fw-semibold small">Floor:&nbsp;</span>
+                      <span className="fw-normal text-darkgreen small">
+                        {floor.floorName}
+                      </span>
+                    </div>
+                    <div className="text-start ">
+                      <span className="fw-semibold text-primary small">
+                        Work Area:&nbsp;
+                      </span>
+                      <span className="fw-normal text-darkgreen small">
+                        {workArea.areaName}
+                      </span>
+                    </div>
+                  </div>
                 </button>
-)}
+              </p>
-              {/* <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>
+              {/* Accordion Body */}
-              <span className="fw-normal text-darkgreen">{floor.floorName}</span>
+              {workItems && workItems.length > 0 && (
-              <span className="ms-10 fw-semibold text-primary">Work Area:&nbsp;</span>
+                <div
-            <span className="fw-normal text-darkgreen">{workArea.areaName}</span>
+                  id={`collapse-${workArea.id}`}
+                  className="accordion-collapse collapse"
+                  aria-labelledby={`heading-${workArea.id}`}
+                >
+                  <div className="accordion-body p-0">
+                    <table className="table table-sm mx-1">
+                      <thead>
+                        <tr>
+                          <th className="infra-activity-table-header-first">
+                            Activity
+                          </th>
+                          <th className="infra-activity-table-header d-sm-table-cell d-md-none">
+                            Status
+                          </th>
+                          <th className="infra-activity-table-header d-none d-md-table-cell">
+                            Category
+                          </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-2">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>
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
-          
+        </td>
-     </div>
+      </tr>
-       
-    </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>
-                  {/* for mobile view */}
-                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
-                    Status
-                  </th>
-                  <th className="infra-activity-table-header-first">
-                    Category
-                  </th>
-                  {/* for greather than mobile view ************* */}
-                  <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>
   );
 };