resolved build errors

app/src/components/layout/sidebarLeft/visualization/Templates.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import useTemplateStore from "../../../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 

app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useMemo } from "react";
 import { Chart } from "chart.js/auto";
-import { useThemeStore } from "../../../../../store/useThemeStore";
+// import { useThemeStore } from "../../../../../store/useThemeStore";
 
 // Define Props Interface
 interface ChartComponentProps {
@@ -29,17 +29,17 @@ const ChartComponent = ({
   data: propsData,
 }: ChartComponentProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const { themeColor } = useThemeStore();
+  // const { themeColor } = useThemeStore();
 
   // Memoize Theme Colors to Prevent Unnecessary Recalculations
-  const buttonActionColor = useMemo(
+  // const buttonActionColor = useMemo(
-    () => themeColor[0] || "#5c87df",
+  //   () => themeColor[0] || "#5c87df",
-    [themeColor]
+  //   [themeColor]
-  );
+  // );
-  const buttonAbortColor = useMemo(
+  // const buttonAbortColor = useMemo(
-    () => themeColor[1] || "#ffffff",
+  //   () => themeColor[1] || "#ffffff",
-    [themeColor]
+  //   [themeColor]
-  );
+  // );
 
   // Memoize Font Weight Mapping
   const chartFontWeightMap = useMemo(

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 
 const Widgets3D = () => {
   return (

app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx

@@ -1,189 +1,39 @@
-import React, {
+import React, { useState } from "react";
-  useState,
-  DragEvent,
-  MouseEvent,
-  useRef,
-  useEffect,
-} from "react";
 
-const WidgetsFloating: React.FC = () => {
+interface Widget {
-  const stateWorking = [
+  id: string;
-    { "Oil Tank": "24/341" },
+  name: string;
-    { "Oil Refin": "36.023" },
+}
-    { Transmission: "36.023" },
-    { Fuel: "36732" },
-    { Power: "1300" },
-    { Time: "13-9-2023" },
-  ];
 
-  // State for storing the dragged widget and its position
+const WidgetsFloating = () => {
-  const [draggedFloating, setDraggedFloating] = useState<string | null>(null);
+  const [widgets, setWidgets] = useState<Widget[]>([
-  const [position, setPosition] = useState<{ x: number; y: number }>({
+    { id: "1", name: "Working State Widget" },
-    x: 0,
+    { id: "2", name: "Floating Widget 2" },
-    y: 0,
+    { id: "3", name: "Floating Widget 3" },
-  });
+    { id: "4", name: "Floating Widget 4" },
-
-  // State to store all placed widgets with their positions
-  const [placedWidgets, setPlacedWidgets] = useState<
-    { name: string; x: number; y: number }[]
-  >([]);
-
-  const canvasRef = useRef<HTMLDivElement>(null);
-
-  // Handle the drag start event
-  const handleDragStart = (
-    event: DragEvent<HTMLDivElement>,
-    widget: string
-  ) => {
-    setDraggedFloating(widget);
-    // Initialize position to the current position when drag starts
-    setPosition({ x: event.clientX, y: event.clientY });
-  };
-
-  // Handle the drag move event
-  const handleDragMove = (event: MouseEvent) => {
-    if (!draggedFloating) return;
-
-    // Calculate new position and update it
-    const canvas = canvasRef.current;
-    if (canvas) {
-      const canvasRect = canvas.getBoundingClientRect();
-      const newX = event.clientX - canvasRect.left;
-      const newY = event.clientY - canvasRect.top;
-      setPosition({ x: newX, y: newY });
-    }
-  };
-
-  // Handle the drag end event
-  const handleDragEnd = () => {
-    if (draggedFloating) {
-      // Store the final position of the dragged widget
-      setPlacedWidgets((prevWidgets) => [
-        ...prevWidgets,
-        { name: draggedFloating, x: position.x, y: position.y },
   ]);
-      // Reset the dragged floating widget after dragging is completed
-      setDraggedFloating(null);
-    }
-  };
   
-  useEffect(() => {
+  console.log('setWidgets: ', setWidgets);
-    console.log("position: ", position);
+  // Function to handle drag start
-    console.log("draggedFloating: ", draggedFloating);
+  const handleDragStart = (
-  }, [draggedFloating, position]);
+    e: React.DragEvent<HTMLDivElement>,
+    widget: Widget
+  ) => {
+    e.dataTransfer.setData("application/json", JSON.stringify(widget));
+  };
 
   return (
+    <div className="floatingWidgets-wrapper">
+      {widgets.map((widget) => (
         <div
-      id="real-time-vis-canvas"
+          key={widget.id}
-      ref={canvasRef}
-      className="canvas"
-      style={{
-        position: "relative",
-        width: "100%",
-        height: "400px",
-        backgroundColor: "#f0f0f0",
-        border: "1px solid #ccc",
-      }}
-      onMouseMove={handleDragMove}
-      onMouseUp={handleDragEnd}
-    >
-      {/* The floating widget that's being dragged */}
-      {draggedFloating && (
-        <div
           className="floating"
-          style={{
+          draggable
-            position: "absolute",
+          onDragStart={(e) => handleDragStart(e, widget)}
-            left: `${position.x}px`,
-            top: `${position.y}px`,
-            cursor: "move",
-            backgroundColor: "lightblue",
-            padding: "10px",
-            borderRadius: "5px",
-          }}
-        >
-          {draggedFloating}
-        </div>
-      )}
-
-      {/* Render all placed widgets */}
-      {placedWidgets.map((widget, index) => (
-        <div
-          key={index}
-          className="floating"
-          style={{
-            position: "absolute",
-            left: `${widget.x}px`,
-            top: `${widget.y}px`,
-            backgroundColor: "lightgreen",
-            padding: "10px",
-            borderRadius: "5px",
-          }}
         >
           {widget.name}
         </div>
       ))}
-
-      {/* The rest of your floating widgets */}
-      <div
-        className="floating working-state"
-        draggable
-        onDragStart={(e) => handleDragStart(e, "working-state")}
-        style={{ position: "absolute", top: "50px", left: "50px" }}
-      >
-        <div className="state-working-top">
-          <div className="state-working-main">
-            <div className="state">State</div>
-            <div className="working-status">
-              <span className="working">Working</span>
-              <span className="dot"></span>
-            </div>
-          </div>
-          <div className="img">
-            <img
-              src="https://source.unsplash.com/random/150x100/?factory"
-              alt="Factory"
-            />
-          </div>
-        </div>
-        <div className="state-working-data">
-          {stateWorking.map((state, index) => {
-            const key = Object.keys(state)[0];
-            const value = state[key];
-            return (
-              <div className="data-row" key={index}>
-                <span className="data-key">{key}:</span>
-                <span className="data-value">{value}</span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Other floating widgets */}
-      <div
-        className="floating"
-        draggable
-        onDragStart={(e) => handleDragStart(e, "floating-2")}
-        style={{ position: "absolute", top: "120px", left: "150px" }}
-      >
-        floating-2
-      </div>
-      <div
-        className="floating"
-        draggable
-        onDragStart={(e) => handleDragStart(e, "floating-3")}
-        style={{ position: "absolute", top: "200px", left: "250px" }}
-      >
-        floating-3
-      </div>
-      <div
-        className="floating"
-        draggable
-        onDragStart={(e) => handleDragStart(e, "floating-4")}
-        style={{ position: "absolute", top: "300px", left: "350px" }}
-      >
-        floating-4
-      </div>
     </div>
   );
 };

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -1,10 +1,15 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   AddIcon,
   InfoIcon,
   RemoveIcon,
   ResizeHeightIcon,
 } from "../../../icons/ExportCommonIcons";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { handleResize } from "../../../../functions/handleResizePannel";
 
 const MachineMechanics: React.FC = () => {
   const [actionList, setActionList] = useState<string[]>([]);
@@ -13,7 +18,9 @@ const MachineMechanics: React.FC = () => {
     type: "action" | "trigger";
     name: string;
   } | null>(null);
-  const [editedName, setEditedName] = useState<string>("");
+
+  const actionsContainerRef = useRef<HTMLDivElement>(null);
+  const triggersContainerRef = useRef<HTMLDivElement>(null);
 
   const handleAddAction = () => {
     setActionList([...actionList, `Action ${actionList.length + 1}`]);
@@ -30,7 +37,6 @@ const MachineMechanics: React.FC = () => {
       selectedItem.name === actionList[index]
     ) {
       setSelectedItem(null);
-      setEditedName("");
     }
   };
 
@@ -41,37 +47,25 @@ const MachineMechanics: React.FC = () => {
       selectedItem.name === triggerList[index]
     ) {
       setSelectedItem(null);
-      setEditedName("");
     }
   };
 
   const handleSelectItem = (type: "action" | "trigger", name: string) => {
     setSelectedItem({ type, name });
-    setEditedName(name);
-  };
-
-  const handleSave = () => {
-    if (!selectedItem) return;
-
-    if (selectedItem.type === "action") {
-      setActionList(
-        actionList.map((action) =>
-          action === selectedItem.name ? editedName : action
-        )
-      );
-    } else if (selectedItem.type === "trigger") {
-      setTriggerList(
-        triggerList.map((trigger) =>
-          trigger === selectedItem.name ? editedName : trigger
-        )
-      );
-    }
-
-    setSelectedItem({ ...selectedItem, name: editedName });
   };
 
   return (
     <div className="machine-mechanics-container">
+      <div className="machine-mechanics-header">Selected Object</div>
+      <div className="process-list-container">
+        <div className="label">Process:</div>
+        <RegularDropDown
+          header={"activeOption"}
+          options={["options"]}
+          onSelect={() => {}}
+        />
+      </div>
+      <div className="machine-mechanics-content-container">
         <div className="actions">
           <div className="header">
             <div className="header-value">Actions</div>
@@ -79,19 +73,27 @@ const MachineMechanics: React.FC = () => {
               <AddIcon /> Add
             </div>
           </div>
-        <div className="lists-main-container">
+          <div
+            className="lists-main-container"
+            ref={actionsContainerRef}
+            style={{ height: "120px" }}
+          >
             <div className="list-container">
               {actionList.map((action, index) => (
                 <div
                   key={index}
                   className={`list-item ${
-                  selectedItem?.type === "action" && selectedItem.name === action
+                    selectedItem?.type === "action" &&
+                    selectedItem.name === action
                       ? "active"
                       : ""
                   }`}
                 >
-                <div className="value" onClick={() => handleSelectItem("action", action)}>
+                  <div
-                  {action}
+                    className="value"
+                    onClick={() => handleSelectItem("action", action)}
+                  >
+                    <RenameInput value={action} />
                   </div>
                   <div
                     className="remove-button"
@@ -102,7 +104,11 @@ const MachineMechanics: React.FC = () => {
                 </div>
               ))}
             </div>
-          <div className="resize-icon">
+            <div
+              className="resize-icon"
+              id="action-resize"
+              onMouseDown={(e) => handleResize(e, actionsContainerRef)}
+            >
               <ResizeHeightIcon />
             </div>
           </div>
@@ -114,7 +120,11 @@ const MachineMechanics: React.FC = () => {
               <AddIcon /> Add
             </div>
           </div>
-        <div className="lists-main-container">
+          <div
+            className="lists-main-container"
+            ref={triggersContainerRef}
+            style={{ height: "120px" }}
+          >
             <div className="list-container">
               {triggerList.map((trigger, index) => (
                 <div
@@ -126,8 +136,11 @@ const MachineMechanics: React.FC = () => {
                       : ""
                   }`}
                 >
-                <div className="value" onClick={() => handleSelectItem("trigger", trigger)}>
+                  <div
-                  {trigger}
+                    className="value"
+                    onClick={() => handleSelectItem("trigger", trigger)}
+                  >
+                    <RenameInput value={trigger} />
                   </div>
                   <div
                     className="remove-button"
@@ -138,7 +151,11 @@ const MachineMechanics: React.FC = () => {
                 </div>
               ))}
             </div>
-          <div className="resize-icon">
+            <div
+              className="resize-icon"
+              id="trigger-resize"
+              onMouseDown={(e) => handleResize(e, triggersContainerRef)}
+            >
               <ResizeHeightIcon />
             </div>
           </div>
@@ -146,22 +163,12 @@ const MachineMechanics: React.FC = () => {
         <div className="selected-properties-container">
           {selectedItem && (
             <>
-            <div>
+              <div className="properties-header">{selectedItem.name}</div>
-              <label>Edit Name:</label>
+              <LabledDropdown
-              <input
+                defaultOption="On-hit"
-                type="text"
+                options={["On-hit", "Buffer"]}
-                value={editedName}
-                onChange={(e) => setEditedName(e.target.value)}
               />
-            </div>
+              <InputWithDropDown label="Speed" value="" activeOption=".mm" />
-            {/* Add other Properties Like:
-             * Object Selection Dropdown
-             * Buffer Time
-             * Get Value From Object
-             * Action
-             * etc.
-             */}
-            <div onClick={handleSave}>Update</div> {/* remove this */}
             </>
           )}
         </div>
@@ -170,6 +177,7 @@ const MachineMechanics: React.FC = () => {
           By Selecting Path, you can create Object Triggers.
         </div>
       </div>
+    </div>
   );
 };
 

app/src/components/layout/sidebarRight/visualization/Visualization.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import Search from "../../../ui/inputs/Search";
 import ToggleHeader from "../../../ui/inputs/ToggleHeader";
 import Data from "./data/Data";
 import Design from "./design/Design";

app/src/components/layout/sidebarRight/visualization/data/Data.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";

app/src/components/layout/sidebarRight/visualization/design/Design.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
 import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
@@ -25,10 +25,20 @@ interface Widget {
 
 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
 

app/src/components/ui/charts/BarGraphComponent.tsx

@@ -1,6 +1,6 @@
-import { useRef, useMemo } from "react";
+import {  useMemo } from "react";
 
-import { Bar, Line } from "react-chartjs-2";
+import { Bar } from "react-chartjs-2";
 
 interface ChartComponentProps {
   type: any;

app/src/components/ui/charts/LineGraphComponent.tsx

@@ -1,4 +1,4 @@
-import { useRef, useMemo } from "react";
+import { useMemo } from "react";
 import { Line } from "react-chartjs-2";
 
 interface ChartComponentProps {

app/src/components/ui/charts/PieGraphComponent.tsx

@@ -1,4 +1,4 @@
-import { useRef, useMemo } from "react";
+import { useMemo } from "react";
 import { Pie } from "react-chartjs-2";
 
 interface ChartComponentProps {
@@ -53,6 +53,7 @@ const PieChartComponent = ({
     .getPropertyValue("--accent-color")
     .trim();
 
+  console.log("accentColor: ", accentColor);
   const options = useMemo(
     () => ({
       responsive: true,

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from "react";
-import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import { Widget } from "../../../store/useWidgetStore";
 
 // Define the type for `Side`
@@ -56,7 +55,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   const [selectedOption, setSelectedOption] = React.useState<string | null>(
     null
   );
+  console.log('setSelectedOption: ', setSelectedOption);
   const [options, setOptions] = React.useState<string[]>([]);
+  console.log('setOptions: ', setOptions);
 
   // Scroll to the selected option when it changes
   useEffect(() => {

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

@@ -1,5 +1,3 @@
-import { useMemo, useState } from "react";
-import ChartComponent from "../../layout/sidebarLeft/visualization/widgets/ChartComponent";
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import PieGraphComponent from "../charts/PieGraphComponent";
 import BarGraphComponent from "../charts/BarGraphComponent";

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

@@ -100,3 +100,4 @@ const RealTimeVisulization: React.FC = () => {
 };
 
 export default RealTimeVisulization;
+

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<InputWithDropDownProps> = ({
+  label,
+  value,
+  options,
+  activeOption,
+}) => {
+  const separatedWords = label
+    .split(/(?=[A-Z])/)
+    .map((word) => word.trim())
+    .toString();
+
+  const [openDropdown, setOpenDropdown] = useState(false);
+
+  return (
+    <div className="value-field-container">
+      <label htmlFor={separatedWords} className="label">
+        {label}
+      </label>
+      <div className="input default" id={separatedWords}>
+        <input type="text" defaultValue={value} />
+
+        <div
+          className="dropdown"
+          onClick={() => {
+            setOpenDropdown(true);
+          }}
+        >
+          <div className="active-option">{activeOption}</div>
+          {options && openDropdown && (
+            <div className="dropdown-options-list">
+              {options.map((option, index) => (
+                <div key={index} className={"dropdown-option"}>
+                  {option}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InputWithDropDown;

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<LabledDropdownProps> = ({ defaultOption, options }) => {
+  const [activeOption, setActiveOption] = useState(defaultOption); // State for active option
+
+  const handleSelect = (option: string) => {
+    setActiveOption(option); // Update the active option state
+  };
+
+  return (
+    <div className="value-field-container">
+      <div className="label">Type</div>
+      <RegularDropDown
+        header={activeOption} // Display the current active option
+        options={options} // Use the options from props
+        onSelect={handleSelect} // Handle option selection
+      />
+    </div>
+  );
+};
+
+export default LabledDropdown;

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

@@ -47,9 +47,13 @@ const NestedDropdown = ({
       {/* Submenu */}
       {open && (
         <div className="submenu">
-          {React.Children.map(children, (child) =>
+          {React.Children.map(children, (child) => {
-            React.cloneElement(child as React.ReactElement, { onSelect })
+            if (React.isValidElement(child)) {
-          )}
+              // Clone the element and pass the `onSelect` prop only if it's expected
+              return React.cloneElement(child as React.ReactElement<any>, { onSelect });
+            }
+            return child; // Return non-element children as-is
+          })}
         </div>
       )}
     </div>

app/src/functions/handleResizePannel.ts

@@ -0,0 +1,24 @@
+export const handleResize = (
+    e: React.MouseEvent<HTMLDivElement>,
+    containerRef: React.RefObject<HTMLDivElement | null>
+) => {
+    if (!containerRef.current) return; // Ensure containerRef is not null
+    const startY = e.clientY;
+    const startHeight = containerRef.current.offsetHeight;
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+        const newHeight = Math.max(
+            120,
+            Math.min(400, startHeight + moveEvent.clientY - startY)
+        );
+        containerRef.current!.style.height = `${newHeight}px`;
+    };
+
+    const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+};