Gesti-n-Reservas-Naturcalabacera/architecture/frontend_components.md

SOP: Arquitectura de Componentes Frontend

Estructura General

La aplicación es una SPA (Single Page Application) centrada en el Dashboard.

1. Layout Principal (DashboardLayout)

• Contenedor full-screen.
• Posible Sidebar o Header minimalista para controles globales (Logout, Filtros rápidos).
• Responsabilidad: Estructura base y responsive container.

2. Calendario Interactivo (CalendarView)

• Librería: react-big-calendar.
• Props: reservations (Array), onSelectEvent, onSelectSlot.
• Renderizado:
  • Personalización de eventPropGetter para aplicar colores (Teneriffa/Natur).
  • Componente custom para el evento (EventComponent) que muestra solo el nombre del cliente.
• Comportamiento:
  • Click en evento -> Abrir ReservationModal (Modo Edición).
  • Click en slot vacío -> Abrir ReservationModal (Modo Creación) con fechas pre-rellenadas.

3. Modal de Reserva (ReservationModal)

• UI: Dialog/Modal centrado (Desktop) o Bottom Sheet (Móvil).
• Estado: Controlado por isOpen, mode (create/edit), data.
• Contenido:
  • Título ("Nueva Reserva" / "Editar Reserva").
  • Formulario (ReservationForm).
  • Botones de acción (Guardar, Eliminar, Cancelar).

4. Formulario de Reserva (ReservationForm)

• Librería: react-hook-form.
• Campos:
  • Origen (Select).
  • Cliente (Input Text).
  • Fechas (Date Range Picker).
  • Adultos / Niños (Number Inputs).
  • Extras (Checkboxes).
  • Registro Gubernamental (Text Input) -> CRÍTICO PARA WEBHOOK.
• Lógica Visual:
  • Mostrar totales calculados en tiempo real:
    • Total Personas = Adultos + Niños
    • Total Días = End - Start

Diseño Visual (Tailwind)

• Colores:
  • Teneriffa2000: bg-blue-400
  • Naturcalabacera: bg-yellow-400
  • Días libres: bg-gray-50
• Tipografía: Sans-serif, limpia.