mulmoclaude 0.5.2 → 0.6.0

package/src/plugins/accounting/components/AccountsList.vue

@@ -0,0 +1,102 @@
+<template>
+  <!-- Full-tab chart-of-accounts list. Distinct from AccountsModal
+       (called from the entry / opening forms): this one fills the
+       canvas, surfaces a single "Manage accounts" button at the top,
+       and emits `selectAccount` so the parent View can route the
+       click into the Ledger tab pre-filtered to that account. -->
+  <div class="flex flex-col gap-3" data-testid="accounting-accounts-list">
+    <div class="flex flex-wrap items-center justify-end gap-2">
+      <button
+        type="button"
+        class="h-8 px-2.5 flex items-center gap-1 rounded border border-gray-300 text-sm text-gray-600 hover:bg-gray-50"
+        data-testid="accounting-accounts-manage"
+        @click="showManageModal = true"
+      >
+        <span class="material-icons text-base">tune</span>
+        <span>{{ t("pluginAccounting.accounts.manageButton") }}</span>
+      </button>
+    </div>
+    <section v-for="group in groups" :key="group.type" class="flex flex-col gap-1">
+      <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ t(`pluginAccounting.accounts.sectionTitle.${group.type}`) }}</h4>
+      <p v-if="group.accounts.length === 0" class="text-xs text-gray-400 italic px-1">{{ t("pluginAccounting.accounts.listEmpty") }}</p>
+      <ul v-else class="flex flex-col">
+        <li
+          v-for="account in group.accounts"
+          :key="account.code"
+          tabindex="0"
+          role="button"
+          :aria-label="t('pluginAccounting.accounts.openLedgerAria', { code: account.code, name: account.name })"
+          class="flex items-center gap-3 px-2 py-1.5 border-b border-gray-100 hover:bg-blue-50 cursor-pointer text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 rounded"
+          :data-testid="`accounting-account-row-${account.code}`"
+          @click="onSelect(account)"
+          @keydown.enter.prevent.self="onKeyActivate($event, account)"
+          @keydown.space.prevent.self="onKeyActivate($event, account)"
+        >
+          <span class="font-mono text-xs w-16 shrink-0">{{ account.code }}</span>
+          <span class="text-sm flex-1 min-w-0 truncate">{{ account.name }}</span>
+        </li>
+      </ul>
+    </section>
+    <AccountsModal v-if="showManageModal" :book-id="bookId" :accounts="accounts" @close="showManageModal = false" @changed="onAccountsChanged" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { Account, AccountType } from "../api";
+import AccountsModal from "./AccountsModal.vue";
+
+const { t } = useI18n();
+
+const props = defineProps<{ bookId: string; accounts: Account[] }>();
+const emit = defineEmits<{ selectAccount: [code: string]; changed: [] }>();
+
+const ACCOUNT_TYPES: readonly AccountType[] = ["asset", "liability", "equity", "income", "expense"];
+
+const showManageModal = ref(false);
+
+interface AccountGroup {
+  type: AccountType;
+  accounts: Account[];
+}
+
+function byCode(left: Account, right: Account): number {
+  return left.code.localeCompare(right.code);
+}
+
+// Soft-deleted accounts (active === false) are hidden — managing
+// them lives in the Manage Accounts modal, where Reactivate is one
+// click away.
+const groups = computed<AccountGroup[]>(() =>
+  ACCOUNT_TYPES.map((type) => ({
+    type,
+    accounts: props.accounts
+      .filter((account) => account.type === type && account.active !== false)
+      .slice()
+      .sort(byCode),
+  })),
+);
+
+function onSelect(account: Account): void {
+  emit("selectAccount", account.code);
+}
+
+// Keyboard activation: Enter / Space on a focused row. The
+// `.prevent.self` modifiers in the template stop the default scroll
+// (Space) and ensure we don't fire when the event bubbles up from
+// a focused descendant (currently none, but defensive for future
+// row content).
+function onKeyActivate(event: KeyboardEvent, account: Account): void {
+  if (event.repeat) return;
+  emit("selectAccount", account.code);
+}
+
+function onAccountsChanged(): void {
+  // Forward to the parent — `bookVersion` already drives the
+  // accounts refetch in View.vue, so the list updates without us
+  // doing anything extra. Bubble the event in case a future
+  // consumer needs it.
+  emit("changed");
+}
+</script>

