From b6c6be5c979c84d4ba6360267c7cd9e4d8d33615 Mon Sep 17 00:00:00 2001
From: suphicakir <suphicakir@gmail.com>
Date: Thu, 5 Nov 2026 11:58:37 +0300
Subject: [PATCH] =?UTF-8?q?feat(ui):=20cari=20hesaplar=20sayfalar=C4=B1,?=
 =?UTF-8?q?=20hareket=20formu=20ve=20vade=20uyar=C4=B1s=C4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/(app)/cari/[id]/page.tsx              |  17 +
 src/app/(app)/cari/page.tsx                   |  22 +
 src/app/(app)/dashboard/page.tsx              |   4 +
 src/components/layout/nav-config.ts           |   4 +-
 .../contacts/components/contact-dialogs.tsx   | 434 ++++++++++++++++++
 .../components/contact-statement-view.tsx     | 155 +++++++
 .../contacts/components/contacts-view.tsx     | 186 ++++++++
 .../contacts/components/due-banner.tsx        |  29 ++
 .../components/transaction-form.tsx           |   2 +-
 .../components/transaction-parts.tsx          |  57 ++-
 src/i18n/tr.ts                                |  77 ++++
 11 files changed, 975 insertions(+), 12 deletions(-)
 create mode 100644 src/app/(app)/cari/[id]/page.tsx
 create mode 100644 src/app/(app)/cari/page.tsx
 create mode 100644 src/features/contacts/components/contact-dialogs.tsx
 create mode 100644 src/features/contacts/components/contact-statement-view.tsx
 create mode 100644 src/features/contacts/components/contacts-view.tsx
 create mode 100644 src/features/contacts/components/due-banner.tsx

diff --git a/src/app/(app)/cari/[id]/page.tsx b/src/app/(app)/cari/[id]/page.tsx
new file mode 100644
index 0000000..0db1f1c
--- /dev/null
+++ b/src/app/(app)/cari/[id]/page.tsx
@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ContactStatementView } from "@/features/contacts/components/contact-statement-view";
+import { getContactStatement } from "@/features/contacts/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+export const metadata: Metadata = { title: tr.contacts.statement };
+
+/** /cari/:id — cari ekstresi (gizli cari yalnızca sahibine; aksi 404). */
+export default async function ContactPage({ params }: PageProps<"/cari/[id]">) {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const { id } = await params;
+  const data = await getContactStatement(user.id, household.id, id);
+  if (!data) notFound();
+  return <ContactStatementView key={id} data={data} />;
+}
diff --git a/src/app/(app)/cari/page.tsx b/src/app/(app)/cari/page.tsx
new file mode 100644
index 0000000..5552f78
--- /dev/null
+++ b/src/app/(app)/cari/page.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { PageHeader } from "@/components/page-header";
+import { ContactsView } from "@/features/contacts/components/contacts-view";
+import { listContacts } from "@/features/contacts/service";
+import { hasHouseholdRole } from "@/features/households/roles";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+export const metadata: Metadata = { title: tr.contacts.title };
+
+export default async function ContactsPage() {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const data = await listContacts(user.id, household.id);
+  if (!data) notFound();
+  return (
+    <>
+      <PageHeader title={tr.contacts.title} description={tr.contacts.description} />
+      <ContactsView data={data} canWrite={hasHouseholdRole(household.role, "member")} />
+    </>
+  );
+}
diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
index 7ea3637..4f6aae1 100644
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -3,6 +3,7 @@ import { Suspense } from "react";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { SummaryCardsSkeleton } from "@/features/dashboard/components/summary-cards-skeleton";
+import { ContactsDueBanner } from "@/features/contacts/components/due-banner";
 import { OverdueBanner } from "@/features/recurring/components/overdue-banner";
 import { tr } from "@/i18n/tr";
 import { requireActiveHousehold } from "@/lib/dal";
