Frontend — Hoteis & Pousadas
Visao Geral
SPA construida com React 18 + Vite + TypeScript + Tailwind CSS.
Stack: React Query (server state), Zustand (client state), React Hook Form + Zod (forms), Radix UI (componentes acessiveis).
Paginas Principais
Publicas (Sem Auth)
| Rota |
Descricao |
/ |
Landing page |
/login |
Login (email/senha + OTP) |
/signup |
Cadastro |
/h/{slug} |
Pagina publica do hotel |
/h/{slug}/reserva |
Formulario de reserva |
ERP (Autenticado)
| Rota |
Descricao |
/dashboard |
Dashboard com KPIs |
/quartos |
Gestao de quartos |
/reservas |
Gestao de reservas |
/reservas/{id} |
Detalhe da reserva |
/ambientes |
Gestao de ambientes |
/cafe |
Gestao de cafe da manha |
/limpeza |
Housekeeping |
/consumo |
Consumo dos hospedes |
/cupons |
Gestao de cupons |
/clientes |
Gestao de clientes |
/pagamentos |
Gestao de pagamentos |
/notas-fiscais |
Emissao de NFS-e |
/relatorios |
Relatorios financeiros |
/configuracoes |
Config do hotel |
/configuracoes/comunicacao |
WhatsApp + Email templates |
/plano |
Plano de assinatura |
Admin (Master/Owner)
| Rota |
Descricao |
/admin |
Dashboard admin |
/admin/tenants |
Gestao de tenants |
/admin/users |
Gestao de usuarios |
/admin/logs |
Logs do sistema |
API Client
Configuracao (api/client.ts)
Dois clients Axios:
apiClient — Autenticado (token + hotel ID)publicClient — Publico (sem auth)
Interceptors:
- Request: Adiciona
Authorization: Bearer {token} e X-Hotel-Id: {hotelId}
- Response: 401 → logout automatico
Modulos BFF (api/bff/)
24 modulos de servico organizados por funcionalidade:
| Modulo |
Funcao |
auth.ts |
Login, signup, OTP, OAuth2, password reset |
hotels.ts |
CRUD hoteis |
rooms.ts |
CRUD quartos + disponibilidade + duplicacao |
reservations.ts |
CRUD reservas + check-in/out + pagamentos |
breakfast.ts |
Config cafe + pedidos + restaurantes |
venues.ts |
CRUD ambientes |
customers.ts |
CRUD clientes |
payments.ts |
Processamento de pagamentos |
coupons.ts |
Gestao de cupons |
housekeeping.ts |
Tarefas de limpeza |
consumption.ts |
Consumo de hospedes |
nfse.ts |
Notas fiscais |
dashboard.ts |
Analytics e KPIs |
public.ts |
Booking publico |
whatsappConfig.ts |
Config WhatsApp + templates |
emailConfig.ts |
Config email SMTP |
upload.ts |
Upload de arquivos |
permissions.ts |
Verificacao de permissoes |
subscription.ts |
Plano e features |
pricing.ts |
Precificacao de quartos |
Hooks (React Query)
| Hook |
Dados |
useAuth() |
Login, logout, OTP, refresh |
useCurrentHotel() |
Hotel ativo |
useRooms() |
CRUD quartos + stats |
useReservations() |
CRUD reservas + check-in/out |
useBreakfast() |
Config + pedidos diarios |
useDashboard() |
KPIs e graficos |
usePermissions() |
hasPermission(), isManager |
useCoupons() |
CRUD cupons |
useConsumption() |
Consumo hospedes |
useNfse() |
Notas fiscais |
Componentes Chave
Layout
- MainLayout — Sidebar + conteudo
- Sidebar — Menu dinamico por role + hotel switcher
- AdminLayout — Layout do painel admin
Settings (Comunicacao)
- WhatsAppTemplatesSection — Lista lateral + editor de templates WhatsApp
- EmailTemplatesSection — Lista lateral + editor HTML + preview
Public
- Hotel page — Info, galeria, amenidades
- Booking form — Calendario + disponibilidade + pagamento
Testes
| Tipo |
Ferramenta |
Localizacao |
| Unit |
Vitest |
tests/unit/ |
| Integration |
Testing Library + Vitest |
tests/integration/ |
| E2E |
Playwright |
tests/hotelA/, tests/hotelB/ |
| API |
Speckit |
tests/api/ |
| Multi-tenant |
Playwright |
tests/multi-tenant/ |