# 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.