65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import {
|
|
GreenTickIcon,
|
|
PerformanceIcon,
|
|
TickIcon,
|
|
} from "../../../icons/ExportCommonIcons";
|
|
|
|
const PerformanceResult = ({ comparedProducts }: any) => {
|
|
const ProfitProduct = comparedProducts[0].simulationData.netProfit > comparedProducts[1].simulationData.netProfit ? comparedProducts[0] : comparedProducts[1];
|
|
return (
|
|
<div className="performanceResult-wrapper comparisionCard">
|
|
<div className="header">
|
|
<div className="icon">
|
|
<PerformanceIcon />
|
|
</div>
|
|
<h4 className="head">Performance result</h4>
|
|
</div>
|
|
|
|
<div className="metrics-container">
|
|
<div className="metrics-left">
|
|
<div className="metric">
|
|
<div className="metric-label">
|
|
Success rate{" "}
|
|
<span>
|
|
<GreenTickIcon />
|
|
</span>
|
|
</div>
|
|
<div className="metric-value">98%</div>
|
|
</div>
|
|
<div className="label">Net Profit</div>
|
|
</div>
|
|
|
|
<div className="metrics-right">
|
|
<div className="metric-wrapper">
|
|
<div className="metric-label">ROI Percentage</div>
|
|
<div className="metric">
|
|
<div className="metric-icon"></div>
|
|
<div className="metric-value">{ProfitProduct.simulationData.roiPercentage.toFixed(2)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metric-wrapper">
|
|
<div className="metric-label">Payback Period</div>
|
|
<div className="metric">
|
|
<div className="metric-icon"></div>
|
|
<div className="metric-value">{ProfitProduct.simulationData.netProfit}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metric-wrapper">
|
|
<div className="metric">
|
|
<div className="metric-icon"></div>
|
|
<div className="metric-value">{parseFloat(ProfitProduct.simulationData.paybackPeriod.toFixed(2))}years</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="simulation-tag">Simulation 1</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PerformanceResult;
|