119 lines
4.4 KiB
Markdown
119 lines
4.4 KiB
Markdown
# 📱 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 |