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

import React, { useEffect, useState } from "react";
import {
  CostBreakDownIcon,
  LightBulpIcon,
  ROISummaryIcon,
  ROISummaryProductName,
  SonarCrownIcon,
} from "../../icons/analysis";
import SemiCircleProgress from "./SemiCircleProgress";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
import SkeletonUI from "../../templates/SkeletonUI";
import { useROISummaryData } from "../../../store/builder/store";
import { set } from "immer/dist/internal";

const ROISummary = ({
  roiSummaryData = {
    productName: "Product 1",
    roiPercentage: 133,
    paybackPeriod: 53,
    totalCost: "1,20,000",
    revenueGenerated: "2,80,000",
    netProfit: "1,60,000",
    netLoss: null,
    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);
  };

  function getCurrentDate() {
    const now = new Date();
    const day = now.getDate().toString().padStart(2, "0");
    const month = now.toLocaleString("en-GB", { month: "long" });
    const year = now.getFullYear();
    return `${day} ${month}, ${year}`;
  }
  const [isLoading, setIsLoading] = useState(false);
  const { roiSummary } = useROISummaryData();

  useEffect(() => {
    if (roiSummary && typeof roiSummary === "object") {
      setIsLoading(false); // Data loaded
    } else {
      setIsLoading(true); // Show skeleton while loading
    }
  }, [roiSummary]);

  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 {getCurrentDate()}</div>
          </div>
          <div className="icon-wrapper">
            <ROISummaryIcon />
          </div>
        </div>
        {!isLoading ? (
          <>
            <div className="product-info">
              <ROISummaryProductName />
              <div className="product-label">Product :</div>
              <div className="product-name">{roiSummary.productName}</div>
            </div>
            <div className="playBack">
              <SonarCrownIcon />
              <div className="icon"></div>
              <div className="info">
                <span>  {roiSummary.roiPercentage}%</span> ROI with payback
                in just <span>{roiSummary.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">
                      <span>₹</span>
                      {roiSummary.totalCost}
                    </span>
                  </div>
                  <div className="metric-item">
                    <span className="metric-label">Revenue Generated</span>
                    <span className="metric-value">
                      <span>₹</span>

                      {roiSummary.revenueGenerated}
                    </span>
                  </div>
                </div>
                <div
                  className={`metric-item net-profit ${roiSummary.netProfit > 0 ? "profit" : "loss"}`}
                >
                  <div className="metric-label">
                    <span>↑</span>
                    Net Profit
                  </div>
                  <div className="metric-value">
                    <span>₹</span>
                    {roiSummary.netProfit > 0
                      ? roiSummary.netProfit
                      : roiSummary.netLoss}
                  </div>
                </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> */}
          </>
        ) : (
          <SkeletonUI type={"default"} />
          // <div> No Data</div>
        )}
      </div>
    </div>
  );
};

export default ROISummary;