Initial commit

frontend-internal/src/routes/+layout.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Header from '$lib/components/Header.svelte';
+  import Sidebar from '$lib/components/Sidebar.svelte';
+  import Toast from '$lib/components/Toast.svelte';
+  import { toast } from '$lib/stores/toast.js';
+  import { onMount } from 'svelte';
+  import { auth } from '$lib/stores/auth.js';
+  import '../app.css';
+
+  let sidebarOpen = false;
+
+  onMount(() => {
+    auth.init();
+  });
+
+  function toggleSidebar() {
+    sidebarOpen = !sidebarOpen;
+  }
+</script>
+
+<div class="min-h-screen bg-gray-50">
+  {#if $auth.isAuthenticated}
+    <!-- Internal Layout with Sidebar -->
+    <div class="flex h-screen overflow-hidden">
+      <!-- Sidebar -->
+      <Sidebar bind:open={sidebarOpen} />
+      
+      <!-- Main content -->
+      <div class="flex-1 flex flex-col overflow-hidden">
+        <Header {toggleSidebar} />
+        
+        <main class="flex-1 overflow-auto">
+          <slot />
+        </main>
+      </div>
+    </div>
+  {:else}
+    <!-- Login Layout -->
+    <main class="flex-1">
+      <slot />
+    </main>
+  {/if}
+  
+  <!-- Toast notifications -->
+  {#each $toast.toasts as toastMessage (toastMessage.id)}
+    <Toast
+      type={toastMessage.type}
+      message={toastMessage.message}
+      duration={toastMessage.duration}
+      on:dismiss={() => toast.dismiss(toastMessage.id)}
+    />
+  {/each}
+</div>

frontend-internal/src/routes/+page.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { auth } from '$lib/stores/auth.js';
+  import { goto } from '$app/navigation';
+  import Icon from '$lib/components/Icon.svelte';
+  
+  onMount(() => {
+    if (!$auth.isAuthenticated) {
+      goto('/login');
+    }
+  });
+
+  const cards = [
+    {
+      title: 'Clientes',
+      description: 'Gestión de organizaciones y tenants',
+      icon: 'users',
+      href: '/tenants',
+      color: 'bg-blue-500'
+    },
+    {
+      title: 'Usuarios',
+      description: 'Administración de usuarios y roles',
+      icon: 'user-plus',
+      href: '/users',
+      color: 'bg-green-500'
+    },
+    {
+      title: 'Sistemas',
+      description: 'Catálogo de sistemas soportados',
+      icon: 'server',
+      href: '/systems',
+      color: 'bg-purple-500'
+    },
+    {
+      title: 'Categorías',
+      description: 'Clasificación de tickets',
+      icon: 'tag',
+      href: '/categories',
+      color: 'bg-orange-500'
+    }
+  ];
+</script>
+
+<svelte:head>
+  <title>Dashboard Admin - ServiceManager</title>
+</svelte:head>
+
+<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
+  <div class="md:flex md:items-center md:justify-between">
+    <div class="flex-1 min-w-0">
+      <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
+        Panel de Administración
+      </h2>
+      <p class="mt-1 text-sm text-gray-500">
+          Bienvenido al sistema de gestión interna.
+      </p>
+    </div>
+  </div>
+
+  <div class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+    {#each cards as card}
+      <a href={card.href} class="bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow duration-200 cursor-pointer group">
+        <div class="p-5">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <div class="{card.color} rounded-md p-3">
+                 <!-- Simple SVG Icon placeholder since Icon component might expect specific names that map to SVGs -->
+                 <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+                 </svg>
+              </div>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dl>
+                <dt class="text-sm font-medium text-gray-500 truncate">
+                  {card.title}
+                </dt>
+                <dd>
+                  <div class="text-xs text-gray-900 font-light mt-1">
+                    {card.description}
+                  </div>
+                </dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-5 py-3">
+          <div class="text-sm">
+            <span class="font-medium text-cyan-700 hover:text-cyan-900">
+              Ver detalles
+            </span>
+          </div>
+        </div>
+      </a>
+    {/each}
+  </div>
+</div>

frontend-internal/src/routes/categories/+page.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+  import Modal from '$lib/components/Modal.svelte';
+
+  let categories = [];
+  let tenants = [];
+  let isLoading = false;
+  let showModal = false;
+  let editingCategory = null;
+
+  let formData = {
+    name: '',
+    description: '',
+    tenant_id: '',
+    is_active: true
+  };
+
+  async function loadData() {
+    isLoading = true;
+    try {
+      const [categoriesData, tenantsData] = await Promise.all([
+        api.get('/categories/'),
+        api.get('/tenants/')
+      ]);
+      categories = categoriesData;
+      tenants = tenantsData;
+    } catch (e) {
+      toast.error('Error cargando datos');
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function openCreateModal() {
+    editingCategory = null;
+    formData = { name: '', description: '', tenant_id: '', is_active: true };
+    showModal = true;
+  }
+
+  function openEditModal(category) {
+    editingCategory = category;
+    formData = { 
+        name: category.name, 
+        description: category.description, 
+        tenant_id: category.tenant_id || '', 
+        is_active: category.is_active 
+    };
+    showModal = true;
+  }
+
+  async function handleSubmit() {
+    try {
+        const payload = { ...formData };
+        if (!payload.tenant_id) payload.tenant_id = null;
+
+      if (editingCategory) {
+        await api.put(`/categories/${editingCategory.id}`, payload);
+        toast.success('Categoría actualizada');
+      } else {
+        await api.post('/categories/', payload);
+        toast.success('Categoría creada');
+      }
+      showModal = false;
+      loadData();
+    } catch (e) {
+      toast.error(e.message || 'Error guardando categoría');
+    }
+  }
+  
+  function getTenantName(id) {
+    if (!id) return 'Global';
+    const t = tenants.find(t => t.id === id);
+    return t ? t.name : id;
+  }
+
+  onMount(loadData);
+</script>
+
+<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="text-xl font-semibold text-gray-900">Categorías de Tickets</h1>
+      <p class="mt-2 text-sm text-gray-700">Gestión de categorías para clasificación de tickets.</p>
+    </div>
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+      <button
+        type="button"
+        on:click={openCreateModal}
+        class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:w-auto"
+      >
+        Nueva Categoría
+      </button>
+    </div>
+  </div>
+
+  <div class="mt-8 flex flex-col">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Nombre</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Descripción</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Tipo (Cliente)</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                  <span class="sr-only">Acciones</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              {#if isLoading}
+                 <tr><td colspan="5" class="text-center py-4">Cargando...</td></tr>
+              {:else if categories.length === 0}
+                 <tr><td colspan="5" class="text-center py-4">No hay categorías registradas</td></tr>
+              {:else}
+                {#each categories as category}
+                  <tr>
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{category.name}</td>
+                    <td class="px-3 py-4 text-sm text-gray-500 max-w-xs truncate">{category.description || '-'}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <span class:bg-blue-100={!category.tenant_id} class:text-blue-800={!category.tenant_id} class:bg-gray-100={category.tenant_id} class:text-gray-800={category.tenant_id} class="inline-flex rounded-full px-2 text-xs font-semibold leading-5">
+                        {getTenantName(category.tenant_id)}
+                      </span>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <span class:bg-green-100={category.is_active} class:text-green-800={category.is_active} class:bg-red-100={!category.is_active} class:text-red-800={!category.is_active} class="inline-flex rounded-full px-2 text-xs font-semibold leading-5">
+                        {category.is_active ? 'Activo' : 'Inactivo'}
+                      </span>
+                    </td>
+                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                      <button on:click={() => openEditModal(category)} class="text-indigo-600 hover:text-indigo-900">Editar</button>
+                    </td>
+                  </tr>
+                {/each}
+              {/if}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<Modal open={showModal} title={editingCategory ? 'Editar Categoría' : 'Nueva Categoría'} on:close={() => showModal = false}>
+  <form on:submit|preventDefault={handleSubmit} class="space-y-4">
+    <div>
+      <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
+      <input type="text" id="name" bind:value={formData.name} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+    </div>
+
+    <div>
+      <label for="description" class="block text-sm font-medium text-gray-700">Descripción</label>
+      <textarea id="description" bind:value={formData.description} rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"></textarea>
+    </div>
+
+    <div>
+      <label for="tenant" class="block text-sm font-medium text-gray-700">Cliente (Opcional - Específico para un cliente)</label>
+      <select id="tenant" bind:value={formData.tenant_id} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+        <option value="">-- Global (Para todos) --</option>
+        {#each tenants as tenant}
+          <option value={tenant.id}>{tenant.name}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="flex items-center">
+      <input type="checkbox" id="is_active" bind:checked={formData.is_active} class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+      <label for="is_active" class="ml-2 block text-sm text-gray-900">Activo</label>
+    </div>
+
+    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+      <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm">
+        Guardar
+      </button>
+      <button type="button" on:click={() => showModal = false} class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
+        Cancelar
+      </button>
+    </div>
+  </form>
+</Modal>

frontend-internal/src/routes/login/+page.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+  import { auth } from '$lib/stores/auth.js';
+  import { toast } from '$lib/stores/toast.js';
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import Icon from '$lib/components/Icon.svelte';
+  
+  let email = '';
+  let password = '';
+  let totpCode = '';
+  let isLoading = false;
+  let showTwoFactor = false;
+  let errorMessage = '';
+  
+  onMount(() => {
+    // Redirect if already authenticated
+    if ($auth.isAuthenticated) {
+      goto('/');
+    }
+  });
+  
+  async function handleLogin() {
+    if (!email || !password) {
+      errorMessage = 'Por favor completa todos los campos';
+      return;
+    }
+    
+    isLoading = true;
+    errorMessage = '';
+    
+    try {
+      await auth.login({
+        email,
+        password,
+        tenant_slug: 'system-admin',
+        totp_code: totpCode || undefined
+      });
+      
+      toast.success('¡Bienvenido! Has iniciado sesión correctamente');
+      goto('/');
+    } catch (error: any) {
+      console.error('Login error:', error);
+      
+      // Check if 2FA is required
+      if (error.message.includes('two-factor') || error.message.includes('2FA')) {
+        showTwoFactor = true;
+        errorMessage = 'Introduce el código de tu aplicación de autenticación';
+      } else {
+        errorMessage = error.message || 'Error al iniciar sesión';
+        toast.error(errorMessage);
+      }
+    } finally {
+      isLoading = false;
+    }
+  }
+  
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      handleLogin();
+    }
+  }
+</script>
+
+
+<svelte:head>
+  <title>Acceso Admin - ServiceManager</title>
+</svelte:head>
+
+<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-950 p-4 font-sans">
+  <div class="w-full max-w-5xl grid grid-cols-1 md:grid-cols-2 bg-white dark:bg-gray-900 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-800">
+    
+    <!-- Left Side: Internal Branding -->
+    <div class="hidden md:flex flex-col justify-between p-12 bg-gray-900 text-white relative overflow-hidden">
+      <!-- Grid pattern overlay -->
+      <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(white 1px, transparent 1px); background-size: 30px 30px;"></div>
+      
+      <div class="relative z-10">
+        <div class="flex items-center space-x-3 mb-6">
+           <div class="p-2 bg-blue-500/20 rounded border border-blue-500/30">
+             <Icon name="server" class="w-6 h-6 text-blue-400" />
+           </div>
+           <span class="text-sm font-mono tracking-wider text-blue-400">INTERNAL_ACCESS_V2</span>
+        </div>
+        
+        <h1 class="text-3xl font-bold tracking-tight mb-4">
+          Panel de Administración
+        </h1>
+        <p class="text-gray-400 text-sm leading-relaxed max-w-sm">
+          Plataforma de gestión de servicios, monitoreo de tickets y administración de usuarios. Acceso restringido únicamente a personal autorizado.
+        </p>
+      </div>
+
+      <div class="relative z-10 mt-12">
+        <div class="space-y-3">
+          <div class="flex items-center space-x-3 text-xs text-gray-400 font-mono">
+             <Icon name="check-circle" class="w-4 h-4 text-green-500" />
+             <span>System Status: Operational</span>
+          </div>
+          <div class="flex items-center space-x-3 text-xs text-gray-400 font-mono">
+             <Icon name="shield" class="w-4 h-4 text-blue-500" />
+             <span>256-bit Encryption Enabled</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Side: Login Form -->
+    <div class="p-8 md:p-12 flex flex-col justify-center">
+       
+       <div class="max-w-sm mx-auto w-full">
+         <div class="mb-8">
+           <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-1">Identifíquese</h2>
+           <p class="text-sm text-gray-500 dark:text-gray-400">Acceso al sistema central</p>
+         </div>
+
+         <form on:submit|preventDefault={handleLogin} class="space-y-5">
+           {#if errorMessage}
+             <div class="p-3 rounded-md bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900 flex items-start gap-3">
+               <Icon name="alert-triangle" class="w-5 h-5 text-red-600 dark:text-red-500 flex-shrink-0 mt-0.5" />
+               <p class="text-sm text-red-600 dark:text-red-500">{errorMessage}</p>
+             </div>
+           {/if}
+
+           {#if !showTwoFactor}
+             <div class="space-y-4">
+               <div>
+                 <label for="email" class="block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">Usuario / Correo</label>
+                 <div class="relative group">
+                   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-500 transition-colors">
+                     <Icon name="user" class="w-5 h-5" />
+                   </div>
+                   <input
+                     id="email"
+                     type="email"
+                     bind:value={email}
+                     on:keydown={handleKeyDown}
+                     class="form-input w-full pl-10 py-2.5 bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all font-mono text-sm"
+                     placeholder="admin@aduanasoft.com"
+                     required
+                     disabled={isLoading}
+                   />
+                 </div>
+               </div>
+
+               <div>
+                 <label for="password" class="block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">Clave de Acceso</label>
+                 <div class="relative group">
+                   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-500 transition-colors">
+                     <Icon name="lock" class="w-5 h-5" />
+                   </div>
+                   <input
+                     id="password"
+                     type="password"
+                     bind:value={password}
+                     on:keydown={handleKeyDown}
+                     class="form-input w-full pl-10 py-2.5 bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all font-mono text-sm"
+                     placeholder="••••••••••••"
+                     required
+                     disabled={isLoading}
+                   />
+                 </div>
+               </div>
+             </div>
+           
+           {:else}
+             <!-- 2FA Input -->
+             <div class="bg-blue-50 dark:bg-blue-900/10 p-4 rounded-lg border border-blue-100 dark:border-blue-800/30">
+               <label for="code" class="block text-xs font-semibold uppercase tracking-wider text-blue-800 dark:text-blue-300 mb-2 text-center">Verificación de Seguridad</label>
+               <div class="relative">
+                 <input
+                   id="code"
+                   type="text"
+                   bind:value={totpCode}
+                   on:keydown={handleKeyDown}
+                   class="form-input w-full py-3 rounded border-blue-300 dark:border-blue-700 focus:ring-blue-500 focus:border-blue-500 text-center tracking-[0.5em] font-mono text-lg bg-white dark:bg-gray-800"
+                   placeholder="000000"
+                   maxlength="6"
+                   required
+                   disabled={isLoading}
+                   autofocus
+                 />
+               </div>
+               <p class="text-xs text-blue-600 dark:text-blue-400 mt-2 text-center">
+                 Consulte su dispositivo autenticador
+               </p>
+             </div>
+           {/if}
+
+           <div class="pt-4">
+             <button
+               type="submit"
+               class="w-full flex justify-center py-2.5 px-4 rounded bg-gray-900 dark:bg-gray-700 text-white font-medium hover:bg-gray-800 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+               disabled={isLoading}
+             >
+               {#if isLoading}
+                 <Icon name="loader" class="w-4 h-4 animate-spin mr-2" />
+                 Autenticando...
+               {:else}
+                 {showTwoFactor ? 'Verificar Token' : 'Entrar al Panel'}
+               {/if}
+             </button>
+           </div>
+         </form>
+       </div>
+       
+       <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-800">
+          <p class="text-[10px] text-gray-400 text-center uppercase tracking-widest">Aduanasoft Internal Systems © 2024</p>
+       </div>
+    </div>
+  </div>
+</div>

frontend-internal/src/routes/systems/+page.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+  import Modal from '$lib/components/Modal.svelte';
+
+  let systems = [];
+  let isLoading = false;
+  let showModal = false;
+  let editingSystem = null;
+
+  let formData = {
+    name: '',
+    description: '',
+    is_active: true
+  };
+
+  async function loadSystems() {
+    isLoading = true;
+    try {
+      systems = await api.get('/systems/');
+    } catch (e) {
+      toast.error('Error cargando sistemas');
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function openCreateModal() {
+    editingSystem = null;
+    formData = { name: '', description: '', is_active: true };
+    showModal = true;
+  }
+
+  function openEditModal(system) {
+    editingSystem = system;
+    formData = { ...system };
+    showModal = true;
+  }
+
+  async function handleSubmit() {
+    try {
+      if (editingSystem) {
+        await api.put(`/systems/${editingSystem.id}`, formData);
+        toast.success('Sistema actualizado');
+      } else {
+        await api.post('/systems/', formData);
+        toast.success('Sistema creado');
+      }
+      showModal = false;
+      loadSystems();
+    } catch (e) {
+      toast.error(e.message || 'Error guardando sistema');
+    }
+  }
+
+  onMount(loadSystems);
+</script>
+
+<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="text-xl font-semibold text-gray-900">Sistemas</h1>
+      <p class="mt-2 text-sm text-gray-700">Catálogo de sistemas informáticos gestionados.</p>
+    </div>
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+      <button
+        type="button"
+        on:click={openCreateModal}
+        class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:w-auto"
+      >
+        Nuevo Sistema
+      </button>
+    </div>
+  </div>
+
+  <div class="mt-8 flex flex-col">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Nombre</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Descripción</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                  <span class="sr-only">Acciones</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              {#if isLoading}
+                 <tr><td colspan="4" class="text-center py-4">Cargando...</td></tr>
+              {:else if systems.length === 0}
+                 <tr><td colspan="4" class="text-center py-4">No hay sistemas registrados</td></tr>
+              {:else}
+                {#each systems as system}
+                  <tr>
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{system.name}</td>
+                    <td class="px-3 py-4 text-sm text-gray-500 max-w-xs truncate">{system.description || '-'}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <span class:bg-green-100={system.is_active} class:text-green-800={system.is_active} class:bg-red-100={!system.is_active} class:text-red-800={!system.is_active} class="inline-flex rounded-full px-2 text-xs font-semibold leading-5">
+                        {system.is_active ? 'Activo' : 'Inactivo'}
+                      </span>
+                    </td>
+                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                      <button on:click={() => openEditModal(system)} class="text-indigo-600 hover:text-indigo-900">Editar</button>
+                    </td>
+                  </tr>
+                {/each}
+              {/if}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<Modal open={showModal} title={editingSystem ? 'Editar Sistema' : 'Nuevo Sistema'} on:close={() => showModal = false}>
+  <form on:submit|preventDefault={handleSubmit} class="space-y-4">
+    <div>
+      <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
+      <input type="text" id="name" bind:value={formData.name} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+    </div>
+
+    <div>
+      <label for="description" class="block text-sm font-medium text-gray-700">Descripción</label>
+      <textarea id="description" bind:value={formData.description} rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"></textarea>
+    </div>
+
+    <div class="flex items-center">
+      <input type="checkbox" id="is_active" bind:checked={formData.is_active} class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+      <label for="is_active" class="ml-2 block text-sm text-gray-900">Activo</label>
+    </div>
+
+    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+      <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm">
+        Guardar
+      </button>
+      <button type="button" on:click={() => showModal = false} class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
+        Cancelar
+      </button>
+    </div>
+  </form>
+</Modal>

frontend-internal/src/routes/tenants/+page.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+  import Modal from '$lib/components/Modal.svelte';
+  import Icon from '$lib/components/Icon.svelte';
+
+  let tenants = [];
+  let isLoading = false;
+  let showModal = false;
+  let editingTenant = null;
+
+  let formData = {
+    name: '',
+    slug: '',
+    domain: '',
+    is_active: true
+  };
+
+  async function loadTenants() {
+    isLoading = true;
+    try {
+      tenants = await api.get('/tenants/');
+    } catch (e) {
+      toast.error('Error cargando clientes');
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function openCreateModal() {
+    editingTenant = null;
+    formData = { name: '', slug: '', domain: '', is_active: true };
+    showModal = true;
+  }
+
+  function openEditModal(tenant) {
+    editingTenant = tenant;
+    formData = { ...tenant };
+    showModal = true;
+  }
+
+  async function handleSubmit() {
+    try {
+      if (editingTenant) {
+        await api.put(`/tenants/${editingTenant.id}`, formData);
+        toast.success('Cliente actualizado');
+      } else {
+        await api.post('/tenants/', formData);
+        toast.success('Cliente creado');
+      }
+      showModal = false;
+      loadTenants();
+    } catch (e) {
+      toast.error(e.message || 'Error guardando cliente');
+    }
+  }
+
+  onMount(loadTenants);
+</script>
+
+<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="text-xl font-semibold text-gray-900">Clientes</h1>
+      <p class="mt-2 text-sm text-gray-700">Lista de todas las organizaciones/clientes registrados en el sistema.</p>
+    </div>
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+      <button
+        type="button"
+        on:click={openCreateModal}
+        class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:w-auto"
+      >
+        Nuevo Cliente
+      </button>
+    </div>
+  </div>
+
+  <div class="mt-8 flex flex-col">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Nombre</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Slug</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Dominio</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                  <span class="sr-only">Acciones</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              {#if isLoading}
+                 <tr><td colspan="5" class="text-center py-4">Cargando...</td></tr>
+              {:else if tenants.length === 0}
+                 <tr><td colspan="5" class="text-center py-4">No hay clientes registrados</td></tr>
+              {:else}
+                {#each tenants as tenant}
+                  <tr>
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{tenant.name}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{tenant.slug}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{tenant.domain || '-'}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <span class:bg-green-100={tenant.is_active} class:text-green-800={tenant.is_active} class:bg-red-100={!tenant.is_active} class:text-red-800={!tenant.is_active} class="inline-flex rounded-full px-2 text-xs font-semibold leading-5">
+                        {tenant.is_active ? 'Activo' : 'Inactivo'}
+                      </span>
+                    </td>
+                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                      <button on:click={() => openEditModal(tenant)} class="text-indigo-600 hover:text-indigo-900">Editar</button>
+                    </td>
+                  </tr>
+                {/each}
+              {/if}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<Modal open={showModal} title={editingTenant ? 'Editar Cliente' : 'Nuevo Cliente'} on:close={() => showModal = false}>
+  <form on:submit|preventDefault={handleSubmit} class="space-y-4">
+    <div>
+      <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
+      <input type="text" id="name" bind:value={formData.name} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+    </div>
+    
+    <div>
+      <label for="slug" class="block text-sm font-medium text-gray-700">Slug (Identificador)</label>
+      <input type="text" id="slug" bind:value={formData.slug} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+      <p class="text-xs text-gray-500 mt-1">Usado en URLs y subdominios.</p>
+    </div>
+
+    <div>
+      <label for="domain" class="block text-sm font-medium text-gray-700">Dominio Personalizado</label>
+      <input type="text" id="domain" bind:value={formData.domain} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+    </div>
+
+    <div class="flex items-center">
+      <input type="checkbox" id="is_active" bind:checked={formData.is_active} class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+      <label for="is_active" class="ml-2 block text-sm text-gray-900">Activo</label>
+    </div>
+
+    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+      <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm">
+        Guardar
+      </button>
+      <button type="button" on:click={() => showModal = false} class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
+        Cancelar
+      </button>
+    </div>
+  </form>
+</Modal>

frontend-internal/src/routes/users/+page.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+  import Modal from '$lib/components/Modal.svelte';
+
+  let users = [];
+  let tenants = [];
+  let isLoading = false;
+  let showModal = false;
+  let editingUser = null;
+
+  let formData = {
+    email: '',
+    password: '',
+    first_name: '',
+    last_name: '',
+    role: 'AGENT',
+    tenant_id: '',
+    is_active: true
+  };
+
+  const ROLES = [
+    { value: 'ADMIN', label: 'Administrador (Global)' },
+    { value: 'SUPPORT_MANAGER', label: 'Gerente de Soporte' },
+    { value: 'AGENT', label: 'Agente de Soporte' },
+    { value: 'AUDITOR', label: 'Auditor' },
+    { value: 'CLIENT_ADMIN', label: 'Admin Cliente' },
+    { value: 'CLIENT_USER', label: 'Usuario Cliente' }
+  ];
+
+  async function loadData() {
+    isLoading = true;
+    try {
+      const [usersData, tenantsData] = await Promise.all([
+        api.get('/users/'),
+        api.get('/tenants/')
+      ]);
+      users = usersData;
+      tenants = tenantsData;
+    } catch (e) {
+      toast.error('Error cargando datos');
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function openCreateModal() {
+    editingUser = null;
+    formData = {
+      email: '',
+      password: '',
+      first_name: '',
+      last_name: '',
+      role: 'AGENT',
+      tenant_id: '',
+      is_active: true
+    };
+    showModal = true;
+  }
+
+  function openEditModal(user) {
+    editingUser = user;
+    formData = {
+      email: user.email,
+      password: '', // Don't show password
+      first_name: user.first_name,
+      last_name: user.last_name,
+      role: user.role,
+      tenant_id: user.tenant_id || '',
+      is_active: user.is_active
+    };
+    showModal = true;
+  }
+
+  async function handleSubmit() {
+    try {
+      const payload = { ...formData };
+      if (!payload.password) delete payload.password; // Don't send empty password on edit
+      if (!payload.tenant_id) payload.tenant_id = null; // Send null if empty string
+
+      if (editingUser) {
+        await api.put(`/users/${editingUser.id}`, payload);
+        toast.success('Usuario actualizado');
+      } else {
+        if (!payload.password) {
+            toast.error('La contraseña es requerida para nuevos usuarios');
+            return;
+        }
+        await api.post('/users/', payload);
+        toast.success('Usuario creado');
+      }
+      showModal = false;
+      loadData();
+    } catch (e) {
+      toast.error(e.message || 'Error guardando usuario');
+    }
+  }
+
+  function getTenantName(id) {
+    if (!id) return '-';
+    const t = tenants.find(t => t.id === id);
+    return t ? t.name : id;
+  }
+
+  onMount(loadData);
+</script>
+
+<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="text-xl font-semibold text-gray-900">Usuarios</h1>
+      <p class="mt-2 text-sm text-gray-700">Gestión de usuarios internos y de clientes.</p>
+    </div>
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+      <button
+        type="button"
+        on:click={openCreateModal}
+        class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:w-auto"
+      >
+        Nuevo Usuario
+      </button>
+    </div>
+  </div>
+
+  <div class="mt-8 flex flex-col">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Usuario</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Rol</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Cliente (Tenant)</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                  <span class="sr-only">Acciones</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              {#if isLoading}
+                 <tr><td colspan="5" class="text-center py-4">Cargando...</td></tr>
+              {:else if users.length === 0}
+                 <tr><td colspan="5" class="text-center py-4">No hay usuarios registrados</td></tr>
+              {:else}
+                {#each users as user}
+                  <tr>
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                      <div class="font-medium text-gray-900">{user.first_name} {user.last_name}</div>
+                      <div class="text-gray-500">{user.email}</div>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{user.role}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{getTenantName(user.tenant_id)}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <span class:bg-green-100={user.is_active} class:text-green-800={user.is_active} class:bg-red-100={!user.is_active} class:text-red-800={!user.is_active} class="inline-flex rounded-full px-2 text-xs font-semibold leading-5">
+                        {user.is_active ? 'Activo' : 'Inactivo'}
+                      </span>
+                    </td>
+                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                      <button on:click={() => openEditModal(user)} class="text-indigo-600 hover:text-indigo-900">Editar</button>
+                    </td>
+                  </tr>
+                {/each}
+              {/if}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<Modal open={showModal} title={editingUser ? 'Editar Usuario' : 'Nuevo Usuario'} on:close={() => showModal = false}>
+  <form on:submit|preventDefault={handleSubmit} class="space-y-4">
+    <div class="grid grid-cols-2 gap-4">
+      <div>
+        <label for="first_name" class="block text-sm font-medium text-gray-700">Nombre</label>
+        <input type="text" id="first_name" bind:value={formData.first_name} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+      </div>
+      <div>
+        <label for="last_name" class="block text-sm font-medium text-gray-700">Apellido</label>
+        <input type="text" id="last_name" bind:value={formData.last_name} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+      </div>
+    </div>
+
+    <div>
+      <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+      <input type="email" id="email" bind:value={formData.email} required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+    </div>
+
+    <div>
+      <label for="password" class="block text-sm font-medium text-gray-700">Contraseña {editingUser ? '(dejar en blanco para mantener)' : ''}</label>
+      <input type="password" id="password" bind:value={formData.password} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+    </div>
+
+    <div>
+      <label for="role" class="block text-sm font-medium text-gray-700">Rol</label>
+      <select id="role" bind:value={formData.role} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+        {#each ROLES as role}
+          <option value={role.value}>{role.label}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div>
+      <label for="tenant" class="block text-sm font-medium text-gray-700">Cliente (Opcional - solo para usuarios externos)</label>
+      <select id="tenant" bind:value={formData.tenant_id} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2">
+        <option value="">-- Ninguno (Usuario Interno) --</option>
+        {#each tenants as tenant}
+          <option value={tenant.id}>{tenant.name}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="flex items-center">
+      <input type="checkbox" id="is_active" bind:checked={formData.is_active} class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+      <label for="is_active" class="ml-2 block text-sm text-gray-900">Activo</label>
+    </div>
+
+    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+      <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm">
+        Guardar
+      </button>
+      <button type="button" on:click={() => showModal = false} class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
+        Cancelar
+      </button>
+    </div>
+  </form>
+</Modal>