Micro-SaaS & MVPs
Claude 3.5 Sonnet
Dashboard de Métricas e Gráficos em React + Chart.js
Dashboard com cards de KPI (MRR, Churn, LTV), gráfico temporal, rosca e tabela paginada.
0cópias
0joinhas
0favoritos
O prompt
Crie o painel administrativo {{nome_dashboard}} para SaaS, moderno e responsivo, utilizando React e Chart.js (ou Recharts).
Parâmetros:
- Nome do Painel: {{nome_dashboard}}
- Moeda: {{moeda}}
Componentes da Interface:
1. Linha superior de KPIs com 4 cards: MRR (Receita Recorrente Mensal, exibido em {{moeda}}), Churn Rate, Novos Clientes e LTV, com indicadores percentuais verdes/vermelhos em relação ao mês anterior.
2. Gráfico principal de área/linha com receita nos últimos 12 meses e seletor de intervalo (7 dias, 30 dias, 1 ano).
3. Gráfico de distribuição de planos (Starter vs Pro vs Enterprise) em rosca (Doughnut).
4. Tabela de últimas transações com status (Aprovado, Pendente, Falho), avatar do cliente e paginação.
5. Design responsivo com sidebar retrátil e modo escuro/claro.
Como usar
- Substitua {{nome_dashboard}} e {{moeda}} ('BRL').
- Cole no Claude dentro de um projeto React; o chart.js + react-chartjs-2 são instalados automaticamente.
- O dashboard vem com dados mock — substitua os arrays em src/data.ts pelas suas chamadas de API.
- Teste a responsividade: a sidebar colapsa no mobile e o toggle escuro/claro fica no topo direito.
Exemplo de saída
Dashboard (~250 linhas): 4 cards de KPI (MRR, Churn, Novos Clientes, LTV) com indicadores verde/vermelho vs mês anterior, gráfico de área da receita em 12 meses com seletor de intervalo (7d/30d/1a), rosca de distribuição de planos, tabela paginada de transações com status e avatar, sidebar retrátil + dark mode.