Files
mymoney/src/components/dashboard/DashboardCards.tsx
2026-06-02 04:02:59 +02:00

36 lines
951 B
TypeScript

import { DashboardStatCard } from "@/components/dashboard/DashboardStatCard";
import { euroFormatter } from "@/lib/finance/money";
export function DashboardCards({
summary,
scope,
}: {
summary: {
income: number;
realSpent: number;
projectedSpent: number;
projectedRemainingBalance: number;
};
scope: "anno" | "mese";
}) {
const cards = [
[`Entrate ${scope}`, summary.income],
[`Spesa reale ${scope}`, summary.realSpent],
[`Previsione ${scope}`, summary.projectedSpent],
["Saldo previsto", summary.projectedRemainingBalance],
];
return (
<div className="grid grid-cols-4 gap-2 md:grid-cols-2 md:gap-3 xl:grid-cols-4">
{cards.map(([label, value]) => (
<DashboardStatCard
desktopClassName="md:col-span-1"
key={label}
label={String(label)}
mobileSpan={2}
value={euroFormatter.format(Number(value))}
/>
))}
</div>
);
}