mgv-backoffice 1.48.0 → 1.49.0

package/dist/utils/format.d.ts

@@ -110,3 +110,12 @@ export declare function stringifyValue(value: unknown): string;
  * Renders an em-dash for null/undefined/non-finite input.
  */
 export declare function fmtDuration(ms: number | null | undefined, maxUnits?: number): string;
+/**
+ * Normalize a backend time string for display: "11:00:00" → "11:00".
+ * Leaves already-short ("11:00") or unexpected values untouched.
+ */
+export declare function fmtTime(time?: string | null): string;
+/** ISO instant → "YYYY-MM-DDTHH:mm" in the browser's time zone, for <input type="datetime-local">. */
+export declare function toLocalInput(iso?: string | null): string;
+/** Value of an <input type="datetime-local"> → ISO instant (null when empty). */
+export declare function fromLocalInput(value: string): string | null;

package/package.json

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

package/src/components/BaseBadge.vue

@@ -31,16 +31,16 @@ const props = defineProps({
 })
 
 const colorMap: Record<string, string> = {
-  [ColorsEnums.RED]:    'bg-red-100 text-red-700 border-red-200',
-  [ColorsEnums.GREEN]:  'bg-green-100 text-green-700 border-green-200',
-  [ColorsEnums.BLUE]:   'bg-blue-100 text-blue-700 border-blue-200',
-  [ColorsEnums.YELLOW]: 'bg-yellow-100 text-yellow-700 border-yellow-200',
-  [ColorsEnums.GRAY]:   'bg-gray-100 text-gray-700 border-gray-200',
+  [ColorsEnums.RED]:    'bg-red-100 text-red-700 border-red-200 dark:bg-red-500/15 dark:text-red-300 dark:border-red-500/30',
+  [ColorsEnums.GREEN]:  'bg-green-100 text-green-700 border-green-200 dark:bg-green-500/15 dark:text-green-300 dark:border-green-500/30',
+  [ColorsEnums.BLUE]:   'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30',
+  [ColorsEnums.YELLOW]: 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-500/15 dark:text-yellow-300 dark:border-yellow-500/30',
+  [ColorsEnums.GRAY]:   'bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-500/15 dark:text-gray-300 dark:border-gray-500/30',
   [ColorsEnums.BLACK]:  'bg-gray-800 text-gray-100 border-gray-700',
-  [ColorsEnums.NONE]:   'bg-gray-50 text-gray-600 border-gray-200',
+  [ColorsEnums.NONE]:   'bg-gray-50 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700',
 }
 
-const defaultColor = 'bg-red-100 text-red-700 border-red-200'
+const defaultColor = colorMap[ColorsEnums.RED]
 
 const badgeClasses = computed(() => {
   const colorClasses = (props.color && colorMap[props.color]) || defaultColor

package/src/components/BaseBooleanIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <span v-if="value == null">{{ emptyText }}</span>
+  <span v-else class="inline-flex align-middle" :title="value ? trueLabel : falseLabel">
+    <CheckCircleIcon v-if="value" class="h-5 w-5 shrink-0 text-emerald-500" :aria-label="trueLabel" />
+    <XCircleIcon v-else class="h-5 w-5 shrink-0 text-red-500" :aria-label="falseLabel" />
+  </span>
+</template>
+
+<script setup lang="ts">
+// Icon-only yes/no flag for dense tables: green tick or red cross with the label in the tooltip, emptyText when the value is unknown. Use BaseBooleanBadge when the label should be visible.
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/20/solid'
+
+withDefaults(
+  defineProps<{
+    value?: boolean | null
+    trueLabel?: string
+    falseLabel?: string
+    emptyText?: string
+  }>(),
+  { value: null, trueLabel: 'Yes', falseLabel: 'No', emptyText: '—' },
+)
+</script>

package/src/components/BaseDetailList.vue

@@ -1,47 +1,50 @@
-<template>
-  <dl class="grid grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-4 text-left" :class="columns === 2 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))]' : columns === 3 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))] lg:grid-cols-[repeat(3,minmax(0,1fr))]' : ''">
-    <div v-for="item in items" :key="item.label" class="min-w-0">
-      <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ item.label }}</dt>
-      <dd class="mt-1 break-words text-sm text-slate-900 dark:text-slate-100" :class="item.mono ? 'font-mono' : ''">
-        <a
-          v-if="item.href && !isEmpty(item.value)"
-          :href="item.href"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-emerald-600 hover:underline dark:text-emerald-400"
-        >{{ item.value }}</a>
-        <span v-else-if="isEmpty(item.value)" class="text-slate-400 dark:text-slate-500">{{ emptyText }}</span>
-        <template v-else>{{ item.value }}</template>
-      </dd>
-    </div>
-  </dl>
-</template>
-
-<script setup lang="ts">
-// Column classes use the arbitrary-value form on purpose (see
-// noSharedResponsiveGrid.test.ts): plain responsive column utilities would ship
-// in the lib CSS, which consumers import AFTER their own utilities, and override
-// the consumers' larger-breakpoint grid columns.
-/**
- * Read-only label/value grid for detail pages — the "view" counterpart of a
- * form. Empty values render `emptyText` (—); `href` makes the value an
- * external link; `mono` sets it in the monospace face (ids, hashes).
- */
-import type { DetailItem } from '../types/detail'
-
-interface Props {
-  items: readonly DetailItem[]
-  /** Columns from `sm` up (1 column on phones). */
-  columns?: 1 | 2 | 3
-  emptyText?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  columns: 2,
-  emptyText: '—',
-})
-
-function isEmpty(v: DetailItem['value']): boolean {
-  return v === null || v === undefined || v === ''
-}
-</script>
+<template>
+  <dl class="grid grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-4 text-left" :class="columns === 2 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))]' : columns === 3 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))] lg:grid-cols-[repeat(3,minmax(0,1fr))]' : ''">
+    <div v-for="item in items" :key="item.label" class="min-w-0">
+      <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ item.label }}</dt>
+      <dd class="mt-1 break-words text-sm text-slate-900 dark:text-slate-100" :class="item.mono ? 'font-mono' : ''">
+        <slot name="value" :item="item">
+        <a
+          v-if="item.href && !isEmpty(item.value)"
+          :href="item.href"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-emerald-600 hover:underline dark:text-emerald-400"
+        >{{ item.value }}</a>
+        <span v-else-if="isEmpty(item.value)" class="text-slate-400 dark:text-slate-500">{{ emptyText }}</span>
+        <template v-else>{{ item.value }}</template>
+        </slot>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<script setup lang="ts">
+// Column classes use the arbitrary-value form on purpose (see
+// noSharedResponsiveGrid.test.ts): plain responsive column utilities would ship
+// in the lib CSS, which consumers import AFTER their own utilities, and override
+// the consumers' larger-breakpoint grid columns.
+/**
+ * Read-only label/value grid for detail pages — the "view" counterpart of a
+ * form. Empty values render `emptyText` (—); `href` makes the value an
+ * external link; `mono` sets it in the monospace face (ids, hashes). The scoped
+ * `value` slot (`{ item }`) overrides how a value renders, e.g. a badge.
+ */
+import type { DetailItem } from '../types/detail'
+
+interface Props {
+  items: readonly DetailItem[]
+  /** Columns from `sm` up (1 column on phones). */
+  columns?: 1 | 2 | 3
+  emptyText?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  columns: 2,
+  emptyText: '—',
+})
+
+function isEmpty(v: DetailItem['value']): boolean {
+  return v === null || v === undefined || v === ''
+}
+</script>

