teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity
testes/Modulos Angular/projects/idt_app/docs/components/GLOBAL_STATUS_SYSTEM.md

11 KiB
Raw Blame History

🎨 SISTEMA GLOBAL DE STATUS - PraFrota

Sistema unificado de estilos para status em toda aplicação Angular, baseado no padrão encontrado em account-payable-items.component.scss.

📋 Índice

🎯 Visão Geral

O Sistema Global de Status padroniza a exibição de status em toda aplicação PraFrota, garantindo:

  • ✅ Consistência Visual: Mesma aparência em todos os componentes
  • ✅ Manutenibilidade: Centralização dos estilos
  • ✅ Escalabilidade: Fácil adição de novos status
  • ✅ Responsividade: Adaptação automática para mobile
  • ✅ Dark Mode: Suporte completo a temas escuros
  • ✅ Acessibilidade: Cores e contrastes adequados

🚀 Instalação e Configuração

1. Arquivo Principal

O sistema está localizado em:

projects/idt_app/src/assets/styles/_status.scss

2. Importação Global

Já está importado automaticamente no app.scss:

@import "_status";

3. Uso Imediato

Não requer configuração adicional. Funciona globalmente em toda aplicação.

📊 Status Disponíveis

💰 Status Financeiros

Classe Label Cor Uso
status-pending Pendente Amarelo Pagamentos pendentes
status-paid Pago Azul Pagamentos realizados
status-approved Aprovado Azul Itens aprovados
status-approved-customer Aprovado Cliente Azul Aprovação do cliente
status-cancelled Cancelado Vermelho Itens cancelados
status-refused Recusado Vermelho Itens recusados

🔄 Status Gerais

Classe Label Cor Uso
status-active Ativo Azul Registros ativos
status-inactive Inativo Cinza Registros inativos
status-suspended Suspenso Amarelo Temporariamente suspenso
status-archived Arquivado Cinza Registros arquivados

⚙️ Status de Processamento

Classe Label Cor Uso
status-processing Processando Azul claro Em processamento (com animação)
status-completed Concluído Azul Processamento concluído
status-failed Falhou Vermelho Processamento falhou
status-unknown Desconhecido Cinza Status não identificado

🎨 Exemplos de Uso

Uso Básico

<!-- Status simples -->
<span class="status-badge status-pending">Pendente</span>
<span class="status-badge status-paid">Pago</span>
<span class="status-badge status-cancelled">Cancelado</span>

Com Ícones

<!-- Status com ícones -->
<span class="status-badge status-processing">
  <i class="fas fa-spinner"></i>
  Processando
</span>

<span class="status-badge status-completed">
  <i class="fas fa-check"></i>
  Concluído
</span>

Variações de Tamanho

<!-- Tamanhos diferentes -->
<span class="status-badge status-sm status-pending">Pequeno</span>
<span class="status-badge status-pending">Normal</span>
<span class="status-badge status-lg status-pending">Grande</span>

Em Tabelas (Data Table)

// No componente TypeScript
{
  field: "status",
  header: "Status",
  allowHtml: true,
  label: (status: string) => {
    const statusConfig: { [key: string]: { label: string, class: string } } = {          
      'Pending': { label: 'Pendente', class: 'status-pending' },
      'Paid': { label: 'Pago', class: 'status-paid' },
      'Approved': { label: 'Aprovado', class: 'status-approved' },
      'Cancelled': { label: 'Cancelado', class: 'status-cancelled' }
    };
    
    const config = statusConfig[status] || { label: status, class: 'status-unknown' };
    return `<span class="status-badge ${config.class}">${config.label}</span>`;
  }
}

Lista de Status

<!-- Múltiplos status -->
<div class="status-list">
  <span class="status-badge status-active">Ativo</span>
  <span class="status-badge status-approved">Aprovado</span>
  <span class="status-badge status-paid">Pago</span>
</div>

Com Agrupamento

<!-- Status agrupados -->
<div class="status-group">
  <span class="status-label">Financeiro:</span>
  <span class="status-badge status-pending">Pendente</span>
</div>

<div class="status-group">
  <span class="status-label">Operacional:</span>
  <span class="status-badge status-active">Ativo</span>
</div>

🎨 Badges Informativos

Badges de Resumo

<!-- Para headers e resumos -->
<div class="items-summary">
  <span class="badge badge-info">
    <i class="fas fa-list"></i>
    Total: 150
  </span>
  <span class="badge badge-secondary">
    <i class="fas fa-check"></i>
    Pagos: 120
  </span>
  <span class="badge badge-warning">
    <i class="fas fa-clock"></i>
    Pendentes: 30
  </span>
</div>

Variações de Badge

<span class="badge badge-primary">Primário</span>
<span class="badge badge-success">Sucesso</span>
<span class="badge badge-warning">Atenção</span>
<span class="badge badge-danger">Perigo</span>
<span class="badge badge-info">Informação</span>

🎭 Estados Visuais Globais

Estado Vazio

<div class="empty-state">
  <i class="fas fa-inbox fa-3x"></i>
  <h4>Nenhum item encontrado</h4>
  <p>Não há registros para exibir no momento.</p>
  <button class="btn btn-primary">
    <i class="fas fa-plus"></i>
    Adicionar Novo
  </button>
