testes/Modulos Angular/projects/idt_app/docs/BLOQUEIO_TEMPORARIO.md

# 🚫 Sistema de Bloqueio Temporário da Sidebar

## 📋 Resumo

Sistema para bloquear botões específicos da sidebar temporariamente, ideal para deploys onde algumas funcionalidades ainda não foram refatoradas ou estão em manutenção.

## 🎯 Como Usar

### 1. **Configuração Rápida**

Edite o arquivo: `projects/idt_app/src/app/shared/components/sidebar/sidebar.component.ts`

Localize a seção **`temporaryBlocks`** (linha ~792):

```typescript
private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': true,        // ✅ BLOQUEAR Manutenção
  'reports': true,           // ✅ BLOQUEAR Relatórios  
  'settings': true,          // ✅ BLOQUEAR Configurações
  'finances': false,         // ✅ LIBERAR Finanças
  'routes/shopee': true,     // ✅ BLOQUEAR Shopee (submenu)
  // Adicione mais IDs conforme necessário
};
```

### 2. **Bloquear um Botão**

```typescript
'nome-do-botao': true,  // ✅ BLOQUEADO
```

### 3. **Liberar um Botão**

```typescript
'nome-do-botao': false, // ✅ LIBERADO
```

## 🔍 IDs Disponíveis

### **Botões Principais:**
```typescript
'dashboard'     // Dashboard
'vehicles'      // Veículos
'drivers'       // Motoristas  
'maintenance'   // Manutenção
'finances'      // Finanças
'routes'        // Rotas
'reports'       // Relatórios
'settings'      // Configurações
```

### **Submenus:**
```typescript
'finances/accountpayable'  // Contas a Pagar
'routes/mercado-live'      // Mercado Live
'routes/shopee'            // Shopee
```

## 🎨 Comportamento Visual

### ✅ **Botões Liberados:**
- Funcionam normalmente
- Cor e hover padrão
- Clique navega para a página

### 🚫 **Botões Bloqueados:**
- Aparência acinzentada (opacity: 0.5)
- Ícone de cadeado (🔒) no final
- Cursor `not-allowed`
- Tooltip com motivo do bloqueio
- Clique não navega
- Submenus não expandem

## 💡 Exemplos Práticos

### **Deploy com Manutenção Bloqueada:**
```typescript
private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': true,  // 🚫 Em refatoração
  'reports': true,     // 🚫 Aguardando nova API
  'settings': false,   // ✅ Funcionando
};
```

### **Deploy com Shopee Desabilitado:**
```typescript
private temporaryBlocks: { [key: string]: boolean } = {
  'routes/shopee': true,     // 🚫 API em manutenção
  'routes/mercado-live': false, // ✅ Funcionando
};
```

### **Liberar Tudo (Deploy Final):**
```typescript
private temporaryBlocks: { [key: string]: boolean } = {
  // Todos os valores false ou remover as linhas
};
```

## 🔧 Personalização Avançada

### **Alterar Mensagem do Tooltip:**

Edite o método `applyTemporaryBlocks()` (linha ~1080):

```typescript
if (this.temporaryBlocks[item.id]) {
  item.disabled = true;
  item.disabledReason = 'Sua mensagem personalizada aqui';
}
```

### **Diferentes Mensagens por Item:**

```typescript
private applyTemporaryBlocks(): void {
  const customMessages: { [key: string]: string } = {
    'maintenance': 'Manutenção em refatoração - aguarde próxima versão',
    'reports': 'Relatórios temporariamente indisponíveis',
    'settings': 'Configurações em manutenção programada'
  };

  this.menuItems = this.menuItems.map(item => {
    if (this.temporaryBlocks[item.id]) {
      item.disabled = true;
      item.disabledReason = customMessages[item.id] || 'Funcionalidade temporariamente indisponível';
    }
    // ... resto do código
  });
}
```

## 🚀 Fluxo de Deploy

### **1. Antes do Deploy:**
```typescript
// Bloquear funcionalidades não finalizadas
private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': true,
  'reports': true,
  'settings': true,
};
```

### **2. Compilar e Testar:**
```bash
ng build idt_app --configuration production
# Testar no ambiente de staging
```

### **3. Deploy em Produção:**
```bash
# Deploy com botões bloqueados
```

### **4. Depois das Correções:**
```typescript
// Liberar funcionalidades corrigidas
private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': false, // ✅ Corrigido
  'reports': true,     // 🚫 Ainda em trabalho
  'settings': false,   // ✅ Corrigido
};
```

### **5. Deploy Final:**
```typescript
// Liberar tudo
private temporaryBlocks: { [key: string]: boolean } = {};
```

## 🎯 Benefícios

### ✅ **Para Deploy:**
- Deploy seguro com funcionalidades incompletas
- Usuários não acessam páginas quebradas
- Feedback visual claro sobre indisponibilidade

### ✅ **Para Desenvolvimento:**
- Controle granular por botão/submenu
- Configuração simples e rápida
- Reversível sem código complexo

### ✅ **Para Usuários:**
- Interface consistente
- Não quebra navegação
- Feedback claro sobre status

## ⚠️ Observações Importantes

1. **Temporário**: Este sistema é para bloqueios temporários, não permanentes
2. **Não substitui**: Controle de permissões real (roles/permissions)
3. **Deploy**: Sempre testar antes de fazer deploy
4. **Documentar**: Comentar motivos dos bloqueios no código
5. **Limpar**: Remover bloqueios quando funcionalidades estiverem prontas

## 🔄 Rollback Rápido

Para reverter bloqueios rapidamente:

```typescript
private temporaryBlocks: { [key: string]: boolean } = {
  // Comentar linha para liberar:
  // 'maintenance': true,  // ← Comentado = liberado
};
```

---

**Este sistema permite deploy seguro e controlado, evitando que usuários acessem funcionalidades em desenvolvimento.** 🚀