feat: add ComparisonResult and EnergyUsage components with performance metrics and energy usage charts

app/src/components/ui/compareVersion/Compare.tsx

@@ -70,6 +70,7 @@ const ComparePopUp: React.FC<ComparePopUpProps> = ({ onClose }) => {
           <InfoIcon /> Save this version and proceed.
         </div>
       </div>
+
     </div>
   );
 };

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -20,7 +20,7 @@ interface CompareLayoutProps {
 
 const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
   const { products } = useProductStore();
-  console.log('products: ', products);
+  console.log("products: ", products);
   const [width, setWidth] = useState("50vw");
   const [isResizing, setIsResizing] = useState(false);
   const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);

app/src/components/ui/compareVersion/ComparisonResult.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import PerformanceResult from "./result-card/PerformanceResult";
+import EnergyUsage from "./result-card/EnergyUsage";
+
+const ComparisonResult = () => {
+  return (
+    <div className="compare-result-container">
+      <div className="header">Performance Comparison</div>
+      <div className="compare-result-wrapper">
+        <EnergyUsage />
+        <div className="throughPutCard-container comparisionCard">
+          <h4>Throughput (units/hr)</h4>
+          <div className="layers-wrapper">
+            <div className="layer-wrapper">
+              <div className="key">Layout 1</div>
+              <div className="value">500/ hr</div>
+            </div>
+            <div className="layer-wrapper">
+              <div className="key">Layout 2</div>
+              <div className="value">550/ hr</div>
+            </div>
+          </div>
+          <div className="chart"></div>
+        </div>
+        <div className="cycle-time-container comparisionCard">
+          <div className="cycle-main">
+            <div className="cycle-header">Cycle Time</div>
+            <div className="layers-wrapper">
+              <div className="layers">
+                <div className="layer-name">Layout 1</div>
+                <div className="layer-time">120 Sec</div>
+                <div className="layer-profit">
+                  <span>↑</span>19.6%
+                </div>
+              </div>
+              <div className="layers">
+                <div className="layer-name">Layout 2</div>
+                <div className="layer-time">110 Sec</div>
+                <div className="layer-profit">
+                  <span>↑</span>19.6%1.6%
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="overallDowntime-container comparisionCard">
+          <div className="overallDowntime-header">Overall Downtime</div>
+          <div className="totalDownTime">
+            <div className="totalDownTime-right">
+              <div className="totalDownTime-label">Total down time</div>
+              <div className="totalDownTime-subLabel">(Simulation 1)</div>
+            </div>
+            <div className="totalDownTime-left">
+              <div className="value">17</div>
+              <div className="key">mins</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="overallScrapRate comparisionCard">
+          <div className="overallScrapRate-header">Overall Scrap Rate</div>
+          <div className="overallScrapRate-value">
+            <div className="overallScrapRate-label">Layout 1</div>
+            <div className="overallScrapRate-key">Total scrap produced by</div>
+            <div className="overallScrapRate-value">2.7 ton</div>
+          </div>
+        </div>
+        <PerformanceResult />
+      </div>
+    </div>
+  );
+};
+
+export default ComparisonResult;

app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend
+);
+
+const EnergyUsage = () => {
+  const data = {
+    labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+    datasets: [
+      {
+        label: "Simulation 1",
+        data: [400, 600, 450, 1000, 1000],
+        borderColor: "#6a0dad",
+        fill: false,
+        tension: 0.5, // More curved line
+        pointRadius: 0, // Remove point indicators
+      },
+      {
+        label: "Simulation 2",
+        data: [300, 500, 700, 950, 1100],
+        borderColor: "#b19cd9",
+        fill: false,
+        tension: 0.5,
+        pointRadius: 0,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false, // Hide legend
+      },
+      tooltip: {
+        enabled: false, // Hide tooltips
+      },
+    },
+    scales: {
+      x: {
+        display: false, // Hide x-axis
+        grid: {
+          display: false,
+        },
+      },
+      y: {
+        display: false, // Hide y-axis
+        grid: {
+          display: false,
+        },
+      },
+    },
+  };
+
+  return (
+    <div className="comparisionCard energy-usage">
+      <div className="energy-usage-wrapper">
+        <h4>Energy Usage</h4>
+        <p className="value">
+          2500 <span>kWh</span>
+        </p>
+      </div>
+
+      <div className="simulation-details">
+        <div className="simulation-wrapper sim-1">
+          <div className="icon"></div>
+          <div className="simulation-details-wrapper">
+            <div className="label">Simulation 1</div>
+            <div className="value">98%</div>
+          </div>
+        </div>
+        <div className="simulation-wrapper sim-2">
+          <div className="icon"></div>
+          <div className="simulation-details-wrapper">
+            <div className="label">Simulation 2</div>
+            <div className="value">97%</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="chart">
+        <Line data={data} options={options} />
+      </div>
+    </div>
+  );
+};
+
+export default EnergyUsage;

app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  GreenTickIcon,
+  PerformanceIcon,
+  TickIcon,
+} from "../../../icons/ExportCommonIcons";
+
+const PerformanceResult = () => {
+  return (
+    <div className="performanceResult-wrapper comparisionCard">
+      <div className="header">
+        <div className="icon">
+          <PerformanceIcon />
+        </div>
+        <div className="head">Performance result</div>
+      </div>
+
+      <div className="metrics-container">
+        <div className="metrics-left">
+          <div className="metric">
+            <div className="metric-label">
+              Success rate{" "}
+              <span>
+                <GreenTickIcon />
+              </span>
+            </div>
+            <div className="metric-value">98%</div>
+          </div>
+          <div className="label">Environmental impact</div>
+        </div>
+
+        <div className="metrics-right">
+          <div className="metric-wrapper">
+            <div className="metric-label">Waste generation</div>
+            <div className="metric">
+              <div className="metric-icon">I</div>
+              <div className="metric-value">0.5%</div>
+            </div>
+          </div>
+
+          <div className="metric-wrapper">
+            <div className="metric-label">Risk 
management</div>
+            <div className="metric">
+              <div className="metric-icon">I</div>
+              <div className="metric-value">0.1%</div>
+            </div>
+          </div>
+
+          <div className="metric-wrapper">
+            <div className="metric">
+              <div className="metric-icon">I</div>
+              <div className="metric-value">0.5%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="simulation-tag">Simulation 1</div>
+    </div>
+  );
+};
+
+export default PerformanceResult;