updating progressbar

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;