mulmoclaude 0.9.0 → 0.9.2

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

@@ -1,102 +0,0 @@
-<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

@@ -1,301 +0,0 @@
-<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";
-import { errorMessage } from "../../../utils/errors";
-
-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 = errorMessage(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 = errorMessage(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

@@ -1,186 +0,0 @@
-<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>