first commit

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

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { AIIcon } from "../../../icons/ExportCommonIcons";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { AnalysisPresetsType } from "../../../../types/analysis";
+import RenderAnalysisInputs from "./RenderAnalysisInputs";
+import { useInputValues } from "../../../../store/builder/store";
+
+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: "Cycle time", activeOption: "s" } },
+      // { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
+      // { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
+    ],
+    "Production capacity": [
+      { type: "range", inputs: { label: "Shift length", activeOption: "hr" } },
+      { type: "default", inputs: { label: "Shifts / day", activeOption: "unit" } },
+      { type: "default", inputs: { label: "Working days / year", activeOption: "days" } },
+      { type: "default", inputs: { label: "Yield rate", activeOption: "%" } },
+    ],
+    ROI: [
+      {
+        type: "default",
+        inputs: { label: "Selling price", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Material cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Labor Cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Maintenance cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Electricity cost", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Fixed costs", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Initial Investment", activeOption: "INR" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Salvage value", activeOption: "Hrs" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Production period", activeOption: "yrs" },
+      },
+      {
+        type: "default",
+        inputs: { label: "Tax rate", activeOption: "%" },
+      },
+    ],
+  };
+
+  const { inputValues, setInputValues, updateInputValue } = useInputValues();
+
+  return (
+    <div className="analysis-main-wrapper">
+      <div className="analysis-main-container">
+        <div className="header">Object</div>
+        <div className="generate-report-button">
+          <AIIcon /> Generate Report
+        </div>
+        <div className="analysis-content-container section">
+          <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]
+            }
+            inputValues={inputValues}
+            onInputChange={(label, value) => {
+              updateInputValue(label, value);
+            }}
+          />
+          <div className="buttons-container">
+            <input type="button" value={"Clear"} className="cancel" onClick={() => setInputValues({})} />
+            <input type="button" value={"Update"} className="submit" onClick={() => setInputValues(inputValues)} />
+          </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={"Create"} className="submit" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Analysis;

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

@@ -0,0 +1,45 @@
+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];
+  inputValues: Record<string, string>; // <-- Add this line
+  onInputChange: (label: string, value: string) => void;
+}
+
+const RenderAnalysisInputs: React.FC<InputRendererProps> = ({ keyName, presets,inputValues, onInputChange }) => {
+  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={inputValues[preset.inputs.label] || ""}
+              activeOption={preset.inputs.activeOption}
+              onChange={(newValue) => onInputChange(preset.inputs.label, newValue)}
+            />
+          );
+        }
+        if (preset.type === "range") {
+          return (
+            <InputRange
+              key={index}
+              label={preset.inputs.label}
+              min={0}
+              max={8}
+              value={5}
+            />
+          );
+        }
+        return null;
+      })}
+    </div>
+  );
+};
+
+export default RenderAnalysisInputs;