Initial commit

2026-01-12 08:17:17 -07:00
commit de5b6feef4
104 changed files with 12925 additions and 0 deletions
--- a/frontend-client/src/lib/components/Header.svelte
+++ b/frontend-client/src/lib/components/Header.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { auth } from '$lib/stores/auth.js';
+  import Icon from './Icon.svelte';
+  
+  export let showLogo = true;
+  export let showNavigation = true;
+  
+  let isMenuOpen = false;
+  
+  onMount(() => {
+    auth.init();
+  });
+  
+  function toggleMenu() {
+    isMenuOpen = !isMenuOpen;
+  }
+  
+  function handleLogout() {
+    auth.logout();
+    isMenuOpen = false;
+  }
+</script>
+
+<header class="bg-white shadow-sm border-b border-gray-200">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between items-center h-16">
+      <!-- Logo -->
+      {#if showLogo}
+        <div class="flex items-center">
+          <a href="/" class="flex items-center space-x-2">
+            <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
+              <Icon name="ticket" size="w-5 h-5" className="text-white" />
+            </div>
+            <div class="hidden sm:block">
+              <h1 class="text-xl font-semibold text-gray-900">ServiceManager</h1>
+              <p class="text-xs text-gray-500">Mesa de Ayuda</p>
+            </div>
+          </a>
+        </div>
+      {/if}
+
+      <!-- Navigation -->
+      {#if showNavigation && $auth.isAuthenticated}
+        <nav class="hidden md:flex space-x-8">
+          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Mis Tickets
+          </a>
+          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Crear Ticket
+          </a>
+        </nav>
+      {/if}
+
+      <!-- User menu -->
+      <div class="flex items-center space-x-4">
+        {#if $auth.isAuthenticated}
+          <div class="relative">
+            <button
+              on:click={toggleMenu}
+              class="flex items-center space-x-2 text-gray-700 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-md p-2"
+            >
+              <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
+                <span class="text-primary-600 text-sm font-medium">
+                  {$auth.user?.first_name?.[0]}{$auth.user?.last_name?.[0]}
+                </span>
+              </div>
+              <span class="hidden sm:block text-sm">
+                {$auth.user?.first_name} {$auth.user?.last_name}
+              </span>
+              <Icon name="chevronDown" size="w-4 h-4" />
+            </button>
+
+            {#if isMenuOpen}
+              <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50">
+                <div class="py-1">
+                  <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
+                    {$auth.user?.email}
+                  </div>
+                  <a
+                    href="/profile"
+                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                    on:click={() => isMenuOpen = false}
+                  >
+                    Mi Perfil
+                  </a>
+                  <button
+                    on:click={handleLogout}
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  >
+                    Cerrar Sesión
+                  </button>
+                </div>
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <a
+            href="/login"
+            class="text-gray-700 hover:text-primary-600 text-sm font-medium"
+          >
+            Iniciar Sesión
+          </a>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Mobile navigation -->
+    {#if showNavigation && $auth.isAuthenticated}
+      <div class="md:hidden border-t border-gray-200 py-2">
+        <nav class="flex space-x-4">
+          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Mis Tickets
+          </a>
+          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Crear Ticket
+          </a>
+        </nav>
+      </div>
+    {/if}
+  </div>
+</header>
+
+<!-- Backdrop for mobile menu -->
+{#if isMenuOpen}
+  <div 
+    class="fixed inset-0 z-40 md:hidden" 
+    on:click={() => isMenuOpen = false}
+  ></div>
+{/if}
--- a/frontend-client/src/lib/components/Icon.svelte
+++ b/frontend-client/src/lib/components/Icon.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let name: string;
+  export let size: string = 'w-5 h-5';
+  export let className: string = '';
+
+  const icons: Record<string, string> = {
+    home: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+    ticket: 'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z',
+    plus: 'M12 4v16m8-8H4',
+    user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
+    menu: 'M4 6h16M4 12h16M4 18h16',
+    x: 'M6 18L18 6M6 6l12 12',
+    bell: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9',
+    search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+    edit: 'M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z',
+    trash: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
+    eye: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
+    clock: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
+    check: 'M5 13l4 4L19 7',
+    chevronDown: 'M19 9l-7 7-7-7'
+  };
+
+  $: path = icons[name] || icons.home;
+</script>
+
+<svg 
+  class="{size} {className}" 
+  fill="none" 
+  stroke="currentColor" 
+  viewBox="0 0 24 24" 
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path 
+    stroke-linecap="round" 
+    stroke-linejoin="round" 
+    stroke-width="2" 
+    d={path}
+  />
+</svg>
--- a/frontend-client/src/lib/components/TicketCard.svelte
+++ b/frontend-client/src/lib/components/TicketCard.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+  export let ticket: import('$lib/stores/tickets').Ticket;
+  
+  // Status mapping
+  const statusConfig = {
+    NEW: { label: 'Nuevo', class: 'badge-new' },
+    IN_PROGRESS: { label: 'En Progreso', class: 'badge-in-progress' },
+    WAITING_FOR_CLIENT: { label: 'Esperando Cliente', class: 'badge-waiting' },
+    RESOLVED: { label: 'Resuelto', class: 'badge-resolved' },
+    CLOSED: { label: 'Cerrado', class: 'badge-closed' },
+    REOPENED: { label: 'Reabierto', class: 'badge-reopened' }
+  };
+  
+  // Priority mapping
+  const priorityConfig = {
+    LOW: { label: 'Baja', class: 'badge-priority-low' },
+    MEDIUM: { label: 'Media', class: 'badge-priority-medium' },
+    HIGH: { label: 'Alta', class: 'badge-priority-high' },
+    URGENT: { label: 'Urgente', class: 'badge-priority-urgent' }
+  };
+  
+  // Format date
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleDateString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  }
+  
+  // Format relative time
+  function formatRelativeTime(dateString: string): string {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60));
+    
+    if (diffInMinutes < 1) return 'hace un momento';
+    if (diffInMinutes < 60) return `hace ${diffInMinutes}m`;
+    
+    const diffInHours = Math.floor(diffInMinutes / 60);
+    if (diffInHours < 24) return `hace ${diffInHours}h`;
+    
+    const diffInDays = Math.floor(diffInHours / 24);
+    if (diffInDays < 7) return `hace ${diffInDays}d`;
+    
+    return formatDate(dateString);
+  }
+</script>
+
+<div class="card hover:shadow-md transition-shadow">
+  <div class="card-content">
+    <div class="flex justify-between items-start mb-3">
+      <h3 class="text-lg font-medium text-gray-900 line-clamp-2">
+        <a href="/tickets/{ticket.id}" class="hover:text-primary-600">
+          {ticket.title}
+        </a>
+      </h3>
+      <div class="flex items-center space-x-2 ml-4">
+        <span class={`${statusConfig[ticket.status].class}`}>
+          {statusConfig[ticket.status].label}
+        </span>
+        <span class={`${priorityConfig[ticket.priority].class}`}>
+          {priorityConfig[ticket.priority].label}
+        </span>
+      </div>
+    </div>
+    
+    <p class="text-gray-600 text-sm line-clamp-3 mb-4">
+      {ticket.description}
+    </p>
+    
+    <div class="flex justify-between items-center text-xs text-gray-500">
+      <div class="flex items-center space-x-4">
+        <span>#{ticket.id.substring(0, 8)}</span>
+        {#if ticket.category_name}
+          <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded">
+            {ticket.category_name}
+          </span>
+        {/if}
+        {#if ticket.assigned_to_name}
+          <span class="flex items-center space-x-1">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span>{ticket.assigned_to_name}</span>
+          </span>
+        {/if}
+      </div>
+      
+      <div class="flex items-center space-x-3">
+        {#if ticket.due_date}
+          <span class="flex items-center space-x-1 {new Date(ticket.due_date) < new Date() ? 'text-red-600' : ''}">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>Vence {formatRelativeTime(ticket.due_date)}</span>
+          </span>
+        {/if}
+        
+        <span title={formatDate(ticket.updated_at)}>
+          Actualizado {formatRelativeTime(ticket.updated_at)}
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>
--- a/frontend-client/src/lib/components/Toast.svelte
+++ b/frontend-client/src/lib/components/Toast.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+  export let type: 'success' | 'error' | 'warning' | 'info' = 'info';
+  export let message: string;
+  export let duration: number = 5000;
+  export let dismissible: boolean = true;
+  
+  let visible = true;
+  let timeoutId: NodeJS.Timeout;
+  
+  // Auto-dismiss after duration
+  if (duration > 0) {
+    timeoutId = setTimeout(() => {
+      visible = false;
+    }, duration);
+  }
+  
+  function dismiss() {
+    if (timeoutId) clearTimeout(timeoutId);
+    visible = false;
+  }
+  
+  // Cleanup timeout on destroy
+  import { onDestroy } from 'svelte';
+  onDestroy(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+  
+  // Style mapping
+  const typeStyles = {
+    success: {
+      container: 'bg-success-50 border-success-200 text-success-800',
+      icon: 'text-success-400'
+    },
+    error: {
+      container: 'bg-error-50 border-error-200 text-error-800',
+      icon: 'text-error-400'
+    },
+    warning: {
+      container: 'bg-warning-50 border-warning-200 text-warning-800',
+      icon: 'text-warning-400'
+    },
+    info: {
+      container: 'bg-blue-50 border-blue-200 text-blue-800',
+      icon: 'text-blue-400'
+    }
+  };
+  
+  // Icon mapping
+  const typeIcons = {
+    success: 'M5 13l4 4L19 7',
+    error: 'M6 18L18 6M6 6l12 12',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z',
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+  };
+</script>
+
+{#if visible}
+  <div class="fixed top-4 right-4 max-w-sm w-full z-50 animate-slide-up">
+    <div class="rounded-lg border p-4 shadow-lg {typeStyles[type].container}">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <svg 
+            class="h-5 w-5 {typeStyles[type].icon}" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path 
+              stroke-linecap="round" 
+              stroke-linejoin="round" 
+              stroke-width="2" 
+              d={typeIcons[type]}
+            />
+          </svg>
+        </div>
+        
+        <div class="ml-3 flex-1">
+          <p class="text-sm font-medium">
+            {message}
+          </p>
+        </div>
+        
+        {#if dismissible}
+          <div class="ml-4 flex-shrink-0">
+            <button
+              type="button"
+              class="inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 {typeStyles[type].icon} hover:opacity-75"
+              on:click={dismiss}
+            >
+              <span class="sr-only">Cerrar</span>
+              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @keyframes slide-up {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  .animate-slide-up {
+    animation: slide-up 0.3s ease-out;
+  }
+</style>