mgv-backoffice 1.45.0 → 1.47.0

package/dist/utils/format.d.ts

@@ -53,6 +53,21 @@ export declare function fmtUsd(v: number): string;
  * strings so BigDecimal-as-string payloads pass through.
  */
 export declare function fmtMoney(n: number | string | null | undefined, digits?: number, currency?: string): string;
+/**
+ * Display symbol for an ISO / ticker currency code: "€" for EUR, "£" for
+ * GBP, "$" for USD and the USD stablecoins — and for a missing code, so
+ * rows with no currency keep reading as dollars. Any other code (BTC,
+ * ETH, …) has no symbol and returns null; callers suffix the code instead.
+ */
+export declare function currencySymbol(code: string | null | undefined): string | null;
+/**
+ * Format an amount in its own currency: fiat with a symbol goes through
+ * fmtMoney ("€20.00", "-$1.50"), a USD stablecoin keeps its ticker after
+ * the dollar figure ("$25.00 USDT") so it isn't mistaken for cash, and any
+ * other asset prints as a plain quantity with its code ("0.5 BTC", up to 8
+ * decimals). Em-dash for missing / non-finite amounts, like fmtMoney.
+ */
+export declare function fmtCurrencyAmount(n: number | string | null | undefined, code: string | null | undefined, digits?: number): string;
 /**
  * Format an ISO date string / epoch as a "Mon D, YYYY" calendar label
  * (en-US, e.g. "Jan 5, 2026"). Falls back to the raw value on parse

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.45.0",
+  "version": "1.47.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",

package/src/components/BaseGroupedChecklist.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseGroupedChecklist from './BaseGroupedChecklist.vue'
+
+const GROUPS = [
+  { key: 'STOCK', label: 'Stocks', items: ['AMD', 'NVDA'] },
+  { key: 'ETF', label: 'ETFs', items: [] },
+  { key: 'CRYPTO', label: 'Crypto', items: ['BTC/USD'] },
+]
+
+function mountList(modelValue: string[] = []) {
+  return mount(BaseGroupedChecklist, {
+    props: {
+      groups: GROUPS,
+      modelValue,
+      allAriaLabel: 'Select all symbols',
+      itemAriaLabel: (s: string) => `Pick ${s}`,
+      'onUpdate:modelValue': () => {},
+    },
+  })
+}
+
+const box = (w: ReturnType<typeof mountList>, label: string) =>
+  w.find<HTMLInputElement>(`input[aria-label="${label}"]`)
+
+const lastEmit = (w: ReturnType<typeof mountList>) =>
+  (w.emitted('update:modelValue') as string[][][]).at(-1)![0]
+
+describe('BaseGroupedChecklist', () => {
+  it('renders non-empty groups with counts and reflects the model', () => {
+    const w = mountList(['AMD'])
+    expect(w.text()).toContain('Select all (3)')
+    expect(w.text()).toContain('Stocks (2)')
+    expect(w.text()).not.toContain('ETFs')
+    expect(box(w, 'Pick AMD').element.checked).toBe(true)
+    expect(box(w, 'Pick NVDA').element.checked).toBe(false)
+    expect(box(w, 'Select all Stocks').element.checked).toBe(false)
+    expect(box(w, 'Select all symbols').element.checked).toBe(false)
+  })
+
+  it('toggles one item', async () => {
+    const w = mountList(['AMD'])
+    await box(w, 'Pick BTC/USD').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'BTC/USD'])
+    await box(w, 'Pick AMD').trigger('change')
+    expect(lastEmit(w)).toEqual([])
+  })
+
+  it('selects and clears a whole group, leaving others alone', async () => {
+    const w = mountList(['BTC/USD'])
+    await box(w, 'Select all Stocks').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'NVDA', 'BTC/USD'])
+    await w.setProps({ modelValue: ['AMD', 'NVDA', 'BTC/USD'] })
+    await box(w, 'Select all Stocks').trigger('change')
+    expect(lastEmit(w)).toEqual(['BTC/USD'])
+  })
+
+  it('master checkbox selects everything, then clears everything', async () => {
+    const w = mountList([])
+    await box(w, 'Select all symbols').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'NVDA', 'BTC/USD'])
+    await w.setProps({ modelValue: ['AMD', 'NVDA', 'BTC/USD'] })
+    expect(box(w, 'Select all symbols').element.checked).toBe(true)
+    await box(w, 'Select all symbols').trigger('change')
+    expect(lastEmit(w)).toEqual([])
+  })
+
+  it('emits in group order regardless of click order', async () => {
+    const w = mountList(['BTC/USD'])
+    await box(w, 'Pick AMD').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'BTC/USD'])
+  })
+})

package/src/components/BaseGroupedChecklist.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <label class="flex items-center gap-2 border-b border-slate-200 dark:border-slate-700 pb-2">
+      <input
+        type="checkbox"
+        class="h-4 w-4"
+        :checked="allSelected"
+        :aria-label="allAriaLabel"
+        @change="toggleAll"
+      />
+      <span class="text-sm font-medium text-slate-700 dark:text-slate-200">
+        {{ allLabel }} ({{ allItems.length }})
+      </span>
+    </label>
+    <div class="overflow-y-auto space-y-3 mt-3" :class="maxHeightClass">
+      <div v-for="g in visibleGroups" :key="g.key">
+        <label class="flex items-center gap-2 pb-1.5">
+          <input
+            type="checkbox"
+            class="h-4 w-4"
+            :checked="groupSelected(g)"
+            :aria-label="`${allLabel} ${g.label}`"
+            @change="toggleGroup(g)"
+          />
+          <span class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+            {{ g.label }} ({{ g.items.length }})
+          </span>
+        </label>
+        <div class="grid grid-cols-[repeat(2,minmax(0,1fr))] sm:grid-cols-[repeat(3,minmax(0,1fr))] gap-x-3 gap-y-1.5">
+          <label v-for="item in g.items" :key="item" class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              class="h-4 w-4"
+              :checked="selected.has(item)"
+              :aria-label="itemAriaLabel ? itemAriaLabel(item) : item"
+              @change="toggleItem(item)"
+            />
+            <span
+              class="text-sm text-slate-700 dark:text-slate-200"
+              :class="{ 'font-mono': mono }"
+            >{{ item }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Multi-select checklist in groups: a master "Select all (N)" checkbox, a
+ * per-group select-all, and one checkbox per item. `v-model` is the array of
+ * selected item ids (order follows the groups). Items are plain strings and
+ * must be unique across groups; empty groups are not rendered.
+ *
+ * Typical use: "pick which symbols / users / records an action applies to"
+ * inside a confirmation modal.
+ */
+import { computed } from 'vue'
+import type { ChecklistGroup } from '../types/checklist'
+
+interface Props {
+  groups: ChecklistGroup[]
+  modelValue: string[]
+  /** Text of the master checkbox; group checkboxes read "<allLabel> <group>". */
+  allLabel?: string
+  allAriaLabel?: string
+  /** Accessible name per item checkbox (defaults to the item itself). */
+  itemAriaLabel?: (item: string) => string
+  /** Render item labels in a monospace font (tickers, ids). */
+  mono?: boolean
+  maxHeightClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allLabel: 'Select all',
+  allAriaLabel: 'Select all items',
+  itemAriaLabel: undefined,
+  mono: false,
+  maxHeightClass: 'max-h-72',
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string[]): void }>()
+
+const visibleGroups = computed(() => props.groups.filter((g) => g.items.length > 0))
+const allItems = computed(() => visibleGroups.value.flatMap((g) => g.items))
+const selected = computed(() => new Set(props.modelValue))
+
+const allSelected = computed(
+  () => allItems.value.length > 0 && allItems.value.every((i) => selected.value.has(i)),
+)
+
+function groupSelected(g: ChecklistGroup): boolean {
+  return g.items.every((i) => selected.value.has(i))
+}
+
+// Emit in group order so the model is stable regardless of click order.
+function commit(next: Set<string>) {
+  emit('update:modelValue', allItems.value.filter((i) => next.has(i)))
+}
+
+function toggleAll() {
+  commit(allSelected.value ? new Set() : new Set(allItems.value))
+}
+
+function toggleGroup(g: ChecklistGroup) {
+  const next = new Set(selected.value)
+  const on = !groupSelected(g)
+  for (const i of g.items) {
+    if (on) next.add(i)
+    else next.delete(i)
+  }
+  commit(next)
+}
+
+function toggleItem(item: string) {
+  const next = new Set(selected.value)
+  if (next.has(item)) next.delete(item)
+  else next.add(item)
+  commit(next)
+}
+</script>

