@innertia-solutions/innertia-nuxt 0.1.51 → 0.1.54

package/components/Files/ProviderConnectButton.vue

@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  provider: { type: String, default: 'google_drive' },
+  label: { type: String, default: 'Google Drive' },
+})
+
+const { status, connect, disconnect } = useProviderConnection(props.provider)
+const { data, isLoading } = status()
+
+const connected = computed(() => data.value?.connected ?? data.value?.data?.connected ?? false)
+const email = computed(() => data.value?.email ?? data.value?.data?.email ?? null)
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-2">
+    <template v-if="connected">
+      <span class="text-sm text-muted-foreground">{{ label }}: <span class="text-foreground font-medium">{{ email }}</span></span>
+      <AppButton text="Desconectar" severity="secondary" size="sm" @click="disconnect" />
+    </template>
+    <AppButton v-else text="Conectar Google Drive" severity="primary" size="sm" :loading="isLoading" @click="connect" />
+  </div>
+</template>

package/components/Observability/Database.vue

@@ -0,0 +1,59 @@
+<script setup>
+const api = useApi()
+
+const { data, pending, error } = await useAsyncData(
+  'observability-database',
+  () => api.get('platform/observability/database'),
+)
+
+function fmtBytes(bytes) {
+  if (bytes == null) return '—'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let n = Number(bytes), i = 0
+  while (n >= 1024 && i < units.length - 1) { n /= 1024; i++ }
+  return `${n.toFixed(1)} ${units[i]}`
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="pending" class="text-sm text-muted-foreground">Cargando…</div>
+    <div v-else-if="error" class="text-sm text-red-500">No se pudo cargar la capacidad de la BD.</div>
+    <div v-else class="space-y-6">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div class="rounded-card border border-border p-4">
+          <p class="text-xs text-muted-foreground">Tamaño de la BD</p>
+          <p class="mt-1 text-lg font-bold text-foreground">{{ fmtBytes(data.capacity?.database_bytes) }}</p>
+        </div>
+        <div class="rounded-card border border-border p-4">
+          <p class="text-xs text-muted-foreground">Conexiones</p>
+          <p class="mt-1 text-lg font-bold text-foreground">
+            {{ data.capacity?.connections?.used ?? '—' }} / {{ data.capacity?.connections?.max ?? '—' }}
+          </p>
+        </div>
+        <div class="rounded-card border border-border p-4">
+          <p class="text-xs text-muted-foreground">Disco usado</p>
+          <p class="mt-1 text-lg font-bold text-foreground">{{ data.disk?.percent != null ? data.disk.percent + '%' : '—' }}</p>
+        </div>
+      </div>
+
+      <div>
+        <h2 class="mb-2 text-sm font-semibold text-foreground">Tablas más grandes</h2>
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-left text-muted-foreground">
+              <th class="py-1">Tabla</th><th class="py-1">Tamaño</th><th class="py-1">Filas</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="t in data.capacity?.tables ?? []" :key="t.name" class="border-t border-border">
+              <td class="py-1">{{ t.name }}</td>
+              <td class="py-1">{{ fmtBytes(t.bytes) }}</td>
+              <td class="py-1">{{ Number(t.rows).toLocaleString('es-CL') }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Observability/Errors.vue

@@ -0,0 +1,44 @@
+<script setup>
+const api = useApi()
+const toast = useToast()
+const reloadKey = ref(0)
+
+const columns = [
+  { key: 'last_seen',       label: 'Última vez', sortable: true },
+  { key: 'title',           label: 'Error' },
+  { key: 'exception_class', label: 'Clase' },
+  { key: 'times_seen',      label: 'Veces' },
+  { key: 'status',          label: 'Estado' },
+  { key: 'actions',         label: '' },
+]
+
+const statusLabels = { open: 'Abierto', resolved: 'Resuelto', ignored: 'Ignorado' }
+
+async function setStatus(row, status) {
+  try {
+    await api.post(`platform/observability/errors/${row.id}/status`, { status })
+    toast.success('Estado actualizado.')
+    reloadKey.value++
+  } catch (e) {
+    toast.error(e?.data?.message ?? 'No se pudo cambiar el estado.')
+  }
+}
+</script>
+
+<template>
+  <Table.Standard
+    :key="reloadKey"
+    name="observability-errors"
+    endpoint="platform/observability/errors"
+    :columns="columns"
+    search-placeholder="Buscar error…"
+  >
+    <template #status="{ value }">{{ statusLabels[value] ?? value }}</template>
+    <template #actions="{ row }">
+      <div class="flex gap-2">
+        <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'resolved')">Resolver</button>
+        <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'ignored')">Ignorar</button>
+      </div>
+    </template>
+  </Table.Standard>
+</template>

