+ {activeOption === "Widgets" ?
+ ) : activeModule === "market" ? (
+ <>
) : (
<>
+ {templates.map((template) => (
+
+ );
+};
+
+export default Templates;
+
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
new file mode 100644
index 0000000..39da08d
--- /dev/null
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useRef, useMemo } from "react";
+import { Chart } from "chart.js/auto";
+import { useThemeStore } from "../../../../../store/useThemeStore";
+
+// Define Props Interface
+interface ChartComponentProps {
+ type: any; // Type of chart (e.g., "bar", "line", etc.)
+ title: string; // Title of the chart
+ fontFamily?: string; // Optional font family for the chart title
+ fontSize?: string; // Optional font size for the chart title
+ fontWeight?: "Light" | "Regular" | "Bold"; // Optional font weight for the chart title
+ data: {
+ labels: string[]; // Labels for the x-axis
+ datasets: {
+ data: number[]; // Data points for the chart
+ backgroundColor: string; // Background color for the chart
+ borderColor: string; // Border color for the chart
+ borderWidth: number; // Border width for the chart
+ }[];
+ }; // Data for the chart
+}
+
+const ChartComponent = ({
+ type,
+ title,
+ fontFamily,
+ fontSize,
+ fontWeight = "Regular", // Default to "Regular"
+ data: propsData,
+}: ChartComponentProps) => {
+ const canvasRef = useRef
+ {template.snapshot && (
+
+ ))}
+ {templates.length === 0 && (
+ {/* 16:9 aspect ratio */}
+ 
handleLoadTemplate(template)}
+ />
+
+ )}
+
+
+ handleLoadTemplate(template)}
+ style={{
+ cursor: 'pointer',
+ fontWeight: '500',
+ // ':hover': {
+ // textDecoration: 'underline'
+ // }
+ }}
+ >
+ {template.name}
+
+
+
+ No saved templates yet. Create one in the visualization view!
+
+ )}
+
+
+ );
+};
+
+export default Widgets;
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
new file mode 100644
index 0000000..eaa453e
--- /dev/null
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -0,0 +1,138 @@
+import React from "react";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { ChartType } from "chart.js/auto";
+import ChartComponent from "./ChartComponent";
+
+const chartTypes: ChartType[] = [
+ "bar",
+ "line",
+ "pie",
+ "doughnut",
+ "radar",
+ "polarArea",
+];
+
+const sampleData = {
+ labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+ datasets: [
+ {
+ data: [65, 59, 80, 81, 56, 55, 40],
+ backgroundColor: "#6f42c1",
+ borderColor: "#ffffff",
+ borderWidth: 1,
+ },
+ ],
+};
+
+interface WidgetProps {
+ type: ChartType;
+ index: number;
+ title: string;
+}
+
+const ChartWidget: React.FC {
+ setDraggedAsset({
+ type,
+ id: `widget-${index + 1}`,
+ title,
+ panel: "top",
+ data: sampleData,
+ });
+ }}
+ onDragEnd={() => setDraggedAsset(null)}
+ >
+
+ );
+};
+
+const ProgressBarWidget = ({
+ id,
+ title,
+ data,
+}: {
+ id: string;
+ title: string;
+ data: any;
+}) => {
+ const { setDraggedAsset } = useWidgetStore((state) => state);
+
+ return (
+ {
+ setDraggedAsset({
+ type: "progress",
+ id,
+ title,
+ panel: "top",
+ data,
+ });
+ }}
+ onDragEnd={() => setDraggedAsset(null)}
+ >
+
+ );
+};
+
+const Widgets2D = () => {
+ return (
+ {title}
+ {data.stocks.map((stock: any, index: number) => (
+
+
+
+
+ ))}
+ {stock.key}
+ {stock.value}
+
+ {stock.description}
+
+ Icon
+
+
+ );
+};
+
+export default Widgets2D;
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
new file mode 100644
index 0000000..9a14410
--- /dev/null
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Widgets3D = () => {
+ return (
+
+ {chartTypes.map((type, index) => {
+ const widgetTitle = `Widget ${index + 1}`;
+ return (
+
+
+ Widgets3D
+
+ )
+}
+
+export default Widgets3D
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsTemplate.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsTemplate.tsx
new file mode 100644
index 0000000..14ab07e
--- /dev/null
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsTemplate.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const WidgetsTemplate = () => {
+ return (
+
+ WidgetsTemplate
+
+
+ )
+}
+
+export default WidgetsTemplate
diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index e9ebaa8..b80fd53 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -1,5 +1,6 @@
import React from "react";
import { AppDockIcon } from "../../icons/HeaderIcons";
+import orgImg from "../../../assets/orgTemp.png"
const Header: React.FC = () => {
const guestUsers = [
@@ -38,7 +39,7 @@ const Header: React.FC = () => {
V
- ![]()
+ 
diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx
index 9cac07b..db44f69 100644
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -8,6 +8,7 @@ import {
} from "../../icons/SimulationIcons";
import useToggleStore from "../../../store/useUIToggleStore";
import MachineMechanics from "./mechanics/MachineMechanics";
+import Visualization from "./visualization/Visualization";
const SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore();
@@ -54,13 +55,17 @@ const SideBarRight: React.FC = () => {
)}
)}
- {toggleUI && (
+ {/* process builder */}
+ {toggleUI && activeModule === "builder" && (
+
+ );
+};
+
+export default Visualization;
diff --git a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
new file mode 100644
index 0000000..d1122bb
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from "react";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { RemoveIcon } from "../../../../icons/ExportCommonIcons";
+import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
+
+interface Child {
+ id: number;
+ easing: string;
+}
+const DATA_STRUCTURE = {
+ furnace: {
+ coolingRate: "coolingRate",
+ furnaceTemperature: "furnaceTemperature",
+ heatingRate: "heatingRate",
+ machineId: "machineId",
+ powerConsumption: "powerConsumption",
+ status: "status",
+ timestamp: "timestamp",
+ vacuumLevel: "vacuumLevel",
+ },
+ testDevice: {
+ abrasiveLevel: {
+ data1: "Data 1",
+ data2: "Data 2",
+ data3: "Data 3",
+ },
+ airPressure: "airPressure",
+ machineId: "machineId",
+ powerConsumption: "powerConsumption",
+ status: "status",
+ temperature: {
+ data1: "Data 1",
+ data2: "Data 2",
+ data3: "Data 3",
+ },
+ timestamp: {
+ data1: "Data 1",
+ data2: "Data 2",
+ data3: "Data 3",
+ },
+ },
+};
+
+interface Group {
+ id: number;
+ easing: string;
+ children: Child[];
+}
+
+const Data = () => {
+ const { selectedChartId } = useWidgetStore();
+
+ // State to store groups for all widgets (using Widget.id as keys)
+ const [chartDataGroups, setChartDataGroups] = useState<
+ Record
+ {activeOption === "Data" ? :
+
+ {selectedChartId?.title && (
+
+ );
+};
+
+export default Data;
diff --git a/app/src/components/layout/sidebarRight/visualization/design/Design.tsx b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
new file mode 100644
index 0000000..93332dd
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
+import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+
+// Define Props Interface
+interface Widget {
+ id: string;
+ type: string; // Chart type (e.g., "bar", "line")
+ panel: "top" | "bottom" | "left" | "right"; // Panel location
+ title: string;
+ fontFamily?: string;
+ fontSize?: string;
+ fontWeight?: string;
+ data: {
+ labels: string[];
+ datasets: {
+ data: number[];
+ backgroundColor: string;
+ borderColor: string;
+ borderWidth: number;
+ }[];
+ }; // Data for the chart
+}
+
+const Design = () => {
+ const [selectedName, setSelectedName] = useState("drop down");
+ const [selectedElement, setSelectedElement] = useState("drop down");
+ const [selectedFont, setSelectedFont] = useState("drop down");
+ const [selectedSize, setSelectedSize] = useState("drop down");
+ const [selectedWeight, setSelectedWeight] = useState("drop down");
+ const [elementColor, setElementColor] = useState("#6f42c1"); // Default color for elements
+ const [showColorPicker, setShowColorPicker] = useState(false); // Manage visibility of the color picker
+
+ // Zustand Store Hooks
+ const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
+ useWidgetStore();
+
+ // Handle Widget Updates
+ const handleUpdateWidget = (updatedProperties: Partial{selectedChartId?.title}
+ )}
+ {/*
+ i
+
+ + + By adding templates and widgets, you create a customizable and + dynamic environment. + +
+
+ {/* Title of the Selected Widget */}
+
+ );
+};
+
+export default Design;
diff --git a/app/src/components/ui/ModuleToggle.tsx b/app/src/components/ui/ModuleToggle.tsx
index cbe64e3..bea9c43 100644
--- a/app/src/components/ui/ModuleToggle.tsx
+++ b/app/src/components/ui/ModuleToggle.tsx
@@ -2,6 +2,7 @@ import React from "react";
import useModuleStore from "../../store/useModuleStore";
import {
BuilderIcon,
+ CartIcon,
SimulationIcon,
VisualizationIcon,
} from "../icons/ExportModuleIcons";
@@ -40,6 +41,17 @@ const ModuleToggle: React.FC = () => {
+ {selectedChartId?.title || "Widget 1"}
+
+
+ {/* Chart Component */}
+
+ {selectedChartId && (
+
+
+ {/* Options Container */}
+
+ {/* Name Dropdown */}
+
+
+ Name
+ {
+ setSelectedName(value);
+ handleUpdateWidget({ title: value });
+ }}
+ />
+
+
+ {/* Element Dropdown */}
+
+ Element
+ {
+ setSelectedElement(value);
+ handleUpdateWidget({ type: value });
+ }}
+ />
+
+
+ {/* Font Family Dropdown */}
+
+ Font Family
+ {
+ setSelectedFont(value);
+ handleUpdateWidget({ fontFamily: value });
+ }}
+ />
+
+
+ {/* Size Dropdown */}
+
+ Size
+ {
+ setSelectedSize(value);
+ handleUpdateWidget({ fontSize: value });
+ }}
+ />
+
+
+ {/* Weight Dropdown */}
+
+ Weight
+ {
+ setSelectedWeight(value);
+ handleUpdateWidget({ fontWeight: value });
+ }}
+ />
+
+
+ {/* Element Color Picker */}
+
+
+ setShowColorPicker((prev) => !prev)}
+ >
+ Element Color
+
+
+ {/* Show color picker only when 'showColorPicker' is true */}
+ {showColorPicker && (
+ ▾
{" "}
+ {/* Change icon based on the visibility */}
+
+ {
+ setElementColor(e.target.value);
+ handleUpdateWidget({
+ data: {
+ labels: selectedChartId?.data?.labels || [],
+ datasets: [
+ {
+ ...selectedChartId?.data?.datasets[0],
+ backgroundColor: e.target.value, // Update the element color
+ },
+ ],
+ },
+ });
+ }}
+ />
+ {/* Display the selected color value */}
+ {elementColor}
+
+ )}
+ Visualization
+ setActiveModule("market")}
+ >
+
);
};
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index d1a7a14..a182e1d 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -1,8 +1,243 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from "react";
+import {
+ AsileIcon,
+ CommentIcon,
+ CursorIcon,
+ FloorIcon,
+ FreeMoveIcon,
+ PenIcon,
+ PlayIcon,
+ SaveTemplateIcon,
+ WallIcon,
+ ZoneIcon,
+} from "../icons/ExportToolsIcons";
+import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
+import useModuleStore from "../../store/useModuleStore";
+import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate";
+import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+import useTemplateStore from "../../store/useTemplateStore";
+import { useSelectedZoneStore } from "../../store/useZoneStore";
const Tools: React.FC = () => {
+ const [activeTool, setActiveTool] = useState("cursor");
+ const [activeSubTool, setActiveSubTool] = useState("cursor");
+ const [toggleThreeD, setToggleThreeD] = useState(true);
+
+ const dropdownRef = useRef
+
+ Market Place
+ Tools
+
+
);
};
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
new file mode 100644
index 0000000..0a810f7
--- /dev/null
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -0,0 +1,186 @@
+import React from "react";
+import {
+ CleanPannel,
+ EyeIcon,
+ LockIcon,
+} from "../../icons/RealTimeVisulationIcons";
+
+// Define the type for `Side`
+type Side = "top" | "bottom" | "left" | "right";
+
+// Define the type for the props passed to the Buttons component
+interface ButtonsProps {
+ selectedZone: {
+ zoneName: string; // Add zoneName property
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+ }[];
+ };
+ setSelectedZone: React.Dispatch<
+ React.SetStateAction<{
+ zoneName: string; // Ensure zoneName is included in the state type
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+ }[];
+ }>
+ >;
+}
+
+const AddButtons: React.FC
+
+ {!toggleThreeD && activeModule === "builder" && (
+ <>
+
+
+ {activeSubTool == "cursor" && (
+
+ {
+ setActiveTool("cursor");
+ }}
+ >
+
+ )}
+ {activeSubTool == "free-hand" && (
+ {
+ setActiveTool("free-hand");
+ }}
+ >
+
+ )}
+ {activeModule !== "visualization" && (
+ {
+ setOpenDrop(!openDrop);
+ console.log(openDrop);
+ }}
+ >
+
+ )}
+
+
+ )}
+ {
+ setOpenDrop(false);
+ setActiveTool("cursor");
+ setActiveSubTool("cursor");
+ }}
+ >
+
+
+ {activeSubTool === "cursor" &&
+ Cursor
+ {
+ setOpenDrop(false);
+ setActiveTool("free-hand");
+ setActiveSubTool("free-hand");
+ }}
+ >
+
+
+ {activeSubTool === "free-hand" &&
+ Free Hand
+
+
+
+ )}
+ {activeModule === "simulation" && (
+ <>
+
+ {
+ setActiveTool("draw-wall");
+ }}
+ >
+
+ {
+ setActiveTool("draw-zone");
+ }}
+ >
+
+ {
+ setActiveTool("draw-aisle");
+ }}
+ >
+
+ {
+ setActiveTool("draw-floor");
+ }}
+ >
+
+
+
+
+ )}
+ {activeModule === "visualization" && (
+ <>
+
+ {
+ setActiveTool("pen");
+ }}
+ >
+
+
+
+
+ )}
+
+ handleSaveTemplate({ addTemplate, selectedZone })}
+ >
+
+
+
+
+ {
+ setActiveTool("comment");
+ }}
+ >
+
+ {
+ setActiveTool("play");
+ setIsPlaying(!isPlaying);
+ }}
+ >
+
+ {
+ setToggleThreeD(!toggleThreeD);
+ }}
+ >
+
+
+ 2d
+
+
+ 3d
+
+
+ {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
+
+ );
+};
+
+export default AddButtons;
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
new file mode 100644
index 0000000..342f31f
--- /dev/null
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -0,0 +1,217 @@
+import { useMemo, useState } from "react";
+import ChartComponent from "../../layout/sidebarLeft/visualization/widgets/ChartComponent";
+import { useWidgetStore } from "../../../store/useWidgetStore";
+
+export const DraggableWidget = ({ widget }: { widget: any }) => {
+ const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
+ // State for managing the popup visibility and customization options
+ const [isPopupOpen, setIsPopupOpen] = useState(false);
+ const [customizationOptions, setCustomizationOptions] = useState({
+ templateBackground: "#ffffff",
+ cardBackground: "#ffffff",
+ cardOpacity: 1,
+ cardBlur: 0,
+ font: "Arial",
+ margin: 0,
+ radius: 5,
+ shadow: "Low",
+ });
+
+ // Handle pointer down to select the chart
+ const handlePointerDown = () => {
+ if (selectedChartId?.id !== widget.id) {
+ setSelectedChartId(widget);
+ }
+ };
+
+ // Handle double-click to open the popup
+ const handleDoubleClick = () => {
+ setIsPopupOpen(true);
+ };
+
+ // Close the popup
+ const handleClosePopup = () => {
+ setIsPopupOpen(false);
+ };
+
+ // Save the changes made in the popup
+ const handleSaveChanges = () => {
+ // Here you can save the customizationOptions to your store or API
+ console.log("Saved Customization Options:", customizationOptions);
+ setIsPopupOpen(false);
+ };
+
+ // Compute dynamic card styles based on customizationOptions
+ const cardStyle = useMemo(() => {
+ const shadowLevels = {
+ Low: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+ Medium: "0px 4px 8px rgba(0, 0, 0, 0.2)",
+ High: "0px 8px 16px rgba(0, 0, 0, 0.3)",
+ };
+
+ return {
+ backgroundColor: customizationOptions.cardBackground,
+ opacity: customizationOptions.cardOpacity,
+ filter: `blur(${customizationOptions.cardBlur}px)`,
+ fontFamily: customizationOptions.font,
+ margin: `${customizationOptions.margin}px`,
+ borderRadius: `${customizationOptions.radius}px`,
+ // boxShadow: shadowLevels[customizationOptions.shadow],
+ };
+ }, [customizationOptions]);
+
+ return (
+ <>
+
+ {/* "+" Button */}
+
+
+ {/* Extra Buttons */}
+ {selectedZone.activeSides.includes(side) && (
+
+ ))}
+
+ {/* Hide Panel */}
+
+ )}
+ toggleVisibility(side)}
+ >
+
+
+ {/* Clean Panel */}
+ cleanPanel(side)}
+ >
+
+
+ {/* Lock/Unlock Panel */}
+ toggleLockPanel(side)}
+ >
+
+
+ {widget.type === "progress" ? (
+ //
+
+ {/* Popup for Customizing Template Theme */}
+ {isPopupOpen && (
+
+
+ )}
+
+ );
+};
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
new file mode 100644
index 0000000..502114b
--- /dev/null
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -0,0 +1,197 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { DraggableWidget } from "./DraggableWidget";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+}
+
+interface PanelProps {
+ selectedZone: {
+ zoneName: string;
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: Widget[];
+ };
+ setSelectedZone: React.Dispatch<
+ React.SetStateAction<{
+ zoneName: string;
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: Widget[];
+ }>
+ >;
+}
+
+const generateUniqueId = () =>
+ `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+const Panel: React.FC
+
+ Customize Template Theme
+
+
+
+ setCustomizationOptions((prev) => ({
+ ...prev,
+ templateBackground: e.target.value,
+ }))
+ }
+ />
+
+
+
+
+ setCustomizationOptions((prev) => ({
+ ...prev,
+ cardBackground: e.target.value,
+ }))
+ }
+ />
+
+
+
+
+ setCustomizationOptions((prev) => ({
+ ...prev,
+ cardOpacity: parseFloat(e.target.value),
+ }))
+ }
+ />
+
+
+
+
+ setCustomizationOptions((prev) => ({
+ ...prev,
+ cardBlur: parseInt(e.target.value),
+ }))
+ }
+ />
+
+
+
+
+
+
+
+
+ setCustomizationOptions((prev) => ({
+ ...prev,
+ margin: parseInt(e.target.value),
+ }))
+ }
+ />
+
+
+
+
+ setCustomizationOptions((prev) => ({
+ ...prev,
+ radius: parseInt(e.target.value),
+ }))
+ }
+ />
+
+
+
+
+
+
+
+
+
+ handleDrop(e, side)}
+ onDragOver={(e) => e.preventDefault()}
+ ref={(el) => {
+ if (el) {
+ panelRefs.current[side] = el;
+ } else {
+ delete panelRefs.current[side];
+ }
+ }}
+ >
+
+ ))}
+
+ );
+};
+
+export default Panel;
+// only load selected template
+
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
new file mode 100644
index 0000000..fb2d653
--- /dev/null
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useState, useRef } from "react";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import Panel from "./Panel";
+import AddButtons from "./AddButtons";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+}
+
+const RealTimeVisulization: React.FC = () => {
+ const containerRef = useRef
+ {selectedZone.widgets
+ .filter((w) => w.panel === side)
+ .map((widget) => (
+
+
+
+ );
+};
+
+export default RealTimeVisulization;
diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
new file mode 100644
index 0000000..215bbd8
--- /dev/null
+++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+
+
+// Dropdown Item Component
+const DropdownItem = ({
+ label,
+ href,
+ onClick,
+}: {
+ label: string;
+ href?: string;
+ onClick?: () => void;
+}) => (
+ {
+ e.preventDefault();
+ onClick?.();
+ }}
+ >
+ {label}
+
+);
+
+// Nested Dropdown Component
+const NestedDropdown = ({
+ label,
+ children,
+}: {
+ label: string;
+ children: React.ReactNode;
+}) => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+ {Object.keys(zonesData).map((zoneName, index) => (
+
+
+ {!isPlaying && (
+ {
+ setSelectedZone({
+ zoneName,
+ ...zonesData[zoneName],
+ });
+ }}
+ >
+ {zoneName}
+
+ ))}
+
+ {/* Dropdown Trigger */}
+
+ );
+};
+
+// Recursive Function to Render Nested Data
+const renderNestedData = (data: Record setOpen(!open)} // Toggle submenu on click
+ >
+ {label} {open ? "▼" : "▶"}
+
+
+ {/* Submenu */}
+ {open && {children}
}
+
+ {/* Dropdown Trigger Button */}
+
+
+ {/* Dropdown Menu */}
+ {open &&
+ );
+};
+
+export default MultiLevelDropdown;
\ No newline at end of file
diff --git a/app/src/components/ui/inputs/RegularDropDown.tsx b/app/src/components/ui/inputs/RegularDropDown.tsx
new file mode 100644
index 0000000..318913f
--- /dev/null
+++ b/app/src/components/ui/inputs/RegularDropDown.tsx
@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useRef } from "react";
+
+interface DropdownProps {
+ header: string;
+ options: string[];
+ onSelect: (option: string) => void;
+}
+
+const RegularDropDown: React.FC{renderNestedData(data)}
}
+
+ {/* Dropdown Header */}
+
+ );
+};
+
+export default RegularDropDown;
diff --git a/app/src/functions/generateUniqueId.ts b/app/src/functions/generateUniqueId.ts
new file mode 100644
index 0000000..a315524
--- /dev/null
+++ b/app/src/functions/generateUniqueId.ts
@@ -0,0 +1,2 @@
+export const generateUniqueId = (): string =>
+ `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
\ No newline at end of file
diff --git a/app/src/hooks/temp.md b/app/src/hooks/temp.md
new file mode 100644
index 0000000..e69de29
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 424d38b..4f48401 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './styles/main.scss'
import App from './App.tsx'
-
+//Test
createRoot(document.getElementById('root')!).render(
+
+
+ {/* Dropdown Options */}
+ {isOpen && (
+ {selectedOption || header}
+ ▾
+
+ {options.map((option, index) => (
+
+ )}
+ handleOptionClick(option)}
+ >
+ {option}
+
+ ))}
+