Américo Barber - Frontend

SPA em React 18 + TypeScript, Vite, TailwindCSS. Tema: preto (#0B0B0B), dourado (#C6A75E), branco (#FFFFFF).

Stack

• React, TypeScript, Vite
• TailwindCSS, React Router, Axios
• React Hook Form, Context API (auth)
• JWT no localStorage, interceptor Axios

Estrutura

• components/ui: Button, Input, Select, Card, Modal, Badge, Table
• components/layout: Layout, Sidebar, Navbar
• pages/auth: Login, Register
• pages/client: Dashboard, Appointments, History, Schedule
• pages/admin: Dashboard, Barbers, Services, Appointments, Clients
• pages/barber: Dashboard, Appointments, Availability
• services: api, authService, clientService, barberService, adminService, appointmentService, serviceService
• context: AuthContext (role, isBarber)
• routes: ProtectedRoute (allowedRoles, requireBarber para painel do barbeiro)

Roles: apenas ROLE_ADMIN e ROLE_CLIENT. Barbeiros são admins com isBarber=true; o menu e as rotas /barber/* são exibidos só para eles. Registro público cria apenas clientes.

Executar

cp .env.example .env
npm install
npm run dev

Acesse http://localhost:5173. Com VITE_API_URL vazio, o proxy do Vite envia /api para o backend em 6060.

Variáveis de ambiente (.env)

• VITE_API_URL: URL base da API. Vazio = mesmo origin (proxy em dev). Em produção: ex. https://api.americobarber.com

Build

npm run build

Para produção, defina VITE_API_URL no .env com a URL base da API.