old dwinzo files updated

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

@@ -9,6 +9,9 @@ import {
 import useToggleStore from "../../../store/useUIToggleStore";
 import MachineMechanics from "./mechanics/MachineMechanics";
 import Visualization from "./visualization/Visualization";
+import GlobalProperties from "./properties/GlobalProperties";
+import AsstePropertiies from "./properties/AssetProperties";
+import Analysis from "./analysis/Analysis";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
@@ -56,12 +59,36 @@ const SideBarRight: React.FC = () => {
         </div>
       )}
       {/* process builder */}
-      {toggleUI && activeModule === "simulation" && (
-        <div className="sidebar-right-container">
-          <div className="sidebar-right-content-container">
-            <MachineMechanics />
+      {toggleUI &&
+        activeList === "properties" &&
+        activeModule !== "visualization" && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              <GlobalProperties />
+              {/* <AsstePropertiies /> */}
+            </div>
           </div>
-        </div>
+        )}
+
+      {/* simulation */}
+
+      {toggleUI && activeModule === "simulation" && (
+        <>
+          {activeList === "mechanics" && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <MachineMechanics />
+              </div>
+            </div>
+          )}
+          {activeList === "analysis" && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <Analysis />
+              </div>
+            </div>
+          )}
+        </>
       )}
 
       {/* realtime visualization */}

