345 lines
12 KiB
TypeScript
345 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { ArrowLeftRight, CheckCheck, Copy, Pencil, Scale, Split, Trash2 } from "lucide-react";
|
||
import { useState, useTransition } from "react";
|
||
import { toast } from "sonner";
|
||
import { IconBadge } from "@/components/appearance/swatch";
|
||
import { useQuickAdd } from "@/components/layout/quick-add";
|
||
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 { Skeleton } from "@/components/ui/skeleton";
|
||
import { AttachmentStrip } from "@/features/attachments/components/attachment-strip";
|
||
import { tr } from "@/i18n/tr";
|
||
import { cn } from "@/lib/utils";
|
||
import { formatDate, formatDateTime, formatMoney } from "@/shared/format";
|
||
import type { TransactionType } from "@/shared/transactions";
|
||
import { getTransactionAction, setTransactionDeletedAction } from "../actions";
|
||
import type { TransactionDetail, TransactionListItem } from "../service";
|
||
|
||
/** İşlem listesi, ayrıntı ve hesap ekstresinin paylaştığı parçalar. */
|
||
|
||
const t = tr.transactions;
|
||
const weekday = new Intl.DateTimeFormat("tr-TR", { weekday: "long", timeZone: "Europe/Istanbul" });
|
||
|
||
/** "2026-11-05" → "05.11.2026 · Perşembe" */
|
||
export function dayLabel(ymd: string) {
|
||
const d = new Date(`${ymd}T12:00:00+03:00`);
|
||
return `${formatDate(d)} · ${weekday.format(d)}`;
|
||
}
|
||
|
||
export function signed(type: TransactionType, amountMinor: number) {
|
||
return type === "income" ? amountMinor : type === "expense" ? -amountMinor : 0;
|
||
}
|
||
|
||
export function Amount({
|
||
type,
|
||
amountMinor,
|
||
className,
|
||
}: {
|
||
type: TransactionType;
|
||
amountMinor: number;
|
||
className?: string;
|
||
}) {
|
||
const text =
|
||
type === "income"
|
||
? `+${formatMoney(amountMinor)}`
|
||
: type === "expense"
|
||
? `−${formatMoney(amountMinor)}`
|
||
: formatMoney(amountMinor);
|
||
return (
|
||
<span
|
||
className={cn(
|
||
"font-semibold whitespace-nowrap tabular-nums",
|
||
type === "income" && "text-income",
|
||
type === "expense" && "text-expense",
|
||
type === "transfer" && "text-muted-foreground",
|
||
className,
|
||
)}
|
||
>
|
||
{text}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
export function RowIcon({ item }: { item: TransactionListItem }) {
|
||
if (item.type === "transfer") {
|
||
return (
|
||
<span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
||
<ArrowLeftRight className="size-4.5" />
|
||
</span>
|
||
);
|
||
}
|
||
if (item.isAdjustment) {
|
||
return (
|
||
<span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
||
<Scale className="size-4.5" />
|
||
</span>
|
||
);
|
||
}
|
||
if (item.splitCount) {
|
||
return (
|
||
<span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-budget/15 text-budget">
|
||
<Split className="size-4.5" />
|
||
</span>
|
||
);
|
||
}
|
||
return item.category ? (
|
||
<IconBadge icon={item.category.icon} color={item.category.color} />
|
||
) : (
|
||
<IconBadge icon="tag" color="slate" />
|
||
);
|
||
}
|
||
|
||
export function rowTitle(item: TransactionListItem) {
|
||
if (item.isAdjustment) return t.adjustment;
|
||
if (item.payeeName) return item.payeeName;
|
||
if (item.description) return item.description;
|
||
if (item.type === "transfer") return t.types.transfer;
|
||
return item.category?.name ?? t.types[item.type];
|
||
}
|
||
|
||
export function rowSubtitle(item: TransactionListItem) {
|
||
if (item.type === "transfer")
|
||
return t.list.transfer(item.account.name, item.toAccount?.name ?? "—");
|
||
const what = item.isAdjustment
|
||
? item.description
|
||
: item.splitCount
|
||
? t.list.split(item.splitCount)
|
||
: (item.category?.path ?? "—");
|
||
return `${what} · ${item.account.name}`;
|
||
}
|
||
|
||
function DetailDialog({
|
||
detail,
|
||
loading,
|
||
canWrite,
|
||
onOpenChange,
|
||
onEdit,
|
||
onCopy,
|
||
onDelete,
|
||
}: {
|
||
detail: TransactionDetail | null;
|
||
loading: boolean;
|
||
canWrite: boolean;
|
||
onOpenChange: (o: boolean) => void;
|
||
onEdit: (d: TransactionDetail) => void;
|
||
onCopy: (d: TransactionDetail) => void;
|
||
onDelete: (d: TransactionDetail) => void;
|
||
}) {
|
||
const d = t.detail;
|
||
const row = (label: string, value: React.ReactNode) => (
|
||
<div className="flex items-start justify-between gap-4 py-2 text-sm">
|
||
<dt className="text-muted-foreground">{label}</dt>
|
||
<dd className="text-right">{value}</dd>
|
||
</div>
|
||
);
|
||
return (
|
||
<ResponsiveDialog
|
||
open={loading || Boolean(detail)}
|
||
onOpenChange={onOpenChange}
|
||
title={d.title}
|
||
footer={
|
||
detail && canWrite ? (
|
||
<>
|
||
<Button variant="destructive" onClick={() => onDelete(detail)}>
|
||
<Trash2 />
|
||
{t.actions.delete}
|
||
</Button>
|
||
{/* Mutabakat düzeltmesi düzenlenemez/kopyalanamaz; yalnızca silinebilir. */}
|
||
{detail.isAdjustment ? null : (
|
||
<>
|
||
<Button variant="outline" onClick={() => onCopy(detail)}>
|
||
<Copy />
|
||
{t.actions.copy}
|
||
</Button>
|
||
<Button onClick={() => onEdit(detail)}>
|
||
<Pencil />
|
||
{t.actions.edit}
|
||
</Button>
|
||
</>
|
||
)}
|
||
</>
|
||
) : null
|
||
}
|
||
>
|
||
{!detail ? (
|
||
<div className="flex flex-col gap-3" role="status" aria-label={tr.common.loading}>
|
||
<Skeleton className="h-10 w-1/2" />
|
||
<Skeleton className="h-32 w-full" />
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col gap-3">
|
||
<div className="flex items-center gap-3">
|
||
<RowIcon item={detail} />
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate font-medium">{rowTitle(detail)}</p>
|
||
<p className="text-xs text-muted-foreground">{dayLabel(detail.date)}</p>
|
||
</div>
|
||
<Amount type={detail.type} amountMinor={detail.amountMinor} className="text-lg" />
|
||
</div>
|
||
<dl className="divide-y border-y">
|
||
{row(t.filters.type, <Badge variant="secondary">{t.types[detail.type]}</Badge>)}
|
||
{detail.status !== "posted" ? row(t.filters.status, t.statuses[detail.status]) : null}
|
||
{row(
|
||
detail.type === "transfer" ? t.fields.fromAccount : t.fields.account,
|
||
detail.account.name,
|
||
)}
|
||
{detail.toAccount ? row(t.fields.toAccount, detail.toAccount.name) : null}
|
||
{detail.category ? row(t.fields.category, detail.category.path) : null}
|
||
{detail.isAdjustment ? row(t.fields.category, t.adjustment) : null}
|
||
{detail.payeeName ? row(t.fields.payee, detail.payeeName) : null}
|
||
{detail.description ? row(t.fields.description, detail.description) : null}
|
||
{detail.tags.length
|
||
? row(
|
||
t.fields.tags,
|
||
<span className="flex flex-wrap justify-end gap-1">
|
||
{detail.tags.map((tag) => (
|
||
<Badge key={tag} variant="outline">
|
||
#{tag}
|
||
</Badge>
|
||
))}
|
||
</span>,
|
||
)
|
||
: null}
|
||
{detail.attachments.length
|
||
? row(
|
||
tr.attachments.title,
|
||
<span className="flex justify-end">
|
||
<AttachmentStrip items={detail.attachments} />
|
||
</span>,
|
||
)
|
||
: null}
|
||
{detail.reconciledAccountIds.length
|
||
? row(
|
||
tr.statement.reconcile.title,
|
||
<span className="inline-flex items-center gap-1 text-income">
|
||
<CheckCheck className="size-4" aria-hidden />
|
||
{t.reconciled}
|
||
</span>,
|
||
)
|
||
: null}
|
||
{row(d.createdBy, `${detail.createdBy.name} · ${formatDateTime(detail.createdAt)}`)}
|
||
{new Date(detail.updatedAt).getTime() - new Date(detail.createdAt).getTime() > 1000
|
||
? row(d.updatedBy, `${detail.updatedBy.name} · ${formatDateTime(detail.updatedAt)}`)
|
||
: null}
|
||
</dl>
|
||
{detail.splits.length ? (
|
||
<section aria-labelledby="tx-lines">
|
||
<h3 id="tx-lines" className="mb-1 text-sm font-medium">
|
||
{d.lines}
|
||
</h3>
|
||
<ul className="divide-y rounded-lg border">
|
||
{detail.splits.map((s, i) => (
|
||
<li key={i} className="flex items-center gap-3 p-2 text-sm">
|
||
<IconBadge icon={s.icon} color={s.color} size="sm" />
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block truncate">{s.path}</span>
|
||
{s.note ? (
|
||
<span className="block truncate text-xs text-muted-foreground">
|
||
{s.note}
|
||
</span>
|
||
) : null}
|
||
</span>
|
||
<span className="tabular-nums">{formatMoney(s.amountMinor)}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</section>
|
||
) : null}
|
||
</div>
|
||
)}
|
||
</ResponsiveDialog>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Ayrıntı penceresi + silme onayı + geri al bildirimi. Liste ve ekstre aynı davranışı kullanır;
|
||
* düzenle/kopyala uygulama genelindeki işlem formunu açar.
|
||
*/
|
||
export function useTransactionDetail(canWrite: boolean) {
|
||
const { openTransactionForm } = useQuickAdd();
|
||
const [detail, setDetail] = useState<TransactionDetail | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [deleting, setDeleting] = useState<TransactionDetail | null>(null);
|
||
const [, startTransition] = useTransition();
|
||
|
||
async function openDetail(id: string) {
|
||
setLoading(true);
|
||
setDetail(null);
|
||
const res = await getTransactionAction(id);
|
||
setLoading(false);
|
||
if (res.ok) setDetail(res.data);
|
||
else toast.error(res.error);
|
||
}
|
||
|
||
function close() {
|
||
setDetail(null);
|
||
setLoading(false);
|
||
}
|
||
|
||
function remove(d: TransactionDetail) {
|
||
setDeleting(null);
|
||
close();
|
||
startTransition(async () => {
|
||
const res = await setTransactionDeletedAction(d.id, true);
|
||
if (!res.ok) return void toast.error(res.error);
|
||
toast.success(t.toast.deleted, {
|
||
duration: 10_000,
|
||
action: {
|
||
label: t.actions.restore,
|
||
onClick: async () => {
|
||
const r = await setTransactionDeletedAction(d.id, false);
|
||
if (r.ok) toast.success(t.toast.restored);
|
||
else toast.error(r.error);
|
||
},
|
||
},
|
||
});
|
||
});
|
||
}
|
||
|
||
const element = (
|
||
<>
|
||
<DetailDialog
|
||
detail={detail}
|
||
loading={loading}
|
||
canWrite={canWrite}
|
||
onOpenChange={(o) => !o && close()}
|
||
onEdit={(d) => {
|
||
close();
|
||
openTransactionForm({ kind: "edit", transaction: d });
|
||
}}
|
||
onCopy={(d) => {
|
||
close();
|
||
openTransactionForm({ kind: "copy", transaction: d });
|
||
}}
|
||
onDelete={setDeleting}
|
||
/>
|
||
<AlertDialog open={Boolean(deleting)} onOpenChange={(o) => !o && setDeleting(null)}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>{t.deleteTitle}</AlertDialogTitle>
|
||
<AlertDialogDescription>{t.deleteDescription}</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>{tr.common.cancel}</AlertDialogCancel>
|
||
<Button variant="destructive" onClick={() => deleting && remove(deleting)}>
|
||
{t.actions.delete}
|
||
</Button>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</>
|
||
);
|
||
return { openDetail, element };
|
||
}
|