Remodel/packages/web/components/KpiCard.tsx
Manohar Gupta 680df1a597
Some checks are pending
CI / Engine — lint / typecheck / test (push) Waiting to run
CI / API — lint / typecheck / test (push) Waiting to run
CI / Web — typecheck / lint / build (push) Waiting to run
Make KPI summary cards clickable - navigate to relevant sheets
- Added onClick prop to KpiCard component
- SummarySheet now accepts onNavigate callback
- KPI cards now link to appropriate sheets:
  - Solved Tariff, Solar Y1 CUF, Wind Y1 PLF -> Generation
  - Equity IRR, Project IRR, LCOE, Payback -> IRR / Returns
  - Min DSCR, Avg DSCR, Total Capex, Debt -> Debt
  - IDC -> IDC / Phasing
- WorkbookView accepts optional onNavigate prop
- Scenario page passes onNavigate to switch active sheet
2026-05-22 17:57:32 +05:30

28 lines
932 B
TypeScript

interface KpiCardProps {
label: string;
value: string | null;
unit?: string;
highlight?: boolean;
onClick?: () => void;
}
export function KpiCard({ label, value, unit, highlight, onClick }: KpiCardProps) {
return (
<div
onClick={onClick}
className={`border rounded-lg p-4 flex flex-col gap-1 transition-all cursor-pointer hover:border-primary/50 hover:bg-primary/5 ${highlight ? "border-primary/40 bg-primary/5" : ""} ${onClick ? "cursor-pointer" : ""}`}
>
<span className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
{label}
</span>
<span className="text-2xl font-bold tabular-nums">
{value ?? <span className="text-muted-foreground text-base"></span>}
{value && unit && (
<span className="text-sm font-normal text-muted-foreground ml-1">
{unit}
</span>
)}
</span>
</div>
);
}