178 lines
8.5 KiB
HTML
178 lines
8.5 KiB
HTML
<div class="flex flex-col md:flex-row h-screen w-full bg-[#F5F4F1] text-[#0F0D0A] font-sans overflow-hidden">
|
|
<!-- Sidebar de Filtros Dinámicos (Estilo Glassmorphism / Kinetix) -->
|
|
<aside class="w-full md:w-80 bg-white border-r border-[#0F0D0A]/10 p-6 flex flex-col justify-between gap-6 shrink-0 shadow-sm">
|
|
<div class="flex flex-col gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-[#C9973C] to-[#A67C28] flex items-center justify-center text-white shadow-md shadow-[#C9973C]/20">
|
|
<span class="material-icons font-bold text-lg">business_center</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold tracking-tight text-[#0F0D0A]">Reservas</h2>
|
|
<p class="text-xs text-[#78716C]">Autogestión de Espacios e IA</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtros Rápidos -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-bold uppercase tracking-wider text-[#78716C] mb-1">Categorías</label>
|
|
|
|
<button
|
|
(click)="setFilter('all')"
|
|
[class.bg-[#0D1B2A]]="selectedFilter() === 'all'"
|
|
[class.text-white]="selectedFilter() === 'all'"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl border border-[#0F0D0A]/10 hover:border-[#C9973C] transition-all text-left text-sm font-medium">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-[#C9973C]"></span>
|
|
<span>Ver Todo</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="setFilter('room')"
|
|
[class.bg-[#0D1B2A]]="selectedFilter() === 'room'"
|
|
[class.text-white]="selectedFilter() === 'room'"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl border border-[#0F0D0A]/10 hover:border-[#C9973C] transition-all text-left text-sm font-medium">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-indigo-600"></span>
|
|
<span>Salas de Juntas</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="setFilter('desk')"
|
|
[class.bg-[#0D1B2A]]="selectedFilter() === 'desk'"
|
|
[class.text-white]="selectedFilter() === 'desk'"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl border border-[#0F0D0A]/10 hover:border-[#C9973C] transition-all text-left text-sm font-medium">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-amber-600"></span>
|
|
<span>Oficinas / Escritorios</span>
|
|
</button>
|
|
|
|
<button
|
|
(click)="setFilter('asset')"
|
|
[class.bg-[#0D1B2A]]="selectedFilter() === 'asset'"
|
|
[class.text-white]="selectedFilter() === 'asset'"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl border border-[#0F0D0A]/10 hover:border-[#C9973C] transition-all text-left text-sm font-medium">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-emerald-600"></span>
|
|
<span>Activos y Equipamiento</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="h-px bg-[#0F0D0A]/10"></div>
|
|
|
|
<!-- Leyenda -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-bold uppercase tracking-wider text-[#78716C]">Información</label>
|
|
<div class="text-xs text-[#78716C] leading-relaxed">
|
|
Haz clic en cualquier celda o día en el calendario para agendar una reserva de forma directa utilizando nuestro **Asistente IA**.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Botón directo de Reserva IA -->
|
|
<button
|
|
[routerLink]="['/reservas/nuevo']"
|
|
class="w-full flex items-center justify-center gap-2 h-12 rounded-full bg-gradient-to-r from-[#C9973C] to-[#A67C28] text-white font-bold uppercase text-[10px] tracking-widest shadow-lg shadow-[#A67C28]/25 hover:translate-y-[-2px] transition-all">
|
|
<span class="material-icons text-sm">smart_toy</span>
|
|
<span>Asistente IA</span>
|
|
</button>
|
|
</aside>
|
|
|
|
<!-- Panel del Calendario (Full Screen Layout) -->
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden p-6 gap-6">
|
|
<!-- Cabecera del Calendario -->
|
|
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white border border-[#0F0D0A]/10 rounded-2xl p-4 shadow-sm shrink-0">
|
|
<div class="flex items-center gap-4">
|
|
<button (click)="prev()" class="w-10 h-10 rounded-full border border-[#0F0D0A]/10 hover:bg-[#F5F4F1] flex items-center justify-center transition-colors">
|
|
<span class="material-icons text-base"><</span>
|
|
</button>
|
|
<h1 class="text-xl font-bold tracking-tight text-[#0F0D0A] capitalize min-w-[150px] text-center">
|
|
{{ monthYearLabel() }}
|
|
</h1>
|
|
<button (click)="next()" class="w-10 h-10 rounded-full border border-[#0F0D0A]/10 hover:bg-[#F5F4F1] flex items-center justify-center transition-colors">
|
|
<span class="material-icons text-base">></span>
|
|
</button>
|
|
<button (click)="today()" class="px-4 h-10 rounded-full border border-[#0F0D0A]/10 text-xs font-medium hover:bg-[#F5F4F1] transition-colors ml-2">
|
|
Hoy
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Vistas de visualización (Día, Semana, Mes) -->
|
|
<div class="flex bg-[#F0EEE9] p-1 rounded-full border border-[#0F0D0A]/5">
|
|
<button
|
|
(click)="setView('month')"
|
|
[class.bg-white]="currentView() === 'month'"
|
|
[class.shadow-sm]="currentView() === 'month'"
|
|
class="px-4 py-1.5 rounded-full text-xs font-semibold transition-all">
|
|
Mes
|
|
</button>
|
|
<button
|
|
(click)="setView('week')"
|
|
[class.bg-white]="currentView() === 'week'"
|
|
[class.shadow-sm]="currentView() === 'week'"
|
|
class="px-4 py-1.5 rounded-full text-xs font-semibold transition-all">
|
|
Semana
|
|
</button>
|
|
<button
|
|
(click)="setView('day')"
|
|
[class.bg-white]="currentView() === 'day'"
|
|
[class.shadow-sm]="currentView() === 'day'"
|
|
class="px-4 py-1.5 rounded-full text-xs font-semibold transition-all">
|
|
Día
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Grid de Calendario Full-Screen (Modo Mes) -->
|
|
<div class="flex-1 bg-white border border-[#0F0D0A]/10 rounded-2xl shadow-sm flex flex-col overflow-hidden">
|
|
<!-- Días de la semana -->
|
|
<div class="grid grid-cols-7 bg-[#F0EEE9]/50 border-b border-[#0F0D0A]/10 shrink-0">
|
|
@for (dayName of weekDays; track $index) {
|
|
<div class="py-3 text-center text-xs font-bold tracking-wider text-[#78716C] uppercase border-r border-[#0F0D0A]/10 last:border-r-0">
|
|
{{ dayName }}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Cuadrícula de Celdas -->
|
|
<div class="grid grid-cols-7 grid-rows-6 flex-1 divide-x divide-y divide-[#0F0D0A]/10">
|
|
@for (day of calendarDays(); track day.getTime()) {
|
|
<div
|
|
(click)="selectDay(day)"
|
|
[class.bg-slate-50]="!isCurrentMonth(day)"
|
|
class="p-2 flex flex-col gap-1 hover:bg-[#F5F4F1]/60 transition-colors cursor-pointer group relative overflow-hidden">
|
|
|
|
<!-- Encabezado de la celda de día -->
|
|
<div class="flex justify-between items-center shrink-0">
|
|
<span
|
|
[class.bg-[#C9973C]]="isToday(day)"
|
|
[class.text-white]="isToday(day)"
|
|
[class.font-black]="isToday(day)"
|
|
[class.w-7]="isToday(day)"
|
|
[class.h-7]="isToday(day)"
|
|
[class.rounded-full]="isToday(day)"
|
|
[class.shadow-md]="isToday(day)"
|
|
class="flex items-center justify-center text-xs font-bold text-[#78716C] group-hover:text-[#0F0D0A] transition-colors">
|
|
{{ day.getDate() }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Listado de Eventos / Reservas del día -->
|
|
<div class="flex-1 flex flex-col gap-1 overflow-y-auto pr-1">
|
|
@for (event of getEventsForDay(day); track event.id) {
|
|
<div
|
|
[class]="event.colorClass"
|
|
class="text-[10px] leading-snug p-1.5 rounded-md truncate font-medium shadow-sm border"
|
|
[title]="event.title + ' (' + event.resourceName + ')'">
|
|
<div class="font-bold truncate">{{ event.title }}</div>
|
|
<div class="text-[9px] opacity-75">{{ event.resourceName }}</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Hint de clic al pasar cursor -->
|
|
<span class="absolute bottom-1 right-2 text-[9px] text-[#C9973C] opacity-0 group-hover:opacity-100 transition-opacity font-semibold">
|
|
+ Reservar
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|