Dashboard Mercado Livre

Dashboard web para gerenciar sua conta do Mercado Livre usando o MCP Server via API REST.

🚀 Tecnologias

• Vite - Build tool
• React 18 - Framework
• TypeScript - Linguagem
• Tailwind CSS - Estilização
• shadcn/ui - Componentes
• React Router - Roteamento
• Axios - Cliente HTTP

📦 Instalação

cd ML/dashboard
npm install

⚙️ Configuração

O dashboard se conecta ao MCP Server via proxy configurado no vite.config.ts:

proxy: {
  '/api': {
    target: 'http://localhost:3300',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
  },
}

Certifique-se de que o MCP Server está rodando em modo REST na porta 3300:

cd ../mcp-server
MCP_MODE=rest MCP_PORT=3300 npm start

🎯 Uso

Desenvolvimento

npm run dev

Acesse: http://localhost:5173

Build

npm run build

Preview

npm run preview

📱 Funcionalidades

✅ Implementadas

• Dashboard - Visão geral com estatísticas
• Produtos - Buscar e listar produtos
• Layout - Navegação lateral responsiva

🚧 Em Desenvolvimento

• Produtos - Criar, editar, pausar, ativar
• Pedidos - Listar e gerenciar pedidos
• Perguntas - Responder perguntas
• Envios - Gerar etiquetas e rastrear
• Métricas - Gráficos e análises

🎨 Estrutura

dashboard/
├── src/
│   ├── components/
│   │   ├── ui/          # Componentes shadcn/ui
│   │   └── Layout.tsx   # Layout principal
│   ├── pages/
│   │   ├── Dashboard.tsx
│   │   ├── Products.tsx
│   │   ├── Orders.tsx
│   │   ├── Questions.tsx
│   │   ├── Shipments.tsx
│   │   └── Metrics.tsx
│   ├── lib/
│   │   ├── api.ts       # Cliente API
│   │   └── utils.ts     # Utilitários
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── index.html
├── vite.config.ts
├── tailwind.config.js
└── package.json

🔌 API

Todas as chamadas são feitas através do proxy /api que redireciona para o MCP Server:

// Exemplo: Buscar produtos
import { searchProducts } from '@/lib/api';

const response = await searchProducts('notebook', 20);

🎯 Próximos Passos

1. Implementar CRUD completo de produtos
2. Adicionar gerenciamento de pedidos
3. Sistema de respostas automáticas para perguntas
4. Geração de etiquetas em lote
5. Dashboard com gráficos de métricas
6. Notificações em tempo real
7. Tema escuro
8. Responsividade mobile

📝 Licença

MIT