# 🎯 **Side Card - Dados de Teste**

## 📸 **Layout Implementado**

O side card foi atualizado para ter o **exato layout** da imagem fornecida:

- ✅ **Header escuro** com gradiente
- ✅ **Subtítulo** "Informações principais"  
- ✅ **Imagem grande** com fundo amarelo
- ✅ **Campos organizados** em duas colunas
- ✅ **Quilometragem em azul**
- ✅ **Placa em fonte monospace**
- ✅ **Status badge verde**
- ✅ **Valor FIPE** formatado
- ✅ **Imagem padrão** quando não há dados

## 🖼️ **Sistema de Imagens**

### **Imagem Padrão**
- **Arquivo**: `assets/imagens/7e9291dd-d62e-4879-ad92-4d47b94d4fee.png`
- **Quando aparece**: 
  - Quando não há campo de imagem configurado
  - Quando o campo está vazio
  - Quando a URL da imagem falha ao carregar
- **Tratamento de erro**: Fallback automático para imagem padrão

### **Hierarquia de Imagens**
1. **URL específica** do veículo (se válida)
2. **Array de imagens** (primeira imagem válida)
3. **Imagem baseada na marca** (para veículos com dados)
4. **Imagem padrão** (fallback final)

## 🧪 **Como Testar com Dados**

### **Opção 1: Dados no Console (DevTools)**

1. Abra **Motoristas** → **Criar novo**
2. Abra **DevTools** (F12) → **Console**
3. Cole este código:

```javascript
// ✨ Dados exatamente como na imagem
const testData = {
  name: 'João Silva',
  vehicle_brand_model: 'Volkswagen Golf',
  vehicle_license_plate: 'AB-3444',
  vehicle_year: '2009',
  vehicle_mileage: '38.500 km',
  vehicle_status: 'active',
  vehicle_fipe_value: '35000',
  vehicle_image: 'https://imgd-ct.aeplcdn.com/664x415/n/cw/ec/141867/nissan-gt-r-right-side-view-3.jpeg'
};

// Aplicar dados no formulário
Object.keys(testData).forEach(field => {
  let input = document.querySelector(`[name="${field}"]`);
  if (!input) {
    input = document.createElement('input');
    input.type = 'hidden';
    input.name = field;
    document.querySelector('form').appendChild(input);
  }
  input.value = testData[field];
  
  // Trigger change event para Angular detectar
  input.dispatchEvent(new Event('input', { bubbles: true }));
});

console.log('✅ Dados de teste aplicados! Verifique o side card.');
```

### **Teste da Imagem Padrão**

Para testar a imagem padrão, use dados **sem** imagem:

```javascript
// ✨ Teste da imagem padrão
const testDataWithoutImage = {
  name: 'Maria Santos',
  vehicle_brand_model: 'Honda Civic',
  vehicle_license_plate: 'XYZ-1234',
  vehicle_year: '2018',
  vehicle_mileage: '52.000 km',
  vehicle_status: 'maintenance',
  vehicle_fipe_value: '68000'
  // Sem vehicle_image - usará imagem padrão
};

Object.keys(testDataWithoutImage).forEach(field => {
  let input = document.querySelector(`[name="${field}"]`) || document.createElement('input');
  input.type = 'hidden';
  input.name = field;
  input.value = testDataWithoutImage[field];
  if (!input.parentNode) document.querySelector('form').appendChild(input);
});

console.log('✅ Teste com imagem padrão aplicado!');
```

### **Teste de URL Inválida**

Para testar o fallback quando a URL da imagem falha:

```javascript
// ✨ Teste com URL inválida
const testDataInvalidImage = {
  name: 'Carlos Silva',
  vehicle_brand_model: 'Toyota Corolla',
  vehicle_license_plate: 'DEF-5678',
  vehicle_year: '2020',
  vehicle_mileage: '25.000 km',
  vehicle_status: 'repair',
  vehicle_fipe_value: '85000',
  vehicle_image: 'https://invalid-url-that-will-fail.com/car.jpg'
};

Object.keys(testDataInvalidImage).forEach(field => {
  let input = document.querySelector(`[name="${field}"]`) || document.createElement('input');
  input.type = 'hidden';
  input.name = field;
  input.value = testDataInvalidImage[field];
  if (!input.parentNode) document.querySelector('form').appendChild(input);
});

console.log('✅ Teste com URL inválida aplicado! Deve usar imagem padrão.');
```

### **Opção 2: Dados Temporários no Código**

No `drivers.component.ts`, modifique temporariamente:

