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>

src/features/transactions/components/transactions-view.tsx

@@ -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>
   );
 }