# 🎯 FinesListComponent

Componente reutilizável para exibição de listas de multas em diferentes contextos da aplicação PraFrota.

## 📋 Visão Geral

O `FinesListComponent` é um componente standalone flexível que pode ser usado para:

- Exibir lista geral de multas
- Mostrar multas específicas de um veículo
- Mostrar multas específicas de um motorista  
- Integração em dashboards e relatórios

## 🚀 Funcionalidades

### ✅ **Recursos Principais**
- **Filtros por Organização**: Municipal, Estadual, Federal
- **Paginação Integrada**: Navegação por páginas
- **Ordenação**: Por data e valor
- **Estados Visuais**: Loading, erro, vazio
- **Responsivo**: Adaptação para mobile
- **Sistema Global de Status**: Badges padronizados
- **Acessibilidade**: WCAG 2.1 AA

### ✅ **Configurações**
- Contexto específico (veículo/motorista)
- Modo somente leitura
- Altura máxima personalizável
- Controle de botões e filtros

## 📖 Como Usar

### **Importação**
```typescript
import { FinesListComponent } from './domain/fines/components/fines-list';
```

### **Uso Básico**
```html
<app-fines-list></app-fines-list>
```

### **Configuração Avançada**
```html
<app-fines-list 
  [config]="{
    vehicleId: 123,
    showNewButton: true,
    showFilters: true,
    readonly: false,
    maxHeight: '500px',
    title: 'Multas do Veículo',
    pageSize: 15
  }"
  (fineSelected)="onFineSelected($event)"
  (newFineRequested)="onNewFineRequested($event)"
  (filterChanged)="onFilterChanged($event)">
</app-fines-list>
```

## 🔧 Configurações

### **FinesListConfig**
```typescript
interface FinesListConfig {
  vehicleId?: number;        // ID do veículo para filtrar
  driverId?: number;         // ID do motorista para filtrar
  showNewButton?: boolean;   // Mostrar botão "Nova Multa"
  readonly?: boolean;        // Modo somente leitura
  maxHeight?: string;        // Altura máxima (ex: '500px')
  showFilters?: boolean;     // Mostrar abas de filtro
  title?: string;           // Título personalizado
  pageSize?: number;        // Itens por página (padrão: 10)
}
```

### **Valores Padrão**
```typescript
{
  showNewButton: true,
  showFilters: true,
  readonly: false,
  pageSize: 10,
  maxHeight: '600px'
}
```

## 📤 Eventos

### **fineSelected**
Emitido quando uma multa é selecionada para detalhes.
```typescript
(fineSelected)="onFineSelected($event)"

onFineSelected(fine: Fines): void {
  // Navegar para detalhes, abrir modal, etc.
}
```

### **newFineRequested**
Emitido quando o botão "Nova Multa" é clicado.
```typescript
(newFineRequested)="onNewFineRequested($event)"

onNewFineRequested(context: { vehicleId?: number; driverId?: number }): void {
  // Abrir formulário de nova multa com contexto
}
```

### **filterChanged**
Emitido quando o filtro de organização é alterado.
```typescript
(filterChanged)="onFilterChanged($event)"

onFilterChanged(filter: OrganizationType): void {
  // 'municipal' | 'state' | 'federal'
}
```

## 🎨 Exemplos de Uso

### **1. Lista Geral de Multas**
```html
<app-fines-list 
  [config]="{
    showNewButton: true,
    showFilters: true,
    title: 'Todas as Multas'
  }">
</app-fines-list>
```

### **2. Multas de um Veículo**
```html
<app-fines-list 
  [config]="{
    vehicleId: vehicle.id,
    showNewButton: true,
    showFilters: true,
    title: 'Multas do Veículo',
    maxHeight: '400px'
  }"
  (newFineRequested)="openNewFineModal($event)">
</app-fines-list>
```

### **3. Multas de um Motorista**
```html
<app-fines-list 
  [config]="{
    driverId: driver.id,
    showNewButton: false,
    readonly: true,
    title: 'Histórico de Multas'
  }">
</app-fines-list>
```

### **4. Dashboard Compacto**
```html
<app-fines-list 
  [config]="{
    showFilters: false,
    showNewButton: false,
    readonly: true,
    maxHeight: '300px',
    pageSize: 5,
    title: 'Multas Recentes'
  }">
</app-fines-list>
```

## 🎯 Integração com TabSystem

### **Configuração no vehicles.component.ts**
```typescript
{
  id: 'fines',
  label: 'Multas',
  icon: 'fa-exclamation-triangle',
  templateType: 'component',
  dynamicComponent: {
    selector: 'app-fines-list',
    inputs: {
      config: {
        vehicleId: () => this.getFromDataTab()?.id,
        showNewButton: true,
        showFilters: true,
        maxHeight: '500px'
      }
    },
    outputs: {
      fineSelected: (fine: any) => this.onFineSelected(fine),
      newFineRequested: (context: any) => this.onNewFineRequested(context)
    }
  }
}
```

## 📊 Estados do Componente

### **Loading**
```html
<div class="loading-state">
  <div class="spinner"></div>
  <h4>Carregando multas...</h4>
</div>
```

### **Empty**
```html
<div class="empty-state">
  <i class="fas fa-inbox fa-3x"></i>
  <h4>Nenhuma multa encontrada</h4>
  <button class="btn btn-primary">Nova Multa</button>
</div>
```

### **Error**
```html
<div class="error-state">
  <i class="fas fa-exclamation-triangle fa-3x"></i>
  <h4>Erro ao carregar multas</h4>
  <button class="btn btn-primary">Tentar Novamente</button>
</div>
```

## 🎨 Sistema de Status

O componente utiliza o sistema global de status (`_status.scss`):

```html
<span class="status-badge status-pending">Pendente</span>
<span class="status-badge status-paid">Pago</span>
<span class="status-badge status-approved">Aprovado</span>
<span class="status-badge status-cancelled">Cancelado</span>
```

## 📱 Responsividade

### **Desktop (> 768px)**
- Todas as colunas visíveis
- Filtros em linha horizontal
- Paginação completa

### **Tablet (768px - 480px)**
- Oculta colunas menos importantes
- Filtros empilhados
- Botões compactos

### **Mobile (< 480px)**
- Apenas colunas essenciais
- Layout vertical
- Navegação simplificada

## 🧪 Testes

### **Executar Testes**
```bash
ng test --include="**/fines-list.component.spec.ts"
```

### **Cobertura de Testes**
- ✅ Criação do componente
- ✅ Carregamento de dados
- ✅ Filtros por organização
- ✅ Paginação
- ✅ Eventos
- ✅ Estados (loading, error, empty)
- ✅ Formatação de dados

## 🔄 Changelog

### **v1.0.0 - Implementação Inicial**
- ✅ Componente base com filtros
- ✅ Integração com FinesService
- ✅ Sistema global de status
- ✅ Responsividade completa
- ✅ Estados visuais
- ✅ Paginação e ordenação
- ✅ Testes unitários
- ✅ Integração com vehicles.component

### **Próximas Versões**
- 🔄 Integração com drivers.component
- 🔄 Exportação de dados
- 🔄 Filtros avançados
- 🔄 Gráficos e estatísticas

## 📚 Dependências

- **Angular**: 19.2.x
- **FinesService**: Serviço de multas
- **Sistema Global de Status**: _status.scss
- **DatePipe**: Formatação de datas
- **CurrencyPipe**: Formatação de valores

---

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