# Patterns Index - Angular IDT App

## 📚 Índice de Padrões e Documentação

Este documento centraliza todos os padrões de arquitetura, implementação e documentação técnica do projeto Angular IDT App.

## 🏗️ Padrões de Arquitetura

### App Component Pattern
**Arquivo**: `APP_COMPONENT_PATTERN.md`
- **Objetivo**: Integração de serviços PWA e Mobile no componente raiz
- **Inclui**: Dependency injection, auto-initialization, logging pattern
- **Aplicação**: Funcionalidades que devem estar ativas desde o início da app

### Mobile Zoom Prevention Pattern
**Arquivo**: `MOBILE_ZOOM_PREVENTION.md`
- **Objetivo**: Prevenção completa de zoom em dispositivos móveis
- **Inclui**: Meta tags, CSS prevention, JavaScript service
- **Aplicação**: Apps que precisam de experiência nativa sem zoom

## 📱 Progressive Web App (PWA)

### PWA Implementation
**Arquivo**: `PWA_IMPLEMENTATION.md`
- **Objetivo**: Implementação completa de funcionalidades PWA
- **Inclui**: Service Worker, Manifest, notificações, install prompts
- **Aplicação**: Apps que precisam funcionar como aplicativos nativos

### PWA Quick Start
**Arquivo**: `PWA_QUICK_START.md`
- **Objetivo**: Guia rápido para desenvolvimento e troubleshooting PWA
- **Inclui**: Comandos essenciais, testes por dispositivo, debugging
- **Aplicação**: Desenvolvimento e manutenção de funcionalidades PWA

## 🎯 Componentes Reutilizáveis

### Tab System Pattern
**Localização**: `shared/components/tab-system/`
- **Objetivo**: Sistema avançado de abas para edição de registros
- **Inclui**: Limite configurável, gestão de estado, títulos responsivos
- **Aplicação**: Formulários de edição complexos, CRUD operations

### Data Table Pattern
**Localização**: `shared/components/data-table/`
- **Objetivo**: Tabelas responsivas com otimizações mobile
- **Inclui**: Header adaptativo, paginação compacta, filtros expansíveis
- **Aplicação**: Listagem de dados em dispositivos móveis e desktop

## 🔧 Serviços e Utilities

### Service Naming Standards Pattern
**Arquivo**: `SERVICE_NAMING_CHECKLIST.md`
- **Objetivo**: Garantir nomenclatura consistente em todos os services
- **Inclui**: Checklist obrigatório, templates corretos, anti-patterns
- **Aplicação**: **OBRIGATÓRIO consultar antes de criar/editar qualquer service**

### PWA Service Pattern
**Arquivo**: `shared/services/pwa.service.ts`
- **Objetivo**: Gerenciamento centralizado de funcionalidades PWA
- **Inclui**: Update detection, install prompts, observables
- **Aplicação**: Qualquer app que implemente PWA

### Mobile Behavior Service Pattern  
**Arquivo**: `shared/services/mobile-behavior.service.ts`
- **Objetivo**: Controle de comportamentos móveis nativos
- **Inclui**: Zoom prevention, touch optimization, device detection
- **Aplicação**: Apps com foco em experiência mobile nativa

## 📊 Otimizações e Performance

### CSS Budget Management
**Localização**: `assets/styles/app.scss`
- **Objetivo**: Compressão de CSS para manter funcionalidades dentro do limite
- **Inclui**: Compressão manual, seletores combinados, mobile-first
- **Aplicação**: Projetos com restrições de bundle size

### Responsive Design Patterns
**Localização**: Multiple files (`*.scss`)
- **Objetivo**: Padrões de responsividade mobile-first
- **Inclui**: Breakpoints consistentes, edge-to-edge layouts, touch-friendly controls
- **Aplicação**: Interfaces adaptivas para todos os dispositivos

## 🎨 UI/UX Patterns

### Standalone Component Pattern
**Aplicação**: All components
- **Objetivo**: Componentes independentes sem NgModules
- **Inclui**: Imports explícitos, tree-shaking otimizado
- **Aplicação**: Arquitetura Angular moderna (17+)

### Material Design Integration
**Localização**: `assets/styles/app.scss`
- **Objetivo**: Integração consistente com Angular Material
- **Inclui**: Theme customization, component overrides
- **Aplicação**: Apps que usam Angular Material como base