package/components/Observability/Logs.vue

@@ -0,0 +1,28 @@
+<script setup>
+const props = defineProps({
+  channel: { type: String, default: 'operational' },
+})
+
+const endpoint = computed(() => `platform/observability/logs?channel=${props.channel}`)
+
+const columns = [
+  { key: 'occurred_at', label: 'Fecha', sortable: true },
+  { key: 'level',       label: 'Nivel' },
+  { key: 'message',     label: 'Mensaje' },
+]
+
+const levelOf   = (row) => row?.payload?.level ?? '—'
+const messageOf = (row) => row?.payload?.message ?? '—'
+</script>
+
+<template>
+  <Table.Standard
+    :name="`observability-logs-${channel}`"
+    :endpoint="endpoint"
+    :columns="columns"
+    search-placeholder="Buscar en logs…"
+  >
+    <template #level="{ row }">{{ levelOf(row) }}</template>
+    <template #message="{ row }">{{ messageOf(row) }}</template>
+  </Table.Standard>
+</template>

package/composables/useAuth.js

@@ -1,4 +1,4 @@
-// useAuthStore, useApi, useOrganizationStore, useInnertiaMode, useGymSelection, useGymStore auto-imported
+// useAuthStore, useApi, useOrganizationStore, useInnertiaMode, useTenantSelection, useActiveTenantStore auto-imported
 
 export function useAuth() {
   const authStore = useAuthStore()
@@ -21,12 +21,12 @@ export function useAuth() {
     queryClient.clear()
     await fetchMe()
 
-    // En modo 'open' el tenant se resuelve por selección: cargamos los gyms del
+    // En modo 'open' el tenant se resuelve por selección: cargamos los tenants 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 }
+      const { resolveAfterLogin } = useTenantSelection()
+      const tenantDestination = await resolveAfterLogin() // 'onboarding' | 'ready' | 'picker'
+      return { ...(data ?? {}), tenantDestination }
     }
 
     return data
@@ -77,8 +77,8 @@ export function useAuth() {
     queryClient.clear()
     authStore.logout()
     organizationStore.reset()
-    // En open, limpiar también el gym seleccionado
-    if (useInnertiaMode().isOpen()) useGymStore().reset()
+    // En open, limpiar también el tenant seleccionado
+    if (useInnertiaMode().isOpen()) useActiveTenantStore().reset()
     await navigateTo(loginPath)
   }
 

package/composables/useGooglePicker.ts

@@ -0,0 +1,69 @@
+/**
+ * useGooglePicker — carga la Google API JS y abre el Google Picker. Client-only.
+ *
+ * Uso:
+ *   const { openPicker } = useGooglePicker()
+ *   const picked = await openPicker({ apiKey, token, appId, mode: 'file', mimeTypes })
+ *   // picked === { id, name, mimeType, url } o null si se cancela
+ */
+export function useGooglePicker() {
+  let pickerApiLoaded = false
+
+  function loadScript(src: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(`script[src="${src}"]`)) return resolve()
+      const s = document.createElement('script')
+      s.src = src
+      s.onload = () => resolve()
+      s.onerror = reject
+      document.head.appendChild(s)
+    })
+  }
+
+  async function ensureLoaded() {
+    if (pickerApiLoaded) return
+    await loadScript('https://apis.google.com/js/api.js')
+    await new Promise<void>((res) => (window as any).gapi.load('picker', () => res()))
+    pickerApiLoaded = true
+  }
+
+  /**
+   * Abre el Google Picker. opts: { apiKey, token, appId, mode: 'file'|'folder', mimeTypes?: string }
+   * Resuelve con { id, name, mimeType, url } del item elegido, o null si se cancela.
+   */
+  async function openPicker(opts: {
+    apiKey: string
+    token: string
+    appId: string
+    mode: 'file' | 'folder'
+    mimeTypes?: string
+  }) {
+    if (typeof window === 'undefined') return null
+    await ensureLoaded()
+    return new Promise((resolve) => {
+      const google = (window as any).google
+      const view = opts.mode === 'folder'
+        ? new google.picker.DocsView(google.picker.ViewId.FOLDERS).setSelectFolderEnabled(true).setMimeTypes('application/vnd.google-apps.folder')
+        : new google.picker.DocsView(google.picker.ViewId.DOCS)
+      if (opts.mimeTypes && opts.mode !== 'folder') view.setMimeTypes(opts.mimeTypes)
+
+      const picker = new google.picker.PickerBuilder()
+        .setAppId(opts.appId)
+        .setOAuthToken(opts.token)
+        .setDeveloperKey(opts.apiKey)
+        .addView(view)
+        .setCallback((data: any) => {
+          if (data.action === google.picker.Action.PICKED) {
+            const doc = data.docs[0]
+            resolve({ id: doc.id, name: doc.name, mimeType: doc.mimeType, url: doc.url })
+          } else if (data.action === google.picker.Action.CANCEL) {
+            resolve(null)
+          }
+        })
+        .build()
+      picker.setVisible(true)
+    })
+  }
+
+  return { openPicker }
+}

