# 📱 Side Card Component

> Componente genérico para exibição de informações contextuais ao lado do conteúdo principal

## 🖼️ Visualização

Exemplo do side card renderizado no domínio de motoristas:

<!-- TODO: Adicionar imagem do side card -->
```
🚧 Imagem em desenvolvimento
Para adicionar a screenshot do side card, salve como:
projects/idt_app/samples_screem/side-card-driver-example.png
```

**Descrição Visual:** *Side Card exibindo "Resumo do Motorista" com header escuro, área de imagem com fundo dourado, e campos organizados em layout de duas colunas. Design responsivo com suporte completo a temas claro/escuro.*

### 🎨 Características Visuais
- **Header**: Fundo escuro (`--surface`) com título "Resumo do Motorista" e subtítulo "Informações principais"
- **Imagem**: Área destacada com fundo dourado/laranja e imagem centralizada
- **Layout**: Campos organizados em duas colunas para otimização de espaço
- **Responsivo**: Collapse automático no mobile mostrando apenas imagem e título
- **Temas**: Suporte completo a light/dark mode usando variáveis CSS

## 📁 Estrutura da Documentação

Este diretório contém toda a documentação relacionada ao **Side Card Component**, um sistema genérico e reutilizável para exibir informações contextuais em formulários e listagens.

### 📚 Documentações Disponíveis

| Arquivo | Descrição | Conteúdo |
|---------|-----------|----------|
| `SIDE_CARD_EXAMPLE.md` | **📖 Guia Principal** | Documentação completa com exemplos de implementação |
| `SIDE_CARD_DATA_GUIDE.md` | **💾 Fluxo de Dados** | Como popular e gerenciar dados no side card |
| `SIDE_CARD_THEME_SUPPORT.md` | **🎨 Suporte a Temas** | Implementação de temas claro/escuro |
| `SIDE_CARD_TEST_DATA.md` | **🧪 Dados de Teste** | Exemplos de dados para testing |

## 🎯 Visão Geral

O **Side Card Component** é uma solução genérica que permite exibir informações contextuais ao lado do conteúdo principal, especialmente útil em:

- **Formulários de Edição**: Mostrar resumo do registro sendo editado
- **Listagens**: Exibir detalhes do item selecionado
- **Dashboards**: Informações complementares contextuais

### ✨ Principais Características

- 🔧 **Genérico e Reutilizável**: Funciona com qualquer domínio
- 📱 **Responsivo**: Design adaptativo para mobile e desktop
- 🎨 **Suporte a Temas**: Light/Dark mode completo
- 🖼️ **Sistema de Imagens**: Hierarquia inteligente com fallbacks
- ⚙️ **Configurável**: Interface flexível via `SideCardConfig`
- 🎯 **Integrado**: Funciona seamlessly with the tab system

## 🚀 Uso Rápido

```typescript
// Configuração básica no domain component
sideCard: {
  enabled: true,
  title: 'Resumo do Registro',
  position: 'right',
  width: '350px',
  componentType: 'summary',
  displayFields: [
    { key: 'name', label: 'Nome', type: 'text' },
    { key: 'status', label: 'Status', type: 'status' }
  ]
}
```

## 🏗️ Arquitetura

### Integração com Tab System
O side card está integrado ao sistema de tabs through the interface `TabFormConfig`:

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

### Framework Base Domain
Utiliza o framework `BaseDomainComponent` para funcionalidades básicas and is extended by the specific domain components.

## 📍 Localização do Código

```
projects/idt_app/src/app/
├── shared/
│   ├── components/generic-tab-form/     # Implementação principal
│   ├── interfaces/base-domain.interface.ts  # Interface SideCardConfig
│   └── sidecard/                        # 📁 Esta documentação
└── domain/
    ├── drivers/                         # Exemplo de implementação
    └── vehicles/                        # Futuras implementações
```

## 🎨 Design System

O side card segue o design system da aplicação com:
- **Cores**: Variáveis CSS para temas
- **Tipografia**: Hierarquia visual clara
- **Espaçamentos**: Grid system consistente
- **Responsividade**: Mobile-first approach

## 🔄 Próximos Passos

Para implementar o side card em novos domínios:

1. 📖 Leia `SIDE_CARD_EXAMPLE.md` - Documentação completa
2. 💾 Consulte `SIDE_CARD_DATA_GUIDE.md` - Fluxo de dados
3. 🎨 Revise `SIDE_CARD_THEME_SUPPORT.md` - Suporte a temas
4. 🧪 Use `SIDE_CARD_TEST_DATA.md` - Para desenvolvimento/testing

---

**Desenvolvido para o PraFrota Dashboard** | Versão 1.2.0