043e9bf622
- New component renders button + consent modal + spinner + attribution - Best-effort warning shown once per session for stock categories - Hidden if not premium or category kind != 'priced' - Consent persisted per-profile in user_preferences.price_fetching_consent - Manual unit_price input remains active in all paths - 17 vitest tests (no RTL/jsdom — logged MEDIUM in decisions-log.md) - Wired into SnapshotLineRow/SnapshotEditor/SnapshotEditPage - asset_type hardcoded to 'stock' pending category schema extension (MEDIUM) Closes #158
110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
// SnapshotEditor — groups the active accounts by balance category and
|
|
// renders one `SnapshotLineRow` per account.
|
|
//
|
|
// Both `simple` and `priced` variants are dispatched by `account.category_kind`
|
|
// inside `SnapshotLineRow`. The editor itself only carries the values down
|
|
// and the change handlers up.
|
|
|
|
import { useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type {
|
|
BalanceAccountWithCategory,
|
|
BalanceCategory,
|
|
} from "../../shared/types";
|
|
import type { PricedEntry } from "../../hooks/useSnapshotEditor";
|
|
import SnapshotLineRow from "./SnapshotLineRow";
|
|
|
|
interface Props {
|
|
accounts: BalanceAccountWithCategory[];
|
|
categories: BalanceCategory[];
|
|
/** account_id → string-typed value (simple kind). */
|
|
values: Record<number, string>;
|
|
/** account_id → {quantity, unit_price} strings (priced kind). */
|
|
pricedValues: Record<number, PricedEntry>;
|
|
onValueChange: (accountId: number, next: string) => void;
|
|
onQuantityChange: (accountId: number, next: string) => void;
|
|
onUnitPriceChange: (accountId: number, next: string) => void;
|
|
disabled?: boolean;
|
|
/** Snapshot date (YYYY-MM-DD) — forwarded to PriceFetchControl (Issue #158). */
|
|
snapshotDate?: string;
|
|
}
|
|
|
|
export default function SnapshotEditor({
|
|
accounts,
|
|
categories,
|
|
values,
|
|
pricedValues,
|
|
onValueChange,
|
|
onQuantityChange,
|
|
onUnitPriceChange,
|
|
disabled,
|
|
snapshotDate,
|
|
}: Props) {
|
|
const { t } = useTranslation();
|
|
|
|
// Group accounts by their category, preserving the categories' sort_order
|
|
// first then the account name within each group.
|
|
const groups = useMemo(() => {
|
|
const byCategory = new Map<number, BalanceAccountWithCategory[]>();
|
|
for (const acc of accounts) {
|
|
const list = byCategory.get(acc.balance_category_id) ?? [];
|
|
list.push(acc);
|
|
byCategory.set(acc.balance_category_id, list);
|
|
}
|
|
const sortedCategories = [...categories].sort(
|
|
(a, b) => a.sort_order - b.sort_order || a.key.localeCompare(b.key)
|
|
);
|
|
return sortedCategories
|
|
.map((cat) => ({
|
|
category: cat,
|
|
accounts: (byCategory.get(cat.id) ?? []).sort((a, b) =>
|
|
a.name.localeCompare(b.name)
|
|
),
|
|
}))
|
|
.filter((group) => group.accounts.length > 0);
|
|
}, [accounts, categories]);
|
|
|
|
if (accounts.length === 0) {
|
|
return (
|
|
<div className="bg-[var(--card)] rounded-xl border border-[var(--border)] p-8 text-center text-[var(--muted-foreground)]">
|
|
{t("balance.snapshot.editor.empty")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{groups.map(({ category, accounts: catAccounts }) => (
|
|
<div
|
|
key={category.id}
|
|
className="bg-[var(--card)] rounded-xl border border-[var(--border)] overflow-hidden"
|
|
>
|
|
<div className="px-4 py-2 bg-[var(--muted)] border-b border-[var(--border)]">
|
|
<h3 className="text-sm font-semibold">
|
|
{t(category.i18n_key, { defaultValue: category.key })}
|
|
</h3>
|
|
</div>
|
|
<div className="px-4">
|
|
{catAccounts.map((acc) => {
|
|
const priced = pricedValues[acc.id];
|
|
return (
|
|
<SnapshotLineRow
|
|
key={acc.id}
|
|
account={acc}
|
|
value={values[acc.id] ?? ""}
|
|
quantityValue={priced?.quantity ?? ""}
|
|
unitPriceValue={priced?.unit_price ?? ""}
|
|
onChange={(next) => onValueChange(acc.id, next)}
|
|
onQuantityChange={(next) => onQuantityChange(acc.id, next)}
|
|
onUnitPriceChange={(next) => onUnitPriceChange(acc.id, next)}
|
|
disabled={disabled}
|
|
snapshotDate={snapshotDate}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|