From 9aaedede208a625258b107e2696ed1441ee94ebe Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Sat, 3 May 2025 13:15:24 +0530
Subject: [PATCH] Add colors to floor and workarea in infra panel to identify
 them easily

---
 public/assets/css/default.css                 |  4 ++
 .../Project/Infrastructure/Floor.jsx          |  8 +++-
 .../Project/Infrastructure/WorkArea.jsx       | 45 +++++++++++--------
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index ddd2cfcc..936c150b 100644
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@@ -171,3 +171,7 @@
   inset-block-start: 1.5rem;
   inset-inline-end: 1.5rem;
 }
+
+.text-darkgreen {
+  color: #16a085;
+}
diff --git a/src/components/Project/Infrastructure/Floor.jsx b/src/components/Project/Infrastructure/Floor.jsx
index 264ee88d..f59fece2 100644
--- a/src/components/Project/Infrastructure/Floor.jsx
+++ b/src/components/Project/Infrastructure/Floor.jsx
@@ -20,8 +20,12 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
                 <div className="row">
                   <div className="col">
                     {" "}
-                    <span className="fw-semibold">Floor:&nbsp;</span>{" "}
-                    <span class="fw-normal">{floor.floorName}</span>
+                    <span className="fw-semibold text-primary">
+                      Floor:&nbsp;
+                    </span>{" "}
+                    <span class="fw-normal text-darkgreen">
+                      {floor.floorName}
+                    </span>
                   </div>
                 </div>
               </div>
diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index e937ed0e..c2231fd4 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -1,22 +1,21 @@
-import React, { useEffect,useState } from "react";
+import React, { useEffect, useState } from "react";
 import WorkItem from "./WorkItem";
-import {useProjectDetails} from "../../../hooks/useProjects";
-import {getCachedData} from "../../../slices/apiDataManager";
+import { useProjectDetails } from "../../../hooks/useProjects";
+import { getCachedData } from "../../../slices/apiDataManager";
 
-const WorkArea = ( {workArea, floor, forBuilding} ) =>{
-  const [workItems,setWorkItems] =useState([])
+const WorkArea = ({ workArea, floor, forBuilding }) => {
+  const [workItems, setWorkItems] = useState([]);
 
-  useEffect( () =>
-  { 
-    const project = getCachedData( "projectInfo" )   
+  useEffect(() => {
+    const project = getCachedData("projectInfo");
     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);
+    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] );
+    setWorkItems(workAreas?.workItems || []);
+  }, [workArea, floor, floor]);
 
   return (
     <React.Fragment key={workArea.id}>
@@ -27,12 +26,20 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
               <div className="row">
                 <div className="col">
                   {" "}
-                  <span className="fw-semibold">Floor:&nbsp;</span>{" "}
-                  <span class="fw-normal">{floor.floorName}</span>
+                  <span className="fw-semibold text-primary">
+                    Floor:&nbsp;
+                  </span>{" "}
+                  <span class="fw-normal text-darkgreen">
+                    {floor.floorName}
+                  </span>
                 </div>
                 <div className="col">
-                  <span className="ms-10 fw-semibold">Work Area:&nbsp;</span>{" "}
-                  <span class=" fw-normal">{workArea.areaName}</span>
+                  <span className="ms-10 fw-semibold text-primary">
+                    Work Area:&nbsp;
+                  </span>{" "}
+                  <span class=" fw-normal text-darkgreen">
+                    {workArea.areaName}
+                  </span>
                 </div>
               </div>
             </div>
@@ -40,7 +47,7 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
         </td>
       </tr>
 
-      {(workItems && workItems.length > 0) && (
+      {workItems && workItems.length > 0 && (
         <tr className="overflow-auto">
           <td colSpan={4}>
             <table className="table mx-1">
@@ -88,7 +95,7 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
           </td>
         </tr>
       )}
-    {!workItems && <p>No item</p>}
+      {!workItems && <p>No item</p>}
     </React.Fragment>
   );
 };