app/src/components/layout/sidebarRight/analysis/Analysis.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { AnalysisPresetsType } from "../../../../types/analysis";
+import RenderAnalysisInputs from "./RenderAnalysisInputs";
+
+const Analysis: React.FC = () => {
+  const [selectedOption, setSelectedOption] = useState("Throughput time");
+
+  const handleSelect = (option: string) => {
+    setSelectedOption(option); // Normalize for key matching
+  };
+
+  const AnalysisPresets: AnalysisPresetsType = {
+    "Throughput time": [
+      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
+      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
+      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
+      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
+      {
+        type: "default",
+        inputs: { label: "Raw Material", activeOption: "mm" },
+      },
+      {
+        type: "range",
+        inputs: { label: "Material flow", activeOption: "m/min" },
+      },
+    ],
+    "Production capacity": [
+      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
+      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
+      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
+      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
+      {
+        type: "default",
+        inputs: { label: "Raw Material", activeOption: "mm" },
+      },
+      {
+        type: "range",
+        inputs: { label: "Material flow", activeOption: "m/min" },
+      },
+      {
+        type: "range",
+        inputs: { label: "Shift 1", activeOption: "hr(s)" },
+      },
+      {
+        type: "range",
+        inputs: { label: "Shift 2", activeOption: "hr(s)" },
+      },
+      {
+        type: "range",
+        inputs: { label: "Over time", activeOption: "hr(s)" },
+      },
+    ],
+    ROI: [
+      {
+        type: "default",
+        inputs: { label: "Equipment Cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Employee Salary", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Labor Cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Cost per unit", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Electricity cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Upkeep Cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Working Hours", activeOption: "Hrs" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Power Usage", activeOption: "KWH" },
+      },
+      { type: "default", inputs: { label: "KWH", activeOption: "Mos" } },
+      {
+        type: "default",
+        inputs: { label: "Man Power", activeOption: "Person" },
+      },
+    ],
+  };
+
+  return (
+    <div className="analysis-main-wrapper">
+      <div className="analysis-main-container">
+        <div className="header">Object</div>
+        <div className="generate-report-button">
+          <AI_Icon /> Generate Report
+        </div>
+        <div className="analysis-content-container">
+          <div className="dropdown-header-container">
+            <div className="value">Create Analysis</div>
+          </div>
+          <div className="dropdown-content-container">
+            <RegularDropDown
+              header={selectedOption}
+              options={["Throughput time", "Production capacity", "ROI"]}
+              onSelect={handleSelect}
+              search={false}
+            />
+          </div>
+          {/* Render only the selected option */}
+          <RenderAnalysisInputs
+            keyName={selectedOption}
+            presets={
+              AnalysisPresets[selectedOption as keyof AnalysisPresetsType]
+            }
+          />
+          <div className="buttons-container">
+            <input type="button" value={"Clear"} className="cancel" />
+            <input type="button" value={"Calculate"} className="submit" />
+          </div>
+          <div className="create-custom-analysis-container">
+            <div className="custom-analysis-header">Create Custom Analysis</div>
+            <div className="content">
+              Click <span>'Create'</span> to enhances decision-making by
+              providing actionable insights, optimizing operations that adapts
+              to the unique challenges.
+            </div>
+            <div className="input">
+              <input type="button" value={"Calculate"} className="submit" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Analysis;

app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import InputRange from "../../../ui/inputs/InputRange";
+import { AnalysisPresetsType } from "../../../../types/analysis";
+
+interface InputRendererProps {
+  keyName: string;
+  presets: AnalysisPresetsType[keyof AnalysisPresetsType];
+}
+
+const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
+  keyName,
+  presets,
+}) => {
+  return (
+    <div key={`main-${keyName}`} className="analysis-inputs">
+      {presets.map((preset, index) => {
+        if (preset.type === "default") {
+          return (
+            <InputWithDropDown
+              key={index}
+              label={preset.inputs.label}
+              value=""
+              activeOption={preset.inputs.activeOption}
+              onChange={() => {}}
+            />
+          );
+        }
+        if (preset.type === "range") {
+          return <InputRange key={index} label={preset.inputs.label} />;
+        }
+        return null;
+      })}
+    </div>
+  );
+};
+
+export default RenderAnalysisInputs;

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

@@ -0,0 +1,41 @@
+import React from "react";
+
+interface PositionInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+}
+
+const PositionInput: React.FC<PositionInputProps> = ({
+  onChange,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">Position</div>
+      <div className="inputs-container">
+        <div className="input-container">
+          <div className="custom-input-label">X : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+        <div className="input-container">
+          <div className="custom-input-label">Y : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PositionInput;

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

@@ -0,0 +1,32 @@
+import React from "react";
+
+interface RotationInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+}
+
+const RotationInput: React.FC<RotationInputProps> = ({
+  onChange,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">Rotation</div>
+      <div className="inputs-container"  style={{display: "block"}}>
+        <div className="input-container">
+          <div className="custom-input-label">Rotate : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RotationInput;

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

@@ -10,6 +10,7 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import RegularDropDown from "../../../ui/inputs/RegularDropDown";
 import { handleResize } from "../../../../functions/handleResizePannel";
+import EyeDropInput from "../../../ui/inputs/EyeDropInput";
 
 const MachineMechanics: React.FC = () => {
   const [actionList, setActionList] = useState<string[]>([]);
@@ -54,16 +55,30 @@ const MachineMechanics: React.FC = () => {
     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
+  };
+
   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={() => {}}
+          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">
@@ -168,7 +183,13 @@ const MachineMechanics: React.FC = () => {
                 defaultOption="On-hit"
                 options={["On-hit", "Buffer"]}
               />
-              <InputWithDropDown label="Speed" value="" activeOption=".mm" />
+              <InputWithDropDown
+                label="Speed"
+                value=""
+                activeOption=".mm"
+                onChange={() => {}}
+              />
+              <EyeDropInput />
             </>
           )}
         </div>

app/src/components/layout/sidebarRight/properties/AssetProperties.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import InputToggle from "../../../ui/inputs/InputToggle";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import { RemoveIcon } from "../../../icons/ExportCommonIcons";
+import PositionInput from "../customInput/PositionInputs";
+import RotationInput from "../customInput/RotationInput";
+
+interface UserData {
+  id: number; // Unique identifier for the user data
+  label: string; // Label of the user data field
+  value: string; // Value of the user data field
+}
+
+const AssetProperties: React.FC = () => {
+  const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
+  const [nextId, setNextId] = useState(1); // Unique ID for new entries
+
+  // Function to handle adding new user data
+  const handleAddUserData = () => {
+    const newUserData: UserData = {
+      id: nextId,
+      label: `Property ${nextId}`,
+      value: "",
+    };
+    setUserData([...userData, newUserData]);
+    setNextId(nextId + 1); // Increment the ID for the next entry
+  };
+
+  // Function to update the value of a user data entry
+  const handleUserDataChange = (id: number, newValue: string) => {
+    setUserData((prevUserData) =>
+      prevUserData.map((data) =>
+        data.id === id ? { ...data, value: newValue } : data
+      )
+    );
+  };
+
+  // Remove user data
+  const handleRemoveUserData = (id: number) => {
+    setUserData((prevUserData) =>
+      prevUserData.filter((data) => data.id !== id)
+    );
+  };
+
+  return (
+    <div className="asset-properties-container">
+      <div className="header">Selected Object</div>
+
+      <div className="split"></div>
+
+      <PositionInput onChange={() => {}} />
+      <RotationInput onChange={() => {}} />
+
+      <div className="split"></div>
+
+      <InputToggle inputKey="visible" label="Visible" />
+      <InputToggle inputKey="frustumCull" label="Frustum cull" />
+
+      <div className="header">User Data</div>
+
+      {/* Map through userData and render InputWithDropDown for each entry */}
+      {userData.map((data) => (
+        <div className="input-container">
+          <InputWithDropDown
+            key={data.id}
+            label={data.label}
+            value={data.value}
+            editableLabel
+            onChange={(newValue) => handleUserDataChange(data.id, newValue)} // Pass the change handler
+          />
+          <div
+            className="remove-button"
+            onClick={() => handleRemoveUserData(data.id)}
+          >
+            <RemoveIcon />
+          </div>
+        </div>
+      ))}
+
+      {/* Add new user data */}
+      <div className="optimize-button" onClick={handleAddUserData}>
+        + Add
+      </div>
+    </div>
+  );
+};
+
+export default AssetProperties;

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import InputRange from "../../../ui/inputs/InputRange";
+import InputToggle from "../../../ui/inputs/InputToggle";
+import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import LabeledButton from "../../../ui/inputs/LabledButton";
+
+const GlobalProperties: React.FC = () => {
+  const [limitDistance, setLimitDistance] = useState(false);
+  const [distance, setDistance] = useState<number>(5);
+
+  const [limitGridDistance, setLimitGridDistance] = useState(false);
+  const [gridDistance, setGridDistance] = useState<number>(5);
+
+  function optimizeScene() {
+    setLimitDistance(true);
+    setDistance(5);
+  }
+
+  function updateDistance(value: number) {
+    setDistance(value);
+  }
+
+  function updateGridDistance(value: number) {
+    setGridDistance(value);
+  }
+
+  return (
+    <div className="global-properties-container">
+      <div className="header">Environment</div>
+      <div className="optimize-button" onClick={optimizeScene}>
+        <AI_Icon />
+        Optimize
+      </div>
+
+      <div className="split"></div>
+
+      <InputToggle inputKey="1" label="Roof Visibility" />
+      <InputToggle inputKey="2" label="Wall Visibility" />
+      <InputToggle inputKey="3" label="Shadows Visibility" />
+      <LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>
+
+      <div className="split"></div>
+
+      <InputToggle
+        inputKey="4"
+        label="Limit Render Distance"
+        value={limitDistance}
+        onClick={() => {
+          setLimitDistance(!limitDistance);
+        }}
+      />
+      <InputRange
+        label="Distance"
+        disabled={!limitDistance}
+        value={distance}
+        key={"5"}
+        onChange={(value: number) => updateDistance(value)}
+      />
+
+      <div className="split"></div>
+
+      <InputToggle
+        inputKey="6"
+        label="Display Grid"
+        value={limitGridDistance}
+        onClick={() => {
+          setLimitGridDistance(!limitGridDistance);
+        }}
+      />
+      <InputRange
+        label="Tile Distance"
+        disabled={!limitGridDistance}
+        value={gridDistance}
+        key={"7"}
+        onChange={(value: number) => updateGridDistance(value)}
+      />
+    </div>
+  );
+};
+
+export default GlobalProperties;

app/src/components/layout/sidebarRight/properties/Properties.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-const GlobalProperties: React.FC = () => {
-  return (
-    <div>GlobalProperties</div>
-  );
-};
-
-export default GlobalProperties;