package/src/plugins/accounting/components/AccountsModal.vue

@@ -0,0 +1,300 @@
+<template>
+  <!-- Manage-accounts modal. Opened from JournalEntryForm and
+       OpeningBalancesForm. Lists the current chart of accounts
+       grouped by type, with inline add / edit. Stays open across
+       saves so the user can fix several accounts in a row. -->
+  <div
+    class="fixed inset-0 z-50 bg-black/20 flex items-center justify-center"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="accounting-accounts-modal-title"
+    data-testid="accounting-accounts-modal"
+    @click.self="onBackdropClick"
+    @keydown.esc="emit('close')"
+  >
+    <div class="bg-white rounded shadow-lg w-[32rem] max-h-[80vh] flex flex-col">
+      <header class="flex items-center justify-between px-4 py-2 border-b border-gray-200 shrink-0">
+        <h3 id="accounting-accounts-modal-title" class="text-base font-semibold">{{ t("pluginAccounting.accounts.modalTitle") }}</h3>
+        <button
+          ref="closeButton"
+          type="button"
+          class="h-8 w-8 flex items-center justify-center rounded text-gray-500 hover:bg-gray-100"
+          data-testid="accounting-accounts-close"
+          :aria-label="t('pluginAccounting.common.cancel')"
+          @click="emit('close')"
+        >
+          <span class="material-icons text-base">close</span>
+        </button>
+      </header>
+      <div class="flex-1 overflow-auto px-4 py-3 flex flex-col gap-3">
+        <p v-if="successMessage" class="text-xs text-green-600" data-testid="accounting-accounts-success">{{ successMessage }}</p>
+        <p v-if="toggleError" class="text-xs text-red-500" data-testid="accounting-accounts-toggle-error">{{ toggleError }}</p>
+        <section v-for="group in groups" :key="group.type" class="flex flex-col gap-1">
+          <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ t(`pluginAccounting.accounts.sectionTitle.${group.type}`) }}</h4>
+          <div v-if="group.accounts.length === 0" class="text-xs text-gray-400 italic px-1">{{ t("pluginAccounting.common.empty") }}</div>
+          <template v-for="account in group.accounts" :key="account.code">
+            <AccountRow v-if="editingCode !== account.code" :account="account" @edit="onEdit(account)" @toggle-active="onToggleActive(account)" />
+            <AccountEditor
+              v-else
+              :draft="draft"
+              :is-new="false"
+              :busy="saving"
+              :error="error"
+              :existing-accounts="accounts"
+              @save="onSave"
+              @cancel="onCancelEditor"
+            />
+          </template>
+          <div v-if="addingNew && draft.type === group.type" :ref="(node) => bindNewEditor(node, group.type)">
+            <AccountEditor :draft="draft" is-new :busy="saving" :error="error" :existing-accounts="accounts" @save="onSave" @cancel="onCancelEditor" />
+          </div>
+          <button
+            v-else
+            type="button"
+            class="self-start h-8 px-2.5 flex items-center gap-1 rounded text-xs text-gray-600 hover:bg-gray-100"
+            :data-testid="`accounting-accounts-add-${group.type}`"
+            @click="onAdd(group.type)"
+          >
+            <span class="material-icons text-sm">add</span>
+            <span>{{ t("pluginAccounting.accounts.addToCategory", { type: t(`pluginAccounting.accounts.typeOption.${group.type}`) }) }}</span>
+          </button>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { upsertAccount, type Account, type AccountType } from "../api";
+import AccountRow from "./AccountRow.vue";
+import AccountEditor from "./AccountEditor.vue";
+import type { AccountDraft } from "./accountDraft";
+import { validateAccountDraft, type AccountValidationError } from "./accountValidation";
+import { suggestNextCode } from "./accountNumbering";
+
+const { t } = useI18n();
+
+const props = defineProps<{ bookId: string; accounts: Account[] }>();
+const emit = defineEmits<{ close: []; changed: [] }>();
+
+// Order matches conventional financial-statement layout (B/S then
+// P/L). Section titles are pulled from i18n via the literal type
+// keys, so this array drives both ordering and visibility.
+const ACCOUNT_TYPES: readonly AccountType[] = ["asset", "liability", "equity", "income", "expense"];
+const SUCCESS_FADE_MS = 2500;
+
+const VALIDATION_MESSAGE_KEYS: Record<AccountValidationError, string> = {
+  emptyCode: "pluginAccounting.accounts.errorEmptyCode",
+  reservedCode: "pluginAccounting.accounts.errorReservedCode",
+  invalidCodeFormat: "pluginAccounting.accounts.errorInvalidCodeFormat",
+  codeTypeMismatch: "pluginAccounting.accounts.errorCodeTypeMismatch",
+  emptyName: "pluginAccounting.accounts.errorEmptyName",
+  duplicateCode: "pluginAccounting.accounts.errorDuplicateCode",
+  duplicateName: "pluginAccounting.accounts.errorDuplicateName",
+};
+
+interface AccountGroup {
+  type: AccountType;
+  accounts: Account[];
+}
+
+const groups = computed<AccountGroup[]>(() =>
+  ACCOUNT_TYPES.map((type) => ({
+    type,
+    accounts: props.accounts
+      .filter((account) => account.type === type)
+      .slice()
+      .sort(byCode),
+  })),
+);
+
+function byCode(left: Account, right: Account): number {
+  return left.code.localeCompare(right.code);
+}
+
+const editingCode = ref<string | null>(null);
+const addingNew = ref(false);
+const draft = ref<AccountDraft>(emptyDraft("asset"));
+const saving = ref(false);
+const error = ref<string | null>(null);
+// Toggle (Deactivate / Reactivate) keeps its own state. Sharing
+// `saving` / `error` with the editor would (a) hide a toggle
+// failure when no editor is mounted to render `:error`, and (b)
+// blank out an in-progress editor's validation message and
+// freeze its Save button when the user fires a toggle on a
+// different row.
+const toggleSaving = ref(false);
+const toggleError = ref<string | null>(null);
+const successMessage = ref<string | null>(null);
+const closeButton = ref<HTMLButtonElement | null>(null);
+const newEditorWrapper = ref<HTMLDivElement | null>(null);
+let successTimer: ReturnType<typeof setTimeout> | null = null;
+
+function emptyDraft(type: AccountType): AccountDraft {
+  return { code: "", name: "", type, note: "" };
+}
+
+function draftForNew(type: AccountType): AccountDraft {
+  return { code: suggestNextCode(type, props.accounts), name: "", type, note: "" };
+}
+
+// Vue's `:ref` on a v-for-style element gives us back either the
+// node or null (on unmount). We only want to capture the editor
+// belonging to the section that owns the current draft, so the
+// section type is checked here rather than relying on the order
+// in which Vue invokes the function refs.
+function bindNewEditor(node: Element | object | null, sectionType: AccountType): void {
+  if (sectionType !== draft.value.type) return;
+  newEditorWrapper.value = (node as HTMLDivElement | null) ?? null;
+}
+
+function onEdit(account: Account): void {
+  // Collapse any other editor first so only one is open at a time.
+  addingNew.value = false;
+  error.value = null;
+  draft.value = { code: account.code, name: account.name, type: account.type, note: account.note ?? "" };
+  editingCode.value = account.code;
+}
+
+function onAdd(type: AccountType): void {
+  editingCode.value = null;
+  error.value = null;
+  draft.value = draftForNew(type);
+  addingNew.value = true;
+  // Scroll the new in-place editor into view in case the section
+  // sits below the visible viewport — opening the editor without
+  // scrolling would leave the user staring at unchanged content
+  // above the fold.
+  void nextTick(() => {
+    newEditorWrapper.value?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  });
+}
+
+function onCancelEditor(): void {
+  editingCode.value = null;
+  addingNew.value = false;
+  error.value = null;
+  draft.value = emptyDraft("asset");
+}
+
+function validateDraft(next: AccountDraft, isNew: boolean): string | null {
+  const code = validateAccountDraft(next, props.accounts, isNew);
+  return code === null ? null : t(VALIDATION_MESSAGE_KEYS[code]);
+}
+
+async function onSave(next: AccountDraft): Promise<void> {
+  if (saving.value) return;
+  const isNew = addingNew.value;
+  const validation = validateDraft(next, isNew);
+  if (validation !== null) {
+    error.value = validation;
+    return;
+  }
+  saving.value = true;
+  error.value = null;
+  try {
+    const account: Account = {
+      code: next.code.trim(),
+      name: next.name.trim(),
+      type: next.type,
+    };
+    const note = next.note.trim();
+    if (note.length > 0) account.note = note;
+    // Preserve the existing active flag on edit — the editor
+    // doesn't surface the field, so reading from props.accounts
+    // is the only place the truth lives.
+    if (!isNew) {
+      const existing = props.accounts.find((entry) => entry.code === account.code);
+      if (existing?.active === false) account.active = false;
+    }
+    const result = await upsertAccount(account, props.bookId);
+    if (!result.ok) {
+      error.value = result.error;
+      return;
+    }
+    onCancelEditor();
+    showSuccess(t("pluginAccounting.accounts.success"));
+    emit("changed");
+  } catch (err) {
+    // apiPost normally folds network / HTTP failures into
+    // result.ok=false, so this is a belt-and-braces guard against
+    // a runtime failure that would otherwise leave the Save button
+    // stuck on "Saving…".
+    error.value = err instanceof Error ? err.message : String(err);
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function onToggleActive(account: Account): Promise<void> {
+  // No confirm dialog: deactivation hides the account from the
+  // entry/ledger dropdowns but is fully reversible via Reactivate
+  // on the same row, and historical entries are unaffected. A
+  // confirm prompt was over-protective for an action that's a
+  // single click to undo.
+  //
+  // Toggle uses its own `toggleSaving` / `toggleError` refs rather
+  // than the AccountEditor's shared `saving` / `error` so that a
+  // toggle failure still surfaces (via the toggle banner) when no
+  // editor is mounted to render `:error`.
+  if (toggleSaving.value) return;
+  // Dismiss any open editor — the row about to (de)activate may be
+  // the same one being edited, and even when it isn't, the user has
+  // shifted attention to the toggle. Unsaved edits are dropped per
+  // product call: reopening Edit is one click.
+  onCancelEditor();
+  const willDeactivate = account.active !== false;
+  toggleSaving.value = true;
+  toggleError.value = null;
+  try {
+    const next: Account = {
+      code: account.code,
+      name: account.name,
+      type: account.type,
+    };
+    if (account.note !== undefined && account.note.length > 0) next.note = account.note;
+    // Send the active flag explicitly so the server can tell
+    // "user wants to (de)activate" apart from "user is editing
+    // and didn't mention active" — the latter inherits the
+    // existing flag and would otherwise turn Reactivate into a
+    // no-op.
+    next.active = !willDeactivate;
+    const result = await upsertAccount(next, props.bookId);
+    if (!result.ok) {
+      toggleError.value = result.error;
+      return;
+    }
+    emit("changed");
+  } catch (err) {
+    toggleError.value = err instanceof Error ? err.message : String(err);
+  } finally {
+    toggleSaving.value = false;
+  }
+}
+
+function showSuccess(message: string): void {
+  successMessage.value = message;
+  if (successTimer !== null) clearTimeout(successTimer);
+  successTimer = setTimeout(() => {
+    successMessage.value = null;
+    successTimer = null;
+  }, SUCCESS_FADE_MS);
+}
+
+function onBackdropClick(): void {
+  emit("close");
+}
+
+onMounted(() => {
+  // Initial focus on the close button so Esc / Tab work
+  // immediately and the user isn't dropped into an editor field
+  // they didn't ask for.
+  void nextTick(() => closeButton.value?.focus());
+});
+
+onUnmounted(() => {
+  if (successTimer !== null) clearTimeout(successTimer);
+});
+</script>

package/src/plugins/accounting/components/BalanceSheet.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="flex flex-col gap-3" data-testid="accounting-balance-sheet">
+    <div class="flex flex-wrap items-end gap-3">
+      <label class="text-xs text-gray-500 flex flex-col gap-1">
+        {{ t("pluginAccounting.balanceSheet.shortcutLabel") }}
+        <select
+          :value="selectedShortcut"
+          class="h-8 px-2 rounded border border-gray-300 text-sm bg-white"
+          data-testid="accounting-bs-shortcut"
+          @change="onShortcutChange(($event.target as HTMLSelectElement).value)"
+        >
+          <option value="" hidden></option>
+          <option value="thisMonth">{{ t("pluginAccounting.balanceSheet.thisMonth") }}</option>
+          <option value="lastMonth">{{ t("pluginAccounting.balanceSheet.lastMonth") }}</option>
+          <option value="lastQuarter">{{ t("pluginAccounting.balanceSheet.lastQuarter") }}</option>
+          <option value="lastYear">{{ t("pluginAccounting.balanceSheet.lastYear") }}</option>
+        </select>
+      </label>
+      <label class="text-xs text-gray-500 flex flex-col gap-1">
+        {{ t("pluginAccounting.balanceSheet.asOfLabel") }}
+        <input v-model="period" type="month" class="h-8 px-2 rounded border border-gray-300 text-sm" data-testid="accounting-bs-period" />
+      </label>
+      <button class="h-8 px-2.5 rounded border border-gray-300 text-sm text-gray-600 hover:bg-gray-50" @click="refresh">
+        <span class="material-icons text-base align-middle">refresh</span>
+      </button>
+    </div>
+    <p v-if="loading" class="text-xs text-gray-400">{{ t("pluginAccounting.common.loading") }}</p>
+    <p v-else-if="error" class="text-xs text-red-500">{{ t("pluginAccounting.common.error", { error }) }}</p>
+    <template v-else-if="balanceSheet">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <section v-for="section in balanceSheet.sections" :key="section.type" class="border border-gray-200 rounded p-3">
+          <h4 class="text-sm font-semibold mb-2">{{ sectionLabel(section.type) }}</h4>
+          <table class="w-full text-sm">
+            <tbody>
+              <tr
+                v-for="row in section.rows"
+                :key="row.accountCode"
+                class="border-b border-gray-100"
+                :class="
+                  isEarningsRow(row)
+                    ? 'italic text-gray-600'
+                    : 'hover:bg-blue-50 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400'
+                "
+                :tabindex="isEarningsRow(row) ? -1 : 0"
+                :role="isEarningsRow(row) ? undefined : 'button'"
+                :aria-label="isEarningsRow(row) ? undefined : t('pluginAccounting.accounts.openLedgerAria', { code: row.accountCode, name: row.accountName })"
+                :data-testid="isEarningsRow(row) ? undefined : `accounting-bs-row-${row.accountCode}`"
+                @click="onRowClick(row)"
+                @keydown.enter.prevent.self="onKeyActivate($event, row)"
+                @keydown.space.prevent.self="onKeyActivate($event, row)"
+              >
+                <td class="py-1 px-1">
+                  <span v-if="!isEarningsRow(row)" class="font-mono text-[10px] text-gray-400 mr-2">{{ row.accountCode }}</span
+                  >{{ rowName(row) }}
+                </td>
+                <td class="py-1 px-1 text-right font-mono">{{ formatAmount(row.balance) }}</td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr class="font-semibold border-t border-gray-300">
+                <td class="py-1 px-1">{{ t("pluginAccounting.balanceSheet.total") }}</td>
+                <td class="py-1 px-1 text-right">{{ formatAmount(section.total) }}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </section>
+      </div>
+      <p :class="Math.abs(balanceSheet.imbalance) <= 0.01 ? 'text-green-600' : 'text-red-500'" class="text-xs" data-testid="accounting-bs-imbalance">
+        {{ t("pluginAccounting.balanceSheet.imbalance", { amount: formatAmount(balanceSheet.imbalance) }) }}
+      </p>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { getBalanceSheet, type BalanceSheet } from "../api";
+import { formatAmount as formatAmountWithCurrency } from "../currencies";
+import { decemberOfPreviousYearString, lastMonthOfPreviousQuarterString, localMonthString, previousMonthString } from "../dates";
+import { useLatestRequest } from "./useLatestRequest";
+
+const { t } = useI18n();
+
+const props = defineProps<{ bookId: string; currency: string; version: number }>();
+const emit = defineEmits<{ selectAccount: [code: string] }>();
+
+const period = ref(localMonthString());
+const balanceSheet = ref<BalanceSheet | null>(null);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const { begin: beginRequest, isCurrent } = useLatestRequest();
+
+function formatAmount(value: number): string {
+  return formatAmountWithCurrency(value, props.currency);
+}
+
+function sectionLabel(type: string): string {
+  if (type === "asset") return t("pluginAccounting.balanceSheet.sections.asset");
+  if (type === "liability") return t("pluginAccounting.balanceSheet.sections.liability");
+  if (type === "equity") return t("pluginAccounting.balanceSheet.sections.equity");
+  return type;
+}
+
+// The server adds a synthetic "Current period earnings" row to the
+// Equity section so the B/S balances during the period (before
+// closing entries fold income/expense into Retained Earnings).
+// `_currentEarnings` is the sentinel accountCode emitted by the
+// server — see CURRENT_EARNINGS_ACCOUNT_CODE in
+// server/accounting/report.ts.
+const CURRENT_EARNINGS_ACCOUNT_CODE = "_currentEarnings";
+
+interface BSRow {
+  accountCode: string;
+  accountName: string;
+  balance: number;
+}
+
+function isEarningsRow(row: BSRow): boolean {
+  return row.accountCode === CURRENT_EARNINGS_ACCOUNT_CODE;
+}
+
+function rowName(row: BSRow): string {
+  return isEarningsRow(row) ? t("pluginAccounting.balanceSheet.currentEarnings") : row.accountName;
+}
+
+// Earnings row is synthetic (no underlying account on file), so it
+// can't be drilled into. Real-account rows route to the Ledger tab
+// pre-filtered to that account — same pattern as AccountsList.
+function onRowClick(row: BSRow): void {
+  if (isEarningsRow(row)) return;
+  emit("selectAccount", row.accountCode);
+}
+
+function onKeyActivate(event: KeyboardEvent, row: BSRow): void {
+  if (event.repeat) return;
+  if (isEarningsRow(row)) return;
+  emit("selectAccount", row.accountCode);
+}
+
+// Mirrors the DateRangePicker pattern: hidden "" sentinel for the
+// "no preset matches" custom state, otherwise the dropdown shows
+// whichever shortcut produces the current period. Re-evaluates `now`
+// on every read so the labels stay correct across midnight without
+// any cache-invalidation plumbing.
+type Shortcut = "thisMonth" | "lastMonth" | "lastQuarter" | "lastYear";
+type SelectedShortcut = Shortcut | "";
+
+const selectedShortcut = computed<SelectedShortcut>(() => {
+  const { value } = period;
+  const now = new Date();
+  if (value === localMonthString(now)) return "thisMonth";
+  if (value === previousMonthString(now)) return "lastMonth";
+  if (value === lastMonthOfPreviousQuarterString(now)) return "lastQuarter";
+  if (value === decemberOfPreviousYearString(now)) return "lastYear";
+  return "";
+});
+
+function onShortcutChange(raw: string): void {
+  const now = new Date();
+  if (raw === "thisMonth") period.value = localMonthString(now);
+  else if (raw === "lastMonth") period.value = previousMonthString(now);
+  else if (raw === "lastQuarter") period.value = lastMonthOfPreviousQuarterString(now);
+  else if (raw === "lastYear") period.value = decemberOfPreviousYearString(now);
+}
+
+async function refresh(): Promise<void> {
+  const token = beginRequest();
+  loading.value = true;
+  error.value = null;
+  try {
+    const result = await getBalanceSheet({ kind: "month", period: period.value }, props.bookId);
+    if (!isCurrent(token)) return;
+    if (!result.ok) {
+      error.value = result.error;
+      balanceSheet.value = null;
+      return;
+    }
+    balanceSheet.value = result.data.balanceSheet;
+  } finally {
+    if (isCurrent(token)) loading.value = false;
+  }
+}
+
+watch(() => [props.bookId, props.version, period.value], refresh, { immediate: true });
+</script>