mulmoclaude 0.5.2 → 0.6.0

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

@@ -0,0 +1,206 @@
+<template>
+  <div class="flex flex-col gap-3" data-testid="accounting-ledger">
+    <div class="flex flex-wrap items-end gap-3">
+      <label class="text-xs text-gray-500 flex flex-col gap-1">
+        {{ t("pluginAccounting.ledger.selectAccount") }}
+        <select v-model="accountCode" class="h-8 px-2 rounded border border-gray-300 text-sm bg-white" data-testid="accounting-ledger-account">
+          <option value="">{{ DASH }}</option>
+          <option v-for="account in selectableAccounts" :key="account.code" :value="account.code">{{ formatAccountLabel(account) }}</option>
+        </select>
+      </label>
+      <DateRangePicker v-model="range" :fiscal-year-end="resolvedFiscalYearEnd" :opening-date="openingDate" />
+      <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="ledger">
+      <table class="w-full text-sm" :data-testid="showTaxRegistrationColumn ? 'accounting-ledger-table-with-tax-id' : 'accounting-ledger-table'">
+        <thead>
+          <tr class="text-xs text-gray-500 border-b border-gray-200">
+            <th class="text-left py-1 px-2">{{ t("pluginAccounting.ledger.columns.date") }}</th>
+            <th class="text-left py-1 px-2">{{ t("pluginAccounting.ledger.columns.memo") }}</th>
+            <th v-if="showTaxRegistrationColumn" class="text-left py-1 px-2 w-40">
+              {{ t("pluginAccounting.ledger.columns.taxRegistrationId") }}
+            </th>
+            <th class="text-right py-1 px-2 w-28">{{ t("pluginAccounting.ledger.columns.debit") }}</th>
+            <th class="text-right py-1 px-2 w-28">{{ t("pluginAccounting.ledger.columns.credit") }}</th>
+            <th class="text-right py-1 px-2 w-28">{{ t("pluginAccounting.ledger.columns.balance") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="row in ledger.rows"
+            :key="`${row.entryId}-${row.date}`"
+            :class="row.kind === 'void' || row.kind === 'void-marker' ? 'text-gray-400 line-through' : ''"
+            class="border-b border-gray-100"
+          >
+            <td class="py-1 px-2 whitespace-nowrap">{{ row.date }}</td>
+            <td class="py-1 px-2">
+              <span v-if="row.memo">{{ row.memo }}</span>
+            </td>
+            <td v-if="showTaxRegistrationColumn" class="py-1 px-2 font-mono text-xs">
+              <span v-if="row.taxRegistrationId">{{ row.taxRegistrationId }}</span>
+            </td>
+            <td class="py-1 px-2 text-right">
+              <span v-if="row.debit">{{ formatAmount(row.debit) }}</span>
+            </td>
+            <td class="py-1 px-2 text-right">
+              <span v-if="row.credit">{{ formatAmount(row.credit) }}</span>
+            </td>
+            <td class="py-1 px-2 text-right font-mono">{{ formatAmount(row.runningBalance) }}</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr class="font-semibold border-t border-gray-300">
+            <td :colspan="showTaxRegistrationColumn ? 5 : 4" class="py-1 px-2 text-right">
+              {{ t("pluginAccounting.ledger.closingBalance") }}
+            </td>
+            <td class="py-1 px-2 text-right">{{ formatAmount(ledger.closingBalance) }}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { getLedger, type Account, type Ledger, type ReportPeriod } from "../api";
+import { formatAmount as formatAmountWithCurrency } from "../currencies";
+import { currentFiscalYearRange, resolveFiscalYearEnd, type DateRange, type FiscalYearEnd } from "../fiscalYear";
+import { isTaxAccountCode } from "./accountNumbering";
+import { useLatestRequest } from "./useLatestRequest";
+import DateRangePicker from "./DateRangePicker.vue";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  bookId: string;
+  accounts: Account[];
+  currency: string;
+  version: number;
+  fiscalYearEnd?: FiscalYearEnd;
+  /** Opening-balance date for the active book — drives the "Lifetime"
+   *  shortcut in the date picker (from = openingDate, to = today).
+   *  When absent, the picker hides Lifetime; "All" still works. */
+  openingDate?: string;
+  /** Optional account to preselect (Accounts tab → click). Updates
+   *  via the watcher below — assigning to the local `accountCode`
+   *  ref keeps the dropdown's v-model authoritative for user edits. */
+  preselectAccountCode?: string;
+}>();
+
+const DASH = "—";
+const accountCode = ref("");
+const ledger = ref<Ledger | null>(null);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const { begin: beginRequest, isCurrent } = useLatestRequest();
+
+const resolvedFiscalYearEnd = computed<FiscalYearEnd>(() => resolveFiscalYearEnd(props.fiscalYearEnd));
+
+// Default range = current fiscal year. Re-evaluated when bookId or
+// fiscalYearEnd changes (see watcher) so switching books resets to a
+// sensible window rather than carrying the prior book's custom edits.
+const range = ref<DateRange>(currentFiscalYearRange(resolvedFiscalYearEnd.value));
+
+function formatAmount(value: number): string {
+  return formatAmountWithCurrency(value, props.currency);
+}
+
+function formatAccountLabel(account: Account): string {
+  // Name first so type-to-search in the <select> matches the
+  // human-meaningful word; the code goes in trailing parens.
+  return `${account.name} (${account.code})`;
+}
+
+// Hide deactivated accounts from the ledger picker; historical
+// entries on a soft-deleted account are still inspectable via
+// the journal-list filter (which intentionally shows every code
+// so the past stays queryable).
+const selectableAccounts = computed<Account[]>(() => props.accounts.filter((account) => account.active !== false));
+
+// Surface the T-number column when the active account is in the
+// input-tax band (14xx — e.g. 1400 Input Tax Receivable).
+// Convention-driven so any custom account a user adds in the band
+// participates without an opt-in flag. 24xx (Sales Tax Payable
+// and friends) intentionally doesn't get the column — the
+// counterparty registration ID matters for input-tax-credit
+// eligibility on purchases, not for the seller-side liability.
+const showTaxRegistrationColumn = computed<boolean>(() => {
+  if (!ledger.value) return false;
+  return isTaxAccountCode(ledger.value.accountCode);
+});
+
+// Build a ReportPeriod from the current range. Both ends empty = no
+// filter (full history); either end alone gets a sentinel on the
+// other side so the server-side range filter still applies.
+function periodFromRange(value: DateRange): ReportPeriod | undefined {
+  if (value.from === "" && value.to === "") return undefined;
+  return { kind: "range", from: value.from || "0000-01-01", to: value.to || "9999-12-31" };
+}
+
+async function refresh(): Promise<void> {
+  const token = beginRequest();
+  if (!accountCode.value) {
+    ledger.value = null;
+    error.value = null;
+    loading.value = false;
+    return;
+  }
+  loading.value = true;
+  error.value = null;
+  try {
+    const result = await getLedger(accountCode.value, periodFromRange(range.value), props.bookId);
+    // Drop the result if a newer refresh started (bookId or
+    // accountCode changed under us) — otherwise a slower earlier
+    // request could overwrite the fresh ledger.
+    if (!isCurrent(token)) return;
+    if (!result.ok) {
+      error.value = result.error;
+      ledger.value = null;
+      return;
+    }
+    ledger.value = result.data.ledger;
+  } finally {
+    if (isCurrent(token)) loading.value = false;
+  }
+}
+
+// Reset to current-year window AND drop the selected account
+// whenever the active book or its fiscal-year end changes. Without
+// the accountCode reset, switching from book A (cash=1000) to book
+// B (which may not even define 1000) fires a getLedger for a
+// missing code and surfaces an avoidable 404. The range reset
+// follows the same logic — a custom window from book A is
+// meaningless against book B's entries.
+watch(
+  () => [props.bookId, resolvedFiscalYearEnd.value],
+  () => {
+    accountCode.value = "";
+    range.value = currentFiscalYearRange(resolvedFiscalYearEnd.value);
+  },
+);
+
+// Apply parent-supplied preselection (Accounts tab → click). The
+// watcher fires on both initial mount (with `immediate`) and on
+// every prop change so re-clicking the same account from the
+// Accounts tab while already on the Ledger still routes through.
+// Resets the range to the current fiscal year on each preselect so
+// a stale custom window the user left behind on the Ledger doesn't
+// hide the entries the Accounts tab handed off.
+watch(
+  () => props.preselectAccountCode,
+  (next) => {
+    if (!next) return;
+    accountCode.value = next;
+    range.value = currentFiscalYearRange(resolvedFiscalYearEnd.value);
+  },
+  { immediate: true },
+);
+
+watch(() => [props.bookId, props.version, accountCode.value, range.value.from, range.value.to], refresh, { immediate: true });
+</script>

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

@@ -0,0 +1,211 @@
+<template>
+  <!-- Form for creating a new book. Two layouts share one body:
+         • modal (default) — used by BookSwitcher's "+ New book…"
+           sentinel option. Backdrop click cancels.
+         • fullPage — used by View.vue on the first-run flow when
+           the workspace has zero books. No backdrop, no cancel:
+           the user MUST create their first book to proceed.
+       The submit calls createBook directly; on success it emits
+       the new book and its id, leaving the parent to update its
+       current selection / refetch. -->
+  <div :class="wrapperClass" data-testid="accounting-new-book-modal" @click.self="onBackdropClick">
+    <form class="bg-white p-4 rounded shadow-lg w-96 flex flex-col gap-3" data-testid="accounting-new-book-form" @submit.prevent="onSubmit">
+      <h3 class="text-base font-semibold">{{ t("pluginAccounting.bookSwitcher.newBook") }}</h3>
+      <p v-if="firstRun" class="text-xs text-gray-500" data-testid="accounting-new-book-firstrun">{{ t("pluginAccounting.bookSwitcher.firstRunHint") }}</p>
+      <label class="text-sm flex flex-col gap-1">
+        {{ t("pluginAccounting.bookSwitcher.nameLabel") }}
+        <input ref="nameInput" v-model="name" required class="h-8 px-2 rounded border border-gray-300 text-sm" data-testid="accounting-new-book-name" />
+      </label>
+      <label class="text-sm flex flex-col gap-1">
+        {{ t("pluginAccounting.bookSwitcher.currencyLabel") }}
+        <select v-model="currency" class="h-8 px-2 rounded border border-gray-300 text-sm bg-white" data-testid="accounting-new-book-currency">
+          <option v-for="opt in options" :key="opt.code" :value="opt.code">{{ opt.label }}</option>
+        </select>
+      </label>
+      <label class="text-sm flex flex-col gap-1">
+        {{ t("pluginAccounting.bookSwitcher.countryLabel") }}
+        <select v-model="country" class="h-8 px-2 rounded border border-gray-300 text-sm bg-white" data-testid="accounting-new-book-country">
+          <option value="">{{ t("pluginAccounting.bookSwitcher.countryPlaceholder") }}</option>
+          <option v-for="opt in countryOptions" :key="opt.code" :value="opt.code">{{ opt.label }}</option>
+        </select>
+      </label>
+      <p class="text-xs text-gray-500">{{ t("pluginAccounting.bookSwitcher.countryHint") }}</p>
+      <label class="text-sm flex flex-col gap-1">
+        {{ t("pluginAccounting.bookSwitcher.fiscalYearEndLabel") }}
+        <select
+          v-model="fiscalYearEnd"
+          required
+          class="h-8 px-2 rounded border border-gray-300 text-sm bg-white"
+          data-testid="accounting-new-book-fiscal-year-end"
+        >
+          <option v-for="opt in fiscalYearEndOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+        </select>
+      </label>
+      <p class="text-xs text-gray-500">{{ t("pluginAccounting.bookSwitcher.fiscalYearEndHint") }}</p>
+      <p v-if="error" class="text-xs text-red-500" data-testid="accounting-new-book-error">{{ error }}</p>
+      <div class="flex justify-end gap-2 mt-1">
+        <button v-if="showCancel" type="button" class="h-8 px-2.5 rounded border border-gray-300 text-sm text-gray-700 hover:bg-gray-50" @click="onCancel">
+          {{ t("pluginAccounting.common.cancel") }}
+        </button>
+        <button
+          type="submit"
+          class="h-8 px-2.5 rounded bg-blue-600 hover:bg-blue-700 text-white text-sm"
+          :disabled="creating"
+          data-testid="accounting-new-book-submit"
+        >
+          {{ creating ? t("pluginAccounting.common.loading") : t("pluginAccounting.bookSwitcher.create") }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { createBook, type BookSummary } from "../api";
+import { SUPPORTED_CURRENCY_CODES, localizedCurrencyName } from "../currencies";
+import { SUPPORTED_COUNTRY_CODES, localizedCountryName, type SupportedCountryCode } from "../countries";
+import { DEFAULT_FISCAL_YEAR_END, FISCAL_YEAR_ENDS, type FiscalYearEnd } from "../fiscalYear";
+
+const { t, locale } = useI18n();
+
+function regionFromLocaleTag(tag: string): SupportedCountryCode | "" {
+  try {
+    const { region } = new Intl.Locale(tag).maximize();
+    if (region && (SUPPORTED_COUNTRY_CODES as readonly string[]).includes(region)) {
+      return region as SupportedCountryCode;
+    }
+  } catch {
+    /* fall through */
+  }
+  return "";
+}
+
+function guessDefaultCountry(uiLocaleTag: string): SupportedCountryCode | "" {
+  // Try the active vue-i18n locale first (the user's *app* language
+  // setting, e.g. "ja-JP"), then fall back to the browser's
+  // navigator.language. Either may produce a region segment that maps
+  // to a curated `SupportedCountryCode`. If neither does, leave the
+  // field unset rather than silently picking a default — the
+  // dropdown's "(choose a country)" option lets the user finish the
+  // selection themselves so an unsupported locale doesn't quietly
+  // become a US-jurisdiction book.
+  const fromUi = regionFromLocaleTag(uiLocaleTag);
+  if (fromUi !== "") return fromUi;
+  const browserTag = typeof navigator !== "undefined" && typeof navigator.language === "string" ? navigator.language : "";
+  return regionFromLocaleTag(browserTag);
+}
+
+const props = withDefaults(
+  defineProps<{
+    firstRun?: boolean;
+    cancelable?: boolean;
+    fullPage?: boolean;
+  }>(),
+  { firstRun: false, cancelable: true, fullPage: false },
+);
+
+const emit = defineEmits<{
+  cancel: [];
+  created: [book: BookSummary];
+}>();
+
+const name = ref("");
+const currency = ref<string>("USD");
+const country = ref<SupportedCountryCode | "">(guessDefaultCountry(locale.value));
+const fiscalYearEnd = ref<FiscalYearEnd>(DEFAULT_FISCAL_YEAR_END);
+const creating = ref(false);
+const error = ref<string | null>(null);
+const nameInput = ref<HTMLInputElement | null>(null);
+
+onMounted(() => {
+  // Land focus in Name on open — the only required field; the
+  // currency select defaults to USD and the user usually leaves
+  // it. Without this the user has to click into the field before
+  // typing, which is friction for what should be a one-tap flow.
+  void nextTick(() => nameInput.value?.focus());
+});
+
+interface CurrencyOption {
+  code: string;
+  label: string;
+}
+
+const options = computed<CurrencyOption[]>(() =>
+  SUPPORTED_CURRENCY_CODES.map((code) => ({
+    code,
+    label: `${code} — ${localizedCurrencyName(code, locale.value)}`,
+  })),
+);
+
+interface CountryOption {
+  code: string;
+  label: string;
+}
+
+const countryOptions = computed<CountryOption[]>(() =>
+  SUPPORTED_COUNTRY_CODES.map((code) => ({
+    code,
+    label: `${code} — ${localizedCountryName(code, locale.value)}`,
+  })),
+);
+
+interface FiscalYearEndOption {
+  value: FiscalYearEnd;
+  label: string;
+}
+
+const fiscalYearEndOptions = computed<FiscalYearEndOption[]>(() =>
+  FISCAL_YEAR_ENDS.map((value) => ({
+    value,
+    label: t(`pluginAccounting.bookSwitcher.fiscalYearEnd${value}`),
+  })),
+);
+
+// Full-page mode replaces the AccountingApp chrome — fill the
+// parent flex column with the form centered, no backdrop. Modal
+// mode keeps the original viewport overlay behaviour.
+const wrapperClass = computed(() =>
+  props.fullPage ? "flex-1 bg-white flex items-center justify-center p-6 overflow-auto" : "fixed inset-0 z-50 bg-black/20 flex items-center justify-center",
+);
+
+// Cancel is hidden in full-page mode regardless of `cancelable`
+// — the first-run flow forces the user to create a book.
+const showCancel = computed(() => props.cancelable && !props.fullPage);
+
+function onBackdropClick(): void {
+  if (props.fullPage) return;
+  onCancel();
+}
+
+function onCancel(): void {
+  if (!props.cancelable) return;
+  emit("cancel");
+}
+
+async function onSubmit(): Promise<void> {
+  if (creating.value) return;
+  creating.value = true;
+  error.value = null;
+  try {
+    // Only forward `country` when the user actually picked one — the
+    // empty string is the dropdown's "(choose a country)" sentinel
+    // and must not land on disk as a literal "" value.
+    const pickedCountry: SupportedCountryCode | undefined = country.value === "" ? undefined : country.value;
+    const result = await createBook({
+      name: name.value.trim(),
+      currency: currency.value,
+      country: pickedCountry,
+      fiscalYearEnd: fiscalYearEnd.value,
+    });
+    if (!result.ok) {
+      error.value = result.error;
+      return;
+    }
+    emit("created", result.data.book);
+  } finally {
+    creating.value = false;
+  }
+}
+</script>