mgv-backoffice 1.47.0 → 1.49.0

package/src/components/BasePhotoViewer.vue

@@ -0,0 +1,93 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="current"
+      class="fixed inset-0 z-[1000] flex flex-col bg-slate-950/90"
+      role="dialog"
+      aria-modal="true"
+      @click.self="emit('close')"
+    >
+      <div class="flex items-center justify-between px-4 py-3 text-sm text-white">
+        <span class="font-medium">{{ current.label }}</span>
+        <div class="flex items-center gap-3">
+          <span class="text-slate-300">{{ index + 1 }} / {{ photos.length }}</span>
+          <button type="button" class="rounded-full p-1.5 hover:bg-white/10" :aria-label="closeLabel" @click="emit('close')">
+            <XMarkIcon class="h-6 w-6" />
+          </button>
+        </div>
+      </div>
+      <div class="relative flex min-h-0 flex-1 items-center justify-center px-4 pb-4" @click.self="emit('close')">
+        <img :src="current.src" :alt="current.label" class="max-h-full max-w-full rounded-lg object-contain shadow-2xl" />
+        <template v-if="photos.length > 1">
+          <button
+            type="button"
+            class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
+            :aria-label="previousLabel"
+            @click="step(-1)"
+          >
+            <ChevronLeftIcon class="h-7 w-7" />
+          </button>
+          <button
+            type="button"
+            class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
+            :aria-label="nextLabel"
+            @click="step(1)"
+          >
+            <ChevronRightIcon class="h-7 w-7" />
+          </button>
+        </template>
+      </div>
+      <p v-if="current.caption" class="mx-auto max-w-2xl whitespace-pre-line px-4 pb-4 text-center text-sm text-white">
+        {{ current.caption }}
+      </p>
+      <div v-if="photos.length > 1" class="flex justify-center gap-2 overflow-x-auto px-4 pb-4">
+        <button
+          v-for="(photo, i) in photos"
+          :key="i"
+          type="button"
+          class="h-14 w-14 shrink-0 overflow-hidden rounded-md border-2"
+          :class="i === index ? 'border-emerald-400' : 'border-transparent opacity-60 hover:opacity-100'"
+          :aria-label="photo.label"
+          @click="index = i"
+        >
+          <img :src="photo.src" :alt="photo.label" class="h-full w-full object-cover" />
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+// Full-screen photo viewer. v-model is the current index; arrow keys or the buttons step through, Esc or the backdrop emits `close`. Labels are props so apps can translate them.
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { ChevronLeftIcon, ChevronRightIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import type { ViewerPhoto } from '../types/photoViewer'
+
+const props = withDefaults(
+  defineProps<{
+    photos: ViewerPhoto[]
+    closeLabel?: string
+    previousLabel?: string
+    nextLabel?: string
+  }>(),
+  { closeLabel: 'Close', previousLabel: 'Previous', nextLabel: 'Next' },
+)
+const index = defineModel<number>({ required: true })
+const emit = defineEmits<{ close: [] }>()
+
+const current = computed(() => props.photos[index.value])
+
+function step(delta: number) {
+  const n = props.photos.length
+  if (n > 0) index.value = (index.value + delta + n) % n
+}
+
+function onKey(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+  else if (e.key === 'ArrowLeft') step(-1)
+  else if (e.key === 'ArrowRight') step(1)
+}
+
+onMounted(() => window.addEventListener('keydown', onKey))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
+</script>

package/src/components/BaseRating.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseRating from './BaseRating.vue'
+import BaseBooleanIcon from './BaseBooleanIcon.vue'
+
+describe('BaseRating', () => {
+  it('shows the value and optional count', () => {
+    expect(mount(BaseRating, { props: { rating: 4.26, count: 3 } }).text()).toContain('4.3 (3)')
+    expect(mount(BaseRating, { props: { rating: 4 } }).text()).toBe('4.0')
+  })
+})
+
+describe('BaseBooleanIcon', () => {
+  it('renders a dash for unknown and a labelled icon otherwise', () => {
+    expect(mount(BaseBooleanIcon, { props: { value: null } }).text()).toBe('—')
+    const yes = mount(BaseBooleanIcon, { props: { value: true, trueLabel: 'Ναι' } })
+    expect(yes.attributes('title')).toBe('Ναι')
+  })
+})

package/src/components/BaseRating.vue

@@ -0,0 +1,21 @@
+<template>
+  <span class="inline-flex items-center gap-0.5" :title="`${rating} / 5`">
+    <template v-for="i in 5" :key="i">
+      <StarSolid v-if="i <= Math.round(rating)" class="h-4 w-4 text-amber-400" aria-hidden="true" />
+      <StarOutline v-else class="h-4 w-4 text-slate-300 dark:text-slate-600" aria-hidden="true" />
+    </template>
+    <span class="ml-1 font-mono text-xs text-slate-500 dark:text-slate-400">
+      {{ rating.toFixed(1) }}<template v-if="count !== null"> ({{ count }})</template>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+// Read-only 0-5 star rating with its numeric value and optional review count.
+import { StarIcon as StarSolid } from '@heroicons/vue/24/solid'
+import { StarIcon as StarOutline } from '@heroicons/vue/24/outline'
+
+withDefaults(defineProps<{ rating: number; count?: number | null }>(), {
+  count: null,
+})
+</script>

package/src/components/BaseRowButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-xs font-medium shadow-sm transition-colors"
+    :class="VARIANT_CLASS[variant]"
+    @click.stop
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+// Compact button for a table's Actions column: outline (neutral), primary (green) or danger (red). Stops click propagation so it works inside clickable rows.
+withDefaults(defineProps<{ variant?: 'outline' | 'primary' | 'danger' }>(), {
+  variant: 'outline',
+})
+
+const VARIANT_CLASS = {
+  outline:
+    'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800',
+  primary: 'border border-emerald-700 bg-emerald-700 text-white hover:bg-emerald-800',
+  danger: 'border border-red-400 bg-red-400 text-white hover:bg-red-500',
+}
+</script>

package/src/components/BaseSelect.vue

@@ -4,11 +4,13 @@
       v-bind="$attrs"
       :value="modelValue"
       class="base-select w-full appearance-none bg-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'"
+      :class="[size === 'md' ? 'py-2 pr-9' : 'py-1.5 pr-8', $slots.icon ? 'pl-8' : size === 'md' ? 'pl-3' : 'pl-2.5']"
       @change="onChange"
     >
       <SlotContent />
     </select>
+    <!-- Optional leading icon: pass a Heroicon and bind `iconClass`. -->
+    <slot name="icon" icon-class="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
     <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'"
@@ -40,7 +42,7 @@ defineOptions({ inheritAttrs: false })
 // 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
+  modelValue?: string | number | 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. */

package/src/components/BaseSidebarUser.vue

@@ -1,75 +1,85 @@
-<template>
-  <div class="flex flex-col gap-2 text-left">
-    <component
-      :is="to ? RouterLink : 'div'"
-      v-bind="to ? { to } : {}"
-      class="flex items-center gap-3 rounded-lg p-2 transition-colors"
-      :class="to ? 'hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500' : ''"
-      :title="to ? profileLabel : undefined"
-    >
-      <span
-        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-sm font-semibold text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
-        aria-hidden="true"
-      >{{ initials }}</span>
-      <span class="min-w-0">
-        <span class="block truncate text-sm font-medium text-slate-900 dark:text-slate-100">{{ name }}</span>
-        <span v-if="email" class="block truncate text-xs text-slate-500 dark:text-slate-400">{{ email }}</span>
-      </span>
-    </component>
-    <BaseButton
-      v-if="showLogout"
-      class="w-full justify-center"
-      :description="logoutLabel"
-      :color="BaseButtonEnum.RED"
-      :size="BaseButtonSizeEnum.SMALL"
-      outline
-      icon-left
-      @click="emit('logout')"
-    >
-      <ArrowRightStartOnRectangleIcon class="mr-1.5 h-4 w-4" aria-hidden="true" />
-    </BaseButton>
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * Signed-in user block for the sidebar footer (BaseSidebar `footer` slot):
- * initials avatar + name + email, linking to the profile page when `to` is
- * set, and a Logout button that emits `logout` (the app clears its session).
- */
-import { computed } from 'vue'
-import { RouterLink, type RouteLocationRaw } from 'vue-router'
-import { ArrowRightStartOnRectangleIcon } from '@heroicons/vue/24/outline'
-import BaseButton from './BaseButton.vue'
-import { BaseButtonEnum } from '../enums/BaseButtonEnum'
-import { BaseButtonSizeEnum } from '../enums/BaseButtonSizeEnum'
-
-interface Props {
-  name: string
-  email?: string
-  /** Profile route; makes the name/email block a link. */
-  to?: RouteLocationRaw
-  showLogout?: boolean
-  logoutLabel?: string
-  profileLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  email: '',
-  to: undefined,
-  showLogout: true,
-  logoutLabel: 'Logout',
-  profileLabel: 'View profile',
-})
-
-const emit = defineEmits<{ (e: 'logout'): void }>()
-
-const initials = computed(() =>
-  (props.name || '?')
-    .split(/[\s._-]+/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((p) => p[0]!.toUpperCase())
-    .join(''),
-)
-</script>
+<template>
+  <div class="flex flex-col gap-2 text-left">
+    <component
+      :is="to ? RouterLink : 'div'"
+      v-bind="to ? { to } : {}"
+      class="flex items-center gap-3 rounded-lg p-2 transition-colors"
+      :class="to ? 'hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500' : ''"
+      :title="to ? profileLabel : undefined"
+    >
+      <img
+        v-if="avatarUrl"
+        :src="avatarUrl"
+        alt=""
+        class="h-9 w-9 shrink-0 rounded-full object-cover"
+      />
+      <span
+        v-else
+        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-sm font-semibold text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+        aria-hidden="true"
+      >{{ initials }}</span>
+      <span class="min-w-0">
+        <span class="block truncate text-sm font-medium text-slate-900 dark:text-slate-100">{{ name }}</span>
+        <span v-if="email" class="block truncate text-xs text-slate-500 dark:text-slate-400">{{ email }}</span>
+      </span>
+    </component>
+    <BaseButton
+      v-if="showLogout"
+      class="w-full justify-center"
+      :description="logoutLabel"
+      :color="BaseButtonEnum.RED"
+      :size="BaseButtonSizeEnum.SMALL"
+      outline
+      icon-left
+      @click="emit('logout')"
+    >
+      <ArrowRightStartOnRectangleIcon class="mr-1.5 h-4 w-4" aria-hidden="true" />
+    </BaseButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Signed-in user block for the sidebar footer (BaseSidebar `footer` slot):
+ * initials avatar + name + email, linking to the profile page when `to` is
+ * set, and a Logout button that emits `logout` (the app clears its session).
+ */
+import { computed } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { ArrowRightStartOnRectangleIcon } from '@heroicons/vue/24/outline'
+import BaseButton from './BaseButton.vue'
+import { BaseButtonEnum } from '../enums/BaseButtonEnum'
+import { BaseButtonSizeEnum } from '../enums/BaseButtonSizeEnum'
+
+interface Props {
+  name: string
+  email?: string
+  /** Photo shown instead of the initials. */
+  avatarUrl?: string | null
+  /** Profile route; makes the name/email block a link. */
+  to?: RouteLocationRaw
+  showLogout?: boolean
+  logoutLabel?: string
+  profileLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  email: '',
+  avatarUrl: null,
+  to: undefined,
+  showLogout: true,
+  logoutLabel: 'Logout',
+  profileLabel: 'View profile',
+})
+
+const emit = defineEmits<{ (e: 'logout'): void }>()
+
+const initials = computed(() =>
+  (props.name || '?')
+    .split(/[\s._-]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((p) => p[0]!.toUpperCase())
+    .join(''),
+)
+</script>

package/src/components/BaseStatCard.vue

@@ -11,7 +11,7 @@
           {{ title }}
         </p>
         <p class="mt-1 truncate text-3xl font-bold" :class="cls.value">
-          {{ value }}
+          <slot name="value">{{ value }}</slot>
         </p>
         <p v-if="subtitle" class="mt-1 text-sm font-medium" :class="cls.subtitle">
           {{ subtitle }}
@@ -35,13 +35,14 @@
  * 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.
+ * the `value` slot replaces the value text (e.g. <EuroAmount>); 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'
+type Accent = 'emerald' | 'sky' | 'amber' | 'violet' | 'red' | 'slate'
 
 interface Props {
   title: string
@@ -69,6 +70,13 @@ const ACCENTS: Record<Accent, { border: string; value: string; subtitle: string;
     iconBox: 'bg-emerald-50 dark:bg-emerald-900/30',
     icon: 'text-emerald-500',
   },
+  violet: {
+    border: 'border-violet-300 dark:border-violet-700',
+    value: 'text-violet-500 dark:text-violet-400',
+    subtitle: 'text-violet-500 dark:text-violet-400',
+    iconBox: 'bg-violet-50 dark:bg-violet-900/30',
+    icon: 'text-violet-500',
+  },
   sky: {
     border: 'border-sky-300 dark:border-sky-700',
     value: 'text-sky-500 dark:text-sky-400',

package/src/components/BaseTextarea.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseTextarea from './BaseTextarea.vue'
+
+describe('BaseTextarea', () => {
+  it('emits the typed value and passes attrs through', async () => {
+    const wrapper = mount(BaseTextarea, { props: { modelValue: 'a' }, attrs: { rows: '3' } })
+    expect(wrapper.attributes('rows')).toBe('3')
+    await wrapper.setValue('ab')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['ab'])
+  })
+
+  it('renders null as empty', () => {
+    const wrapper = mount(BaseTextarea, { props: { modelValue: null } })
+    expect((wrapper.element as HTMLTextAreaElement).value).toBe('')
+  })
+})

package/src/components/BaseTextarea.vue

@@ -0,0 +1,24 @@
+<template>
+  <textarea
+    :value="modelValue ?? ''"
+    class="w-full 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 px-3 py-2 placeholder:text-slate-400 dark:placeholder:text-slate-500 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"
+    @input="onInput"
+  />
+</template>
+
+<script setup lang="ts">
+// Themed multi-line input, sharing BaseInput's field skin. rows, maxlength, placeholder, required and extra classes fall through via attrs.
+interface Props {
+  modelValue?: string | null
+}
+
+withDefaults(defineProps<Props>(), { modelValue: '' })
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+function onInput(e: Event) {
+  emit('update:modelValue', (e.target as HTMLTextAreaElement).value)
+}
+</script>

package/src/composables/useRefreshOnReturn.test.ts

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, defineComponent, h } from 'vue'
+import { REFRESH_AFTER_AWAY_MS, useRefreshOnReturn } from './useRefreshOnReturn'
+
+function setVisibility(state: 'hidden' | 'visible') {
+  Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => state })
+  document.dispatchEvent(new Event('visibilitychange'))
+}
+
+describe('useRefreshOnReturn', () => {
+  afterEach(() => vi.useRealTimers())
+
+  function mountWith(refresh: () => void) {
+    const app = createApp(
+      defineComponent({
+        setup() {
+          useRefreshOnReturn(refresh)
+          return () => h('div')
+        },
+      }),
+    )
+    app.mount(document.createElement('div'))
+    return app
+  }
+
+  it('refreshes after a long absence', () => {
+    vi.useFakeTimers()
+    const refresh = vi.fn()
+    const wrapper = mountWith(refresh)
+    setVisibility('hidden')
+    vi.advanceTimersByTime(REFRESH_AFTER_AWAY_MS)
+    setVisibility('visible')
+    expect(refresh).toHaveBeenCalledOnce()
+    wrapper.unmount()
+  })
+
+  it('keeps the page after a quick switch', () => {
+    vi.useFakeTimers()
+    const refresh = vi.fn()
+    const wrapper = mountWith(refresh)
+    setVisibility('hidden')
+    vi.advanceTimersByTime(REFRESH_AFTER_AWAY_MS - 1)
+    setVisibility('visible')
+    expect(refresh).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+})

package/src/composables/useRefreshOnReturn.ts

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+/** How long the tab must be hidden before coming back reloads the page's data; quick switches keep it. */
+export const REFRESH_AFTER_AWAY_MS = 30_000
+
+/**
+ * Calls `refresh` when the browser tab becomes visible again after `afterMs` or more hidden, since server data
+ * changes while the user is elsewhere. The first load is left to the component.
+ */
+export function useRefreshOnReturn(refresh: () => unknown, afterMs = REFRESH_AFTER_AWAY_MS): void {
+  let hiddenAt: number | null = null
+
+  function onVisibilityChange() {
+    if (document.visibilityState === 'hidden') {
+      hiddenAt ??= Date.now()
+      return
+    }
+    if (hiddenAt !== null && Date.now() - hiddenAt >= afterMs) void refresh()
+    hiddenAt = null
+  }
+
+  onMounted(() => document.addEventListener('visibilitychange', onVisibilityChange))
+  onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisibilityChange))
+}

package/src/index.ts

@@ -68,6 +68,13 @@ export { default as BaseSidebarUser } from './components/BaseSidebarUser.vue'
 export { default as BaseAuthLayout } from './components/BaseAuthLayout.vue'
 export { default as BaseBooleanBadge } from './components/BaseBooleanBadge.vue'
 export { default as BaseDetailList } from './components/BaseDetailList.vue'
+export { default as BaseTextarea } from './components/BaseTextarea.vue'
+export { default as BaseRating } from './components/BaseRating.vue'
+export { default as BaseRowButton } from './components/BaseRowButton.vue'
+export { default as BaseBooleanIcon } from './components/BaseBooleanIcon.vue'
+export { default as BasePhotoViewer } from './components/BasePhotoViewer.vue'
+export type { ViewerPhoto } from './types/photoViewer'
+export { useRefreshOnReturn, REFRESH_AFTER_AWAY_MS } from './composables/useRefreshOnReturn'
 export type { DetailItem } from './types/detail'
 
 // Composables
@@ -149,6 +156,9 @@ export {
   fmtCurrencyAmount,
   fmtDuration,
   formatJson,
+  fmtTime,
+  toLocalInput,
+  fromLocalInput,
   stringifyValue,
 } from './utils/format'
 export {