first commit

src/components/dashboard/DashboardCards.tsx

@@ -0,0 +1,35 @@
+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>
+  );
+}