- Modify Font sizes to suit the theme

- Change gay color of grid to match the theme
- realign floor and workarea lebel for visual clearity
- remove background color with the message "No floor added to the building, please add new floor to start working'

public/assets/css/default.css

@@ -128,3 +128,14 @@
   text-align: center;
   margin-top: 1rem;
 }
+.infra-activity-table-header {
+  border-top: 0;
+  text-transform: capitalize !important;
+}
+
+.infra-activity-table-header-first {
+  border-top: 0;
+  text-transform: capitalize !important;
+  text-align: left;
+  padding-left: 60px;
+}

src/components/Project/Infrastructure/Building.jsx

@@ -1,31 +1,38 @@
 import React from "react";
-const Building = ( {building, toggleBuilding, expandedBuildings, getContent} ) =>
+const Building = ({
-{
+  building,
+  toggleBuilding,
+  expandedBuildings,
+  getContent,
+}) => {
+  return (
+    <React.Fragment key={building.id}>
+      <tr className="overflow-auto">
+        <td
+          colSpan="4"
+          className="text-start"
+          style={{
+            background: "#fafafa",
+            cursor: "pointer",
+            textAlign: "center!important",
+          }}
+          onClick={() => toggleBuilding(building.id)}
+        >
+          <div className="row table-responsive">
+            <h6 style={{ marginBottom: "0px", fontSize: "14px" }}>
+              {building.name} &nbsp;
+              {expandedBuildings.includes(building.id) ? (
+                <i className="bx bx-chevron-down"></i>
+              ) : (
+                <i className="bx bx-chevron-right"></i>
+              )}
+            </h6>
+          </div>
+        </td>
+      </tr>
 
-    return (
+      {expandedBuildings.includes(building.id) && getContent(building)}
-      <React.Fragment key={building.id}>
+    </React.Fragment>
-        <tr className="overflow-auto">
+  );
-          <td
+};
-            colSpan="4"
+export default Building;
-            className="text-start"
-            style={{ background: "#f0f0f0", cursor: "pointer" }}
-            onClick={() => toggleBuilding(building.id)}
-          >
-            <div className="row table-responsive">
-              <h6 style={{ marginBottom: "0px", fontSize:"14px" }}>
-                {building.name} &nbsp;
-                {expandedBuildings.includes(building.id) ? (
-                  <i className="bx bx-chevron-down"></i>
-                ) : (
-                  <i className="bx bx-chevron-right"></i>
-                )}
-              </h6>
-            </div>
-          </td>
-        </tr>
-  
-        {expandedBuildings.includes(building.id) && getContent(building)}
-      </React.Fragment>
-    );
-  };
-  export default Building

src/components/Project/Infrastructure/Floor.jsx

@@ -1,29 +1,31 @@
 import React from "react";
 import WorkArea from "./WorkArea";
-const Floor = ( {floor, workAreas,forBuilding} ) =>
+const Floor = ({ floor, workAreas, forBuilding }) => {
-{
+  return (
-
+    <React.Fragment key={floor.id}>
-    return (
+      {workAreas && workAreas.length > 0 ? (
-      <React.Fragment key={floor.id}>
+        workAreas.map((workArea) => (
-        {workAreas && workAreas.length > 0 ? (
+          <WorkArea
-          workAreas.map((workArea) => (
+            forBuilding={forBuilding}
-            <WorkArea forBuilding={forBuilding} key={workArea.id} workArea={workArea} floor={floor} />
+            key={workArea.id}
-          ))
+            workArea={workArea}
-        ) : (
+            floor={floor}
-          <tr>
+          />
-            <td colSpan="4" className="text-start">
+        ))
-              <div className="row ps-2">
+      ) : (
-                <div className="col-6">
+        <tr>
-                  <h6>
+          <td colSpan="4" className="text-start">
-                    <span>{floor.floorName} &nbsp;</span>
+            <div className="row ps-2">
-                  </h6>
+              <div className="col-6">
-                </div>
+                <h6 className="infra-floor-lable">
+                  <span>{floor.floorName} &nbsp;</span>
+                </h6>
               </div>
-            </td>
+            </div>
-          </tr>
+          </td>
-        )}
+        </tr>
-        
+      )}
-      </React.Fragment>
+    </React.Fragment>
-    );
+  );
-  };
+};
-  export default Floor
+export default Floor;

src/components/Project/Infrastructure/InfraTable.jsx

@@ -73,7 +73,6 @@ const InfraTable = ({ buildings }) => {
     }
   };
 
-
   const handleClearComplete = () => {
     setClearTrigger(false);
   };
