Marcelo Areco reviewers: [] created: 2026-07-02 updated: 2026-07-02 tags:
crm
ui
ux

Interface do Usuário¶

Objetivo¶

Definir o padrão oficial de interface do CoreFlow CRM.

Todas as telas deverão seguir identidade visual única, navegação consistente e experiência uniforme.

Tecnologias¶

React
Next.js
TypeScript
Tailwind CSS

Layout¶

Estrutura padrão:

┌────────────────────────────────────────────┐
│ Header                                     │
├──────────────┬─────────────────────────────┤
│ Sidebar      │ Conteúdo                    │
│              │                             │
│              │                             │
├──────────────┴─────────────────────────────┤
│ Footer                                     │
└────────────────────────────────────────────┘

Componentes¶

Logo
Busca Global
Notificações
Empresa Ativa
Usuário
Perfil

Dashboard
Leads
Contacts
Accounts
Opportunities
Activities
Campaigns
Proposals
Customer Success
Relatórios
Configurações

Dashboard¶

Widgets:

Leads
Conversões
Pipeline
Receita Prevista
Atividades
Campanhas
NPS

Listagens¶

Toda listagem deverá possuir:

Busca
Filtros
Ordenação
Paginação
Exportação
Seleção múltipla

Formulários¶

Todos os formulários deverão possuir:

Validação
Mensagens claras
Salvamento seguro
Cancelamento
Auditoria

Botões¶

Primários

Salvar
Criar
Confirmar

Secundários

Cancelar
Voltar
Limpar

Perigosos

Excluir
Arquivar

Cores¶

Sucesso

Verde

Aviso

Amarelo

Erro

Vermelho

Informação

Azul

Ícones¶

Biblioteca oficial:

Material Symbols

Responsividade¶

Obrigatória.

Suportar:

Desktop
Notebook
Tablet
Mobile

Acessibilidade¶

Obrigatório:

WCAG
Navegação por teclado
Alto contraste
Labels
ARIA

Tema¶

Suportar:

Light
Dark

Tabelas¶

Padrão:

Colunas configuráveis
Ordenação
Paginação
Ações rápidas
Exportação

Modais¶

Utilizar para:

Confirmações
Visualização rápida
Edição simples

Notificações¶

Tipos:

Sucesso
Erro
Aviso
Informação

Upload¶

Permitir:

Drag & Drop
Barra de progresso
Múltiplos arquivos
Pré-visualização

Padrões¶

Toda tela deverá possuir:

Breadcrumb
Título
Descrição
Barra de ações
Conteúdo
Rodapé

Performance¶

Lazy Loading
Infinite Scroll quando aplicável
Skeleton Loading
Cache de navegação

Segurança¶

Respeitar RBAC
Ocultar ações sem permissão
Validar permissões também no Backend

Objetivo Final¶

Disponibilizar uma interface moderna, consistente, responsiva e acessível, proporcionando alta produtividade aos usuários e mantendo conformidade com os padrões visuais da CoreFlow Platform.