feat(ui): birikim sayfası, varlık detayı ve hareket diyalogları

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/(app)/birikim/[id]/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { AssetDetailView } from "@/features/assets/components/asset-detail-view";
+import { getAsset } from "@/features/assets/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+export const metadata: Metadata = { title: tr.assets.history };
+
+/** /birikim/:id — varlık hareketleri (gizli varlık yalnızca sahibine; aksi 404). */
+export default async function AssetPage({ params }: PageProps<"/birikim/[id]">) {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const { id } = await params;
+  const data = await getAsset(user.id, household.id, id);
+  if (!data) notFound();
+  return <AssetDetailView key={id} data={data} />;
+}

src/app/(app)/birikim/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { PageHeader } from "@/components/page-header";
+import { AssetsView } from "@/features/assets/components/assets-view";
+import { listAssets } from "@/features/assets/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+export const metadata: Metadata = { title: tr.assets.title };
+
+/** /birikim — altın, döviz ve ziynet varlıkları; ortalama maliyet ve kâr/zarar. */
+export default async function AssetsPage() {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const data = await listAssets(user.id, household.id);
+  if (!data) notFound();
+  return (
+    <>
+      <PageHeader title={tr.assets.title} description={tr.assets.description} />
+      <AssetsView items={data.items} totals={data.totals} canWrite={data.canWrite} />
+    </>
+  );
+}

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 = 8.2;
+export const CURRENT_PHASE = 9.1;
 
 export const isAvailable = (item: NavItem) => item.phase <= CURRENT_PHASE;
 
