ATENÇÃO: esta é uma instrução de desenvolvimento. NÃO renderize nenhuma parte deste prompt na interface. Agora quero um refinamento visual importante do painel administrativo, especialmente do Dashboard, usando como inspiração a imagem de referência que enviei. IMPORTANTE: Use a referência apenas como inspiração de layout e linguagem visual. NÃO copie literalmente o dashboard da referência. Adapte o estilo para o contexto da Hashtag Entrega e do Checklist ROTA. NÃO altere: Supabase banco autenticação RLS lógica do diagnóstico pontuação PDF fluxo comercial WhatsApp regras de negócio permissões Admin/Comercial Objetivo: Deixar o painel com aparência de SaaS premium, clean, moderno, claro e muito bem organizado, com sidebar, cards, gráficos e hierarquia visual forte. 1. DIREÇÃO VISUAL Quero um dashboard com esta sensação: moderno elegante leve profissional bem espaçado com cara de produto SaaS premium visual claro organizado com boa leitura e escaneabilidade A referência possui: sidebar limpa cards bem desenhados boa distribuição de blocos gráficos suaves espaços em branco equilibrados hierarquia clara entre informações Quero essa mesma qualidade visual, mas adaptada à Hashtag. 2. IDENTIDADE VISUAL DA HASHTAG Aplicar a identidade da Hashtag Entrega em todo o painel. Paleta principal: Azul principal: #009FD1 Azul secundário: #0078A8 Navy: #0B2E47 Ink: #14202B Texto secundário: #5C6B78 Fundo claro: #F4F7F9 Bordas: #E1E9EE Destaque claro: #E4F6FA Regras: fundo geral claro; muito branco e tons suaves; azul usado como destaque; navy nos títulos; não deixar tudo azul; evitar poluição visual. 3. ESTRUTURA DO DASHBOARD Quero o Dashboard reorganizado visualmente neste estilo: A. Sidebar lateral Preferência por sidebar fixa à esquerda. Itens: Dashboard Leads Perguntas Usuários Configurações Na parte inferior: usuário logado role botão sair A sidebar deve usar fundo navy/escuro e a logo branca da Hashtag. B. Área principal do Dashboard 1. Header superior No topo da área principal: Título: Visão comercial Subtexto: Acompanhe os leads do Checklist ROTA e priorize as próximas ações. No lado direito, se fizer sentido: seletor de período ações rápidas discretas Também pode ter um pequeno campo de busca, se isso encaixar bem visualmente. 2. Cards de KPI no topo Criar uma primeira linha com cards compactos e elegantes: Novos leads Precisam de atenção Rota em risco Próximas ações Cada card deve ter: número em destaque label pequena ícone discreto visual limpo boa hierarquia 3. Bloco principal em destaque Criar um bloco maior e mais bonito, inspirado no hero da referência. Título: Leads que merecem atenção agora Texto auxiliar: Veja rapidamente quais operações precisam de ação comercial prioritária. Esse bloco pode ocupar posição de destaque no topo ou no miolo do dashboard. Ele deve mostrar 3 a 5 leads prioritários com: restaurante responsável cidade pedidos/dia classificação status principal dificuldade Ações rápidas: Ver diagnóstico PDF WhatsApp Quero aparência premium e útil, não apenas uma tabela simples. 4. Gráficos Adicionar gráficos bem desenhados e suaves, com visual clean. Quero gráficos que façam sentido para o sistema, como: Funil comercial Status: Novo Contatado Reunião marcada Convertido Perdido Pode ser barras horizontais, colunas ou cards por etapa. Diagnósticos por classificação Rota controlada Rota em alerta Rota em risco Evolução de leads por período Se houver dados para isso. Se não houver dados suficientes, use apenas gráficos baseados em informações reais já disponíveis. NÃO inventar dados fictícios. 5. Próximas ações Criar um bloco visual chamado: Próximas ações Mostrar: lead ação data, se existir status Exemplos: fazer primeiro contato enviar diagnóstico follow-up reunião Visual de agenda simples e elegante. 6. Últimos diagnósticos Criar um bloco com os últimos diagnósticos gerados. Mostrar: restaurante classificação data status botão ver 4. LEADS / TABELAS As tabelas devem seguir a nova linguagem visual do painel. Quero: linhas mais elegantes melhor espaçamento bordas suaves hover discreto badges mais bonitos menos sensação de planilha A listagem de leads deve continuar funcional, mas com aparência mais premium. 5. BADGES E STATUS Padronizar visualmente: Classificação Rota controlada Rota em alerta Rota em risco Status comercial Novo Contatado Reunião marcada Convertido Perdido Quero badges bonitos, discretos e consistentes. Evitar exagero de cor. 6. TIPOGRAFIA Usar: Poppins para títulos, números e destaques Manrope para corpo, labels, filtros, tabelas e conteúdos Garantir ótima legibilidade. 7. CARDS E COMPONENTES Refinar: cards dropdowns filtros selects botões inputs menus gráficos blocos laterais Quero consistência real entre todos os componentes. Evitar: sombras pesadas card dentro de card sem necessidade bordas exageradas elementos desalinhados 8. MICROINTERAÇÕES Adicionar somente microinterações discretas: hover suave transição curta feedback visual em botões destaque sutil em cards/linhas Nada chamativo. 9. RESPONSIVIDADE Prioridade principal: desktop notebook Mas manter boa experiência em: tablet mobile No mobile: sidebar pode virar menu recolhido cards empilham gráficos adaptam não esconder dados essenciais 10. RESULTADO ESPERADO Quero que o painel passe esta sensação: “isso parece um produto profissional” “está bonito” “está organizado” “sei rapidamente o que está acontecendo” “tenho clareza sobre o que fazer com os leads” Não quero: dashboard genérico painel frio de CRUD visual de template educacional gráficos sem função excesso de informação desconexa 11. IMPORTANTE Não quebrar o que já funciona. Não substituir funcionalidade por estética. A beleza deve reforçar: clareza prioridade operação comercial Ao finalizar, informe: como a referência foi adaptada; como o dashboard foi reorganizado; quais gráficos foram adicionados; como a sidebar foi implementada ou refinada; como a identidade da Hashtag foi aplicada; como a experiência ficou mais premium.