Magalu Dashboard

Dashboard web para gerenciar todas as funcionalidades da API Magalu Marketplace.

Tecnologias

• ⚡ Vite
• ⚛️ React 18
• 📘 TypeScript
• 🎨 Tailwind CSS
• 🧩 shadcn/ui
• 🔄 React Query
• 🛣️ React Router

Funcionalidades

📦 Produtos

• Listar todos os SKUs
• Criar novos produtos
• Editar produtos existentes
• Gerenciar preços
• Controlar estoque
• Visualizar scores de otimização

📋 Pedidos

• Listar pedidos
• Filtrar por status
• Ver detalhes de pedidos
• Gerenciar entregas
• Consultar notas fiscais

🎫 SAC

• Listar tickets de atendimento
• Filtrar por status
• Ver detalhes de tickets
• Atualizar status

❓ Perguntas & Respostas

• Listar perguntas de clientes
• Filtrar por status (respondidas/não respondidas)
• Responder perguntas
• Filtrar por produto

💬 Chat com Cliente

• Listar conversas ativas
• Ver histórico de mensagens
• Enviar mensagens
• Filtrar por status

⚙️ Configurações

• Configurar API Key
• Configurar Seller ID
• Alternar entre Sandbox e Production

Instalação

cd Magalu/dashboard
npm install

Configuração

Crie um arquivo .env baseado no .env.example:

cp .env.example .env

Edite o .env:

VITE_API_URL=https://sandbox.api.magalu.com

Desenvolvimento

npm run dev

O dashboard estará disponível em http://localhost:5173

Build para Produção

npm run build

Os arquivos otimizados estarão na pasta dist/.

Preview da Build

npm run preview

Estrutura do Projeto

dashboard/
├── src/
│   ├── components/
│   │   ├── ui/           # Componentes shadcn/ui
│   │   └── Layout.tsx    # Layout principal
│   ├── pages/
│   │   ├── Products.tsx      # Página de produtos
│   │   ├── Orders.tsx        # Página de pedidos
│   │   ├── Tickets.tsx       # Página de SAC
│   │   ├── Questions.tsx     # Página de perguntas
│   │   ├── Conversations.tsx # Página de chat
│   │   └── Settings.tsx      # Página de configurações
│   ├── lib/
│   │   ├── api.ts        # Cliente HTTP
│   │   └── utils.ts      # Utilitários
│   ├── App.tsx           # Componente principal
│   ├── main.tsx          # Entry point
│   └── index.css         # Estilos globais
├── index.html
├── vite.config.ts
├── tailwind.config.js
└── package.json

Uso

1. Acesse a página de Configurações
2. Configure sua API Key e Seller ID
3. Escolha o ambiente (Sandbox ou Production)
4. Salve as configurações
5. Navegue pelas diferentes seções usando o menu lateral

Credenciais

As credenciais são armazenadas no localStorage do navegador:

• magalu_token - API Key
• magalu_seller_id - Seller ID
• magalu_env - Ambiente (sandbox/production)

Endpoints da API

Todos os endpoints seguem o padrão da API Magalu:

• Produtos: /v1/portfolio/skus
• Pedidos: /v1/orders
• SAC: /v1/sac/tickets
• Perguntas: /v1/questions
• Chat: /v1/conversations

Customização

Cores

Edite as variáveis CSS em src/index.css para personalizar o tema.

Componentes

Os componentes UI estão em src/components/ui/ e podem ser customizados conforme necessário.

Troubleshooting

Erro de CORS

Configure o CORS no backend ou use um proxy durante o desenvolvimento.

Credenciais inválidas

Verifique se a API Key e Seller ID estão corretos na página de Configurações.

Ambiente incorreto

Certifique-se de estar usando o ambiente correto (Sandbox para testes).

Licença

MIT