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,387 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCheck,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
List,
|
||||
Loader2,
|
||||
Scale,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { MoneyInput } from "@/components/money-input";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
import { ResponsiveDialog } from "@/components/responsive-dialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { tr } from "@/i18n/tr";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { todayIstanbul } from "@/shared/dates";
|
||||
import { formatDate, formatMoney } from "@/shared/format";
|
||||
import { previewReconciliationAction, reconcileAccountAction } from "../actions";
|
||||
import type { AccountStatement, ReconcilePreview, StatementRow } from "../statement";
|
||||
import { RowIcon, rowSubtitle, rowTitle, useTransactionDetail } from "./transaction-parts";
|
||||
|
||||
const t = tr.statement;
|
||||
const r = t.reconcile;
|
||||
const monthFmt = new Intl.DateTimeFormat("tr-TR", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
timeZone: "Europe/Istanbul",
|
||||
});
|
||||
const monthLabel = (ym: string) => monthFmt.format(new Date(`${ym}-15T12:00:00+03:00`));
|
||||
const dateLabel = (ymd: string) => formatDate(new Date(`${ymd}T12:00:00+03:00`));
|
||||
|
||||
function SignedMoney({ minor, className }: { minor: number; className?: string }) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"font-semibold whitespace-nowrap tabular-nums",
|
||||
minor > 0 && "text-income",
|
||||
minor < 0 && "text-expense",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{minor > 0 ? "+" : minor < 0 ? "−" : ""}
|
||||
{formatMoney(Math.abs(minor))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatementView({
|
||||
statement: s,
|
||||
canWrite,
|
||||
}: {
|
||||
statement: AccountStatement;
|
||||
canWrite: boolean;
|
||||
}) {
|
||||
const { openDetail, element: detailElement } = useTransactionDetail(canWrite);
|
||||
const [reconcileOpen, setReconcileOpen] = useState(false);
|
||||
const base = `/hesaplar/${s.account.id}`;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
|
||||
<Link href="/hesaplar">
|
||||
<ArrowLeft />
|
||||
{t.back}
|
||||
</Link>
|
||||
</Button>
|
||||
<PageHeader
|
||||
title={s.account.name}
|
||||
description={`${tr.accounts.types[s.account.type]} · ${t.current}: ${formatMoney(s.currentBalanceMinor)}`}
|
||||
actions={
|
||||
<>
|
||||
<Button variant="outline" asChild>
|
||||
<Link href={`/islemler?hesap=${s.account.id}`}>
|
||||
<List />
|
||||
<span className="hidden sm:inline">{t.allTransactions}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
{canWrite && s.canReconcile ? (
|
||||
<Button onClick={() => setReconcileOpen(true)}>
|
||||
<Scale />
|
||||
{r.open}
|
||||
</Button>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Button variant="outline" size="icon-sm" asChild aria-label={t.prevMonth}>
|
||||
<Link href={`${base}?ay=${s.prevMonth}`}>
|
||||
<ChevronLeft />
|
||||
</Link>
|
||||
</Button>
|
||||
<h2 className="text-base font-medium capitalize">{monthLabel(s.month)}</h2>
|
||||
{s.nextMonth ? (
|
||||
<Button variant="outline" size="icon-sm" asChild aria-label={t.nextMonth}>
|
||||
<Link href={`${base}?ay=${s.nextMonth}`}>
|
||||
<ChevronRight />
|
||||
</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" size="icon-sm" disabled aria-label={t.nextMonth}>
|
||||
<ChevronRight />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{(
|
||||
[
|
||||
[t.opening, s.openingMinor, false],
|
||||
[t.inflow, s.inflowMinor, true],
|
||||
[t.outflow, -s.outflowMinor, true],
|
||||
[t.closing, s.closingMinor, false],
|
||||
] as const
|
||||
).map(([label, value, colored]) => (
|
||||
<Card key={label} size="sm">
|
||||
<CardHeader>
|
||||
<CardDescription>{label}</CardDescription>
|
||||
<CardTitle className="text-base">
|
||||
{colored ? (
|
||||
<SignedMoney minor={value} />
|
||||
) : (
|
||||
<span className="tabular-nums">{formatMoney(value)}</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<CheckCheck className="size-3.5" aria-hidden />
|
||||
{s.lastReconciliation
|
||||
? t.lastReconciliation(
|
||||
dateLabel(s.lastReconciliation.date),
|
||||
formatMoney(s.lastReconciliation.statementBalanceMinor),
|
||||
)
|
||||
: t.noReconciliation}
|
||||
</p>
|
||||
|
||||
{s.rows.length === 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardDescription>{t.empty}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
) : (
|
||||
<ul className="divide-y rounded-xl border bg-card">
|
||||
{s.rows.map((row) => (
|
||||
<li key={row.item.id}>
|
||||
<StatementRowView row={row} onOpen={() => openDetail(row.item.id)} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{s.truncated ? <p className="text-xs text-muted-foreground">{t.truncated}</p> : null}
|
||||
|
||||
{detailElement}
|
||||
<ReconcileDialog
|
||||
open={reconcileOpen}
|
||||
onOpenChange={setReconcileOpen}
|
||||
accountId={s.account.id}
|
||||
isLiability={s.account.isLiability}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatementRowView({ row, onOpen }: { row: StatementRow; onOpen: () => void }) {
|
||||
const content = (
|
||||
<>
|
||||
<RowIcon item={row.item} />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="truncate font-medium">{rowTitle(row.item)}</span>
|
||||
{row.reconciled ? (
|
||||
<CheckCheck className="size-3.5 shrink-0 text-income" aria-label={t.reconciledHint} />
|
||||
) : null}
|
||||
</span>
|
||||
<span className="block truncate text-xs text-muted-foreground">
|
||||
{dateLabel(row.item.date)} · {rowSubtitle(row.item)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex flex-col items-end">
|
||||
<SignedMoney minor={row.deltaMinor} />
|
||||
<span className="text-xs text-muted-foreground tabular-nums" title={t.balanceAfter}>
|
||||
{formatMoney(row.balanceMinor)}
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
const cls = "flex w-full items-center gap-3 p-3 text-left";
|
||||
// Gizli karşı hesaba dokunan işlemin ayrıntısı açılmaz.
|
||||
return row.restricted ? (
|
||||
<div className={cls}>{content}</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpen}
|
||||
className={cn(cls, "outline-none hover:bg-muted/50 focus-visible:bg-muted")}
|
||||
>
|
||||
{content}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function ReconcileDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
accountId,
|
||||
isLiability,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
accountId: string;
|
||||
isLiability: boolean;
|
||||
}) {
|
||||
const [date, setDate] = useState(todayIstanbul);
|
||||
const [balance, setBalance] = useState("");
|
||||
const [preview, setPreview] = useState<ReconcilePreview | null>(null);
|
||||
const [accept, setAccept] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string | undefined>>({});
|
||||
const [pending, setPending] = useState(false);
|
||||
|
||||
function reset(next: boolean) {
|
||||
if (!next) {
|
||||
setPreview(null);
|
||||
setAccept(false);
|
||||
setErrors({});
|
||||
setBalance("");
|
||||
setDate(todayIstanbul());
|
||||
}
|
||||
onOpenChange(next);
|
||||
}
|
||||
|
||||
const input = () => ({
|
||||
statementDate: date,
|
||||
statementBalance: balance,
|
||||
acceptAdjustment: accept,
|
||||
});
|
||||
|
||||
async function check() {
|
||||
setPending(true);
|
||||
const res = await previewReconciliationAction(accountId, input());
|
||||
setPending(false);
|
||||
if (!res.ok) {
|
||||
setErrors({ ...res.fieldErrors, root: res.fieldErrors ? undefined : res.error });
|
||||
return;
|
||||
}
|
||||
setErrors({});
|
||||
setAccept(false);
|
||||
setPreview(res.data);
|
||||
}
|
||||
|
||||
async function confirm() {
|
||||
setPending(true);
|
||||
const res = await reconcileAccountAction(accountId, input());
|
||||
setPending(false);
|
||||
if (!res.ok) {
|
||||
setErrors({ root: res.error });
|
||||
return;
|
||||
}
|
||||
toast.success(
|
||||
res.data.adjustmentId
|
||||
? r.doneWithAdjustment(res.data.markedCount)
|
||||
: r.done(res.data.markedCount),
|
||||
);
|
||||
reset(false);
|
||||
}
|
||||
|
||||
const diff = preview?.differenceMinor ?? 0;
|
||||
const display = (minor: number) => formatMoney(isLiability ? -minor : minor);
|
||||
|
||||
return (
|
||||
<ResponsiveDialog
|
||||
open={open}
|
||||
onOpenChange={reset}
|
||||
title={r.title}
|
||||
description={r.description}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" type="button" onClick={() => reset(false)}>
|
||||
{tr.common.cancel}
|
||||
</Button>
|
||||
{preview ? (
|
||||
<Button onClick={confirm} disabled={pending || (diff !== 0 && !accept)}>
|
||||
{pending ? <Loader2 className="animate-spin" /> : null}
|
||||
{diff !== 0 ? r.confirmWithAdjustment : r.confirm}
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={check} disabled={pending || !balance.trim()}>
|
||||
{pending ? <Loader2 className="animate-spin" /> : null}
|
||||
{r.check}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<FieldGroup>
|
||||
<Field data-invalid={Boolean(errors.statementDate)}>
|
||||
<FieldLabel htmlFor="rec-date">{r.date}</FieldLabel>
|
||||
<Input
|
||||
id="rec-date"
|
||||
type="date"
|
||||
value={date}
|
||||
max={todayIstanbul()}
|
||||
onChange={(e) => {
|
||||
setDate(e.target.value);
|
||||
setPreview(null);
|
||||
}}
|
||||
/>
|
||||
{errors.statementDate ? <FieldError>{errors.statementDate}</FieldError> : null}
|
||||
</Field>
|
||||
<Field data-invalid={Boolean(errors.statementBalance)}>
|
||||
<FieldLabel htmlFor="rec-balance">{isLiability ? r.debt : r.balance}</FieldLabel>
|
||||
<MoneyInput
|
||||
id="rec-balance"
|
||||
value={balance}
|
||||
allowNegative
|
||||
onChange={(v) => {
|
||||
setBalance(v);
|
||||
setPreview(null);
|
||||
}}
|
||||
/>
|
||||
<FieldDescription>{isLiability ? r.debtHint : r.balanceHint}</FieldDescription>
|
||||
{errors.statementBalance ? <FieldError>{errors.statementBalance}</FieldError> : null}
|
||||
</Field>
|
||||
|
||||
{preview ? (
|
||||
<div className="flex flex-col gap-3 rounded-xl border p-3" aria-live="polite">
|
||||
<dl className="grid grid-cols-3 gap-2 text-sm">
|
||||
<div>
|
||||
<dt className="text-xs text-muted-foreground">{r.statementBalance}</dt>
|
||||
<dd className="tabular-nums">{display(preview.statementBalanceMinor)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs text-muted-foreground">{r.appBalance}</dt>
|
||||
<dd className="tabular-nums">{display(preview.appBalanceMinor)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs text-muted-foreground">{r.difference}</dt>
|
||||
<dd>
|
||||
<SignedMoney minor={diff} />
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{diff === 0 ? (
|
||||
<p className="text-sm text-income">{r.matches}</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm text-expense">{r.mismatch}</p>
|
||||
<label className="flex items-start gap-2 text-sm">
|
||||
<Checkbox
|
||||
checked={accept}
|
||||
onCheckedChange={(v) => setAccept(v === true)}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<span>
|
||||
{r.adjustmentOffer(
|
||||
formatMoney(Math.abs(diff)),
|
||||
diff > 0 ? tr.transactions.types.income : tr.transactions.types.expense,
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
<Badge variant="secondary" className="w-fit">
|
||||
{r.unreconciled(preview.unreconciledCount)}
|
||||
</Badge>
|
||||
</div>
|
||||
) : null}
|
||||
{errors.root ? <FieldError>{errors.root}</FieldError> : null}
|
||||
</FieldGroup>
|
||||
</ResponsiveDialog>
|
||||
);
|
||||
}
|
||||
@@ -27,6 +27,9 @@ import { cn } from "@/lib/utils";
|
||||
import { todayIstanbul } from "@/shared/dates";
|
||||
import { formatMoney } from "@/shared/format";
|
||||
import { formatMoneyInput, parseMoney } from "@/shared/money";
|
||||
import { allowedAttachmentKinds } from "@/shared/attachments";
|
||||
import { AttachmentPicker } from "@/features/attachments/components/attachment-picker";
|
||||
import type { AttachmentInfo } from "@/features/attachments/service";
|
||||
import { transactionFormSchema, type TransactionForm } from "@/shared/schemas/transaction";
|
||||
import { MAX_SPLITS, TRANSACTION_TYPES, type TransactionType } from "@/shared/transactions";
|
||||
import {
|
||||
@@ -57,6 +60,8 @@ type FormValues = {
|
||||
payee: string;
|
||||
description: string;
|
||||
tags: string;
|
||||
/** Önizleme bilgisiyle ekler; sunucuya yalnızca kimlikleri gider. */
|
||||
attachments: AttachmentInfo[];
|
||||
};
|
||||
|
||||
function toValues(mode: TransactionFormMode, options: TransactionFormOptions | null): FormValues {
|
||||
@@ -72,6 +77,7 @@ function toValues(mode: TransactionFormMode, options: TransactionFormOptions | n
|
||||
payee: "",
|
||||
description: "",
|
||||
tags: "",
|
||||
attachments: [],
|
||||
};
|
||||
}
|
||||
const x = mode.transaction;
|
||||
@@ -90,6 +96,8 @@ function toValues(mode: TransactionFormMode, options: TransactionFormOptions | n
|
||||
payee: x.payeeName,
|
||||
description: x.description,
|
||||
tags: x.tags.join(", "),
|
||||
// Kopyada ekler taşınmaz (fiş o işleme aittir).
|
||||
attachments: mode.kind === "edit" ? x.attachments : [],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -298,6 +306,7 @@ export function TransactionFormDialog({
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||||
const [suggested, setSuggested] = useState(false);
|
||||
const [uploadBusy, setUploadBusy] = useState(false);
|
||||
const form = useForm<FormValues, unknown, TransactionForm>({
|
||||
// FormValues, şemanın giriş şekliyle birebir (tutarlar string; zod kuruşa çevirir).
|
||||
resolver: zodResolver(transactionFormSchema) as unknown as Resolver<
|
||||
@@ -332,6 +341,7 @@ export function TransactionFormDialog({
|
||||
const amount = useWatch({ control: form.control, name: "amount" });
|
||||
const accountId = useWatch({ control: form.control, name: "accountId" });
|
||||
const splitValues = useWatch({ control: form.control, name: "splits" });
|
||||
const attachmentCount = useWatch({ control: form.control, name: "attachments" })?.length ?? 0;
|
||||
const splitMode = splits.fields.length > 0;
|
||||
|
||||
// Düzenlemede arşivli/kapalı hesap veya kategori seçenek listesinde yoksa ekle (kaybolmasın).
|
||||
@@ -431,9 +441,14 @@ export function TransactionFormDialog({
|
||||
|
||||
async function onSubmit() {
|
||||
if (!mode) return;
|
||||
const values = form.getValues();
|
||||
if (uploadBusy) {
|
||||
form.setError("root", { message: tr.attachments.waitForUploads });
|
||||
return;
|
||||
}
|
||||
const { attachments, ...values } = form.getValues();
|
||||
const payload = {
|
||||
...values,
|
||||
attachmentIds: attachments.map((a) => a.id),
|
||||
toAccountId: values.type === "transfer" ? values.toAccountId : "",
|
||||
categoryId: values.type === "transfer" || values.splits.length ? "" : values.categoryId,
|
||||
splits: values.type === "transfer" ? [] : values.splits,
|
||||
@@ -479,7 +494,7 @@ export function TransactionFormDialog({
|
||||
<Button
|
||||
type="submit"
|
||||
form="transaction-form"
|
||||
disabled={form.formState.isSubmitting || loading}
|
||||
disabled={form.formState.isSubmitting || loading || uploadBusy}
|
||||
>
|
||||
{form.formState.isSubmitting ? <Loader2 className="animate-spin" /> : null}
|
||||
{tr.common.save}
|
||||
@@ -674,10 +689,30 @@ export function TransactionFormDialog({
|
||||
· {t.list.split(splits.fields.length)}
|
||||
</span>
|
||||
) : null}
|
||||
{attachmentCount ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
· {tr.attachments.count(attachmentCount)}
|
||||
</span>
|
||||
) : null}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pt-3">
|
||||
<FieldGroup>
|
||||
<Controller
|
||||
name="attachments"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Field>
|
||||
<FieldLabel>{tr.attachments.title}</FieldLabel>
|
||||
<AttachmentPicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
allowedKinds={allowedAttachmentKinds(type)}
|
||||
onBusyChange={setUploadBusy}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="tags"
|
||||
control={form.control}
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
@@ -1,36 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ArrowLeftRight,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Copy,
|
||||
Download,
|
||||
Filter,
|
||||
Paperclip,
|
||||
Pencil,
|
||||
Plus,
|
||||
Split,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { ChevronLeft, ChevronRight, Download, Filter, Paperclip, Plus, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { IconBadge } from "@/components/appearance/swatch";
|
||||
import { useState } from "react";
|
||||
import { useQuickAdd } from "@/components/layout/quick-add";
|
||||
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, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
@@ -43,103 +19,24 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { tr } from "@/i18n/tr";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatDate, formatDateTime, formatMoney } from "@/shared/format";
|
||||
import { formatMoney } from "@/shared/format";
|
||||
import type { TransactionFilters } from "@/shared/schemas/transaction";
|
||||
import { TRANSACTION_STATUSES, TRANSACTION_TYPES } from "@/shared/transactions";
|
||||
import type { TransactionFormOptions, TransactionListItem, TransactionPage } from "../service";
|
||||
import {
|
||||
TRANSACTION_STATUSES,
|
||||
TRANSACTION_TYPES,
|
||||
type TransactionType,
|
||||
} from "@/shared/transactions";
|
||||
import { getTransactionAction, setTransactionDeletedAction } from "../actions";
|
||||
import type {
|
||||
TransactionDetail,
|
||||
TransactionFormOptions,
|
||||
TransactionListItem,
|
||||
TransactionPage,
|
||||
} from "../service";
|
||||
Amount,
|
||||
dayLabel,
|
||||
RowIcon,
|
||||
rowSubtitle,
|
||||
rowTitle,
|
||||
signed,
|
||||
useTransactionDetail,
|
||||
} from "./transaction-parts";
|
||||
|
||||
const t = tr.transactions;
|
||||
const ALL = "__all__";
|
||||
const weekday = new Intl.DateTimeFormat("tr-TR", { weekday: "long", timeZone: "Europe/Istanbul" });
|
||||
|
||||
/** "2026-11-05" → "05.11.2026 · Perşembe" */
|
||||
function dayLabel(ymd: string) {
|
||||
const d = new Date(`${ymd}T12:00:00+03:00`);
|
||||
return `${formatDate(d)} · ${weekday.format(d)}`;
|
||||
}
|
||||
|
||||
function signed(type: TransactionType, amountMinor: number) {
|
||||
return type === "income" ? amountMinor : type === "expense" ? -amountMinor : 0;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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.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" />
|
||||
);
|
||||
}
|
||||
|
||||
function rowTitle(item: TransactionListItem) {
|
||||
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];
|
||||
}
|
||||
|
||||
function rowSubtitle(item: TransactionListItem) {
|
||||
if (item.type === "transfer")
|
||||
return t.list.transfer(item.account.name, item.toAccount?.name ?? "—");
|
||||
const what = item.splitCount ? t.list.split(item.splitCount) : (item.category?.path ?? "—");
|
||||
return `${what} · ${item.account.name}`;
|
||||
}
|
||||
|
||||
// --- Filtreler ---
|
||||
|
||||
@@ -318,126 +215,6 @@ function FiltersDialog({
|
||||
|
||||
// --- Ayrıntı ---
|
||||
|
||||
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>
|
||||
<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.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}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Ana görünüm ---
|
||||
|
||||
export function TransactionsView({
|
||||
@@ -454,12 +231,9 @@ export function TransactionsView({
|
||||
canWrite: boolean;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const { openQuickAdd, openTransactionForm } = useQuickAdd();
|
||||
const { openQuickAdd } = useQuickAdd();
|
||||
const [filtersOpen, setFiltersOpen] = useState(false);
|
||||
const [detail, setDetail] = useState<TransactionDetail | null>(null);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [deleting, setDeleting] = useState<TransactionDetail | null>(null);
|
||||
const [, startTransition] = useTransition();
|
||||
const { openDetail, element: detailElement } = useTransactionDetail(canWrite);
|
||||
const active = countActive(filters);
|
||||
|
||||
const pageHref = (page: number) => {
|
||||
@@ -474,40 +248,6 @@ export function TransactionsView({
|
||||
return `/islemler/disa-aktar${params.size ? `?${params}` : ""}`;
|
||||
};
|
||||
|
||||
async function openDetail(id: string) {
|
||||
setDetailLoading(true);
|
||||
setDetail(null);
|
||||
const res = await getTransactionAction(id);
|
||||
setDetailLoading(false);
|
||||
if (res.ok) setDetail(res.data);
|
||||
else toast.error(res.error);
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
setDetail(null);
|
||||
setDetailLoading(false);
|
||||
}
|
||||
|
||||
function remove(d: TransactionDetail) {
|
||||
setDeleting(null);
|
||||
closeDetail();
|
||||
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);
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Sayfadaki işlemleri güne göre grupla (liste zaten tarihe göre sıralı).
|
||||
const groups: { date: string; items: TransactionListItem[] }[] = [];
|
||||
for (const item of data.items) {
|
||||
@@ -679,35 +419,7 @@ export function TransactionsView({
|
||||
raw={raw}
|
||||
options={options}
|
||||
/>
|
||||
<DetailDialog
|
||||
detail={detail}
|
||||
loading={detailLoading}
|
||||
canWrite={canWrite}
|
||||
onOpenChange={(o) => !o && closeDetail()}
|
||||
onEdit={(d) => {
|
||||
closeDetail();
|
||||
openTransactionForm({ kind: "edit", transaction: d });
|
||||
}}
|
||||
onCopy={(d) => {
|
||||
closeDetail();
|
||||
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>
|
||||
{detailElement}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user