# 🎯 Routes Performance Dashboard

Dashboard futurista para monitoramento de performance de rotas com visual estilo ficção científica.

## 🚀 Funcionalidades

### 📊 Métricas Principais
- **Status de Rotas**: Ativas, Concluídas, Pendentes, Atrasadas
- **Performance de Veículos**: Tipos, idades, eficiência
- **Métricas de Motoristas**: Distribuição, performance, idades
- **Modal de Transporte**: Rodoviário, ferroviário, multimodal
- **Custos Operacionais**: Combustível, pedágios, multas, manutenção
- **Volumes Transportados**: Distribuição por status, eficiência

### 🎨 Design Futurista
- **Glassmorphism**: Efeitos de vidro com blur
- **Neon Effects**: Bordas e sombras neon
- **Holographic**: Gradientes holográficos
- **Animations**: Transições suaves e efeitos hover
- **Responsive**: Adaptável para desktop, tablet e mobile

## 📦 Instalação

### 1. Importar o Componente

```typescript
import { RoutesPerformanceDashboardComponent } from './shared/components/routes-performance/routes-performance-dashboard.component';

@Component({
  imports: [RoutesPerformanceDashboardComponent],
  // ...
})
```

### 2. Usar no Template

```html
<app-routes-performance-dashboard
  [compactMode]="false"
  [showFilters]="true"
  [autoRefresh]="true"
  [refreshInterval]="30000">
</app-routes-performance-dashboard>
```

## ⚙️ Configurações

### Propriedades de Input

| Propriedade | Tipo | Padrão | Descrição |
|-------------|------|--------|-----------|
| `compactMode` | boolean | false | Modo compacto para espaços menores |
| `showFilters` | boolean | true | Exibir controles de filtro |
| `autoRefresh` | boolean | true | Atualização automática |
| `refreshInterval` | number | 30000 | Intervalo de atualização (ms) |

### Exemplo de Uso Completo

```typescript
@Component({
  selector: 'app-dashboard',
  template: `
    <div class="dashboard-container">
      
      <!-- Seção Superior - KPIs Existentes -->
      <div class="existing-metrics">
        <!-- Seus KPIs atuais aqui -->
      </div>

      <!-- Seção Inferior - Performance de Rotas -->
      <div class="routes-performance">
        <app-routes-performance-dashboard
          [compactMode]="isMobile"
          [showFilters]="true"
          [autoRefresh]="true"
          [refreshInterval]="30000">
        </app-routes-performance-dashboard>
      </div>

    </div>
  `,
  styles: [`
    .dashboard-container {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 20px;
      background: #0A0A0F;
      min-height: 100vh;
    }

    .routes-performance {
      flex: 1;
      min-height: 600px;
    }
  `]
})
export class DashboardComponent {
  isMobile = window.innerWidth < 768;
}
```

## 🎨 Personalização de Cores

### Variáveis CSS Disponíveis

```scss
:root {
  --neon-blue: #00D4FF;
  --neon-purple: #8B5CF6;
  --neon-green: #00FF88;
  --neon-orange: #FF6B35;
  --neon-red: #FF0055;
  --bg-dark: #0A0A0F;
  --bg-surface: #1A1A2E;
  --bg-card: #16213E;
}
```

### Customizar Cores

```scss
.custom-dashboard {
  --neon-blue: #your-color;
  --bg-dark: #your-bg-color;
}
```

## 📊 Estrutura de Dados

### Interface Principal

```typescript
interface RoutesPerformanceDashboard {
  routeStatus: RouteStatusMetrics;
  vehicleMetrics: VehicleMetrics;
  driverMetrics: DriverMetrics;
  transportModal: TransportModalMetrics;
  operationalMetrics: OperationalMetrics;
  volumeMetrics: VolumeMetrics;
  lastUpdated: Date;
  refreshInterval: number;
}
```

### Exemplo de Dados Mock

```typescript
const mockData: RoutesPerformanceDashboard = {
  routeStatus: {
    active: { count: 245, percentage: 35.2, trend: 'up' },
    completed: { count: 1847, percentage: 52.8, trend: 'up' },
    // ...
  },
  vehicleMetrics: {
    totalVehicles: 345,
    averageAge: 4.1,
    profiles: [
      { type: 'truck', count: 156, performanceScore: 87.5 },
      // ...
    ]
  },
  // ...
};
```

## 🔧 Service Integration

### Conectar com API Real

```typescript
@Injectable()
export class RoutesPerformanceService {
  
  getDashboardData(): Observable<RoutesPerformanceDashboard> {
    return this.http.get<RoutesPerformanceDashboard>('/api/routes/performance');
  }

  updateFilters(filters: DashboardFilters): void {
    // Implementar lógica de filtros
  }
}
```

## 📱 Responsividade

### Breakpoints

- **Desktop**: > 1200px - Grid 3-4 colunas
- **Tablet**: 768px - 1200px - Grid 2 colunas  
- **Mobile**: < 768px - Grid 1 coluna

### Modo Compacto

```html
<app-routes-performance-dashboard
  [compactMode]="true">
</app-routes-performance-dashboard>
```

## 🎭 Animações

### Efeitos Disponíveis

- **Hover Effects**: Elevação e glow nos cards
- **Loading States**: Shimmer effect
- **Transitions**: Smooth transitions
- **Neon Pulse**: Efeitos pulsantes nos indicadores

### Desabilitar Animações

```typescript
// No componente
toggleAnimations(): void {
  this.animationsEnabled = false;
}
```

## 🚀 Performance

### Otimizações

- **OnPush**: Change detection otimizada
- **Lazy Loading**: Componente carregado sob demanda
- **Debounce**: Filtros com debounce
- **Memoization**: Cálculos memoizados

### Métricas

- **Bundle Size**: ~45KB (gzipped)
- **First Paint**: < 100ms
- **Interactive**: < 200ms

## 🔍 Troubleshooting

### Problemas Comuns

1. **Dashboard não carrega**
   - Verificar se o service está injetado
   - Conferir se há dados mock ou API conectada

2. **Animações não funcionam**
   - Verificar se `animationsEnabled` está true
   - Conferir se CSS está sendo carregado

3. **Layout quebrado em mobile**
   - Verificar se `compactMode` está configurado
   - Conferir media queries

### Debug Mode

```typescript
// Habilitar logs de debug
constructor() {
  console.log('🎯 Routes Performance Dashboard Debug Mode');
}
```

## 📈 Roadmap

### Próximas Funcionalidades

- [ ] WebSocket para dados em tempo real
- [ ] Exportação para PDF/Excel
- [ ] Filtros avançados
- [ ] Gráficos interativos com Chart.js
- [ ] Modo dark/light toggle
- [ ] Configurações personalizáveis

## 🤝 Contribuição

Para contribuir com melhorias:

1. Fork do projeto
2. Criar branch feature
3. Implementar melhorias
4. Testes
5. Pull request

## 📄 Licença

Este componente faz parte do sistema PraFrota e segue as mesmas diretrizes de licenciamento do projeto principal.
