mgv-backoffice 1.0.13 → 1.2.0

package/src/components/BaseNotFoundPage.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex items-center justify-center min-h-[60vh]">
+    <div class="text-center px-6">
+      <ExclamationTriangleIcon class="w-16 h-16 mx-auto mb-4" :class="t.illustration" />
+      <h1 class="text-4xl font-bold mb-2" :class="isDark ? 'text-gray-200' : 'text-gray-800'">
+        {{ code }}
+      </h1>
+      <p class="text-lg mb-6" :class="t.dimTextAlt">{{ message }}</p>
+      <button
+        @click="goHome"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors cursor-pointer"
+        :class="isDark ? 'bg-emerald-600 hover:bg-emerald-500' : 'bg-emerald-600 hover:bg-emerald-700'"
+      >
+        {{ homeLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+
+interface Props {
+  /** Big heading. Defaults to '404'. */
+  code?: string
+  /** Subtitle text. Defaults to 'Page not found'. */
+  message?: string
+  /** Vue Router named route to redirect to when the button is clicked. */
+  homeRouteName?: string
+  /** Button label. Defaults to 'Go home'. */
+  homeLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: '404',
+  message: 'Page not found',
+  homeRouteName: 'home',
+  homeLabel: 'Go home',
+})
+
+const router = useRouter()
+const { isDark } = useTheme()
+const t = useThemeClasses()
+
+function goHome() {
+  router.push({ name: props.homeRouteName })
+}
+</script>

package/src/components/BaseSidebar.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
+import { useTheme } from '../composables/useTheme'
+import { useMobileSidebar } from '../composables/useMobileSidebar'
+import type { NavSection } from '../types/sidebar'
+
+interface Props {
+  /** Nav sections (groups of items). */
+  sections: NavSection[]
+  /** Route name to navigate to when the logo / home button is clicked. */
+  homeRouteName?: string
+  /** Optional app name shown in the footer next to the version. */
+  appName?: string
+  /** Optional version string shown in the footer. */
+  version?: string
+  /** Whether to render the dark/light toggle in the footer. */
+  showThemeToggle?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  homeRouteName: 'home',
+  appName: '',
+  version: '',
+  showThemeToggle: true,
+})
+
+const router = useRouter()
+const route = useRoute()
+const { isDark, toggleTheme } = useTheme()
+const { mobileOpen, close: closeMobile, toggle: toggleMobile } = useMobileSidebar()
+
+// Refs needed for the mobile focus management.
+const closeMobileButton = ref<HTMLButtonElement | null>(null)
+let lastFocusedBeforeOpen: HTMLElement | null = null
+
+// When the mobile sidebar opens, move focus into it so keyboard users
+// don't have to Tab back from <main> (which the surrounding layout
+// marks `inert`); when it closes, restore focus to whatever opened the
+// menu.
+watch(mobileOpen, async (open) => {
+  if (open) {
+    lastFocusedBeforeOpen = document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null
+    await nextTick()
+    closeMobileButton.value?.focus()
+  } else {
+    lastFocusedBeforeOpen?.focus()
+    lastFocusedBeforeOpen = null
+  }
+})
+
+onMounted(() => {
+  // The visibility-change health-check hook that lived in WireMate's
+  // AppSidebar was application-specific; consumers can wire any
+  // periodic work in the `#status` slot themselves.
+})
+
+onUnmounted(() => {})
+
+function goHome() {
+  router.push({ name: props.homeRouteName })
+  closeMobile()
+}
+
+function isActive(name: string): boolean {
+  return route.name === name
+}
+
+function navigate(name: string) {
+  router.push({ name })
+  closeMobile()
+}
+</script>
+
+<template>
+  <div>
+    <!-- Mobile top bar (hidden on desktop via scoped CSS to avoid flex/hidden conflict) -->
+    <div class="mobile-topbar fixed top-0 inset-x-0 z-30 flex items-center justify-between px-4 py-3 border-b transition-colors"
+      :class="isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'">
+      <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
+        <!--
+          `logo` slot: consumers drop their brand logo in here. Receives
+          the current size hint so a logo component can scale to match.
+        -->
+        <slot name="logo" :size="28" />
+      </button>
+      <button
+        type="button"
+        @click="toggleMobile"
+        class="p-2 rounded-lg cursor-pointer"
+        :class="isDark ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-600 hover:bg-gray-100'"
+        :aria-label="mobileOpen ? 'Close navigation menu' : 'Open navigation menu'"
+        :aria-expanded="mobileOpen"
+      >
+        <Bars3Icon v-if="!mobileOpen" class="w-6 h-6" aria-hidden="true" />
+        <XMarkIcon v-else class="w-6 h-6" aria-hidden="true" />
+      </button>
+    </div>
+
+    <!-- Mobile overlay (decorative). -->
+    <div
+      v-if="mobileOpen"
+      class="mobile-overlay fixed inset-0 z-40 bg-black/50"
+      aria-hidden="true"
+      @click="closeMobile"
+    />
+
+    <aside
+      role="navigation"
+      aria-label="Main navigation"
+      class="fixed top-0 left-0 h-screen w-60 flex flex-col border-r transition-transform duration-300 lg:pointer-events-auto"
+      :class="[
+        isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200',
+        mobileOpen ? 'translate-x-0 z-50' : '-translate-x-full max-lg:pointer-events-none lg:translate-x-0 z-50',
+      ]"
+    >
+      <div class="flex flex-col h-full">
+        <!-- Logo -->
+        <div class="px-5 pt-5 pb-4 flex items-center justify-center relative">
+          <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
+            <slot name="logo" :size="52" />
+          </button>
+          <button
+            ref="closeMobileButton"
+            type="button"
+            @click="closeMobile"
+            class="lg:hidden p-1.5 rounded-lg cursor-pointer absolute right-3 top-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="isDark ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-500 hover:bg-gray-100'"
+            aria-label="Close navigation menu"
+          >
+            <XMarkIcon class="w-5 h-5" aria-hidden="true" />
+          </button>
+        </div>
+
+        <!-- Nav -->
+        <nav class="flex-1 overflow-y-auto px-3 space-y-6">
+          <div v-for="section in sections" :key="section.title">
+            <p class="px-2 mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+              {{ section.title }}
+            </p>
+            <ul class="space-y-0.5">
+              <li v-for="item in section.items" :key="item.name">
+                <button
+                  type="button"
+                  :aria-current="isActive(item.name) ? 'page' : undefined"
+                  @click="navigate(item.name)"
+                  class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors w-full text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+                  :class="isActive(item.name)
+                    ? (isDark
+                        ? 'bg-emerald-500/15 text-emerald-300'
+                        : 'bg-emerald-50 text-emerald-700')
+                    : (isDark
+                        ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100')"
+                >
+                  <component :is="item.icon" class="w-[18px] h-[18px] shrink-0" />
+                  {{ item.label }}
+                </button>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <!-- Bottom: Theme toggle, status slot, footer slot -->
+        <div class="px-4 py-4 border-t transition-colors space-y-3"
+          :class="isDark ? 'border-gray-800' : 'border-gray-200'">
+          <button
+            v-if="showThemeToggle"
+            type="button"
+            @click="toggleTheme"
+            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            :aria-pressed="isDark"
+            class="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="isDark
+              ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+              : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'"
+          >
+            {{ isDark ? 'Switch to light' : 'Switch to dark' }}
+            <span class="ml-auto relative w-9 h-5 rounded-full transition-colors"
+              :class="isDark ? 'bg-emerald-600' : 'bg-gray-300'">
+              <span class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300"
+                :class="isDark ? 'translate-x-4' : 'translate-x-0'" />
+            </span>
+          </button>
+
+          <!--
+            `status` slot: consumers drop in their own indicator (e.g.
+            health check, sync status). The wrapper handles spacing only.
+          -->
+          <slot name="status" />
+
+          <!--
+            `footer` slot: links / version / etc. If not provided and
+            either `appName` or `version` is set, we render a default
+            "appName vVersion" line.
+          -->
+          <slot name="footer">
+            <div
+              v-if="appName || version"
+              class="flex items-center justify-center gap-2 text-xs"
+              :class="isDark ? 'text-gray-500' : 'text-gray-500'"
+            >
+              <span>{{ appName }}<template v-if="appName && version"> </template><template v-if="version">v{{ version }}</template></span>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+@media (min-width: 1024px) {
+  /* Hide mobile top bar on desktop */
+  .mobile-topbar {
+    display: none !important;
+  }
+}
+</style>

package/src/components/BaseTextInputModal.vue

@@ -0,0 +1,144 @@
+<template>
+  <!--
+    Generic "ask the user for a single string and confirm" dialog.
+    Used for clone-name prompts, rename dialogs, etc.
+
+    Slots:
+      • icon — replace the default emerald-tinted document icon.
+
+    Preserves typed input on stray backdrop clicks (only treats the
+    click as cancel if the user hasn't modified the initial value).
+    Escape is always treated as an explicit dismissal.
+  -->
+  <BaseModalShell
+    :title="title"
+    manual-close
+    @backdrop="handleBackdropClick"
+  >
+    <template #icon>
+      <slot name="icon">
+        <div
+          class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
+          :class="isDark ? 'bg-emerald-900/30' : 'bg-emerald-50'"
+        >
+          <DocumentDuplicateIcon class="h-6 w-6 text-emerald-600" aria-hidden="true" />
+        </div>
+      </slot>
+    </template>
+
+    <p class="text-sm" :class="isDark ? 'text-gray-300' : 'text-gray-600'">
+      {{ message }}
+    </p>
+
+    <div class="mt-4">
+      <label
+        class="block text-sm font-medium mb-1"
+        :class="t.label"
+      >
+        {{ inputLabel }}
+      </label>
+      <input
+        ref="nameInput"
+        v-model="inputValue"
+        type="text"
+        :placeholder="placeholder"
+        class="w-full px-3 py-2 rounded-md border text-sm transition-colors"
+        :class="isDark
+          ? 'bg-gray-800 border-gray-600 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-emerald-500'
+          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400 focus:outline-none focus:border-emerald-500'"
+        @keyup.enter="handleConfirm"
+      />
+    </div>
+
+    <template #footer>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150"
+        :class="t.ghostButton"
+        @click="handleCancel"
+      >
+        {{ cancelText }}
+      </button>
+      <button
+        type="button"
+        :disabled="!inputValue.trim() || submitting"
+        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150"
+        :class="[
+          !inputValue.trim() || submitting
+            ? 'bg-emerald-400 cursor-not-allowed'
+            : 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer'
+        ]"
+        @click="handleConfirm"
+      >
+        {{ submitting ? submittingText : confirmText }}
+      </button>
+    </template>
+  </BaseModalShell>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import { DocumentDuplicateIcon } from '@heroicons/vue/24/outline'
+import BaseModalShell from './BaseModalShell.vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+import { useEscapeKey } from '../composables/useEscapeKey'
+
+interface Props {
+  title: string
+  message: string
+  initialValue?: string
+  placeholder?: string
+  inputLabel?: string
+  confirmText?: string
+  cancelText?: string
+  submittingText?: string
+  submitting?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialValue: '',
+  placeholder: 'Enter value...',
+  inputLabel: 'Name',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+  submittingText: 'Working...',
+  submitting: false,
+})
+
+const emit = defineEmits<{
+  confirm: [value: string]
+  cancel: []
+}>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+const inputValue = ref(props.initialValue)
+const nameInput = ref<HTMLInputElement | null>(null)
+
+onMounted(async () => {
+  await nextTick()
+  nameInput.value?.focus()
+})
+
+function handleConfirm() {
+  if (!inputValue.value.trim() || props.submitting) return
+  emit('confirm', inputValue.value.trim())
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+// Backdrop click: only treat it as cancel if the user hasn't modified
+// the value. Otherwise a stray click outside the dialog would silently
+// throw away the typed input.
+function handleBackdropClick() {
+  if (inputValue.value.trim() === (props.initialValue ?? '').trim()) {
+    handleCancel()
+  }
+}
+
+// Escape always cancels.
+useEscapeKey(handleCancel)
+</script>

package/src/components/BaseToast.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-if="isLoading" id="toast-top-right" :class="computeMainComponentCss()" role="alert">
+<div v-if="isVisible" id="toast-top-right" :class="computeMainComponentCss()" role="alert">
 
   <div class="flex items-center w-full max-w-md p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800">
     <div v-if="mode == BaseToastEnum.ERROR" :class="computeModeCss()">
@@ -21,7 +21,7 @@
       <span class="sr-only">Close</span>
       <XMarkIcon
           class="h-6 w-6 text-gray-500 cursor-pointer"
-          @click="isLoading = !isLoading"
+          @click="close"
       />
     </button>
   </div>
@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { ExclamationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
-import { ref, PropType } from "vue";
+import { ref, onMounted, onUnmounted, PropType } from "vue";
 import { BaseToastEnum } from "../enums/BaseToastEnum";
 import { PositioningEnum } from "../enums/PositioningEnum";
 
@@ -52,34 +52,63 @@ const props = defineProps({
   positioning: {
     type: String,
     required: false,
-    default: 'right'
+    default: PositioningEnum.TOP_RIGHT
+  },
+  duration: {
+    type: Number,
+    required: false,
+    default: 5000
+  }
+})
+
+const isVisible = ref(true);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+function close() {
+  isVisible.value = false;
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+}
+
+onMounted(() => {
+  timer = setTimeout(() => isVisible.value = false, props.duration);
+})
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
   }
 })
 
 function computeModeCss() {
-  let basePositioning = "";
+  let modeCss = "";
   switch (props.mode) {
     case (BaseToastEnum.ERROR):
-      basePositioning = "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200"
+      modeCss = "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200"
       break;
     case (BaseToastEnum.SUCCESS):
-      basePositioning = "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200"
+      modeCss = "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200"
       break;
     case (BaseToastEnum.WARNING):
-      basePositioning = "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200"
+      modeCss = "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200"
+      break;
+    default:
+      modeCss = "text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200"
       break;
   }
-  return 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg ' + basePositioning;
+  return 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg ' + modeCss;
 }
 
 function computeMainComponentCss() {
   let basePositioning = "top-5 right-5";
   switch (props.positioning) {
     case (PositioningEnum.BOTTOM_LEFT):
-      basePositioning = "bottom-5"
+      basePositioning = "bottom-5 left-5"
       break;
     case (PositioningEnum.TOP_LEFT):
-      basePositioning = "top-5"
+      basePositioning = "top-5 left-5"
       break;
     case (PositioningEnum.TOP_RIGHT):
       basePositioning = "top-5 right-5"
@@ -88,14 +117,6 @@ function computeMainComponentCss() {
       basePositioning = "bottom-5 right-5"
       break;
   }
-  return 'fixed flex items-center w-full max-w-md p-4 space-x-4 divide-x rounded-lg ' + basePositioning + ' space-x';
+  return 'fixed flex items-center w-full max-w-md p-4 space-x-4 divide-x rounded-lg ' + basePositioning;
 }
-
-const isLoading = ref(true);
-
-function disable() {
-  setTimeout(() => isLoading.value = false, 1000000);
-}
-
-disable()
 </script>

package/src/components/ColoredSquares.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref } from 'vue'
 import { ColorsEnums } from "../enums/ColorsEnums";
 
 const props = defineProps({
@@ -33,9 +33,7 @@ const pastelColors = [
   'bg-pink-300'
 ]
 
-const bgColor = computed(() => {
-  return pastelColors[Math.floor(Math.random() * pastelColors.length)]
-})
+const bgColor = ref(pastelColors[Math.floor(Math.random() * pastelColors.length)])
 
 function computeCss() {
   let color = 'gray';