> | null;
+ resolution: SplitResolution;
+ onCollapse: () => void;
+}
+
+/**
+ * `SplitSection` (design-spec §3.7, §5.4): header "Delning" with a collapse button, the four mode chips, and the
+ * controls of the chosen mode with a live preview of each person's share.
+ */
+export function SplitSection({
+ draft,
+ onChange,
+ people,
+ amountOre,
+ payerId,
+ accountBp,
+ resolution,
+ onCollapse,
+}: Props) {
+ const { t, language } = useI18n();
+ const ctx = { viewerId: people.viewer.id, partnerId: people.partner.id, payerId, accountBp };
+ const modeLabel = (mode: SplitMode) =>
+ mode === 'default'
+ ? defaultModeLabel(viewerBpOf(accountBp, people.viewer.id), t, language)
+ : t(
+ mode === 'ratio'
+ ? 'editor_split_mode_ratio'
+ : mode === 'exact'
+ ? 'editor_split_mode_exact'
+ : 'editor_split_mode_full',
+ );
+ const preview = resolution.kind === 'ok' ?
+
+
{t('editor_split')}
+
+
+
+
+ {MODES.map((mode) => {
+ const checked = draft.mode === mode;
+ return (
+ {
+ onChange(withMode(draft, mode, ctx, language));
+ }}
+ >
+ {checked ?
+ );
+ })}
+
+ {draft.mode === 'ratio' ? (
+
+ );
+}
+
+function RatioEditor({
+ draft,
+ onChange,
+ people,
+}: {
+ draft: SplitDraft;
+ onChange: (d: SplitDraft) => void;
+ people: EditorPeople;
+}) {
+ const { t, language } = useI18n();
+ const derived = ratioDerivedBp(draft);
+ const textOf = (person: EditorPerson) =>
+ person.id === draft.ratio.userId ? draft.ratio.text : derived === null ? '' : percentText(derived, language);
+ const field = (person: EditorPerson) => (
+
+
+
{t('editor_percent_suffix')}}
+ onChange={(text) => {
+ if (percentTextBp(text) !== null || text.trim() === '')
+ onChange({ ...draft, ratio: { userId: person.id, text } });
+ }}
+ />
+
+ {field(people.viewer)}
+ {field(people.partner)}
+
+
+ {PRESETS.map((percent) => (
+ {
+ onChange({ ...draft, ratio: { userId: people.viewer.id, text: String(percent) } });
+ }}
+ >
+ {t('common_ratio', String(percent), String(100 - percent))}
+
+ ))}
+
+
+ );
+}
+
+function ExactEditor({
+ draft,
+ onChange,
+ people,
+ amountOre,
+}: {
+ draft: SplitDraft;
+ onChange: (d: SplitDraft) => void;
+ people: EditorPeople;
+ amountOre: number | null;
+}) {
+ const { t, language } = useI18n();
+ const typedOre = moneyTextOre(draft.exact.text);
+ const derived = exactDerivedOre(draft, amountOre);
+ const tooLarge = typedOre !== null && amountOre !== null && typedOre > amountOre;
+ const nameOf = (person: EditorPerson) => (person.id === people.viewer.id ? t('common_you') : person.displayName);
+ const field = (person: EditorPerson) => {
+ const typed = person.id === draft.exact.userId;
+ return (
+
+
+ {typed ? (
+
{
+ onChange({ ...draft, exact: { userId: person.id, text } });
+ }}
+ />
+ ) : (
+ undefined}
+ inputClassName="amount"
+ supporting={t('editor_split_exact_computed')}
+ onFocus={() => {
+ onChange({
+ ...draft,
+ exact: { userId: person.id, text: derived === null ? '' : moneyText(derived, language) },
+ });
+ }}
+ />
+ )}
+
+ {field(people.viewer)}
+ {field(people.partner)}
+
+ {tooLarge ? (
+
+
+ {t(
+ 'editor_split_exact_of',
+ typedPerson.id === people.viewer.id ? t('common_you') : typedPerson.displayName,
+ formatMoney(typedOre, language),
+ formatMoney(amountOre, language),
+ )}
+
+ {t('common_too_much', formatMoney(typedOre - amountOre, language))}
+
+ ) : null}
+
+ );
+}
+
+function FullPicker({
+ draft,
+ onChange,
+ people,
+}: {
+ draft: SplitDraft;
+ onChange: (d: SplitDraft) => void;
+ people: EditorPeople;
+}) {
+ const { t } = useI18n();
+ const questionId = useId();
+ return (
+ <>
+
+ {t('editor_split_full_question')}
+
+
+ {[people.viewer, people.partner].map((person) => {
+ const checked = draft.fullOn === person.id;
+ return (
+
{
+ onChange({ ...draft, fullOn: person.id });
+ }}
+ >
+
+ );
+ })}
+
, t: I18n['t']): string {
+ if (category.name !== null) return category.name;
+ const key: DefaultCategoryKey = category.default_key ?? 'other';
+ return t(`category_default_${key}`);
+}
+
+/** Categories offered in pickers: neither archived nor deleted, in `sort_order` (then id). */
+export function activeCategoriesOf(categories: Iterable): Category[] {
+ return [...categories]
+ .filter((c) => c.archived_at === null && c.deleted_at === null)
+ .sort((a, b) => a.sort_order - b.sort_order || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+}
+
+/**
+ * UX-9 `frequentCategoryIds` for one account (D-060): the active categories used by the account's non-deleted
+ * expenses, most used first, ties by `sort_order`; at most five, possibly fewer or none.
+ */
+export function frequentCategoryIds(
+ expenses: Iterable>,
+ accountId: string | null,
+ activeCategories: readonly Category[],
+): string[] {
+ if (accountId === null) return [];
+ const order = new Map(activeCategories.map((c, index) => [c.id, index]));
+ const counts = new Map();
+ for (const e of expenses) {
+ if (e.deleted_at !== null || e.account_id !== accountId || !order.has(e.category_id)) continue;
+ counts.set(e.category_id, (counts.get(e.category_id) ?? 0) + 1);
+ }
+ return [...counts.entries()]
+ .sort(([a, ca], [b, cb]) => cb - ca || (order.get(a) ?? 0) - (order.get(b) ?? 0))
+ .slice(0, QUICK_ROW_TILES)
+ .map(([id]) => id);
+}
+
+/**
+ * The quick row's five categories (D-075 `quickRowCategories`): the frequent ones, filled up from `sort_order`; the
+ * selected category takes the fifth place when it is not among them (it may be archived in edit mode).
+ */
+export function quickRowCategories(
+ categories: readonly Category[],
+ frequent: readonly string[],
+ selectedId: string | null,
+): Category[] {
+ const active = activeCategoriesOf(categories);
+ const byId = new Map(active.map((c) => [c.id, c]));
+ const chosen: Category[] = [];
+ for (const candidate of [...frequent.flatMap((id) => byId.get(id) ?? []), ...active]) {
+ if (chosen.length === QUICK_ROW_TILES) break;
+ if (!chosen.some((c) => c.id === candidate.id)) chosen.push(candidate);
+ }
+ const selected = selectedId === null ? undefined : categories.find((c) => c.id === selectedId);
+ if (selected === undefined || chosen.some((c) => c.id === selected.id)) return chosen;
+ return [...chosen.slice(0, QUICK_ROW_TILES - 1), selected];
+}
diff --git a/web/src/components/editor/index.ts b/web/src/components/editor/index.ts
new file mode 100644
index 0000000..f662839
--- /dev/null
+++ b/web/src/components/editor/index.ts
@@ -0,0 +1,49 @@
+/**
+ * The shared expense-editor fields of design-spec §3.7 (D-019), used by the expense editor (W2, S-7 / W-5) and the
+ * recurring-template editor (W5, S-19 / W-16). Generic: every component takes props, none holds expense state.
+ */
+export { AccountDot, accountColorIndex } from './AccountDot';
+export {
+ activeCategoriesOf,
+ categoryName,
+ frequentCategoryIds,
+ quickRowCategories,
+ QUICK_ROW_TILES,
+} from './categories';
+export { CategoryPicker } from './CategoryPicker';
+export { ConfirmDialog } from './ConfirmDialog';
+export { DateControl, DateField } from './DateField';
+export { codePoints, NotesField, NOTES_MAX } from './NotesField';
+export { OptionRow, OptionRows, optionRowControlClass, optionRowHintClass } from './OptionRows';
+export { PayerRow } from './PayerRow';
+export type { EditorPeople, EditorPerson } from './people';
+export { SelectControl, SelectField, type SelectOption } from './SelectField';
+export {
+ exactDerivedOre,
+ moneyText,
+ moneyTextOre,
+ newSplitDraft,
+ percentText,
+ percentTextBp,
+ ratioDerivedBp,
+ resolveSplit,
+ splitDraftOf,
+ viewerBpOf,
+ wireSplits,
+ withMode,
+ type SplitContext,
+ type SplitDraft,
+ type SplitPeople,
+ type SplitResolution,
+ type TypedShare,
+ type WireSplit,
+} from './split';
+export {
+ defaultModeLabel,
+ draftSplitLabel,
+ fullOnLabel,
+ SplitBar,
+ SplitPreview,
+ SplitSection,
+ splitLabel,
+} from './SplitSection';
diff --git a/web/src/components/editor/people.ts b/web/src/components/editor/people.ts
new file mode 100644
index 0000000..bdd5ff0
--- /dev/null
+++ b/web/src/components/editor/people.ts
@@ -0,0 +1,12 @@
+/** A household user as editor fields show them: id, display name and avatar slot (design-spec §2.5). */
+export interface EditorPerson {
+ id: string;
+ displayName: string;
+ slot: 1 | 2;
+}
+
+/** The viewer and the partner (SPEC: a household has exactly two users). */
+export interface EditorPeople {
+ viewer: EditorPerson;
+ partner: EditorPerson;
+}
diff --git a/web/src/components/editor/split.test.ts b/web/src/components/editor/split.test.ts
new file mode 100644
index 0000000..824f1df
--- /dev/null
+++ b/web/src/components/editor/split.test.ts
@@ -0,0 +1,152 @@
+import { describe, expect, it } from 'vitest';
+import {
+ exactDerivedOre,
+ newSplitDraft,
+ resolveSplit,
+ splitDraftOf,
+ wireSplits,
+ withMode,
+ type SplitContext,
+ type SplitDraft,
+} from './split';
+
+const ME = '01929c5e-0000-7000-8000-000000000a01';
+const ANNA = '01929c5e-0000-7000-8000-000000000a02';
+const people = { viewerId: ME, partnerId: ANNA };
+const fiftyFifty = { [ME]: 5000, [ANNA]: 5000 };
+const sixtyForty = { [ME]: 6000, [ANNA]: 4000 };
+
+function ctx(patch: Partial = {}): SplitContext {
+ return { ...people, amountOre: 41_200, payerId: ME, accountBp: fiftyFifty, ...patch };
+}
+
+function draft(patch: Partial = {}): SplitDraft {
+ return { ...newSplitDraft(people, fiftyFifty, 'sv'), ...patch };
+}
+
+describe('resolveSplit (SPEC §9.1 through computeSplit)', () => {
+ it('default: copies the account ratio; the payer absorbs the odd öre', () => {
+ expect(resolveSplit(draft(), ctx({ amountOre: 1001 }))).toEqual({
+ kind: 'ok',
+ shares: { [ME]: 501, [ANNA]: 500 },
+ bp: fiftyFifty,
+ });
+ expect(resolveSplit(draft(), ctx({ accountBp: sixtyForty, payerId: ANNA, amountOre: 100 }))).toEqual({
+ kind: 'ok',
+ shares: { [ME]: 60, [ANNA]: 40 },
+ bp: sixtyForty,
+ });
+ });
+
+ it('ratio: the typed percent (with decimals) and 100 minus it for the other', () => {
+ const ratio = draft({ mode: 'ratio', ratio: { userId: ANNA, text: '33,33' } });
+ expect(resolveSplit(ratio, ctx({ amountOre: 999 }))).toEqual({
+ kind: 'ok',
+ shares: { [ME]: 667, [ANNA]: 332 },
+ bp: { [ANNA]: 3333, [ME]: 6667 },
+ });
+ expect(resolveSplit({ ...ratio, ratio: { userId: ME, text: '' } }, ctx())).toEqual({ kind: 'incomplete' });
+ });
+
+ it('exact: one typed share, the other derived; a typed share above the amount is an error (AC-8.7)', () => {
+ const exact = draft({ mode: 'exact', exact: { userId: ME, text: '1 200,00' } });
+ expect(resolveSplit(exact, ctx({ amountOre: 106_000 }))).toEqual({
+ kind: 'error',
+ error: 'exact_share_too_large',
+ });
+ expect(exactDerivedOre(exact, 106_000)).toBeNull();
+ const ok = { ...exact, exact: { userId: ME, text: '400,5' } };
+ expect(resolveSplit(ok, ctx({ amountOre: 106_000 }))).toEqual({
+ kind: 'ok',
+ shares: { [ME]: 40_050, [ANNA]: 65_950 },
+ bp: null,
+ });
+ expect(exactDerivedOre(ok, 106_000)).toBe(65_950);
+ expect(resolveSplit({ ...exact, exact: { userId: ME, text: '' } }, ctx())).toEqual({ kind: 'incomplete' });
+ });
+
+ it('full: the bearer carries the whole amount, payer or not', () => {
+ expect(resolveSplit(draft({ mode: 'full', fullOn: ANNA }), ctx())).toEqual({
+ kind: 'ok',
+ shares: { [ME]: 0, [ANNA]: 41_200 },
+ bp: { [ANNA]: 10_000, [ME]: 0 },
+ });
+ expect(resolveSplit(draft({ mode: 'full', fullOn: ME }), ctx())).toEqual({
+ kind: 'ok',
+ shares: { [ME]: 41_200, [ANNA]: 0 },
+ bp: { [ME]: 10_000, [ANNA]: 0 },
+ });
+ });
+
+ it('is incomplete without an amount or an account (mode default)', () => {
+ expect(resolveSplit(draft(), ctx({ amountOre: null }))).toEqual({ kind: 'incomplete' });
+ expect(resolveSplit(draft(), ctx({ accountBp: null }))).toEqual({ kind: 'incomplete' });
+ });
+
+ it('reports the domain errors of computeSplit', () => {
+ expect(resolveSplit(draft(), ctx({ amountOre: 0 }))).toEqual({ kind: 'error', error: 'amount_out_of_range' });
+ });
+});
+
+describe('wire splits and drafts', () => {
+ it('sorts by user id, share_bp null in mode exact', () => {
+ const resolved = resolveSplit(draft({ mode: 'exact', exact: { userId: ANNA, text: '12' } }), ctx());
+ if (resolved.kind !== 'ok') throw new Error('expected ok');
+ expect(wireSplits(resolved)).toEqual([
+ { user_id: ME, share_ore: 40_000, share_bp: null },
+ { user_id: ANNA, share_ore: 1_200, share_bp: null },
+ ]);
+ });
+
+ it('reopens a saved split in its mode with the viewer typed', () => {
+ const ratio = splitDraftOf(
+ 'ratio',
+ [
+ { user_id: ME, share_ore: 700, share_bp: 7000 },
+ { user_id: ANNA, share_ore: 300, share_bp: 3000 },
+ ],
+ people,
+ fiftyFifty,
+ 'sv',
+ );
+ expect(ratio.mode).toBe('ratio');
+ expect(ratio.ratio).toEqual({ userId: ME, text: '70' });
+ const exact = splitDraftOf(
+ 'exact',
+ [
+ { user_id: ME, share_ore: 124_760, share_bp: null },
+ { user_id: ANNA, share_ore: 0, share_bp: null },
+ ],
+ people,
+ fiftyFifty,
+ 'sv',
+ );
+ expect(exact.exact).toEqual({ userId: ME, text: '1\u00A0247,60' });
+ const full = splitDraftOf(
+ 'full',
+ [
+ { user_id: ME, share_ore: 0, share_bp: 0 },
+ { user_id: ANNA, share_ore: 500, share_bp: 10_000 },
+ ],
+ people,
+ fiftyFifty,
+ 'sv',
+ );
+ expect(full.fullOn).toBe(ANNA);
+ });
+
+ it('picks modes as design-spec §5.4 says: ratio at the account ratio, full on the one who did not pay', () => {
+ const start = newSplitDraft(people, sixtyForty, 'sv');
+ expect(start.ratio.text).toBe('60');
+ expect(withMode(start, 'full', { ...people, payerId: ME, accountBp: sixtyForty }, 'sv').fullOn).toBe(ANNA);
+ expect(withMode(start, 'full', { ...people, payerId: ANNA, accountBp: sixtyForty }, 'sv').fullOn).toBe(ME);
+ expect(
+ withMode(
+ { ...start, ratio: { userId: ME, text: '' } },
+ 'ratio',
+ { ...people, payerId: ME, accountBp: sixtyForty },
+ 'en',
+ ).ratio.text,
+ ).toBe('60');
+ });
+});
diff --git a/web/src/components/editor/split.ts b/web/src/components/editor/split.ts
new file mode 100644
index 0000000..d9336a3
--- /dev/null
+++ b/web/src/components/editor/split.ts
@@ -0,0 +1,219 @@
+/**
+ * The split state of an editor (SPEC §9.1, AC-8.5, AC-8.7, AC-8.8; design-spec §3.7 `SplitSection`, §5.4): one draft
+ * holds the four modes' inputs as typed, and `resolveSplit` turns it into each user's share through `computeSplit`.
+ * Pure and generic: the expense editor (W2) and the recurring-template editor (W5) use the same state.
+ */
+import type { SplitMode } from '../../api/types';
+import {
+ amountInputDisplay,
+ amountInputFromText,
+ amountInputOf,
+ amountInputOre,
+ BP_TOTAL,
+ percentInputOf,
+} from '../../lib/money';
+import { computeSplit, type SplitError } from '../../lib/split';
+import type { Language } from '../../i18n/language';
+
+/** A typed money or percent field: whose value was typed (the other is derived) and the text as typed. */
+export interface TypedShare {
+ userId: string;
+ text: string;
+}
+
+export interface SplitDraft {
+ mode: SplitMode;
+ /** `ratio`: one user's percent as typed ("60", "60,5"); the other is 100 minus it. */
+ ratio: TypedShare;
+ /** `exact`: one user's share in kronor as typed; the other is the amount minus it (AC-8.7). */
+ exact: TypedShare;
+ /** `full`: the user who bears the whole amount. */
+ fullOn: string;
+}
+
+/** The two household users: the viewer and the partner (ids). */
+export interface SplitPeople {
+ viewerId: string;
+ partnerId: string;
+}
+
+export interface SplitContext extends SplitPeople {
+ /** The amount in öre, null while empty. */
+ amountOre: number | null;
+ payerId: string;
+ /** The account's default ratio in basis points per user (mode `default`), null when there is no account. */
+ accountBp: Readonly> | null;
+}
+
+export type SplitResolution =
+ | { kind: 'ok'; shares: Record; bp: Record | null }
+ /** Something needed is still empty (the amount, the typed field, the account). */
+ | { kind: 'incomplete' }
+ /** `exact_share_too_large`: the typed exact share is larger than the amount (AC-8.7, `error_exact_share_too_large`). */
+ | { kind: 'error'; error: SplitError | 'exact_share_too_large' };
+
+/** A wire `Split` row (§14.3.3): sorted by user id, `share_bp` null in mode `exact`. */
+export interface WireSplit {
+ user_id: string;
+ share_ore: number;
+ share_bp: number | null;
+}
+
+function otherOf(people: SplitPeople, userId: string): string {
+ return userId === people.viewerId ? people.partnerId : people.viewerId;
+}
+
+/** Basis points of a typed percent ("60,5" -> 6050), or null when empty. */
+export function percentTextBp(text: string): number | null {
+ const input = amountInputFromText(text, BP_TOTAL);
+ return input === null ? null : amountInputOre(input);
+}
+
+/** Öre of a typed money field, or null when empty or not an amount. */
+export function moneyTextOre(text: string): number | null {
+ const input = amountInputFromText(text, Number.MAX_SAFE_INTEGER);
+ return input === null ? null : amountInputOre(input);
+}
+
+/** A percent for a field, from basis points: 6000 -> "60", 6050 -> "60,5" (sv). */
+export function percentText(bp: number, language: Language): string {
+ return amountInputDisplay(percentInputOf(bp), language);
+}
+
+/** Money for a field, from öre, with both decimals: 124 760 -> "1 247,60" (sv). */
+export function moneyText(ore: number, language: Language): string {
+ return amountInputDisplay(amountInputOf(ore), language);
+}
+
+/** The viewer's basis points of an account default (`default_shares`), 5000 when the account lacks them. */
+export function viewerBpOf(accountBp: Readonly> | null, viewerId: string): number {
+ return accountBp?.[viewerId] ?? BP_TOTAL / 2;
+}
+
+/** A new draft: mode `default`, the ratio fields at the account's ratio, the exact field empty, full on the partner. */
+export function newSplitDraft(
+ people: SplitPeople,
+ accountBp: Readonly> | null,
+ language: Language,
+): SplitDraft {
+ return {
+ mode: 'default',
+ ratio: { userId: people.viewerId, text: percentText(viewerBpOf(accountBp, people.viewerId), language) },
+ exact: { userId: people.viewerId, text: '' },
+ fullOn: people.partnerId,
+ };
+}
+
+/** A draft from a saved split (edit mode): the stored mode with its values in the viewer's field. */
+export function splitDraftOf(
+ mode: SplitMode,
+ splits: readonly WireSplit[],
+ people: SplitPeople,
+ accountBp: Readonly> | null,
+ language: Language,
+): SplitDraft {
+ const base = newSplitDraft(people, accountBp, language);
+ const viewer = splits.find((s) => s.user_id === people.viewerId);
+ switch (mode) {
+ case 'default':
+ return base;
+ case 'ratio':
+ return { ...base, mode, ratio: { userId: people.viewerId, text: percentText(viewer?.share_bp ?? 0, language) } };
+ case 'exact':
+ return { ...base, mode, exact: { userId: people.viewerId, text: moneyText(viewer?.share_ore ?? 0, language) } };
+ case 'full': {
+ const bearer = splits.find((s) => s.share_bp === BP_TOTAL) ?? splits.find((s) => s.share_ore > 0);
+ return { ...base, mode, fullOn: bearer?.user_id ?? people.partnerId };
+ }
+ }
+}
+
+/**
+ * Picks a mode (design-spec §5.4): `ratio` starts at the account's ratio unless one was typed, `exact` keeps what was
+ * typed (empty at first), `full` starts on the person who did not pay.
+ */
+export function withMode(
+ draft: SplitDraft,
+ mode: SplitMode,
+ ctx: { payerId: string; accountBp: Readonly> | null } & SplitPeople,
+ language: Language,
+): SplitDraft {
+ if (draft.mode === mode) return draft;
+ switch (mode) {
+ case 'ratio':
+ return draft.ratio.text === ''
+ ? {
+ ...draft,
+ mode,
+ ratio: { userId: ctx.viewerId, text: percentText(viewerBpOf(ctx.accountBp, ctx.viewerId), language) },
+ }
+ : { ...draft, mode };
+ case 'full':
+ return { ...draft, mode, fullOn: otherOf(ctx, ctx.payerId) };
+ default:
+ return { ...draft, mode };
+ }
+}
+
+/** The basis points of the two users in modes `default`, `ratio` and `full`, or null when incomplete. */
+function bpOf(draft: SplitDraft, ctx: SplitContext): Record | null {
+ switch (draft.mode) {
+ case 'default':
+ return ctx.accountBp === null ? null : { ...ctx.accountBp };
+ case 'ratio': {
+ const typed = percentTextBp(draft.ratio.text);
+ if (typed === null) return null;
+ return { [draft.ratio.userId]: typed, [otherOf(ctx, draft.ratio.userId)]: BP_TOTAL - typed };
+ }
+ case 'full':
+ return { [draft.fullOn]: BP_TOTAL, [otherOf(ctx, draft.fullOn)]: 0 };
+ case 'exact':
+ return null;
+ }
+}
+
+/** Each user's share (SPEC §9.1) for the draft, or why there is none yet. */
+export function resolveSplit(draft: SplitDraft, ctx: SplitContext): SplitResolution {
+ const amount = ctx.amountOre;
+ if (amount === null) return { kind: 'incomplete' };
+ const users = [ctx.viewerId, ctx.partnerId];
+ if (draft.mode === 'exact') {
+ const typed = moneyTextOre(draft.exact.text);
+ if (typed === null) return { kind: 'incomplete' };
+ if (typed > amount) return { kind: 'error', error: 'exact_share_too_large' };
+ const ore = { [draft.exact.userId]: typed, [otherOf(ctx, draft.exact.userId)]: amount - typed };
+ const result = computeSplit(amount, ctx.payerId, users, { mode: 'exact', ore });
+ return 'error' in result ? { kind: 'error', error: result.error } : { kind: 'ok', shares: result.ok, bp: null };
+ }
+ const bp = bpOf(draft, ctx);
+ if (bp === null) return { kind: 'incomplete' };
+ const result =
+ draft.mode === 'full'
+ ? computeSplit(amount, ctx.payerId, users, { mode: 'full', bearer_user_id: draft.fullOn })
+ : computeSplit(amount, ctx.payerId, users, { mode: 'ratio', bp });
+ return 'error' in result ? { kind: 'error', error: result.error } : { kind: 'ok', shares: result.ok, bp };
+}
+
+/** The wire `splits` of a resolved split, sorted by user id (§14.4.7). */
+export function wireSplits(resolution: Extract): WireSplit[] {
+ return Object.keys(resolution.shares)
+ .sort()
+ .map((userId) => ({
+ user_id: userId,
+ share_ore: resolution.shares[userId] ?? 0,
+ share_bp: resolution.bp === null ? null : (resolution.bp[userId] ?? 0),
+ }));
+}
+
+/** The derived (not typed) value of an exact split: the amount minus the typed share, or null. */
+export function exactDerivedOre(draft: SplitDraft, amountOre: number | null): number | null {
+ const typed = moneyTextOre(draft.exact.text);
+ if (typed === null || amountOre === null || typed > amountOre) return null;
+ return amountOre - typed;
+}
+
+/** The derived percent of a ratio split: 100 minus the typed percent, in basis points, or null. */
+export function ratioDerivedBp(draft: SplitDraft): number | null {
+ const typed = percentTextBp(draft.ratio.text);
+ return typed === null ? null : BP_TOTAL - typed;
+}
diff --git a/web/src/features/expenses/ExpenseDetailPage.test.tsx b/web/src/features/expenses/ExpenseDetailPage.test.tsx
new file mode 100644
index 0000000..433013e
--- /dev/null
+++ b/web/src/features/expenses/ExpenseDetailPage.test.tsx
@@ -0,0 +1,175 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import type { PushedExpense } from '../../api/types';
+import { errorResponse, FakeServer } from '../../test/fakeServer';
+import { renderApp } from '../../test/render';
+import {
+ ANNA_ID,
+ audit,
+ expenseRow,
+ GROCERIES,
+ HOME,
+ householdServer,
+ HUSET,
+ JACOB_ID,
+ OTHER,
+ pushedMutations,
+ template,
+} from './testLedger';
+
+const SP = ' ';
+
+/** An element whose whole text (children included) is `text`, U+00A0 read as a space. */
+const whole = (text: string) => (_: string, element: Element | null) =>
+ element?.tagName === 'SPAN' && element.textContent.replaceAll('\u00A0', ' ') === text;
+
+const timelineItems = (name = 'Historik') => within(screen.getByRole('region', { name })).getAllByRole('listitem');
+const ID = '01929c5e-0000-7000-8000-00000000e301';
+const EXPENSE = expenseRow(ID, {
+ amount_ore: 124_760,
+ notes: 'Storhandling inför helgen',
+ created_by_user_id: ANNA_ID,
+});
+const CREATED = audit('d1', ID, 'create', ANNA_ID, '2026-10-16T12:02:00.000Z');
+const CHANGED = audit('d2', ID, 'update', JACOB_ID, '2026-10-16T17:40:00.000Z', [
+ { field: 'category_id', old: OTHER.id, new: GROCERIES.id },
+ { field: 'amount_ore', old: 114_760, new: 124_760 },
+]);
+
+function openDetail(server: FakeServer, id = ID) {
+ const result = renderApp(`/expenses/${id}`, { server });
+ return { ...result, user: userEvent.setup() };
+}
+
+describe('W-6 expense detail (S-8)', () => {
+ it('shows every field, the shares and mode, and the timeline oldest first', async () => {
+ openDetail(householdServer({ expenses: [EXPENSE], auditEntries: [CHANGED, CREATED] }));
+ expect(await screen.findByRole('heading', { level: 1, name: 'ICA Maxi Lindhagen' })).toBeInTheDocument();
+ const hero = screen.getByRole('region', { name: 'ICA Maxi Lindhagen' });
+ expect(hero).toHaveTextContent('Mat & hushåll · Vardag');
+ expect(hero).toHaveTextContent(`1${SP}247,60${SP}kr`);
+ expect(screen.getByText('fredag 16 oktober 2026')).toBeInTheDocument();
+ expect(screen.getByText('Storhandling inför helgen')).toBeInTheDocument();
+ expect(screen.getByText('Kontots standard 50/50')).toBeInTheDocument();
+ expect(screen.getByText(whole(`Du 623,80${SP}kr · Anna 623,80${SP}kr`))).toBeInTheDocument();
+ const timeline = screen.getByRole('region', { name: 'Historik' });
+ const items = within(timeline)
+ .getAllByRole('listitem')
+ .map((li) => li.textContent);
+ expect(items).toHaveLength(3);
+ expect(items[0]).toMatch(/^Anna skapade den här · 16 okt\. \d\d:02/);
+ expect(items[1]).toMatch(/^Du ändrade kategorin från Övrigt till Mat & hushåll · /);
+ expect(items[2]).toMatch(/^Du ändrade beloppet från 1.147,60.kr till 1.247,60.kr · /);
+ expect(screen.getByRole('link', { name: 'Ändra utgift' })).toHaveAttribute('href', `/app/expenses/${ID}/edit`);
+ expect(screen.getByRole('button', { name: 'Ta bort utgift' })).toBeInTheDocument();
+ });
+
+ it('names a generated expense’s template and shows the other split modes from the viewer’s side', async () => {
+ const hyra = template('01929c5e-0000-7000-8000-00000000f001', 'Hyra');
+ const generated = expenseRow(ID, {
+ description: 'Hyra september',
+ account_id: HUSET.id,
+ category_id: HOME.id,
+ amount_ore: 1_200_000,
+ split_mode: 'ratio',
+ splits: [
+ { user_id: JACOB_ID, share_ore: 840_000, share_bp: 7000 },
+ { user_id: ANNA_ID, share_ore: 360_000, share_bp: 3000 },
+ ],
+ recurring_template_id: hyra.id,
+ recurring_period: '2026-09',
+ });
+ openDetail(
+ householdServer({
+ expenses: [generated],
+ templates: [hyra],
+ auditEntries: [audit('r1', ID, 'create', JACOB_ID, '2026-09-25T04:00:00.000Z', [], 'recurring')],
+ }),
+ );
+ expect(await screen.findByText('Återkommande: Hyra')).toBeInTheDocument();
+ expect(screen.getByText('Egen fördelning 70/30')).toBeInTheDocument();
+ expect(timelineItems()[0]).toHaveTextContent(/^Skapad automatiskt \(återkommande\) · 25 sep\./);
+ });
+
+ it('says "Allt på Anna" for a full split borne by the partner', async () => {
+ const full = expenseRow(ID, {
+ split_mode: 'full',
+ splits: [
+ { user_id: JACOB_ID, share_ore: 0, share_bp: 0 },
+ { user_id: ANNA_ID, share_ore: 41_200, share_bp: 10_000 },
+ ],
+ });
+ openDetail(householdServer({ expenses: [full] }));
+ expect(await screen.findByText('Allt på Anna')).toBeInTheDocument();
+ });
+
+ it('shows the deleted state with who and when, without Edit and Delete', async () => {
+ const deleted = { ...EXPENSE, deleted_at: '2026-10-17T07:12:00.000Z', updated_by_user_id: ANNA_ID };
+ openDetail(
+ householdServer({
+ expenses: [deleted],
+ auditEntries: [
+ CREATED,
+ audit('d3', ID, 'delete', ANNA_ID, '2026-10-17T07:12:00.000Z', [
+ { field: 'deleted_at', old: null, new: '2026-10-17T07:12:00.000Z' },
+ ]),
+ ],
+ }),
+ );
+ expect(await screen.findByText(/^Anna tog bort den här utgiften · 17 okt\. \d\d:12$/)).toBeInTheDocument();
+ expect(screen.getByText('Den räknas inte längre i saldon eller statistik.')).toBeInTheDocument();
+ expect(screen.queryByRole('link', { name: 'Ändra utgift' })).not.toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'Ta bort utgift' })).not.toBeInTheDocument();
+ expect(timelineItems().at(-1)).toHaveTextContent(/^Anna tog bort den här · /);
+ });
+
+ it('deletes after confirming and goes back with "Utgiften togs bort"', async () => {
+ const server = householdServer({ expenses: [EXPENSE] });
+ const { user, router } = openDetail(server);
+ await user.click(await screen.findByRole('button', { name: 'Ta bort utgift' }));
+ const dialog = await screen.findByRole('alertdialog', { name: 'Ta bort utgiften?' });
+ await user.click(within(dialog).getByRole('button', { name: 'Ta bort' }));
+ expect(await screen.findByText('Utgiften togs bort')).toBeInTheDocument();
+ const push = server.calls('POST', '/sync')[0];
+ const entity = pushedMutations(push ?? ({ body: { mutations: [] } } as never))[0]?.entity as PushedExpense;
+ expect(entity).toMatchObject({ id: ID, amount_ore: 124_760, notes: EXPENSE.notes });
+ expect(entity.deleted_at).toBe(entity.updated_at);
+ await waitFor(() => {
+ expect(router.state.location.pathname).toMatch(/^\/app\/?$/);
+ });
+ });
+
+ it('shows a missing expense with "Uppdatera nu", which pulls again', async () => {
+ const server = householdServer();
+ const { user } = openDetail(server, '01929c5e-0000-7000-8000-00000000dead');
+ const heading = await screen.findByRole('heading', { name: 'Utgiften finns inte' });
+ const before = server.calls('GET', '/sync').length;
+ await user.click(within(heading.parentElement ?? document.body).getByRole('button', { name: 'Uppdatera nu' }));
+ await waitFor(() => {
+ expect(server.calls('GET', '/sync').length).toBeGreaterThan(before);
+ });
+ });
+
+ it('shows the loading and error states', async () => {
+ const pending = new FakeServer().on('GET', '/sync', () => new Promise(() => undefined));
+ const first = renderApp(`/expenses/${ID}`, { server: pending });
+ expect(await screen.findByText('Hämtar era utgifter…')).toBeInTheDocument();
+ first.unmount();
+ renderApp(`/expenses/${ID}`, {
+ server: new FakeServer().on('GET', '/sync', () => errorResponse('unavailable', 503)),
+ });
+ expect(await screen.findByText('Något gick fel på servern. Försök igen senare.')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Försök igen' })).toBeInTheDocument();
+ });
+
+ it('works in English', async () => {
+ renderApp(`/expenses/${ID}`, {
+ server: householdServer({ expenses: [EXPENSE], auditEntries: [CREATED] }),
+ language: 'en',
+ });
+ expect(await screen.findByText('Friday, 16 October 2026')).toBeInTheDocument();
+ expect(screen.getByText('Account default 50/50')).toBeInTheDocument();
+ expect(timelineItems('History')[0]).toHaveTextContent(/^Anna created this · 16 Oct /);
+ });
+});
diff --git a/web/src/features/expenses/ExpenseDetailPage.tsx b/web/src/features/expenses/ExpenseDetailPage.tsx
index ef15e5d..492f624 100644
--- a/web/src/features/expenses/ExpenseDetailPage.tsx
+++ b/web/src/features/expenses/ExpenseDetailPage.tsx
@@ -1,9 +1,251 @@
-import { PlaceholderPage } from '../../app/PlaceholderPage';
+import { useMemo, useState, type ReactNode } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useLedger, useLedgerWriter, type Ledger } from '../../api/ledger';
+import type { Expense } from '../../api/types';
import { paths } from '../../app/routes';
+import { TopBar } from '../../app/TopBar';
+import { useSession } from '../../app/useSession';
+import { Avatar } from '../../components/Avatar';
+import { Button, ButtonLink } from '../../components/Button';
+import { CategoryIcon, isColorToken } from '../../components/CategoryIcon';
+import { categoryName, ConfirmDialog, SplitBar, splitLabel, type EditorPeople } from '../../components/editor';
+import { EmptyState } from '../../components/EmptyState';
+import { SegmentedGroup, SegmentedItem } from '../../components/LedgerRow';
+import { Money } from '../../components/Money';
+import { useToast } from '../../components/Toast';
+import { Icon } from '../../design/Icon';
+import type { OutlineIconName } from '../../design/icons.generated';
import { useI18n } from '../../i18n/useI18n';
+import { detailDate, listDateTime, parseDate } from '../../lib/dates';
+import { BP_TOTAL, formatMoney } from '../../lib/money';
+import { requestErrorMessage, rejectionMessage } from './messages';
+import { peopleOf, pushedExpense } from './model';
+import { ErrorState, LoadingState } from './PageStates';
+import { Timeline } from './Timeline';
+import { auditEntriesOf, localToday, timelineLines } from './timelineLines';
+import styles from './Expenses.module.css';
+import { usePushExpense } from './usePushExpense';
-/** S-8 Expense detail, /app/expenses/:id. */
+function FactRow({ icon, label, children }: { icon: OutlineIconName; label: string; children: ReactNode }) {
+ return (
+
+
+
+
+ {label}
+ {children}
+
+
+ );
+}
+
+/** S-8 Expense detail (W-6), /app/expenses/:id: hero, facts, the audit timeline; deleted and missing states. */
export default function ExpenseDetailPage() {
const { t } = useI18n();
- return void ledger.refetch()} />
+
+ );
+ }
+ const expense = ledger.data.expenses.get(id);
+ const people = peopleOf(ledger.data, session?.userId ?? '');
+ if (expense === undefined || people === null) {
+ return (
+ <>
+
+
+ {deleted && deletedAt !== null ? (
+
+
+
+
{t('expense_detail_deleted_banner', deleter, listDateTime(new Date(deletedAt), today, language))}
+
{t('expense_detail_deleted_body')}
+
+
+ ) : null}
+
+
+
+ {category === undefined ? null : (
+
+ )}
+
+ {expense.description}
+
+ {[categoryLabel, account?.name ?? ''].filter((part) => part !== '').join(t('common_separator_dot'))}
+
+
+
+
+ )}
+
+
+
+
+
+ {detailDate(parseDate(expense.expense_date), language)}
+
+
+
+
+ {splitLabel(expense.split_mode, viewerSplit?.share_bp ?? null, bearer, people, t, language)}
+
+ {t('common_you')} {formatMoney(viewerOre, language)}
+ {t('common_separator_dot')}
+ {people.partner.displayName}{' '}
+ {formatMoney(shares[people.partner.id] ?? 0, language)}
+
+
+ {expense.notes === '' ? null : (
+
+ {expense.notes}
+
+ )}
+
+
+
+
void remove()}
+ onDismiss={() => {
+ setConfirmDelete(false);
+ }}
+ />
+
+ );
}
diff --git a/web/src/features/expenses/ExpenseEditorPage.test.tsx b/web/src/features/expenses/ExpenseEditorPage.test.tsx
new file mode 100644
index 0000000..2a30f19
--- /dev/null
+++ b/web/src/features/expenses/ExpenseEditorPage.test.tsx
@@ -0,0 +1,456 @@
+import { act, fireEvent, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import type { PushedExpense } from '../../api/types';
+import { todayIso } from '../../lib/dates';
+import { errorResponse, FakeServer, json } from '../../test/fakeServer';
+import { ANNA, JACOB, page } from '../../test/fixtures';
+import { renderApp } from '../../test/render';
+import {
+ ANNA_ID,
+ ENTERTAINMENT,
+ expenseRow,
+ GROCERIES,
+ HEALTH,
+ HOME,
+ householdServer,
+ HUSET,
+ JACOB_ID,
+ OTHER,
+ pushedMutations,
+ SHOPPING,
+ TRANSPORT,
+ VARDAG,
+} from './testLedger';
+
+const NBSP = '\u00A0';
+/** Testing Library normalises the page's U+00A0 to a space; matchers do the same. */
+const SP = ' ';
+const HOME_PATH = /^\/app\/?$/;
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-7[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
+
+/** The text of an element, exactly (money uses U+00A0). */
+const exactText = (text: string) => (_: string, element: Element | null) =>
+ element?.tagName === 'SPAN' && element.textContent === text;
+
+async function openEditor(path: string, server: FakeServer, language: 'sv' | 'en' = 'sv') {
+ const result = renderApp(path, { server, language });
+ await screen.findByLabelText(language === 'sv' ? 'Belopp' : 'Amount');
+ return { ...result, user: userEvent.setup() };
+}
+
+function lastPushed(server: FakeServer): PushedExpense {
+ const push = server.calls('POST', '/sync').at(-1);
+ if (push === undefined) throw new Error('nothing pushed');
+ const [mutation] = pushedMutations(push);
+ return mutation?.entity as PushedExpense;
+}
+
+function categoryRadios() {
+ return within(screen.getByRole('radiogroup', { name: 'Kategori' })).getAllByRole('radio');
+}
+
+describe('W-5 new expense (S-7)', () => {
+ it('opens with the defaults, suggests the category, previews the shares and saves one mutation', async () => {
+ const server = householdServer();
+ const { user, router } = await openEditor('/expenses/new', server);
+ expect(screen.getByRole('heading', { level: 1, name: 'Ny utgift' })).toBeInTheDocument();
+ const amount = screen.getByLabelText('Belopp');
+ expect(amount).toHaveFocus();
+ // AC-8.6: the oldest active account; archived accounts are not offered (AC-6.4).
+ const accountSelect = screen.getByLabelText('Konto');
+ expect(accountSelect).toHaveValue(VARDAG.id);
+ expect(
+ within(accountSelect)
+ .getAllByRole('option')
+ .map((o) => o.textContent),
+ ).toEqual(['Vardag', 'Huset']);
+ expect(screen.getByLabelText('Datum')).toHaveValue(todayIso());
+ expect(screen.getByText('Idag')).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Betalt av du. Dubbeltryck för att byta till Anna.' }),
+ ).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /Delning/ })).toHaveTextContent('Kontots standard 50/50');
+ // CS-5 step 4 for an empty description: `other`.
+ expect(screen.getByRole('radio', { name: 'Övrigt' })).toHaveAttribute('aria-checked', 'true');
+ const save = screen.getByRole('button', { name: 'Spara' });
+ expect(save).toBeDisabled();
+
+ await user.type(amount, '412');
+ expect(screen.getByText(exactText(`Du 206,00${NBSP}kr · Anna 206,00${NBSP}kr`))).toBeInTheDocument();
+ expect(save).toBeDisabled();
+ await user.type(screen.getByLabelText('Beskrivning'), 'Bio Filmstaden');
+ // CS-6: the keyword `bio` (token) gives Nöje, with no marker (CS-7).
+ expect(screen.getByRole('radio', { name: 'Nöje' })).toHaveAttribute('aria-checked', 'true');
+ expect(save).toBeEnabled();
+
+ await user.click(save);
+ expect(await screen.findByText('Utgiften sparades')).toBeInTheDocument();
+ const entity = lastPushed(server);
+ expect(entity).toMatchObject({
+ account_id: VARDAG.id,
+ category_id: ENTERTAINMENT.id,
+ amount_ore: 41_200,
+ description: 'Bio Filmstaden',
+ notes: '',
+ expense_date: todayIso(),
+ payer_user_id: JACOB_ID,
+ split_mode: 'default',
+ splits: [
+ { user_id: JACOB_ID, share_ore: 20_600, share_bp: 5000 },
+ { user_id: ANNA_ID, share_ore: 20_600, share_bp: 5000 },
+ ],
+ deleted_at: null,
+ });
+ expect(entity.id).toMatch(UUID);
+ expect(entity.created_at).toBe(entity.updated_at);
+ expect(pushedMutations(server.calls('POST', '/sync')[0] ?? ({} as never))).toHaveLength(1);
+ await waitFor(() => {
+ expect(router.state.location.pathname).toMatch(HOME_PATH);
+ });
+ // AC-8.6 "on this phone": this browser remembers the account and its category.
+ expect(window.localStorage.getItem('kvitt.editor.lastAccount')).toBe(VARDAG.id);
+ expect(window.localStorage.getItem('kvitt.editor.lastCategory')).toBe(
+ JSON.stringify({ [VARDAG.id]: ENTERTAINMENT.id }),
+ );
+ });
+
+ it('takes ?account= from the opener and copies its default ratio (AC-8.8 on account change)', async () => {
+ const server = householdServer();
+ const { user } = await openEditor(`/expenses/new?account=${HUSET.id}`, server);
+ expect(screen.getByLabelText('Konto')).toHaveValue(HUSET.id);
+ expect(screen.getByRole('button', { name: /Delning/ })).toHaveTextContent('Kontots standard 60/40');
+ await user.selectOptions(screen.getByLabelText('Konto'), VARDAG.id);
+ expect(screen.getByRole('button', { name: /Delning/ })).toHaveTextContent('Kontots standard 50/50');
+ await user.click(screen.getByRole('button', { name: /Betalt av du/ }));
+ expect(
+ screen.getByRole('button', { name: 'Betalt av Anna. Dubbeltryck för att byta till du.' }),
+ ).toBeInTheDocument();
+ });
+
+ it('follows the history first, and a hand pick wins for the rest of the session (CS-2, CS-3)', async () => {
+ const server = householdServer({
+ expenses: [
+ expenseRow('01929c5e-0000-7000-8000-00000000e101', {
+ description: 'Willys Hornsberg',
+ category_id: SHOPPING.id,
+ }),
+ expenseRow('01929c5e-0000-7000-8000-00000000e102', {
+ description: 'willys hornsberg',
+ category_id: SHOPPING.id,
+ }),
+ ],
+ });
+ const { user } = await openEditor('/expenses/new', server);
+ const description = screen.getByLabelText('Beskrivning');
+ await user.type(description, 'Willys: Hornsberg');
+ expect(screen.getByRole('radio', { name: 'Shopping' })).toHaveAttribute('aria-checked', 'true');
+ await user.clear(description);
+ // CS-7: clearing returns to the step-4 default.
+ expect(screen.getByRole('radio', { name: 'Övrigt' })).toHaveAttribute('aria-checked', 'true');
+ await user.type(description, 'Willys');
+ // History, first token (CS-5 step 2) beats the keyword `willys` (groceries).
+ expect(screen.getByRole('radio', { name: 'Shopping' })).toHaveAttribute('aria-checked', 'true');
+ await user.click(screen.getByRole('radio', { name: 'Shopping' }));
+ await user.clear(description);
+ await user.type(description, 'Bio');
+ expect(screen.getByRole('radio', { name: 'Shopping' })).toHaveAttribute('aria-checked', 'true');
+ });
+
+ it('fills the quick row from the account’s most used categories and opens "Alla" (D-060, D-075)', async () => {
+ const used = (n: number, categoryId: string) =>
+ expenseRow(`01929c5e-0000-7000-8000-0000000e${String(n).padStart(4, '0')}`, { category_id: categoryId });
+ const server = householdServer({
+ expenses: [
+ used(1, HEALTH.id),
+ used(2, HEALTH.id),
+ used(3, HEALTH.id),
+ used(4, TRANSPORT.id),
+ used(5, TRANSPORT.id),
+ used(6, HOME.id),
+ { ...used(7, SHOPPING.id), account_id: HUSET.id },
+ ],
+ });
+ const { user } = await openEditor('/expenses/new', server);
+ // Three used in Vardag, filled from sort_order, the selected `other` in the fifth place.
+ expect(categoryRadios().map((r) => r.textContent)).toEqual([
+ 'Hälsa',
+ 'Transport',
+ 'Hem',
+ 'Mat & hushåll',
+ 'Övrigt',
+ ]);
+ await user.click(screen.getByRole('button', { name: 'Alla kategorier' }));
+ const grid = await screen.findByRole('dialog', { name: 'Välj kategori' });
+ // Every active category in sort_order; the archived Resor is not offered.
+ expect(
+ within(grid)
+ .getAllByRole('radio')
+ .map((r) => r.textContent),
+ ).toEqual(['Mat & hushåll', 'Restaurang & café', 'Hem', 'Transport', 'Nöje', 'Hälsa', 'Shopping', 'Övrigt']);
+ await user.click(within(grid).getByRole('radio', { name: 'Restaurang & café' }));
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ expect(categoryRadios().map((r) => r.textContent)).toEqual([
+ 'Hälsa',
+ 'Transport',
+ 'Hem',
+ 'Mat & hushåll',
+ 'Restaurang & café',
+ ]);
+ expect(screen.getByRole('radio', { name: 'Restaurang & café' })).toHaveAttribute('aria-checked', 'true');
+ });
+
+ it('computes every split mode live and blocks saving on a too large exact share (AC-8.7)', async () => {
+ const server = householdServer();
+ const { user } = await openEditor('/expenses/new', server);
+ await user.type(screen.getByLabelText('Belopp'), '1060');
+ await user.type(screen.getByLabelText('Beskrivning'), 'Ullared');
+ const splitRow = screen.getByRole('button', { name: /Delning/ });
+ await user.click(splitRow);
+ expect(splitRow).toHaveAttribute('aria-expanded', 'true');
+ const section = screen.getByRole('region', { name: 'Delning' });
+
+ await user.click(within(section).getByRole('radio', { name: 'Exakta belopp' }));
+ await user.type(within(section).getByLabelText('Du'), '1200');
+ const box = within(section).getByText(`140,00${SP}kr för mycket`).parentElement;
+ expect(box).toHaveAttribute('role', 'alert');
+ expect(box).toHaveTextContent(`Du 1${SP}200,00${SP}kr av 1${SP}060,00${SP}kr`);
+ expect(within(section).getByText('Andelen är större än beloppet')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Spara' })).toBeDisabled();
+ await user.clear(within(section).getByLabelText('Du'));
+ await user.type(within(section).getByLabelText('Du'), '400');
+ expect(within(section).getByLabelText('Anna')).toHaveValue('660,00');
+ expect(screen.getByRole('button', { name: 'Spara' })).toBeEnabled();
+
+ await user.click(within(section).getByRole('radio', { name: 'Allt på en person' }));
+ // Default bearer: the one who did not pay (design-spec §5.4).
+ expect(within(section).getByRole('radio', { name: /Anna/ })).toHaveAttribute('aria-checked', 'true');
+ expect(within(section).getByText(exactText(`Du 0,00${NBSP}kr · Anna 1${NBSP}060,00${NBSP}kr`))).toBeInTheDocument();
+ expect(splitRow).toHaveTextContent('Allt på Anna');
+
+ await user.click(within(section).getByRole('radio', { name: 'Egen fördelning' }));
+ const mine = within(section).getByLabelText('Du');
+ expect(mine).toHaveValue('50');
+ await user.clear(mine);
+ await user.type(mine, '60');
+ expect(within(section).getByLabelText('Anna')).toHaveValue('40');
+ expect(within(section).getByText(exactText(`Du 636,00${NBSP}kr · Anna 424,00${NBSP}kr`))).toBeInTheDocument();
+ expect(splitRow).toHaveTextContent('Egen fördelning 60/40');
+
+ await user.click(screen.getByRole('button', { name: 'Spara' }));
+ await screen.findByText('Utgiften sparades');
+ expect(lastPushed(server)).toMatchObject({
+ amount_ore: 106_000,
+ split_mode: 'ratio',
+ splits: [
+ { user_id: JACOB_ID, share_ore: 63_600, share_bp: 6000 },
+ { user_id: ANNA_ID, share_ore: 42_400, share_bp: 4000 },
+ ],
+ });
+ });
+
+ it('asks before discarding changes (title only, D-080) and closes at once without changes', async () => {
+ const { user, router } = await openEditor('/expenses/new', householdServer());
+ await user.click(screen.getByRole('button', { name: 'Avbryt' }));
+ await waitFor(() => {
+ expect(router.state.location.pathname).toMatch(HOME_PATH);
+ });
+
+ await act(async () => {
+ await router.navigate('/expenses/new');
+ });
+ await user.type(await screen.findByLabelText('Belopp'), '99');
+ await user.click(screen.getByRole('button', { name: 'Avbryt' }));
+ const dialog = await screen.findByRole('alertdialog', { name: 'Slänga utgiften?' });
+ expect(within(dialog).queryByRole('paragraph')).not.toBeInTheDocument();
+ expect(dialog.textContent).toBe('Slänga utgiften?Fortsätt redigeraSläng');
+ await user.click(within(dialog).getByRole('button', { name: 'Fortsätt redigera' }));
+ expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+ expect(screen.getByLabelText('Belopp')).toHaveValue('99');
+ // Esc follows the same rule (AC-21.9).
+ await user.keyboard('{Escape}');
+ const again = await screen.findByRole('alertdialog', { name: 'Slänga utgiften?' });
+ await user.click(within(again).getByRole('button', { name: 'Släng' }));
+ await waitFor(() => {
+ expect(router.state.location.pathname).toMatch(HOME_PATH);
+ });
+ });
+
+ it('validates inline and moves focus to the first field in error (§9.6)', async () => {
+ const server = householdServer();
+ const { user } = await openEditor('/expenses/new', server);
+ await user.type(screen.getByLabelText('Belopp'), '0');
+ expect(
+ screen.getByText(`Beloppet måste vara mellan 0,01${SP}kr och 10${SP}000${SP}000,00${SP}kr`),
+ ).toBeInTheDocument();
+ await user.clear(screen.getByLabelText('Belopp'));
+ await user.type(screen.getByLabelText('Belopp'), '12');
+ const description = screen.getByLabelText('Beskrivning');
+ await user.type(description, 'x'.repeat(101));
+ fireEvent.change(screen.getByLabelText('Datum'), { target: { value: '1999-12-31' } });
+ await user.click(screen.getByRole('button', { name: 'Spara' }));
+ expect(screen.getByText('Högst 100 tecken')).toBeInTheDocument();
+ expect(screen.getByText('Datumet ligger för långt fram eller bak')).toBeInTheDocument();
+ expect(description).toHaveFocus();
+ expect(server.calls('POST', '/sync')).toHaveLength(0);
+ // Enter in the description tries to save the same way.
+ await user.clear(description);
+ await user.type(description, 'Kaffe{Enter}');
+ expect(screen.getByText('Datumet ligger för långt fram eller bak')).toBeInTheDocument();
+ expect(screen.getByLabelText('Datum')).toHaveFocus();
+ });
+
+ it('keeps the form and says so when the server cannot be reached (§15.5)', async () => {
+ const server = householdServer().on('POST', '/sync', () => {
+ throw new TypeError('Failed to fetch');
+ });
+ const { user } = await openEditor('/expenses/new', server);
+ await user.type(screen.getByLabelText('Belopp'), '25');
+ await user.type(screen.getByLabelText('Beskrivning'), 'Kaffe');
+ await user.click(screen.getByRole('button', { name: 'Spara' }));
+ expect(await screen.findByText('Kunde inte nå servern')).toBeInTheDocument();
+ expect(screen.getByLabelText('Beskrivning')).toHaveValue('Kaffe');
+ expect(screen.getByRole('heading', { level: 1, name: 'Ny utgift' })).toBeInTheDocument();
+ });
+
+ it('shows the loading, error and no-account states (SPEC §15.6)', async () => {
+ const pending = new FakeServer().on('GET', '/sync', () => new Promise(() => undefined));
+ const first = renderApp('/expenses/new', { server: pending });
+ expect(await screen.findByText('Hämtar era utgifter…')).toBeInTheDocument();
+ first.unmount();
+
+ let fail = true;
+ const flaky = householdServer().on('GET', '/sync', () =>
+ fail
+ ? errorResponse('internal', 500)
+ : json(page(0, { users: [JACOB, ANNA], accounts: [VARDAG], categories: [OTHER] })),
+ );
+ const second = renderApp('/expenses/new', { server: flaky });
+ expect(await screen.findByText('Något gick fel på servern. Försök igen senare.')).toBeInTheDocument();
+ fail = false;
+ await userEvent.setup().click(screen.getByRole('button', { name: 'Försök igen' }));
+ expect(await screen.findByLabelText('Belopp')).toBeInTheDocument();
+ second.unmount();
+
+ const empty = new FakeServer().on('GET', '/sync', () =>
+ json(page(0, { users: [JACOB, ANNA], categories: [OTHER] })),
+ );
+ renderApp('/expenses/new', { server: empty });
+ expect(await screen.findByRole('heading', { name: 'Skapa ert första konto' })).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: 'Nytt konto' })).toHaveAttribute('href', '/app/accounts/new');
+ });
+
+ it('works in English', async () => {
+ await openEditor('/expenses/new', householdServer(), 'en');
+ expect(screen.getByRole('heading', { level: 1, name: 'New expense' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /Split/ })).toHaveTextContent('Account default 50/50');
+ expect(screen.getByRole('button', { name: 'Paid by you. Double-tap to switch to Anna.' })).toBeInTheDocument();
+ });
+});
+
+describe('W-5 edit mode', () => {
+ const EXISTING = expenseRow('01929c5e-0000-7000-8000-00000000e201', {
+ amount_ore: 124_760,
+ description: 'ICA Maxi Lindhagen',
+ notes: 'Storhandling',
+ payer_user_id: ANNA_ID,
+ split_mode: 'full',
+ splits: [
+ { user_id: JACOB_ID, share_ore: 0, share_bp: 0 },
+ { user_id: ANNA_ID, share_ore: 124_760, share_bp: 10_000 },
+ ],
+ });
+
+ it('loads the saved values without focus, the split section open for a non-default mode', async () => {
+ await openEditor(`/expenses/${EXISTING.id}/edit`, householdServer({ expenses: [EXISTING] }));
+ expect(screen.getByRole('heading', { level: 1, name: 'Ändra utgift' })).toBeInTheDocument();
+ const amount = screen.getByLabelText('Belopp');
+ expect(amount).toHaveValue(`1${NBSP}247,60`);
+ expect(amount).not.toHaveFocus();
+ expect(screen.getByLabelText('Beskrivning')).toHaveValue('ICA Maxi Lindhagen');
+ expect(screen.getByLabelText('Anteckningar')).toHaveValue('Storhandling');
+ expect(screen.getByRole('radio', { name: 'Mat & hushåll' })).toHaveAttribute('aria-checked', 'true');
+ expect(screen.getByRole('button', { name: /Betalt av Anna/ })).toBeInTheDocument();
+ const section = screen.getByRole('region', { name: 'Delning' });
+ expect(within(section).getByRole('radio', { name: 'Allt på en person' })).toHaveAttribute('aria-checked', 'true');
+ expect(screen.getByRole('button', { name: 'Ta bort utgift' })).toBeInTheDocument();
+ });
+
+ it('never suggests in edit mode (CS-1) and pushes the edit with the stored created_at', async () => {
+ const server = householdServer({ expenses: [EXISTING] });
+ const { user } = await openEditor(`/expenses/${EXISTING.id}/edit`, server);
+ const description = screen.getByLabelText('Beskrivning');
+ await user.clear(description);
+ await user.type(description, 'Bio');
+ expect(screen.getByRole('radio', { name: 'Mat & hushåll' })).toHaveAttribute('aria-checked', 'true');
+ await user.click(screen.getByRole('button', { name: 'Spara' }));
+ await screen.findByText('Utgiften sparades');
+ const entity = lastPushed(server);
+ expect(entity).toMatchObject({
+ id: EXISTING.id,
+ description: 'Bio',
+ created_at: EXISTING.created_at,
+ split_mode: 'full',
+ });
+ expect(entity.updated_at > EXISTING.updated_at).toBe(true);
+ });
+
+ it('shows a stale rejection with S-16’s copy, reloads the row and keeps the form', async () => {
+ const current = { ...EXISTING, description: 'ICA Kvantum', updated_by_user_id: ANNA_ID, server_version: 999 };
+ const server = householdServer({ expenses: [EXISTING] }, (mutation) => ({
+ mutation_id: mutation.mutation_id,
+ entity_type: 'expense',
+ entity_id: EXISTING.id,
+ status: 'rejected',
+ reason: 'stale',
+ message: 'a newer version exists',
+ current,
+ }));
+ const { user, queryClient } = await openEditor(`/expenses/${EXISTING.id}/edit`, server);
+ await user.type(screen.getByLabelText('Beskrivning'), ' 2');
+ await user.click(screen.getByRole('button', { name: 'Spara' }));
+ const alert = await screen.findByText('Din ändring ersattes av en nyare ändring från Anna');
+ expect(alert).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: 'Visa nuvarande version' })).toHaveAttribute(
+ 'href',
+ `/app/expenses/${EXISTING.id}`,
+ );
+ expect(screen.getByLabelText('Beskrivning')).toHaveValue('ICA Maxi Lindhagen 2');
+ const ledger = queryClient.getQueryData<{ expenses: Map }>(['ledger']);
+ expect(ledger?.expenses.get(EXISTING.id)?.description).toBe('ICA Kvantum');
+ });
+
+ it('deletes after confirming, as a tombstone of the stored row', async () => {
+ const server = householdServer({ expenses: [EXISTING] });
+ const { user, router } = await openEditor(`/expenses/${EXISTING.id}/edit`, server);
+ await user.click(screen.getByRole('button', { name: 'Ta bort utgift' }));
+ const dialog = await screen.findByRole('alertdialog', { name: 'Ta bort utgiften?' });
+ expect(dialog).toHaveTextContent('Den försvinner för er båda.');
+ await user.click(within(dialog).getByRole('button', { name: 'Ta bort' }));
+ expect(await screen.findByText('Utgiften togs bort')).toBeInTheDocument();
+ const entity = lastPushed(server);
+ expect(entity).toMatchObject({ id: EXISTING.id, description: EXISTING.description, amount_ore: 124_760 });
+ expect(entity.deleted_at).not.toBeNull();
+ expect(entity.deleted_at).toBe(entity.updated_at);
+ await waitFor(() => {
+ expect(router.state.location.pathname).toMatch(HOME_PATH);
+ });
+ });
+
+ it('says so when the expense does not exist', async () => {
+ renderApp('/expenses/01929c5e-0000-7000-8000-00000000dead/edit', { server: householdServer() });
+ expect(await screen.findByText('Det här finns inte längre')).toBeInTheDocument();
+ });
+});
+
+describe('category fallback', () => {
+ it('uses the category last used in the account in this browser (AC-8.6)', async () => {
+ window.localStorage.setItem('kvitt.editor.lastCategory', JSON.stringify({ [VARDAG.id]: GROCERIES.id }));
+ window.localStorage.setItem('kvitt.editor.lastAccount', HUSET.id);
+ await openEditor('/expenses/new', householdServer());
+ expect(screen.getByLabelText('Konto')).toHaveValue(HUSET.id);
+ expect(screen.getByRole('radio', { name: 'Övrigt' })).toHaveAttribute('aria-checked', 'true');
+ await userEvent.setup().selectOptions(screen.getByLabelText('Konto'), VARDAG.id);
+ expect(screen.getByRole('radio', { name: 'Mat & hushåll' })).toHaveAttribute('aria-checked', 'true');
+ });
+});
diff --git a/web/src/features/expenses/ExpenseEditorPage.tsx b/web/src/features/expenses/ExpenseEditorPage.tsx
index fbd24a6..750687e 100644
--- a/web/src/features/expenses/ExpenseEditorPage.tsx
+++ b/web/src/features/expenses/ExpenseEditorPage.tsx
@@ -1,15 +1,662 @@
-import { useParams } from 'react-router';
-import { PlaceholderPage } from '../../app/PlaceholderPage';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { useBlocker, useNavigate, useParams, useSearchParams } from 'react-router';
+import { live, useLedger, type Ledger } from '../../api/ledger';
+import type { Expense, PushedExpense } from '../../api/types';
import { paths } from '../../app/routes';
+import { useShortcut } from '../../app/shortcuts';
+import { TopBar } from '../../app/TopBar';
+import { useSession } from '../../app/useSession';
+import { AmountField } from '../../components/AmountField';
+import { Button, ButtonLink } from '../../components/Button';
+import {
+ AccountDot,
+ accountColorIndex,
+ CategoryPicker,
+ codePoints,
+ ConfirmDialog,
+ DateControl,
+ draftSplitLabel,
+ frequentCategoryIds,
+ newSplitDraft,
+ NOTES_MAX,
+ NotesField,
+ OptionRow,
+ OptionRows,
+ optionRowControlClass,
+ optionRowHintClass,
+ PayerRow,
+ quickRowCategories,
+ resolveSplit,
+ SelectControl,
+ splitDraftOf,
+ SplitPreview,
+ SplitSection,
+ wireSplits,
+ type EditorPeople,
+ type SplitDraft,
+} from '../../components/editor';
+import { EmptyState } from '../../components/EmptyState';
+import { TextField } from '../../components/TextField';
+import { useToast } from '../../components/Toast';
+import { Icon } from '../../design/Icon';
import { useI18n } from '../../i18n/useI18n';
+import { todayIso } from '../../lib/dates';
+import { uuidv7, timestamp } from '../../lib/ids';
+import {
+ AMOUNT_MAX_ORE,
+ AMOUNT_MIN_ORE,
+ amountInputDisplay,
+ amountInputOf,
+ amountInRange,
+ formatMoney,
+} from '../../lib/money';
+import { requestErrorMessage, rejectionMessage } from './messages';
+import {
+ accountBpOf,
+ activeAccountsOf,
+ activeCategories,
+ DATE_MIN,
+ dateInRange,
+ dateMax,
+ defaultAccountId,
+ DESCRIPTION_MAX,
+ peopleOf,
+ pushedExpense,
+ rememberEditorChoice,
+ yesterdayOf,
+} from './model';
+import { ErrorState, LoadingState } from './PageStates';
+import { suggestFor, suggestionHistory } from './suggest/forLedger';
+import styles from './Expenses.module.css';
+import { usePushExpense, type PushOutcome } from './usePushExpense';
-/** S-7 Expense editor: /app/expenses/new and /app/expenses/:id/edit. */
+interface Form {
+ amountText: string;
+ amountOre: number | null;
+ description: string;
+ categoryId: string | null;
+ /** CS-2: set by any pick in the category picker; the suggestion then never changes the category. */
+ pickedByHand: boolean;
+ accountId: string;
+ date: string;
+ payerId: string;
+ split: SplitDraft;
+ notes: string;
+}
+
+type FieldName = 'amount' | 'description' | 'category' | 'date' | 'notes';
+type Errors = Partial>;
+
+/** A banner over the form after a failed write; `currentId` links to the server's version (stale, deleted). */
+interface Problem {
+ message: string;
+ currentId: string | null;
+}
+
+/** The comparable part of a form, for the discard rule (S-7: close with changes asks first). */
+function fingerprint(form: Form): string {
+ return JSON.stringify([
+ form.amountText,
+ form.description,
+ form.categoryId,
+ form.accountId,
+ form.date,
+ form.payerId,
+ form.split,
+ form.notes,
+ ]);
+}
+
+/** Back to where the editor was opened from, or to `fallback` when it was the first page of the visit. */
+function useLeave(fallback: string) {
+ const navigate = useNavigate();
+ return useCallback(
+ (steps = 1, otherwise: string = fallback) => {
+ const index = (window.history.state as { idx?: number } | null)?.idx ?? 0;
+ if (index >= steps) void navigate(-steps);
+ else void navigate(otherwise, { replace: true });
+ },
+ [navigate, fallback],
+ );
+}
+
+/** S-7 Expense editor (W-5): /app/expenses/new (optionally `?account=`) and /app/expenses/:id/edit. */
export default function ExpenseEditorPage() {
const { t } = useI18n();
const { id } = useParams();
- return id === undefined ? (
- void ledger.refetch()} />
+
+ );
+ }
+ const viewerId = session?.userId ?? '';
+ const people = peopleOf(ledger.data, viewerId);
+ if (people === null) {
+ return (
+ <>
+