Merge branch 'main' into rtViz

2025-04-04 18:50:12 +05:30
parent baed3cd98b df0b4a297a
commit 6089c5538f
43 changed files with 4251 additions and 1037 deletions
--- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
+++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
@@ -49,7 +49,7 @@ const SideBarLeft: React.FC = () => {
            </>
          ) : activeModule === "market" ? (
            <></>
-          ) : (
+          ) : activeModule === "builder" ? (
            <>
              <ToggleHeader
                options={["Outline", "Assets"]}
@@ -60,6 +60,17 @@ const SideBarLeft: React.FC = () => {
                {activeOption === "Outline" ? <Outline /> : <Assets />}
              </div>
            </>
+          ) : (
+            <>
+              <ToggleHeader
+                options={["Outline"]}
+                activeOption={activeOption}
+                handleClick={handleToggleClick}
+              />
+              <div className="sidebar-left-content-container">
+                {activeOption === "Outline" ? <Outline /> : <Assets />}
+              </div>
+            </>
          )}
        </div>
      )}
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -14,7 +14,7 @@ const chartTypes: ChartType[] = [
 ];

 const sampleData = {
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      data: [65, 59, 80, 81, 56, 55, 40],
@@ -102,7 +102,6 @@ const ProgressBarWidget = ({
  );
 };

-
 const Widgets2D = () => {
  return (
    <div className="widget2D">
--- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
@@ -10,6 +10,7 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import { handleResize } from "../../../../functions/handleResizePannel";
 import {
+  useFloorItems,
  useSelectedActionSphere,
  useSelectedPath,
  useSimulationPaths,
@@ -17,11 +18,14 @@ import {
 import * as THREE from "three";
 import * as Types from "../../../../types/world/worldTypes";
 import InputToggle from "../../../ui/inputs/InputToggle";
+import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";

 const ConveyorMechanics: React.FC = () => {
  const { selectedActionSphere } = useSelectedActionSphere();
  const { selectedPath, setSelectedPath } = useSelectedPath();
  const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+  const { floorItems, setFloorItems } = useFloorItems();

  const actionsContainerRef = useRef<HTMLDivElement>(null);
  const triggersContainerRef = useRef<HTMLDivElement>(null);
@@ -36,6 +40,19 @@ const ConveyorMechanics: React.FC = () => {
      .find((point) => point.uuid === selectedActionSphere.point.uuid);
  }, [selectedActionSphere, simulationPaths]);

+  const updateBackend = async (updatedPath: Types.ConveyorEventsSchema | undefined) => {
+    if (!updatedPath) return;
+    // const email = localStorage.getItem("email");
+    // const organization = email ? email.split("@")[1].split(".")[0] : "";
+    // console.log('updatedPath: ', updatedPath);
+    // const a = await setEventApi(
+    //   organization,
+    //   updatedPath.modeluuid,
+    //   updatedPath.points
+    // );
+    // console.log('a: ', a);
+  }
+
  const handleAddAction = () => {
    if (!selectedActionSphere) return;

@@ -65,6 +82,15 @@ const ConveyorMechanics: React.FC = () => {
      return path;
    });

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -74,21 +100,30 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.filter(
-                      (action) => action.uuid !== uuid
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.filter(
+                  (action) => action.uuid !== uuid
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -98,36 +133,45 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid
-                        ? {
-                            ...action,
-                            type: actionType,
-                            material:
-                              actionType === "Spawn" || actionType === "Swap"
-                                ? "Inherit"
-                                : action.material,
-                            delay:
-                              actionType === "Delay" ? "Inherit" : action.delay,
-                            spawnInterval:
-                              actionType === "Spawn"
-                                ? "Inherit"
-                                : action.spawnInterval,
-                          }
-                        : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid
+                    ? {
+                      ...action,
+                      type: actionType,
+                      material:
+                        actionType === "Spawn" || actionType === "Swap"
+                          ? "Inherit"
+                          : action.material,
+                      delay:
+                        actionType === "Delay" ? "Inherit" : action.delay,
+                      spawnInterval:
+                        actionType === "Spawn"
+                          ? "Inherit"
+                          : action.spawnInterval,
+                    }
+                    : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Update the selected item to reflect changes
@@ -156,24 +200,33 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid &&
-                      (action.type === "Spawn" || action.type === "Swap")
-                        ? { ...action, material }
-                        : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid &&
+                    (action.type === "Spawn" || action.type === "Swap")
+                    ? { ...action, material }
+                    : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Update selected item if it's the current action
@@ -194,21 +247,30 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid ? { ...action, delay } : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid ? { ...action, delay } : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -221,23 +283,32 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid
-                        ? { ...action, spawnInterval }
-                        : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid
+                    ? { ...action, spawnInterval }
+                    : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -248,6 +319,15 @@ const ConveyorMechanics: React.FC = () => {
      path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
    setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
  };
@@ -258,26 +338,35 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) => {
-              if (point.uuid === selectedActionSphere.point.uuid) {
-                const triggerIndex = point.triggers.length;
-                const newTrigger = {
-                  uuid: THREE.MathUtils.generateUUID(),
-                  name: `Trigger ${triggerIndex + 1}`,
-                  type: "",
-                  bufferTime: 0,
-                  isUsed: false,
-                };
+          ...path,
+          points: path.points.map((point) => {
+            if (point.uuid === selectedActionSphere.point.uuid) {
+              const triggerIndex = point.triggers.length;
+              const newTrigger = {
+                uuid: THREE.MathUtils.generateUUID(),
+                name: `Trigger ${triggerIndex + 1}`,
+                type: "",
+                bufferTime: 0,
+                isUsed: false,
+              };

-                return { ...point, triggers: [...point.triggers, newTrigger] };
-              }
-              return point;
-            }),
-          }
+              return { ...point, triggers: [...point.triggers, newTrigger] };
+            }
+            return point;
+          }),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -287,21 +376,30 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.filter(
-                      (trigger) => trigger.uuid !== uuid
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.filter(
+                  (trigger) => trigger.uuid !== uuid
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -311,23 +409,32 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.map((trigger) =>
-                      trigger.uuid === uuid
-                        ? { ...trigger, type: triggerType }
-                        : trigger
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) =>
+                  trigger.uuid === uuid
+                    ? { ...trigger, type: triggerType }
+                    : trigger
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Ensure the selectedItem is updated immediately
@@ -347,22 +454,31 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) => ({
-                      ...action,
-                      isUsed: action.uuid === uuid ? !action.isUsed : false,
-                    })),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) => ({
+                  ...action,
+                  isUsed: action.uuid === uuid ? !action.isUsed : false,
+                })),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Immediately update the selected item if it's the one being toggled
@@ -384,22 +500,31 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.map((trigger) => ({
-                      ...trigger,
-                      isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
-                    })),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) => ({
+                  ...trigger,
+                  isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
+                })),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Immediately update the selected item if it's the one being toggled
@@ -420,23 +545,32 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.map((trigger) =>
-                      trigger.uuid === uuid
-                        ? { ...trigger, bufferTime }
-                        : trigger
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) =>
+                  trigger.uuid === uuid
+                    ? { ...trigger, bufferTime }
+                    : trigger
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Immediately update selectedItem if it's the currently selected trigger
@@ -493,12 +627,11 @@ const ConveyorMechanics: React.FC = () => {
                  {selectedPoint?.actions.map((action) => (
                    <div
                      key={action.uuid}
-                      className={`list-item ${
-                        selectedItem?.type === "action" &&
+                      className={`list-item ${selectedItem?.type === "action" &&
                        selectedItem.item?.uuid === action.uuid
-                          ? "active"
-                          : ""
-                      }`}
+                        ? "active"
+                        : ""
+                        }`}
                    >
                      <div
                        className="value"
@@ -506,7 +639,7 @@ const ConveyorMechanics: React.FC = () => {
                          setSelectedItem({ type: "action", item: action })
                        }
                      >
-                        <input type="radio" name="action" id="action" defaultChecked={action.isUsed}/>
+                        <input type="radio" name="action" id="action" defaultChecked={action.isUsed} />
                        <RenameInput value={action.name} />
                      </div>
                      <div
@@ -543,12 +676,11 @@ const ConveyorMechanics: React.FC = () => {
                  {selectedPoint?.triggers.map((trigger) => (
                    <div
                      key={trigger.uuid}
-                      className={`list-item ${
-                        selectedItem?.type === "trigger" &&
+                      className={`list-item ${selectedItem?.type === "trigger" &&
                        selectedItem.item?.uuid === trigger.uuid
-                          ? "active"
-                          : ""
-                      }`}
+                        ? "active"
+                        : ""
+                        }`}
                    >
                      <div
                        className="value"
@@ -588,8 +720,8 @@ const ConveyorMechanics: React.FC = () => {
              {selectedItem.type === "action" && (
                <>
                  <InputToggle
-                    inputKey="enableTrigger"
-                    label="Enable Trigger"
+                    inputKey="enableAction"
+                    label="Enable Action"
                    value={selectedItem.item.isUsed}
                    onClick={() => handleActionToggle(selectedItem.item.uuid)}
                  />
@@ -604,19 +736,19 @@ const ConveyorMechanics: React.FC = () => {
                  {/* Only show material dropdown for Spawn/Swap actions */}
                  {(selectedItem.item.type === "Spawn" ||
                    selectedItem.item.type === "Swap") && (
-                    <LabledDropdown
-                      label={
-                        selectedItem.item.type === "Spawn"
-                          ? "Spawn Material"
-                          : "Swap Material"
-                      }
-                      defaultOption={selectedItem.item.material}
-                      options={["Inherit", "Crate", "Box"]}
-                      onSelect={(option) =>
-                        handleMaterialSelect(selectedItem.item.uuid, option)
-                      }
-                    />
-                  )}
+                      <LabledDropdown
+                        label={
+                          selectedItem.item.type === "Spawn"
+                            ? "Spawn Material"
+                            : "Swap Material"
+                        }
+                        defaultOption={selectedItem.item.material}
+                        options={["Inherit", "Crate", "Box"]}
+                        onSelect={(option) =>
+                          handleMaterialSelect(selectedItem.item.uuid, option)
+                        }
+                      />
+                    )}

                  {/* Only show delay input for Delay actions */}
                  {selectedItem.item.type === "Delay" && (
--- a/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
@@ -1,18 +1,21 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
 import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+import { WalletIcon } from "../../../../icons/3dChartIcons";
+import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";

-// Define Props Interface
 interface Widget {
  id: string;
-  type: string; // Chart type (e.g., "bar", "line")
-  panel: "top" | "bottom" | "left" | "right"; // Panel location
-  title: string;
+  type?: string;
+  panel: "top" | "bottom" | "left" | "right";
+  title?: string;
+  header?: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: string;
-  data: {
+  className?: string;
+  data?: {
    labels: string[];
    datasets: {
      data: number[];
@@ -20,162 +23,263 @@ interface Widget {
      borderColor: string;
      borderWidth: number;
    }[];
-  }; // Data for the chart
+  };
+  value?: string;
+  per?: string;
+}
+
+interface ChartElement {
+  tagName: string;
+  className: string;
+  textContent: string;
+  selector: string;
 }

 const Design = () => {
-  const [selectedName, setSelectedName] = useState("drop down");
-  console.log("selectedName: ", selectedName);
-
-  const [selectedElement, setSelectedElement] = useState("drop down");
-  console.log("selectedElement: ", selectedElement);
-
  const [selectedFont, setSelectedFont] = useState("drop down");
-  console.log("selectedFont: ", selectedFont);
-
  const [selectedSize, setSelectedSize] = useState("drop down");
-  console.log("selectedSize: ", selectedSize);
-
  const [selectedWeight, setSelectedWeight] = useState("drop down");
-  console.log("selectedWeight: ", selectedWeight);
+  const [elementColor, setElementColor] = useState("#6f42c1");
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [chartElements, setChartElements] = useState<ChartElement[]>([]);
+  const [selectedElementToStyle, setSelectedElementToStyle] = useState<string | null>(null);
+  const [nameInput, setNameInput] = useState("");
+  const chartRef = useRef<HTMLDivElement>(null);

-  const [elementColor, setElementColor] = useState("#6f42c1"); // Default color for elements
-  const [showColorPicker, setShowColorPicker] = useState(false); // Manage visibility of the color picker
+  const { selectedChartId, setSelectedChartId, widgets, setWidgets } = useWidgetStore();

-  // Zustand Store Hooks
-  const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
-    useWidgetStore();
+  // Initialize name input and extract elements when selectedChartId changes
+  useEffect(() => {
+    setNameInput(selectedChartId?.header || selectedChartId?.title || "");
+    
+    if (!chartRef.current) return;
+
+    const timer = setTimeout(() => {
+      const chartContainer = chartRef.current;
+      if (!chartContainer) return;
+
+      const elements = Array.from(chartContainer.querySelectorAll("*"))
+        .filter((el) => {
+          const tagName = el.tagName.toLowerCase();
+          return !["script", "style", "meta", "link", "head"].includes(tagName);
+        })
+        .map((el, index) => {
+          const tagName = el.tagName.toLowerCase();
+          const className = typeof el.className === "string" ? el.className : "";
+          const textContent = el.textContent?.trim() || "";
+
+          let selector = tagName;
+
+          if (className && typeof className === "string") {
+            const classList = className.split(/\s+/).filter((c) => c.length > 0);
+            if (classList.length > 0) {
+              selector += "." + classList.join(".");
+            }
+          }
+
+          if (!className || className.trim() === "") {
+            const parent = el.parentElement;
+            if (parent) {
+              const siblings = Array.from(parent.children).filter(
+                (child) => child.tagName.toLowerCase() === tagName
+              );
+              const position = siblings.indexOf(el) + 1;
+              selector += `:nth-of-type(${position})`;
+            }
+          }
+
+          return {
+            tagName,
+            className,
+            textContent,
+            selector,
+          };
+        });
+
+      setChartElements(elements);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [selectedChartId]);
+
+  const applyStyles = () => {
+    if (!selectedElementToStyle || !chartRef.current) return;
+
+    const element = chartRef.current.querySelector(selectedElementToStyle);
+    if (!element) return;
+
+    const elementToStyle = element as HTMLElement;
+
+    if (selectedFont !== "drop down") {
+      elementToStyle.style.fontFamily = selectedFont;
+    }
+    if (selectedSize !== "drop down") {
+      elementToStyle.style.fontSize = selectedSize;
+    }
+    if (selectedWeight !== "drop down") {
+      elementToStyle.style.fontWeight = selectedWeight.toLowerCase();
+    }
+    if (elementColor) {
+      elementToStyle.style.color = elementColor;
+    }
+  };
+
+  useEffect(() => {
+    applyStyles();
+  }, [selectedFont, selectedSize, selectedWeight, elementColor, selectedElementToStyle]);

-  // Handle Widget Updates
  const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
    if (!selectedChartId) return;

-    // Update the selectedChartId
    const updatedChartId = {
      ...selectedChartId,
      ...updatedProperties,
    };
    setSelectedChartId(updatedChartId);

-    // Update the widgets array
    const updatedWidgets = widgets.map((widget) =>
-      widget.id === selectedChartId.id
-        ? { ...widget, ...updatedProperties }
-        : widget
+      widget.id === selectedChartId.id ? { ...widget, ...updatedProperties } : widget
    );
    setWidgets(updatedWidgets);
  };

-  // Default Chart Data
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newName = e.target.value;
+    setNameInput(newName);
+    
+    if (selectedChartId?.title) {
+      handleUpdateWidget({ title: newName });
+    } else if (selectedChartId?.header) {
+      handleUpdateWidget({ header: newName });
+    }
+  };
+
  const defaultChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    datasets: [
      {
        data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: elementColor, // Default background color
-        borderColor: "#ffffff", // Default border color
+        backgroundColor: elementColor,
+        borderColor: "#ffffff",
        borderWidth: 1,
      },
    ],
  };

+  const elementOptions = chartElements.map((el) => {
+    let displayName = el.tagName;
+    if (el.className) displayName += `.${el.className}`;
+    if (el.textContent)
+      displayName += ` (${el.textContent.substring(0, 20)}${
+        el.textContent.length > 20 ? "..." : ""
+      })`;
+    return {
+      display: displayName,
+      value: el.selector,
+    };
+  });
+
  return (
    <div className="design">
-      {/* Title of the Selected Widget */}
      <div className="selectedWidget">
-        {selectedChartId?.title || "Widget 1"}
+        {selectedChartId?.title || selectedChartId?.header || "Widget 1"}
      </div>

-      {/* Chart Component */}
-      <div className="reviewChart">
-        {selectedChartId && (
+      <div className="reviewChart" ref={chartRef}>
+        {selectedChartId?.title ? (
          <ChartComponent
-            type={selectedChartId.type}
+            type={selectedChartId.type || "bar"}
            title={selectedChartId.title}
-            data={selectedChartId.data || defaultChartData} // Use widget data or default
+            data={selectedChartId.data || defaultChartData}
+          />
+        ) : (
+          <SimpleCard
+            header={selectedChartId?.header || ""}
+            icon={WalletIcon}
+            value={selectedChartId?.value || ""}
+            per={selectedChartId?.per || ""}
          />
        )}
      </div>

-      {/* Options Container */}
      <div className="optionsContainer">
-        {/* Name Dropdown */}
+        <div className="option">
+          <span>Element to Style</span>
+          <RegularDropDown
+            header={selectedElementToStyle || "Select Element"}
+            options={
+              elementOptions.length > 0
+                ? elementOptions.map((opt) => opt.display)
+                : ["No elements found"]
+            }
+            onSelect={(value) => {
+              const selected = elementOptions.find(
+                (opt) => opt.display === value
+              );
+              setSelectedElementToStyle(selected?.value || null);
+            }}
+          />
+        </div>
+
        <div className="option">
          <span>Name</span>
-          <RegularDropDown
-            header={selectedChartId?.title || "Select Name"}
-            options={["Option 1", "Option 2", "Option 3"]}
-            onSelect={(value) => {
-              setSelectedName(value);
-              handleUpdateWidget({ title: value });
-            }}
+          <input
+            type="text"
+            value={nameInput}
+            onChange={handleNameChange}
+            placeholder="Enter name"
          />
        </div>

-        {/* Element Dropdown */}
-        <div className="option">
-          <span>Element</span>
-          <RegularDropDown
-            header={selectedChartId?.type || "Select Element"}
-            options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]} // Valid chart types
-            onSelect={(value) => {
-              setSelectedElement(value);
-              handleUpdateWidget({ type: value });
-            }}
-          />
-        </div>
+        {selectedChartId?.title && (
+          <div className="option">
+            <span>Chart Type</span>
+            <RegularDropDown
+              header={selectedChartId?.type || "Select Type"}
+              options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]}
+              onSelect={(value) => {
+                handleUpdateWidget({ type: value });
+              }}
+            />
+          </div>
+        )}

-        {/* Font Family Dropdown */}
        <div className="option">
          <span>Font Family</span>
          <RegularDropDown
            header={selectedChartId?.fontFamily || "Select Font"}
            options={["Arial", "Roboto", "Sans-serif"]}
-            onSelect={(value) => {
-              setSelectedFont(value);
-              handleUpdateWidget({ fontFamily: value });
-            }}
+            onSelect={(value) => setSelectedFont(value)}
          />
        </div>

-        {/* Size Dropdown */}
        <div className="option">
          <span>Size</span>
          <RegularDropDown
            header={selectedChartId?.fontSize || "Select Size"}
            options={["12px", "14px", "16px", "18px"]}
-            onSelect={(value) => {
-              setSelectedSize(value);
-              handleUpdateWidget({ fontSize: value });
-            }}
+            onSelect={(value) => setSelectedSize(value)}
          />
        </div>

-        {/* Weight Dropdown */}
        <div className="option">
          <span>Weight</span>
          <RegularDropDown
            header={selectedChartId?.fontWeight || "Select Weight"}
            options={["Light", "Regular", "Bold"]}
-            onSelect={(value) => {
-              setSelectedWeight(value);
-              handleUpdateWidget({ fontWeight: value });
-            }}
+            onSelect={(value) => setSelectedWeight(value)}
          />
        </div>

-        {/* Element Color Picker */}
        <div className="option">
          <div
            className="header"
            onClick={() => setShowColorPicker((prev) => !prev)}
          >
            <span>Element Color</span>
-            <div className="icon">▾</div>{" "}
-            {/* Change icon based on the visibility */}
+            <div className="icon">▾</div>
          </div>

-          {/* Show color picker only when 'showColorPicker' is true */}
          {showColorPicker && (
            <div className="colorDisplayer">
              <input
@@ -183,20 +287,21 @@ const Design = () => {
                value={elementColor}
                onChange={(e) => {
                  setElementColor(e.target.value);
-                  handleUpdateWidget({
-                    data: {
-                      labels: selectedChartId?.data?.labels || [],
-                      datasets: [
-                        {
-                          ...selectedChartId?.data?.datasets[0],
-                          backgroundColor: e.target.value, // Update the element color
-                        },
-                      ],
-                    },
-                  });
+                  if (selectedChartId?.data) {
+                    handleUpdateWidget({
+                      data: {
+                        ...selectedChartId.data,
+                        datasets: [
+                          {
+                            ...selectedChartId.data.datasets[0],
+                            backgroundColor: e.target.value,
+                          },
+                        ],
+                      },
+                    });
+                  }
                }}
              />
-              {/* Display the selected color value */}
              <span style={{ marginLeft: "10px" }}>{elementColor}</span>
            </div>
          )}
@@ -206,4 +311,4 @@ const Design = () => {
  );
 };

-export default Design;
+export default Design;