package/composables/useInnertiaMode.ts

@@ -12,7 +12,7 @@ import type { InnertiaMode } from '../app.config'
  *   isApp()     → true si mode === 'app'
  *   isOpen()    → true si mode === 'open'
  *   hasTenant() → true si mode === 'saas' | 'open' (usan multitenancy;
- *                 saas resuelve por subdominio, open por gym seleccionado)
+ *                 saas resuelve por subdominio, open por tenant seleccionado)
  */
 export function useInnertiaMode() {
   const appConfig = useAppConfig()

package/composables/useLoginDestinations.js

@@ -0,0 +1,74 @@
+// useTenantSelection, useActiveTenantStore, useAppConfig auto-imported.
+//
+// Modo 'open' — login personal unificado.
+//
+// Tras autenticar NO conocemos el tenant ni el rol: la fuente de verdad es
+// `auth/my-gyms`, que devuelve tenants:[{key,name,status,contexts}] — un tenant
+// puede otorgar varios contextos (p.ej. backoffice + student = 2 destinos).
+//
+// Expande esos tenants en una lista plana de "destinos" (tenant × contexto) para
+// rutear post-login:
+//   0 destinos -> onboarding
+//   1 destino  -> entrar directo (fija tenant activo + navega a home del contexto)
+//   2+         -> selector
+//
+// Los contextos que participan del login personal se declaran por producto en
+// `appConfig.innertia.personalContexts` (p.ej. ['backoffice','student','coach']).
+// Un contexto con login dedicado (p.ej. kiosco 'attendance') NO debe listarse ahí.
+
+export function useLoginDestinations() {
+  const { load } = useTenantSelection()
+  const store = useActiveTenantStore()
+  const appConfig = useAppConfig()
+
+  const personalContexts = () => appConfig.innertia?.personalContexts ?? []
+  const contextDefs = () => appConfig.innertia?.contexts ?? {}
+
+  /** Home de un contexto (según app.config), con fallback razonable. */
+  function homeFor(context) {
+    const def = Object.values(contextDefs()).find((c) => c.context === context)
+    return def?.home || `/${context}`
+  }
+
+  /** Label legible de un contexto. */
+  function labelFor(context) {
+    const def = Object.values(contextDefs()).find((c) => c.context === context)
+    return def?.label || context
+  }
+
+  /**
+   * Carga los tenants del usuario y los expande a destinos tenant×contexto.
+   * Devuelve { destinations, tenants }.
+   *   destination = { tenantKey, tenantName, tenantStatus, context, contextLabel, home }
+   */
+  async function resolve() {
+    await load() // rellena store.tenants desde auth/my-gyms
+    const tenants = store.tenants || []
+
+    const destinations = []
+    for (const tenant of tenants) {
+      const ctxs = (tenant.contexts || []).filter((c) => personalContexts().includes(c))
+      for (const context of ctxs) {
+        destinations.push({
+          tenantKey: tenant.key,
+          tenantName: tenant.name || tenant.key,
+          tenantStatus: tenant.status,
+          context,
+          contextLabel: labelFor(context),
+          home: homeFor(context),
+        })
+      }
+    }
+
+    return { destinations, tenants }
+  }
+
+  /** Fija el tenant + contexto activos y navega a la home del contexto elegido. */
+  async function go(destination) {
+    store.setActive(destination.tenantKey)
+    store.setActiveContext(destination.context)
+    await navigateTo(destination.home)
+  }
+
+  return { resolve, go, homeFor, labelFor }
+}

package/composables/useProviderConnection.ts

@@ -0,0 +1,39 @@
+/**
+ * useProviderConnection — estado y flujo OAuth de un proveedor de archivos (ej. Google Drive).
+ *
+ * Consume los endpoints de conexión del backend innertia-laravel:
+ *   - GET    files/providers/{provider}/status                 → { connected, email }
+ *   - GET    files/providers/{provider}/connect?scope=user     → 302 al consent de Google (popup)
+ *   - DELETE files/providers/{provider}/connection?scope=user  → { connected: false }
+ *
+ * El popup del consent se cierra solo (el callback devuelve <script>window.close()</script>);
+ * al detectar el cierre invalidamos el status para reflejar la conexión.
+ *
+ * useApi / useQueryClient / useQuery / useRuntimeConfig se auto-importan en la capa.
+ */
+export function useProviderConnection(provider = 'google_drive') {
+  const api = useApi()
+  const queryClient = useQueryClient()
+
+  const status = () => useQuery({
+    queryKey: ['provider', provider, 'status'],
+    queryFn: () => api.get(`files/providers/${provider}/status`),
+  })
+
+  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['provider', provider, 'status'] })
+
+  const connect = () => {
+    if (typeof window === 'undefined') return
+    const cfg  = useRuntimeConfig()
+    const base = (cfg.public.apiBaseUrl || '/api').replace(/\/$/, '')
+    const popup = window.open(`${base}/files/providers/${provider}/connect?scope=user`, 'provider-connect', 'width=520,height=680')
+    // cuando el popup se cierra (callback hizo window.close), refrescamos el estado
+    const timer = setInterval(() => {
+      if (!popup || popup.closed) { clearInterval(timer); invalidate() }
+    }, 800)
+  }
+
+  const disconnect = () => api.delete(`files/providers/${provider}/connection?scope=user`).then(invalidate)
+
+  return { status, connect, disconnect, invalidate }
+}

