mgv-backoffice 1.37.0 → 1.40.0

package/src/components/BaseStatCard.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import BaseStatCard from './BaseStatCard.vue'
+
+const global = { stubs: { RouterLink: RouterLinkStub } }
+
+describe('BaseStatCard', () => {
+  it('renders title, value and subtitle with the dashed accent border', () => {
+    const wrapper = mount(BaseStatCard, {
+      props: { title: 'Categories', value: 71, subtitle: 'in total', accent: 'sky' },
+      global,
+    })
+    expect(wrapper.text()).toContain('Categories')
+    expect(wrapper.text()).toContain('71')
+    expect(wrapper.text()).toContain('in total')
+    expect(wrapper.classes()).toEqual(expect.arrayContaining(['border-dashed', 'border-sky-300']))
+  })
+
+  it('is a plain div without `to` and a router link with it', () => {
+    expect(mount(BaseStatCard, { props: { title: 'A' }, global }).element.tagName).toBe('DIV')
+    const link = mount(BaseStatCard, { props: { title: 'A', to: '/category' }, global })
+    expect(link.findComponent(RouterLinkStub).props('to')).toBe('/category')
+  })
+
+  it('renders the icon chip only when the icon slot is filled', () => {
+    const plain = mount(BaseStatCard, { props: { title: 'A' }, global })
+    expect(plain.find('.rounded-xl .rounded-xl').exists()).toBe(false)
+    const withIcon = mount(BaseStatCard, {
+      props: { title: 'A', accent: 'red' },
+      slots: { icon: '<template #icon="{ iconClass }"><i :class="iconClass" /></template>' },
+      global,
+    })
+    expect(withIcon.find('i').classes()).toEqual(expect.arrayContaining(['h-6', 'w-6', 'text-red-500']))
+  })
+
+  it('omits the subtitle line when empty', () => {
+    const wrapper = mount(BaseStatCard, { props: { title: 'A', value: 1 }, global })
+    expect(wrapper.findAll('p')).toHaveLength(2)
+  })
+})

package/src/components/BaseStatCard.vue

@@ -0,0 +1,103 @@
+<template>
+  <component
+    :is="to ? RouterLink : 'div'"
+    v-bind="to ? { to } : {}"
+    class="relative block rounded-xl border-2 border-dashed bg-white p-5 transition-colors dark:bg-slate-800"
+    :class="[cls.border, to ? 'hover:bg-slate-50 dark:hover:bg-slate-700/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500' : '']"
+  >
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0 text-left">
+        <p class="truncate text-sm font-bold tracking-wide text-gray-800 dark:text-slate-200">
+          {{ title }}
+        </p>
+        <p class="mt-1 truncate text-3xl font-bold" :class="cls.value">
+          {{ value }}
+        </p>
+        <p v-if="subtitle" class="mt-1 text-sm font-medium" :class="cls.subtitle">
+          {{ subtitle }}
+        </p>
+        <slot />
+      </div>
+      <div
+        v-if="$slots.icon"
+        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl"
+        :class="cls.iconBox"
+      >
+        <slot name="icon" :icon-class="`h-6 w-6 ${cls.icon}`" />
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+/**
+ * Dashboard stat tile in the EarningsCard style (dashed accent border,
+ * bold title, big value, accent subtitle, tinted icon chip) but for any
+ * value — counts, labels, pre-formatted numbers. Pass `to` to make the whole
+ * card a router link. The `icon` slot fills the chip (receives `iconClass`);
+ * the `default` slot adds extra content under the subtitle.
+ *
+ */
+import { computed } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+
+type Accent = 'emerald' | 'sky' | 'amber' | 'red' | 'slate'
+
+interface Props {
+  title: string
+  value?: string | number
+  subtitle?: string
+  /** Border / value / subtitle / icon tint. */
+  accent?: Accent
+  /** Makes the card a router link. */
+  to?: RouteLocationRaw
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  subtitle: '',
+  accent: 'emerald',
+  to: undefined,
+})
+
+// Full literal class strings per accent so Tailwind can see every class.
+const ACCENTS: Record<Accent, { border: string; value: string; subtitle: string; iconBox: string; icon: string }> = {
+  emerald: {
+    border: 'border-emerald-300 dark:border-emerald-700',
+    value: 'text-emerald-500 dark:text-emerald-400',
+    subtitle: 'text-emerald-500 dark:text-emerald-400',
+    iconBox: 'bg-emerald-50 dark:bg-emerald-900/30',
+    icon: 'text-emerald-500',
+  },
+  sky: {
+    border: 'border-sky-300 dark:border-sky-700',
+    value: 'text-sky-500 dark:text-sky-400',
+    subtitle: 'text-sky-500 dark:text-sky-400',
+    iconBox: 'bg-sky-50 dark:bg-sky-900/30',
+    icon: 'text-sky-500',
+  },
+  amber: {
+    border: 'border-amber-300 dark:border-amber-700',
+    value: 'text-amber-500 dark:text-amber-400',
+    subtitle: 'text-amber-500 dark:text-amber-400',
+    iconBox: 'bg-amber-50 dark:bg-amber-900/30',
+    icon: 'text-amber-500',
+  },
+  red: {
+    border: 'border-red-300 dark:border-red-700',
+    value: 'text-red-500 dark:text-red-400',
+    subtitle: 'text-red-500 dark:text-red-400',
+    iconBox: 'bg-red-50 dark:bg-red-900/30',
+    icon: 'text-red-500',
+  },
+  slate: {
+    border: 'border-slate-300 dark:border-slate-600',
+    value: 'text-slate-700 dark:text-slate-200',
+    subtitle: 'text-slate-500 dark:text-slate-400',
+    iconBox: 'bg-slate-100 dark:bg-slate-700/50',
+    icon: 'text-slate-500 dark:text-slate-300',
+  },
+}
+
+const cls = computed(() => ACCENTS[props.accent])
+</script>

