# 🔧 Side Card Interfaces

## Localização das Interfaces

As interfaces do Side Card estão definidas em:
```
projects/idt_app/src/app/shared/interfaces/base-domain.interface.ts
```

## 📋 Interfaces Principais

### SideCardConfig

```typescript
interface SideCardConfig {
  enabled: boolean;
  title: string;
  position: 'left' | 'right';
  width: string;
  componentType: 'summary' | 'detail' | 'custom';
  displayFields: SideCardField[];
  imageConfig?: SideCardImageConfig;
  statusConfig?: SideCardStatusConfig;
}
```

### SideCardField

```typescript
interface SideCardField {
  key: string;
  label: string;
  type: 'text' | 'currency' | 'status' | 'badge' | 'image';
  format?: 'date' | 'currency' | 'number';
  prefix?: string;
  suffix?: string;
}
```

### SideCardImageConfig

```typescript
interface SideCardImageConfig {
  defaultImage: string;
  fallbackImage: string;
  altText: string;
  width: string;
  height: string;
}
```

### SideCardStatusConfig

```typescript
interface SideCardStatusConfig {
  [key: string]: {
    color: string;
    backgroundColor: string;
    label: string;
  };
}
```

## 🔗 Integração com Tab System

O side card é integrado ao sistema de tabs através da extensão da interface `TabFormConfig`:

```typescript
interface TabFormConfig {
  // ... propriedades existentes
  sideCard?: SideCardConfig;
}
```

## 📍 Uso nas Implementações

### Drivers Domain
```typescript
// projects/idt_app/src/app/domain/drivers/drivers.component.ts
sideCard: {
  enabled: true,
  title: 'Resumo do Motorista',
  position: 'right',
  width: '350px',
  componentType: 'summary',
  displayFields: [
    { key: 'vencimento_carteira', label: 'Vencimento CNH', type: 'text', format: 'date' },
    { key: 'nome', label: 'Nome', type: 'text' },
    // ... outros campos
  ]
}
```

## 🎯 Tipos Suportados

### Field Types
- **text**: Texto simples
- **currency**: Valores monetários (formatação automática)
- **status**: Status com cores e badges
- **badge**: Badges coloridos
- **image**: Imagens inline

### Format Types
- **date**: Formatação de datas (DD/MM/YYYY)
- **currency**: Formatação monetária (R$ 1.234,56)
- **number**: Formatação numérica

## 🔄 Extensibilidade

Para adicionar novos tipos ou formatos:

1. Estenda as interfaces em `base-domain.interface.ts`
2. Implemente a lógica em `formatFieldValue()` no generic-tab-form
3. Adicione estilos CSS correspondentes
4. Atualize esta documentação

---

**Referência Técnica** | Side Card Component v1.2.0