@innertia-solutions/innertia-nuxt 0.1.1

package/composables/useAuth.js

@@ -0,0 +1,82 @@
+// useAuthStore, useApi auto-imported
+
+export function useAuth() {
+  const authStore = useAuthStore()
+  const api = useApi()
+  const config = useRuntimeConfig()
+  const loginPath = config.public.loginPath || '/login'
+  const queryClient = useQueryClient()
+
+  /**
+   * Standard login (email + password).
+   * context: role/area slug used in the API path (e.g. 'admin', 'technician').
+   */
+  async function performLogin(context, email, password, remember = false) {
+    authStore.rememberUser = remember
+    const data = await api.post(`${context}/auth/login`, { email, password, app: context })
+    authStore.saveToken(data.token ?? data.access_token)
+    authStore.setCurrentContext(context)
+    queryClient.clear()
+    await fetchMe()
+    return data
+  }
+
+  /**
+   * Load current user, permissions, and available contexts from the API.
+   * Called after login and after context switch.
+   */
+  async function fetchMe() {
+    const data = await api.get('auth/me')
+    if (!data) return null
+    authStore.saveUser(data.user ?? data)
+    authStore.savePermissions(data.permissions ?? [])
+    authStore.availableContexts = data.availableContexts ?? []
+    applyAppearance(data.preferences?.appearance)
+    return data
+  }
+
+  function applyAppearance(appearance) {
+    if (!appearance || !import.meta.client) return
+    const dark = appearance === 'dark'
+    document.documentElement.classList.toggle('dark', dark)
+    localStorage.setItem('hs_theme', appearance)
+    document.cookie = `hs_theme=${appearance};path=/;max-age=${60 * 60 * 24 * 365};SameSite=Lax`
+  }
+
+  /**
+   * Logout: best-effort POST to backend, then clear local state and redirect.
+   */
+  async function logout() {
+    try {
+      await api.post('auth/logout', {})
+    } catch {
+      // best-effort — ignore network failures
+    }
+    queryClient.clear()
+    authStore.logout()
+    await navigateTo(loginPath)
+  }
+
+  /**
+   * Get the OAuth redirect URL for a provider.
+   * Returns the URL string from the backend.
+   */
+  async function getOauthRedirectUrl(context, provider) {
+    const data = await api.get(`${context}/auth/oauth/${provider}/redirect`)
+    return data.url
+  }
+
+  /**
+   * Handle OAuth callback. Same success path as performLogin.
+   */
+  async function handleOauthCallback(context, provider, code) {
+    const data = await api.post(`${context}/auth/oauth/${provider}/callback`, { code })
+    authStore.saveToken(data.token ?? data.access_token)
+    authStore.setCurrentContext(context)
+    queryClient.clear()
+    await fetchMe()
+    return data
+  }
+
+  return { performLogin, fetchMe, logout, getOauthRedirectUrl, handleOauthCallback }
+}

package/composables/useContext.js

@@ -0,0 +1,44 @@
+// useAuthStore, useApi, useAuth auto-imported
+import { computed } from 'vue'
+
+export function useContext() {
+  const authStore = useAuthStore()
+  const api = useApi()
+  const { fetchMe } = useAuth()
+
+  const currentContext = computed(() => authStore.currentContext)
+  const availableContexts = computed(() => authStore.availableContexts)
+
+  /**
+   * Check whether user has permission to switch to targetContext.
+   * Returns:
+   *   { success: false, reason: 'no_permission' }  — user cannot switch
+   *   { success: true, requiresConfirmation: true } — show confirmation UI
+   */
+  async function switchContext(targetContext) {
+    const data = await api.get(`auth/context/${targetContext}/check`)
+    if (!data.hasAccess) {
+      return { success: false, reason: 'no_permission' }
+    }
+    return { success: true, requiresConfirmation: true }
+  }
+
+  /**
+   * Execute the context switch after user confirmation.
+   * Updates store and reloads permissions via fetchMe.
+   */
+  async function confirmSwitch(targetContext) {
+    authStore.setCurrentContext(targetContext)
+    await fetchMe()
+    return { success: true }
+  }
+
+  /**
+   * Quick synchronous check — is this context in the available list?
+   */
+  function hasAccessToContext(context) {
+    return authStore.availableContexts.includes(context)
+  }
+
+  return { currentContext, availableContexts, switchContext, confirmSwitch, hasAccessToContext }
+}

