saveinmed/frontend

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/):

// ✅ 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

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