</div>

Estado de Erro

<div class="error-state">
  <i class="fas fa-exclamation-triangle fa-3x"></i>
  <h4>Erro ao carregar dados</h4>
  <p>Ocorreu um problema ao buscar as informações.</p>
  <button class="btn btn-primary">
    <i class="fas fa-refresh"></i>
    Tentar Novamente
  </button>
</div>

Estado de Carregamento

<div class="loading-state">
  <div class="spinner"></div>
  <h4>Carregando...</h4>
  <p>Aguarde enquanto buscamos os dados.</p>
</div>

🌙 Dark Mode

O sistema possui suporte automático ao Dark Mode através de:

1. Media Query (Automático)

@media (prefers-color-scheme: dark) {
  // Estilos automáticos
}

2. Classe Manual

:host-context([data-theme="dark"]) {
  // Estilos manuais
}

3. Classe Global

.dark-theme {
  // Estilos para tema escuro
}

📱 Responsividade

Mobile First

@media (max-width: 768px) {
  .status-badge {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.375rem;
  }
}

Adaptações Automáticas

  • Tamanhos de fonte reduzidos
  • Padding ajustado
  • Espaçamentos otimizados

🔧 Customizações

Adicionando Novos Status

// Em _status.scss
.status-badge {
  &.status-meu-novo-status {
    background-color: #e3f2fd;
    color: #1976d2;
    border-color: #90caf9;

    &:hover {
      background-color: #90caf9;
      transform: translateY(-1px);
    }
  }
}

Variações Personalizadas

// Status com animação personalizada
.status-badge {
  &.status-pulsing {
    animation: pulse 2s infinite;
  }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

🔄 Migração

De Estilos Locais para Global

Antes (Local)

// component.scss
.status-badge {
  &.status-pending {
    background-color: #fff3cd;
    color: #856404;
  }
}

Depois (Global)

// Remover estilos locais
// Usar classes globais diretamente

<!-- HTML permanece igual -->
<span class="status-badge status-pending">Pendente</span>

Checklist de Migração

  • Identificar estilos de status locais
  • Verificar se status existe no sistema global
  • Remover estilos locais duplicados
  • Testar funcionamento
  • Adicionar comentário sobre uso global

✅ Melhores Práticas

1. Nomenclatura Consistente

// ✅ Correto
const statusConfig = {
  'Pending': { label: 'Pendente', class: 'status-pending' },
  'Paid': { label: 'Pago', class: 'status-paid' }
};

// ❌ Evitar
const statusConfig = {
  'pending': { label: 'Pendente', class: 'custom-pending' }
};

2. Fallback para Status Desconhecidos

// ✅ Sempre incluir fallback
const config = statusConfig[status] || { 
  label: status, 
  class: 'status-unknown' 
};

3. Uso de allowHtml em Tabelas

// ✅ Necessário para HTML em tabelas
{
  field: "status",
  allowHtml: true, // Obrigatório para badges
  label: (status) => `<span class="status-badge status-${status}">${status}</span>`
}

4. Acessibilidade

<!-- ✅ Com aria-label para screen readers -->
<span class="status-badge status-pending" aria-label="Status: Pendente">
  Pendente
</span>

<!-- ✅ Com role para elementos interativos -->
<span class="status-badge status-active" role="status">
  Ativo
</span>

5. Performance

<!-- ✅ Evitar muitos status na mesma tela -->
<div class="status-list">
  <!-- Máximo 5-10 badges por container -->
</div>

<!-- ✅ Usar lazy loading para listas grandes -->
<virtual-scroller>
  <div *ngFor="let item of items">
    <span class="status-badge">{{item.status}}</span>
  </div>
</virtual-scroller>

🧪 Testes

Teste Visual

// Verificar se todos os status são exibidos corretamente
const allStatus = [
  'status-pending', 'status-paid', 'status-cancelled',
  'status-active', 'status-inactive', 'status-processing'
];

allStatus.forEach(status => {
  // Verificar se classe existe e tem estilos corretos
});

Teste de Responsividade

// Verificar adaptação mobile
@media (max-width: 768px) {
  // Testar tamanhos e espaçamentos
}

📚 Referências

  • Arquivo Principal: projects/idt_app/src/assets/styles/_status.scss
  • Importação: projects/idt_app/src/assets/styles/app.scss
  • Exemplo de Uso: projects/idt_app/src/app/domain/fines/fines.component.ts
  • Migração: projects/idt_app/src/app/domain/finances/account-payable/components/account-payable-items/

🔄 Changelog

v1.0.0 - Sistema Inicial

  • ✅ Criação do arquivo _status.scss
  • ✅ Importação no app.scss
  • ✅ Status financeiros básicos
  • ✅ Status gerais
  • ✅ Estados visuais (empty, error, loading)
  • ✅ Suporte a Dark Mode
  • ✅ Responsividade mobile
  • ✅ Migração de account-payable-items
  • ✅ Documentação completa

Próximas Versões

  • 🔄 Animações avançadas
  • 🔄 Mais variações de status
  • 🔄 Integração com Angular Material
  • 🔄 Testes automatizados

Desenvolvido para PraFrota | Sistema de Gestão de Frota | Angular 19.2.x