# 🚛 Fleet Type Performance Card

## 📋 Visão Geral

O `FleetTypeCardComponent` é um card de performance que exibe a distribuição e métricas das rotas agrupadas por **Tipo de Frota**. Este componente foi criado para complementar o sistema de performance de rotas, fornecendo insights sobre a utilização dos diferentes tipos de frota.

## ✨ Funcionalidades

### 🎯 **Métricas Principais**
- **Total de Rotas** - Quantidade total de rotas no período
- **Total de Volumes** - Soma dos volumes transportados
- **Trend Indicator** - Comparação com período anterior (↑ ↓ →)
- **Ambulância** - Indicador de rotas com ambulância acionada

### 🚛 **Tipos de Frota Suportados**
- **Rentals** - Veículos alugados
- **Corporativo** - Frota própria da empresa
- **Agregado** - Veículos de terceiros agregados
- **Frota Fixa - Locação** - Veículos fixos alugados
- **Frota Fixa - Diarista** - Veículos fixos com pagamento diário
- **Outros** - Demais tipos não categorizados

### 📊 **Visualização**
- **Progress Bars** - Barras de progresso coloridas por tipo
- **Percentuais** - Distribuição percentual automática
- **Ícones Específicos** - Cada tipo tem seu ícone característico
- **Indicadores de Ambulância** - Destacam rotas com emergência

## 🔧 Interface de Dados

```typescript
export interface FleetTypeData {
  totalRoutes: number;
  totalVolumes: number;
  changePercentage: number;
  trend: 'up' | 'down' | 'stable';
  hasAmbulance: number;
  fleetTypes: {
    rental: FleetTypeInfo;
    corporate: FleetTypeInfo;
    aggregate: FleetTypeInfo;
    fixedRental: FleetTypeInfo;
    fixedDaily: FleetTypeInfo;
    other: FleetTypeInfo;
  };
}

export interface FleetTypeInfo {
  label: string;
  routes: number;
  volumes: number;
  percentage: number;
  hasAmbulance: number;
}
```

## 📱 Uso no Dashboard

### **HTML**
```html
<div class="fleet-type-card-container">
  <app-fleet-type-card [data]="fleetTypeData"></app-fleet-type-card>
</div>
```

### **TypeScript**
```typescript
// Propriedade no componente
fleetTypeData: FleetTypeData = {
  totalRoutes: 0,
  totalVolumes: 0,
  changePercentage: 0,
  trend: 'stable',
  hasAmbulance: 0,
  fleetTypes: {
    rental: { label: 'Rentals', routes: 0, volumes: 0, percentage: 0, hasAmbulance: 0 },
    corporate: { label: 'Corporativo', routes: 0, volumes: 0, percentage: 0, hasAmbulance: 0 },
    aggregate: { label: 'Agregado', routes: 0, volumes: 0, percentage: 0, hasAmbulance: 0 },
    fixedRental: { label: 'Frota Fixa - Locação', routes: 0, volumes: 0, percentage: 0, hasAmbulance: 0 },
    fixedDaily: { label: 'Frota Fixa - Diarista', routes: 0, volumes: 0, percentage: 0, hasAmbulance: 0 },
    other: { label: 'Outros', routes: 0, volumes: 0, percentage: 0, hasAmbulance: 0 }
  }
};

// Método de carregamento
private async loadFleetTypes() {
  // Buscar dados das rotas
  const routes = await this.routesService.getRoutes(filters);
  
  // Processar e agrupar por vehicleFleetType
  // Calcular métricas e percentuais
  // Atualizar this.fleetTypeData
}
```

## 🎨 **Características Visuais**

### **🎨 Cores por Tipo**
- **Rental**: Azul (`#3b82f6` → `#1d4ed8`)
- **Corporate**: Roxo (`#8b5cf6` → `#7c3aed`)
- **Aggregate**: Verde (`#10b981` → `#059669`)
- **Fixed Rental**: Laranja (`#f59e0b` → `#d97706`)
- **Fixed Daily**: Vermelho (`#ef4444` → `#dc2626`)
- **Other**: Cinza (`#6b7280` → `#4b5563`)

### **📱 Responsividade**
- **Desktop**: Layout completo com todos os detalhes
- **Mobile**: Versão compacta com informações essenciais
- **Dark Mode**: Suporte completo ao tema escuro

### **🎭 Animações**
- **Entrada**: `slideInUp` com duração de 0.6s
- **Progress Bars**: Transição suave de 0.8s
- **Hover Effects**: Elevação e destaque
- **Ambulância**: Efeito `pulse` para chamar atenção

## 📊 **Integração com Backend**

### **Mapeamento de Dados**
```typescript
const fleetTypeMapping = {
  'RENTAL': 'rental',
  'CORPORATE': 'corporate', 
  'AGGREGATE': 'aggregate',
  'FIXED_RENTAL': 'fixedRental',
  'FIXED_DAILY': 'fixedDaily',
  'OTHER': 'other'
};
```

### **Campo de Origem**
- **Campo**: `route.vehicleFleetType`
- **Valores**: `RENTAL`, `CORPORATE`, `AGGREGATE`, `FIXED_RENTAL`, `FIXED_DAILY`, `OTHER`
- **Fallback**: Se não informado, assume `OTHER`

## 🚀 **Localização**

```
projects/idt_app/src/app/shared/components/routes-performance/components/
├── fleet-type-card.component.ts     # Componente principal
├── fleet-type-card.component.scss   # Estilos
└── volumes-transported-card.component.ts  # Componente relacionado
```

## 📈 **Métricas Calculadas**

1. **Total de Rotas**: `routes.length`
2. **Total de Volumes**: `sum(route.volume)`
3. **Rotas por Tipo**: Agrupamento por `vehicleFleetType`
4. **Percentuais**: `(routesPorTipo / totalRoutes) * 100`
5. **Ambulância**: `count(route.hasAmbulance === true)`
6. **Trend**: Comparação com período anterior

## 🎯 **Casos de Uso**

- ✅ **Dashboard Principal** - Visão geral da distribuição da frota
- ✅ **Relatórios Gerenciais** - Análise de utilização por tipo
- ✅ **Planejamento** - Identificar tipos mais/menos utilizados
- ✅ **Emergências** - Monitorar rotas com ambulância
- ✅ **Eficiência** - Comparar performance entre tipos

---

**Componente pronto para uso em produção!** 🎉
