updating progressbar

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 (
+    <div className="productionCapacity-container analysis-card">
+      <div className="productionCapacity-wrapper analysis-card-wrapper">
+        <div className="card-header">
+          <div className="header">
+            <div className="main-header">Throughput Summary</div>
+            <div className="sub-header">08:00 - 09:00 AM</div>
+          </div>
+          <div className="icon-wrapper">
+            <ProductionCapacityIcon />
+          </div>
+        </div>
+
+        <div className="process-container">
+          <div className="throughput-value">
+            <span className="value">128</span> Units/hour
+          </div>
+
+          {/* Progress Bar */}
+          <div className="progress-bar-wrapper">
+            {[...Array(totalBars)].map((_, i) => (
+              <div className="progress-bar" key={i}>
+                {i < barsToFill ? (
+                  <div className="bar-fill full" />
+                ) : i === barsToFill ? (
+                  <div
+                    className="bar-fill partial"
+                    style={{ width: `${partialFillPercent}%` }}
+                  />
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="metrics-section">
+          <div className="metric">
+            <span className="label">Avg. Process Time</span>
+            <span className="value">28.4 Secs/unit</span>
+          </div>
+          <div className="metric">
+            <span className="label">Machine Utilization</span>
+            <span className="value">78%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductionCapacity;

app/src/components/ui/analysis/ROISummary.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import { ROISummaryIcon } from "../../icons/analysis";
+import SemiCircleProgress from "./SemiCircleProgress";
+
+const ROISummary = () => {
+  // Data for the cost breakdown as an array of objects
+  const costBreakdownData = [
+    {
+      item: "Raw Material A",
+      unitCost: "₹ 10/unit",
+      laborCost: "₹ 0",
+      totalCost: "₹ 1000",
+      sellingPrice: "₹ 1500",
+    },
+    {
+      item: "Labor",
+      unitCost: "₹ 10/unit",
+      laborCost: "₹ 500",
+      totalCost: "₹ 500",
+      sellingPrice: "N/A",
+    },
+    {
+      item: "Product 1",
+      unitCost: "₹ 10/unit",
+      laborCost: "₹ 200",
+      totalCost: "₹ 200",
+      sellingPrice: "₹ 2000",
+    },
+    {
+      item: "Machine",
+      unitCost: "-",
+      laborCost: "-",
+      totalCost: "₹ 20,000",
+      sellingPrice: "N/A",
+    },
+    {
+      item: "Total",
+      unitCost: "-",
+      laborCost: "-",
+      totalCost: "₹ 1,20,000",
+      sellingPrice: "-",
+    },
+    {
+      item: "Net Profit",
+      unitCost: "-",
+      laborCost: "-",
+      totalCost: "₹ 1,60,000",
+      sellingPrice: "-",
+    },
+  ];
+  const progressValue = 50;
+  return (
+    <div className="roiSummary-container analysis-card">
+      <div className="roiSummary-wrapper analysis-card-wrapper">
+        <div className="card-header">
+          <div className="header">
+            <div className="main-header">ROI Summary</div>
+            <div className="sub-header">From 24 November, 2025</div>
+          </div>
+          <div className="icon-wrapper">
+            <ROISummaryIcon />
+          </div>
+        </div>
+        <div className="product-info">
+          <div className="product-label">Product :</div>
+          <div className="product-name">Product name</div>
+        </div>
+        <div className="playBack">
+          <div className="icon"></div>
+          <div className="info">
+            <span>+133%</span> ROI with payback in just <span>50.3</span> months
+          </div>
+        </div>
+        <div className="roi-details">
+          <SemiCircleProgress />
+
+          <div className="metrics">
+            <div className="metric-wrapper">
+              <div className="metric-item">
+                <span className="metric-label">Total Cost Incurred</span>
+                <span className="metric-value">₹ 1,20,000</span>
+              </div>
+              <div className="metric-item">
+                <span className="metric-label">Revenue Generated</span>
+                <span className="metric-value">₹ 2,80,000</span>
+              </div>
+            </div>
+            <div className="metric-item net-profit">
+              <span className="metric-label">Net Profit</span>
+              <span className="metric-value">₹ 1,60,000</span>
+            </div>
+          </div>
+        </div>
+        <div className="cost-breakdown">
+          <div className="breakdown-header">
+            <span className="section-number">①</span>
+            <span className="section-title">Cost Breakdown</span>
+            <span className="expand-icon">⌵</span>
+          </div>
+          <table className="breakdown-table">
+            <thead>
+              <tr>
+                <th>Item</th>
+                <th>Unit Cost</th>
+                <th>Labor Cost</th>
+                <th>Total Cost</th>
+                <th>Selling Price</th>
+              </tr>
+            </thead>
+            <tbody>
+              {costBreakdownData.map((row, index) => (
+                <tr
+                  key={index}
+                  className={
+                    row.item === "Total"
+                      ? "total-row"
+                      : row.item === "Net Profit"
+                      ? "net-profit-row"
+                      : ""
+                  }
+                >
+                  <td>{row.item}</td>
+                  <td>{row.unitCost}</td>
+                  <td>{row.laborCost}</td>
+                  <td>{row.totalCost}</td>
+                  <td>{row.sellingPrice}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="tips-section">
+          <div className="tip-header">
+            <span className="lightbulb-icon">💡</span>
+            <span className="tip-title">How to improve ROI?</span>
+          </div>
+          <div className="tip-description">
+            Increase CNC utilization by <span className="highlight">10%</span>{" "}
+            to shave <span className="highlight">0.5</span> months of payback
+            period
+          </div>
+          <button className="get-tips-button">
+            <div className="btn">Get ROI Boost Tips</div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ROISummary;

app/src/components/ui/analysis/SemiCircleProgress.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const SemiCircleProgress = () => {
+  const progress = 10;
+  const clampedProgress = Math.min(Math.max(progress, 0), 100); // clamp 0-100
+  return (
+    <div className="semi-circle-wrapper">
+      <div
+        className="semi-circle"
+        style={{
+          background: `conic-gradient(
+            from 180deg, 
+            skyblue 0% ${clampedProgress / 2}%, 
+            lightgray ${clampedProgress / 2}% 50%
+          )`,
+        }}
+      >
+        <div className="progress-cover"></div>
+      </div>
+      <div className="label">{clampedProgress}%</div>
+    </div>
+  );
+};
+
+export default SemiCircleProgress;

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 (
+    <div className="throughoutSummary analysis-card">
+      <div className="throughoutSummary-wrapper analysis-card-wrapper">
+        <div className="card-header">
+          <div className="header">
+            <div className="main-header">Throughput Summary</div>
+            <div className="sub-header">08:00 - 09:00 AM</div>
+          </div>
+          <div className="icon-wrapper">
+            <ThroughputSummaryIcon />
+          </div>
+        </div>
+
+        <div className="process-container">
+          <div className="throughput-value">
+            <span className="value">1240</span> Units/hour
+          </div>
+          <div className="lineChart">
+            <div className="assetUsage">
+              <div className="key">Asset usage</div>
+              <div className="value">85%</div>
+            </div>
+            <Line data={data} options={options} />
+          </div>
+        </div>
+
+        <div className="footer">
+          <div className="energyConsumption footer-card">
+            <div className="header">Energy Consumption</div>
+            <div className="value-container">
+              <div className="energy-icon">
+                <PowerIcon />
+              </div>
+              <div className="value-wrapper">
+                <div className="value">456</div>
+                <div className="unit">KWH</div>
+              </div>
+            </div>
+          </div>
+          <div className="shiftUtilization footer-card">
+            <div className="header">Shift Utilization</div>
+            <div className="value-container">
+              <div className="value">85%</div>
+
+              <div className="progress-wrapper">
+                <div
+                  className="progress shift-1"
+                  style={{ width: "30%" }}
+                ></div>
+                <div
+                  className="progress shift-2"
+                  style={{ width: "40%" }}
+                ></div>
+                <div
+                  className="progress shift-3"
+                  style={{ width: "30%" }}
+                ></div>
+              </div>
+              <div className="progress-indicator">
+                <div className="shift-wrapper">
+                  <span className="indicator shift-1"></span>
+                  <label>Shift 1</label>
+                </div>
+                <div className="shift-wrapper">
+                  <span className="indicator shift-2"></span>
+                  <label>Shift 2</label>
+                </div>
+                <div className="shift-wrapper">
+                  <span className="indicator shift-3"></span>
+                  <label>Shift 3</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ThroughputSummary;