feat(ui): ek ekleme alanı, carousel görüntüleyici, ekstre sayfası ve mutabakat penceresi
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,344 @@
|
||||
"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 };
|
||||
}
|
||||
Reference in New Issue
Block a user