481 lines
16 KiB
TypeScript
481 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
AlertTriangle,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
Copy,
|
||
EllipsisVertical,
|
||
History,
|
||
Pencil,
|
||
} from "lucide-react";
|
||
import Link from "next/link";
|
||
import { useState } from "react";
|
||
import { toast } from "sonner";
|
||
import { IconBadge } from "@/components/appearance/swatch";
|
||
import { MoneyInput } from "@/components/money-input";
|
||
import { ResponsiveDialog } from "@/components/responsive-dialog";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import { tr } from "@/i18n/tr";
|
||
import { cn } from "@/lib/utils";
|
||
import { shiftMonth, type BudgetStatus } from "@/shared/budget";
|
||
import { formatDate, formatMoney } from "@/shared/format";
|
||
import { formatMoneyInput, parseMoney } from "@/shared/money";
|
||
import { budgetFromActualsAction, copyPreviousBudgetAction, saveBudgetAction } from "../actions";
|
||
import type { BudgetLineView, BudgetView as Data } from "../service";
|
||
|
||
const t = tr.budget;
|
||
const d = (ymd: string) => formatDate(`${ymd}T12:00:00+03:00`);
|
||
const monthFmt = new Intl.DateTimeFormat("tr-TR", {
|
||
month: "long",
|
||
year: "numeric",
|
||
timeZone: "Europe/Istanbul",
|
||
});
|
||
const monthLabel = (m: string) => monthFmt.format(new Date(`${m}-15T12:00:00+03:00`));
|
||
|
||
const BAR: Record<BudgetStatus, string> = {
|
||
ok: "bg-budget",
|
||
warning: "bg-amber-500",
|
||
over: "bg-expense",
|
||
none: "bg-muted-foreground/40",
|
||
};
|
||
|
||
/** Yüzde çubuğu; `marker` ayın geçen kısmını (yüzde) gösterir. */
|
||
function Bar({
|
||
ratioBp,
|
||
status,
|
||
marker,
|
||
label,
|
||
}: {
|
||
ratioBp: number | null;
|
||
status: BudgetStatus;
|
||
marker?: number;
|
||
label: string;
|
||
}) {
|
||
const pct = ratioBp === null ? 0 : Math.min(100, ratioBp / 100);
|
||
return (
|
||
<div
|
||
className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
|
||
role="progressbar"
|
||
aria-label={label}
|
||
aria-valuemin={0}
|
||
aria-valuemax={100}
|
||
aria-valuenow={Math.round(ratioBp === null ? 0 : ratioBp / 100)}
|
||
>
|
||
<div className={cn("h-full rounded-full", BAR[status])} style={{ width: `${pct}%` }} />
|
||
{marker !== undefined && marker > 0 && marker < 100 ? (
|
||
<span
|
||
aria-hidden
|
||
className="absolute top-0 h-full w-0.5 bg-foreground/60"
|
||
style={{ left: `${marker}%` }}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StatusBadge({
|
||
status,
|
||
forecastOver,
|
||
exceeded,
|
||
}: {
|
||
status: BudgetStatus;
|
||
forecastOver: boolean;
|
||
/** Limit aşıldı mı (tam %100'de "doldu"). */
|
||
exceeded: boolean;
|
||
}) {
|
||
if (status === "over")
|
||
return (
|
||
<Badge variant="destructive" className="gap-1">
|
||
<AlertTriangle className="size-3" />
|
||
{exceeded ? t.status.over : t.status.full}
|
||
</Badge>
|
||
);
|
||
if (status === "warning")
|
||
return (
|
||
<Badge
|
||
variant="outline"
|
||
className="gap-1 border-amber-500/50 text-amber-700 dark:text-amber-400"
|
||
>
|
||
<AlertTriangle className="size-3" />
|
||
{t.status.warning}
|
||
</Badge>
|
||
);
|
||
if (forecastOver)
|
||
return (
|
||
<Badge variant="outline" className="text-muted-foreground">
|
||
{t.status.forecastOver}
|
||
</Badge>
|
||
);
|
||
return null;
|
||
}
|
||
|
||
function Stat({ label, value, tone }: { label: string; value: string; tone?: string }) {
|
||
return (
|
||
<div className="min-w-0">
|
||
<p className="text-xs text-muted-foreground">{label}</p>
|
||
<p className={cn("text-lg font-semibold tabular-nums", tone)}>{value}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
type Pending = { kind: "edit" } | { kind: "replace"; source: "copy" | "actuals" } | null;
|
||
|
||
export function BudgetView({ data }: { data: Data }) {
|
||
const [pending, setPending] = useState<Pending>(null);
|
||
const [busy, setBusy] = useState(false);
|
||
const close = () => setPending(null);
|
||
const tt = data.totals;
|
||
const monthPct = Math.round((data.elapsedDays * 100) / data.totalDays);
|
||
const warnings = data.lines.filter((l) => l.status === "warning" || l.status === "over");
|
||
|
||
async function generate(source: "copy" | "actuals") {
|
||
setBusy(true);
|
||
const r =
|
||
source === "copy"
|
||
? await copyPreviousBudgetAction(data.month)
|
||
: await budgetFromActualsAction(data.month);
|
||
setBusy(false);
|
||
close();
|
||
if (r.ok) toast.success(source === "copy" ? t.toast.copied : t.toast.created);
|
||
else toast.error(r.error);
|
||
}
|
||
const askOrRun = (source: "copy" | "actuals") =>
|
||
data.hasBudget ? setPending({ kind: "replace", source }) : generate(source);
|
||
|
||
return (
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<div className="flex items-center gap-1">
|
||
<Button variant="ghost" size="icon" asChild>
|
||
<Link href={`/butce?ay=${shiftMonth(data.month, -1)}`} aria-label={t.prevMonth}>
|
||
<ChevronLeft />
|
||
</Link>
|
||
</Button>
|
||
<div className="min-w-36 text-center">
|
||
<p className="font-medium capitalize">{monthLabel(data.month)}</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t.period(d(data.period.from), d(data.period.to))}
|
||
</p>
|
||
</div>
|
||
<Button variant="ghost" size="icon" asChild>
|
||
<Link href={`/butce?ay=${shiftMonth(data.month, 1)}`} aria-label={t.nextMonth}>
|
||
<ChevronRight />
|
||
</Link>
|
||
</Button>
|
||
{data.month !== data.currentMonth ? (
|
||
<Button variant="link" size="sm" asChild>
|
||
<Link href="/butce">{t.thisMonth}</Link>
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
{data.canWrite ? (
|
||
<div className="flex gap-2">
|
||
<Button size="sm" onClick={() => setPending({ kind: "edit" })}>
|
||
<Pencil />
|
||
{t.edit}
|
||
</Button>
|
||
<DropdownMenu modal={false}>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button size="icon-sm" variant="outline" aria-label={tr.recurring.actions.more}>
|
||
<EllipsisVertical />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem
|
||
disabled={!data.hasPrevious || busy}
|
||
onSelect={() => askOrRun("copy")}
|
||
>
|
||
<Copy />
|
||
{t.copyPrevious}
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem disabled={busy} onSelect={() => askOrRun("actuals")}>
|
||
<History />
|
||
{t.fromActuals}
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<Card size="sm">
|
||
<CardContent className="flex flex-col gap-3">
|
||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||
<Stat
|
||
label={t.totals.limit}
|
||
value={data.hasBudget ? formatMoney(tt.limitMinor) : "—"}
|
||
/>
|
||
<Stat label={t.totals.actual} value={formatMoney(tt.actualMinor)} tone="text-expense" />
|
||
<Stat
|
||
label={tt.remainingMinor < 0 ? t.totals.over : t.totals.remaining}
|
||
value={data.hasBudget ? formatMoney(Math.abs(tt.remainingMinor)) : "—"}
|
||
tone={tt.remainingMinor < 0 ? "text-expense" : "text-budget"}
|
||
/>
|
||
<Stat
|
||
label={t.totals.forecast}
|
||
value={formatMoney(tt.forecastMinor)}
|
||
tone={tt.forecastOver ? "text-expense" : undefined}
|
||
/>
|
||
</div>
|
||
{data.hasBudget ? (
|
||
<Bar
|
||
ratioBp={tt.ratioBp}
|
||
status={tt.status}
|
||
marker={monthPct}
|
||
label={`${t.totals.actual} / ${t.totals.limit}`}
|
||
/>
|
||
) : null}
|
||
<div className="flex flex-wrap justify-between gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
||
<span>
|
||
{t.totals.monthProgress(data.elapsedDays, data.totalDays, String(monthPct))}
|
||
{tt.ratioBp !== null ? ` · %${Math.round(tt.ratioBp / 100)}` : ""}
|
||
</span>
|
||
{tt.plannedMinor ? <span>{t.totals.planned(formatMoney(tt.plannedMinor))}</span> : null}
|
||
{data.hasBudget && tt.unbudgetedMinor ? (
|
||
<span>
|
||
{t.totals.unbudgeted}: {formatMoney(tt.unbudgetedMinor)}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
{data.includesHidden ? (
|
||
<p className="text-xs text-muted-foreground">{t.includesHidden}</p>
|
||
) : null}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{warnings.length ? (
|
||
<div
|
||
role="status"
|
||
className="flex items-center gap-2 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-sm"
|
||
>
|
||
<AlertTriangle className="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
|
||
{t.warnings(warnings.length)}
|
||
</div>
|
||
) : null}
|
||
|
||
{!data.hasBudget ? (
|
||
<div className="flex flex-col items-center gap-3 rounded-lg border border-dashed p-6 text-center">
|
||
<p className="font-medium">{t.empty}</p>
|
||
<p className="max-w-md text-sm text-muted-foreground">{t.emptyHint}</p>
|
||
{data.canWrite ? (
|
||
<div className="flex flex-wrap justify-center gap-2">
|
||
<Button size="sm" onClick={() => setPending({ kind: "edit" })}>
|
||
<Pencil />
|
||
{t.edit}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={!data.hasPrevious || busy}
|
||
onClick={() => generate("copy")}
|
||
>
|
||
<Copy />
|
||
{t.copyPrevious}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={busy}
|
||
onClick={() => generate("actuals")}
|
||
>
|
||
<History />
|
||
{t.fromActuals}
|
||
</Button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
|
||
{data.lines.length ? (
|
||
<ul className="flex flex-col divide-y rounded-xl border bg-card">
|
||
{data.lines.map((l) => (
|
||
<Line key={l.categoryId} line={l} marker={monthPct} />
|
||
))}
|
||
</ul>
|
||
) : data.hasBudget ? (
|
||
<p className="text-sm text-muted-foreground">{t.noSpending}</p>
|
||
) : null}
|
||
|
||
{pending?.kind === "edit" ? <EditDialog data={data} onClose={close} /> : null}
|
||
<AlertDialog open={pending?.kind === "replace"} onOpenChange={(o) => !o && close()}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>{t.replaceTitle}</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
{t.replaceDescription}
|
||
{pending?.kind === "replace" && pending.source === "actuals"
|
||
? ` ${t.fromActualsHint}`
|
||
: ""}
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>{tr.common.cancel}</AlertDialogCancel>
|
||
<Button
|
||
disabled={busy}
|
||
onClick={() => pending?.kind === "replace" && generate(pending.source)}
|
||
>
|
||
{t.replace}
|
||
</Button>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Line({ line: l, marker }: { line: BudgetLineView; marker: number }) {
|
||
const hasLimit = l.limitMinor !== null;
|
||
return (
|
||
<li
|
||
className="flex items-start gap-3 p-3"
|
||
style={{ paddingLeft: `${0.75 + l.depth * 1.25}rem` }}
|
||
>
|
||
<IconBadge icon={l.icon} color={l.color} />
|
||
<div className="flex min-w-0 flex-1 flex-col gap-1.5">
|
||
<div className="flex flex-wrap items-center justify-between gap-x-2 gap-y-1">
|
||
<p className="flex min-w-0 items-center gap-2 font-medium">
|
||
<span className="truncate">{l.name}</span>
|
||
<StatusBadge
|
||
status={l.status}
|
||
forecastOver={l.forecastOver}
|
||
exceeded={(l.remainingMinor ?? 0) < 0}
|
||
/>
|
||
</p>
|
||
<p className="text-sm tabular-nums">
|
||
{hasLimit
|
||
? t.line.ofLimit(formatMoney(l.actualMinor), formatMoney(l.limitMinor!))
|
||
: formatMoney(l.actualMinor)}
|
||
</p>
|
||
</div>
|
||
{hasLimit ? (
|
||
<Bar
|
||
ratioBp={l.ratioBp}
|
||
status={l.status}
|
||
marker={marker}
|
||
label={`${l.name}: ${t.line.ofLimit(formatMoney(l.actualMinor), formatMoney(l.limitMinor!))}`}
|
||
/>
|
||
) : null}
|
||
<p className="flex flex-wrap gap-x-3 text-xs text-muted-foreground">
|
||
{hasLimit ? (
|
||
<span className={cn(l.remainingMinor! < 0 && "text-expense")}>
|
||
{l.remainingMinor! < 0
|
||
? t.line.over(formatMoney(-l.remainingMinor!))
|
||
: t.line.remaining(formatMoney(l.remainingMinor!))}
|
||
</span>
|
||
) : (
|
||
<span>{l.covered ? t.status.covered : t.status.none}</span>
|
||
)}
|
||
{l.plannedMinor ? <span>{t.line.planned(formatMoney(l.plannedMinor))}</span> : null}
|
||
{l.forecastMinor !== l.actualMinor ? (
|
||
<span className={cn(l.forecastOver && "text-expense")}>
|
||
{t.line.forecast(formatMoney(l.forecastMinor))}
|
||
</span>
|
||
) : null}
|
||
</p>
|
||
</div>
|
||
</li>
|
||
);
|
||
}
|
||
|
||
function EditDialog({ data, onClose }: { data: Data; onClose: () => void }) {
|
||
const [values, setValues] = useState<Record<string, string>>(() =>
|
||
Object.fromEntries(
|
||
data.editor.categories.map((c) => {
|
||
const v = data.editor.limits[c.id];
|
||
return [c.id, v ? formatMoneyInput(v) : ""];
|
||
}),
|
||
),
|
||
);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
// Toplam: limiti olan ve üstünde limit olmayan kategoriler (alt limitler iki kez sayılmaz).
|
||
let total = 0;
|
||
const stack: { depth: number; limited: boolean }[] = [];
|
||
for (const c of data.editor.categories) {
|
||
while (stack.length && stack.at(-1)!.depth >= c.depth) stack.pop();
|
||
const covered = stack.some((s) => s.limited);
|
||
const v = parseMoney(values[c.id] ?? "") ?? 0;
|
||
if (v > 0 && !covered) total += v;
|
||
stack.push({ depth: c.depth, limited: v > 0 });
|
||
}
|
||
|
||
async function submit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setBusy(true);
|
||
const r = await saveBudgetAction({
|
||
month: data.month,
|
||
limits: Object.entries(values).map(([categoryId, amount]) => ({ categoryId, amount })),
|
||
});
|
||
setBusy(false);
|
||
if (r.ok) {
|
||
toast.success(t.toast.saved);
|
||
onClose();
|
||
} else setError(r.error);
|
||
}
|
||
|
||
return (
|
||
<ResponsiveDialog
|
||
open
|
||
onOpenChange={(o) => !o && onClose()}
|
||
title={t.editTitle(monthLabel(data.month))}
|
||
description={t.editHint}
|
||
footer={
|
||
<>
|
||
<span className="mr-auto self-center text-sm font-medium tabular-nums">
|
||
{t.editTotal(formatMoney(total))}
|
||
</span>
|
||
<Button variant="outline" type="button" onClick={onClose}>
|
||
{tr.common.cancel}
|
||
</Button>
|
||
<Button type="submit" form="budget-form" disabled={busy}>
|
||
{tr.common.save}
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<form id="budget-form" onSubmit={submit} noValidate className="flex flex-col">
|
||
{data.editor.categories.map((c) => (
|
||
<label
|
||
key={c.id}
|
||
className="flex items-center justify-between gap-3 border-b py-1.5 last:border-b-0"
|
||
style={{ paddingLeft: `${c.depth * 1.25}rem` }}
|
||
>
|
||
<span className={cn("min-w-0 truncate text-sm", c.depth === 0 && "font-medium")}>
|
||
{c.name}
|
||
</span>
|
||
<div className="w-36 shrink-0">
|
||
<MoneyInput
|
||
id={`limit-${c.id}`}
|
||
value={values[c.id] ?? ""}
|
||
onChange={(x) => setValues((s) => ({ ...s, [c.id]: x }))}
|
||
aria-label={c.name}
|
||
/>
|
||
</div>
|
||
</label>
|
||
))}
|
||
{error ? <p className="pt-2 text-sm text-destructive">{error}</p> : null}
|
||
</form>
|
||
</ResponsiveDialog>
|
||
);
|
||
}
|