feat(ui): birikim sayfası, varlık detayı ve hareket diyalogları
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user