# Componentes reutilizables y navegación

## Layout

| Componente | Archivo | Uso |
|------------|---------|-----|
| `AppSidebar` | `components/layout/app-shell.tsx` | Menú lateral fijo (desktop) |
| `MobileHeader` | idem | Sheet de navegación (móvil) |
| `QueryProvider` | `lib/query/provider.tsx` | React Query global |

La navegación activa se deriva de `ACTIVE_NAV` en `config/modules.ts` (solo módulos `status: "active"`).

## Shared UI

| Componente | Archivo | Uso |
|------------|---------|-----|
| `PageHeader` | `components/shared/ui-blocks.tsx` | Título + descripción + acciones |
| `StatusBadge` | idem | Estados de habitación, huésped, pago, limpieza |
| `StatCard` | idem | KPIs del dashboard |
| `EmptyState` | idem | Listas vacías / errores |
| `Money` | idem | Formato EUR/COP |
| `Phase2Placeholder` | `components/shared/phase2-placeholder.tsx` | Rutas futuras |

## Shadcn/UI base

`Button`, `Card`, `Badge`, `Table`, `Input`, `Label`, `Select`, `Textarea`, `Dialog`, `Sheet`, `Tabs`, `Calendar`, `Popover`, `Alert`, `Skeleton`, `Avatar`, `DropdownMenu`, `Separator`.

## Por módulo (vista)

| Vista | Archivo |
|-------|---------|
| Dashboard | `components/dashboard/dashboard-view.tsx` |
| Habitaciones | `components/rooms/rooms-view.tsx` |
| Huéspedes | `components/guests/guests-view.tsx` |
| Finanzas | `components/finance/finance-view.tsx` |
| Limpieza | `components/cleaning/cleaning-view.tsx` |

## Hooks

`hooks/use-modules.ts`: `useDashboard`, `useRooms`, `useGuests`, `useFinance`, `useCleaning`.

## Flujo de navegación

```mermaid
flowchart LR
  A[Dashboard] --> B[Habitaciones]
  A --> C[Huéspedes]
  A --> D[Cobros y Caja]
  A --> E[Limpieza]
  B --> A
  C --> A
  D --> A
  E --> A
```

Sidebar siempre visible en desktop; en móvil, menú hamburguesa.