# 🎯 **Side Card - Guia de Implementação de Dados**

## 📋 **Visão Geral**

O Side Card é um componente lateral que exibe informações contextuais relacionadas ao registro sendo editado. Este guia mostra como implementar e popular dados no side card.

## 🔄 **Fluxo de Dados**

O `getFieldValue()` busca dados em **3 locais** (nesta ordem):

1. **Formulário atual** - `form.get(fieldKey)?.value`
2. **Dados da aba** - `tabItem[fieldKey]` 
3. **Dados iniciais** - `initialData[fieldKey]`

## 🏗️ **1. Configuração Básica**

### Driver Component (Exemplo Atual)
```typescript
sideCard: {
  enabled: true,
  title: "Resumo do Veículo",
  position: "right", // 'left' ou 'right'
  width: "300px",
  component: "summary", // 'summary' ou 'custom'
  data: {
    imageField: "vehicle_image", // Campo para imagem
    displayFields: [
      {
        key: "vehicle_brand_model", // Nome do campo nos dados
        label: "Marca/Modelo",      // Label exibido
        type: "text",               // Tipo de exibição
        format: "capitalize"        // Formatação opcional
      },
      {
        key: "vehicle_license_plate",
        label: "Placa",
        type: "text",
        format: "uppercase"
      },
      {
        key: "vehicle_status",
        label: "Status",
        type: "status" // Usa statusConfig
      }
    ],
    statusConfig: {
      "active": {
        label: "Em operação",
        color: "#10b981",
        icon: "fa-check-circle"
      },
      "maintenance": {
        label: "Manutenção", 
        color: "#f59e0b",
        icon: "fa-wrench"
      }
    }
  }
}
```

## 💾 **2. Formas de Implementar Dados**

### **Opção A: Dados Mockados para Teste**

Para testar o side card rapidamente:

```typescript
// No getNewEntityData() - apenas para teste
protected override getNewEntityData(): Partial<Driver> {
  return {
    name: '',
    email: '',
    // ... outros campos do driver
    
    // ✨ Dados de teste do veículo (remover em produção)
    vehicle_brand_model: 'Toyota Corolla',
    vehicle_license_plate: 'TEST-1234',
    vehicle_year: '2023',
    vehicle_mileage: '5.000 km',
    vehicle_status: 'active',
    vehicle_image: 'https://example.com/car.jpg'
  };
}
```

### **Opção B: Interceptar Abertura de Abas**

```typescript
override onTableEvent(event: any): void {
  if (event.action === 'edit' && event.data) {
    // Busca dados relacionados (ex: veículo do motorista)
    const vehicleData = this.getVehicleData(event.data.id);
    
    // Combina dados do driver + veículo
    const combinedData = {
      ...event.data,
      ...vehicleData
    };
    
    // Abre aba com dados combinados
    this.openEditTab(combinedData);
  } else {
    super.onTableEvent(event);
  }
}

private getVehicleData(driverId: string): any {
  // Implementar busca na API ou serviço
  return this.vehicleService.getByDriverId(driverId);
}
```

### **Opção C: Carregar Dados Dinamicamente**

```typescript
// No GenericTabFormComponent, adicionar método
private async loadSideCardData(): Promise<void> {
  const sideCard = this.sideCardConfig;
  if (!sideCard.enabled || !this.tabItem) return;
  
  try {
    // Buscar dados relacionados baseado no tipo de entidade
    const relatedData = await this.loadRelatedData();
    
    // Atualizar dados do formulário
    Object.keys(relatedData).forEach(key => {
      if (!this.form.get(key)) {
        this.form.addControl(key, new FormControl(relatedData[key]));
      } else {
        this.form.get(key)?.setValue(relatedData[key]);
      }
    });
  } catch (error) {
    console.error('Erro ao carregar dados do side card:', error);
  }
}

private async loadRelatedData(): Promise<any> {
  switch (this.config.entityType) {
    case 'driver':
      return this.vehicleService.getByDriverId(this.tabItem.id);
    case 'vehicle':
      return this.driverService.getByVehicleId(this.tabItem.id);
    default:
      return {};
  }
}
```

## 🎨 **3. Tipos de Campos Suportados**

### **Texto Simples**
```typescript
{
  key: "vehicle_brand_model",
  label: "Marca/Modelo", 
  type: "text",
  format: "capitalize" // opcional
}
```

### **Status com Badge**
```typescript
{
  key: "vehicle_status",
  label: "Status",
  type: "status"
}
// Requer statusConfig na configuração
```

