Crie uma interface web responsiva de um dashboard para um microsaaS de afiliados da Shopee.
A tela deve conter:
-
Um menu lateral com ícones e itens:
- Dashboard
- Importar Planilha
- Tráfego Pago
- Relatórios
- Perfil
-
No painel principal do dashboard, exiba os seguintes cards de KPI no topo (em grade de 2 colunas no mobile e 4 no desktop), cada um com ícone e valor grande:
- Total de Cliques
- Total de Vendas
- Vendas Aprovadas
- Vendas Pendentes
- Vendas Canceladas
- Comissões Totais
- ROI (%)
- Valor Investido (R$)
- Conversão (%)
- Ticket Médio (R$)
-
Abaixo dos KPIs, exiba dois gráficos:
- Um gráfico de pizza com a distribuição das vendas por status (Aprovadas, Pendentes, Canceladas)
- Um gráfico de linha com a evolução diária de cliques e vendas
-
Abaixo dos gráficos, mostre uma tabela com os produtos mais vendidos, com colunas:
- Nome do Produto
- Quantidade Vendida
- Comissões Geradas
- Taxa de Conversão
-
No canto superior direito da tela, adicione:
- Seletor de período (últimos 7, 15, 30 dias ou personalizado)
- Botão “Importar Planilha”
Use TailwindCSS para o layout. Os componentes devem ser bem espaçados, com cantos arredondados (2xl), sombra suave, e uma paleta de azul e cinza claro.
O layout deve ser limpo, com ícones intuitivos e uma tipografia moderna.
Não use dados reais, mas adicione conteúdo de exemplo fictício nos cards e tabelas para visualização.
Vou criar um dashboard completo e responsivo para o microsaaS de afiliados da Shopee usando os componentes shadcn/ui e uma estrutura moderna.
Criei um dashboard completo e responsivo para o microsaaS de afiliados da Shopee com todas as funcionalidades solicitadas:
Características Principais:
1. Menu Lateral Responsivo 1
- Sidebar colapsível com ícones intuitivos
- Navegação clara entre Dashboard, Importar Planilha, Tráfego Pago, Relatórios e Perfil
- Design moderno com logo da aplicação
2. Cards de KPI
- 10 métricas principais organizadas em grid responsivo (2 colunas no mobile, 5 no desktop)
- Cada card mostra valor, ícone e variação percentual
- Cores indicativas para crescimento positivo/negativo
3. Gráficos Interativos
- Gráfico de pizza para distribuição de vendas por status
- Gráfico de linha para evolução diária de cliques e vendas
- Tooltips e legendas para melhor visualização
4. Tabela de Produtos
- Lista dos produtos mais vendidos
- Colunas organizadas com dados de performance
- Destaque visual para comissões geradas
5. Controles Superiores
- Seletor de período (7, 15, 30 dias ou personalizado)
- Botão de importar planilha com ícone
Design e UX:
- Paleta azul e cinza claro profissional
- Cantos arredondados (rounded-2xl) e sombras suaves
- Layout limpo e bem espaçado
- Totalmente responsivo para mobile e desktop
- Tipografia moderna e hierarquia visual clara
O dashboard usa dados fictícios realistas para demonstração e está pronto para integração com APIs reais.
Sources
Sim, as informações de quantidade de cliques e tráfego pago podem ser obtidas através de APIs, principalmente:
- APIs de plataformas de anúncios: Google Ads API, Facebook Ads API, TikTok Ads API
- APIs de tracking: Google Analytics API, UTM parameters tracking
- APIs de encurtadores de URL: Bitly API, TinyURL API para rastrear cliques
- Webhooks e pixels de conversão para capturar dados em tempo real
- APIs de afiliados: Algumas redes de afiliação fornecem APIs para dados de performance
Essas APIs permitem coletar dados de cliques, impressões, custos e conversões automaticamente.