@innertia-solutions/innertia-nuxt 0.1.45 → 0.1.47

package/app.config.ts

@@ -149,7 +149,7 @@ export default defineAppConfig({
 // ─── Tipos públicos ──────────────────────────────────────────────────────────
 // Re-exportados desde acá para que cualquier composable / componente los importe.
 
-export type InnertiaMode = 'saas' | 'app'
+export type InnertiaMode = 'saas' | 'app' | 'open'
 
 export type ContextMobileMode = 'allow' | 'block' | 'redirect'
 

package/components/App/NotificationBell.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { IconBell, IconChecks, IconBellOff } from '@tabler/icons-vue'
+
+/*
+ * App.NotificationBell — campana del top bar: dropdown flotante (Preline hs-dropdown)
+ * con lista de notificaciones del usuario, badge de no leídas, tabs Todas/No leídas
+ * y footer "Marcar todas" + "Ver todas". Estilo calcado del template CRM.
+ *
+ * Backend: notification center de innertia-laravel (vía useNotifications).
+ * `allRoute`: ruta de la vista "ver todas" (cada producto monta la suya).
+ */
+const props = defineProps({
+  allRoute: { type: String, default: '/backoffice/notifications' },
+})
+
+const { fetchNotifications, markAsRead, markAllAsRead } = useNotifications()
+const store = useNotificationsStore()
+
+const tab = ref('all')            // all | unread
+const loading = ref(false)
+const serverUnread = ref(0)       // conteo exacto de no leídas (del backend)
+const ddRoot = ref(null)
+
+// Cierra el dropdown Preline al navegar (--auto-close:false para que los tabs no lo cierren).
+function closeDropdown() {
+  try { window.HSDropdown?.close?.(ddRoot.value) } catch { /* noop */ }
+}
+
+const items = computed(() => tab.value === 'unread'
+  ? store.notifications.filter(n => !n.read_at)
+  : store.notifications)
+
+const badge = computed(() => serverUnread.value > 9 ? '9+' : String(serverUnread.value))
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await fetchNotifications({ all: 1 })
+    serverUnread.value = res?.unread ?? store.unreadCount
+  } catch { /* noop */ } finally {
+    loading.value = false
+  }
+}
+onMounted(load)
+
+async function openItem(n) {
+  if (!n.read_at) {
+    try {
+      await markAsRead(n.id)
+      serverUnread.value = Math.max(0, serverUnread.value - 1)
+    } catch { /* noop */ }
+  }
+  const link = n.data?.link ?? n.data?.url
+  if (link) { closeDropdown(); navigateTo(link) }
+}
+
+function goAll() {
+  closeDropdown()
+  navigateTo(props.allRoute)
+}
+
+async function markAll() {
+  try {
+    await markAllAsRead()
+    serverUnread.value = 0
+  } catch { /* noop */ }
+}
+
+const initial = (t) => (t || '?').trim().charAt(0).toUpperCase()
+
+function timeAgo(iso) {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const s = Math.floor((Date.now() - d.getTime()) / 1000)
+  if (s < 60) return 'hace un momento'
+  const m = Math.floor(s / 60); if (m < 60) return `hace ${m} min`
+  const h = Math.floor(m / 60); if (h < 24) return `hace ${h} h`
+  const days = Math.floor(h / 24); if (days < 7) return `hace ${days} d`
+  return d.toLocaleDateString('es-CL', { day: 'numeric', month: 'short' })
+}
+</script>
+
+<template>
+  <div ref="ddRoot" class="hs-dropdown [--placement:bottom-right] [--auto-close:false] relative inline-flex">
+    <!-- Botón campana -->
+    <button
+      id="hs-notifications-dd"
+      type="button"
+      class="relative inline-flex justify-center items-center size-9 rounded-full text-foreground-inverse hover:bg-plain/10 focus:outline-hidden"
+      aria-haspopup="menu" aria-expanded="false" aria-label="Notificaciones"
+      @click="load"
+    >
+      <IconBell class="size-4 shrink-0" />
+      <span
+        v-if="serverUnread > 0"
+        class="absolute -top-0.5 -end-0.5 min-w-4 h-4 px-1 inline-flex justify-center items-center text-[10px] font-semibold leading-none text-white bg-red-500 rounded-full"
+      >{{ badge }}</span>
+    </button>
+
+    <!-- Dropdown -->
+    <div
+      class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-90 max-w-[calc(100vw-2rem)] transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl overflow-hidden"
+      role="menu" aria-orientation="vertical" aria-labelledby="hs-notifications-dd"
+    >
+      <!-- Header + tabs (subrayado after inset, estilo template) -->
+      <div class="px-5 pt-3 flex justify-between items-center border-b border-dropdown-divider">
+        <nav class="flex gap-1" role="tablist">
+          <button
+            type="button"
+            class="relative px-2 py-1.5 mb-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg hover:bg-muted-hover after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none transition-colors"
+            :class="tab === 'all' ? 'text-foreground after:bg-secondary' : 'text-muted-foreground-1 hover:text-foreground after:bg-transparent'"
+            @click="tab = 'all'"
+          >Todas</button>
+          <button
+            type="button"
+            class="relative px-2 py-1.5 mb-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg hover:bg-muted-hover after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none transition-colors"
+            :class="tab === 'unread' ? 'text-foreground after:bg-secondary' : 'text-muted-foreground-1 hover:text-foreground after:bg-transparent'"
+            @click="tab = 'unread'"
+          >No leídas<span v-if="serverUnread" class="ms-1 text-xs text-muted-foreground">({{ serverUnread }})</span></button>
+        </nav>
+      </div>
+
+      <!-- Lista -->
+      <div class="max-h-96 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-card-line">
+        <!-- Loading -->
+        <div v-if="loading && !store.notifications.length" class="p-4 space-y-4">
+          <div v-for="i in 4" :key="i" class="flex gap-3 animate-pulse">
+            <span class="size-9 rounded-full bg-surface-1 shrink-0" />
+            <div class="flex-1 space-y-2"><span class="block h-3 w-1/3 bg-surface-1 rounded" /><span class="block h-3 w-3/4 bg-surface-1 rounded" /></div>
+          </div>
+        </div>
+
+        <!-- Vacío -->
+        <div v-else-if="!items.length" class="py-12 flex flex-col items-center text-center text-muted-foreground">
+          <IconBellOff class="size-8 mb-2 opacity-30" :stroke-width="1.5" />
+          <p class="text-sm">{{ tab === 'unread' ? 'Sin notificaciones nuevas.' : 'No tienes notificaciones.' }}</p>
+        </div>
+
+        <!-- Items -->
+        <ul v-else class="divide-y divide-dropdown-divider">
+          <li
+            v-for="n in items" :key="n.id"
+            class="relative w-full flex gap-x-3 p-4 cursor-pointer hover:bg-muted-hover transition-colors"
+            :class="!n.read_at ? 'bg-surface' : ''"
+            @click="openItem(n)"
+          >
+            <div class="relative shrink-0">
+              <span class="flex items-center justify-center size-9 rounded-full bg-primary/10 text-primary text-sm font-semibold uppercase">{{ initial(n.title) }}</span>
+              <span v-if="!n.read_at" class="absolute -top-0.5 -start-0.5 size-2.5 bg-primary rounded-full ring-2 ring-dropdown" />
+            </div>
+            <div class="grow min-w-0">
+              <p class="text-xs text-muted-foreground">{{ timeAgo(n.created_at) }}</p>
+              <p class="text-sm font-medium text-foreground">{{ n.title }}</p>
+              <p v-if="n.body" class="text-sm text-muted-foreground line-clamp-2">{{ n.body }}</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex items-center border-t border-dropdown-divider divide-x divide-dropdown-divider">
+        <button
+          v-if="serverUnread > 0"
+          type="button"
+          class="flex-1 p-4 flex justify-center items-center gap-x-2 text-sm font-medium text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden"
+          @click="markAll"
+        >
+          <IconChecks class="size-4 shrink-0" />
+          Marcar todas como leídas
+        </button>
+        <button
+          type="button"
+          class="flex-1 p-4 flex justify-center items-center gap-x-2 text-sm font-medium text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden"
+          @click="goAll"
+        >
+          Ver todas
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/components/App/StatCard.vue

