Sidebar - Copy this React, Tailwind Component to your project
Estrutura do CRM 1. Página de Login URL: /login Funcionalidade: Autenticação via e mail e senha. Recuperação de senha. Exibição de mensagens de erro, como "Senha incorreta" ou "Usuário não encontrado". Campos: E mail. Senha. Botões: Entrar: Valida credenciais e redireciona para o dashboard. Esqueci minha senha: Envia e mail de redefinição (via SendGrid). Design: Fundo minimalista com o logotipo do escritório. Formulário centralizado. 2. Página Inicial (Dashboard) URL: /dashboard Funcionalidade: Visão geral de KPIs: Total de Leads. Leads Qualificados. Taxa de Conversão. Receita Total. Gráficos interativos: Funil de vendas. Origem dos leads (Google Ads, WhatsApp, etc.). Links rápidos para tarefas pendentes e leads inativos. Seções: Resumo: KPIs e gráficos. Notificações: Tarefas urgentes ou pendências. Botões: Acesso rápido a "Leads", "Pagamentos" e "Contratos". Design: Layout responsivo com painéis em cards. 3. Página de Leads URL: /leads Funcionalidade: Listagem completa dos leads. Filtros: Status (novo, qualificado, convertido, inativo). Fonte do lead. Data de criação. Opção para criar, editar ou excluir leads. Colunas: Nome, E mail, Telefone. Status. Score. Data de Criação. Botões: Adicionar Lead: Abre um formulário para novo cadastro. Ver Detalhes: Exibe informações completas do lead. Editar: Permite alterar informações. Excluir: Solicita confirmação antes de remover. Design: Tabela responsiva com busca em tempo real. 4. Página de Qualificação URL: /leads/qualify/:id Funcionalidade: Exibe detalhes do lead selecionado. Permite atribuir ou ajustar o score. Histórico de interações. Opções para: Enviar mensagens no WhatsApp (via Evolution). Agendar follow ups. Botões: Salvar Alterações: Atualiza os dados no Supabase. Enviar Mensagem: Abre integração com Evolution. Design: Formulário com abas (Detalhes | Interações | Histórico). 5. Página de Contratos URL: /contracts Funcionalidade: Lista de contratos enviados, assinados e pendentes. Filtros: Status (pendente, assinado). Data de envio. Link para visualização do contrato no ZapSign. Colunas: Nome do cliente. Serviço contratado. Status do contrato. Data de envio. Botões: Novo Contrato: Abre formulário para criar contrato. Enviar Lembrete: Reenvia link de assinatura. Design: Tabela com ícones representativos de status. 6. Página de Pagamentos URL: /payments Funcionalidade: Exibe pagamentos realizados e pendentes. Filtros: Status (pago, pendente). Data de vencimento. Integração com Asaas para gerar links de pagamento. Colunas: Nome do cliente. Valor. Data de vencimento. Status do pagamento. Botões: Gerar Link de Pagamento: Cria link via Asaas. Enviar Lembrete: Notifica o cliente. Design: Gráficos de barras para pagamentos mensais. 7. Página de Tarefas URL: /tasks Funcionalidade: Lista de tarefas atribuídas (ex.: follow ups, agendamentos). Opção de marcar tarefas como concluídas. Colunas: Descrição da tarefa. Responsável. Data de vencimento. Status. Botões: Concluir Tarefa: Atualiza o status no banco de dados. Criar Nova Tarefa: Formulário de cadastro. Design: Lista simples com ícones de status. 8. Página de Configurações URL: /settings Funcionalidade: Gerenciamento de usuários: Adicionar ou remover usuários. Ajustar permissões. Configuração de notificações (e mail, WhatsApp). Logs de auditoria. Seções: Perfil do Usuário. Permissões. Integrações (Evolution, SendGrid, ZapSign, Asaas). Botões: Salvar Configurações. Adicionar Usuário.