```typescript
protected override getNewEntityData(): Partial<Driver> {
  return {
    name: 'João Silva',
    email: 'joao@example.com',
    gender: 'male',
    phone: '(11) 99999-9999',
    birth_date: '1990-01-01',
    type: 'CLT',
    avatar: '',
    
    // ✨ DADOS DE TESTE - Exatamente como na imagem
    vehicle_brand_model: 'Volkswagen Golf',
    vehicle_license_plate: 'AB-3444',
    vehicle_year: '2009',
    vehicle_mileage: '38.500 km',
    vehicle_status: 'active',
    vehicle_fipe_value: '35000',
    vehicle_image: 'https://imgd-ct.aeplcdn.com/664x415/n/cw/ec/141867/nissan-gt-r-right-side-view-3.jpeg'
  } as any; // Cast para evitar erro de tipo
}
```

⚠️ **Importante**: Remover antes do commit!

### **Opção 3: Diferentes Cenários de Teste**

```javascript
// Cenário 1: Veículo em Manutenção
const maintenanceData = {
  name: 'Maria Santos',
  vehicle_brand_model: 'Honda Civic',
  vehicle_license_plate: 'XYZ-1234',
  vehicle_year: '2018',
  vehicle_mileage: '52.000 km',
  vehicle_status: 'maintenance',
  vehicle_fipe_value: '68000',
  vehicle_image: 'https://example.com/honda-civic.jpg'
};

// Cenário 2: Veículo em Reparo
const repairData = {
  name: 'Carlos Silva',
  vehicle_brand_model: 'Toyota Corolla',
  vehicle_license_plate: 'DEF-5678',
  vehicle_year: '2020',
  vehicle_mileage: '25.000 km',
  vehicle_status: 'repair',
  vehicle_fipe_value: '85000',
  vehicle_image: 'https://example.com/toyota-corolla.jpg'
};

// Cenário 3: Veículo Inativo
const inactiveData = {
  name: 'Ana Costa',
  vehicle_brand_model: 'Fiat Uno',
  vehicle_license_plate: 'GHI-9012',
  vehicle_year: '2015',
  vehicle_mileage: '95.000 km',
  vehicle_status: 'inactive',
  vehicle_fipe_value: '28000',
  vehicle_image: 'https://example.com/fiat-uno.jpg'
};
```

## 🎨 **Status Badges Configurados**

- **🟢 Em operação** (`active`) - Verde #10b981
- **🟡 Manutenção** (`maintenance`) - Amarelo #f59e0b  
- **⚫ Inativo** (`inactive`) - Cinza #6b7280
- **🔴 Em reparo** (`repair`) - Vermelho #ef4444

## 🖼️ **Imagens de Teste**

URLs de carros para testar:

```javascript
const carImages = {
  'volkswagen_golf': 'https://imgd-ct.aeplcdn.com/664x415/n/cw/ec/141867/nissan-gt-r-right-side-view-3.jpeg',
  'honda_civic': 'https://cdn.motor1.com/images/mgl/QJRq6/s1/honda-civic-2019.jpg',
  'toyota_corolla': 'https://www.toyota.com.br/content/dam/toyota/cars/corolla/2020/gallery/corolla-2020-01.jpg',
  'fiat_uno': 'https://www.fiat.com.br/content/dam/fiat/products/uno/gallery/uno-01.jpg'
};
```

## 🚀 **Resultado Esperado**

Após aplicar os dados de teste, você verá:

1. **Header escuro** com "Resumo do Veículo" e "Informações principais"
2. **Imagem do carro** (real ou padrão) em fundo amarelo/laranja
3. **Campos organizados** com labels à esquerda e valores à direita:
   - Marca/Modelo: **Volkswagen Golf**
   - Placa: **AB-3444** (fonte monospace)
   - Ano: **2009**
   - Quilometragem: **38.500 km** (em azul)
   - Status: **Em operação** (badge verde)
   - Motorista: **João Silva**
   - Valor FIPE: **R$ 35.000**

## 📱 **Responsividade**

- **Desktop**: Side card à direita (300px)
- **Tablet/Mobile**: Side card acima do formulário (largura total)
- **Campos se reorganizam** em dispositivos menores

---

## ✨ **Status da Implementação**

- ✅ **Layout**: 100% idêntico à imagem
- ✅ **Estilos**: Header escuro, campos organizados, badges coloridos
- ✅ **Responsividade**: Adaptação para mobile
- ✅ **Formatação**: Moeda, quilometragem em azul, placa monospace
- ✅ **Imagem padrão**: Fallback automático para casos sem dados
- ✅ **Tratamento de erro**: URLs inválidas usam imagem padrão
- ✅ **Build**: Sem erros

**O side card está perfeito e robusto para uso! 🚗✨** 