# 🎨 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](#visão-geral)
- [Instalação e Configuração](#instalação-e-configuração)
- [Status Disponíveis](#status-disponíveis)
- [Exemplos de Uso](#exemplos-de-uso)
- [Customizações](#customizações)
- [Migração](#migração)
- [Melhores Práticas](#melhores-práticas)

## 🎯 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`:
```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
```html
<!-- 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
```html
<!-- 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
```html
<!-- 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)
```typescript
// 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
```html
<!-- 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
```html
<!-- 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
```html
<!-- 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
```html
<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
```html
<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
```html
<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
```html
<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)
```scss
@media (prefers-color-scheme: dark) {
  // Estilos automáticos
}
```

### 2. Classe Manual
```scss
:host-context([data-theme="dark"]) {
  // Estilos manuais
}
```

### 3. Classe Global
```scss
.dark-theme {
  // Estilos para tema escuro
}
```

## 📱 Responsividade

### Mobile First
```scss
@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
```scss
// 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
```scss
// 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)
```scss
// component.scss
.status-badge {
  &.status-pending {
    background-color: #fff3cd;
    color: #856404;
  }
}
```

#### Depois (Global)
```scss
// Remover estilos locais
// Usar classes globais diretamente
```

```html
<!-- 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
```typescript
// ✅ 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
```typescript
// ✅ Sempre incluir fallback
const config = statusConfig[status] || { 
  label: status, 
  class: 'status-unknown' 
};
```

### 3. Uso de allowHtml em Tabelas
```typescript
// ✅ 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
```html
<!-- ✅ 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
```html
<!-- ✅ 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
```typescript
// 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
```typescript
// 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**