Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated simulation player

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-29 17:54:36 +05:30
parent cc44826f66 dd853a66d4
commit 38161fb733
100 changed files with 5726 additions and 1665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
app/src/components/ui/analysis/ROISummary.tsx
View File

@@ -1,54 +1,68 @@
import React from "react";
import React, { useState } 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;
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">
@@ -63,71 +77,94 @@ const ROISummary = () => {
</div>
<div className="product-info">
<div className="product-label">Product :</div>
<div className="product-name">Product name</div>
<div className="product-name">{roiSummaryData.productName}</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
<span>+{roiSummaryData.roiPercentage}%</span> ROI with payback in
just <span>{roiSummaryData.paybackPeriod}</span> months
</div>
</div>
<div className="roi-details">
<SemiCircleProgress />
<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">₹ 1,20,000</span>
<span className="metric-value">{roiSummaryData.totalCost}</span>
</div>
<div className="metric-item">
<span className="metric-label">Revenue Generated</span>
<span className="metric-value">₹ 2,80,000</span>
<span className="metric-value">
{roiSummaryData.revenueGenerated}
</span>
</div>
</div>
<div className="metric-item net-profit">
<span className="metric-label">Net Profit</span>
<span className="metric-value">₹ 1,60,000</span>
<span className="metric-value">{roiSummaryData.netProfit}</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 className="breakdown-header" onClick={toggleTable}>
<div className="section-wrapper">
<span className="section-number">①</span>
<span className="section-title">Cost Breakdown</span>
</div>
<span className={`expand-icon ${isTableOpen ? "open" : ""}`}>
{isTableOpen ? "⌵" : "⌵"}
</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>
<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>
))}
</tbody>
</table>
</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">