Nortus - Interface de Inteligência de Atendimento

Desafio React Pleno - Loomi

Este projeto é a implementação de uma interface de alta fidelidade para a plataforma Nortus, como parte do Desafio React Pleno da Loomi. A aplicação foi construída seguindo as melhores práticas de desenvolvimento com Next.js, focando em uma arquitetura robusta, componentizada e escalável.

🎥 Demonstração

Login

Dashboard parte 1

Dashboard parte 2

Gestão de tickets parte 1

Gestão de tickets parte 2

Chat

📝 Sobre o Projeto

A Nortus é uma solução de inteligência artificial para times de vendas e atendimento que utiliza dados comportamentais, análise de perfil e sugestão inteligente de produtos e planos. Esta aplicação é a interface que os operadores e gestores da Nortus utilizam para interagir com clientes, gerenciar tickets de suporte, analisar métricas de performance e receber sugestões da IA para otimizar o atendimento.

✨ Funcionalidades Implementadas

O escopo obrigatório do desafio foi totalmente implementado:

• ✅ Autenticação de Usuário:

  • Tela de login com validação de e-mail e senha.
  • Funcionalidade de visualizar/ocultar senha.
  • Armazenamento de token em cookies e dados do usuário em localStorage.
  • Rotas protegidas com Middleware do Next.js.

• ✅ Dashboard de KPIs:

  • Visualização de métricas principais (ARPU, Retenção, Churn, Conversão) com gráficos dinâmicos.
  • Mapa interativo de clientes por região com marcadores.
  • Gráfico de impacto por segmento.

• ✅ Gestão de Tickets:

  • Listagem de tickets com prioridades e status visuais.
  • Filtros dinâmicos por status, prioridade e responsável.
  • Modal para criação e edição de tickets com validação de campos.
  • Atualização automática da tabela após criar ou editar um ticket.

• ✅ Chat & Assistente Virtual:

  • Interface de chat com sugestões contextuais da IA exibidas claramente.
  • Painel lateral com a Visão 360° do cliente, exibindo histórico de interações e insights inteligentes.
  • Botões para ações rápidas como "Enviar proposta" e "Fazer ligação".

🚀 Tecnologias Utilizadas

Este projeto foi construído com uma stack moderna, seguindo as tecnologias exigidas e recomendadas no desafio:

• Framework: Next.js (v12+)
• Linguagem: TypeScript
• Estilização: Tailwind CSS
• Gestão de Estado: TanStack Query e Zustand
• Formulários: React Hook Form
• Validação de Schemas: Zod
• Componentes de UI: Radix UI (para Modal e Selects acessíveis)
• Gráficos: ApexCharts.js
• Mapas: OpenLayers
• Notificações (Toasts): Sonner
• Internacionalização (i18n): next-intl
• Linting & Formatting: ESLint e Prettier

🏁 Como Executar o Projeto

1. Clonar o repositório:

git clone https://github.com/luispaganini/nortus.git
cd nortus

2. Instalar as dependências:

npm install

3. Configurar variáveis de ambiente:

cp .env.example .env

4. Rodar o projeto:

npm run dev

A aplicação estará disponível em http://localhost:3000.

🌐 API Mockada

Conforme especificado no desafio, todos os dados são consumidos a partir de uma API simulada. Os endpoints e a estrutura de dados seguem a documentação fornecida, com a base URL em:

https://loomi.s3.us-east-1.amazonaws.com/mock-api-json/v2

🤖 Uso de Inteligência Artificial

O uso de IA, especificamente o Google Gemini, foi um pilar central no desenvolvimento deste projeto, atuando como um parceiro de programação (pair programming partner), conforme incentivado no desafio.

Decisões e implementações baseadas em sugestões da IA:

• Arquitetura de Hooks: A separação da lógica de estado (ex: useTicketModal) e mutações (ex: useTicketMutations) em hooks customizados foi uma sugestão da IA para limpar os componentes.
• Gestão de Estado Profissional: A decisão de usar TanStack Query para gerenciar o estado do servidor, incluindo a invalidação de cache para atualização automática da UI, foi refinada com o auxílio da IA.
• Debugging e Refatoração: A IA foi fundamental para identificar e corrigir erros complexos de layout (Flexbox/Grid), bugs de Suspense no Next.js e erros de tipagem em TypeScript.
• Geração de Código: A IA auxiliou na geração de código boilerplate para componentes, esquemas Zod e na implementação de bibliotecas como OpenLayers e Radix UI.
• Documentação: Este README foi gerado com o auxílio e revisão da IA para garantir clareza e profissionalismo.

👨‍💻 Autor

Luis Fernando Paganini

• LinkedIn: https://www.linkedin.com/in/luispaganini/
• GitHub: https://github.com/luispaganini
• E-mail: luisfernando_paganini@hotmail.com