@@ -63,6 +64,9 @@ export default async function DashboardPage() {
       <Suspense fallback={null}>
         <OverdueBanner userId={user.id} householdId={household.id} />
       </Suspense>
+      <Suspense fallback={null}>
+        <ContactsDueBanner userId={user.id} householdId={household.id} />
+      </Suspense>
       <Suspense fallback={<SummaryCardsSkeleton />}>
         <SummaryCards />
       </Suspense>
diff --git a/src/components/layout/nav-config.ts b/src/components/layout/nav-config.ts
index 239e67f..d21cd79 100644
--- a/src/components/layout/nav-config.ts
+++ b/src/components/layout/nav-config.ts
@@ -27,7 +27,7 @@ export type NavItem = {
 
 /** Şu an tamamlanmış en yüksek faz — sayfalar eklendikçe artar. */
 /** Alt fazlar ondalıkla: 6.1 = Faz 6a. */
-export const CURRENT_PHASE = 7.2;
+export const CURRENT_PHASE = 8.1;
 
 export const isAvailable = (item: NavItem) => item.phase <= CURRENT_PHASE;
 
@@ -37,7 +37,7 @@ export const MAIN_NAV: NavItem[] = [
   { href: "/hesaplar", label: tr.nav.accounts, icon: Wallet, phase: 6.1 },
   { href: "/kategoriler", label: tr.nav.categories, icon: Tags, phase: 6.1 },
   { href: "/planli", label: tr.nav.planned, icon: CalendarClock, phase: 7.1 },
-  { href: "/cari", label: tr.nav.contacts, icon: Users, phase: 8 },
+  { href: "/cari", label: tr.nav.contacts, icon: Users, phase: 8.1 },
   { href: "/birikim", label: tr.nav.savings, icon: Coins, phase: 9 },
   { href: "/butce", label: tr.nav.budget, icon: Target, phase: 10 },
   { href: "/stok", label: tr.nav.stock, icon: Package, phase: 11 },
diff --git a/src/features/contacts/components/contact-dialogs.tsx b/src/features/contacts/components/contact-dialogs.tsx
new file mode 100644
index 0000000..52ea6e6
--- /dev/null
+++ b/src/features/contacts/components/contact-dialogs.tsx
@@ -0,0 +1,434 @@
+"use client";
+
+import { Loader2, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { MoneyInput } from "@/components/money-input";
+import { ResponsiveDialog } from "@/components/responsive-dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  getTransactionFormOptionsAction,
+  setTransactionDeletedAction,
+} from "@/features/transactions/actions";
+import { AccountSelect } from "@/features/transactions/components/transaction-form";
+import type { TransactionFormOptions, TransactionListItem } from "@/features/transactions/service";
+import { tr } from "@/i18n/tr";
+import {
+  CONTACT_ENTRY_KINDS,
+  CONTACT_RELATIONS,
+  isOutgoing,
+  type ContactEntryKind,
+  type ContactRelation,
+} from "@/shared/contacts";
+import { todayIstanbul } from "@/shared/dates";
+import { formatMoneyInput } from "@/shared/money";
+import { saveContactAction, saveContactEntryAction } from "../actions";
+import type { ContactView } from "../service";
+
+const t = tr.contacts;
+type Errors = Record<string, string | undefined>;
+
+/** Cari oluştur / düzenle. */
+export function ContactFormDialog({
+  open,
+  contact,
+  onOpenChange,
+}: {
+  open: boolean;
+  contact: ContactView | null;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return open ? (
+    <ContactForm key={contact?.id ?? "new"} contact={contact} onClose={() => onOpenChange(false)} />
+  ) : null;
+}
+
+function ContactForm({ contact, onClose }: { contact: ContactView | null; onClose: () => void }) {
+  const [v, setV] = useState({
+    name: contact?.name ?? "",
+    relation: (contact?.relation ?? "friend") as ContactRelation,
+    phone: contact?.phone ?? "",
+    note: contact?.note ?? "",
+    openingBalance: contact?.openingBalanceMinor
+      ? formatMoneyInput(contact.openingBalanceMinor)
+      : "",
+    openingDate: contact?.openingDate ?? todayIstanbul(),
+    dueDate: contact?.dueDate ?? "",
+    reminderDays: String(contact?.reminderDays ?? 3),
+    isPrivate: contact?.isPrivate ?? false,
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [busy, setBusy] = useState(false);
+  const set = <K extends keyof typeof v>(k: K, value: (typeof v)[K]) =>
+    setV((x) => ({ ...x, [k]: value }));
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    const r = await saveContactAction(contact?.id ?? null, v);
+    setBusy(false);
+    if (r.ok) {
+      toast.success(contact ? t.toast.updated : t.toast.created);
+      onClose();
+    } else setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
+  }
+
+  const f = t.fields;
+  return (
+    <ResponsiveDialog
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={contact ? t.editTitle : t.createTitle}
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={onClose}>
+            {tr.common.cancel}
+          </Button>
+          <Button type="submit" form="contact-form" disabled={busy}>
+            {busy ? <Loader2 className="animate-spin" /> : null}
+            {tr.common.save}
+          </Button>
+        </>
+      }
+    >
+      <form id="contact-form" onSubmit={submit} noValidate>
+        <FieldGroup>
+          <Field data-invalid={Boolean(errors.name)}>
+            <FieldLabel htmlFor="ct-name">{f.name}</FieldLabel>
+            <Input
+              id="ct-name"
+              value={v.name}
+              onChange={(e) => set("name", e.target.value)}
+              aria-invalid={Boolean(errors.name)}
+              autoFocus
+            />
+            {errors.name ? <FieldError>{errors.name}</FieldError> : null}
+          </Field>
+          <div className="grid grid-cols-2 gap-3">
+            <Field>
+              <FieldLabel htmlFor="ct-relation">{f.relation}</FieldLabel>
+              <Select
+                value={v.relation}
+                onValueChange={(x) => set("relation", x as ContactRelation)}
+              >
+                <SelectTrigger id="ct-relation" className="w-full">
+                  <SelectValue>{t.relations[v.relation]}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {CONTACT_RELATIONS.map((r) => (
+                    <SelectItem key={r} value={r}>
+                      {t.relations[r]}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field data-invalid={Boolean(errors.phone)}>
+              <FieldLabel htmlFor="ct-phone">{f.phone}</FieldLabel>
+              <Input
+                id="ct-phone"
+                type="tel"
+                inputMode="tel"
+                value={v.phone}
+                onChange={(e) => set("phone", e.target.value)}
+                aria-invalid={Boolean(errors.phone)}
+              />
+              {errors.phone ? <FieldError>{errors.phone}</FieldError> : null}
+            </Field>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <Field data-invalid={Boolean(errors.openingBalance)}>
+              <FieldLabel htmlFor="ct-opening">{f.openingBalance}</FieldLabel>
+              <MoneyInput
+                id="ct-opening"
+                value={v.openingBalance}
+                onChange={(x) => set("openingBalance", x)}
+                allowNegative
+              />
+              {errors.openingBalance ? <FieldError>{errors.openingBalance}</FieldError> : null}
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="ct-opening-date">{tr.transactions.fields.date}</FieldLabel>
+              <Input
+                id="ct-opening-date"
+                type="date"
+                value={v.openingDate}
+                onChange={(e) => set("openingDate", e.target.value)}
+              />
+            </Field>
+          </div>
+          <FieldDescription className="-mt-2">{f.openingHint}</FieldDescription>
+          <DueFields
+            dueDate={v.dueDate}
+            reminderDays={v.reminderDays}
+            onChange={(d, r) => setV((x) => ({ ...x, dueDate: d, reminderDays: r }))}
+            errors={errors}
+          />
+          <Field>
+            <FieldLabel htmlFor="ct-note">{f.note}</FieldLabel>
+            <Textarea
+              id="ct-note"
+              rows={2}
+              value={v.note}
+              onChange={(e) => set("note", e.target.value)}
+            />
+          </Field>
+          <label className="flex items-start gap-2 text-sm">
+            <Checkbox
+              checked={v.isPrivate}
+              onCheckedChange={(x) => set("isPrivate", x === true)}
+              className="mt-0.5"
+            />
+            {f.isPrivate}
+          </label>
+          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
+        </FieldGroup>
+      </form>
+    </ResponsiveDialog>
+  );
+}
+
+function DueFields({
+  dueDate,
+  reminderDays,
+  onChange,
+  errors,
+}: {
+  dueDate: string;
+  reminderDays: string;
+  onChange: (dueDate: string, reminderDays: string) => void;
+  errors: Errors;
+}) {
+  const f = t.fields;
+  return (
+    <div className="grid grid-cols-2 gap-3">
+      <Field data-invalid={Boolean(errors.dueDate)}>
+        <FieldLabel htmlFor="ct-due">{f.dueDate}</FieldLabel>
+        <Input
+          id="ct-due"
+          type="date"
+          value={dueDate}
+          onChange={(e) => onChange(e.target.value, reminderDays)}
+          aria-describedby="ct-due-hint"
+        />
+        <FieldDescription id="ct-due-hint">{f.dueHint}</FieldDescription>
+        {errors.dueDate ? <FieldError>{errors.dueDate}</FieldError> : null}
+      </Field>
+      <Field data-invalid={Boolean(errors.reminderDays)}>
+        <FieldLabel htmlFor="ct-remind">{f.reminderDays}</FieldLabel>
+        <Input
+          id="ct-remind"
+          type="number"
+          inputMode="numeric"
+          min={0}
+          max={60}
+          value={reminderDays}
+          onChange={(e) => onChange(dueDate, e.target.value)}
+          disabled={!dueDate}
+        />
+      </Field>
+    </div>
+  );
+}
+
+export type EntryMode = {
+  contact: ContactView;
+  entry?: TransactionListItem;
+  kind?: ContactEntryKind;
+};
+
+/** Cari hareketi ekle / düzenle (düzenlemede sil). */
+export function ContactEntryDialog({
+  mode,
+  onClose,
+}: {
+  mode: EntryMode | null;
+  onClose: () => void;
+}) {
+  return mode ? (
+    <EntryForm key={mode.entry?.id ?? `new-${mode.kind ?? ""}`} mode={mode} onClose={onClose} />
+  ) : null;
+}
+
+function EntryForm({ mode, onClose }: { mode: EntryMode; onClose: () => void }) {
+  const { contact, entry } = mode;
+  const [options, setOptions] = useState<TransactionFormOptions | null>(null);
+  const [kind, setKind] = useState<ContactEntryKind>(
+    entry?.contact?.kind ?? mode.kind ?? (contact.balanceMinor < 0 ? "repay" : "lend"),
+  );
+  const [v, setV] = useState({
+    accountId: entry?.account?.id ?? entry?.toAccount?.id ?? "",
+    amount: entry ? formatMoneyInput(entry.amountMinor) : "",
+    date: entry?.date ?? todayIstanbul(),
+    description: entry?.description ?? "",
+    dueDate: contact.dueDate ?? "",
+    reminderDays: String(contact.reminderDays),
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    getTransactionFormOptionsAction().then((r) => {
+      if (cancelled || !r.ok) return;
+      setOptions(r.data);
+      setV((x) => (x.accountId ? x : { ...x, accountId: r.data.accounts[0]?.id ?? "" }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const accounts = (() => {
+    const list = [...(options?.accounts ?? [])];
+    const current = entry?.account ?? entry?.toAccount;
+    if (current && !list.some((a) => a.id === current.id))
+      list.push({ ...current, type: "bank", icon: "wallet", color: "slate" });
+    return list;
+  })();
+  const createsDebt = kind === "lend" || kind === "borrow";
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    const payload = {
+      kind,
+      accountId: v.accountId,
+      amount: v.amount,
+      date: v.date,
+      description: v.description,
+      // Vade yalnızca borç veren/alan harekette güncellenir.
+      ...(createsDebt ? { dueDate: v.dueDate, reminderDays: v.reminderDays } : {}),
+    };
+    const r = await saveContactEntryAction(contact.id, entry?.id ?? null, payload);
+    setBusy(false);
+    if (r.ok) {
+      toast.success(t.toast.entrySaved);
+      onClose();
+    } else setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
+  }
+
+  async function remove() {
+    if (!entry) return;
+    const r = await setTransactionDeletedAction(entry.id, true);
+    if (!r.ok) return void toast.error(r.error);
+    onClose();
+    toast.success(tr.transactions.toast.deleted, {
+      duration: 10_000,
+      action: {
+        label: tr.transactions.actions.restore,
+        onClick: async () => {
+          const x = await setTransactionDeletedAction(entry.id, false);
+          if (x.ok) toast.success(tr.transactions.toast.restored);
+          else toast.error(x.error);
+        },
+      },
+    });
+  }
+
+  const f = t.fields;
+  return (
+    <ResponsiveDialog
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={`${entry ? t.editEntryTitle : t.entryTitle} · ${contact.name}`}
+      footer={
+        <>
+          {entry ? (
+            <Button variant="destructive" type="button" onClick={remove} className="sm:mr-auto">
+              <Trash2 />
+              {tr.transactions.actions.delete}
+            </Button>
+          ) : null}
+          <Button variant="outline" type="button" onClick={onClose}>
+            {tr.common.cancel}
+          </Button>
+          <Button type="submit" form="contact-entry-form" disabled={busy || !options}>
+            {busy ? <Loader2 className="animate-spin" /> : null}
+            {tr.common.save}
+          </Button>
+        </>
+      }
+    >
+      <form id="contact-entry-form" onSubmit={submit} noValidate>
+        <FieldGroup>
+          <Tabs value={kind} onValueChange={(x) => setKind(x as ContactEntryKind)}>
+            <TabsList className="grid h-auto w-full grid-cols-2 sm:grid-cols-4">
+              {CONTACT_ENTRY_KINDS.map((k) => (
+                <TabsTrigger key={k} value={k}>
+                  {t.kinds[k]}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+          <p className="-mt-2 text-xs text-muted-foreground">{t.kindHints[kind]}</p>
+          <div className="grid grid-cols-[1fr_auto] gap-3">
+            <Field data-invalid={Boolean(errors.amount)}>
+              <FieldLabel htmlFor="ce-amount">{tr.transactions.fields.amount}</FieldLabel>
+              <MoneyInput
+                id="ce-amount"
+                value={v.amount}
+                onChange={(x) => setV((s) => ({ ...s, amount: x }))}
+                aria-invalid={Boolean(errors.amount)}
+                autoFocus
+              />
+              {errors.amount ? <FieldError>{errors.amount}</FieldError> : null}
+            </Field>
+            <Field data-invalid={Boolean(errors.date)}>
+              <FieldLabel htmlFor="ce-date">{tr.transactions.fields.date}</FieldLabel>
+              <Input
+                id="ce-date"
+                type="date"
+                value={v.date}
+                onChange={(e) => setV((s) => ({ ...s, date: e.target.value }))}
+              />
+              {errors.date ? <FieldError>{errors.date}</FieldError> : null}
+            </Field>
+          </div>
+          <Field data-invalid={Boolean(errors.accountId)}>
+            <FieldLabel htmlFor="ce-account">
+              {isOutgoing(kind) ? f.fromAccount : f.toAccount}
+            </FieldLabel>
+            <AccountSelect
+              id="ce-account"
+              value={v.accountId}
+              onChange={(x) => setV((s) => ({ ...s, accountId: x }))}
+              accounts={accounts}
+              invalid={Boolean(errors.accountId)}
+            />
+            {errors.accountId ? <FieldError>{errors.accountId}</FieldError> : null}
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="ce-description">{tr.transactions.fields.description}</FieldLabel>
+            <Input
+              id="ce-description"
+              value={v.description}
+              onChange={(e) => setV((s) => ({ ...s, description: e.target.value }))}
+            />
+          </Field>
+          {createsDebt ? (
+            <DueFields
+              dueDate={v.dueDate}
+              reminderDays={v.reminderDays}
+              onChange={(d, r) => setV((s) => ({ ...s, dueDate: d, reminderDays: r }))}
+              errors={errors}
+            />
+          ) : null}
+          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
+        </FieldGroup>
+      </form>
+    </ResponsiveDialog>
+  );
+}
diff --git a/src/features/contacts/components/contact-statement-view.tsx b/src/features/contacts/components/contact-statement-view.tsx
new file mode 100644
index 0000000..83b8827
--- /dev/null
+++ b/src/features/contacts/components/contact-statement-view.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { ArrowLeft, Lock, Pencil, Phone, Plus } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { PageHeader } from "@/components/page-header";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatDate, formatMoney } from "@/shared/format";
+import type { ContactStatement } from "../service";
+import { ContactEntryDialog, ContactFormDialog, type EntryMode } from "./contact-dialogs";
+import { ContactBalance, DueBadge } from "./contacts-view";
+
+const t = tr.contacts;
+const d = (ymd: string) => formatDate(`${ymd}T12:00:00+03:00`);
+
+function Delta({ minor }: { minor: number }) {
+  return (
+    <span
+      className={cn(
+        "font-semibold whitespace-nowrap tabular-nums",
+        minor > 0 ? "text-income" : "text-expense",
+      )}
+    >
+      {minor > 0 ? "+" : "−"}
+      {formatMoney(Math.abs(minor))}
+    </span>
+  );
+}
+
+/** Cari ekstresi: hareketler (yeniden eskiye) ve yürüyen bakiye (+ bana borçlu, − ben borçluyum). */
+export function ContactStatementView({ data }: { data: ContactStatement }) {
+  const c = data.contact;
+  const [entry, setEntry] = useState<EntryMode | null>(null);
+  const [editing, setEditing] = useState(false);
+  const canWrite = data.canWrite && !c.archived;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
+        <Link href="/cari">
+          <ArrowLeft />
+          {t.title}
+        </Link>
+      </Button>
+      <PageHeader
+        title={c.name}
+        description={t.relations[c.relation]}
+        actions={
+          data.canWrite ? (
+            <>
+              <Button variant="outline" onClick={() => setEditing(true)}>
+                <Pencil />
+                <span className="hidden sm:inline">{tr.common.edit}</span>
+              </Button>
+              {canWrite ? (
+                <Button onClick={() => setEntry({ contact: c })}>
+                  <Plus />
+                  {t.newEntry}
+                </Button>
+              ) : null}
+            </>
+          ) : null
+        }
+      />
+      <Card>
+        <CardContent className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-col gap-1 text-sm">
+            <DueBadge contact={c} />
+            {c.phone ? (
+              <a
+                href={`tel:${c.phone}`}
+                className="inline-flex items-center gap-1.5 hover:underline"
+              >
+                <Phone className="size-3.5" aria-hidden />
+                {c.phone}
+              </a>
+            ) : null}
+            {c.isPrivate ? (
+              <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Lock className="size-3.5" aria-hidden />
+                {t.privateBadge}
+              </span>
+            ) : null}
+            {c.note ? <p className="text-muted-foreground">{c.note}</p> : null}
+          </div>
+          <ContactBalance minor={c.balanceMinor} className="text-lg" />
+        </CardContent>
+      </Card>
+
+      <h2 className="text-base font-medium">{t.statement}</h2>
+      {data.rows.length === 0 && c.openingBalanceMinor === 0 ? (
+        <Card>
+          <CardHeader>
+            <CardDescription>{t.emptyEntries}</CardDescription>
+          </CardHeader>
+        </Card>
+      ) : (
+        <ul className="divide-y rounded-xl border bg-card">
+          {data.rows.map((r) => {
+            const content = (
+              <>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate font-medium">
+                    {tr.contacts.kinds[r.item.contact!.kind]}
+                  </span>
+                  <span className="block truncate text-xs text-muted-foreground">
+                    {d(r.item.date)} · {r.item.account?.name ?? r.item.toAccount?.name ?? "—"}
+                    {r.item.description ? ` · ${r.item.description}` : ""}
+                  </span>
+                </span>
+                <span className="flex flex-col items-end">
+                  <Delta minor={r.deltaMinor} />
+                  <span
+                    className="text-xs text-muted-foreground tabular-nums"
+                    title={t.runningBalance}
+                  >
+                    {formatMoney(r.balanceMinor)}
+                  </span>
+                </span>
+              </>
+            );
+            const cls = "flex w-full items-center gap-3 p-3 text-left";
+            return (
+              <li key={r.item.id}>
+                {canWrite ? (
+                  <button
+                    type="button"
+                    className={cn(cls, "outline-none hover:bg-muted/50 focus-visible:bg-muted")}
+                    onClick={() => setEntry({ contact: c, entry: r.item })}
+                  >
+                    {content}
+                  </button>
+                ) : (
+                  <div className={cls}>{content}</div>
+                )}
+              </li>
+            );
+          })}
+          <li className="flex items-center gap-3 p-3 text-sm text-muted-foreground">
+            <span className="flex-1">
+              {t.opening} · {d(c.openingDate)}
+            </span>
+            <span className="tabular-nums">{formatMoney(c.openingBalanceMinor)}</span>
+          </li>
+        </ul>
+      )}
+
+      <ContactEntryDialog mode={entry} onClose={() => setEntry(null)} />
+      <ContactFormDialog open={editing} contact={c} onOpenChange={setEditing} />
+    </div>
+  );
+}
diff --git a/src/features/contacts/components/contacts-view.tsx b/src/features/contacts/components/contacts-view.tsx
new file mode 100644
index 0000000..8b336a6
--- /dev/null
+++ b/src/features/contacts/components/contacts-view.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import {
+  Archive,
+  ArchiveRestore,
+  ChevronDown,
+  EllipsisVertical,
+  Lock,
+  Pencil,
+  Plus,
+  Users,
+} from "lucide-react";
+import Link from "next/link";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatDate, formatMoney } from "@/shared/format";
+import { setContactArchivedAction } from "../actions";
+import type { ContactList, ContactView } from "../service";
+import { ContactEntryDialog, ContactFormDialog, type EntryMode } from "./contact-dialogs";
+
+const t = tr.contacts;
+const d = (ymd: string) => formatDate(`${ymd}T12:00:00+03:00`);
+
+export function ContactBalance({ minor, className }: { minor: number; className?: string }) {
+  const label = minor > 0 ? t.balance.owesMe : minor < 0 ? t.balance.iOwe : t.balance.settled;
+  return (
+    <span className={cn("flex flex-col items-end", className)}>
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span
+        className={cn(
+          "font-semibold whitespace-nowrap tabular-nums",
+          minor > 0 && "text-income",
+          minor < 0 && "text-expense",
+        )}
+      >
+        {formatMoney(Math.abs(minor))}
+      </span>
+    </span>
+  );
+}
+
+export function DueBadge({ contact }: { contact: ContactView }) {
+  if (!contact.dueDate || contact.balanceMinor === 0) return null;
+  if (contact.due === "overdue")
+    return <Badge variant="destructive">{t.due.overdue(d(contact.dueDate))}</Badge>;
+  if (contact.due === "upcoming")
+    return <Badge variant="secondary">{t.due.upcoming(d(contact.dueDate))}</Badge>;
+  return <Badge variant="outline">{t.due.on(d(contact.dueDate))}</Badge>;
+}
+
+export function ContactsView({ data, canWrite }: { data: ContactList; canWrite: boolean }) {
+  const [form, setForm] = useState<{ contact: ContactView | null } | null>(null);
+  const [entry, setEntry] = useState<EntryMode | null>(null);
+  const [archivedOpen, setArchivedOpen] = useState(false);
+  const [, startTransition] = useTransition();
+  const active = data.contacts.filter((c) => !c.archived);
+  const archived = data.contacts.filter((c) => c.archived);
+
+  function archive(c: ContactView, value: boolean) {
+    startTransition(async () => {
+      const r = await setContactArchivedAction(c.id, value);
+      if (r.ok) toast.success(value ? t.toast.archived : t.toast.unarchived);
+      else toast.error(r.error);
+    });
+  }
+
+  const row = (c: ContactView) => (
+    <li key={c.id} className={cn("flex items-center gap-3 p-3", c.archived && "opacity-60")}>
+      <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+        <Users className="size-4.5" />
+      </span>
+      <div className="min-w-0 flex-1">
+        <span className="flex items-center gap-1.5">
+          <Link href={`/cari/${c.id}`} className="truncate font-medium hover:underline">
+            {c.name}
+          </Link>
+          {c.isPrivate ? (
+            <Lock className="size-3.5 shrink-0 text-muted-foreground" aria-label={t.privateBadge} />
+          ) : null}
+        </span>
+        <span className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+          <span>{t.relations[c.relation]}</span>
+          {c.lastActivity ? <span>· {t.lastActivity(d(c.lastActivity))}</span> : null}
+          <DueBadge contact={c} />
+        </span>
+      </div>
+      <ContactBalance minor={c.balanceMinor} />
+      {canWrite ? (
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon-sm" variant="ghost" aria-label={tr.recurring.actions.more}>
+              <EllipsisVertical />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {!c.archived ? (
+              <DropdownMenuItem onSelect={() => setEntry({ contact: c })}>
+                <Plus />
+                {t.newEntry}
+              </DropdownMenuItem>
+            ) : null}
+            <DropdownMenuItem onSelect={() => setForm({ contact: c })}>
+              <Pencil />
+              {tr.common.edit}
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => archive(c, !c.archived)}>
+              {c.archived ? <ArchiveRestore /> : <Archive />}
+              {c.archived ? t.unarchive : t.archive}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </li>
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-3 gap-3">
+        {(
+          [
+            [t.summary.owesMe, data.totals.owesMeMinor, "text-income"],
+            [t.summary.iOwe, data.totals.iOweMinor, "text-expense"],
+            [t.summary.net, data.totals.owesMeMinor - data.totals.iOweMinor, ""],
+          ] as const
+        ).map(([label, value, tone]) => (
+          <Card key={label} size="sm">
+            <CardHeader>
+              <CardDescription>{label}</CardDescription>
+              <CardTitle className={cn("text-base tabular-nums", tone)}>
+                {formatMoney(value)}
+              </CardTitle>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+      {canWrite ? (
+        <div className="flex justify-end">
+          <Button onClick={() => setForm({ contact: null })}>
+            <Plus />
+            {t.new}
+          </Button>
+        </div>
+      ) : null}
+      {active.length === 0 ? (
+        <Card>
+          <CardHeader>
+            <CardDescription>{t.empty}</CardDescription>
+          </CardHeader>
+        </Card>
+      ) : (
+        <ul className="divide-y rounded-xl border bg-card">{active.map(row)}</ul>
+      )}
+      {archived.length ? (
+        <Collapsible open={archivedOpen} onOpenChange={setArchivedOpen}>
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" size="sm" className="-ml-2 w-fit">
+              <ChevronDown className={cn("transition-transform", archivedOpen && "rotate-180")} />
+              {t.archivedSection(archived.length)}
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pt-2">
+            <ul className="divide-y rounded-xl border bg-card">{archived.map(row)}</ul>
+          </CollapsibleContent>
+        </Collapsible>
+      ) : null}
+      <ContactFormDialog
+        open={Boolean(form)}
+        contact={form?.contact ?? null}
+        onOpenChange={(o) => !o && setForm(null)}
+      />
+      <ContactEntryDialog mode={entry} onClose={() => setEntry(null)} />
+    </div>
+  );
+}
diff --git a/src/features/contacts/components/due-banner.tsx b/src/features/contacts/components/due-banner.tsx
new file mode 100644
index 0000000..6a79cf3
--- /dev/null
+++ b/src/features/contacts/components/due-banner.tsx
@@ -0,0 +1,29 @@
+import { HandCoins } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { tr } from "@/i18n/tr";
+import { countDueContacts } from "../service";
+
+/** Dashboard: vadesi geçmiş veya yaklaşan cari borç/alacak uyarısı (Faz 8 kararı: uygulama içi). */
+export async function ContactsDueBanner({
+  userId,
+  householdId,
+}: {
+  userId: string;
+  householdId: string;
+}) {
+  const n = await countDueContacts(userId, householdId);
+  if (!n) return null;
+  return (
+    <div
+      role="status"
+      className="flex flex-wrap items-center gap-3 rounded-xl border border-budget/30 bg-budget/10 p-3 text-sm"
+    >
+      <HandCoins className="size-4 shrink-0 text-budget" aria-hidden />
+      <span className="flex-1">{tr.contacts.dueBanner(n)}</span>
+      <Button asChild size="sm" variant="outline">
+        <Link href="/cari">{tr.contacts.dueLink}</Link>
+      </Button>
+    </div>
+  );
+}
diff --git a/src/features/transactions/components/transaction-form.tsx b/src/features/transactions/components/transaction-form.tsx
index bc73100..8be7bd7 100644
--- a/src/features/transactions/components/transaction-form.tsx
+++ b/src/features/transactions/components/transaction-form.tsx
@@ -102,7 +102,7 @@ function toValues(mode: TransactionFormMode, options: TransactionFormOptions | n
     type: x.type,
     amount: formatMoneyInput(x.amountMinor),
     date: mode.kind === "copy" ? todayIstanbul() : x.date,
-    accountId: x.account.id,
+    accountId: x.account?.id ?? "",
     toAccountId: x.toAccount?.id ?? "",
     categoryId: x.categoryId ?? "",
     splits: x.splits.map((s) => ({
diff --git a/src/features/transactions/components/transaction-parts.tsx b/src/features/transactions/components/transaction-parts.tsx
index c41cb32..e57d501 100644
--- a/src/features/transactions/components/transaction-parts.tsx
+++ b/src/features/transactions/components/transaction-parts.tsx
@@ -1,6 +1,16 @@
 "use client";
 
-import { ArrowLeftRight, CheckCheck, Copy, Pencil, Scale, Split, Trash2 } from "lucide-react";
+import {
+  ArrowLeftRight,
+  Users,
+  CheckCheck,
+  Copy,
+  Pencil,
+  Scale,
+  Split,
+  Trash2,
+} from "lucide-react";
+import Link from "next/link";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
 import { IconBadge } from "@/components/appearance/swatch";
@@ -83,6 +93,13 @@ export function RowIcon({ item }: { item: TransactionListItem }) {
       </span>
     );
   }
+  if (item.contact) {
+    return (
+      <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+        <Users 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">
@@ -112,6 +129,7 @@ export function rowTitle(item: TransactionListItem) {
 
 function baseTitle(item: TransactionListItem) {
   if (item.isAdjustment) return t.adjustment;
+  if (item.contact) return item.contact.name;
   if (item.payeeName) return item.payeeName;
   if (item.description) return item.description;
   if (item.type === "transfer") return t.types.transfer;
@@ -119,14 +137,18 @@ function baseTitle(item: TransactionListItem) {
 }
 
 export function rowSubtitle(item: TransactionListItem) {
+  if (item.contact) {
+    const account = item.account?.name ?? item.toAccount?.name ?? "—";
+    return `${tr.contacts.kinds[item.contact.kind]} · ${account}`;
+  }
   if (item.type === "transfer")
-    return t.list.transfer(item.account.name, item.toAccount?.name ?? "—");
+    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}`;
+  return `${what} · ${item.account?.name ?? "—"}`;
 }
 
 function DetailDialog({
@@ -167,8 +189,15 @@ function DetailDialog({
               <Trash2 />
               {t.actions.delete}
             </Button>
-            {/* Mutabakat düzeltmesi düzenlenemez/kopyalanamaz; yalnızca silinebilir. */}
-            {detail.isAdjustment ? null : (
+            {/* Mutabakat düzeltmesi düzenlenemez/kopyalanamaz; cari hareketi cari sayfasında. */}
+            {detail.contact ? (
+              <Button asChild>
+                <Link href={`/cari/${detail.contact.id}`}>
+                  <Pencil />
+                  {tr.contacts.openContact}
+                </Link>
+              </Button>
+            ) : detail.isAdjustment ? null : (
               <>
                 <Button variant="outline" onClick={() => onCopy(detail)}>
                   <Copy />
@@ -202,10 +231,20 @@ function DetailDialog({
           <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.contact
+              ? row(
+                  tr.contacts.contact,
+                  <Link href={`/cari/${detail.contact.id}`} className="hover:underline">
+                    {detail.contact.name} · {tr.contacts.kinds[detail.contact.kind]}
+                  </Link>,
+                )
+              : null}
+            {detail.account
+              ? row(
+                  detail.type === "transfer" ? t.fields.fromAccount : t.fields.account,
+                  detail.account.name,
+                )
+              : null}
             {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}
diff --git a/src/i18n/tr.ts b/src/i18n/tr.ts
index ed76a71..8c06966 100644
--- a/src/i18n/tr.ts
+++ b/src/i18n/tr.ts
@@ -298,6 +298,7 @@ export const tr = {
       total: (n: number) => `${n} işlem`,
       sums: { income: "Gelir", expense: "Gider", net: "Net" },
       hiddenAccount: "Gizli hesap",
+      hiddenContact: "Gizli cari",
     },
     filters: {
       title: "Filtreler",
@@ -361,6 +362,7 @@ export const tr = {
       "Mutabakat düzeltmesi düzenlenemez; gerekirse silip mutabakatı yeniden yapın.",
     reconciled: "Mutabakatı yapıldı",
     cancelInstallments: "Kalan taksitleri iptal et",
+    contactEditHint: "Cari hareketi cari sayfasından düzenlenir.",
     readOnly: "İzleyici rolündesiniz; işlem ekleyemezsiniz.",
     noAccounts: "İşlem girmek için önce bir hesap gerekli.",
     noAccountsLink: "Hesaplara git",
@@ -473,6 +475,80 @@ export const tr = {
       upload: "Dosya yüklenemedi.",
     },
   },
+  contacts: {
+    title: "Cari hesaplar",
+    description:
+      "Kişilerle borç-alacak takibi. Cari hareketleri transferdir; gelir/gider raporlarına girmez.",
+    contact: "Cari",
+    openContact: "Cariyi aç",
+    new: "Yeni cari",
+    createTitle: "Yeni cari",
+    editTitle: "Cariyi düzenle",
+    relations: {
+      family: "Aile / akraba",
+      friend: "Arkadaş",
+      neighbor: "Komşu",
+      work: "İş",
+      other: "Diğer",
+    },
+    kinds: { lend: "Borç verdim", repay: "Borç ödedim", borrow: "Borç aldım", collect: "Tahsilat" },
+    kindHints: {
+      lend: "Hesabınızdan kişiye para verdiniz; size borçlanır.",
+      repay: "Kişiye olan borcunuzu hesabınızdan ödediniz.",
+      borrow: "Kişiden hesabınıza para aldınız; ona borçlanırsınız.",
+      collect: "Kişinin size olan borcunu hesabınıza tahsil ettiniz.",
+    },
+    fields: {
+      name: "Ad soyad",
+      relation: "Yakınlık",
+      phone: "Telefon",
+      note: "Not",
+      openingBalance: "Açılış bakiyesi (TL)",
+      openingHint:
+        "Uygulamadan önceki durum: size borçluysa pozitif, siz borçluysanız başına - koyarak girin.",
+      isPrivate: "Yalnızca ben (bu cariyi ve hareketlerini yalnızca ben görürüm)",
+      dueDate: "Vade tarihi",
+      dueHint: "Kalan bakiyenin ödenmesi beklenen tarih (isteğe bağlı).",
+      reminderDays: "Kaç gün önce uyarılsın",
+      account: "Hesap",
+      fromAccount: "Ödemenin çıktığı hesap",
+      toAccount: "Paranın girdiği hesap",
+    },
+    balance: { owesMe: "Bana borçlu", iOwe: "Ben borçluyum", settled: "Hesap kapalı" },
+    summary: { owesMe: "Bana borçlu", iOwe: "Ben borçluyum", net: "Net" },
+    newEntry: "Hareket ekle",
+    entryTitle: "Cari hareketi",
+    editEntryTitle: "Cari hareketini düzenle",
+    due: {
+      overdue: (d: string) => `Vade geçti · ${d}`,
+      upcoming: (d: string) => `Vade yaklaşıyor · ${d}`,
+      on: (d: string) => `Vade · ${d}`,
+    },
+    dueBanner: (n: number) => `${n} carinin vadesi geçti veya yaklaşıyor.`,
+    dueLink: "Carilere git",
+    statement: "Cari ekstresi",
+    opening: "Açılış bakiyesi",
+    runningBalance: "Bakiye",
+    lastActivity: (d: string) => `Son hareket ${d}`,
+    empty: "Henüz cari yok. Borç verdiğiniz veya aldığınız kişileri ekleyin.",
+    emptyEntries: "Henüz hareket yok.",
+    archive: "Arşivle",
+    unarchive: "Arşivden çıkar",
+    archivedSection: (n: number) => `Arşivlenmiş cariler (${n})`,
+    privateBadge: "Yalnızca ben",
+    readOnly: "İzleyici rolündesiniz; cari hareketi ekleyemezsiniz.",
+    toast: {
+      created: "Cari oluşturuldu.",
+      updated: "Cari güncellendi.",
+      entrySaved: "Cari hareketi kaydedildi.",
+      archived: "Cari arşivlendi.",
+      unarchived: "Cari arşivden çıkarıldı.",
+    },
+    errors: {
+      duplicate: "Bu adla bir cari zaten var.",
+      archived: "Arşivlenmiş cariye hareket eklenemez.",
+    },
+  },
   card: {
     title: "Kart özeti",
     debt: "Toplam borç",
@@ -766,6 +842,7 @@ export const tr = {
   validation: {
     nameMin: "Ad en az 2 karakter olmalı",
     nameMax: "Ad en fazla 80 karakter olabilir",
+    phone: "Geçerli bir telefon numarası girin",
     usernameFormat: "Yalnızca küçük harf, rakam, nokta ve alt çizgi; 3–30 karakter",
     email: "Geçerli bir e-posta adresi girin",
     passwordMin: "Şifre en az 8 karakter olmalı",