@@ -0,0 +1,29 @@
+<script setup>
+/*
+ * StatCard — indicador/KPI para la fila de resumen entre el título y la tabla.
+ * Estilo alineado a finance/index.vue (bg-card + rounded-card + tokens).
+ */
+defineProps({
+  label: { type: String, required: true },
+  value: { type: [String, Number], default: '—' },
+  hint: { type: String, default: '' },
+  valueClass: { type: String, default: 'text-foreground' },
+  icon: { type: [Object, Function], default: null },
+  iconClass: { type: String, default: 'bg-primary/10 text-primary' },
+  loading: { type: Boolean, default: false },
+})
+</script>
+
+<template>
+  <div class="bg-card border border-card-line rounded-card p-5 flex items-start justify-between gap-3">
+    <div class="min-w-0">
+      <p class="text-xs uppercase tracking-wider text-muted-foreground">{{ label }}</p>
+      <p v-if="loading" class="mt-2 h-7 w-16 bg-surface-1 rounded animate-pulse" />
+      <p v-else class="mt-2 text-2xl font-semibold" :class="valueClass">{{ value }}</p>
+      <span v-if="hint && !loading" class="text-xs text-muted-foreground">{{ hint }}</span>
+    </div>
+    <div v-if="icon" class="size-10 shrink-0 rounded-lg flex items-center justify-center" :class="iconClass">
+      <component :is="icon" class="size-5" :stroke-width="1.8" />
+    </div>
+  </div>
+</template>

