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

import React, { useState } from "react";
import {
  CostBreakDownIcon,
  LightBulpIcon,
  ROISummaryIcon,
  ROISummaryProductName,
  SonarCrownIcon,
} from "../../icons/analysis";
import SemiCircleProgress from "./SemiCircleProgress";
import { ArrowIcon } from "../../icons/ExportCommonIcons";

const ROISummary = ({
  roiSummaryData = {
    productName: "Product name",
    roiPercentage: 133,
    paybackPeriod: 50.3,
    totalCost: "₹ 1,20,000",
    revenueGenerated: "₹ 2,80,000",
    netProfit: "₹ 1,60,000",
    costBreakdown: [
      {
        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 [isTableOpen, setIsTableOpen] = useState(false); // State to handle the table open/close

  // Function to toggle the breakdown table visibility
  const toggleTable = () => {
    setIsTableOpen(!isTableOpen);
  };

  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">
          <ROISummaryProductName />
          <div className="product-label">Product :</div>
          <div className="product-name">{roiSummaryData.productName}</div>
        </div>
        <div className="playBack">
          <SonarCrownIcon />
          <div className="icon"></div>
          <div className="info">
            <span>+{roiSummaryData.roiPercentage}%</span> ROI with payback in
            just <span>{roiSummaryData.paybackPeriod}</span> months
          </div>
        </div>
        <div className="roi-details">
          <div className="progress-wrapper">
            <SemiCircleProgress />
            <div className="content">
              you're on track to hit it by
              <div className="key">July 2029</div>
            </div>
          </div>
          <div className="metrics">
            <div className="metric-wrapper">
              <div className="metric-item">
                <span className="metric-label">Total Cost Incurred</span>
                <span className="metric-value">{roiSummaryData.totalCost}</span>
              </div>
              <div className="metric-item">
                <span className="metric-label">Revenue Generated</span>
                <span className="metric-value">
                  {roiSummaryData.revenueGenerated}
                </span>
              </div>
            </div>
            <div className="metric-item net-profit">
              <span className="metric-label">
                <span>↑</span> Net Profit
              </span>
              <span className="metric-value">{roiSummaryData.netProfit}</span>
            </div>
          </div>
        </div>
        <div className="cost-breakdown">
          <div className="breakdown-header" onClick={toggleTable}>
            <div className="section-wrapper">
              <CostBreakDownIcon />
              <span className="section-title">Cost Breakdown</span>
            </div>

            <span className={`expand-icon ${isTableOpen ? "open" : ""}`}>
              <ArrowIcon />
            </span>
          </div>
          <div
            className={`breakdown-table-wrapper ${
              isTableOpen ? "open" : "closed"
            }`}
            style={{
              transition: "max-height 0.3s ease-in-out",
              overflow: "hidden",
            }}
          >
            <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>
                {roiSummaryData.costBreakdown.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>
        <div className="tips-section">
          <div className="tip-header">
            <span className="lightbulb-icon">
              <LightBulpIcon />
            </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 className="placeHolder-wrapper">
              <div className="placeHolder"></div>
              <div className="placeHolder"></div>
            </div>
          </div>
          <button className="get-tips-button">
            <div className="btn">Get ROI Boost Tips</div>
          </button>
        </div>
      </div>
    </div>
  );
};

export default ROISummary;