package/composables/useTenantSelection.ts

@@ -0,0 +1,35 @@
+// useApi, useActiveTenantStore auto-imported.
+// Selección de tenant en modo 'open': carga los tenants del usuario y resuelve
+// el destino post-login según cuántos tenga (0 / 1 / 2+).
+
+export function useTenantSelection() {
+  const api = useApi()
+  const store = useActiveTenantStore()
+
+  /** Carga los tenants del usuario autenticado y los guarda en el store. */
+  async function load() {
+    // El backend aún expone la ruta gym-flavored: { gyms: [{ key, name, status, contexts }] }
+    const data = await api.get('auth/my-gyms')
+    store.setTenants(data?.gyms || [])
+    return store.tenants
+  }
+
+  /**
+   * Resuelve a dónde llevar al usuario tras el login.
+   *   'onboarding' -> 0 tenants (debe crear/unirse a uno)
+   *   'ready'      -> 1 tenant (auto-seleccionado) o ya tenia uno activo valido
+   *   'picker'     -> 2+ tenants sin seleccion valida previa
+   */
+  async function resolveAfterLogin() {
+    await load()
+    if (store.tenants.length === 0) return 'onboarding'
+    if (store.tenants.length === 1) { store.setActive(store.tenants[0].key); return 'ready' }
+    if (store.activeKey && store.tenants.some((t) => t.key === store.activeKey)) return 'ready'
+    return 'picker'
+  }
+
+  /** Cambia el tenant activo (switcher). */
+  function switchTo(key) { store.setActive(key) }
+
+  return { load, resolveAfterLogin, switchTo }
+}

