added zones drop down in builder ouline and adjust width of displayZones

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

@@ -1,20 +1,44 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import RenameInput from "../inputs/RenameInput";
-import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
+
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
-import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
+import {
+  ArrowIcon,
+  EyeIcon,
+  LockIcon,
+  RmoveIcon,
+} from "../../icons/ExportCommonIcons";
+
+interface Asset {
+  id: string;
+  name: string;
+}
+
+interface ZoneItem {
+  id: string;
+  name: string;
+  assets?: Asset[];
+}
 
 interface ListProps {
-  items?: { id: string; name: string }[]; // Optional array of items to render
-  placeholder?: string; // Optional placeholder text
+  items?: ZoneItem[];
+  placeholder?: string;
   remove?: boolean;
 }
 
 const List: React.FC<ListProps> = ({ items = [], remove }) => {
+  console.log("items: ", items);
   const { activeModule, setActiveModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { setSubModule } = useSubModuleStore();
+  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
+    {}
+  );
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -27,11 +51,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       widgets: [],
     });
   }, [activeModule]);
-  
+
+  const toggleZoneExpansion = (zoneId: string) => {
+    setExpandedZones((prev) => ({
+      ...prev,
+      [zoneId]: !prev[zoneId],
+    }));
+  };
 
   async function handleSelectZone(id: string) {
     try {
-      // Avoid re-fetching if the same zone is already selected
       if (selectedZone?.zoneId === id) {
         console.log("Zone is already selected:", selectedZone.zoneName);
         return;
@@ -65,27 +94,74 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     <>
       {items.length > 0 ? (
         <ul className="list-wrapper">
-          {items.map((item, index) => (
-            <li key={index} className="list-container">
-              <div className="list-item">
-                <div className="value" onClick={() => handleSelectZone(item.id)}>
-                  <RenameInput value={item.name} />
-                </div>
-                <div className="options-container">
-                  <div className="lock option">
-                    <LockIcon isLocked />
-                  </div>
-                  <div className="visibe option">
-                    <EyeIcon isClosed />
-                  </div>
-                  {remove && (
-                    <div className="remove option">
-                      <RmoveIcon />
+          {items.map((item) => (
+            <React.Fragment key={`zone-${item.id}`}>
+              <li className="list-container">
+                <div className="list-item">
+                  <div className="zone-header">
+                    <div
+                      className="value"
+                      onClick={() => handleSelectZone(item.id)}
+                    >
+                      <RenameInput value={item.name} />
                     </div>
-                  )}
+                  </div>
+                  <div className="options-container">
+                    <div className="lock option">
+                      <LockIcon isLocked />
+                    </div>
+                    <div className="visibe option">
+                      <EyeIcon isClosed />
+                    </div>
+                    {remove && (
+                      <div className="remove option">
+                        <RmoveIcon />
+                      </div>
+                    )}
+                    {item.assets && item.assets.length > 0 && (
+                      <div
+                        className="expand-icon option"
+                        onClick={() => toggleZoneExpansion(item.id)}
+                      >
+                        <ArrowIcon />
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
-            </li>
+              </li>
+              {/* Nested assets list - only shown when expanded */}
+              {item.assets &&
+                item.assets.length > 0 &&
+                expandedZones[item.id] && (
+                  <ul className="asset-list">
+                    {item.assets.map((asset) => (
+                      <li
+                        key={`asset-${asset.id}`}
+                        className="list-container asset-item"
+                      >
+                        <div className="list-item">
+                          <div className="value">
+                            <RenameInput value={asset.name} />
+                          </div>
+                          <div className="options-container">
+                            <div className="lock option">
+                              <LockIcon isLocked />
+                            </div>
+                            <div className="visibe option">
+                              <EyeIcon isClosed />
+                            </div>
+                            {remove && (
+                              <div className="remove option">
+                                <RmoveIcon />
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+            </React.Fragment>
           ))}
         </ul>
       ) : (