package/src/components/BaseIdChip.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseIdChip from './BaseIdChip.vue'
+
+describe('BaseIdChip', () => {
+  it('shows the label and the full id in the tooltip', () => {
+    const w = mount(BaseIdChip, { props: { label: 'ord', value: 'abc-123-def' } })
+    expect(w.text()).toContain('ord')
+    expect(w.get('code').text()).toBe('abc-123-def')
+    expect(w.get('code').attributes('title')).toBe('abc-123-def')
+  })
+
+  it('labels the copy button from label + value, or copyLabel when given', () => {
+    const plain = mount(BaseIdChip, { props: { label: 'id', value: 'x1' } })
+    expect(plain.get('button[aria-label="Copy id x1"]').exists()).toBe(true)
+    const custom = mount(BaseIdChip, { props: { label: 'id', value: 'x1', copyLabel: 'tx id' } })
+    expect(custom.get('button[aria-label="Copy tx id"]').exists()).toBe(true)
+  })
+
+  it('renders the action button only with actionLabel, emitting the value', async () => {
+    expect(mount(BaseIdChip, { props: { value: 'x1' } }).findAll('button')).toHaveLength(1)
+    const w = mount(BaseIdChip, { props: { value: 'x1', actionLabel: 'Search this id' } })
+    await w.get('button[aria-label="Search this id"]').trigger('click')
+    expect(w.emitted('action')).toEqual([['x1']])
+  })
+})