package/composables/useDate.js

@@ -0,0 +1,241 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+// Store global para el tiempo actual (compartido entre todas las instancias)
+const globalTimeStore = (() => {
+  const currentTime = ref(Date.now());
+  let intervalId = null;
+  let subscriberCount = 0;
+
+  const startGlobalTimer = () => {
+    if (!intervalId) {
+      intervalId = setInterval(() => {
+        currentTime.value = Date.now();
+      }, 5000); // Actualiza cada 5 segundos
+    }
+  };
+
+  const stopGlobalTimer = () => {
+    if (intervalId) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  };
+
+  const subscribe = () => {
+    subscriberCount++;
+    if (subscriberCount === 1) {
+      startGlobalTimer();
+    }
+  };
+
+  const unsubscribe = () => {
+    subscriberCount--;
+    if (subscriberCount === 0) {
+      stopGlobalTimer();
+    }
+  };
+
+  return {
+    currentTime,
+    subscribe,
+    unsubscribe,
+  };
+})();
+
+/**
+ * Composable para manejo de fechas y tiempos relativos
+ */
+export const useDate = () => {
+  // Zona horaria: configurable via runtimeConfig.public.timeZone, fallback Santiago
+  const config = useRuntimeConfig()
+  const tenantTimeZone = config.public?.timeZone || 'America/Santiago';
+
+  // Suscribirse al timer global cuando se monta el componente
+  onMounted(() => {
+    globalTimeStore.subscribe();
+  });
+
+  onUnmounted(() => {
+    globalTimeStore.unsubscribe();
+  });
+
+  /**
+   * Como la DB de Laravel suele enviar fechas "YYYY-MM-DD HH:mm:ss" sin zona horaria,
+   * y siempre están en UTC, forzamos la lectura como UTC si no viene indicada.
+   */
+  const parseAsUTC = (input) => {
+    if (!input) return new Date("");
+    if (input instanceof Date) return input;
+
+    let dateStr = String(input);
+    if (!dateStr.includes('T') && dateStr.includes(' ')) {
+      dateStr = dateStr.replace(' ', 'T');
+    }
+    // Si no termina en Z, ni tiene offset tipo +00:00, agregar Z
+    if (!/(Z|[+-]\d{2}(:\d{2})?)$/.test(dateStr)) {
+      dateStr += 'Z';
+    }
+    return new Date(dateStr);
+  };
+
+  /**
+   * Obtiene la fecha formato YYYY-MM-DD según la zona horaria para comparaciones justas
+   */
+  const getTimeZoneDateString = (date) => {
+    if (isNaN(date.getTime())) return "";
+    const formatter = new Intl.DateTimeFormat('en-CA', {
+      timeZone: tenantTimeZone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    });
+    return formatter.format(date);
+  };
+
+  /**
+   * Devuelve "hace X minutos/horas/días" en español.
+   */
+  const relativeTime = (input, watch = false) => {
+    if (watch) {
+      globalTimeStore.currentTime.value;
+    }
+
+    if (!input) return "";
+
+    const then = parseAsUTC(input);
+    if (isNaN(then.getTime())) return "";
+
+    const now = new Date();
+    const diffMs = now - then;
+    const diffMin = Math.floor(diffMs / 60000);
+
+    if (diffMin < 1) return "hace unos segundos";
+    if (diffMin < 60) return `hace ${diffMin} ${diffMin === 1 ? "minuto" : "minutos"}`;
+
+    const diffHrs = Math.floor(diffMin / 60);
+    if (diffHrs < 24) return `hace ${diffHrs} ${diffHrs === 1 ? "hora" : "horas"}`;
+
+    const diffDays = Math.floor(diffHrs / 24);
+    if (diffDays < 30) return `hace ${diffDays} ${diffDays === 1 ? "día" : "días"}`;
+
+    const diffMonths = Math.floor(diffDays / 30);
+    if (diffMonths < 12) return `hace ${diffMonths} ${diffMonths === 1 ? "mes" : "meses"}`;
+
+    const diffYears = Math.floor(diffMonths / 12);
+    return `hace ${diffYears} ${diffYears === 1 ? "año" : "años"}`;
+  };
+
+  /**
+   * Formatea la fecha para mostrar asegurando parseo UTC y formateo Santiago.
+   */
+  const formatDate = (input, options = {}) => {
+    if (!input) return "";
+
+    const d = parseAsUTC(input);
+    if (isNaN(d.getTime())) return input;
+
+    const formatter = new Intl.DateTimeFormat('es-CL', {
+      timeZone: tenantTimeZone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+
+    const parts = formatter.formatToParts(d);
+    let day, month, year, hours, minutes;
+
+    for (const part of parts) {
+      if (part.type === 'day') day = part.value;
+      if (part.type === 'month') month = part.value;
+      if (part.type === 'year') year = part.value;
+      if (part.type === 'hour') hours = part.value;
+      if (part.type === 'minute') minutes = part.value;
+    }
+
+    if (hours === '24') hours = '00';
+
+    if (options.onlyDate) return `${day} / ${month} / ${year}`;
+    if (options.onlyTime) return `${hours}:${minutes}`;
+
+    return `${day} / ${month} / ${year} ${hours}:${minutes}`;
+  };
+
+  const formatDateOnly = (input) => formatDate(input, { onlyDate: true });
+  const formatTimeOnly = (input) => formatDate(input, { onlyTime: true });
+
+  const isToday = (input) => {
+    if (!input) return false;
+    const date = parseAsUTC(input);
+    return getTimeZoneDateString(new Date()) === getTimeZoneDateString(date);
+  };
+
+  const isYesterday = (input) => {
+    if (!input) return false;
+    const date = parseAsUTC(input);
+    const yesterday = new Date(Date.now() - 86400000);
+    return getTimeZoneDateString(yesterday) === getTimeZoneDateString(date);
+  };
+
+  const formatSmart = (input) => {
+    if (!input) return "";
+
+    if (isToday(input)) {
+      return `Hoy a las ${formatTimeOnly(input)}`;
+    }
+
+    if (isYesterday(input)) {
+      return `Ayer a las ${formatTimeOnly(input)}`;
+    }
+
+    return formatDate(input);
+  };
+
+  const getDayName = (input) => {
+    if (!input) return "";
+    const date = parseAsUTC(input);
+    if (isNaN(date.getTime())) return "";
+    return new Intl.DateTimeFormat('es-ES', { timeZone: tenantTimeZone, weekday: 'long' }).format(date);
+  };
+
+  const getMonthName = (input) => {
+    if (!input) return "";
+    const date = parseAsUTC(input);
+    if (isNaN(date.getTime())) return "";
+    return new Intl.DateTimeFormat('es-ES', { timeZone: tenantTimeZone, month: 'long' }).format(date);
+  };
+
+  const daysDiff = (date1, date2 = new Date()) => {
+    const d1 = parseAsUTC(date1);
+    const d2 = typeof date2 === 'string' ? parseAsUTC(date2) : new Date(date2);
+    const diffTime = Math.abs(d2 - d1);
+    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  };
+
+  const isFuture = (input) => {
+    if (!input) return false;
+    return parseAsUTC(input) > new Date();
+  };
+
+  const isPast = (input) => {
+    if (!input) return false;
+    return parseAsUTC(input) < new Date();
+  };
+
+  return {
+    relativeTime,
+    formatDate,
+    formatDateOnly,
+    formatTimeOnly,
+    formatSmart,
+    isToday,
+    isYesterday,
+    getDayName,
+    getMonthName,
+    daysDiff,
+    isFuture,
+    isPast,
+  };
+};

package/composables/useDevice.js

@@ -0,0 +1,21 @@
+import { onMounted } from 'vue';
+
+export const useDevice = () => {
+    const getDeviceId = () => {
+        if (process.server) return null;
+        
+        let deviceId = localStorage.getItem('app_device_id');
+        
+        if (!deviceId) {
+            // Generate a random UUID-like string
+            deviceId = 'dev_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+            localStorage.setItem('app_device_id', deviceId);
+        }
+        
+        return deviceId;
+    };
+
+    return {
+        getDeviceId
+    };
+};

package/composables/useDockedPreviews.js

@@ -0,0 +1,56 @@
+/**
+ * Composable para manejar los previews minimizados.
+ *
+ * - `docked` / `dock` / `undock` / `isActive` → Pinia store (persiste en localStorage, sync entre tabs)
+ * - `activeDockId` / `activeDockRect` / expand / collapse → estado de UI efímero (no persistido)
+ */
+export function useDockedPreviews() {
+  const store = useDockedPreviewsStore()
+
+  // ─── UI state (no persiste) ───────────────────────────────────────────────────
+  const activeDockId     = useState('docked-active-id',   () => null)
+  const activeDockRect   = useState('docked-active-rect',  () => null)
+
+  // ─── Acceso reactivo a los items persistidos ──────────────────────────────────
+  const docked = computed(() => store.items)
+
+  // ─── Dock / undock ────────────────────────────────────────────────────────────
+  const dock = (payload) => store.add(payload)
+
+  const undock = (id) => {
+    store.remove(id)
+    if (activeDockId.value === id) {
+      activeDockId.value   = null
+      activeDockRect.value = null
+    }
+  }
+
+  const isActive = (id) => !!store.items.find(d => d.id === id)
+
+  // ─── Panel flotante ───────────────────────────────────────────────────────────
+  const expandDock = (id, rect = null) => {
+    if (activeDockId.value === id) {
+      activeDockId.value   = null
+      activeDockRect.value = null
+    } else {
+      activeDockId.value   = id
+      activeDockRect.value = rect ? { left: rect.left, width: rect.width } : null
+    }
+  }
+
+  const collapseDock = () => {
+    activeDockId.value   = null
+    activeDockRect.value = null
+  }
+
+  return {
+    docked,
+    activeDockId,
+    activeDockRect,
+    dock,
+    undock,
+    isActive,
+    expandDock,
+    collapseDock,
+  }
+}

package/composables/useDownload.js

@@ -0,0 +1,87 @@
+/**
+ * Descarga un archivo usando XHR con soporte de progreso.
+ * Los headers de autenticación se inyectan automáticamente vía useRequestInterceptors.
+ */
+// useRequestInterceptors is auto-imported from nuxt-core composables
+export function useDownload() {
+  const config = useRuntimeConfig()
+  const baseUrl = config.public.apiBaseUrl
+
+  /**
+   * @param {string} url - ruta relativa al baseUrl
+   * @param {object} params - query params (GET) o body (POST)
+   * @param {object} options - { onProgress, method, headers }
+   *   `headers` es mezclado DESPUÉS de que corran los interceptores (el caller puede sobreescribir)
+   * @returns {Promise<{ blob: Blob, headers: object }>}
+   */
+  function serializeParams(obj, prefix = '') {
+    const parts = []
+    for (const [key, val] of Object.entries(obj)) {
+      if (val === null || val === undefined) continue
+      const fullKey = prefix ? `${prefix}[${key}]` : key
+      if (Array.isArray(val)) {
+        val.forEach((item, i) => {
+          if (item !== null && typeof item === 'object') {
+            parts.push(serializeParams(item, `${fullKey}[${i}]`))
+          } else {
+            parts.push(`${encodeURIComponent(`${fullKey}[${i}]`)}=${encodeURIComponent(item)}`)
+          }
+        })
+      } else if (typeof val === 'object') {
+        parts.push(serializeParams(val, fullKey))
+      } else {
+        parts.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(val)}`)
+      }
+    }
+    return parts.filter(Boolean).join('&')
+  }
+
+  function download(url, params = {}, options = {}) {
+    const {
+      onProgress = null,
+      method = 'GET',
+      headers: extraHeaders = {},
+    } = options
+
+    // Run all interceptors (auth token, X-Tenant-Id, etc.)
+    const { run } = useRequestInterceptors()
+    const headers = {}
+    run(headers, options)
+    // Merge caller-supplied headers last (allow override)
+    Object.assign(headers, extraHeaders)
+
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      let query = ''
+      if (method === 'GET' && Object.keys(params).length) {
+        const qs = serializeParams(params)
+        if (qs) query = '?' + qs
+      }
+      const cleanUrl = url.startsWith('/') ? url.slice(1) : url
+      xhr.open(method, `${baseUrl}/${cleanUrl}${query}`)
+      Object.entries(headers).forEach(([k, v]) => xhr.setRequestHeader(k, v))
+      xhr.responseType = 'blob'
+      xhr.onload = function () {
+        const responseHeaders = {}
+        xhr.getAllResponseHeaders().split('\r\n').forEach(line => {
+          const [key, value] = line.split(': ')
+          if (key) responseHeaders[key.toLowerCase()] = value
+        })
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve({ blob: xhr.response, headers: responseHeaders })
+        } else {
+          reject(new Error(`Download failed: ${xhr.status}`))
+        }
+      }
+      xhr.onerror = () => reject(new Error('Network error'))
+      xhr.onprogress = (event) => {
+        if (onProgress && event.lengthComputable) {
+          onProgress(Math.round((event.loaded / event.total) * 100), event)
+        }
+      }
+      xhr.send(method === 'GET' ? null : JSON.stringify(params))
+    })
+  }
+
+  return { download }
+}

package/composables/useEntity.js

@@ -0,0 +1,82 @@
+/**
+ * PLANTILLA BASE — copiar y renombrar para cada nueva entidad.
+ *
+ * Convención de uso en componentes (siempre en setup(), no en callbacks):
+ *
+ *   const { list, detail, create, update, remove } = useEntity()
+ *
+ *   // Query reactiva — re-fetcha automáticamente cuando cambian los params
+ *   const { data, isLoading } = list(filters)
+ *
+ *   // Detail con id reactivo
+ *   const { data: entity } = detail(route.params.id)
+ *
+ *   // Mutaciones
+ *   const { mutate: createEntity, isPending } = create()
+ *   const { mutate: updateEntity } = update()
+ *   const { mutate: deleteEntity } = remove()
+ *
+ *   // Ejecutar mutación
+ *   createEntity({ name: 'Nuevo' })
+ *   updateEntity({ id: '123', name: 'Editado' })
+ *   deleteEntity('123')
+ *
+ * Capas:
+ *   useEntity   →  qué datos, cuándo, cómo se invalidan
+ *   useApi      →  cómo viaja la petición HTTP (headers, auth, tenant)
+ *   QueryClient →  cache compartido entre componentes
+ */
+
+// ── Rename: useEntity → use{Entity}, 'entities' → '{entity}s' ───────────────
+
+export function useEntity() {
+  const api = useApi()
+  const queryClient = useQueryClient()
+
+  // ─── Queries ──────────────────────────────────────────────────────────────
+
+  const list = (params = {}) => useQuery({
+    queryKey: computed(() => ['entities', toValue(params)]),
+    queryFn: () => api.post('backoffice/entities', toValue(params)),
+  })
+
+  const detail = (id) => useQuery({
+    queryKey: computed(() => ['entities', toValue(id)]),
+    queryFn: () => api.get(`backoffice/entities/${toValue(id)}`),
+    enabled: computed(() => !!toValue(id)),
+  })
+
+  // ─── Mutations ────────────────────────────────────────────────────────────
+
+  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['entities'] })
+
+  const create = () => useMutation({
+    mutationFn: (data) => api.post('backoffice/entities', data),
+    onSuccess: invalidate,
+  })
+
+  const update = () => useMutation({
+    mutationFn: ({ id, ...data }) => api.put(`backoffice/entities/${id}`, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ['entities', id] })
+      invalidate()
+    },
+  })
+
+  const remove = () => useMutation({
+    mutationFn: (id) => api.delete(`backoffice/entities/${id}`),
+    onSuccess: invalidate,
+  })
+
+  // Agregar acciones adicionales siguiendo el mismo patrón:
+  //
+  // const activate = () => useMutation({
+  //   mutationFn: (id) => api.post(`backoffice/entities/${id}/activate`),
+  //   onSuccess: invalidate,
+  // })
+
+  return {
+    list, detail,
+    create, update, remove,
+  }
+}