@innertia-solutions/ui 0.1.0

package/components/Toast/Alert.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="max-w-xs relative bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-lg p-4 pr-10 flex items-start overflow-hidden"
+    :class="{
+      'border-green-200': toast.severity === 'success',
+      'border-red-200': toast.severity === 'danger',
+      'border-yellow-200': toast.severity === 'warning',
+      'border-blue-200': toast.severity === 'info',
+    }"
+    role="alert"
+  >
+    <div class="mr-3 mt-1">
+      <i v-if="toast.icon" :class="toast.icon + ' text-gray-400 text-xl'" />
+    </div>
+    <div class="flex-1 mt-1">
+      <h3 v-if="toast.title" class="font-semibold text-sm text-gray-800">
+        {{ toast.title }}
+      </h3>
+      <div class="text-sm dark:text-white text-gray-600" v-html="toast.message"></div>
+    </div>
+    <button
+      class="ml-3 text-gray-400 hover:text-gray-700 absolute top-2 right-2"
+      @click="$emit('close')"
+    >
+      <span class="sr-only">Cerrar</span>
+      <svg
+        class="size-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+    
+    <!-- Barra de progreso temporal -->
+    <div 
+      v-if="toast.duration && toast.duration > 0"
+      class="absolute bottom-0 left-0 w-full h-1 bg-gray-200 dark:bg-gray-700"
+    >
+      <div
+        class="h-full bg-gradient-to-r"
+        :class="{
+          'from-green-400 to-green-600': toast.severity === 'success',
+          'from-red-400 to-red-600': toast.severity === 'danger',
+          'from-yellow-400 to-yellow-600': toast.severity === 'warning',
+          'from-blue-400 to-blue-600': toast.severity === 'info',
+        }"
+        :style="{ width: progressWidth + '%' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({ toast: Object });
+
+const progressWidth = ref(100)
+const startTime = ref(null)
+let animationFrame = null
+
+// Computed para detectar cambios en duration
+const duration = computed(() => props.toast?.duration || 0)
+
+// Función para actualizar el progreso
+const updateProgress = () => {
+  if (!startTime.value || duration.value <= 0) {
+    progressWidth.value = 100
+    return
+  }
+
+  const elapsed = Date.now() - startTime.value
+  const remaining = Math.max(0, duration.value - elapsed)
+  progressWidth.value = (remaining / duration.value) * 100
+
+  if (remaining > 0) {
+    animationFrame = requestAnimationFrame(updateProgress)
+  }
+}
+
+// Watch para reiniciar cuando cambie el duration
+watch(duration, (newDuration) => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+  
+  if (newDuration && newDuration > 0) {
+    startTime.value = Date.now()
+    updateProgress()
+  } else {
+    progressWidth.value = 100
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  if (duration.value > 0) {
+    startTime.value = Date.now()
+    updateProgress()
+  }
+})
+
+onUnmounted(() => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+})
+</script>

package/components/Toast/Notification.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg p-4 flex"
+    role="alert"
+  >
+    <div class="shrink-0">
+      <svg
+        class="size-5 text-gray-600 mt-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+      </svg>
+    </div>
+    <div class="ms-4">
+      <h3 v-if="toast.title" class="text-gray-800 font-semibold">
+        {{ toast.title }}
+      </h3>
+      <div class="mt-1 text-sm text-gray-600" v-html="toast.message"></div>
+      <div v-if="toast.actions" class="mt-4">
+        <div class="flex gap-x-3">
+          <button
+            v-for="(action, i) in toast.actions"
+            :key="i"
+            @click="action.onClick"
+            class="text-blue-600 decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline"
+          >
+            {{ action.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({ toast: Object });
+</script>

package/components/Toast/Process.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="max-w-xs relative bg-white border border-gray-200 rounded-xl shadow-lg"
+    role="alert"
+  >
+    <div class="flex gap-x-3 p-4">
+      <div class="shrink-0">
+        <span
+          class="m-1 inline-flex justify-center items-center size-8 rounded-full bg-gray-100 text-gray-800"
+        >
+          <svg
+            class="shrink-0 size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+            />
+            <path d="M12 12v9" />
+            <path d="m16 16-4-4-4 4" />
+          </svg>
+        </span>
+        <button
+          class="absolute top-3 end-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100"
+          @click="$emit('close')"
+          aria-label="Close"
+        >
+          <span class="sr-only">Close</span>
+          <svg
+            class="shrink-0 size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="grow me-5">
+        <h3 v-if="toast.title" class="text-gray-800 font-medium text-sm">
+          {{ toast.title }}
+        </h3>
+        <div
+          v-if="toast.progress !== undefined"
+          class="mt-2 flex flex-col gap-x-3"
+        >
+          <span class="block mb-1.5 text-xs text-gray-500">{{
+            toast.progressLabel
+          }}</span>
+          <div
+            class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden"
+            role="progressbar"
+            :aria-valuenow="toast.progress"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+            <div
+              class="flex flex-col justify-center overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap"
+              :style="{ width: toast.progress + '%' }"
+            ></div>
+          </div>
+        </div>
+        <div
+          v-else
+          class="mt-2 text-sm text-gray-600"
+          v-html="toast.message"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({ toast: Object });
+</script>

package/composables/useDate.js

@@ -0,0 +1,240 @@
+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 = () => {
+  // Configuración base de la zona horaria del tenant
+  const tenantTimeZone = '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/useDownload.js

@@ -0,0 +1,67 @@
+// app/composables/useDownload.js
+import { useAuthStore } from '@/stores/auth'
+
+export function useDownload() {
+    const auth = useAuthStore()
+    const config = useRuntimeConfig()
+    const baseUrl = config.public.apiBaseUrl
+
+    function buildHeaders(useToken = true) {
+        const headers = {}
+        if (useToken && auth.getToken()) {
+            headers['Authorization'] = `Bearer ${auth.getToken()}`
+        }
+        return headers
+    }
+
+    /**
+     * Descarga un archivo usando XHR para obtener progreso y headers
+     * @param {string} url
+     * @param {object} params
+     * @param {object} options { onProgress, useToken, method, headers }
+     * @returns {Promise<{ blob: Blob, headers: object }>}
+     */
+    function download(url, params = {}, options = {}) {
+        const {
+            onProgress = null,
+            useToken = true,
+            method = 'GET',
+            headers = {},
+        } = options
+
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest()
+            let query = ''
+            if (method === 'GET' && Object.keys(params).length) {
+                query = '?' + new URLSearchParams(params).toString()
+            }
+            xhr.open(method, `${baseUrl}/${url}${query}`)
+            const allHeaders = { ...buildHeaders(useToken), ...headers }
+            Object.entries(allHeaders).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.onerror = function () {
+                reject(new Error('Network error'))
+            }
+            xhr.onprogress = function (event) {
+                if (onProgress && event.lengthComputable) {
+                    onProgress(Math.round((event.loaded / event.total) * 100), event)
+                }
+            }
+            xhr.send(method === 'GET' ? null : JSON.stringify(params))
+        })
+    }
+
+    return { download }
+}