@innertia-solutions/innertia-nuxt 0.1.5 → 0.1.6

package/app.config.ts

@@ -101,6 +101,25 @@ export default defineAppConfig({
      */
     menuApps: [] as MenuItem[],
 
+    /**
+     * Soporte de organizaciones (sub-tenant scoping).
+     * Debe matchear con `innertia.organizations.enabled` del backend.
+     *
+     * Cuando está activo:
+     *   - El interceptor agrega `X-Organization: <slug>` a cada request
+     *   - Al entrar a un contexto, si el usuario tiene 2+ orgs y no hay elegida → picker
+     *   - Si tiene 1 org → auto-select
+     *   - La elección se persiste por contexto en cookie (30 días)
+     */
+    organizations: {
+      /** Activar feature. Default false. */
+      enabled: false,
+      /** Si true, los productos pueden exponer toggle "vista consolidada" (X-Consolidated header). */
+      allowConsolidated: false,
+      /** Si true, bloquea el contexto cuando el user tiene 0 orgs accesibles. Default false (deja pasar). */
+      required: false,
+    },
+
     /**
      * Declaración de "apps" (contextos) del producto.
      * Cada app define un prefijo de URL que mapea a un contexto del backend

package/components/Organization/Picker.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+/**
+ * Overlay full-screen para elegir organización al entrar a un contexto sin
+ * tener una guardada (o cuando la guardada ya no es accesible).
+ *
+ * Se renderiza desde los layouts (auth, backoffice) cuando `useOrganization().needsPicker`
+ * devuelve `true`. Bloquea el contenido detrás hasta que el user elija.
+ *
+ * Persistencia: al elegir, se guarda en cookie 30d (via store).
+ */
+import { IconBuildingSkyscraper, IconArrowRight } from '@tabler/icons-vue'
+
+const { current: currentApp } = useApp()
+const { available, switchTo } = useOrganization()
+
+const title = computed(() =>
+  currentApp.value
+    ? `Elige una organización para continuar en ${currentApp.value.label}`
+    : 'Elige una organización'
+)
+
+async function pick(slug: string) {
+  await switchTo(slug)
+}
+</script>
+
+<template>
+  <div class="fixed inset-0 z-[100] bg-background/95 backdrop-blur-sm flex items-center justify-center p-6">
+    <div class="w-full max-w-md space-y-6">
+      <div class="text-center space-y-2">
+        <div class="mx-auto size-12 rounded-2xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
+          <IconBuildingSkyscraper class="size-6 text-primary dark:text-primary-300" />
+        </div>
+        <h1 class="text-xl font-bold text-foreground">{{ title }}</h1>
+        <p class="text-sm text-muted-foreground">
+          Selecciona la organización con la que quieres trabajar. Podrás cambiarla más adelante.
+        </p>
+      </div>
+
+      <div class="space-y-2">
+        <button
+          v-for="org in available"
+          :key="org.key"
+          type="button"
+          @click="pick(org.key)"
+          class="group w-full flex items-center gap-3 rounded-xl border border-card-line bg-card px-4 py-3.5 text-left hover:border-primary/40 hover:bg-primary-50/40 dark:hover:bg-primary-900/10 transition-colors"
+        >
+          <div class="size-10 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center shrink-0">
+            <IconBuildingSkyscraper class="size-5 text-primary dark:text-primary-300" />
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-semibold text-foreground truncate">{{ org.name }}</div>
+            <div class="text-xs text-muted-foreground truncate">{{ org.key }}</div>
+          </div>
+          <IconArrowRight class="size-4 text-muted-foreground group-hover:text-primary transition-colors shrink-0" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Organization/Switcher.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * Dropdown para cambiar entre organizaciones desde dentro de un contexto.
+ *
+ * - Oculto si el feature está desactivado o el user solo tiene 1 org.
+ * - Muestra org actual + lista de accesibles.
+ * - Si `allowConsolidated`, agrega toggle "Vista consolidada" al final.
+ *
+ * Pensado para insertar en el topbar del layout backoffice (slot `topbar-actions`).
+ */
+import { IconBuildingSkyscraper, IconCheck, IconChevronDown, IconLayoutGrid } from '@tabler/icons-vue'
+
+const {
+  isEnabled,
+  allowConsolidated,
+  available,
+  current,
+  consolidated,
+  switchTo,
+} = useOrganization()
+
+const visible = computed(() => isEnabled.value && available.value.length > 1)
+</script>
+
+<template>
+  <div v-if="visible" class="hs-dropdown [--placement:bottom-right] relative inline-flex">
+    <button
+      type="button"
+      class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-foreground-inverse hover:bg-plain/10 focus:outline-hidden text-sm"
+      aria-haspopup="menu"
+    >
+      <IconBuildingSkyscraper class="size-4 shrink-0" />
+      <span class="hidden md:inline truncate max-w-32">{{ current?.name ?? 'Sin organización' }}</span>
+      <IconChevronDown class="size-3.5 shrink-0 opacity-60" />
+    </button>
+
+    <div
+      class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-64 transition-[opacity,margin] opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl"
+      role="menu"
+    >
+      <div class="p-1 border-b border-dropdown-divider">
+        <div class="py-2 px-3">
+          <p class="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Organización</p>
+        </div>
+        <button
+          v-for="org in available"
+          :key="org.key"
+          type="button"
+          @click="switchTo(org.key)"
+          class="w-full flex items-center gap-x-2.5 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden"
+        >
+          <div class="size-7 rounded-md bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center shrink-0">
+            <IconBuildingSkyscraper class="size-3.5 text-primary dark:text-primary-300" />
+          </div>
+          <div class="flex-1 min-w-0 text-left">
+            <div class="text-sm font-medium truncate">{{ org.name }}</div>
+            <div class="text-[10px] text-muted-foreground truncate">{{ org.key }}</div>
+          </div>
+          <IconCheck v-if="current?.key === org.key" class="size-4 text-primary shrink-0" />
+        </button>
+      </div>
+
+      <div v-if="allowConsolidated" class="p-1">
+        <button
+          type="button"
+          @click="consolidated = !consolidated"
+          class="w-full flex items-center gap-x-2.5 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden"
+        >
+          <IconLayoutGrid class="size-4 shrink-0 text-muted-foreground" />
+          <span class="flex-1 text-left">Vista consolidada</span>
+          <span
+            class="inline-flex items-center h-4 w-7 rounded-full transition-colors"
+            :class="consolidated ? 'bg-primary' : 'bg-muted'"
+          >
+            <span
+              class="inline-block size-3 bg-white rounded-full transition-transform"
+              :class="consolidated ? 'translate-x-3.5' : 'translate-x-0.5'"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/composables/useApiConsolidatedOrganizations.ts

@@ -0,0 +1,35 @@
+/**
+ * Wrapper de useApi que inyecta `X-Consolidated: true` en cada request.
+ *
+ * Úsalo solo en composables/páginas que requieren scope multi-org del backend
+ * (ej. dashboards consolidados, reportes ejecutivos). El usuario debe tener
+ * permisos correspondientes — el backend valida y filtra por `accessibleOrganizationIds()`.
+ *
+ * Uso típico:
+ *   const api = useApiConsolidatedOrganizations()
+ *   const stats = await api.get('reports/all-orgs-summary')
+ *
+ * El header se envía SIEMPRE en las requests hechas con esta instancia,
+ * independiente del toggle global `organizationStore.consolidated`.
+ */
+export function useApiConsolidatedOrganizations() {
+  const api = useApi()
+
+  // Decora cada método para agregar el header X-Consolidated: true
+  const withConsolidated = (options: any = {}) => ({
+    ...options,
+    headers: {
+      ...(options?.headers ?? {}),
+      'X-Consolidated': 'true',
+    },
+  })
+
+  return {
+    get:    (url: string, options: any = {}) => api.get(url, withConsolidated(options)),
+    post:   (url: string, data?: any, options: any = {}) => api.post(url, data, withConsolidated(options)),
+    put:    (url: string, data?: any, options: any = {}) => api.put(url, data, withConsolidated(options)),
+    patch:  (url: string, data?: any, options: any = {}) => api.patch(url, data, withConsolidated(options)),
+    delete: (url: string, options: any = {}) => api.delete(url, withConsolidated(options)),
+    upload: (url: string, data?: any, options: any = {}) => (api as any).upload?.(url, data, withConsolidated(options)),
+  }
+}

package/composables/useAuth.js

@@ -1,7 +1,8 @@
-// useAuthStore, useApi auto-imported
+// useAuthStore, useApi, useOrganizationStore auto-imported
 
 export function useAuth() {
   const authStore = useAuthStore()
+  const organizationStore = useOrganizationStore()
   const api = useApi()
   const config = useRuntimeConfig()
   const loginPath = config.public.loginPath || '/login'
@@ -31,6 +32,17 @@ export function useAuth() {
     authStore.saveUser(data.user ?? data)
     authStore.savePermissions(data.permissions ?? [])
     authStore.availableContexts = data.availableContexts ?? []
+
+    // Hidratar organizaciones accesibles por contexto (si el backend las devuelve).
+    // Shape esperado: { backoffice: [{ id, key, name }], technician: [...] }
+    if (data.organizations) {
+      organizationStore.setAvailable(data.organizations)
+      // Auto-select para contextos donde el user tiene 1 sola org
+      for (const ctx of Object.keys(data.organizations)) {
+        organizationStore.autoSelectFor(ctx)
+      }
+    }
+
     applyAppearance(data.preferences?.appearance)
     return data
   }
@@ -54,6 +66,7 @@ export function useAuth() {
     }
     queryClient.clear()
     authStore.logout()
+    organizationStore.reset()
     await navigateTo(loginPath)
   }
 

package/composables/useOrganization.ts

@@ -0,0 +1,94 @@
+/**
+ * Composable de organizaciones (sub-tenant scoping).
+ *
+ * Lee el contexto actual del usuario (via useApp) y expone su org activa + lista
+ * de accesibles para ese contexto. Cambiar de contexto rota la org automáticamente.
+ *
+ * Uso típico:
+ *   const { current, available, needsPicker, switchTo } = useOrganization()
+ *
+ *   <OrganizationSwitcher v-if="available.length > 1" />
+ */
+export function useOrganization() {
+  const { current: currentApp } = useApp()
+  const organizationStore = useOrganizationStore()
+  const appConfig = useAppConfig()
+  const { fetchMe } = useAuth()
+
+  const isEnabled = computed(() => !!appConfig.innertia?.organizations?.enabled)
+  const allowConsolidated = computed(() => !!appConfig.innertia?.organizations?.allowConsolidated)
+  const required = computed(() => !!appConfig.innertia?.organizations?.required)
+
+  /** Contexto actual (key) — desde useApp. */
+  const currentContext = computed<string | null>(() => currentApp.value?.context ?? null)
+
+  /** Lista de orgs accesibles para el contexto actual. */
+  const available = computed(() => {
+    if (!currentContext.value) return []
+    return organizationStore.availableFor(currentContext.value)
+  })
+
+  /** Org actual (object completo) para el contexto. */
+  const current = computed(() => {
+    if (!currentContext.value) return null
+    return organizationStore.currentObjectFor(currentContext.value)
+  })
+
+  /** Slug de la org actual (útil para headers, comparaciones). */
+  const currentSlug = computed(() => current.value?.key ?? null)
+
+  /** ¿Hay que mostrar picker? */
+  const needsPicker = computed(() => {
+    if (!isEnabled.value) return false
+    if (!currentContext.value) return false
+    return organizationStore.needsPickerFor(currentContext.value)
+  })
+
+  /** ¿El user tiene 0 orgs en este contexto Y el feature requiere org? */
+  const blocked = computed(() => {
+    if (!isEnabled.value || !required.value) return false
+    if (!currentContext.value) return false
+    return available.value.length === 0
+  })
+
+  /** Toggle vista consolidada (solo si está permitida globalmente). */
+  const consolidated = computed({
+    get: () => allowConsolidated.value && organizationStore.consolidated,
+    set: (v) => organizationStore.setConsolidated(v),
+  })
+
+  /**
+   * Cambia la org actual del contexto. Re-fetcha auth/me para refrescar permisos
+   * scopeados al backend con la nueva org.
+   */
+  async function switchTo(slug: string) {
+    if (!currentContext.value) return
+    organizationStore.setCurrent(currentContext.value, slug)
+    try {
+      await fetchMe()
+    } catch {
+      // best-effort
+    }
+  }
+
+  /** Auto-select de la org si solo hay 1 disponible. Llamar al montar layouts. */
+  function autoSelect() {
+    if (!currentContext.value || !isEnabled.value) return
+    organizationStore.autoSelectFor(currentContext.value)
+  }
+
+  return {
+    isEnabled,
+    allowConsolidated,
+    required,
+    currentContext,
+    available,
+    current,
+    currentSlug,
+    needsPicker,
+    blocked,
+    consolidated,
+    switchTo,
+    autoSelect,
+  }
+}

package/layouts/backoffice.vue

@@ -26,6 +26,10 @@ const { docked } = useDockedPreviews()
 const route = useRoute()
 const appConfig = useAppConfig()
 
+// Organizaciones — picker se muestra si el feature está activo y el user
+// tiene 2+ orgs sin elegir todavía. Bloquea el contenido detrás.
+const { needsPicker: needsOrgPicker } = useOrganization()
+
 const branding = computed(() => appConfig.innertia?.branding ?? { name: 'Innertia' })
 const menuItems = computed<MenuItem[]>(() => (appConfig.innertia?.menu ?? []) as MenuItem[])
 const menuApps  = computed<MenuItem[]>(() => (appConfig.innertia?.menuApps ?? []) as MenuItem[])
@@ -107,6 +111,7 @@ const homeRoute = computed(() => menuItems.value[0]?.route ?? '/')
               <icons.IconMoon v-else class="size-4 shrink-0" />
             </button>
 
+            <OrganizationSwitcher />
             <slot name="topbar-actions" />
 
             <div class="hidden sm:block w-px h-6 bg-navbar-divider/20 mx-1" />
@@ -205,5 +210,8 @@ const homeRoute = computed(() => menuItems.value[0]?.route ?? '/')
 
     <!-- Preview dock (previews minimizados de tablas) -->
     <AppPreviewDock />
+
+    <!-- Organization picker — overlay full-screen cuando aplica -->
+    <OrganizationPicker v-if="needsOrgPicker" />
   </div>
 </template>

package/package.json

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

package/plugins/api-organization.client.ts

@@ -0,0 +1,37 @@
+/**
+ * Registra el interceptor del header X-Organization.
+ *
+ * Se envía cuando:
+ *   - `appConfig.innertia.organizations.enabled === true`
+ *   - El user tiene una org activa para el contexto actual
+ *
+ * También inyecta `X-Consolidated: true` si el store tiene `consolidated === true`
+ * (toggle global, ej. desde un OrganizationSwitcher). Para llamadas one-off
+ * consolidadas en código, usar `useApiConsolidatedOrganizations()` que inyecta
+ * el header por-request sin afectar el toggle global.
+ *
+ * Solo activo cuando `mode === 'saas'` (orgs viven dentro de un tenant).
+ */
+export default defineNuxtPlugin(() => {
+  const { hasTenant } = useInnertiaMode()
+  if (!hasTenant()) return
+
+  const appConfig = useAppConfig()
+  if (!appConfig.innertia?.organizations?.enabled) return
+
+  const { add } = useRequestInterceptors()
+  const organizationStore = useOrganizationStore()
+  const { currentContext } = useOrganization()
+
+  add((headers: Record<string, string>) => {
+    const ctx = currentContext.value
+    if (!ctx) return
+
+    const slug = organizationStore.currentFor(ctx)
+    if (slug) headers['X-Organization'] = slug
+
+    if (organizationStore.consolidated) {
+      headers['X-Consolidated'] = 'true'
+    }
+  })
+})

package/stores/organization.js

@@ -0,0 +1,109 @@
+import { defineStore } from 'pinia'
+
+/**
+ * Store de organizaciones (sub-tenant scoping).
+ *
+ * Model:
+ *   - `available` es un Record<context, Organization[]> — lo que el backend devuelve
+ *     en auth/me. Cada contexto puede tener su propia lista de orgs accesibles.
+ *   - `currentByContext` es Record<context, string> — slug de la org elegida por
+ *     contexto. Persiste en cookie 30d para retomar al volver.
+ *
+ * Org shape: { id, key (slug), name }
+ *
+ * Persistencia:
+ *   - `currentByContext` en cookie 'innertia_org_by_ctx' (30d, SSR-leíble)
+ *   - `available` NO se persiste — viene fresco de auth/me en cada boot
+ */
+export const useOrganizationStore = defineStore('organization', {
+  state: () => ({
+    /** @type {Record<string, Array<{ id: number, key: string, name: string }>>} */
+    available: {},
+    /** @type {Record<string, string>} */
+    currentByContext: {},
+    /** @type {boolean} — toggle global de vista consolidada (X-Consolidated header) */
+    consolidated: false,
+  }),
+
+  persist: [
+    {
+      key: 'innertia_org_by_ctx',
+      pick: ['currentByContext'],
+      storage: piniaPluginPersistedstate.cookies,
+      cookieOptions: { maxAge: 60 * 60 * 24 * 30, sameSite: 'lax' },
+    },
+  ],
+
+  getters: {
+    /** Orgs accesibles para un contexto dado. */
+    availableFor: (state) => (context) => state.available[context] ?? [],
+
+    /** Slug de la org actual para un contexto. */
+    currentFor: (state) => (context) => state.currentByContext[context] ?? null,
+
+    /** Org actual completa (object) para un contexto. */
+    currentObjectFor() {
+      return (context) => {
+        const slug = this.currentFor(context)
+        if (!slug) return null
+        return this.availableFor(context).find(o => o.key === slug) ?? null
+      }
+    },
+
+    /** ¿Necesita mostrar picker para este contexto? */
+    needsPickerFor() {
+      return (context) => {
+        const list = this.availableFor(context)
+        const current = this.currentFor(context)
+        if (list.length === 0) return false   // sin acceso — caso aparte
+        if (list.length === 1) return false   // auto-select, no necesita picker
+        if (current && list.some(o => o.key === current)) return false
+        return true
+      }
+    },
+  },
+
+  actions: {
+    /** Reemplaza la lista de orgs por contexto (típicamente llamado desde fetchMe). */
+    setAvailable(byContext) {
+      this.available = byContext ?? {}
+      // Limpia currentByContext de slugs que ya no son accesibles
+      const cleaned = {}
+      for (const [ctx, slug] of Object.entries(this.currentByContext)) {
+        const list = this.available[ctx] ?? []
+        if (list.some(o => o.key === slug)) cleaned[ctx] = slug
+      }
+      this.currentByContext = cleaned
+    },
+
+    /** Setea la org actual para un contexto. */
+    setCurrent(context, slug) {
+      this.currentByContext = { ...this.currentByContext, [context]: slug }
+    },
+
+    /** Auto-select: si hay 1 sola org en el contexto y no está seteada, la selecciona. */
+    autoSelectFor(context) {
+      const list = this.availableFor(context)
+      const current = this.currentFor(context)
+      if (list.length === 1 && current !== list[0].key) {
+        this.setCurrent(context, list[0].key)
+      }
+    },
+
+    /** Toggle vista consolidada. */
+    toggleConsolidated() {
+      this.consolidated = !this.consolidated
+    },
+
+    setConsolidated(value) {
+      this.consolidated = !!value
+    },
+
+    /** Cleanup en logout. */
+    reset() {
+      this.available = {}
+      this.currentByContext = {}
+      this.consolidated = false
+    },
+  },
+})