@@ -91,8 +90,11 @@ const InfraTable = ({ buildings }) => {
     ) : (
       <tr>
         <td colSpan="4">
-          <div className="alert alert-warning text-center mb-0" role="alert">
+          <div className=" mb-0" role="alert">
-            <p>No floors have been added yet. Please add floors to start managing your building.</p>
+            <p className="fw-semibold">
+              No floors have been added yet. Start by adding floors to manage
+              this building.
+            </p>
             <button
               type="button"
               className="btn btn-xs btn-primary"
@@ -111,7 +113,7 @@ const InfraTable = ({ buildings }) => {
   }, [buildings]);
 
   return (
-    <div >
+    <div>
       {projectBuilding && projectBuilding.length > 0 && (
         <table className="table table-bordered">
           <tbody>
@@ -138,7 +140,7 @@ const InfraTable = ({ buildings }) => {
         >
           <FloorModel
             project={{
-              buildings: [selectedBuilding]
+              buildings: [selectedBuilding],
             }}
             onClose={() => setShowFloorModal(false)}
             onSubmit={handleFloorSubmit}
@@ -146,7 +148,6 @@ const InfraTable = ({ buildings }) => {
           />
         </div>
       )}
-
     </div>
   );
 };

src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,22 +1,25 @@
-import React,{useEffect} from "react";
+import React, { useEffect } from "react";
 import WorkItem from "./WorkItem";
 
-const WorkArea = ( {workArea, floor, forBuilding} ) =>
+const WorkArea = ({ workArea, floor, forBuilding }) => {
-{
+  useEffect(() => {}, [workArea]);
-  useEffect(() => {
-
-  }, [workArea]); 
   return (
     <React.Fragment key={workArea.id}>
       <tr>
         <td colSpan="4" className="text-start table-cell">
           <div className="row ps-2">
             <div className="col-6">
-              <h6>
+              <div className="row">
-                <span>
+                <div className="col">
-                  {floor.floorName} - {workArea.areaName} &nbsp;
+                  {" "}
-                </span>
+                  <span className="fw-semibold">Floor:&nbsp;</span>{" "}
-              </h6>
+                  <span class="fw-normal">{floor.floorName}</span>
+                </div>
+                <div className="col">
+                  <span className="ms-10 fw-semibold">Work Area:&nbsp;</span>{" "}
+                  <span class=" fw-normal">{workArea.areaName}</span>
+                </div>
+              </div>
             </div>
           </div>
         </td>
@@ -28,21 +31,35 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>
             <table className="table mx-1">
               <thead>
                 <tr>
-                  <th>Activity</th>
+                  <th className="infra-activity-table-header-first">
+                    Activity
+                  </th>
                   {/* for mobile view */}
-                  <th className="d-sm-none d-sm-table-cell">Status</th>
+                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
+                    Status
+                  </th>
                   {/* for greather than mobile view ************* */}
-                  <th className="d-none d-md-table-cell">Planned</th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">
-                  <th className="d-none d-md-table-cell">Completed</th>
+                    Planned
+                  </th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">
+                    Completed
+                  </th>
                   {/* ************************** */}
-                  <th>Progress</th>
+                  <th className="infra-activity-table-header">Progress</th>
-                  <th>Actions</th>
+                  <th className="infra-activity-table-header">Actions</th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0">
                 {workArea?.workItems && workArea.workItems.length > 0 ? (
                   workArea.workItems.map((workItem) => (
-                    <WorkItem key={workItem.workItemId} workItem={workItem} forBuilding={forBuilding} forFloor={floor} forWorkArea={workArea} />
+                    <WorkItem
+                      key={workItem.workItemId}
+                      workItem={workItem}
+                      forBuilding={forBuilding}
+                      forFloor={floor}
+                      forWorkArea={workArea}
+                    />
                   ))
                 ) : (
                   <tr>

src/components/Project/Infrastructure/WorkItem.jsx

@@ -20,8 +20,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     setItemName("");
   };
 
-
-
   useEffect(() => {
     setNewWorkItem(workItem);
   }, [workItem]); // This hook will run whenever the workItem prop changes
@@ -33,8 +31,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     workItem,
   };
 
-  
-
   const hasWorkItem = NewWorkItem && NewWorkItem;
 
   return (
@@ -51,7 +47,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
       <tr>
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
-          <span className="fw-medium">
+          <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.activityMaster?.activityName ||
                 workItem.activityMaster?.activityName
@@ -120,7 +116,9 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                 data-bs-target="#project-modal"
                 onClick={openModal}
               >
-                <span className="badge  badge-md bg-label-primary me-1">Assign</span>
+                <span className="badge  badge-md bg-label-primary me-1">
+                  Assign
+                </span>
               </button>
             )}
             <button