package/composables/useAuth.js

@@ -1,4 +1,4 @@
-// useAuthStore, useApi, useOrganizationStore auto-imported
+// useAuthStore, useApi, useOrganizationStore, useInnertiaMode, useGymSelection, useGymStore auto-imported
 
 export function useAuth() {
   const authStore = useAuthStore()
@@ -20,6 +20,15 @@ export function useAuth() {
     authStore.setCurrentContext(context)
     queryClient.clear()
     await fetchMe()
+
+    // En modo 'open' el tenant se resuelve por selección: cargamos los gyms del
+    // usuario y devolvemos un destino (0/1/2+). saas/app conservan su return.
+    if (useInnertiaMode().isOpen()) {
+      const { resolveAfterLogin } = useGymSelection()
+      const gymDestination = await resolveAfterLogin() // 'onboarding' | 'ready' | 'picker'
+      return { ...(data ?? {}), gymDestination }
+    }
+
     return data
   }
 
@@ -68,6 +77,8 @@ export function useAuth() {
     queryClient.clear()
     authStore.logout()
     organizationStore.reset()
+    // En open, limpiar también el gym seleccionado
+    if (useInnertiaMode().isOpen()) useGymStore().reset()
     await navigateTo(loginPath)
   }
 

package/composables/useGymSelection.ts

@@ -0,0 +1,35 @@
+// useApi, useGymStore auto-imported.
+// Selección de gym en modo 'open': carga los gyms del usuario y resuelve
+// el destino post-login según cuántos tenga (0 / 1 / 2+).
+
+export function useGymSelection() {
+  const api = useApi()
+  const gym = useGymStore()
+
+  /** Carga los gyms del usuario autenticado y los guarda en el store. */
+  async function load() {
+    // Shape esperado: { gyms: [{ key, name, status, contexts }] }
+    const data = await api.get('auth/my-gyms')
+    gym.setGyms(data?.gyms || [])
+    return gym.gyms
+  }
+
+  /**
+   * Resuelve a dónde llevar al usuario tras el login.
+   *   'onboarding' → 0 gyms (debe crear/unirse a uno)
+   *   'ready'      → 1 gym (auto-seleccionado) o ya tenía uno activo válido
+   *   'picker'     → 2+ gyms sin selección válida previa
+   */
+  async function resolveAfterLogin() {
+    await load()
+    if (gym.gyms.length === 0) return 'onboarding'
+    if (gym.gyms.length === 1) { gym.setActive(gym.gyms[0].key); return 'ready' }
+    if (gym.activeKey && gym.gyms.some((g) => g.key === gym.activeKey)) return 'ready'
+    return 'picker'
+  }
+
+  /** Cambia el gym activo (switcher). */
+  function switchTo(key) { gym.setActive(key) }
+
+  return { load, resolveAfterLogin, switchTo }
+}

package/composables/useInnertiaMode.ts

@@ -1,7 +1,7 @@
 import type { InnertiaMode } from '../app.config'
 
 /**
- * Devuelve el modo activo de la librería: 'saas' | 'app'.
+ * Devuelve el modo activo de la librería: 'saas' | 'app' | 'open'.
  * Default: 'saas' (compatibilidad con productos existentes).
  *
  * Se configura en `nuxt.config.ts` del producto:
@@ -10,7 +10,9 @@ import type { InnertiaMode } from '../app.config'
  * Helpers de conveniencia:
  *   isSaas()    → true si mode === 'saas'
  *   isApp()     → true si mode === 'app'
- *   hasTenant() → true si mode === 'saas' (solo saas usa multitenancy)
+ *   isOpen()    → true si mode === 'open'
+ *   hasTenant() → true si mode === 'saas' | 'open' (usan multitenancy;
+ *                 saas resuelve por subdominio, open por gym seleccionado)
  */
 export function useInnertiaMode() {
   const appConfig = useAppConfig()
@@ -20,6 +22,7 @@ export function useInnertiaMode() {
     mode,
     isSaas:    () => mode === 'saas',
     isApp:     () => mode === 'app',
-    hasTenant: () => mode === 'saas',
+    isOpen:    () => mode === 'open',
+    hasTenant: () => mode === 'saas' || mode === 'open',
   }
 }

package/composables/useNotifications.js

@@ -1,22 +1,37 @@
+/**
+ * Centro de notificaciones del usuario. Habla con los endpoints del notification
+ * center de innertia-laravel (prefijo `notifications`, montado con
+ * \Innertia\Saas\Notifications::routes()):
+ *   GET    notifications            ?all=1&page=N  → {data,total,unread,current_page,last_page}
+ *   PATCH  notifications/{id}/read
+ *   PATCH  notifications/read-all
+ *   DELETE notifications/{id}
+ *   DELETE notifications                            (borra las leídas)
+ */
 export function useNotifications() {
   const api = useApi()
   const store = useNotificationsStore()
 
   async function fetchNotifications(params = {}) {
-    const data = await api.get('auth/me/notifications', { params })
-    store.setNotifications(data?.data ?? data ?? [])
-    return data
+    const res = await api.get('notifications', { params })
+    store.setNotifications(res?.data ?? [])
+    return res
   }
 
   async function markAsRead(id) {
-    await api.put(`auth/me/notifications/${id}/read`)
+    await api.patch(`notifications/${id}/read`)
     store.markRead(id)
   }
 
   async function markAllAsRead() {
-    await api.put('auth/me/notifications/read-all')
+    await api.patch('notifications/read-all')
     store.markAllRead()
   }
 
-  return { fetchNotifications, markAsRead, markAllAsRead }
+  async function remove(id) {
+    await api.delete(`notifications/${id}`)
+    store.remove(id)
+  }
+
+  return { fetchNotifications, markAsRead, markAllAsRead, remove }
 }

package/middleware/01.detect-subdomain.global.ts

@@ -2,8 +2,8 @@
 // Server-only: lee el hostname de la request para extraer el subdomain del tenant.
 // Solo activo en mode === 'saas'.
 export default defineNuxtRouteMiddleware((to) => {
-  // Modo no-saas → no hay tenant que detectar
-  if (!useInnertiaMode().hasTenant()) return
+  // Solo saas resuelve el tenant por subdominio (open lo hace por selección in-app)
+  if (!useInnertiaMode().isSaas()) return
 
   // Evitar loop infinito: si ya estamos en la página de error de tenant, no redirigir de nuevo.
   if (to.path === '/tenant-error') return

package/middleware/02.validate-tenant.global.ts

@@ -3,8 +3,8 @@
 // Usa la URL interna del backend (apiInternalUrl) para evitar pasar por el proxy de Nitro.
 // Solo activo en mode === 'saas'.
 export default defineNuxtRouteMiddleware(async (to) => {
-  // Modo no-saas → no hay tenant que validar
-  if (!useInnertiaMode().hasTenant()) return
+  // Solo saas valida el tenant por subdominio (open lo hace por selección in-app)
+  if (!useInnertiaMode().isSaas()) return
 
   if (!import.meta.server) return
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",

package/plugins/api-tenant.client.ts

@@ -1,19 +1,29 @@
 // Registra el interceptor del header X-Tenant.
-// El backend (ResolveTenantFromHeader) identifica el tenant por su key/slug,
-// no por UUID. Solo se envía cuando el tenant está validado (tenantId != null)
-// para evitar enviar el slug 'local' de dev que no existe en la DB.
+// El backend (ResolveTenantFromHeader) identifica el tenant por su key/slug, no por UUID.
+//   - saas: slug del tenant resuelto por subdominio (tenantStore); solo se envía
+//     cuando el tenant está validado (tenantId != null) para evitar el 'local' de dev.
+//   - open: key del gym seleccionado in-app (gymStore.activeKey).
 // useRequestInterceptors auto-imported desde nuxt-core.
-// useTenantStore auto-imported desde saas stores.
-// Solo activo en mode === 'saas'.
+// useTenantStore / useGymStore auto-imported desde stores.
+// Activo en mode === 'saas' | 'open'.
 export default defineNuxtPlugin(() => {
-  // Modo no-saas → no inyectar header de tenant
-  if (!useInnertiaMode().hasTenant()) return
+  const { isOpen, hasTenant } = useInnertiaMode()
+
+  // Modo sin tenant (app) → no inyectar header de tenant
+  if (!hasTenant()) return
 
   const { add } = useRequestInterceptors()
-  const tenantStore = useTenantStore()
 
   add((headers: Record<string, string>) => {
-    // Solo enviar si el tenant fue validado (tiene id) y tiene slug
+    // open: tenant por gym seleccionado
+    if (isOpen()) {
+      const gymStore = useGymStore()
+      if (gymStore.activeKey) headers['X-Tenant'] = gymStore.activeKey
+      return
+    }
+
+    // saas: tenant por subdominio — solo si fue validado (tiene id) y tiene slug
+    const tenantStore = useTenantStore()
     if (tenantStore.tenantId && tenantStore.tenantSlug) {
       headers['X-Tenant'] = tenantStore.tenantSlug
     }

package/stores/gym.js

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+
+/**
+ * Gym activo en modo 'open'.
+ * A diferencia de saas (tenant por subdominio), open resuelve el tenant por
+ * selección in-app: el usuario elige entre sus gyms y esa key viaja como X-Tenant.
+ * gyms: [{ key, name, status, contexts }]
+ */
+export const useGymStore = defineStore('gym', {
+  state: () => ({ activeKey: null, gyms: [] }),
+
+  getters: {
+    active: (s) => s.gyms.find((g) => g.key === s.activeKey) || null,
+    hasMultiple: (s) => s.gyms.length > 1,
+  },
+
+  actions: {
+    setGyms(gyms) { this.gyms = gyms || [] },
+    setActive(key) { this.activeKey = key },
+    reset() { this.activeKey = null; this.gyms = [] },
+  },
+
+  persist: {
+    // Solo la key activa sobrevive el refresh; la lista se recarga del backend
+    pick: ['activeKey'],
+  },
+})

package/stores/notifications.js

@@ -18,6 +18,7 @@ export const useNotificationsStore = defineStore('notifications', {
       const now = new Date().toISOString()
       this.notifications.forEach(n => { if (!n.read_at) n.read_at = now })
     },
+    remove(id) { this.notifications = this.notifications.filter(n => n.id !== id) },
     clear() { this.notifications = [] },
   },
   persist: false,