package/src/components/BaseTable.test.ts

@@ -1,55 +1,69 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseTable from './BaseTable.vue'
-import type { TableColumn } from '../types/table'
-
-const columns: TableColumn[] = [
-  { label: 'Symbol' },
-  { label: 'Qty', align: 'right' },
-  { label: 'Bought' },
-]
-
-describe('BaseTable', () => {
-  it('renders header cells with right-alignment where requested', () => {
-    const wrapper = mount(BaseTable, { props: { columns } })
-    const ths = wrapper.findAll('th')
-    expect(ths.map((th) => th.text())).toEqual(['Symbol', 'Qty', 'Bought'])
-    expect(ths[1].classes()).toContain('text-right')
-    expect(ths[0].classes()).not.toContain('text-right')
-    expect(ths[0].classes()).toEqual(expect.arrayContaining(['px-4', 'py-3']))
-  })
-
-  it('renders caller rows through the default slot', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns },
-      slots: { default: '<tr><td>AMD</td><td>3</td><td>today</td></tr>' },
-    })
-    expect(wrapper.find('tbody td').text()).toBe('AMD')
-    expect(wrapper.find('table').classes()).toEqual(expect.arrayContaining(['w-full', 'text-sm']))
-  })
-
-  it('renders the empty-state row spanning every column when empty', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: true, emptyText: 'Nothing here.' },
-    })
-    const td = wrapper.find('tbody td')
-    expect(td.attributes('colspan')).toBe('3')
-    expect(td.text()).toBe('Nothing here.')
-  })
-
-  it('prefers the empty slot over emptyText', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: true, emptyText: 'fallback' },
-      slots: { empty: 'No trades match your filters.' },
-    })
-    expect(wrapper.find('tbody td').text()).toBe('No trades match your filters.')
-  })
-
-  it('renders no empty-state row when not empty', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: false },
-      slots: { default: '<tr><td>row</td></tr>' },
-    })
-    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseTable from './BaseTable.vue'
+import type { TableColumn } from '../types/table'
+
+const columns: TableColumn[] = [
+  { label: 'Symbol' },
+  { label: 'Qty', align: 'right' },
+  { label: 'Bought' },
+]
+
+describe('BaseTable', () => {
+  it('renders header cells with right-alignment where requested', () => {
+    const wrapper = mount(BaseTable, { props: { columns } })
+    const ths = wrapper.findAll('th')
+    expect(ths.map((th) => th.text())).toEqual(['Symbol', 'Qty', 'Bought'])
+    expect(ths[1].classes()).toContain('text-right')
+    expect(ths[0].classes()).not.toContain('text-right')
+    expect(ths[0].classes()).toEqual(expect.arrayContaining(['px-4', 'py-3']))
+  })
+
+  it('renders caller rows through the default slot', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns },
+      slots: { default: '<tr><td>AMD</td><td>3</td><td>today</td></tr>' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('AMD')
+    expect(wrapper.find('table').classes()).toEqual(expect.arrayContaining(['w-full', 'text-sm']))
+  })
+
+  it('renders the empty-state row spanning every column when empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'Nothing here.' },
+    })
+    const td = wrapper.find('tbody td')
+    expect(td.attributes('colspan')).toBe('3')
+    expect(td.text()).toBe('Nothing here.')
+  })
+
+  it('prefers the empty slot over emptyText', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'fallback' },
+      slots: { empty: 'No trades match your filters.' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('No trades match your filters.')
+  })
+
+  it('renders no empty-state row when not empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: false },
+      slots: { default: '<tr><td>row</td></tr>' },
+    })
+    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
+  })
+
+  it('has no card chrome by default and adds it with `card`', () => {
+    const plain = mount(BaseTable, { props: { columns } })
+    expect(plain.classes()).not.toContain('border')
+    const card = mount(BaseTable, { props: { columns, card: true } })
+    expect(card.classes()).toEqual(
+      expect.arrayContaining(['overflow-x-auto', 'rounded-xl', 'border']),
+    )
+  })
+
+  it('draws row dividers on the body', () => {
+    const wrapper = mount(BaseTable, { props: { columns } })
+    expect(wrapper.find('tbody').classes()).toEqual(expect.arrayContaining(['divide-y']))
+  })
+})

