63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
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>
|
|
);
|
|
}
|