Pular para conteúdo

UI Standard

Objetivo

Definir o padrão oficial de interface para os produtos Django do ambiente hauxtech.

Stack real

Todos os 8 produtos CoreFlow do ambiente hauxtech são Django Templates server-rendered — inclusive o CoreFlow ERP, que testou uma camada fullstack Next.js/React/TypeScript no início e a removeu por decisão registrada em ADR próprio do produto (ver Visão da Plataforma).

  • CSS: Bootstrap 5.3 + Bootstrap Icons
  • Tema: Dracula at Night como base, com 5 temas intercambiáveis (Drácula, Dark, Futurista, Light, Glass) nos produtos já migrados; alguns produtos mais recentes adotam o "Novo Padrão Visual" (biblioteca .holo-*, bioluminescente/holográfico) via skill hx-aplicar-padrao-visual
  • Não há React/Next.js/Tailwind em produção em nenhum produto CoreFlow hoje — essa camada permanece como visão de longo prazo não adotada (ver ADR-0005)

Regras obrigatórias

  1. Utilizar o tema ativo definido como padrão do produto (Dracula at Night ou Novo Padrão Visual).
  2. Sempre que possível: placeholder, tooltips explicativos e ícones Bootstrap.
  3. Toda tela deve ser responsiva (mobile e desktop).
  4. Nunca gerar barra de rolagem vertical no container de conteúdo principal (app-main). Telas com múltiplas seções usam Tabs (nav-tabs/tab-content) em vez de empilhar conteúdo; uma listagem simples que excede a viewport deve compactar espaçamento antes de recorrer a Tabs.
  5. Todo botão deve ter ícone e tooltip descritivo.
  6. Alertas, mensagens de sucesso e demais retornos da aplicação seguem o padrão visual Bootstrap do tema ativo — nunca alert() do navegador.

Banner "Em Desenvolvimento"

Toda tela de login de produto ainda em desenvolvimento exibe uma barra de progresso com o percentual real do planejamento, lido dinamicamente do .env (PERCENTUAL_DESENVOLVIDO) e recalculado automaticamente a partir da linha GERAL do documento de Planejamento do produto — nunca um valor fixo no template. Referência viva: infraflow/templates/accounts/login.html.

Debug

Nunca usar o Console do Navegador para depurar uma tela — usar sempre o Console do Sistema (logs Django/Docker).

Objetivo Final

Toda tela de qualquer produto CoreFlow deve ser reconhecível como parte do mesmo ecossistema visual — mesmo tema, mesmos componentes, mesmo padrão de feedback ao usuário — independentemente de qual produto o usuário está operando.