+ {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..e716668
--- /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..7fc6bba
--- /dev/null
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
@@ -0,0 +1,10 @@
+
+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/WidgetsFloating.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
new file mode 100644
index 0000000..3cde77b
--- /dev/null
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+
+interface Widget {
+ id: string;
+ name: string;
+}
+
+const WidgetsFloating = () => {
+ const [widgets, setWidgets] = useState
+ {widgets.map((widget) => (
+
+ );
+};
+
+export default WidgetsFloating;
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
handleDragStart(e, widget)}
+ >
+ {widget.name}
+
+ ))}
+
- ![]()
+ 
diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx
index 9cac07b..5c59c19 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" && (
-
);
};
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index d1a7a14..f6389e9 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -1,8 +1,250 @@
-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 { templates } = useTemplateStore();
+ const [activeTool, setActiveTool] = useState("cursor");
+ const [activeSubTool, setActiveSubTool] = useState("cursor");
+ const [toggleThreeD, setToggleThreeD] = useState(true);
+
+ const dropdownRef = useRef
-
+
-
- Actions
-
-
-
-
+
- {actionList.map((action, index) => (
-
-
-
- ))}
- handleSelectItem("action", action)}>
- {action}
-
- handleRemoveAction(index)}
- >
-
-
-
- Selected Object
+
+ {}}
+ />
- Process:
+
-
-
-
- Triggers
-
-
-
-
-
- {triggerList.map((trigger, index) => (
-
-
-
- ))}
- handleSelectItem("trigger", trigger)}>
- {trigger}
-
- handleRemoveTrigger(index)}
- >
-
-
-
-
- {selectedItem && (
- <>
-
+ >({});
+
+ useEffect(() => {
+ // Initialize data groups for the newly selected widget if it doesn't exist
+ if (selectedChartId && !chartDataGroups[selectedChartId.id]) {
+ setChartDataGroups((prev) => ({
+ ...prev,
+ [selectedChartId.id]: [
+ {
+ id: Date.now(),
+ easing: "Connecter 1",
+ children: [{ id: Date.now(), easing: "Linear" }],
+ },
+ ],
+ }));
+ }
+ }, [selectedChartId]);
+
+ // Handle adding a new child to the group
+ const handleAddClick = (groupId: number) => {
+ setChartDataGroups((prevGroups) => {
+ const currentGroups = prevGroups[selectedChartId.id] || [];
+ const group = currentGroups.find((g) => g.id === groupId);
+
+ if (group && group.children.length < 7) {
+ const newChild = { id: Date.now(), easing: "Linear" };
+ return {
+ ...prevGroups,
+ [selectedChartId.id]: currentGroups.map((g) =>
+ g.id === groupId ? { ...g, children: [...g.children, newChild] } : g
+ ),
+ };
+ }
+ return prevGroups;
+ });
+ };
+
+ // Remove a child from a group
+ const removeChild = (groupId: number, childId: number) => {
+ setChartDataGroups((currentGroups) => {
+ const currentChartData = currentGroups[selectedChartId.id] || [];
+
+ return {
+ ...currentGroups,
+ [selectedChartId.id]: currentChartData.map((group) =>
+ group.id === groupId
+ ? {
+ ...group,
+ children: group.children.filter(
+ (child) => child.id !== childId
+ ),
+ }
+ : group
+ ),
+ };
+ });
+ };
+
+ return (
+ ) => {
+ 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
+ );
+ setWidgets(updatedWidgets);
+ };
+
+ // Default Chart Data
+ 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
+ borderWidth: 1,
+ },
+ ],
+ };
+
+ return (
+
-
- setEditedName(e.target.value)}
- />
+
);
diff --git a/app/src/components/layout/sidebarRight/visualization/Visualization.tsx b/app/src/components/layout/sidebarRight/visualization/Visualization.tsx
new file mode 100644
index 0000000..f47cc27
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/visualization/Visualization.tsx
@@ -0,0 +1,27 @@
+import { useState } from "react";
+import ToggleHeader from "../../../ui/inputs/ToggleHeader";
+import Data from "./data/Data";
+import Design from "./design/Design";
+
+const Visualization = () => {
+ const [activeOption, setActiveOption] = useState("Data");
+
+ const handleToggleClick = (option: string) => {
+ setActiveOption(option); // Update the active option
+ };
+
+ return (
+
+
+
+
+
- Actions
+
+
- {/* Add other Properties Like:
- * Object Selection Dropdown
- * Buffer Time
- * Get Value From Object
- * Action
- * etc.
- */}
- Update
{/* remove this */}
-
- )}
-
-
+
+
+
+ {actionList.map((action, index) => (
+
+
+
+ ))}
+ handleSelectItem("action", action)}
+ >
+
+ handleRemoveAction(index)}
+ >
+
+ handleResize(e, actionsContainerRef)}
+ >
+
+
+
+
+
+ Triggers
+
+
+
+
+
+ {triggerList.map((trigger, index) => (
+
+
+
+ ))}
+ handleSelectItem("trigger", trigger)}
+ >
+
+ handleRemoveTrigger(index)}
+ >
+
+ handleResize(e, triggersContainerRef)}
+ >
+
+
+ {selectedItem && (
+ <>
+
+ {selectedItem.name}
+
+
+
+ );
+};
+
+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..cd20aea
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
@@ -0,0 +1,175 @@
+import { useEffect, useState } from "react";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
+import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
+
+// Define the data structure for demonstration purposes
+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: {
+ Data01: "Data 01",
+ Data02: "Data 02",
+ Data03: "Data 03",
+ },
+ data2: "Data 2",
+ data3: "Data 3",
+ },
+ },
+};
+
+interface Child {
+ id: number;
+ easing: string;
+}
+
+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..89e1682
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
@@ -0,0 +1,209 @@
+import { 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");
+ 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"); // 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}
+ )}
+ {/* Render groups dynamically */}
+ {chartDataGroups[selectedChartId?.id]?.map((group) => (
+
+ {group.children.map((child, index) => (
+
+ ))}
+
+ {/* Info Box */}
+
+
+ ))}
+ Input {index + 1}
+
+
+ handleAddClick(group.id)} // Pass groupId to handleAddClick
+ >
+
+ )}
+ {/* Remove Icon */}
+
+ 1 ? "" : "disable"
+ }`}
+ onClick={(e) => {
+ e.stopPropagation(); // Prevent event bubbling
+ removeChild(group.id, child.id); // Pass groupId and childId to removeChild
+ }}
+ >
+
+ 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")}
+ >
+
+
+ Market Place
+ Tools
+
+
);
};
diff --git a/app/src/components/ui/charts/BarGraphComponent.tsx b/app/src/components/ui/charts/BarGraphComponent.tsx
new file mode 100644
index 0000000..9a07473
--- /dev/null
+++ b/app/src/components/ui/charts/BarGraphComponent.tsx
@@ -0,0 +1,94 @@
+import { useMemo } from "react";
+
+import { Bar } from "react-chartjs-2";
+
+interface ChartComponentProps {
+ type: any;
+ title: string;
+ fontFamily?: string;
+ fontSize?: string;
+ fontWeight?: "Light" | "Regular" | "Bold";
+ data: any;
+}
+
+const LineGraphComponent = ({
+ title,
+ fontFamily,
+ fontSize,
+ fontWeight = "Regular",
+}: ChartComponentProps) => {
+ // Memoize Font Weight Mapping
+ const chartFontWeightMap = useMemo(
+ () => ({
+ Light: "lighter" as const,
+ Regular: "normal" as const,
+ Bold: "bold" as const,
+ }),
+ []
+ );
+
+ // Parse and Memoize Font Size
+ const fontSizeValue = useMemo(
+ () => (fontSize ? parseInt(fontSize) : 12),
+ [fontSize]
+ );
+
+ // Determine and Memoize Font Weight
+ const fontWeightValue = useMemo(
+ () => chartFontWeightMap[fontWeight],
+ [fontWeight, chartFontWeightMap]
+ );
+
+ // Memoize Chart Font Style
+ const chartFontStyle = useMemo(
+ () => ({
+ family: fontFamily || "Arial",
+ size: fontSizeValue,
+ weight: fontWeightValue,
+ }),
+ [fontFamily, fontSizeValue, fontWeightValue]
+ );
+
+ const options = useMemo(
+ () => ({
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ title: {
+ display: true,
+ text: title,
+ font: chartFontStyle,
+ },
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ display: false, // This hides the x-axis labels
+ },
+ },
+ },
+ }),
+ [title, chartFontStyle]
+ );
+
+ const chartData = {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [
+ {
+ label: "My First Dataset",
+ data: [65, 59, 80, 81, 56, 55, 40],
+ backgroundColor: "#6f42c1",
+ borderColor: "#ffffff",
+ borderWidth: 2,
+ fill: false,
+ },
+ ],
+ };
+
+ return
+
+ {!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,
+ templates,
+ })
+ }
+ >
+
+
+
+
+ {
+ 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/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
new file mode 100644
index 0000000..3bf6b8f
--- /dev/null
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -0,0 +1,179 @@
+import React, { useEffect, useRef } from "react";
+import { Widget } from "../../../store/useWidgetStore";
+
+// Define the type for `Side`
+type Side = "top" | "bottom" | "left" | "right";
+
+interface DisplayZoneProps {
+ zonesData: {
+ [key: string]: {
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: Widget[];
+ };
+ };
+ selectedZone: {
+ zoneName: string;
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+ }[];
+ };
+ setSelectedZone: React.Dispatch<
+ React.SetStateAction<{
+ zoneName: string;
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+ }[];
+ }>
+ >;
+}
+
+const DisplayZone: React.FC
+ {/* "+" Button */}
+
+
+ {/* Extra Buttons */}
+ {selectedZone.activeSides.includes(side) && (
+
+ ))}
+
+ {/* Hide Panel */}
+
+ )}
+ toggleVisibility(side)}
+ >
+
+
+ {/* Clean Panel */}
+ cleanPanel(side)}
+ >
+
+
+ {/* Lock/Unlock Panel */}
+ toggleLockPanel(side)}
+ >
+
+
+ {Object.keys(zonesData).map((zoneName, index) => (
+
+ );
+};
+
+export default DisplayZone;
\ No newline at end of file
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
new file mode 100644
index 0000000..0f13266
--- /dev/null
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -0,0 +1,82 @@
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import PieGraphComponent from "../charts/PieGraphComponent";
+import BarGraphComponent from "../charts/BarGraphComponent";
+import LineGraphComponent from "../charts/LineGraphComponent";
+
+export const DraggableWidget = ({ widget }: { widget: any }) => {
+ const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
+ const handlePointerDown = () => {
+ if (selectedChartId?.id !== widget.id) {
+ setSelectedChartId(widget);
+ }
+ };
+
+ return (
+ <>
+ {
+ setSelectedZone({
+ zoneName,
+ ...zonesData[zoneName],
+ });
+ }}
+ >
+ {zoneName}
+
+ ))}
+
+ {widget.type === "progress" ? (
+ //
+
+ );
+};
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
new file mode 100644
index 0000000..4a1305f
--- /dev/null
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -0,0 +1,203 @@
+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 handleDrop(e, side)}
+ onDragOver={(e) => e.preventDefault()}
+ ref={(el) => {
+ if (el) {
+ panelRefs.current[side] = el;
+ } else {
+ delete panelRefs.current[side];
+ }
+ }}
+ >
+
+ ))}
+
+ );
+};
+
+export default Panel;
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
new file mode 100644
index 0000000..7905769
--- /dev/null
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -0,0 +1,103 @@
+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";
+import DisplayZone from "./DisplayZone";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+}
+
+const RealTimeVisulization: React.FC = () => {
+ const [hiddenPanels, setHiddenPanels] = React.useState
+ <>{}
+ {selectedZone.widgets
+ .filter((w) => w.panel === side)
+ .map((widget) => (
+
+
+
+ );
+};
+
+export default RealTimeVisulization;
+
diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx
new file mode 100644
index 0000000..ca51112
--- /dev/null
+++ b/app/src/components/ui/inputs/InputWithDropDown.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+
+type InputWithDropDownProps = {
+ label: string;
+ value: string;
+ options?: string[]; // Array of dropdown options
+ activeOption?: string; // The currently active dropdown option
+};
+
+const InputWithDropDown: React.FC
+
+
+ );
+};
+
+export default InputWithDropDown;
diff --git a/app/src/components/ui/inputs/LabledDropdown.tsx b/app/src/components/ui/inputs/LabledDropdown.tsx
new file mode 100644
index 0000000..1d35d85
--- /dev/null
+++ b/app/src/components/ui/inputs/LabledDropdown.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import RegularDropDown from "./RegularDropDown";
+
+type LabledDropdownProps = {
+ defaultOption: string; // Initial active option
+ options: string[]; // Array of dropdown options
+};
+
+const LabledDropdown: React.FC
+
+
+
+ {
+ setOpenDropdown(true);
+ }}
+ >
+
+ {activeOption}
+ {options && openDropdown && (
+
+ {options.map((option, index) => (
+
+ )}
+
+ {option}
+
+ ))}
+
+
+ );
+};
+
+export default LabledDropdown;
diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
new file mode 100644
index 0000000..8ea8d89
--- /dev/null
+++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useRef, useEffect } 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,
+ onSelect,
+}: {
+ label: string;
+ children: React.ReactNode;
+ onSelect: (selectedLabel: string) => void;
+}) => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ Type
+
+ {/* Dropdown Trigger */}
+
+ );
+};
+
+// Recursive Function to Render Nested Data
+const renderNestedData = (
+ data: Record setOpen(!open)} // Toggle submenu on click
+ >
+ {label} {open ? "▼" : "▶"}
+
+
+ {/* Submenu */}
+ {open && (
+
+ {React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ // Clone the element and pass the `onSelect` prop only if it's expected
+ return React.cloneElement(child as React.ReactElement, { onSelect });
+ }
+ return child; // Return non-element children as-is
+ })}
+
+ )}
+
+ {/* 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, handleSelect)}
+
+
+ {/* 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/functions/handleResizePannel.ts b/app/src/functions/handleResizePannel.ts
new file mode 100644
index 0000000..235e97d
--- /dev/null
+++ b/app/src/functions/handleResizePannel.ts
@@ -0,0 +1,24 @@
+export const handleResize = (
+ e: React.MouseEvent
+
+
+ {/* Dropdown Options */}
+ {isOpen && (
+ {selectedOption || header}
+ ▾
+
+ {options.map((option, index) => (
+
+ )}
+ handleOptionClick(option)}
+ >
+ {option}
+
+ ))}
+