package/src/components/BaseTable.vue

@@ -1,50 +1,62 @@
-<template>
-  <!--
-    Styling shell for data tables — NOT a data grid. Owns the table skin
-    (slate header band, px-4 py-3 header cells, empty-state row); rows are
-    the caller's own <tr> markup via the default slot, so cell content and
-    per-cell styling stay fully in the caller's hands.
-
-    Wrap it yourself for scrolling/card chrome (e.g. inside a BaseRow with
-    overflow-x-auto). Same `dark:`-variant note as BaseInput.
-  -->
-  <table class="w-full text-sm">
-    <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300">
-      <tr class="text-left">
-        <th
-          v-for="(col, i) in columns"
-          :key="i"
-          class="px-4 py-3"
-          :class="col.align === 'right' ? 'text-right' : ''"
-        >
-          {{ col.label }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-if="empty">
-        <td :colspan="columns.length" class="px-4 py-12 text-center text-slate-500">
-          <slot name="empty">{{ emptyText }}</slot>
-        </td>
-      </tr>
-      <slot />
-    </tbody>
-  </table>
-</template>
-
-<script setup lang="ts">
-import type { TableColumn } from '../types/table'
-
-interface Props {
-  columns: TableColumn[]
-  /** True when there are no rows — renders the empty-state row. */
-  empty?: boolean
-  /** Fallback empty-state text; the `empty` slot overrides it. */
-  emptyText?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  empty: false,
-  emptyText: 'No rows.',
-})
-</script>
+<template>
+  <div :class="card ? CARD_CLASS : undefined">
+    <!--
+      Styling shell for data tables — NOT a data grid. Owns the table skin
+      (slate header band, px-4 py-3 header cells, row dividers + hover,
+      empty-state row); rows are the caller's own <tr> markup via the default
+      slot, so cell content and per-cell styling stay fully in the caller's hands.
+
+      `card` adds the shared card chrome (rounded border, surface, horizontal
+      scroll). Leave it off when the caller already wraps the table itself
+      (e.g. inside a BaseRow with overflow-x-auto). Same `dark:`-variant note
+      as BaseInput.
+    -->
+    <table class="w-full text-sm">
+      <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300">
+        <tr class="text-left border-b border-slate-200 dark:border-slate-700">
+          <th
+            v-for="(col, i) in columns"
+            :key="i"
+            class="px-4 py-3"
+            :class="col.align === 'right' ? 'text-right' : ''"
+          >
+            {{ col.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="divide-y divide-slate-200 dark:divide-slate-700 [&>tr]:transition-colors [&>tr:hover]:bg-slate-50 dark:[&>tr:hover]:bg-slate-800/40"
+      >
+        <tr v-if="empty">
+          <td :colspan="columns.length" class="px-4 py-12 text-center text-slate-500">
+            <slot name="empty">{{ emptyText }}</slot>
+          </td>
+        </tr>
+        <slot />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TableColumn } from '../types/table'
+
+const CARD_CLASS =
+  'overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900'
+
+interface Props {
+  columns: TableColumn[]
+  /** True when there are no rows — renders the empty-state row. */
+  empty?: boolean
+  /** Fallback empty-state text; the `empty` slot overrides it. */
+  emptyText?: string
+  /** Wrap the table in the rounded, bordered, horizontally scrolling card. */
+  card?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  empty: false,
+  emptyText: 'No rows.',
+  card: false,
+})
+</script>