### **Valor Monetário**
```typescript
{
  key: "vehicle_price",
  label: "Preço",
  type: "currency"
}
// Formata automaticamente como R$ X.XXX,XX
```

### **Data Formatada**
```typescript
{
  key: "vehicle_purchase_date",
  label: "Data de Compra",
  type: "text",
  format: "date" // ou "datetime"
}
```

## 📊 **4. Exemplo de API Integration**

### Serviço para Buscar Dados Relacionados
```typescript
@Injectable()
export class RelatedDataService {
  
  async getVehicleByDriverId(driverId: string): Promise<any> {
    const response = await this.http.get(`/api/drivers/${driverId}/vehicle`).toPromise();
    return {
      vehicle_brand_model: response.brand + ' ' + response.model,
      vehicle_license_plate: response.licensePlate,
      vehicle_year: response.year,
      vehicle_mileage: response.mileage + ' km',
      vehicle_status: response.status,
      vehicle_image: response.imageUrl
    };
  }
}
```

### Implementação no Componente
```typescript
export class DriversComponent extends BaseDomainComponent<Driver> {
  
  constructor(
    // ... outros serviços
    private relatedDataService: RelatedDataService
  ) {
    super(/* ... */);
  }
  
  override async onTableEvent(event: any): Promise<void> {
    if (event.action === 'edit') {
      const vehicleData = await this.relatedDataService.getVehicleByDriverId(event.data.id);
      
      const driverWithVehicle = {
        ...event.data,
        ...vehicleData
      };
      
      // Abrir aba com dados combinados
      this.openEditTab(driverWithVehicle);
    }
  }
}
```

## 🧪 **5. Como Testar Agora**

### **Teste Manual Rápido:**

1. Abra o navegador no modo **DevTools** (F12)
2. Vá para **Motoristas** → **Criar novo**
3. No console, execute:

```javascript
// Simular dados do veículo
const form = document.querySelector('form');
if (form) {
  // Adicionar campos do veículo temporariamente
  ['vehicle_brand_model', 'vehicle_license_plate', 'vehicle_year', 'vehicle_mileage', 'vehicle_status'].forEach(field => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = field;
    input.value = {
      'vehicle_brand_model': 'Toyota Corolla',
      'vehicle_license_plate': 'TEST-1234',
      'vehicle_year': '2023',
      'vehicle_mileage': '5.000 km',
      'vehicle_status': 'active'
    }[field];
    form.appendChild(input);
  });
}
```

### **Teste com Dados Reais:**

1. Modifique temporariamente o `getNewEntityData()`:

```typescript
protected override getNewEntityData(): Partial<Driver> {
  return {
    name: 'João Silva',
    email: 'joao@example.com',
    // ... outros campos
    
    // ✨ TESTE: Dados do veículo
    vehicle_brand_model: 'Honda Civic',
    vehicle_license_plate: 'ABC-1234',
    vehicle_year: '2022',
    vehicle_mileage: '15.000 km',
    vehicle_status: 'active'
  } as any; // Cast para evitar erro de tipo
}
```

2. **Importante:** Remova os dados de teste antes do commit!

## 🚀 **6. Implementação em Produção**

### **Passos Recomendados:**

1. **Criar serviço para dados relacionados**
2. **Implementar endpoint na API**
3. **Interceptar abertura de abas** (onTableEvent)
4. **Carregar dados dinamicamente** 
5. **Tratar erros e loading states**
6. **Adicionar cache se necessário**

### **Estrutura Final:**
```
drivers/
├── drivers.component.ts     # Configuração do side card
├── drivers.service.ts       # CRUD de motoristas  
├── vehicle-data.service.ts  # ⭐ Novo: busca dados do veículo
└── ...
```

## 💡 **7. Dicas e Boas Práticas**

- ✅ **Use cache** para dados que não mudam frequentemente
- ✅ **Implemente loading states** durante carregamento
- ✅ **Trate erros** graciosamente (exibir dados padrão)
- ✅ **Lazy loading** - só carregue quando necessário
- ✅ **Responsive** - side card se adapta a mobile
- ❌ **Não exponha dados sensíveis** no side card
- ❌ **Não faça muitas requisições** desnecessárias

---

## 🎯 **Resumo**

O side card está **100% implementado e funcional**. Para popular com dados:

1. **Para teste**: Use dados mockados no `getNewEntityData()`
2. **Para produção**: Implemente serviço de dados relacionados
3. **Configure os campos** no `sideCard.data.displayFields`
4. **Teste incrementalmente** começando com dados estáticos

A infraestrutura está pronta - agora é só conectar com seus dados! 🚗✨ 