49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
# 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.
|