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

125 lines
4.5 KiB
TypeScript

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: "default", 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;