package/src/components/BaseField.label.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import BaseField from './BaseField.vue'
+
+describe('BaseField label association', () => {
+  it('links the label to the slotted control when labelFor is not set', async () => {
+    const wrapper = mount(BaseField, { props: { label: 'Name' }, slots: { default: '<input />' } })
+    await nextTick()
+    const id = wrapper.find('input').attributes('id')
+    expect(id).toBeTruthy()
+    expect(wrapper.find('label').attributes('for')).toBe(id)
+  })
+
+  it('keeps an id the control already has', async () => {
+    const wrapper = mount(BaseField, { props: { label: 'Name' }, slots: { default: '<input id="own" />' } })
+    await nextTick()
+    expect(wrapper.find('label').attributes('for')).toBe('own')
+  })
+
+  it('prefers an explicit labelFor', async () => {
+    const wrapper = mount(BaseField, {
+      props: { label: 'Name', labelFor: 'x' },
+      slots: { default: '<input />' },
+    })
+    await nextTick()
+    expect(wrapper.find('label').attributes('for')).toBe('x')
+    expect(wrapper.find('input').attributes('id')).toBeUndefined()
+  })
+})

package/src/components/BaseField.vue

@@ -1,8 +1,8 @@
 <template>
-  <div :class="grow ? 'min-w-48 flex-1' : ''" class="text-left">
+  <div ref="root" :class="grow ? 'min-w-48 flex-1' : ''" class="text-left">
     <label
       v-if="label"
-      :for="labelFor || undefined"
+      :for="labelFor || autoFor"
       class="mb-1 block"
       :class="compact
         ? 'text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400'
@@ -17,6 +17,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref, useId } from 'vue'
+
 /**
  * Label + control + message wrapper for forms and filter bars. The control
  * goes in the default slot (BaseInput, BaseSelect, BaseSearchSelect, …).
@@ -35,7 +37,7 @@ interface Props {
   grow?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   label: '',
   labelFor: '',
   required: false,
@@ -44,4 +46,18 @@ withDefaults(defineProps<Props>(), {
   compact: false,
   grow: false,
 })
+
+// Without labelFor, link the label to the control in the slot so clicking it
+// focuses the field and screen readers announce it.
+const root = ref<HTMLElement>()
+const autoFor = ref<string>()
+const generatedId = useId()
+
+onMounted(() => {
+  if (props.labelFor || !props.label) return
+  const control = root.value?.querySelector<HTMLElement>('input, select, textarea')
+  if (!control) return
+  control.id ||= generatedId
+  autoFor.value = control.id
+})
 </script>

package/src/components/BasePhotoViewer.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BasePhotoViewer from './BasePhotoViewer.vue'
+
+const photos = [
+  { src: 'a.png', label: 'A' },
+  { src: 'b.png', label: 'B' },
+]
+
+describe('BasePhotoViewer', () => {
+  it('wraps around with the arrow keys and closes on Escape', async () => {
+    const wrapper = mount(BasePhotoViewer, {
+      props: { photos, modelValue: 0 },
+      global: { stubs: { Teleport: true } },
+    })
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(wrapper.emitted('close')).toHaveLength(1)
+    wrapper.unmount()
+  })
+})

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>