-
-
-
-
- {products.map((product, index) => (
-
-
setSelectedProduct(product.productId, product.productName)}
- >
- handleRenameProduct(product.productId, newName)}
- />
-
- {products.length > 1 && (
-
handleRemoveProduct(product.productId)}
- >
-
- )}
-
- ))}
-
-
handleResize(e, productsContainerRef)}
- >
-
-
-
-
-
-
- {events.map((event, index) => (
-
- ))}
-
-
-
-
- Need to Compare Layout?
-
-
- Click 'Compare' to review and analyze the layout differences between them.
-
-
-
-
+ return (
+
+
Simulations
+
+
+
+
Products
+
-
- {selectedAsset &&
-
- {
- if (option === 'Add to Product') {
- handleAddEventToProduct();
- } else {
- handleRemoveEventFromProduct();
- }
- }}
+
+
+
+ {products.map((product, index) => (
+
+
+ setSelectedProduct(product.productId, product.productName)
+ }
+ >
+
+ handleRenameProduct(product.productId, newName)
+ }
+ />
+
+ {products.length > 1 && (
+
handleRemoveProduct(product.productId)}
+ >
+
+ )}
+
+ ))}
+
+
handleResize(e, productsContainerRef)}
+ >
+
+
- );
+
+
+
+ {events.map((event, index) => (
+
+ ))}
+
+
+
+
+ Need to Compare Layout?
+
+
+ Click 'Compare' to review and analyze the layout
+ differences between them.
+
+
+
+
+
+
+ {selectedAsset && (
+
+ {
+ if (option === "Add to Product") {
+ handleAddEventToProduct({
+ selectedAsset,
+ addEvent,
+ selectedProduct,
+ clearSelectedAsset,
+ });
+ } else {
+ handleRemoveEventFromProduct();
+ }
+ }}
+ />
+
+ )}
+
+ );
};
export default Simulations;
diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx
new file mode 100644
index 0000000..268ea81
--- /dev/null
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { ProductionCapacityIcon } from "../../icons/analysis";
+
+const ProductionCapacity = () => {
+ const totalBars = 6;
+ const progressPercent = 50;
+
+ const barsToFill = Math.floor((progressPercent / 100) * totalBars);
+ const partialFillPercent =
+ ((progressPercent / 100) * totalBars - barsToFill) * 100;
+
+ return (
+
+
+
+
+
Throughput Summary
+
08:00 - 09:00 AM
+
+
+
+
+
+
+ 128 Units/hour
+
+
+ {/* Progress Bar */}
+
+ {[...Array(totalBars)].map((_, i) => (
+
+ {i < barsToFill ? (
+
+ ) : i === barsToFill ? (
+
+ ) : null}
+
+ ))}
+
+
+
+
+
+ Avg. Process Time
+ 28.4 Secs/unit
+
+
+ Machine Utilization
+ 78%
+
+
+
+
+ );
+};
+
+export default ProductionCapacity;
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx
new file mode 100644
index 0000000..331eaaf
--- /dev/null
+++ b/app/src/components/ui/analysis/ROISummary.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { ROISummaryIcon } from "../../icons/analysis";
+
+const ROISummary = () => {
+ return (
+
+
+
+
+
ROI Summary
+
From 24 November, 2025
+
+
+
+
+
+
+ );
+};
+
+export default ROISummary;
diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx
new file mode 100644
index 0000000..cb4fac5
--- /dev/null
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -0,0 +1,146 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+ Chart as ChartJS,
+ LineElement,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+} from "chart.js";
+import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
+
+ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
+
+const ThroughputSummary = () => {
+ const data = {
+ labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
+ datasets: [
+ {
+ label: "Units/hour",
+ data: [100, 120, 110, 130, 125, 128, 132],
+ borderColor: "#B392F0",
+ tension: 0.4,
+ pointRadius: 0, // hide points
+ },
+ ],
+ };
+
+ const options = {
+ responsive: true,
+ scales: {
+ x: {
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ color: "#fff",
+ },
+ },
+ y: {
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ color: "#fff",
+ },
+ },
+ },
+ plugins: {
+ legend: {
+ display: false,
+ },
+ tooltip: {
+ enabled: true,
+ },
+ },
+ };
+
+ const shiftUtilization = {
+ "shift 1": 25,
+ "shift 2": 45,
+ "shift 3": 15,
+ };
+
+ return (
+
+
+
+
+
Throughput Summary
+
08:00 - 09:00 AM
+
+
+
+
+
+
+
+ 1240 Units/hour
+
+
+
+
+
+
+
+
Shift Utilization
+
+
85%
+
+
+
+
+ Shift 1
+
+
+ Shift 2
+
+
+ Shift 3
+
+
+
+
+
+
+
+ );
+};
+
+export default ThroughputSummary;
diff --git a/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx b/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx
index 3e14517..53e03ce 100644
--- a/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx
+++ b/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx
@@ -1,41 +1,72 @@
import React, { useState } from "react";
-import LabledDropdown from "./LabledDropdown";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
+import LabledDropdown from "./LabledDropdown";
-const PreviewSelectionWithUpload: React.FC = () => {
- const [showPreview, setSetshowPreview] = useState(false);
+interface PreviewSelectionWithUploadProps {
+ preview?: boolean;
+ upload?: boolean;
+ label?: string;
+ onSelect: (option: string) => void;
+ defaultOption: string;
+ options: string[];
+}
+
+const PreviewSelectionWithUpload: React.FC
= ({
+ preview = false,
+ upload = false,
+ onSelect,
+ label,
+ defaultOption,
+ options,
+}) => {
+ const [showPreview, setShowPreview] = useState(false);
return (
-
setSetshowPreview(!showPreview)}
- >
-
Preview
-
-
- {showPreview && (
-
-
+ {preview && (
+ <>
+
setShowPreview(!showPreview)}
+ >
+ Preview
+
+
+ {showPreview && (
+
+ )}
+
+ )}
+ {upload && (
+
+
+
Upload Product
+
+
+ Upload here
+
+
)}
-
-
-
Upload Product
-
-
- Upload here
-
-
-
+
);
};
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index ac21c5a..06419af 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -10,7 +10,7 @@ import {
ArrowIcon,
EyeIcon,
LockIcon,
- RmoveIcon,
+ RemoveIcon,
} from "../../icons/ExportCommonIcons";
import { useThree } from "@react-three/fiber";
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
@@ -181,7 +181,7 @@ const List: React.FC
= ({ items = [], remove }) => {
-
)}
{item.assets && item.assets.length > 0 && (
@@ -218,7 +218,7 @@ const List: React.FC = ({ items = [], remove }) => {