4.4 KiB

Raw Blame History

📱 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:

🚧 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

// 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:

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:

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

Desenvolvido para o PraFrota Dashboard | Versão 1.2.0

4.4 KiB Raw Blame History