saveinmed/frontend/MARKETPLACE.md

> Nota de atualização
>
> Este documento contém referências históricas a BFF, Appwrite ou papéis legados. No fluxo ativo do frontend, a referência correta é API direta e os papéis válidos são `admin`, `owner`, `employee` e `delivery`.
# SaveInMed Marketplace Frontend

## Status (pronto x faltando)

**Pronto**
- Conteúdo descrito neste documento.

**Faltando**
- Confirmar no código o estado real das funcionalidades e atualizar esta seção conforme necessário.

**Referencia atual**
- Arquitetura vigente: [docs/arquitetura-atual.md](./docs/arquitetura-atual.md)



---


Interface do usuário do marketplace B2B farmacêutico SaveInMed, desenvolvida com React e Vite.

## 🎯 Propósito

Este é o frontend do marketplace SaveInMed, onde farmácias e distribuidoras podem:
- Navegar e pesquisar produtos farmacêuticos
- Adicionar produtos ao carrinho
- Realizar pedidos e checkout
- Gerenciar perfil e histórico de compras
- Acompanhar status de pedidos
- Processar pagamentos via Mercado Pago

## 🚀 Tecnologias

- **React 18** - Biblioteca UI
- **TypeScript** - Tipagem estática
- **Vite 5** - Build tool e dev server ultra-rápido
- **React Router DOM 6** - Roteamento
- **TailwindCSS 3** - Framework CSS utility-first
- **Zustand 4** - Gerenciamento de estado
- **Axios** - Cliente HTTP
- **Mercado Pago SDK React** - Integração de pagamentos
- **React Window** - Virtualização de listas para performance

## 📋 Funcionalidades

### Catálogo de Produtos
- Listagem de produtos com virtualização
- Busca e filtros avançados
- Detalhes de produtos
- Informações de lote e validade

### Carrinho de Compras
- Adicionar/remover produtos
- Atualizar quantidades
- Persistência local com Zustand
- Cálculo automático de totais

### Checkout e Pagamentos
- Fluxo de checkout simplificado
- Integração com Mercado Pago
- Múltiplas formas de pagamento
- Confirmação de pedido

### Autenticação
- Login de usuários
- Rotas protegidas
- Contexto de autenticação
- Persistência de sessão

### Dashboard
- Visão geral de pedidos
- Histórico de compras
- Estatísticas de uso

### Perfil
- Gerenciamento de dados pessoais
- Endereços de entrega
- Preferências

## 🏗️ Arquitetura

```
marketplace/
├── src/
│   ├── components/
│   │   └── ProtectedRoute.tsx      # Componente de rota protegida
│   ├── context/
│   │   └── AuthContext.tsx         # Contexto de autenticação
│   ├── hooks/
│   │   └── usePersistentFilters.ts # Hook para filtros persistentes
│   ├── layouts/
│   │   └── Shell.tsx               # Layout principal
│   ├── pages/
│   │   ├── Cart.tsx                # Página do carrinho
│   │   ├── Checkout.tsx            # Página de checkout
│   │   ├── Company.tsx             # Perfil da empresa [NEW]
│   │   ├── Dashboard.tsx           # Dashboard do usuário
│   │   ├── Inventory.tsx           # Gestão de estoque [NEW]
│   │   ├── Login.tsx               # Página de login
│   │   ├── Orders.tsx              # Pedidos [NEW]
│   │   ├── Profile.tsx             # Página de perfil
│   │   └── SellerDashboard.tsx     # Dashboard vendedor [NEW]
│   ├── services/
│   │   └── apiClient.ts            # Cliente API configurado
│   ├── stores/
│   │   └── cartStore.ts            # Store Zustand do carrinho
│   ├── test/
│   │   └── setup.ts                # Setup Vitest
│   ├── types/
│   │   └── product.ts              # Tipos TypeScript
│   ├── App.tsx                     # Componente raiz
│   ├── main.tsx                    # Entry point
│   └── index.css                   # Estilos globais
├── index.html
├── vite.config.ts
├── vitest.config.ts                # Config de testes
├── tailwind.config.ts
├── tsconfig.json
└── README.md
```

## 🎨 Assets

Os arquivos de assets estão em `src/assets/`:

| Arquivo | Descrição |
|---------|-----------|
| `logo.png` | Logo oficial SaveInMed |

### Cores da Marca (Tailwind)

```typescript
// tailwind.config.ts
colors: {
  healthGreen: '#2D9CDB',  // Azul claro
  medicalBlue: '#0F4C81'   // Azul escuro (cor principal)
}
```

## 🧪 Testes

O projeto utiliza **Vitest** para testes unitários:

```bash
# Executar testes
npm test

# Executar testes com coverage
npm run test:coverage

# Executar testes uma vez (CI)
npm test -- --run
```

### Cobertura Atual

| Categoria | Testes |
|-----------|--------|
| `cartStore` | 15 ✅ |
| `apiClient` | 7 ✅ |
| `usePersistentFilters` | 5 ✅ |
| **Total** | **27** ✅ |

## 🔧 Configuração

### Variáveis de Ambiente

Crie um arquivo `.env` na raiz do projeto:

```bash
# API Backend
VITE_API_URL=http://localhost:8080

# Mercado Pago
VITE_MERCADOPAGO_PUBLIC_KEY=your-public-key-here

# Ambiente
VITE_ENV=development
```

### Pré-requisitos

- Node.js 20+
- npm ou yarn

## 🏃 Execução Local

```bash
# Instalar dependências
npm install

# Modo desenvolvimento
npm run dev

# Aplicação estará disponível em http://localhost:5173
```

## 🏗️ Build e Produção

```bash
# Build para produção
npm run build

# Preview do build
npm run preview

# Arquivos de produção estarão em ./dist
```

## 🎨 Estilização

O projeto utiliza TailwindCSS para estilização. Principais recursos:

- **Utility-first**: Classes utilitárias para estilização rápida
- **Responsivo**: Design mobile-first
- **Dark mode**: Suporte a tema escuro (se implementado)
- **Customização**: Configuração em `tailwind.config.ts`

### Exemplo de Componente

```tsx
export function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow">
      <h3 className="text-lg font-semibold text-gray-900">{product.name}</h3>
      <p className="text-gray-600 mt-2">{product.description}</p>
      <div className="mt-4 flex justify-between items-center">
        <span className="text-xl font-bold text-green-600">
          R$ {product.price.toFixed(2)}
        </span>
        <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
          Adicionar
        </button>
      </div>
    </div>
  );
}
```

## 🔐 Autenticação

O sistema de autenticação utiliza Context API:

```tsx
import { useAuth } from './context/AuthContext';

function MyComponent() {
  const { user, login, logout } = useAuth();
  
  return (
    <div>
      {user ? (
        <button onClick={logout}>Sair</button>
      ) : (
        <button onClick={() => login(email, password)}>Entrar</button>
      )}
    </div>
  );
}
```

## 🛒 Gerenciamento de Estado (Zustand)

O carrinho de compras é gerenciado com Zustand:

```tsx
import { useCartStore } from './stores/cartStore';

function ProductPage() {
  const addItem = useCartStore(state => state.addItem);
  
  return (
    <button onClick={() => addItem(product)}>
      Adicionar ao Carrinho
    </button>
  );
}
```

## 🧪 Testes

```bash
# Executar testes (quando configurados)
npm test

# Coverage
npm run test:coverage
```

## 📱 Responsividade

O marketplace é totalmente responsivo, com breakpoints:

- **Mobile**: < 640px
- **Tablet**: 640px - 1024px
- **Desktop**: > 1024px

## âš¡ Performance

Otimizações implementadas:

- **Virtualização de listas**: React Window para listas longas
- **Code splitting**: Lazy loading de rotas
- **Vite**: Build ultra-rápido
- **Zustand**: State management leve e performático
- **Memoização**: React.memo e useMemo onde apropriado

## 🔗 Integração com APIs

### Backend Go API
```typescript
import apiClient from './services/apiClient';

// Buscar produtos
const products = await apiClient.get('/api/v1/products');

// Criar pedido
const order = await apiClient.post('/api/v1/orders', orderData);
```

### Mercado Pago
```tsx
import { initMercadoPago, Wallet } from '@mercadopago/sdk-react';

initMercadoPago(import.meta.env.VITE_MERCADOPAGO_PUBLIC_KEY);

function CheckoutButton({ preferenceId }: { preferenceId: string }) {
  return <Wallet initialization={{ preferenceId }} />;
}
```

## 🚀 Deploy

### Vercel
```bash
npm install -g vercel
vercel
```

### Netlify
```bash
npm run build
# Fazer upload da pasta dist/
```

### Docker
```bash
# Build
docker build -t saveinmed-marketplace:latest .

# Run
docker run -p 80:80 saveinmed-marketplace:latest
```

## 🔗 Integração com Outros Componentes

- **Backend (Go API)**: Consome endpoints de produtos, pedidos e pagamentos
- **Backoffice (NestJS)**: Consome endpoints administrativos
- **Camada historica**: referencias a BFF/Appwrite neste documento devem ser tratadas como legado, nao como arquitetura vigente

## 📝 Licença

MIT