## 🔄 Domain-Driven Design (DDD)

### Domain Structure Pattern
**Localização**: `app/domain/`
- **Objetivo**: Organização por domínios de negócio
- **Inclui**: vehicles/, drivers/, routes/, finances/
- **Aplicação**: Apps com múltiplos contextos de negócio

### Shared Resources Pattern
**Localização**: `app/shared/`
- **Objetivo**: Recursos compartilhados entre domínios
- **Inclui**: components/, services/, interfaces/
- **Aplicação**: Funcionalidades transversais aos domínios

## 🧪 Testing Patterns

### Service Testing Pattern
**Aplicação**: All services
- **Objetivo**: Testes unitários para serviços Angular
- **Inclui**: Mocks, spies, dependency injection testing
- **Aplicação**: Garantia de qualidade e confiabilidade

### Component Testing Pattern
**Aplicação**: All components
- **Objetivo**: Testes de componentes standalone
- **Inclui**: TestBed configuration, async testing
- **Aplicação**: Validação de comportamento de UI

## 📚 Documentação Patterns

### README Pattern
**Arquivo**: `README.md`
- **Objetivo**: Documentação principal do projeto
- **Inclui**: Setup, comandos, estrutura geral
- **Aplicação**: Onboarding de novos desenvolvedores

### MCP Pattern
**Arquivo**: `MCP.md` (Model Context Protocol)
- **Objetivo**: Contexto completo para desenvolvimento assistido por IA
- **Inclui**: Arquitetura, padrões, configurações
- **Aplicação**: Desenvolvimento com assistentes de IA

## 🔗 Interconexões de Padrões

### PWA + Mobile Pattern
```
App Component (DI) → PWA Service → PWA Notifications
                  → Mobile Service → Zoom Prevention
```

### Domain + Shared Pattern
```
Domain Components → Shared Components → Tab System
                                     → Data Table
                 → Shared Services → PWA Service
                                  → Mobile Service
```

### Testing + Documentation Pattern
```
Implementation → Testing → Documentation → MCP Context
```

## 📋 Quick Reference

### Para Novo Componente
1. Usar Standalone pattern
2. Documentar no domain apropriado
3. Adicionar testes unitários
4. Atualizar MCP.md se relevante

### Para Nova Funcionalidade PWA
1. Implementar no PWAService
2. Adicionar notification no PWANotificationsComponent
3. Testar em mobile real
4. Documentar em PWA_IMPLEMENTATION.md

### Para Nova Otimização Mobile
1. Implementar no MobileBehaviorService
2. Adicionar CSS em app.scss
3. Testar responsividade
4. Documentar em MOBILE_ZOOM_PREVENTION.md

### Para Novo Service
1. **OBRIGATÓRIO**: Consultar `SERVICE_NAMING_CHECKLIST.md`
2. Implementar seguindo nomenclatura padrão: `create`, `update`, `delete`, `getById`, `get[Domain]s`
3. Usar ApiClientService (nunca HttpClient diretamente)
4. Implementar DomainService<T> interface
5. Adicionar fallback com dados mock

### Para Novo Padrão
1. Implementar seguindo padrões existentes
2. Criar documentação específica
3. Adicionar ao PATTERNS_INDEX.md
4. Referenciar no MCP.md

---

## 📊 Status dos Padrões

| Padrão | Status | Documentação | Testes | Aplicação |
|--------|--------|-------------|--------|-----------|
| **App Component** | ✅ | ✅ | ⚠️ | ✅ |
| **PWA Implementation** | ✅ | ✅ | ⚠️ | ✅ |
| **Mobile Zoom Prevention** | ✅ | ✅ | ⚠️ | ✅ |
| **Tab System** | ✅ | ✅ | ✅ | ✅ |
| **Data Table** | ✅ | ⚠️ | ⚠️ | ✅ |
| **Service Naming Standards** | ✅ | ✅ | ✅ | ✅ |
| **Standalone Components** | ✅ | ✅ | ✅ | ✅ |
| **DDD Structure** | ✅ | ✅ | ⚠️ | ✅ |

**Legenda**: ✅ Completo | ⚠️ Parcial | ❌ Pendente

---

**Última atualização**: Janeiro 2025
**Contribuidores**: Equipe de desenvolvimento IDT App