Initial commit: monorepo Naturcalabacera reservas (apps/api + apps/web + packages/shared)

architecture/frontend_components.md

@@ -0,0 +1,48 @@
+# 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.