package/src/components/BaseToggle.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseToggle from './BaseToggle.vue'
+
+describe('BaseToggle', () => {
+  it('reflects the value in aria-checked and the track colour', () => {
+    const off = mount(BaseToggle, { props: { modelValue: false } })
+    expect(off.find('[role=switch]').attributes('aria-checked')).toBe('false')
+    expect(off.find('[role=switch]').classes()).toContain('bg-slate-200')
+
+    const on = mount(BaseToggle, { props: { modelValue: true, color: 'red' } })
+    expect(on.find('[role=switch]').attributes('aria-checked')).toBe('true')
+    expect(on.find('[role=switch]').classes()).toContain('bg-red-600')
+  })
+
+  it('uses the red off track with offTone="red"', () => {
+    const w = mount(BaseToggle, { props: { modelValue: false, offTone: 'red' } })
+    expect(w.find('[role=switch]').classes()).toContain('bg-red-200')
+  })
+
+  it('emits update:modelValue and change with the flipped value', async () => {
+    const w = mount(BaseToggle, { props: { modelValue: false } })
+    await w.find('[role=switch]').trigger('click')
+    expect(w.emitted('update:modelValue')).toEqual([[true]])
+    expect(w.emitted('change')).toEqual([[true]])
+  })
+
+  it('does nothing while disabled', async () => {
+    const w = mount(BaseToggle, { props: { modelValue: true, disabled: true } })
+    await w.find('[role=switch]').trigger('click')
+    expect(w.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('renders the label, or uses ariaLabel when there is none', () => {
+    expect(mount(BaseToggle, { props: { label: 'Crawler' } }).text()).toBe('Crawler')
+    const w = mount(BaseToggle, { props: { ariaLabel: 'Alive' } })
+    expect(w.find('[role=switch]').attributes('aria-label')).toBe('Alive')
+  })
+})

package/src/components/BaseToggle.vue

@@ -0,0 +1,73 @@
+<template>
+  <label
+    class="inline-flex items-center gap-3 select-none"
+    :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
+  >
+    <button
+      type="button"
+      role="switch"
+      :aria-checked="modelValue"
+      :aria-label="label ? undefined : ariaLabel || undefined"
+      :disabled="disabled"
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 disabled:cursor-not-allowed"
+      :class="modelValue ? ON[color] : offTone === 'red' ? 'bg-red-200 dark:bg-red-900/50' : 'bg-slate-200 dark:bg-slate-700'"
+      @click="toggle"
+    >
+      <span
+        class="inline-block h-5 w-5 rounded-full bg-white shadow ring-1 ring-black/5 transition-transform"
+        :class="modelValue ? 'translate-x-[22px]' : 'translate-x-0.5'"
+        aria-hidden="true"
+      />
+    </button>
+    <span v-if="label" class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ label }}</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+/**
+ * On/off switch (role="switch"). `v-model` is the boolean; `change` fires
+ * after every user toggle with the new value, so callers can persist it.
+ * `color` tints the on state; `offTone="red"` shows a red track while off
+ * (e.g. "account is down" states).
+ */
+type Color = 'emerald' | 'red' | 'sky' | 'amber'
+
+interface Props {
+  modelValue?: boolean
+  /** Visible label beside the switch (also its accessible name). */
+  label?: string
+  /** Accessible name when there is no visible label. */
+  ariaLabel?: string
+  color?: Color
+  offTone?: 'slate' | 'red'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: '',
+  ariaLabel: '',
+  color: 'emerald',
+  offTone: 'slate',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
+
+const ON: Record<Color, string> = {
+  emerald: 'bg-emerald-500',
+  red: 'bg-red-600',
+  sky: 'bg-sky-500',
+  amber: 'bg-amber-500',
+}
+
+function toggle() {
+  if (props.disabled) return
+  const next = !props.modelValue
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>