Added Loading Screen, Integerated events ui

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -37,37 +37,33 @@ const SideBarRight: React.FC = () => {
       {toggleUI && (
         <div className="sidebar-actions-container">
           {/* {activeModule === "builder" && ( */}
-            <div
-              className={`sidebar-action-list ${
-                subModule === "properties" ? "active" : ""
+          <div
+            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
               }`}
-              onClick={() => setSubModule("properties")}
-            >
-              <PropertiesIcon isActive={subModule === "properties"} />
-            </div>
+            onClick={() => setSubModule("properties")}
+          >
+            <PropertiesIcon isActive={subModule === "properties"} />
+          </div>
           {/* )} */}
           {activeModule === "simulation" && (
             <>
               <div
-                className={`sidebar-action-list ${
-                  subModule === "mechanics" ? "active" : ""
-                }`}
+                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
+                  }`}
                 onClick={() => setSubModule("mechanics")}
               >
                 <MechanicsIcon isActive={subModule === "mechanics"} />
               </div>
               <div
-                className={`sidebar-action-list ${
-                  subModule === "simulations" ? "active" : ""
-                }`}
+                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
+                  }`}
                 onClick={() => setSubModule("simulations")}
               >
                 <SimulationIcon isActive={subModule === "simulations"} />
               </div>
               <div
-                className={`sidebar-action-list ${
-                  subModule === "analysis" ? "active" : ""
-                }`}
+                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
+                  }`}
                 onClick={() => setSubModule("analysis")}
               >
                 <AnalysisIcon isActive={subModule === "analysis"} />
@@ -103,7 +99,7 @@ const SideBarRight: React.FC = () => {
           {subModule === "mechanics" && !selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
-                <MachineMechanics />
+                {/* <MachineMechanics /> */}
               </div>
             </div>
           )}

app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx

@@ -17,10 +17,10 @@ const Vector3Input: React.FC<PositionInputProps> = ({
   return (
     <div className="custom-input-container">
       <div className="header">
-        {header}{" "}
-        <div className="eyedrop-button">
+        {header}
+        {/* <div className="eyedrop-button">
           <EyeDroperIcon isActive={false} />
-        </div>
+        </div> */}
       </div>
       <div className="inputs-container">
         <div className="input-container">

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useMemo } from "react";
 import {
   AddIcon,
   InfoIcon,
@@ -11,80 +11,331 @@ import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import RegularDropDown from "../../../ui/inputs/RegularDropDown";
 import { handleResize } from "../../../../functions/handleResizePannel";
 import EyeDropInput from "../../../ui/inputs/EyeDropInput";
-import { useSelectedActionSphere } from "../../../../store/store";
+import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
+import * as THREE from 'three';
+import InputToggle from "../../../ui/inputs/InputToggle";
 
 const MachineMechanics: React.FC = () => {
   const { selectedActionSphere } = useSelectedActionSphere();
-  console.log("selectedActionSphere: ", selectedActionSphere);
-  const [actionList, setActionList] = useState<string[]>([]);
-  const [triggerList, setTriggerList] = useState<string[]>([]);
-  const [selectedItem, setSelectedItem] = useState<{
-    type: "action" | "trigger";
-    name: string;
-  } | null>(null);
+  const { selectedPath, setSelectedPath } = useSelectedPath();
+  const { simulationPaths, setSimulationPaths } = useSimulationPaths();
 
   const actionsContainerRef = useRef<HTMLDivElement>(null);
   const triggersContainerRef = useRef<HTMLDivElement>(null);
 
+  const selectedPoint = useMemo(() => {
+    if (!selectedActionSphere) return null;
+    return simulationPaths.flatMap((path) => path.points).find((point) => point.uuid === selectedActionSphere.point.uuid);
+  }, [selectedActionSphere, simulationPaths]);
+
   const handleAddAction = () => {
-    setActionList([...actionList, `Action ${actionList.length + 1}`]);
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...path,
+      points: path.points.map((point) => {
+        if (point.uuid === selectedActionSphere.point.uuid) {
+          const actionIndex = point.actions.length;
+          const newAction = {
+            uuid: THREE.MathUtils.generateUUID(),
+            name: `Action ${actionIndex + 1}`,
+            type: 'Inherit',
+            material: 'Inherit',
+            delay: 'Inherit',
+            spawnInterval: 'Inherit',
+            isUsed: false
+          };
+
+          return { ...point, actions: [...point.actions, newAction] };
+        }
+        return point;
+      }),
+    }));
+
+    setSimulationPaths(updatedPaths);
+  };
+
+  const handleDeleteAction = (uuid: string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...path,
+      points: path.points.map((point) =>
+        point.uuid === selectedActionSphere.point.uuid
+          ? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
+          : point
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+  };
+
+  const handleActionSelect = (uuid: string, actionType: string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...path,
+      points: path.points.map((point) =>
+        point.uuid === selectedActionSphere.point.uuid
+          ? {
+            ...point,
+            actions: point.actions.map((action) =>
+              action.uuid === uuid
+                ? {
+                  ...action,
+                  type: actionType,
+                  // Reset dependent fields when type changes
+                  material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
+                  delay: actionType === 'Delay' ? 'Inherit' : action.delay,
+                  spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
+                }
+                : action
+            ),
+          }
+          : point
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+
+    // Update the selected item to reflect changes
+    if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+      const updatedAction = updatedPaths
+        .flatMap(path => path.points)
+        .find(p => p.uuid === selectedActionSphere.point.uuid)
+        ?.actions.find(a => a.uuid === uuid);
+
+      if (updatedAction) {
+        setSelectedItem({
+          type: "action",
+          item: updatedAction
+        });
+      }
+    }
+  };
+
+  // Modified handleMaterialSelect to ensure it only applies to relevant action types
+  const handleMaterialSelect = (uuid: string, material: string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...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
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+
+    // Update selected item if it's the current action
+    if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+      setSelectedItem({
+        ...selectedItem,
+        item: {
+          ...selectedItem.item,
+          material
+        }
+      });
+    }
+  };
+
+  const handleDelayChange = (uuid: string, delay: number | string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...path,
+      points: path.points.map((point) =>
+        point.uuid === selectedActionSphere.point.uuid
+          ? {
+            ...point,
+            actions: point.actions.map((action) =>
+              action.uuid === uuid ? { ...action, delay } : action
+            ),
+          }
+          : point
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+  };
+
+  const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...path,
+      points: path.points.map((point) =>
+        point.uuid === selectedActionSphere.point.uuid
+          ? {
+            ...point,
+            actions: point.actions.map((action) =>
+              action.uuid === uuid ? { ...action, spawnInterval } : action
+            ),
+          }
+          : point
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+  };
+
+  const handleSpeedChange = (speed: number) => {
+    if (!selectedPath) return;
+
+    const updatedPaths = simulationPaths.map((path) =>
+      path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
+    );
+
+    setSimulationPaths(updatedPaths);
+    setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
   };
 
   const handleAddTrigger = () => {
-    setTriggerList([...triggerList, `Trigger ${triggerList.length + 1}`]);
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...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: '',
+            isUsed: false
+          };
+
+          return { ...point, triggers: [...point.triggers, newTrigger] };
+        }
+        return point;
+      }),
+    }));
+
+    setSimulationPaths(updatedPaths);
   };
 
-  const handleRemoveAction = (index: number) => {
-    setActionList(actionList.filter((_, i) => i !== index));
-    if (
-      selectedItem?.type === "action" &&
-      selectedItem.name === actionList[index]
-    ) {
-      setSelectedItem(null);
+  const handleDeleteTrigger = (uuid: string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...path,
+      points: path.points.map((point) =>
+        point.uuid === selectedActionSphere.point.uuid
+          ? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
+          : point
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+  };
+
+  const handleTriggerSelect = (uuid: string, triggerType: string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...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
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+  };
+
+  // Update the toggle handlers to immediately update the selected item
+  const handleActionToggle = (uuid: string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...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
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+
+    // Immediately update the selected item if it's the one being toggled
+    if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+      setSelectedItem({
+        ...selectedItem,
+        item: {
+          ...selectedItem.item,
+          isUsed: !selectedItem.item.isUsed
+        }
+      });
     }
   };
 
-  const handleRemoveTrigger = (index: number) => {
-    setTriggerList(triggerList.filter((_, i) => i !== index));
-    if (
-      selectedItem?.type === "trigger" &&
-      selectedItem.name === triggerList[index]
-    ) {
-      setSelectedItem(null);
+  // Do the same for trigger toggle
+  const handleTriggerToggle = (uuid: string) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) => ({
+      ...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
+      ),
+    }));
+
+    setSimulationPaths(updatedPaths);
+
+    // Immediately update the selected item if it's the one being toggled
+    if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
+      setSelectedItem({
+        ...selectedItem,
+        item: {
+          ...selectedItem.item,
+          isUsed: !selectedItem.item.isUsed
+        }
+      });
     }
   };
 
-  const handleSelectItem = (type: "action" | "trigger", name: string) => {
-    setSelectedItem({ type, name });
-  };
-
-  const [processes, setProcesses] = useState<string[]>([]);
-  const [activeProcess, setActiveProcesses] = useState<string>();
-
-  const handleSelect = (option: string) => {
-    setActiveProcesses(option); // Update the active option state
-  };
-  const handleAddProcess = () => {
-    const newProcess = `Process ${processes.length + 1}`; // Generate new process name dynamically
-    setProcesses((prevProcesses) => [...prevProcesses, newProcess]); // Update the state with the new process
-  };
+  const [selectedItem, setSelectedItem] = useState<{
+    type: "action" | "trigger";
+    item: any;
+  } | null>(null);
 
   return (
     <div className="machine-mechanics-container">
       <div className="machine-mechanics-header">
-        {selectedActionSphere?.path?.modelName || "path name not found"}
+        {selectedActionSphere?.path?.modelName || "point name not found"}
       </div>
-      {/* <div className="process-list-container">
-        <div className="label">Process:</div>
-        <RegularDropDown
-          header={activeProcess || "add process ->"}
-          options={processes}
-          onSelect={handleSelect}
-        />
-        <div className="add-new-process" onClick={handleAddProcess}>
-          <AddIcon />
-        </div>
-      </div> */}
+
       <div className="machine-mechanics-content-container">
         <div className="actions">
           <div className="header">
@@ -99,25 +350,24 @@ const MachineMechanics: React.FC = () => {
             style={{ height: "120px" }}
           >
             <div className="list-container">
-              {actionList.map((action, index) => (
+              {selectedPoint?.actions.map((action) => (
                 <div
-                  key={index}
-                  className={`list-item ${
-                    selectedItem?.type === "action" &&
-                    selectedItem.name === action
-                      ? "active"
-                      : ""
-                  }`}
+                  key={action.uuid}
+                  className={`list-item ${selectedItem?.type === "action" &&
+                    selectedItem.item?.uuid === action.uuid
+                    ? "active"
+                    : ""
+                    }`}
                 >
                   <div
                     className="value"
-                    onClick={() => handleSelectItem("action", action)}
+                    onClick={() => setSelectedItem({ type: "action", item: action })}
                   >
-                    <RenameInput value={action} />
+                    <RenameInput value={action.name} />
                   </div>
                   <div
                     className="remove-button"
-                    onClick={() => handleRemoveAction(index)}
+                    onClick={() => handleDeleteAction(action.uuid)}
                   >
                     <RemoveIcon />
                   </div>
@@ -146,25 +396,24 @@ const MachineMechanics: React.FC = () => {
             style={{ height: "120px" }}
           >
             <div className="list-container">
-              {triggerList.map((trigger, index) => (
+              {selectedPoint?.triggers.map((trigger) => (
                 <div
-                  key={index}
-                  className={`list-item ${
-                    selectedItem?.type === "trigger" &&
-                    selectedItem.name === trigger
-                      ? "active"
-                      : ""
-                  }`}
+                  key={trigger.uuid}
+                  className={`list-item ${selectedItem?.type === "trigger" &&
+                    selectedItem.item?.uuid === trigger.uuid
+                    ? "active"
+                    : ""
+                    }`}
                 >
                   <div
                     className="value"
-                    onClick={() => handleSelectItem("trigger", trigger)}
+                    onClick={() => setSelectedItem({ type: "trigger", item: trigger })}
                   >
-                    <RenameInput value={trigger} />
+                    <RenameInput value={trigger.name} />
                   </div>
                   <div
                     className="remove-button"
-                    onClick={() => handleRemoveTrigger(index)}
+                    onClick={() => handleDeleteTrigger(trigger.uuid)}
                   >
                     <RemoveIcon />
                   </div>
@@ -183,28 +432,105 @@ const MachineMechanics: React.FC = () => {
         <div className="selected-properties-container">
           {selectedItem && (
             <>
-              <div className="properties-header">{selectedItem.name}</div>
-              <LabledDropdown
-                defaultOption="On-hit"
-                options={["On-hit", "Buffer"]}
-              />
-              <InputWithDropDown
-                label="Speed"
-                value=""
-                activeOption=".mm"
-                onChange={() => {}}
-              />
-              <EyeDropInput />
+              <div className="properties-header">{selectedItem.item.name}</div>
+
+              {selectedItem.type === "action" && (
+                <>
+                  <InputToggle
+                    inputKey="enableTrigger"
+                    label="Enable Trigger"
+                    value={selectedItem.item.isUsed}
+                    onClick={() => handleActionToggle(selectedItem.item.uuid)}
+                  />
+                  <LabledDropdown
+                    defaultOption={selectedItem.item.type}
+                    options={["Inherit", "Spawn", "Swap", "Despawn", "Delay"]}
+                    onSelect={(option) => handleActionSelect(selectedItem.item.uuid, option)}
+                  />
+
+                  {/* 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)}
+                    />
+                  )}
+
+                  {/* Only show delay input for Delay actions */}
+                  {selectedItem.item.type === 'Delay' && (
+                    <InputWithDropDown
+                      label="Delay Time"
+                      value={selectedItem.item.delay === 'Inherit'
+                        ? undefined
+                        : selectedItem.item.delay}
+                      onChange={(value) => {
+                        const numValue = parseInt(value);
+                        handleDelayChange(
+                          selectedItem.item.uuid,
+                          !value ? 'Inherit' : numValue
+                        );
+                      }}
+                    />
+                  )}
+
+                  {/* Only show spawn interval for Spawn actions */}
+                  {selectedItem.item.type === 'Spawn' && (
+                    <InputWithDropDown
+                      label="Spawn Interval"
+                      value={selectedItem.item.spawnInterval === 'Inherit'
+                        ? undefined
+                        : selectedItem.item.spawnInterval}
+
+                      onChange={(value) => {
+                        const numValue = parseInt(value);
+                        handleSpawnIntervalChange(
+                          selectedItem.item.uuid,
+                          !value ? 'Inherit' : numValue
+                        );
+                      }}
+                    />
+                  )}
+                </>
+              )}
+
+              {selectedItem.type === "trigger" && (
+                <>
+                  <InputToggle
+                    inputKey="enableTrigger"
+                    label="Enable Trigger"
+                    value={selectedItem.item.isUsed}
+                    onClick={() => handleTriggerToggle(selectedItem.item.uuid)}
+                  />
+
+                  <LabledDropdown
+                    defaultOption={selectedItem.item.type || "Select Trigger Type"}
+                    options={["On-Hit", "Buffer"]}
+                    onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
+                  />
+                </>
+              )}
             </>
           )}
+
+          {selectedPath && !selectedItem && (
+            <div className="speed-control">
+              <InputWithDropDown
+                label="Path Speed"
+                value={selectedPath.path.speed.toString()}
+                onChange={(value) => handleSpeedChange(parseFloat(value))}
+              />
+            </div>
+          )}
         </div>
         <div className="footer">
           <InfoIcon />
-          By Selecting Path, you can create Object Triggers.
+          By selecting points, you can create events and triggers.
         </div>
       </div>
     </div>
   );
 };
 
-export default MachineMechanics;
+export default MachineMechanics;

app/src/components/templates/LoadingPage.tsx

@@ -7,7 +7,6 @@ interface LoadingPageProps {
 }
 
 const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
-  // Ensure progress stays within 0-100 range
   const validatedProgress = Math.min(100, Math.max(0, progress));
 
   return (

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 interface InputToggleProps {
   label: string; // Represents the toggle state (on/off)
@@ -7,23 +7,18 @@ interface InputToggleProps {
   inputKey: string;
 }
 
+// Update InputToggle.tsx to be fully controlled
 const InputToggle: React.FC<InputToggleProps> = ({
   label,
   onClick,
   value = false,
   inputKey,
 }) => {
-  const [activeValue, setActiveValue] = useState<boolean>(value);
-
+  // Remove internal state and use the value prop directly
   function handleOnClick() {
-    setActiveValue(!activeValue);
     if (onClick) onClick();
   }
 
-  useEffect(() => {
-    setActiveValue(value);
-  }, [value]);
-
   return (
     <div className="input-toggle-container">
       <label htmlFor={`toogle-input-${inputKey}`} className="label">
@@ -33,15 +28,16 @@ const InputToggle: React.FC<InputToggleProps> = ({
         <div
           className="check-box-style"
           style={{
-            left: activeValue ? "50%" : "2px",
-            background: activeValue ? "" : "var(--text-disabled)",
+            left: value ? "50%" : "2px",
+            background: value ? "" : "var(--text-disabled)",
           }}
         ></div>
         <input
           type="checkbox"
           name=""
           id={`toogle-input-${inputKey}`}
-          defaultChecked={value}
+          checked={value}
+          readOnly
         />
       </div>
     </div>

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

@@ -9,6 +9,7 @@ type InputWithDropDownProps = {
   onClick?: () => void;
   onChange: (newValue: string) => void;
   editableLabel?: boolean;
+  placeholder?: string; // New placeholder prop
 };
 
 const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
@@ -19,6 +20,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
   onClick,
   onChange,
   editableLabel = false,
+  placeholder = "Inherit", // Default empty placeholder
 }) => {
   const separatedWords = label
     .split(/(?=[A-Z])/)
@@ -38,11 +40,12 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
       )}
       <div className="input default" id={separatedWords}>
         <input
-          type="text"
-          defaultValue={value}
+          type="number"
+          // defaultValue={value}
           onChange={(e) => {
             onChange(e.target.value);
           }}
+          placeholder={placeholder} // Added placeholder prop
         />
 
         {activeOption && (
@@ -73,4 +76,4 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
   );
 };
 
-export default InputWithDropDown;
+export default InputWithDropDown;

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

@@ -1,29 +1,49 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import RegularDropDown from "./RegularDropDown";
 
 type LabledDropdownProps = {
   defaultOption: string; // Initial active option
   options: string[]; // Array of dropdown options
+  label?: string; // Customizable label text
+  onSelect?: (option: string) => void; // Callback when option is selected
+  className?: string; // Additional className for styling
+  disabled?: boolean; // Disable dropdown
+  search?: boolean; // Enable/disable search functionality
 };
 
-const LabledDropdown: React.FC<LabledDropdownProps> = ({ defaultOption, options }) => {
-  const [activeOption, setActiveOption] = useState(defaultOption); // State for active option
+const LabledDropdown: React.FC<LabledDropdownProps> = ({ 
+  defaultOption, 
+  options, 
+  label = "Type",
+  onSelect,
+  className = "",
+  search = false
+}) => {
+  const [activeOption, setActiveOption] = useState(defaultOption);
+
+  // Update active option if defaultOption changes
+  useEffect(() => {
+    setActiveOption(defaultOption);
+  }, [defaultOption]);
 
   const handleSelect = (option: string) => {
-    setActiveOption(option); // Update the active option state
+    setActiveOption(option);
+    if (onSelect) {
+      onSelect(option);
+    }
   };
 
   return (
-    <div className="value-field-container">
-      <div className="label">Type</div>
+    <div className={`value-field-container ${className}`}>
+      <div className="label">{label}</div>
       <RegularDropDown
-        header={activeOption} // Display the current active option
-        options={options} // Use the options from props
-        onSelect={handleSelect} // Handle option selection
-        search = {false}
+        header={activeOption}
+        options={options}
+        onSelect={handleSelect}
+        search={search}
       />
     </div>
   );
 };
 
-export default LabledDropdown;
+export default LabledDropdown;