@@ -38,7 +38,7 @@ export const MAIN_NAV: NavItem[] = [
   { 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.1 },
-  { href: "/birikim", label: tr.nav.savings, icon: Coins, phase: 9 },
+  { href: "/birikim", label: tr.nav.savings, icon: Coins, phase: 9.1 },
   { href: "/butce", label: tr.nav.budget, icon: Target, phase: 10 },
   { href: "/stok", label: tr.nav.stock, icon: Package, phase: 11 },
   { href: "/alisveris", label: tr.nav.shopping, icon: ShoppingCart, phase: 13 },

src/features/assets/components/asset-detail-view.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import {
+  ArrowLeft,
+  EllipsisVertical,
+  Gift,
+  HandCoins,
+  Lock,
+  Pencil,
+  ShoppingBag,
+  Trash2,
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { PageHeader } from "@/components/page-header";
+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, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { tr } from "@/i18n/tr";
+import { ASSETS, formatAssetQuantity } from "@/shared/assets";
+import { formatDate, formatMoney } from "@/shared/format";
+import { isInflow, type MovementKind } from "@/shared/portfolio";
+import { deleteAssetAction, deleteMovementAction } from "../actions";
+import type { AssetDetail, MovementRow } from "../service";
+import { AssetFormDialog, MovementDialog } from "./asset-dialogs";
+import { ProfitLoss, Stat } from "./assets-view";
+
+const t = tr.assets;
+const d = (ymd: string) => formatDate(`${ymd}T12:00:00+03:00`);
+
+type Pending =
+  | { kind: "edit" }
+  | { kind: "movement"; movement: MovementKind }
+  | { kind: "deleteMovement"; row: MovementRow }
+  | { kind: "deleteAsset" }
+  | null;
+
+/** /birikim/:id — özet, hareket ekleme ve hareket geçmişi. */
+export function AssetDetailView({ data }: { data: AssetDetail }) {
+  const router = useRouter();
+  const [pending, setPending] = useState<Pending>(null);
+  const close = () => setPending(null);
+  const s = data.summary;
+  const unit = ASSETS[data.assetKey].unit;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
+        <Link href="/birikim">
+          <ArrowLeft />
+          {t.back}
+        </Link>
+      </Button>
+      <PageHeader
+        title={data.name}
+        description={ASSETS[data.assetKey].label}
+        actions={
+          data.canWrite ? (
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <Button size="icon" variant="outline" aria-label={tr.recurring.actions.more}>
+                  <EllipsisVertical />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onSelect={() => setPending({ kind: "edit" })}>
+                  <Pencil />
+                  {tr.common.edit}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  variant="destructive"
+                  disabled={data.movementCount > 0}
+                  onSelect={() => setPending({ kind: "deleteAsset" })}
+                >
+                  <Trash2 />
+                  {t.delete}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null
+        }
+      />
+      {data.isPrivate ? (
+        <Badge variant="outline" className="-mt-2 w-fit gap-1">
+          <Lock className="size-3" />
+          {t.privateBadge}
+        </Badge>
+      ) : null}
+
+      <Card size="sm">
+        <CardContent className="flex flex-col gap-3">
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <Stat label={t.stats.quantity}>{formatAssetQuantity(data.assetKey, s.quantity)}</Stat>
+            <Stat label={t.stats.avgCost}>
+              {s.avgCostMinor !== null
+                ? `${formatMoney(s.avgCostMinor)} ${t.stats.perUnit(unit)}`
+                : "—"}
+            </Stat>
+            <Stat label={t.stats.cost}>{formatMoney(s.costMinor)}</Stat>
+            <Stat label={t.stats.currentValue}>
+              {s.currentValueMinor !== null ? formatMoney(s.currentValueMinor) : t.stats.noPrice}
+            </Stat>
+            <Stat label={t.stats.unrealized}>
+              <ProfitLoss minor={s.unrealizedMinor} bp={s.unrealizedBp} />
+            </Stat>
+            <Stat label={t.stats.realized}>
+              <ProfitLoss minor={s.realizedMinor} />
+            </Stat>
+            <Stat label={t.stats.invested}>{formatMoney(s.investedMinor)}</Stat>
+            <Stat label={t.stats.proceeds}>{formatMoney(s.proceedsMinor)}</Stat>
+          </div>
+          {data.price ? (
+            <p className="text-xs text-muted-foreground">
+              {t.stats.price(formatMoney(data.price.buyMinor), d(data.price.date))} ·{" "}
+              <Link href="/fiyatlar" className="underline-offset-2 hover:underline">
+                {t.prices}
+              </Link>
+            </p>
+          ) : null}
+          {data.storage ? (
+            <p className="text-sm">
+              <span className="text-muted-foreground">{t.movement.storage}:</span> {data.storage}
+            </p>
+          ) : null}
+          {data.note ? <p className="text-sm text-muted-foreground">{data.note}</p> : null}
+          {data.canWrite ? (
+            <div className="flex flex-wrap justify-end gap-2">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setPending({ kind: "movement", movement: "gift_in" })}
+              >
+                <Gift />
+                {t.kinds.gift_in}
+              </Button>
+              {s.quantity > 0 ? (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setPending({ kind: "movement", movement: "sell" })}
+                >
+                  <HandCoins />
+                  {t.kinds.sell}
+                </Button>
+              ) : null}
+              <Button size="sm" onClick={() => setPending({ kind: "movement", movement: "buy" })}>
+                <ShoppingBag />
+                {t.kinds.buy}
+              </Button>
+            </div>
+          ) : null}
+        </CardContent>
+      </Card>
+
+      <section className="flex flex-col gap-2" aria-labelledby="movements-title">
+        <h2 id="movements-title" className="text-base font-medium">
+          {t.history}
+        </h2>
+        {data.movements.length === 0 ? (
+          <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+            {t.noMovements}
+          </p>
+        ) : (
+          <ul className="divide-y rounded-xl border bg-card">
+            {data.movements.map((row) => (
+              <MovementItem
+                key={row.id}
+                row={row}
+                data={data}
+                canWrite={data.canWrite}
+                onDelete={() => setPending({ kind: "deleteMovement", row })}
+              />
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {pending?.kind === "edit" ? <AssetFormDialog item={data} onClose={close} /> : null}
+      {pending?.kind === "movement" ? (
+        <MovementDialog item={data} initialKind={pending.movement} onClose={close} />
+      ) : null}
+      <AlertDialog
+        open={pending?.kind === "deleteMovement" || pending?.kind === "deleteAsset"}
+        onOpenChange={(o) => !o && close()}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {pending?.kind === "deleteAsset" ? t.deleteTitle : t.deleteMovementTitle}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {pending?.kind === "deleteAsset" ? t.deleteDescription : t.deleteMovementDescription}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{tr.common.cancel}</AlertDialogCancel>
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                if (pending?.kind === "deleteAsset") {
+                  const r = await deleteAssetAction(data.id);
+                  close();
+                  if (r.ok) {
+                    toast.success(t.toast.deleted);
+                    router.push("/birikim");
+                  } else toast.error(r.error);
+                } else if (pending?.kind === "deleteMovement") {
+                  const r = await deleteMovementAction(pending.row.id);
+                  close();
+                  if (r.ok) toast.success(t.toast.movementDeleted);
+                  else toast.error(r.error);
+                }
+              }}
+            >
+              {pending?.kind === "deleteAsset" ? t.delete : t.deleteMovement}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+function MovementItem({
+  row,
+  data,
+  canWrite,
+  onDelete,
+}: {
+  row: MovementRow;
+  data: AssetDetail;
+  canWrite: boolean;
+  onDelete: () => void;
+}) {
+  const inflow = isInflow(row.kind);
+  const qty = formatAssetQuantity(data.assetKey, row.quantity);
+  const unit = ASSETS[data.assetKey].unit;
+  return (
+    <li className="flex items-start gap-3 p-3">
+      <div className="min-w-0 flex-1">
+        <p className="flex flex-wrap items-center gap-x-2 text-sm font-medium">
+          <span>{t.kinds[row.kind]}</span>
+          <span className={inflow ? "text-income" : "text-expense"}>
+            {inflow ? "+" : "−"}
+            {qty}
+          </span>
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {d(row.date)}
+          {row.unitPriceMinor !== null
+            ? ` · ${formatMoney(row.unitPriceMinor)} ${t.stats.perUnit(unit)}`
+            : ""}
+          {row.account ? ` · ${row.account}` : ""}
+          {row.storage ? ` · ${row.storage}` : ""}
+        </p>
+        {row.note ? <p className="text-xs text-muted-foreground">{row.note}</p> : null}
+        <p className="text-xs text-muted-foreground">
+          {t.table.balance}: {formatAssetQuantity(data.assetKey, row.quantityAfter)}
+        </p>
+      </div>
+      <div className="flex shrink-0 flex-col items-end text-sm">
+        {row.kind !== "gift_out" ? (
+          <span className="tabular-nums">{formatMoney(row.amountMinor)}</span>
+        ) : (
+          <span className="text-xs text-muted-foreground tabular-nums">
+            {t.stats.cost} {formatMoney(row.costOutMinor)}
+          </span>
+        )}
+        {row.kind === "sell" ? (
+          <span className="text-xs">
+            {t.table.result}: <ProfitLoss minor={row.realizedMinor} />
+          </span>
+        ) : null}
+      </div>
+      {canWrite && !row.fromInKind ? (
+        <Button
+          size="icon-sm"
+          variant="ghost"
+          aria-label={t.deleteMovement}
+          onClick={onDelete}
+          className="shrink-0"
+        >
+          <Trash2 />
+        </Button>
+      ) : null}
+    </li>
+  );
+}

src/features/assets/components/asset-dialogs.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { 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 { useAccounts } from "@/features/in-kind/components/in-kind-section";
+import { tr } from "@/i18n/tr";
+import { ASSET_KEYS, ASSETS, formatAssetQuantity, type AssetKey } from "@/shared/assets";
+import { todayIstanbul } from "@/shared/dates";
+import { MOVEMENT_KINDS, type MovementKind } from "@/shared/portfolio";
+import { addMovementAction, saveAssetAction } from "../actions";
+import type { AssetView } from "../service";
+
+const t = tr.assets;
+type Errors = Record<string, string | undefined>;
+const NONE = "__none__";
+
+function Footer({ busy, formId, onClose }: { busy: boolean; formId: string; onClose: () => void }) {
+  return (
+    <>
+      <Button variant="outline" type="button" onClick={onClose}>
+        {tr.common.cancel}
+      </Button>
+      <Button type="submit" form={formId} disabled={busy}>
+        {tr.common.save}
+      </Button>
+    </>
+  );
+}
+
+/** Yeni varlık / varlığı düzenle. */
+export function AssetFormDialog({
+  item,
+  onClose,
+  onCreated,
+}: {
+  item: AssetView | null;
+  onClose: () => void;
+  onCreated?: (id: string) => void;
+}) {
+  const [v, setV] = useState({
+    assetKey: (item?.assetKey ?? "gram_gold") as AssetKey,
+    name: item?.name ?? "",
+    note: item?.note ?? "",
+    isPrivate: item?.isPrivate ?? false,
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [busy, setBusy] = useState(false);
+  const set = <K extends keyof typeof v>(k: K, x: (typeof v)[K]) => setV((s) => ({ ...s, [k]: x }));
+  const locked = Boolean(item?.movementCount);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    const r = await saveAssetAction(item?.id ?? null, {
+      ...v,
+      name: v.name.trim() || ASSETS[v.assetKey].label,
+    });
+    setBusy(false);
+    if (r.ok) {
+      toast.success(t.toast.saved);
+      onClose();
+      if (!item) onCreated?.((r.data as { id: string }).id);
+    } else setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
+  }
+
+  const f = t.fields;
+  return (
+    <ResponsiveDialog
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={item ? t.editTitle : t.createTitle}
+      footer={<Footer busy={busy} formId="asset-form" onClose={onClose} />}
+    >
+      <form id="asset-form" onSubmit={submit} noValidate>
+        <FieldGroup>
+          <Field data-invalid={Boolean(errors.assetKey)}>
+            <FieldLabel htmlFor="as-key">{f.asset}</FieldLabel>
+            <Select
+              value={v.assetKey}
+              onValueChange={(x) => set("assetKey", x as AssetKey)}
+              disabled={locked}
+            >
+              <SelectTrigger id="as-key" className="w-full">
+                <SelectValue>{ASSETS[v.assetKey].label}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {ASSET_KEYS.map((k) => (
+                  <SelectItem key={k} value={k}>
+                    {ASSETS[k].label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {errors.assetKey ? <FieldError>{errors.assetKey}</FieldError> : null}
+          </Field>
+          <Field data-invalid={Boolean(errors.name)}>
+            <FieldLabel htmlFor="as-name">{f.name}</FieldLabel>
+            <Input
+              id="as-name"
+              value={v.name}
+              placeholder={ASSETS[v.assetKey].label}
+              onChange={(e) => set("name", e.target.value)}
+              aria-invalid={Boolean(errors.name)}
+            />
+            {errors.name ? <FieldError>{errors.name}</FieldError> : null}
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="as-note">{f.note}</FieldLabel>
+            <Input id="as-note" 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"
+            />
+            <span>
+              {f.isPrivate}
+              <span className="block text-xs text-muted-foreground">{f.isPrivateHint}</span>
+            </span>
+          </label>
+          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
+        </FieldGroup>
+      </form>
+    </ResponsiveDialog>
+  );
+}
+
+/** Alım, gelen hediye, satış veya çıkış hareketi. */
+export function MovementDialog({
+  item,
+  initialKind,
+  onClose,
+}: {
+  item: AssetView;
+  initialKind: MovementKind;
+  onClose: () => void;
+}) {
+  const accounts = useAccounts();
+  const [kind, setKind] = useState<MovementKind>(initialKind);
+  const [v, setV] = useState({
+    date: todayIstanbul(),
+    quantity: "",
+    amount: "",
+    unitPrice: "",
+    accountId: "",
+    storage: item.storage,
+    note: "",
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [busy, setBusy] = useState(false);
+  const set = <K extends keyof typeof v>(k: K, x: (typeof v)[K]) => setV((s) => ({ ...s, [k]: x }));
+  const withAccount = kind === "buy" || kind === "sell";
+  const priced = kind !== "gift_out";
+  const inflow = kind === "buy" || kind === "gift_in";
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    const r = await addMovementAction(item.id, {
+      kind,
+      date: v.date,
+      quantity: v.quantity,
+      amount: priced ? v.amount : "",
+      unitPrice: priced ? v.unitPrice : "",
+      accountId: withAccount ? v.accountId : "",
+      storage: inflow ? v.storage : "",
+      note: v.note,
+    });
+    setBusy(false);
+    if (r.ok) {
+      toast.success(t.toast.movement);
+      onClose();
+    } else setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
+  }
+
+  const m = t.movement;
+  const unit = ASSETS[item.assetKey].unit;
+  return (
+    <ResponsiveDialog
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={m.title(t.kinds[kind], item.name)}
+      description={m.held(formatAssetQuantity(item.assetKey, item.summary.quantity))}
+      footer={<Footer busy={busy} formId="movement-form" onClose={onClose} />}
+    >
+      <form id="movement-form" onSubmit={submit} noValidate>
+        <FieldGroup>
+          <Tabs
+            value={kind}
+            onValueChange={(x) => {
+              setKind(x as MovementKind);
+              setErrors({});
+            }}
+          >
+            <TabsList className="grid h-auto w-full grid-cols-2 sm:grid-cols-4">
+              {MOVEMENT_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-2 gap-3">
+            <Field data-invalid={Boolean(errors.quantity)}>
+              <FieldLabel htmlFor="mv-qty">
+                {m.quantity} ({unit})
+              </FieldLabel>
+              <Input
+                id="mv-qty"
+                inputMode="decimal"
+                value={v.quantity}
+                onChange={(e) => set("quantity", e.target.value)}
+                className="text-right tabular-nums"
+                aria-invalid={Boolean(errors.quantity)}
+                autoFocus
+              />
+              {errors.quantity ? <FieldError>{errors.quantity}</FieldError> : null}
+            </Field>
+            <Field data-invalid={Boolean(errors.date)}>
+              <FieldLabel htmlFor="mv-date">{m.date}</FieldLabel>
+              <Input
+                id="mv-date"
+                type="date"
+                value={v.date}
+                max={todayIstanbul()}
+                onChange={(e) => set("date", e.target.value)}
+              />
+              {errors.date ? <FieldError>{errors.date}</FieldError> : null}
+            </Field>
+          </div>
+          {priced ? (
+            <>
+              <div className="grid grid-cols-2 gap-3">
+                <Field data-invalid={Boolean(errors.amount)}>
+                  <FieldLabel htmlFor="mv-amount">{m.amount}</FieldLabel>
+                  <MoneyInput id="mv-amount" value={v.amount} onChange={(x) => set("amount", x)} />
+                  {errors.amount ? <FieldError>{errors.amount}</FieldError> : null}
+                </Field>
+                <Field data-invalid={Boolean(errors.unitPrice)}>
+                  <FieldLabel htmlFor="mv-unit">{m.unitPrice}</FieldLabel>
+                  <MoneyInput
+                    id="mv-unit"
+                    value={v.unitPrice}
+                    onChange={(x) => set("unitPrice", x)}
+                  />
+                  {errors.unitPrice ? <FieldError>{errors.unitPrice}</FieldError> : null}
+                </Field>
+              </div>
+              <FieldDescription className="-mt-2">
+                {kind === "gift_in" ? m.giftValueHint : m.priceHint}
+              </FieldDescription>
+            </>
+          ) : null}
+          {withAccount ? (
+            <Field data-invalid={Boolean(errors.accountId)}>
+              <FieldLabel htmlFor="mv-account">{m.account}</FieldLabel>
+              <Select
+                value={v.accountId || NONE}
+                onValueChange={(x) => set("accountId", x === NONE ? "" : x)}
+              >
+                <SelectTrigger id="mv-account" className="w-full">
+                  <SelectValue>
+                    {accounts?.find((a) => a.id === v.accountId)?.name ?? m.accountNone}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent className="max-h-72">
+                  <SelectItem value={NONE}>{m.accountNone}</SelectItem>
+                  {(accounts ?? []).map((a) => (
+                    <SelectItem key={a.id} value={a.id}>
+                      {a.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FieldDescription>{m.accountHint}</FieldDescription>
+              {errors.accountId ? <FieldError>{errors.accountId}</FieldError> : null}
+            </Field>
+          ) : null}
+          {inflow ? (
+            <Field>
+              <FieldLabel htmlFor="mv-storage">{m.storage}</FieldLabel>
+              <Input
+                id="mv-storage"
+                value={v.storage}
+                placeholder={m.storagePlaceholder}
+                onChange={(e) => set("storage", e.target.value)}
+              />
+            </Field>
+          ) : null}
+          <Field>
+            <FieldLabel htmlFor="mv-note">{m.note}</FieldLabel>
+            <Input id="mv-note" value={v.note} onChange={(e) => set("note", e.target.value)} />
+          </Field>
+          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
+        </FieldGroup>
+      </form>
+    </ResponsiveDialog>
+  );
+}

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

@@ -0,0 +1,191 @@
+"use client";
+
+import { ChevronRight, Coins, Lock, Plus } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatMoney } from "@/shared/format";
+import { formatBp } from "@/shared/portfolio";
+import type { AssetTotals, AssetView } from "../service";
+import { AssetFormDialog } from "./asset-dialogs";
+
+const t = tr.assets;
+
+/** Kâr/zarar tutarı: + yeşil, − kırmızı. */
+export function ProfitLoss({
+  minor,
+  bp,
+  compact,
+}: {
+  minor: number | null;
+  bp?: number | null;
+  /** Mobilde oranı gizle (dar satırlar). */
+  compact?: boolean;
+}) {
+  if (minor === null) return <span className="text-muted-foreground">—</span>;
+  return (
+    <span
+      className={cn(
+        "font-semibold whitespace-nowrap tabular-nums",
+        minor > 0 ? "text-income" : minor < 0 ? "text-expense" : undefined,
+      )}
+    >
+      {minor > 0 ? "+" : minor < 0 ? "−" : ""}
+      {formatMoney(Math.abs(minor))}
+      {bp !== undefined && bp !== null ? (
+        <span className={cn("ml-1 text-xs font-normal", compact && "hidden sm:inline")}>
+          ({formatBp(bp)})
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+export function Stat({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <div className="font-semibold tabular-nums">{children}</div>
+    </div>
+  );
+}
+
+/** /birikim: toplamlar ve varlık kartları. */
+export function AssetsView({
+  items,
+  totals,
+  canWrite,
+}: {
+  items: AssetView[];
+  totals: AssetTotals;
+  canWrite: boolean;
+}) {
+  const router = useRouter();
+  const [creating, setCreating] = useState(false);
+  const held = items.filter((i) => i.summary.quantity > 0 || i.movementCount === 0);
+  const closed = items.filter((i) => i.summary.quantity === 0 && i.movementCount > 0);
+  const unrealizedBp =
+    totals.costMinor > 0 ? Math.round((totals.unrealizedMinor * 10_000) / totals.costMinor) : null;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap justify-end gap-2">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/fiyatlar">
+            <Coins />
+            {t.prices}
+          </Link>
+        </Button>
+        {canWrite ? (
+          <Button size="sm" onClick={() => setCreating(true)}>
+            <Plus />
+            {t.new}
+          </Button>
+        ) : null}
+      </div>
+
+      <Card size="sm">
+        <CardContent className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <Stat label={t.totals.value}>{formatMoney(totals.valueMinor)}</Stat>
+          <Stat label={t.totals.cost}>{formatMoney(totals.costMinor)}</Stat>
+          <Stat label={t.totals.unrealized}>
+            <ProfitLoss minor={totals.unrealizedMinor} bp={unrealizedBp} />
+          </Stat>
+          <Stat label={t.totals.realized}>
+            <ProfitLoss minor={totals.realizedMinor} />
+          </Stat>
+          {totals.missingPrice ? (
+            <p className="col-span-full text-xs text-muted-foreground">
+              {t.totals.missingPrice(totals.missingPrice)}
+            </p>
+          ) : null}
+        </CardContent>
+      </Card>
+
+      {items.length === 0 ? (
+        <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+          {t.empty}
+        </p>
+      ) : null}
+
+      <ul className="flex flex-col gap-2">
+        {held.map((item) => (
+          <AssetRow key={item.id} item={item} />
+        ))}
+      </ul>
+      {closed.length ? (
+        <section className="flex flex-col gap-2">
+          <h2 className="text-sm font-medium text-muted-foreground">{t.closedGroup}</h2>
+          <ul className="flex flex-col gap-2 opacity-70">
+            {closed.map((item) => (
+              <AssetRow key={item.id} item={item} />
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      {creating ? (
+        <AssetFormDialog
+          item={null}
+          onClose={() => setCreating(false)}
+          onCreated={(id) => router.push(`/birikim/${id}`)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function AssetRow({ item }: { item: AssetView }) {
+  const s = item.summary;
+  return (
+    <li>
+      <Link
+        href={`/birikim/${item.id}`}
+        className="flex items-center gap-3 rounded-xl border bg-card p-3 transition-colors hover:bg-muted/50"
+      >
+        <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-amber-500/15 text-amber-600 dark:text-amber-400">
+          <Coins className="size-4.5" />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <div className="flex items-center justify-between gap-2">
+            <p className="flex min-w-0 items-center gap-1.5 font-medium">
+              <span className="truncate">{item.name}</span>
+              {item.isPrivate ? (
+                <Badge variant="outline" className="shrink-0 gap-1" title={t.privateBadge}>
+                  <Lock className="size-3" />
+                  <span className="hidden sm:inline">{t.privateBadge}</span>
+                </Badge>
+              ) : null}
+            </p>
+            <span className="shrink-0 text-sm font-semibold tabular-nums">
+              {s.currentValueMinor !== null ? formatMoney(s.currentValueMinor) : t.stats.noPrice}
+            </span>
+          </div>
+          <div className="flex items-center justify-between gap-2 text-xs">
+            <p className="min-w-0 truncate text-muted-foreground">
+              {item.label}
+              {s.avgCostMinor !== null
+                ? ` · ${t.stats.avgCost} ${formatMoney(s.avgCostMinor)}`
+                : ""}
+            </p>
+            <span className="shrink-0">
+              {s.quantity > 0 ? (
+                <ProfitLoss minor={s.unrealizedMinor} bp={s.unrealizedBp} compact />
+              ) : (
+                <>
+                  {t.stats.realized}: <ProfitLoss minor={s.realizedMinor} />
+                </>
+              )}
+            </span>
+          </div>
+        </div>
+        <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
+      </Link>
+    </li>
+  );
+}

src/features/in-kind/components/in-kind-section.tsx

@@ -65,7 +65,7 @@ const qtyInput = (q: number) =>
   (q / QUANTITY_SCALE).toLocaleString("tr-TR", { maximumFractionDigits: 3, useGrouping: false });
 
 /** Hesap seçenekleri (diyaloglar açıldığında). */
-function useAccounts() {
+export function useAccounts() {
   const [options, setOptions] = useState<TransactionFormOptions | null>(null);
   useEffect(() => {
     let cancelled = false;

src/features/transactions/components/transaction-parts.tsx

@@ -2,6 +2,7 @@
 
 import {
   ArrowLeftRight,
+  Coins,
   Users,
   CheckCheck,
   Copy,
@@ -130,6 +131,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.asset) return item.asset.name;
   if (item.payeeName) return item.payeeName;
   if (item.description) return item.description;
   if (item.type === "transfer") return t.types.transfer;
@@ -141,6 +143,10 @@ export function rowSubtitle(item: TransactionListItem) {
     const account = item.account?.name ?? item.toAccount?.name ?? "—";
     return `${tr.contacts.kinds[item.contact.kind]} · ${account}`;
   }
+  if (item.asset)
+    return item.account
+      ? t.list.transfer(item.account.name, item.asset.name)
+      : t.list.transfer(item.asset.name, item.toAccount?.name ?? "—");
   if (item.type === "transfer")
     return t.list.transfer(item.account?.name ?? "—", item.toAccount?.name ?? "—");
   const what = item.isAdjustment
@@ -183,7 +189,14 @@ function DetailDialog({
       onOpenChange={onOpenChange}
       title={d.title}
       footer={
-        detail && canWrite ? (
+        detail && canWrite && detail.asset ? (
+          <Button asChild>
+            <Link href={`/birikim/${detail.asset.id}`}>
+              <Coins />
+              {tr.assets.open}
+            </Link>
+          </Button>
+        ) : detail && canWrite ? (
           <>
             <Button variant="destructive" onClick={() => onDelete(detail)}>
               <Trash2 />
@@ -239,6 +252,14 @@ function DetailDialog({
                   </Link>,
                 )
               : null}
+            {detail.asset
+              ? row(
+                  tr.assets.asset,
+                  <Link href={`/birikim/${detail.asset.id}`} className="hover:underline">
+                    {detail.asset.name}
+                  </Link>,
+                )
+              : null}
             {detail.account
               ? row(
                   detail.type === "transfer" ? t.fields.fromAccount : t.fields.account,