saveinmed/frontend/MARKETPLACE.md

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.

---

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)

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

🧪 Testes

O projeto utiliza Vitest para testes unitários:

# 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:

# 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

# Instalar dependências
npm install

# Modo desenvolvimento
npm run dev

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

🏗️ Build e Produção

# 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

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:

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:

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

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

🧪 Testes

# 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

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

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

npm install -g vercel
vercel

Netlify

npm run build
# Fazer upload da pasta dist/

Docker

# 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
• SaveInMed BFF: Pode usar como proxy para múltiplas APIs

📝 Licença

MIT