first commit

src/components/dashboard/GoalProgress.tsx

@@ -0,0 +1,62 @@
+import { euroFormatter } from "@/lib/finance/money";
+import type { UserSettings } from "@/types/finance";
+
+export function GoalProgress({
+  settings,
+  yearlyIncome,
+  yearlySavings,
+}: {
+  settings?: UserSettings;
+  yearlyIncome: number;
+  yearlySavings: number;
+}) {
+  const goals = [
+    {
+      label: "Obiettivo entrate",
+      current: yearlyIncome,
+      goal: settings?.monthlyIncomeGoal
+        ? settings.monthlyIncomeGoal * 12
+        : undefined,
+    },
+    {
+      label: "Obiettivo risparmio",
+      current: yearlySavings,
+      goal: settings?.monthlySavingsGoal
+        ? settings.monthlySavingsGoal * 12
+        : undefined,
+    },
+  ].filter((item) => item.goal);
+
+  if (!goals.length) return null;
+
+  return (
+    <section className="grid gap-3 md:grid-cols-2">
+      {goals.map((item) => {
+        const percentage = Math.min(
+          100,
+          (item.current / Number(item.goal)) * 100,
+        );
+        return (
+          <div
+            className="rounded-lg border border-white/10 bg-white/[0.03] p-4"
+            key={item.label}
+          >
+            <div className="flex items-center justify-between gap-3 text-sm">
+              <span className="text-slate-300">{item.label}</span>
+              <span className="text-slate-400">
+                {euroFormatter.format(item.current)} /{" "}
+                {euroFormatter.format(Number(item.goal))}
+              </span>
+            </div>
+            <div className="mt-3 h-2 overflow-hidden rounded-full bg-slate-950">
+              <div
+                className="h-full rounded-full bg-emerald-400 transition-[width]"
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </section>
+  );
+}