@hearthlog/module-finance 0.0.0-stage → 1.0.0

package/src/components/finance/AssetDrawer.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+    const drawerId = $props.id();
+    const drawerFormId0 = drawerId + "-0";
+
+    import { tick } from "svelte";
+    import type { Asset } from "../../data/assets.js";
+    import { CommandDrawer } from "@hearthlog/sdk/ui";
+    import { Button } from "@hearthlog/sdk/ui";
+    import { Input } from "@hearthlog/sdk/ui";
+    import { Label } from "@hearthlog/sdk/ui";
+
+    let {
+        show,
+        asset = null,
+        onClose,
+        onSave,
+    }: {
+        show: boolean;
+        asset?: Asset | null;
+        onClose: () => void;
+        onSave: (draft: { name: string; amount: number }) => Promise<void>;
+    } = $props();
+
+    let name = $state("");
+    let amount = $state(0);
+    let saving = $state(false);
+    let errorMessage = $state("");
+    let loadedKey = "";
+
+    $effect(() => {
+        if (!show) {
+            loadedKey = "";
+            return;
+        }
+        const key = `${show}:${asset?.id ?? "new"}`;
+        if (key === loadedKey) return;
+        loadedKey = key;
+        name = asset?.name ?? "";
+        amount = asset?.amount ?? 0;
+        errorMessage = "";
+    });
+
+    $effect(() => {
+        if (!show) return;
+        let focusFrame = 0;
+        void tick().then(() => {
+            focusFrame = requestAnimationFrame(() => {
+                document.querySelector<HTMLInputElement>(
+                    '[data-testid="asset-name"]',
+                )?.focus();
+            });
+        });
+        return () => cancelAnimationFrame(focusFrame);
+    });
+
+    async function submit(event: SubmitEvent) {
+        event.preventDefault();
+        if (saving) return;
+        if (!name.trim()) {
+            errorMessage = "Enter an asset name.";
+            return;
+        }
+        if (!Number.isFinite(Number(amount)) || Number(amount) <= 0) {
+            errorMessage = "Enter a balance greater than zero.";
+            return;
+        }
+
+        saving = true;
+        errorMessage = "";
+        try {
+            await onSave({ name: name.trim(), amount: Number(amount) });
+        } catch (error) {
+            errorMessage =
+                error instanceof Error
+                    ? error.message
+                    : "The asset could not be saved.";
+        } finally {
+            saving = false;
+        }
+    }
+</script>
+
+<CommandDrawer
+    {show}
+    title={asset ? "Edit asset" : "Add asset"}
+    description={asset
+        ? "Update the name or current balance."
+        : "Add an account or balance to your financial overview."}
+    {onClose}
+>
+    <form id={drawerFormId0} class="space-y-4" onsubmit={submit}>
+        <Label class="block">
+            Asset name
+            <Input
+                autofocus
+                data-testid="asset-name"
+                bind:value={name}
+                placeholder="Savings account"
+                class="mt-1.5"
+            />
+        </Label>
+
+        <Label class="block">
+            Balance
+            <div class="relative mt-1.5">
+                <Input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    bind:value={amount}
+                    class="pr-12 font-medium"
+                />
+                <span class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-sm text-[var(--stor-muted-text)]">Kč</span>
+            </div>
+        </Label>
+
+        {#if errorMessage}
+            <div class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700" role="alert">
+                {errorMessage}
+            </div>
+        {/if}
+
+        </form>
+    {#snippet footer()}
+            <Button variant="secondary" size="sm" onclick={onClose} disabled={saving}>
+                Cancel
+            </Button>
+            <Button type="submit" form={drawerFormId0} disabled={saving}>
+                {saving ? "Saving..." : asset ? "Save changes" : "Add asset"}
+            </Button>
+
+    {/snippet}
+</CommandDrawer>

package/src/components/finance/AssetItem.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { formatMoney } from "@hearthlog/sdk/format";
+	import type { Asset } from "../../data/assets.js";
+	import { type RemoveAssetEvent } from "@hearthlog/sdk/data";
+        import { executeLocalCommand } from "@hearthlog/sdk/data";
+        import { notify } from "@hearthlog/sdk/runtime";
+    import IconPencil from "~icons/mdi/pencil";
+	import IconDeleteOutline from "~icons/mdi/delete-outline";
+	import { CommandConfirmDialog } from "@hearthlog/sdk/ui";
+	import { CommandOnly } from "@hearthlog/sdk/ui";
+	import { SyncStateBadge } from "@hearthlog/sdk/ui";
+
+	let {
+		asset,
+		onEdit,
+	} = $props<{
+		asset: Asset;
+		onEdit: () => void;
+	}>();
+
+	let showConfirmDelete = $state(false);
+	let pending = $state(false);
+
+	const assetMoney = { format: (value: number) => formatMoney(value) };
+
+	async function dispatchEvent(event: RemoveAssetEvent) {
+		pending = true;
+                try {
+                        await executeLocalCommand(event);
+			return true;
+                } catch (error) {
+                        console.error("[AssetItem] Failed to dispatch event:", error);
+			notify.error("Could not update the asset");
+			return false;
+		} finally {
+			pending = false;
+                }
+	}
+
+	async function handleDelete() {
+		const deleteEvent: RemoveAssetEvent = {
+			id: crypto.randomUUID(),
+			type: "ASSET_REMOVED",
+			timestamp: Date.now(),
+			payload: { id: asset.id },
+		};
+		if (await dispatchEvent(deleteEvent)) {
+			notify.success("Asset deleted");
+		}
+	}
+
+</script>
+
+<CommandOnly onUnavailable={() => {
+	showConfirmDelete = false;
+}} />
+
+<li
+	class="grid min-h-9 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-2 py-1.5 text-sm last:border-b-0"
+>
+		<span class="flex min-w-0 items-center gap-2"><span class="truncate font-medium text-[var(--stor-ink)]">{asset.name}</span><SyncStateBadge entityId={`asset:${asset.id}`} /></span>
+		<span class="text-right tabular-nums font-semibold text-[var(--stor-positive)]"
+			>{assetMoney.format(asset.amount)}</span
+		>
+		<CommandOnly>
+			<span class="text-right flex items-center justify-end space-x-1">
+				<button
+					aria-label="Edit"
+					class="flex cursor-pointer items-center rounded-lg p-1.5 text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-surface-muted)] hover:text-[var(--stor-ink)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+					onclick={onEdit}
+					disabled={pending}
+				>
+					<IconPencil class="h-4.5 w-4.5" />
+				</button>
+				<button
+					aria-label="Delete"
+					class="flex cursor-pointer items-center rounded-lg p-1.5 text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-negative-soft)] hover:text-[var(--stor-negative)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+					onclick={() => (showConfirmDelete = true)}
+					disabled={pending}
+				>
+					<IconDeleteOutline class="h-4.5 w-4.5" />
+				</button>
+			</span>
+		</CommandOnly>
+</li>
+
+<CommandConfirmDialog
+	show={showConfirmDelete}
+	title="Delete asset?"
+	message={`Delete “${asset.name}”?`}
+	onConfirm={async () => {
+		showConfirmDelete = false;
+		await handleDelete();
+	}}
+	onCancel={() => (showConfirmDelete = false)}
+/>

package/src/components/finance/AssetView.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+    import { formatMoney } from "@hearthlog/sdk/format";
+    import { currentPageResource } from "@hearthlog/sdk/runtime";
+    import { DataValue } from "@hearthlog/sdk/ui";
+    import { DataPlaceholder } from "@hearthlog/sdk/ui";
+    const resource = currentPageResource();
+    const loading = $derived(resource?.().loading ?? false);
+    import type { Asset } from "../../data/assets.js";
+    import type { AddAssetEvent, UpdateAssetEvent } from "@hearthlog/sdk/data";
+    import { executeLocalCommand } from "@hearthlog/sdk/data";
+    import { notify } from "@hearthlog/sdk/runtime";
+    import AssetItem from "./AssetItem.svelte";
+    import AssetDrawer from "./AssetDrawer.svelte";
+    import { CommandOnly } from "@hearthlog/sdk/ui";
+    import IconPlus from "~icons/mdi/plus";
+
+    let { assets, assetsSum, onUpdateAll } = $props<{
+        assets: Asset[];
+        assetsSum: number;
+        /** Opens every balance in one sheet with one save. */
+        onUpdateAll?: () => void;
+    }>();
+
+    let isAdding = $state(false);
+    let editingAsset = $state<Asset | null>(null);
+
+    const assetMoney = { format: (value: number) => formatMoney(value) };
+
+    function compareAssets(a: Asset, b: Asset): number {
+        const ac = new Date(a.created_at).getTime();
+        const bc = new Date(b.created_at).getTime();
+        if (ac !== bc) return ac - bc; // earlier first
+        return a.id.localeCompare(b.id);
+    }
+
+    const sortedAssets = $derived.by<Asset[]>(() => {
+        return [...assets].sort(compareAssets) as Asset[];
+    });
+
+    let assetError = $state<string | null>(null);
+
+    async function handleSaveAsset(draft: { name: string; amount: number }) {
+        if (editingAsset) {
+            const updateEvent: UpdateAssetEvent = {
+                id: crypto.randomUUID(),
+                type: "ASSET_UPDATED",
+                timestamp: Date.now(),
+                payload: {
+                    id: editingAsset.id,
+                    name: draft.name,
+                    amount: draft.amount,
+                },
+            };
+            await executeLocalCommand(updateEvent);
+            editingAsset = null;
+            notify.success("Asset updated");
+            return;
+        }
+
+        const newAssetEvent: AddAssetEvent = {
+            id: crypto.randomUUID(),
+            type: "ASSET_ADDED",
+            timestamp: Date.now(),
+            payload: {
+                id: crypto.randomUUID(),
+                name: draft.name,
+                amount: draft.amount,
+                asset_type: "asset",
+            },
+        };
+
+        try {
+            await executeLocalCommand(newAssetEvent);
+            assetError = null;
+            isAdding = false;
+            notify.success("Asset added");
+        } catch (error) {
+            console.error("[Asset] Failed to create asset:", error);
+            assetError =
+                error instanceof Error
+                    ? `Failed to create asset: ${error.message}`
+                    : "Failed to create asset. Please try again.";
+            throw error;
+        }
+    }
+
+    function closeAssetDrawer() {
+        isAdding = false;
+        editingAsset = null;
+        assetError = null;
+    }
+</script>
+
+<CommandOnly
+    onUnavailable={() => {
+        closeAssetDrawer();
+    }}
+/>
+
+<div class="text-sm sm:text-base">
+    <svelte:boundary>
+        <div class="stor-today-card overflow-hidden">
+            <div class="flex items-center justify-between gap-3 px-4 py-3">
+                <div class="min-w-0">
+                    <p class="text-sm font-semibold text-[var(--stor-ink)]">Current assets</p>
+                </div>
+                <CommandOnly>
+                    {#if !isAdding && !editingAsset}
+                        {#if onUpdateAll && sortedAssets.length > 1}
+                            <button type="button" class="ml-auto mr-2 shrink-0 text-xs font-semibold text-[var(--stor-accent-text)]" onclick={onUpdateAll}>Update balances</button>
+                        {/if}
+                        <button
+                            type="button"
+                            class="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-[var(--stor-surface)] px-2.5 py-1.5 text-xs font-semibold text-[var(--stor-ink)] transition hover:border-[var(--stor-field-border)] hover:bg-[var(--stor-surface-muted)]"
+                            onclick={() => (isAdding = true)}
+                        >
+                            <IconPlus class="h-3.5 w-3.5" /> Add
+                        </button>
+                    {/if}
+                </CommandOnly>
+            </div>
+            {#if assetError}
+                <div class="mx-4 mt-3 rounded-lg border border-[color-mix(in_srgb,var(--stor-negative),transparent_35%)] bg-[var(--stor-negative-soft)] px-3 py-2 text-sm text-[var(--stor-negative)]">
+                    {assetError}
+                    <button
+                        onclick={() => (assetError = null)}
+                        class="ml-2 font-bold"
+                        aria-label="Dismiss error"
+                    >
+                        ✕
+                    </button>
+                </div>
+            {/if}
+            <ul class="px-3 py-1.5">
+                {#if loading}
+                    <li><DataPlaceholder rows={2} /></li>
+                {:else}
+                    {#each sortedAssets as asset (asset.id)}
+                        <AssetItem {asset} onEdit={() => (editingAsset = asset)} />
+                    {/each}
+                {/if}
+            </ul>
+            {#if !loading && sortedAssets.length > 0}
+                <div class="mx-4 flex items-center justify-between border-t border-[var(--stor-border)] py-2 text-sm font-semibold text-[var(--stor-ink)]">
+                    <span>Total assets</span><span class="tabular-nums"><DataValue>{assetMoney.format(assetsSum)}</DataValue></span>
+                </div>
+            {/if}
+            {#if !loading && sortedAssets.length === 0 && !isAdding}
+                <div class="px-4 pb-4 pt-1 text-sm leading-5 text-[var(--stor-muted-text)]">
+                    No current assets yet. Add cash, savings, or investments to establish what you have now.
+                </div>
+            {/if}
+        </div>
+        {#snippet pending()}
+            <p>..</p>
+        {/snippet}
+    </svelte:boundary>
+</div>
+
+<AssetDrawer
+    show={isAdding || !!editingAsset}
+    asset={editingAsset}
+    onClose={closeAssetDrawer}
+    onSave={handleSaveAsset}
+/>

package/src/components/finance/AssetsSheet.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { Drawer } from "@hearthlog/sdk/ui";
+    import { Button } from "@hearthlog/sdk/ui";
+    import { Input } from "@hearthlog/sdk/ui";
+    import { CommandOnly } from "@hearthlog/sdk/ui";
+    import { executeLocalCommand } from "@hearthlog/sdk/data";
+    import type { Asset } from "../../data/assets.js";
+    import type { AddAssetEvent, RemoveAssetEvent, UpdateAssetEvent } from "@hearthlog/sdk/data";
+    import { refreshPageData } from "@hearthlog/sdk/runtime";
+    import { notify } from "@hearthlog/sdk/runtime";
+    import { formatAmount } from "@hearthlog/sdk/format";
+    import IconDelete from "~icons/mdi/delete-outline";
+    import IconUndo from "~icons/mdi/undo";
+
+    /**
+     * Every asset's balance in one sheet (phones): change any of them, add one
+     * in the empty last row, mark one for removal; Save writes one command for
+     * all changes, so updating balances at the end of a month is one save.
+     */
+    let { show, assets, onClose }: { show: boolean; assets: Asset[]; onClose: () => void } = $props();
+
+    type Row = { id: string; name: string; amount: number | null; original: Asset | null; removed: boolean };
+    let rows = $state<Row[]>([]);
+    let saving = $state(false);
+    let error = $state("");
+    let submissionId = crypto.randomUUID();
+
+    let opened = false;
+    $effect(() => {
+        if (show && !opened) {
+            opened = true;
+            rows = [
+                ...assets.map((asset) => ({ id: asset.id, name: asset.name, amount: Number(asset.amount), original: asset, removed: false })),
+                { id: crypto.randomUUID(), name: "", amount: null, original: null, removed: false },
+            ];
+            error = "";
+            submissionId = crypto.randomUUID();
+        } else if (!show) {
+            opened = false;
+        }
+    });
+
+    // A new empty row appears once the last one is being filled.
+    $effect(() => {
+        const last = rows[rows.length - 1];
+        if (last && !last.original && (last.name.trim() || last.amount !== null)) {
+            rows = [...rows, { id: crypto.randomUUID(), name: "", amount: null, original: null, removed: false }];
+        }
+    });
+
+    const total = $derived(rows.reduce((sum, row) => (row.removed ? sum : sum + (Number(row.amount) || 0)), 0));
+
+    function events(): Array<AddAssetEvent | UpdateAssetEvent | RemoveAssetEvent> {
+        const timestamp = Date.now();
+        const out: Array<AddAssetEvent | UpdateAssetEvent | RemoveAssetEvent> = [];
+        for (const row of rows) {
+            if (row.original && row.removed) {
+                out.push({ id: crypto.randomUUID(), type: "ASSET_REMOVED", timestamp, payload: { id: row.id } });
+            } else if (row.original) {
+                const name = row.name.trim() || row.original.name;
+                const amount = Number(row.amount) || 0;
+                if (name !== row.original.name || amount !== Number(row.original.amount)) {
+                    out.push({ id: crypto.randomUUID(), type: "ASSET_UPDATED", timestamp, payload: { id: row.id, name, amount } });
+                }
+            } else if (row.name.trim() && row.amount !== null && !row.removed) {
+                out.push({ id: crypto.randomUUID(), type: "ASSET_ADDED", timestamp, payload: { id: row.id, name: row.name.trim(), amount: Number(row.amount), asset_type: "asset" } });
+            }
+        }
+        return out;
+    }
+    const changes = $derived(events().length);
+
+    async function save(event: SubmitEvent): Promise<void> {
+        event.preventDefault();
+        if (saving) return;
+        const batch = events();
+        if (batch.length === 0) { onClose(); return; }
+        saving = true;
+        error = "";
+        try {
+            await executeLocalCommand(batch, { submissionId });
+            onClose();
+            notify.success(batch.length === 1 ? "Assets updated" : `${batch.length} asset changes saved`);
+            await refreshPageData("app:assets", "app:transactions");
+        } catch (failure) {
+            console.error("[Assets] Failed to save balances:", failure);
+            error = "The balances could not be saved. Your values are still here.";
+        } finally {
+            saving = false;
+        }
+    }
+</script>
+
+<CommandOnly onUnavailable={onClose}>
+    <Drawer {show} title="Assets" {onClose}>
+        <form id="assets-sheet-form" class="flex flex-col" onsubmit={save}>
+            {#each rows as row (row.id)}
+                <div class="grid grid-cols-[minmax(0,1fr)_8.5rem_2.25rem] items-center gap-2 border-b border-[color-mix(in_srgb,var(--stor-border)_62%,transparent)] py-2 {row.removed ? 'opacity-45' : ''}">
+                    <label><span class="sr-only">Asset name</span>
+                        <input bind:value={row.name} placeholder={row.original ? "" : "New asset"} disabled={row.removed} class="h-11 w-full min-w-0 bg-transparent text-[15px] font-medium text-[var(--stor-ink)] outline-none placeholder:text-[var(--stor-muted-text)] {row.removed ? 'line-through' : ''}" />
+                    </label>
+                    <label class="relative"><span class="sr-only">Balance of {row.name || "the new asset"}</span>
+                        <Input type="number" inputmode="decimal" step="0.01" bind:value={row.amount} placeholder="0" disabled={row.removed} class="pr-9 text-right" />
+                        <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-[var(--stor-muted-text)]">Kč</span>
+                    </label>
+                    {#if row.original}
+                        <button type="button" class="grid h-9 w-9 place-items-center rounded-lg text-[var(--stor-muted-text)]" aria-label={row.removed ? `Keep ${row.name}` : `Remove ${row.name}`} onclick={() => (row.removed = !row.removed)}>
+                            {#if row.removed}<IconUndo class="h-5 w-5" />{:else}<IconDelete class="h-5 w-5" />{/if}
+                        </button>
+                    {:else}<span></span>{/if}
+                </div>
+            {/each}
+            <div class="flex items-baseline justify-between pt-3 text-sm text-[var(--stor-muted-text)]">
+                <span>Available now</span><b class="text-xl font-semibold tabular-nums text-[var(--stor-ink)]">{formatAmount(total)} Kč</b>
+            </div>
+            {#if error}<p class="mt-2 text-sm text-[var(--stor-negative)]" role="alert">{error}</p>{/if}
+        </form>
+        {#snippet footer()}
+            <Button type="submit" form="assets-sheet-form" class="flex-1" disabled={saving}>{saving ? "Saving…" : changes > 0 ? `Save ${changes} ${changes === 1 ? "change" : "changes"}` : "Done"}</Button>
+        {/snippet}
+    </Drawer>
+</CommandOnly>

package/src/components/finance/BudgetItemActionsCell.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { CommandOnly } from "@hearthlog/sdk/ui";
+    import IconPencil from "~icons/mdi/pencil-outline";
+    import IconDelete from "~icons/mdi/delete-outline";
+
+    let { name, onEdit, onDelete }: { name: string; onEdit: () => void; onDelete: () => void } = $props();
+</script>
+
+<div class="flex items-center justify-end gap-1">
+    <CommandOnly>
+        <button type="button" aria-label={`Edit ${name}`} class="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-accent-soft)] hover:text-[var(--stor-accent-strong)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]" onclick={onEdit}>
+            <IconPencil class="h-4 w-4" />
+        </button>
+        <button type="button" aria-label={`Delete ${name}`} class="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-negative-soft)] hover:text-[var(--stor-negative)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]" onclick={onDelete}>
+            <IconDelete class="h-4 w-4" />
+        </button>
+    </CommandOnly>
+</div>

package/src/components/finance/BudgetItemAmountCell.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    let { text, tone }: { text: string; tone: "income" | "expense" } = $props();
+</script>
+
+<span class="block whitespace-nowrap text-right font-semibold tabular-nums {tone === 'income' ? 'text-[var(--stor-positive)]' : 'text-[var(--stor-ink)]'}" data-testid="budget-row-amount">{text}</span>

package/src/components/finance/BudgetItemCategoryCell.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { category }: { category: string } = $props();
+
+    const label = $derived(category ? `${category.charAt(0).toUpperCase()}${category.slice(1).replaceAll("-", " ")}` : "Other");
+</script>
+
+<span class="text-xs text-[var(--stor-muted-text)]">{label}</span>

package/src/components/finance/BudgetItemDrawer.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { Drawer } from "@hearthlog/sdk/ui";
+    import { Button } from "@hearthlog/sdk/ui";
+    import { Input } from "@hearthlog/sdk/ui";
+    import { Label } from "@hearthlog/sdk/ui";
+    import { Select, type SelectOption } from "@hearthlog/sdk/ui";
+    import type { BudgetItem } from "@hearthlog/sdk/data";
+    import { tick } from "svelte";
+
+    export interface BudgetItemDraft {
+        id?: string;
+        name: string;
+        amount: number;
+        itemType: "income" | "expense";
+        category: string;
+    }
+
+    let { show, planName, initialItem, initialType, onClose, onSave } = $props<{
+        show: boolean;
+        planName: string;
+        initialItem: BudgetItem | null;
+        initialType: "income" | "expense";
+        onClose: () => void;
+        onSave: (draft: BudgetItemDraft, addAnother: boolean) => Promise<void>;
+    }>();
+
+    const categories: SelectOption[] = [
+        { value: "income", label: "Income" },
+        { value: "housing", label: "Housing" },
+        { value: "food", label: "Food" },
+        { value: "transport", label: "Transport" },
+        { value: "subscriptions", label: "Subscriptions" },
+        { value: "health", label: "Health" },
+        { value: "savings", label: "Savings" },
+        { value: "other", label: "Other" },
+    ];
+    let form = $state<BudgetItemDraft>({ name: "", amount: 0, itemType: "expense", category: "other" });
+    let addAnother = $state(false);
+    let saving = $state(false);
+    let errorMessage = $state("");
+    let loadedKey = "";
+
+    $effect(() => {
+        const key = `${show}:${initialItem?.id ?? "new"}:${initialType}`;
+        // Closing forgets the loaded item, so the next new item starts clean.
+        if (!show) loadedKey = "";
+        if (!show || key === loadedKey) return;
+        loadedKey = key;
+        form = initialItem ? {
+            id: initialItem.id,
+            name: initialItem.name,
+            amount: initialItem.amount,
+            itemType: initialItem.item_type as "income" | "expense",
+            category: initialItem.category,
+        } : { name: "", amount: 0, itemType: initialType, category: initialType === "income" ? "income" : "other" };
+        addAnother = false;
+        errorMessage = "";
+        let firstFrame = 0;
+        let secondFrame = 0;
+        void tick().then(() => {
+            firstFrame = requestAnimationFrame(() => {
+                secondFrame = requestAnimationFrame(() => {
+                    document.querySelector<HTMLInputElement>('[data-testid="budget-item-name"]')?.focus();
+                });
+            });
+        });
+        return () => {
+            cancelAnimationFrame(firstFrame);
+            cancelAnimationFrame(secondFrame);
+        };
+    });
+
+    async function submit(event: SubmitEvent) {
+        event.preventDefault();
+        if (saving) return;
+        const amount = Number(form.amount);
+        if (!form.name.trim()) { errorMessage = "Enter an item name."; return; }
+        if (!Number.isFinite(amount) || amount <= 0) { errorMessage = "Enter an amount greater than zero."; return; }
+        saving = true;
+        errorMessage = "";
+        try {
+            await onSave({ ...form, name: form.name.trim(), amount }, addAnother && !form.id);
+            if (addAnother && !form.id) {
+                form = { ...form, name: "", amount: 0 };
+                loadedKey = "";
+                await tick();
+                document.querySelector<HTMLInputElement>('[data-testid="budget-item-name"]')?.focus();
+            }
+        } catch (error) {
+            errorMessage = error instanceof Error ? error.message : "The item could not be saved.";
+        } finally {
+            saving = false;
+        }
+    }
+</script>
+
+<Drawer show={show} title={initialItem ? "Edit planned item" : "Add planned item"} description={planName} onClose={onClose}>
+    <form id="budget-item-form" class="space-y-4" onsubmit={submit}>
+        <fieldset>
+            <legend class="mb-1.5 text-sm font-medium text-stone-800">Type</legend>
+            <div class="grid grid-cols-2 rounded-xl bg-[var(--stor-surface-muted)] p-1">
+                <button type="button" class="h-10 rounded-lg text-sm font-semibold transition {form.itemType === 'expense' ? 'bg-[var(--stor-selected)] text-[var(--stor-accent-strong)] shadow-sm' : 'text-[var(--stor-muted-text)]'}" onclick={() => { form.itemType = 'expense'; if (form.category === 'income') form.category = 'other'; }}>Expense</button>
+                <button type="button" class="h-10 rounded-lg text-sm font-semibold transition {form.itemType === 'income' ? 'bg-[var(--stor-selected)] text-[var(--stor-accent-strong)] shadow-sm' : 'text-[var(--stor-muted-text)]'}" onclick={() => { form.itemType = 'income'; form.category = 'income'; }}>Income</button>
+            </div>
+        </fieldset>
+        <Label class="block">Name<Input data-testid="budget-item-name" class="mt-1.5" bind:value={form.name} placeholder="Rent, salary, groceries…" /></Label>
+        <Label class="block">Amount<div class="relative mt-1.5"><Input data-testid="budget-item-amount" type="number" inputmode="decimal" min="0.01" step="0.01" class="pr-12 font-medium" bind:value={form.amount} /><span class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-sm text-[var(--stor-muted-text)]">Kč</span></div><span class="mt-1 block text-xs text-[var(--stor-muted-text)] max-md:hidden">Always enter a positive amount.</span></Label>
+        <Label class="block">Category<Select class="mt-1.5" value={form.category} options={categories} onValueChange={(value) => form.category = value} /></Label>
+        {#if !initialItem}<label class="flex min-h-11 items-center gap-2 text-sm text-stone-700"><input type="checkbox" bind:checked={addAnother} class="h-4 w-4 rounded accent-[var(--stor-action)]" /> Add another after saving</label>{/if}
+        {#if errorMessage}<p class="text-sm text-[var(--stor-negative)]" role="alert">{errorMessage}</p>{/if}
+    </form>
+    {#snippet footer()}
+        <Button variant="secondary" onclick={onClose} disabled={saving}>Cancel</Button>
+        <Button type="submit" form="budget-item-form" disabled={saving} data-testid="save-budget-item">{saving ? "Saving…" : initialItem ? "Save changes" : form.itemType === "income" ? "Add income" : "Add expense"}</Button>
+    {/snippet}
+</Drawer>