merge fix

app/src/components/ui/componets/AddButtons.tsx

@@ -4,6 +4,7 @@ import {
   EyeIcon,
   LockIcon,
 } from "../../icons/RealTimeVisulationIcons";
+import { AddIcon } from "../../icons/ExportCommonIcons";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -109,7 +110,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
-      console.log('updatedZone: ', updatedZone);
+      console.log("updatedZone: ", updatedZone);
       setSelectedZone(updatedZone);
     } else {
       // If the panel is not active, activate it
@@ -122,7 +123,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
-      console.log('updatedZone: ', updatedZone);
+      console.log("updatedZone: ", updatedZone);
       setSelectedZone(updatedZone);
     }
   };
@@ -132,7 +133,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
       {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
         <div key={side} className={`side-button-container ${side}`}>
           <button
-            className={`side-button ${side}`}
+            className={`side-button ${side}${
+              selectedZone.activeSides.includes(side) ? " active" : ""
+            }`}
             onClick={() => handlePlusButtonClick(side)}
             title={
               selectedZone.activeSides.includes(side)
@@ -140,7 +143,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 : `Activate ${side} panel`
             }
           >
-            +
+            <div className="add-icon">
+              <AddIcon />
+            </div>
           </button>
 
           {/* Extra Buttons */}
@@ -148,8 +153,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
             <div className="extra-Bs">
               {/* Hide Panel */}
               <div
-                className={`icon ${hiddenPanels.includes(side) ? "active" : ""
-                  }`}
+                className={`icon ${
+                  hiddenPanels.includes(side) ? "active" : ""
+                }`}
                 title={
                   hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                 }
@@ -171,8 +177,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
               {/* Lock/Unlock Panel */}
               <div
-                className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
-                  }`}
+                className={`icon ${
+                  selectedZone.lockedPanels.includes(side) ? "active" : ""
+                }`}
                 title={
                   selectedZone.lockedPanels.includes(side)
                     ? "Unlock Panel"
@@ -180,7 +187,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 }
                 onClick={() => toggleLockPanel(side)}
               >
-                <LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} />
+                <LockIcon
+                  fill={
+                    selectedZone.lockedPanels.includes(side)
+                      ? "#ffffff"
+                      : "#1D1E21"
+                  }
+                />
               </div>
             </div>
           )}

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -44,34 +44,34 @@ const RealTimeVisulization: React.FC = () => {
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
-  // useEffect(() => {
-  //   async function GetZoneData() {
-  //     try {
-  //       const response: { data: Zone[] } | undefined = await getZonesApi(
-  //         "hexrfactory"
-  //       );
+  useEffect(() => {
+    async function GetZoneData() {
+      try {
+        const response: { data: Zone[] } | undefined = await getZonesApi(
+          "hexrfactory"
+        );
 
-  //       if (!response || !response.data) {
-  //         return;
-  //       }
-  //       const formattedData = response?.data?.reduce<FormattedZoneData>(
-  //         (acc, zone) => {
-  //           acc[zone.zoneName] = {
-  //             activeSides: [],
-  //             panelOrder: [],
-  //             lockedPanels: [],
-  //             zoneCentrePoint: [],
-  //             widgets: [],
-  //           };
-  //           return acc;
-  //         },
-  //         {}
-  //       );
-  //       setZonesData(formattedData);
-  //     } catch (error) { }
-  //   }
-  //   GetZoneData();
-  // }, []);
+        if (!response || !response.data) {
+          return;
+        }
+        const formattedData = response?.data?.reduce<FormattedZoneData>(
+          (acc, zone) => {
+            acc[zone.zoneName] = {
+              activeSides: [],
+              panelOrder: [],
+              lockedPanels: [],
+              zoneCentrePoint: [],
+              widgets: [],
+            };
+            return acc;
+          },
+          {}
+        );
+        setZonesData(formattedData);
+      } catch (error) { }
+    }
+    GetZoneData();
+  }, []);
 
   useEffect(() => {
 

app/src/components/ui/inputs/Search.tsx

@@ -36,7 +36,7 @@ const Search: React.FC<SearchProps> = ({
   };
 
   return (
-    <div className="asset-search-wrapper">
+    <div className="search-wrapper">
       <div
         className={`search-container ${
           isFocused || inputValue ? "active" : ""

app/src/components/ui/list/DropDownList.tsx

@@ -13,6 +13,7 @@ interface DropDownListProps {
   kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
   defaultOpen?: boolean; // Determines if the dropdown list should be open by default
   listType?: string; // Type of list to display
+  remove?: boolean;
 }
 
 const DropDownList: React.FC<DropDownListProps> = ({
@@ -28,25 +29,29 @@ const DropDownList: React.FC<DropDownListProps> = ({
   ],
   defaultOpen = false,
   listType = "default",
+  remove,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
-  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+  const [zoneDataList, setZoneDataList] = useState<
+    { id: string; name: string }[]
+  >([]);
 
   useEffect(() => {
     async function GetZoneData() {
-      const response = await getZonesApi("hexrfactory")
-      console.log('response: ', response.data);
-      setZoneDataList([{ id: "1", name: "zone1" },
-      { id: "2", name: "Zone 2" },])
+      const response = await getZonesApi("hexrfactory");
+      console.log("response: ", response.data);
+      setZoneDataList([
+        { id: "1", name: "zone1" },
+        { id: "2", name: "Zone 2" },
+      ]);
     }
 
-    GetZoneData()
-
-  }, [])
+    GetZoneData();
+  }, []);
 
   return (
     <div className="dropdown-list-container">
@@ -81,7 +86,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
       </div>
       {isOpen && (
         <div className="lists-container">
-          {listType === "default" && <List items={items} />}
+          {listType === "default" && <List items={items} remove={remove} />}
           {listType === "outline" && (
             <>
               <DropDownList

app/src/components/ui/list/List.tsx

@@ -5,10 +5,11 @@ import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
 interface ListProps {
   items?: { id: string; name: string }[]; // Optional array of items to render
   placeholder?: string; // Optional placeholder text
+  remove?: boolean;
 }
 
-const List: React.FC<ListProps> = ({ items = [] }) => {
-  console.log('items: ', items);
+const List: React.FC<ListProps> = ({ items = [], remove }) => {
+  console.log("items: ", items);
   return (
     <>
       {items.length > 0 ? (
@@ -26,9 +27,11 @@ const List: React.FC<ListProps> = ({ items = [] }) => {
                   <div className="visibe option">
                     <EyeIcon isClosed />
                   </div>
-                  <div className="remove option">
-                    <RmoveIcon />
-                  </div>
+                  {remove && (
+                    <div className="remove option">
+                      <RmoveIcon />
+                    </div>
+                  )}
                 </div>
               </div>
             </li>