Initial commit

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>