Dwinzo_dev/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx

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;