# Plano de Implementação: Redesign do Painel de Configurações

## Overview
Melhorar a organização e o design visual do Painel de Controle (aba de Configurações) em `frontend/admin.html`, que atualmente está bagunçado e amador, reestruturando-o com abas laterais internas elegantes e de alta fidelidade visual.

## Project Type
**WEB**

## Success Criteria
- O Painel de Controle deve possuir uma navegação lateral interna organizada em categorias.
- Transições suaves ao alternar entre as abas.
- Zero quebras de funcionalidade (todos os botões de salvar, inputs de upload e checkboxes de dias e temas continuam funcionando perfeitamente).
- Passar com sucesso no script de validação de código local.

## Tech Stack
- HTML5, CSS3 Customizado, Vanilla JavaScript (sem frameworks adicionais de CSS/UI, respeitando a arquitetura existente).

## File Structure
Modificações limitadas ao arquivo:
- [frontend/admin.html](file:///d:/SERVIDO_QNB/frontend/admin.html)

## Task Breakdown

### Task 1: Preparação do CSS no admin.html
- **Agente**: `frontend-specialist`
- **Skills**: `clean-code`, `frontend-design`
- **Dependencies**: Nenhuma
- **Passos**:
  - Adicionar as definições de CSS para `.config-layout-wrapper`, `.config-sidebar-nav`, `.config-nav-item`, `.config-content-area` e classes utilitárias no bloco `<style>` do `admin.html`.
- **INPUT**: Código CSS moderno projetado com base no guia de UI.
- **OUTPUT**: Folha de estilos no `<style>` de `admin.html` atualizada.
- **VERIFY**: Verificar visualmente se a folha de estilos não apresenta erros de digitação.

### Task 2: Reestruturação do HTML do Painel de Controle
- **Agente**: `frontend-specialist`
- **Skills**: `clean-code`, `frontend-design`
- **Dependencies**: Task 1
- **Passos**:
  - Substituir o wrapper da aba `#aba-config` por uma estrutura de duas colunas.
  - Inserir a sidebar de navegação à esquerda.
  - Agrupar os cartões de configurações nas seções adequadas à direita com IDs específicos.
  - Inserir a função inline `window.mudarSubAbaConfig(abaId, el)`.
- **INPUT**: Estrutura atual de cards.
- **OUTPUT**: Novo HTML estruturado com wrappers de exibição condicional.
- **VERIFY**: Inspecionar os IDs e classes funcionais para garantir integridade.

### Task 3: Validação das Funções e Persistência
- **Agente**: `test-engineer`
- **Skills**: `testing-patterns`
- **Dependencies**: Task 2
- **Passos**:
  - Testar todas as interações de salvamento e alteração de valores.
- **INPUT**: Testes manuais na interface.
- **OUTPUT**: Todas as configurações são alteradas e salvas com sucesso.
- **VERIFY**: Console do navegador livre de erros.

## Phase X: Verificação Final
- Executar `python .agent/scripts/checklist.py .` para validar a conformidade geral.
- Limpeza: certificar-se de que nenhum código temporário foi deixado para trás.

## ✅ PHASE X COMPLETE
- Lint: ✅ Pass
- Security: ✅ No critical issues
- Build: ✅ Success
- Date: 2026-06-08