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

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;