package/package.json

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

package/plugins/api-tenant.client.ts

@@ -2,9 +2,9 @@
 // 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).
+//   - open: key del tenant seleccionado in-app (activeTenant.activeKey).
 // useRequestInterceptors auto-imported desde nuxt-core.
-// useTenantStore / useGymStore auto-imported desde stores.
+// useTenantStore / useActiveTenantStore auto-imported desde stores.
 // Activo en mode === 'saas' | 'open'.
 export default defineNuxtPlugin(() => {
   const { isOpen, hasTenant } = useInnertiaMode()
@@ -15,10 +15,10 @@ export default defineNuxtPlugin(() => {
   const { add } = useRequestInterceptors()
 
   add((headers: Record<string, string>) => {
-    // open: tenant por gym seleccionado
+    // open: tenant por selección in-app
     if (isOpen()) {
-      const gymStore = useGymStore()
-      if (gymStore.activeKey) headers['X-Tenant'] = gymStore.activeKey
+      const activeTenant = useActiveTenantStore()
+      if (activeTenant.activeKey) headers['X-Tenant'] = activeTenant.activeKey
       return
     }
 

package/stores/active-tenant.js

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+
+/**
+ * Tenant 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 tenants y esa key viaja como X-Tenant.
+ * tenants: [{ key, name, status, contexts }]
+ */
+export const useActiveTenantStore = defineStore('activeTenant', {
+  state: () => ({ activeKey: null, activeContext: null, tenants: [] }),
+
+  getters: {
+    active: (s) => s.tenants.find((t) => t.key === s.activeKey) || null,
+    hasMultiple: (s) => s.tenants.length > 1,
+  },
+
+  actions: {
+    setTenants(tenants) { this.tenants = tenants || [] },
+    setActive(key) { this.activeKey = key },
+    setActiveContext(context) { this.activeContext = context },
+    reset() { this.activeKey = null; this.activeContext = null; this.tenants = [] },
+  },
+
+  persist: {
+    pick: ['activeKey', 'activeContext'],
+  },
+})

package/composables/useGymSelection.ts

@@ -1,35 +0,0 @@
-// 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/stores/gym.js

@@ -1,29 +0,0 @@
-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, activeContext: 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 },
-    // Contexto elegido (backoffice/student/…) — un gym puede otorgar varios.
-    setActiveContext(context) { this.activeContext = context },
-    reset() { this.activeKey = null; this.activeContext = null; this.gyms = [] },
-  },
-
-  persist: {
-    // Key + contexto activos sobreviven el refresh; la lista se recarga del backend.
-    pick: ['activeKey', 'activeContext'],
-  },
-})