package/src/components/BaseIdChip.vue

@@ -0,0 +1,51 @@
+<template>
+  <!--
+    Compact id cell: a small uppercase label, the id truncated in a <code>
+    pill (full value in the tooltip), a copy button, and — when
+    `actionLabel` is set — a magnifier button that emits `action` (e.g.
+    "search the log for this id"). Built for dense rows that carry several
+    ids side by side (transaction / buy-order / sell-order).
+  -->
+  <div class="inline-flex items-center gap-1 font-mono text-[11px]">
+    <span v-if="label" class="text-slate-500 dark:text-slate-400 uppercase tracking-wide">{{ label }}</span>
+    <code
+      class="truncate rounded bg-slate-100 px-1 text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+      :class="maxWidthClass"
+      :title="value"
+    >{{ value }}</code>
+    <BaseCopyButton :text="value" :label="copyLabel ?? `${label} ${value}`.trim()" icon-class="w-3.5 h-3.5" />
+    <button
+      v-if="actionLabel"
+      type="button"
+      :title="actionLabel"
+      :aria-label="actionLabel"
+      class="rounded px-0.5 text-slate-400 hover:bg-slate-100 hover:text-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:bg-slate-800 dark:hover:text-emerald-400"
+      @click="emit('action', value)"
+    >
+      <MagnifyingGlassIcon class="h-3.5 w-3.5" aria-hidden="true" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+import BaseCopyButton from './BaseCopyButton.vue'
+
+withDefaults(
+  defineProps<{
+    /** The id itself — shown truncated, copied in full. */
+    value: string
+    /** Short uppercase prefix ("id", "ord", "sell"). Omit for no prefix. */
+    label?: string
+    /** Copy button's tooltip / aria noun; defaults to "<label> <value>". */
+    copyLabel?: string
+    /** Tooltip / aria-label of the action button; the button only renders when set. */
+    actionLabel?: string
+    /** Width cap of the truncated id. */
+    maxWidthClass?: string
+  }>(),
+  { label: '', copyLabel: undefined, actionLabel: undefined, maxWidthClass: 'max-w-[90px]' },
+)
+
+const emit = defineEmits<{ action: [value: string] }>()
+</script>

