mgv-backoffice 1.37.0 → 1.38.0

package/src/components/BaseSearchSelect.vue

@@ -0,0 +1,318 @@
+<template>
+  <!--
+    Searchable select ("combobox"). Type to filter the options, pick with the
+    mouse or ArrowUp/ArrowDown + Enter. `multiple` turns it into a tag picker:
+    picked options show as removable chips and the menu stays open so several
+    can be picked in a row (Backspace on an empty search removes the last one).
+
+    Options are data ({ value, label, title?, disabled? } — the same shape as
+    BaseDropdown), and the field skin matches BaseInput/BaseSelect so it can sit
+    in the same filter row. Escape and an outside click close the menu.
+  -->
+  <div ref="rootEl" :class="block ? 'relative w-full' : 'relative inline-block min-w-48'">
+    <div
+      class="flex min-h-[38px] items-center gap-1.5 rounded-lg border bg-white px-3 py-1.5 text-sm transition-colors dark:bg-slate-900"
+      :class="[
+        open
+          ? 'border-emerald-500 ring-2 ring-emerald-500/30'
+          : 'border-slate-300 hover:border-slate-400 dark:border-slate-600 dark:hover:border-slate-500',
+        disabled ? 'cursor-not-allowed opacity-60' : 'cursor-text',
+      ]"
+      @mousedown="onControlMouseDown"
+    >
+      <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1">
+        <span
+          v-for="opt in selectedOptions"
+          v-show="multiple"
+          :key="String(opt.value)"
+          class="inline-flex max-w-full items-center gap-1 rounded-md bg-emerald-50 py-0.5 pl-2 pr-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+        >
+          <span class="truncate">{{ opt.label }}</span>
+          <button
+            type="button"
+            class="rounded p-0.5 hover:bg-emerald-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:bg-emerald-500/25"
+            :aria-label="`Remove ${opt.label}`"
+            :disabled="disabled"
+            @mousedown.stop.prevent
+            @click.stop="remove(opt)"
+          >
+            <XMarkIcon class="h-3 w-3" aria-hidden="true" />
+          </button>
+        </span>
+        <input
+          ref="inputEl"
+          v-model="query"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          :disabled="disabled"
+          :readonly="!searchable"
+          :aria-label="ariaLabel || placeholder"
+          aria-autocomplete="list"
+          :aria-expanded="open"
+          :aria-controls="listId"
+          :aria-activedescendant="open && activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined"
+          :placeholder="inputPlaceholder"
+          class="min-w-16 flex-1 border-0 bg-transparent p-0 py-0.5 text-sm text-slate-900 outline-none focus:ring-0 dark:text-slate-100 disabled:cursor-not-allowed"
+          :class="hasSingleValue
+            ? 'placeholder:text-slate-900 dark:placeholder:text-slate-100'
+            : 'placeholder:text-slate-400 dark:placeholder:text-slate-500'"
+          @focus="openMenu"
+          @input="openMenu"
+          @keydown="onKeydown"
+        />
+      </div>
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="shrink-0 rounded p-0.5 text-slate-400 hover:text-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:text-slate-200"
+        aria-label="Clear selection"
+        @mousedown.stop.prevent
+        @click.stop="clear"
+      >
+        <XMarkIcon class="h-4 w-4" aria-hidden="true" />
+      </button>
+      <ChevronDownIcon
+        class="h-4 w-4 shrink-0 text-slate-500 transition-transform dark:text-slate-400"
+        :class="open ? 'rotate-180' : ''"
+        aria-hidden="true"
+      />
+    </div>
+
+    <ul
+      v-if="open"
+      :id="listId"
+      role="listbox"
+      :aria-multiselectable="multiple || undefined"
+      class="absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-900"
+    >
+      <li
+        v-for="(opt, i) in filtered"
+        :id="`${listId}-${i}`"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="isSelected(opt)"
+        :aria-disabled="opt.disabled || undefined"
+        :title="opt.title"
+        class="flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-left text-sm"
+        :class="rowClass(opt, i)"
+        @mousedown.prevent
+        @mouseenter="activeIndex = i"
+        @click="pick(opt)"
+      >
+        <span class="truncate">{{ opt.label }}</span>
+        <CheckIcon v-if="isSelected(opt)" class="h-4 w-4 shrink-0" aria-hidden="true" />
+      </li>
+      <li v-if="filtered.length === 0" class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
+        {{ options.length === 0 ? emptyText : noResultsText }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
+import { CheckIcon, ChevronDownIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import type { DropdownOption } from '../types/dropdown'
+
+type Value = string | number
+
+interface Props {
+  options: readonly DropdownOption[]
+  /** Selected value (single) or values (`multiple`). */
+  modelValue?: Value | null | readonly Value[]
+  /** Pick several options, shown as removable chips. */
+  multiple?: boolean
+  placeholder?: string
+  /** Allow typing to filter. False makes it a plain (non-typing) picker. */
+  searchable?: boolean
+  /** Show the clear (×) button while something is selected. */
+  clearable?: boolean
+  /** Full-width (w-full). Set false for an inline field. */
+  block?: boolean
+  disabled?: boolean
+  /** Accessible name when there is no visible label. */
+  ariaLabel?: string
+  /** Shown when the search matches nothing. */
+  noResultsText?: string
+  /** Shown when there are no options at all. */
+  emptyText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  multiple: false,
+  placeholder: 'Select',
+  searchable: true,
+  clearable: true,
+  block: true,
+  disabled: false,
+  ariaLabel: '',
+  noResultsText: 'No matches.',
+  emptyText: 'No options.',
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const inputEl = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+const activeIndex = ref(-1)
+const listId = `search-select-${useId()}`
+
+const selectedValues = computed<Value[]>(() => {
+  const v = props.modelValue
+  if (Array.isArray(v)) return [...v]
+  return v === null || v === undefined || v === '' ? [] : [v as Value]
+})
+
+const selectedOptions = computed(() =>
+  selectedValues.value
+    .map((v) => props.options.find((o) => o.value === v))
+    .filter((o): o is DropdownOption => !!o),
+)
+
+const hasValue = computed(() => selectedValues.value.length > 0)
+const hasSingleValue = computed(() => !props.multiple && selectedOptions.value.length > 0)
+
+// Single mode shows the picked label as the input's placeholder, so typing
+// starts a fresh search while the current choice stays visible until then.
+const inputPlaceholder = computed(() => {
+  if (hasSingleValue.value) return selectedOptions.value[0].label
+  if (props.multiple && hasValue.value) return ''
+  return props.placeholder
+})
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : [...props.options]
+})
+
+watch(filtered, (list) => {
+  activeIndex.value = list.findIndex((o) => !o.disabled)
+})
+
+function isSelected(opt: DropdownOption): boolean {
+  return selectedValues.value.includes(opt.value)
+}
+
+function rowClass(opt: DropdownOption, i: number): string {
+  if (opt.disabled) return 'cursor-not-allowed text-slate-400 dark:text-slate-600'
+  if (isSelected(opt)) {
+    return i === activeIndex.value
+      ? 'bg-emerald-600 text-white'
+      : 'bg-emerald-500 text-white'
+  }
+  return i === activeIndex.value
+    ? 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100'
+    : 'text-slate-700 dark:text-slate-200'
+}
+
+function openMenu() {
+  if (props.disabled || open.value) return
+  open.value = true
+  activeIndex.value = filtered.value.findIndex((o) => !o.disabled)
+}
+
+function closeMenu() {
+  open.value = false
+  query.value = ''
+}
+
+function onControlMouseDown(e: MouseEvent) {
+  if (props.disabled) return
+  // Keep focus in the input; toggle the menu when clicking the chrome.
+  if (e.target !== inputEl.value) e.preventDefault()
+  if (open.value && e.target !== inputEl.value) {
+    closeMenu()
+  } else {
+    inputEl.value?.focus()
+    openMenu()
+  }
+}
+
+function pick(opt: DropdownOption) {
+  if (opt.disabled) return
+  if (props.multiple) {
+    const next = isSelected(opt)
+      ? selectedValues.value.filter((v) => v !== opt.value)
+      : [...selectedValues.value, opt.value]
+    emit('update:modelValue', next)
+    query.value = ''
+    nextTick(() => inputEl.value?.focus())
+  } else {
+    emit('update:modelValue', opt.value)
+    closeMenu()
+    inputEl.value?.blur()
+  }
+}
+
+function remove(opt: DropdownOption) {
+  emit('update:modelValue', selectedValues.value.filter((v) => v !== opt.value))
+}
+
+function clear() {
+  emit('update:modelValue', props.multiple ? [] : null)
+  query.value = ''
+}
+
+function move(step: 1 | -1) {
+  const list = filtered.value
+  if (list.length === 0) return
+  let i = activeIndex.value
+  for (let n = 0; n < list.length; n++) {
+    i = (i + step + list.length) % list.length
+    if (!list[i].disabled) break
+  }
+  activeIndex.value = i
+  nextTick(() => document.getElementById(`${listId}-${i}`)?.scrollIntoView?.({ block: 'nearest' }))
+}
+
+function onKeydown(e: KeyboardEvent) {
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault()
+      if (!open.value) openMenu()
+      else move(1)
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      if (!open.value) openMenu()
+      else move(-1)
+      break
+    case 'Enter':
+      if (open.value && activeIndex.value >= 0) {
+        e.preventDefault()
+        pick(filtered.value[activeIndex.value])
+      }
+      break
+    case 'Escape':
+      if (open.value) {
+        e.preventDefault()
+        closeMenu()
+      }
+      break
+    case 'Tab':
+      closeMenu()
+      break
+    case 'Backspace':
+      if (props.multiple && query.value === '' && selectedOptions.value.length) {
+        remove(selectedOptions.value[selectedOptions.value.length - 1])
+      }
+      break
+  }
+}
+
+function onDocumentMouseDown(e: MouseEvent) {
+  if (open.value && rootEl.value && !rootEl.value.contains(e.target as Node)) {
+    closeMenu()
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', onDocumentMouseDown))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocumentMouseDown))
+</script>

package/src/components/BaseSelect.test.ts

@@ -11,15 +11,15 @@ describe('BaseSelect', () => {
     const wrapper = mount(BaseSelect, { slots })
     const select = wrapper.find('select')
     expect(select.classes()).toEqual(
-      expect.arrayContaining(['rounded', 'border', 'w-full', 'px-2', 'py-1.5', 'text-sm']),
+      expect.arrayContaining(['rounded-lg', 'border', 'w-full', 'pl-2.5', 'py-1.5', 'text-sm']),
     )
   })
 
   it('supports md size and inline (non-block) layout', () => {
     const wrapper = mount(BaseSelect, { props: { size: 'md', block: false }, slots })
     const select = wrapper.find('select')
-    expect(select.classes()).toEqual(expect.arrayContaining(['px-3', 'py-2']))
-    expect(select.classes()).not.toContain('w-full')
+    expect(select.classes()).toEqual(expect.arrayContaining(['pl-3', 'py-2']))
+    expect(wrapper.classes()).toContain('inline-block')
   })
 
   it('reflects modelValue and emits the selected value on change', async () => {

package/src/components/BaseSelect.vue

@@ -1,46 +1,61 @@
-<template>
-  <!--
-    Themed select sharing BaseInput's field skin. Options come from the
-    default slot so callers keep full control of <option> rendering (values,
-    titles, disabled entries). Attrs (id, disabled, extra classes) fall
-    through. Same `dark:`-variant note as BaseInput.
-  -->
-  <select
-    :value="modelValue"
-    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
-    :class="[block ? 'w-full' : '', size === 'md' ? 'px-3 py-2' : 'px-2 py-1.5']"
-    @change="onChange"
-  >
-    <slot />
-  </select>
-</template>
-
-<script setup lang="ts">
-// String-valued only — a DOM select always yields strings; use v-model.number
-// semantics in the owner if needed. The update:modelValue payload is `any`
-// (not generic: vite-plugin-dts flattens SFC generics out of the emitted
-// declarations) so `v-model` on a union-typed ref ('7D' | '30D' | …)
-// type-checks; the actual payload is always the selected option's string.
-interface Props {
-  modelValue?: string | null
-  /** 'sm' = px-2 py-1.5 (default, the usual select height); 'md' = px-3 py-2. */
-  size?: 'sm' | 'md'
-  /** Full-width (w-full). Set false for inline selects. */
-  block?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  size: 'sm',
-  block: true,
-})
-
-const emit = defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: 'update:modelValue', value: any): void
-}>()
-
-function onChange(e: Event) {
-  emit('update:modelValue', (e.target as HTMLSelectElement).value)
-}
-</script>
+<template>
+  <div class="relative" :class="block ? 'w-full' : 'inline-block'">
+    <select
+      v-bind="$attrs"
+      :value="modelValue"
+      class="w-full appearance-none rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors hover:border-slate-400 dark:hover:border-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
+      :class="size === 'md' ? 'py-2 pl-3 pr-9' : 'py-1.5 pl-2.5 pr-8'"
+      @change="onChange"
+    >
+      <slot />
+    </select>
+    <ChevronDownIcon
+      class="pointer-events-none absolute top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500 dark:text-slate-400"
+      :class="size === 'md' ? 'right-3' : 'right-2.5'"
+      aria-hidden="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+/*
+ * Themed select sharing BaseInput's field skin. Options come from the
+ * default slot so callers keep full control of <option> rendering (values,
+ * titles, disabled entries). Attrs (id, disabled, extra classes) fall
+ * through. Same `dark:`-variant note as BaseInput.
+ *
+ */
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+
+// Attrs (id, name, disabled, extra classes) go to the <select>, not the
+// chevron wrapper.
+defineOptions({ inheritAttrs: false })
+
+// String-valued only — a DOM select always yields strings; use v-model.number
+// semantics in the owner if needed. The update:modelValue payload is `any`
+// (not generic: vite-plugin-dts flattens SFC generics out of the emitted
+// declarations) so `v-model` on a union-typed ref ('7D' | '30D' | …)
+// type-checks; the actual payload is always the selected option's string.
+interface Props {
+  modelValue?: string | null
+  /** 'sm' = px-2 py-1.5 (default, the usual select height); 'md' = px-3 py-2. */
+  size?: 'sm' | 'md'
+  /** Full-width (w-full). Set false for inline selects. */
+  block?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  size: 'sm',
+  block: true,
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+function onChange(e: Event) {
+  emit('update:modelValue', (e.target as HTMLSelectElement).value)
+}
+</script>

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>