Initial commit
This commit is contained in:
178
frontend-client/src/routes/+page.svelte
Normal file
178
frontend-client/src/routes/+page.svelte
Normal file
@@ -0,0 +1,178 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { auth } from '$lib/stores/auth.js';
|
||||
import { tickets } from '$lib/stores/tickets.js';
|
||||
import { goto } from '$app/navigation';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
|
||||
onMount(() => {
|
||||
// Redirect if not authenticated
|
||||
if (!$auth.isAuthenticated) {
|
||||
goto('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
// Load user's tickets
|
||||
tickets.loadTickets();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>ServiceManager - Mesa de Ayuda</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Welcome Section -->
|
||||
<div class="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-8 text-white mb-8">
|
||||
<div class="max-w-3xl">
|
||||
<h1 class="text-3xl font-bold mb-2">
|
||||
Bienvenido, {$auth.user?.first_name} {$auth.user?.last_name}
|
||||
</h1>
|
||||
<p class="text-primary-100 text-lg">
|
||||
Gestiona tus tickets de soporte de manera eficiente. Crea nuevos tickets,
|
||||
da seguimiento a los existentes y mantente actualizado con el estado de tus solicitudes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<a
|
||||
href="/tickets/new"
|
||||
class="card hover:shadow-lg transition-shadow group cursor-pointer"
|
||||
>
|
||||
<div class="card-content text-center">
|
||||
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors">
|
||||
<Icon name="plus" size="w-6 h-6" className="text-primary-600" />
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Crear Ticket</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Reporta un problema o solicita soporte técnico
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/tickets"
|
||||
class="card hover:shadow-lg transition-shadow group cursor-pointer"
|
||||
>
|
||||
<div class="card-content text-center">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
|
||||
<Icon name="ticket" size="w-6 h-6" className="text-blue-600" />
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Mis Tickets</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Consulta el estado de todos tus tickets
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/profile"
|
||||
class="card hover:shadow-lg transition-shadow group cursor-pointer"
|
||||
>
|
||||
<div class="card-content text-center">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 transition-colors">
|
||||
<Icon name="user" size="w-6 h-6" className="text-green-600" />
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Mi Perfil</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Actualiza tu información personal
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Recent Tickets -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="text-xl font-semibold text-gray-900">Tickets Recientes</h2>
|
||||
<p class="text-gray-600 mt-1">Últimos tickets que has creado o actualizado</p>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
{#if $tickets.isLoading}
|
||||
<div class="text-center py-8">
|
||||
<div class="spinner w-8 h-8 mx-auto mb-4"></div>
|
||||
<p class="text-gray-600">Cargando tickets...</p>
|
||||
</div>
|
||||
{:else if $tickets.error}
|
||||
<div class="text-center py-8">
|
||||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">Error al cargar los tickets</p>
|
||||
<button
|
||||
on:click={() => tickets.loadTickets()}
|
||||
class="btn-primary px-4 py-2"
|
||||
>
|
||||
Reintentar
|
||||
</button>
|
||||
</div>
|
||||
{:else if $tickets.tickets.length === 0}
|
||||
<div class="text-center py-8">
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">No tienes tickets creados</p>
|
||||
<a href="/tickets/new" class="btn-primary px-4 py-2">
|
||||
Crear tu primer ticket
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
{#each $tickets.tickets.slice(0, 5) as ticket (ticket.id)}
|
||||
<div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-medium text-gray-900 mb-1">
|
||||
<a href="/tickets/{ticket.id}" class="hover:text-primary-600">
|
||||
{ticket.title}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-600 text-sm line-clamp-2 mb-2">
|
||||
{ticket.description}
|
||||
</p>
|
||||
<div class="flex items-center space-x-4 text-xs text-gray-500">
|
||||
<span>#{ticket.id.substring(0, 8)}</span>
|
||||
<span>{new Date(ticket.created_at).toLocaleDateString('es-ES')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<span class="badge-{ticket.status.toLowerCase().replace('_', '-')}">
|
||||
{ticket.status === 'NEW' ? 'Nuevo' :
|
||||
ticket.status === 'IN_PROGRESS' ? 'En Progreso' :
|
||||
ticket.status === 'WAITING_FOR_CLIENT' ? 'Esperando Cliente' :
|
||||
ticket.status === 'RESOLVED' ? 'Resuelto' :
|
||||
ticket.status === 'CLOSED' ? 'Cerrado' : 'Reabierto'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if $tickets.tickets.length > 5}
|
||||
<div class="text-center pt-4 border-t border-gray-200">
|
||||
<a href="/tickets" class="btn-secondary px-4 py-2">
|
||||
Ver todos los tickets ({$tickets.tickets.length})
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user