Added Loading Screen, Integerated events ui

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;