# Frontend — SaveInMed Marketplace

React + Vite + TypeScript + Tailwind CSS

## Estrutura de `src/`

```
src/
├── assets/         → Logo, imagens estáticas
├── components/     → Componentes reutilizáveis
├── context/        → React Context (auth, tema) — estado global estável
├── hooks/          → Custom hooks
├── layouts/        → Layouts de página (Shell, DashboardLayout)
├── pages/          → Páginas organizadas por contexto e perfil
│     ├── auth/           → Login
│     ├── marketplace/    → Search, Cart, Checkout, Orders, OrderDetails
│     └── dashboard/
│           ├── admin/    → Painel administrativo (role admin)
│           ├── seller/   → Inventário, Produtos, Carteira, Equipe
│           ├── employee/ → Dashboard do colaborador
│           ├── delivery/ → Dashboard do entregador
│           ├── Company.tsx
│           └── MyProfile.tsx
├── services/       → Clientes HTTP por domínio
├── stores/         → Zustand (carrinho, filtros, UI global)
├── types/          → Tipos TypeScript compartilhados
└── utils/          → format, jwt, logger
```

## Importações absolutas

Utilize o alias `@/` (aponta para `src/`):

```tsx
// ✅ Correto
import { useAuth } from '@/context/AuthContext'

// ❌ Evitar (quebra ao mover o arquivo)
import { useAuth } from '../../context/AuthContext'
```

## Gerenciamento de estado

| Estado | Estratégia |
|--------|-----------|
| Auth (JWT, user) | Context API (`AuthContext`) |
| Tema claro/escuro | Context API (`ThemeContext`) |
| Carrinho | Zustand (`cartStore`) |
| Filtros de busca | Zustand / `usePersistentFilters` |
| Estado UI local | `useState` no componente |

> **Regra:** Context apenas para auth e tema. Tudo mais vai para Zustand.

## Scripts

```bash
pnpm dev      # Dev server (proxy → :8214)
pnpm build    # Build produção
pnpm test     # Testes (Vitest)
pnpm lint     # ESLint
```