package/src/composables/useDirtyState.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { reactive } from 'vue'
+import { stableStringify, useDirtyState } from './useDirtyState'
+
+describe('stableStringify', () => {
+  it('ignores key order at every depth but keeps array order', () => {
+    expect(stableStringify({ b: 1, a: { d: 2, c: 3 } })).toBe(stableStringify({ a: { c: 3, d: 2 }, b: 1 }))
+    expect(stableStringify([1, 2])).not.toBe(stableStringify([2, 1]))
+  })
+})
+
+describe('useDirtyState', () => {
+  it('starts clean, turns dirty on an edit and clean again when reverted', () => {
+    const form = reactive({ name: 'a', params: { x: 1 } as Record<string, number> })
+    const { dirty } = useDirtyState(() => form)
+    expect(dirty.value).toBe(false)
+    form.params.x = 2
+    expect(dirty.value).toBe(true)
+    form.params.x = 1
+    expect(dirty.value).toBe(false)
+  })
+
+  it('markClean() adopts the current state as the baseline', () => {
+    const form = reactive({ name: 'a' })
+    const { dirty, markClean } = useDirtyState(() => form)
+    form.name = 'b'
+    expect(dirty.value).toBe(true)
+    markClean()
+    expect(dirty.value).toBe(false)
+  })
+
+  it('a reordered but equal object is not an edit', () => {
+    const form = reactive<{ params: Record<string, number> }>({ params: { a: 1, b: 2 } })
+    const { dirty } = useDirtyState(() => form)
+    form.params = { b: 2, a: 1 }
+    expect(dirty.value).toBe(false)
+  })
+})

package/src/composables/useDirtyState.ts

@@ -0,0 +1,44 @@
+import { computed, ref, type ComputedRef } from 'vue'
+
+/**
+ * JSON-serialise a value with object keys sorted at every depth, so two
+ * structurally equal values always produce the same string regardless of
+ * key insertion order (arrays keep their order).
+ */
+export function stableStringify(value: unknown): string {
+  return JSON.stringify(value, (_key, v: unknown) => {
+    if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
+      const sorted: Record<string, unknown> = {}
+      for (const k of Object.keys(v as Record<string, unknown>).sort()) {
+        sorted[k] = (v as Record<string, unknown>)[k]
+      }
+      return sorted
+    }
+    return v
+  })
+}
+
+/**
+ * Unsaved-changes tracking for an edit form. `snapshot` returns the form's
+ * current state (read reactively); `dirty` is true whenever it differs from
+ * the last clean baseline. Call `markClean()` after loading or saving to make
+ * the current state the new baseline. Comparison is structural (key order is
+ * ignored), so a server echo that reorders keys never reads as an edit.
+ *
+ * ```ts
+ * const form = reactive({ name: '', params: {} })
+ * const { dirty, markClean } = useDirtyState(() => form)
+ * // …load → assign form → markClean(); Save enabled while dirty.value
+ * ```
+ */
+export function useDirtyState(snapshot: () => unknown): {
+  dirty: ComputedRef<boolean>
+  markClean: () => void
+} {
+  const baseline = ref(stableStringify(snapshot()))
+  const dirty = computed(() => stableStringify(snapshot()) !== baseline.value)
+  function markClean() {
+    baseline.value = stableStringify(snapshot())
+  }
+  return { dirty, markClean }
+}

package/src/index.ts

@@ -51,6 +51,8 @@ export { default as BaseFilterChip } from './components/BaseFilterChip.vue'
 export { default as BaseCredentialsForm } from './components/BaseCredentialsForm.vue'
 export { default as BasePillPickerModal } from './components/BasePillPickerModal.vue'
 export { default as BaseBarDistribution } from './components/BaseBarDistribution.vue'
+export { default as BaseGroupedChecklist } from './components/BaseGroupedChecklist.vue'
+export { default as BaseIdChip } from './components/BaseIdChip.vue'
 export type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
 // Components — third-party wrappers
@@ -86,6 +88,7 @@ export type { FieldClasses } from './composables/useFieldClasses'
 export { usePolling } from './composables/usePolling'
 export type { UsePollingOptions } from './composables/usePolling'
 export { useLatestRequest, isAbortError } from './composables/useLatestRequest'
+export { useDirtyState, stableStringify } from './composables/useDirtyState'
 export type { LatestRequestToken } from './composables/useLatestRequest'
 
 // Enums
@@ -113,6 +116,7 @@ export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField
 export type { StatBreakdownItem } from './types/statBreakdown'
 export type { PillPickerItem } from './types/pillPicker'
 export type { DistributionBar } from './types/distribution'
+export type { ChecklistGroup } from './types/checklist'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'
@@ -141,6 +145,8 @@ export {
   fmtPct,
   fmtUsd,
   fmtMoney,
+  currencySymbol,
+  fmtCurrencyAmount,
   fmtDuration,
   formatJson,
   stringifyValue,

package/src/types/checklist.ts

@@ -0,0 +1,6 @@
+/** One group of a BaseGroupedChecklist: a heading plus its selectable item ids. */
+export interface ChecklistGroup {
+  key: string
+  label: string
+  items: string[]
+}