Sessoes 1-6 acumuladas: hardening B2, defesa em camadas, +192 testes
Repositorio estava ha ~5 sessoes sem commit. Consolida tudo desde d088a89.
Ver commit.md na raiz para descricao completa por sessao.
# Numeros
- A# auditoria abertos: 0/30
- V# verificacoes abertos: 5/52 (todos adiados com plano)
- T# testes escritos: 10/10
- Vitest: 192/192
- SQL integration: 33/33
- E2E (Playwright, novo): 5/5
- Migrations: 17 (10 novas Sessao 6)
- Areas auditadas: 7 (+documentos com 10 V#)
# Highlights Sessao 6 (hoje)
- V#34/V#41 Opcao B2: tenant_features com plano + override (RPC SECURITY DEFINER, tela /saas/tenant-features)
- A#20 rev2 self-hosted: defesa em 5 camadas (honeypot + rate limit + math captcha condicional + paranoid mode + dashboard /saas/security)
- Documentos hardening (V#43-V#49): tenant scoping em storage policies (vazamento entre clinicas eliminado), RPC validate_share_token, signatures policy granular
- SaaS Twilio Config (/saas/twilio-config): UI editavel para SID/webhook/cotacao; AUTH_TOKEN permanece em env var
- T#9 + T#10: useAgendaEvents.spec.js + Playwright E2E (descobriu bug no front que foi corrigido)
# Sessoes anteriores (1-5) consolidadas
- Sessao 1: auth/router/session, normalizeRole extraido
- Sessao 2: agenda - composables/services consolidados
- Sessao 3: pacientes - tenant_id em todas queries
- Sessao 4: security review pagina publica - 14/15 vulnerabilidades corrigidas
- Sessao 5: SaaS - P0 (A#30: 7 tabelas com RLS off corrigidas)
# .gitignore ajustado
- supabase/* + !supabase/functions/ (mantem 10 edge functions, ignora .temp/migrations gerados pelo CLI)
- database-novo/backups/ (regeneravel via db.cjs backup)
- test-results/ + playwright-report/
- .claude/settings.local.json (config local com senha de dev removida do tracking)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -0,0 +1,223 @@
|
||||
# AgenciaPsi — Estrutura Atual
|
||||
|
||||
> Snapshot do que já está construído no sistema hoje (2026-04-17).
|
||||
> Inventário extraído dos menus de cada perfil de usuário.
|
||||
|
||||
**Legenda:** `[ok]` pronto · `[~]` parcial (estrutura existe, refinar) · `[--]` placeholder/vazio
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
AgenciaPsi (v5.0.0)
|
||||
│
|
||||
├── SaaS Admin (operação da plataforma)
|
||||
│ │
|
||||
│ ├── Início
|
||||
│ │ └── Dashboard [ok] /saas
|
||||
│ │
|
||||
│ ├── Planos
|
||||
│ │ ├── Planos e Preços [ok] /saas/plans
|
||||
│ │ ├── Vitrine Pública [ok] /saas/plans-public
|
||||
│ │ ├── Recursos (features) [ok] /saas/features
|
||||
│ │ ├── Controle de Recursos [ok] /saas/plan-features
|
||||
│ │ └── Limites por Plano [ok] /saas/plan-limits
|
||||
│ │
|
||||
│ ├── Assinaturas
|
||||
│ │ ├── Listagem [ok] /saas/subscriptions
|
||||
│ │ ├── Intenções [ok] /saas/subscription-intents
|
||||
│ │ ├── Histórico (eventos) [ok] /saas/subscription-events
|
||||
│ │ └── Saúde das Assinaturas [ok] /saas/subscription-health
|
||||
│ │
|
||||
│ ├── Operações
|
||||
│ │ ├── Clínicas (Tenants) [ok] /saas/tenants
|
||||
│ │ ├── Feriados [ok] /saas/feriados
|
||||
│ │ └── Suporte Técnico [ok] /saas/support
|
||||
│ │
|
||||
│ ├── Canais de Comunicação
|
||||
│ │ ├── WhatsApp (Evolution API) [ok] /saas/whatsapp
|
||||
│ │ ├── WhatsApp Twilio (Subcontas) [ok] /saas/twilio-whatsapp
|
||||
│ │ ├── Templates WhatsApp/SMS [ok] /saas/notification-templates
|
||||
│ │ └── Add-ons / Créditos SMS [ok] /saas/addons
|
||||
│ │
|
||||
│ └── Conteúdo
|
||||
│ ├── Documentação [ok] /saas/docs
|
||||
│ ├── FAQ [ok] /saas/faq
|
||||
│ ├── Carrossel de Login [ok] /saas/login-carousel
|
||||
│ ├── Avisos Globais [ok] /saas/global-notices
|
||||
│ ├── Templates de E-mail [ok] /saas/email-templates
|
||||
│ └── Templates de Documentos [ok] /saas/document-templates
|
||||
│
|
||||
├── Clínica Admin (gestão da clínica)
|
||||
│ │
|
||||
│ ├── Início
|
||||
│ │ ├── Dashboard da Clínica [ok] /admin
|
||||
│ │ ├── Agenda da Clínica [ok] /admin/agenda/clinica
|
||||
│ │ ├── Recorrências [ok] /admin/agenda/recorrencias
|
||||
│ │ └── Compromissos [ok] /admin/agenda/compromissos
|
||||
│ │
|
||||
│ ├── Pacientes
|
||||
│ │ ├── Lista de Pacientes [ok] /admin/pacientes
|
||||
│ │ ├── Grupos [ok] /admin/pacientes/grupos
|
||||
│ │ ├── Tags [ok] /admin/pacientes/tags
|
||||
│ │ ├── Médicos & Referências [ok] /admin/pacientes/medicos
|
||||
│ │ ├── Link Externo (cadastro) [ok] /admin/pacientes/link-externo
|
||||
│ │ ├── Cadastros Recebidos [ok] /admin/pacientes/cadastro/recebidos
|
||||
│ │ └── Templates de Documentos [ok] /admin/documents/templates
|
||||
│ │
|
||||
│ ├── Gestão
|
||||
│ │ ├── Profissionais [ok] /admin/clinic/professionals
|
||||
│ │ ├── Tipos de Clínicas (features ativas) [ok] /admin/clinic/features
|
||||
│ │ └── Meu Plano [ok] /admin/meu-plano
|
||||
│ │
|
||||
│ ├── Financeiro
|
||||
│ │ └── Cobranças [ok] /admin/financeiro
|
||||
│ │
|
||||
│ └── Sistema
|
||||
│ ├── Meu Perfil [ok] /account/profile
|
||||
│ ├── Meu Negócio [ok] /account/negocio
|
||||
│ ├── Segurança [ok] /admin/settings/security
|
||||
│ ├── Agendamento Online (PRO) [ok] /admin/online-scheduling
|
||||
│ └── Agendamentos Recebidos [ok] /admin/agendamentos-recebidos
|
||||
│
|
||||
├── Terapeuta (dia-a-dia do profissional)
|
||||
│ │
|
||||
│ ├── Início
|
||||
│ │ └── Dashboard [ok] /therapist
|
||||
│ │
|
||||
│ ├── Agenda
|
||||
│ │ ├── Agenda [ok] /therapist/agenda
|
||||
│ │ ├── Recorrências [ok] /therapist/agenda/recorrencias
|
||||
│ │ └── Compromissos [ok] /therapist/agenda/compromissos
|
||||
│ │
|
||||
│ ├── Pacientes
|
||||
│ │ ├── Meus Pacientes [ok] /therapist/patients
|
||||
│ │ ├── Grupos de Pacientes [ok] /therapist/patients/grupos
|
||||
│ │ ├── Tags [ok] /therapist/patients/tags
|
||||
│ │ ├── Médicos & Referências [ok] /therapist/patients/medicos
|
||||
│ │ ├── Documentos [ok] /therapist/documents
|
||||
│ │ ├── Templates de Documentos [ok] /therapist/documents/templates
|
||||
│ │ ├── Meu Link de Cadastro [ok] /therapist/patients/link-externo
|
||||
│ │ └── Cadastros Recebidos [ok] /therapist/patients/cadastro/recebidos
|
||||
│ │
|
||||
│ ├── Agendamento Online
|
||||
│ │ ├── Configurar Página Pública [ok] /therapist/online-scheduling
|
||||
│ │ └── Agendamentos Recebidos [ok] /therapist/agendamentos-recebidos
|
||||
│ │
|
||||
│ ├── Financeiro
|
||||
│ │ ├── Cobranças [ok] /therapist/financeiro
|
||||
│ │ └── Lançamentos [ok] /therapist/financeiro/lancamentos
|
||||
│ │
|
||||
│ ├── Relatórios
|
||||
│ │ └── Relatórios [~] /therapist/relatorios (export PDF/Excel a validar)
|
||||
│ │
|
||||
│ └── Conta
|
||||
│ ├── Meu Plano [ok] /therapist/meu-plano
|
||||
│ ├── Meu Perfil [ok] /account/profile
|
||||
│ ├── Meu Negócio [ok] /account/negocio
|
||||
│ └── Segurança [ok] /account/security
|
||||
│
|
||||
├── Supervisor (supervisão de casos)
|
||||
│ │
|
||||
│ ├── Início
|
||||
│ │ └── Dashboard [ok] /supervisor
|
||||
│ │
|
||||
│ ├── Supervisão
|
||||
│ │ └── Sala de Supervisão [~] /supervisor/sala (features avançadas a confirmar)
|
||||
│ │
|
||||
│ └── Conta
|
||||
│ ├── Meu Plano [ok] /supervisor/meu-plano
|
||||
│ ├── Meu Perfil [ok] /account/profile
|
||||
│ └── Segurança [ok] /account/security
|
||||
│
|
||||
├── Portal do Paciente (portal web para o paciente)
|
||||
│ │
|
||||
│ ├── Início
|
||||
│ │ └── Dashboard [ok] /portal
|
||||
│ │
|
||||
│ ├── Minhas Sessões
|
||||
│ │ └── Sessões [ok] /portal/sessoes
|
||||
│ │
|
||||
│ └── Conta
|
||||
│ ├── Meu Plano [ok] /portal/meu-plano
|
||||
│ ├── Minha Conta [ok] /account/profile
|
||||
│ └── Segurança [ok] /account/security
|
||||
│
|
||||
└── Editor de Conteúdo (criação de cursos — roadmap futuro)
|
||||
│
|
||||
├── Início
|
||||
│ └── Dashboard [ok] /editor
|
||||
│
|
||||
├── Conteúdo
|
||||
│ ├── Cursos [--] /editor/cursos (placeholder)
|
||||
│ ├── Módulos [--] /editor/modulos (placeholder)
|
||||
│ └── Publicados [--] /editor/publicados (placeholder)
|
||||
│
|
||||
└── Conta
|
||||
├── Meu Plano [ok] /editor/meu-plano
|
||||
├── Meu Perfil [ok] /account/profile
|
||||
└── Segurança [ok] /account/security
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Stack / Infraestrutura (suporte)
|
||||
|
||||
```
|
||||
Infraestrutura
|
||||
│
|
||||
├── Banco & Backend
|
||||
│ ├── Supabase (Postgres + Auth + Storage + Realtime + Edge Functions) [ok]
|
||||
│ ├── PostgreSQL 15 (container Docker local + cloud) [ok]
|
||||
│ └── Docker Compose (supabase + evolution-api) [ok]
|
||||
│
|
||||
├── Comunicação
|
||||
│ ├── Evolution API (WhatsApp) [ok]
|
||||
│ ├── Twilio (SMS / Voz / WhatsApp Business) [ok]
|
||||
│ ├── Mailpit (SMTP dev local) [ok]
|
||||
│ └── SMTP produção (envio real de e-mails) [--] pendente
|
||||
│
|
||||
├── Geração de Documentos
|
||||
│ ├── pdfmake + html2pdf + jsPDF [ok]
|
||||
│ ├── Jodit (editor rico) [ok]
|
||||
│ └── html2canvas-pro [ok]
|
||||
│
|
||||
├── Frontend
|
||||
│ ├── Vue 3 + Composition API [ok]
|
||||
│ ├── Vite 5 + Brotli/Gzip [ok]
|
||||
│ ├── PrimeVue 4 (tema Sakai) [ok]
|
||||
│ ├── Tailwind v4 [ok]
|
||||
│ ├── Vue Router (guards por role/tenant) [ok]
|
||||
│ ├── Pinia (state) [ok]
|
||||
│ ├── FullCalendar 6 (agenda) [ok]
|
||||
│ └── Chart.js 3 (dashboards) [ok]
|
||||
│
|
||||
└── Dev / Tooling
|
||||
├── Supabase CLI [ok]
|
||||
├── db.cjs (setup/backup/restore/migrate/verify) [ok]
|
||||
├── generate-dashboard.cjs (mapa do banco) [ok]
|
||||
├── Vitest 4 [~] base pronta, cobertura a expandir
|
||||
└── ESLint + Prettier [ok]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resumo numérico
|
||||
|
||||
- **6 perfis** (roles)
|
||||
- **27 grupos** de navegação
|
||||
- **79 features** ativas no menu
|
||||
- **73** `[ok]` prontas
|
||||
- **2** `[~]` parciais
|
||||
- **4** `[--]` placeholders
|
||||
- **97 tabelas** no banco (11 domínios)
|
||||
- **27 views**
|
||||
- **165 funções SQL**
|
||||
|
||||
---
|
||||
|
||||
## Próximos passos (a definir nesta manhã)
|
||||
|
||||
- [ ] Mapear módulos que **deveriam existir** mas ainda não estão (comparando com Psicomanager / SimplePractice / iClinic)
|
||||
- [ ] Organizar o roadmap em **fases** (MVP → v2 → v3)
|
||||
- [ ] Identificar dependências entre módulos (ex: pagamento integrado antes de faturamento automático)
|
||||
- [ ] Decidir cortes (o que fica pra pós-MVP)
|
||||
Binary file not shown.
@@ -0,0 +1,741 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mapa do Sistema · AgenciaPsi</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/primeicons@7.0.0/primeicons.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #0b0d12;
|
||||
--bg2: #111520;
|
||||
--bg3: #181e2d;
|
||||
--bg4: #1e2740;
|
||||
--border: #1e2740;
|
||||
--border2: #2a3552;
|
||||
--text: #e2e8f8;
|
||||
--text2: #94a3b8;
|
||||
--text3: #5a6782;
|
||||
--accent: #6366f1;
|
||||
--ok: #22c55e;
|
||||
--warn: #eab308;
|
||||
--pend: #f87171;
|
||||
|
||||
/* role colors */
|
||||
--saas: #4f8cff;
|
||||
--clinic: #38bdf8;
|
||||
--therapist: #6366f1;
|
||||
--supervisor: #a78bfa;
|
||||
--portal: #ec4899;
|
||||
--editor: #fb923c;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ============ TOPBAR ============ */
|
||||
.topbar {
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
display: flex; align-items: center; gap: 20px;
|
||||
padding: 0 28px; height: 60px;
|
||||
background: rgba(11,13,18,.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.brand { font-weight: 700; font-size: 16px; letter-spacing: -.3px; }
|
||||
.brand span { color: var(--accent); }
|
||||
.brand small { display: block; font-size: 10px; font-weight: 400; color: var(--text3); font-family: 'IBM Plex Mono', monospace; margin-top: -2px; }
|
||||
.search {
|
||||
flex: 1; max-width: 360px;
|
||||
background: var(--bg3); border: 1px solid var(--border);
|
||||
border-radius: 8px; padding: 7px 14px;
|
||||
color: var(--text); font-size: 13px; outline: none;
|
||||
transition: border-color .15s;
|
||||
}
|
||||
.search:focus { border-color: var(--accent); }
|
||||
.search::placeholder { color: var(--text3); }
|
||||
|
||||
.legend { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 12px; color: var(--text2); }
|
||||
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
|
||||
.dot-done { background: var(--ok); }
|
||||
.dot-partial { background: var(--warn); }
|
||||
.dot-missing { background: var(--pend); }
|
||||
|
||||
.stats-pill { display: flex; gap: 10px; }
|
||||
.stats-pill .p {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
font-size: 12px; color: var(--text2);
|
||||
background: var(--bg3); border: 1px solid var(--border);
|
||||
border-radius: 20px; padding: 4px 12px;
|
||||
}
|
||||
.stats-pill .p strong { color: var(--text); font-size: 13px; }
|
||||
|
||||
/* ============ HERO ============ */
|
||||
.hero {
|
||||
padding: 40px 28px 20px;
|
||||
text-align: center;
|
||||
background: radial-gradient(ellipse at center top, rgba(99,102,241,.12), transparent 60%);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 8px; }
|
||||
.hero h1 span { color: var(--accent); }
|
||||
.hero p { font-size: 14px; color: var(--text2); max-width: 640px; margin: 0 auto; line-height: 1.55; }
|
||||
|
||||
.hub {
|
||||
display: inline-block; margin: 24px auto 8px;
|
||||
padding: 18px 32px;
|
||||
background: linear-gradient(135deg, var(--accent), #8b5cf6);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 40px rgba(99,102,241,.35), 0 0 0 4px rgba(99,102,241,.15);
|
||||
font-size: 17px; font-weight: 700; letter-spacing: -.2px;
|
||||
}
|
||||
.hub .tag {
|
||||
display: inline-block; margin-right: 10px;
|
||||
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
|
||||
background: rgba(255,255,255,.2); padding: 3px 8px; border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hero-totals {
|
||||
display: flex; justify-content: center; gap: 20px;
|
||||
margin-top: 20px;
|
||||
font-size: 13px; color: var(--text2);
|
||||
}
|
||||
.hero-totals b { color: var(--text); }
|
||||
|
||||
/* ============ GRID ============ */
|
||||
.map {
|
||||
padding: 30px 28px 60px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
|
||||
gap: 22px;
|
||||
max-width: 1900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ============ ROLE CARD ============ */
|
||||
.role {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
transition: border-color .2s;
|
||||
position: relative;
|
||||
}
|
||||
.role::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
|
||||
background: var(--rc);
|
||||
}
|
||||
.role:hover { border-color: var(--border2); }
|
||||
|
||||
.role-head {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 18px 20px 14px;
|
||||
cursor: pointer; user-select: none;
|
||||
}
|
||||
.role-icon {
|
||||
width: 42px; height: 42px; border-radius: 10px;
|
||||
display: grid; place-items: center;
|
||||
background: color-mix(in srgb, var(--rc) 18%, transparent);
|
||||
color: var(--rc);
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.role-meta { flex: 1; min-width: 0; }
|
||||
.role-name { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
|
||||
.role-sub { font-size: 11px; color: var(--text3); font-family: 'IBM Plex Mono', monospace; margin-top: 2px; }
|
||||
.role-counter {
|
||||
display: flex; gap: 6px; font-size: 10px; font-weight: 600;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
.role-counter span {
|
||||
padding: 3px 7px; border-radius: 10px;
|
||||
background: var(--bg4); color: var(--text2);
|
||||
}
|
||||
.role-counter span.done { background: rgba(34,197,94,.15); color: var(--ok); }
|
||||
.role-counter span.partial { background: rgba(234,179,8,.15); color: var(--warn); }
|
||||
.role-counter span.missing { background: rgba(248,113,113,.15); color: var(--pend); }
|
||||
.role-tg {
|
||||
color: var(--text3); font-size: 11px;
|
||||
transition: transform .2s;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.role-tg.open { transform: rotate(180deg); }
|
||||
|
||||
.role-body {
|
||||
display: none;
|
||||
padding: 0 20px 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.role-body.open { display: block; }
|
||||
|
||||
/* ============ GROUPS ============ */
|
||||
.group {
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
padding-left: 18px;
|
||||
border-left: 2px dashed color-mix(in srgb, var(--rc) 40%, transparent);
|
||||
}
|
||||
.group::before {
|
||||
content: ''; position: absolute; left: -6px; top: 6px;
|
||||
width: 10px; height: 10px; border-radius: 50%;
|
||||
background: var(--rc);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 15%, var(--bg2));
|
||||
}
|
||||
.group-head {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 12px; font-weight: 700; letter-spacing: 1px;
|
||||
color: color-mix(in srgb, var(--rc) 70%, var(--text));
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.group-head i { font-size: 13px; }
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.item {
|
||||
display: flex; align-items: center; gap: 9px;
|
||||
padding: 8px 11px;
|
||||
background: var(--bg3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.item:hover {
|
||||
background: var(--bg4);
|
||||
border-color: var(--border2);
|
||||
transform: translateX(1px);
|
||||
}
|
||||
.item.hl {
|
||||
background: color-mix(in srgb, var(--accent) 15%, var(--bg3));
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.item.dim { opacity: .25; }
|
||||
.item i.pi { font-size: 12px; color: var(--text3); flex-shrink: 0; }
|
||||
.item .lbl { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.item .status-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ============ PANEL (detail) ============ */
|
||||
.panel {
|
||||
position: fixed; top: 60px; right: 0; bottom: 0;
|
||||
width: 380px; max-width: 92vw;
|
||||
background: var(--bg2);
|
||||
border-left: 1px solid var(--border);
|
||||
padding: 24px 22px;
|
||||
transform: translateX(100%);
|
||||
transition: transform .2s ease-out;
|
||||
overflow-y: auto;
|
||||
z-index: 40;
|
||||
}
|
||||
.panel.open { transform: translateX(0); }
|
||||
.panel-close {
|
||||
position: absolute; top: 14px; right: 16px;
|
||||
background: none; border: none; cursor: pointer;
|
||||
color: var(--text2); font-size: 18px;
|
||||
width: 32px; height: 32px; border-radius: 6px;
|
||||
transition: background .15s;
|
||||
}
|
||||
.panel-close:hover { background: var(--bg4); color: var(--text); }
|
||||
|
||||
.panel-role {
|
||||
display: inline-block;
|
||||
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
|
||||
color: var(--rc); background: color-mix(in srgb, var(--rc) 15%, transparent);
|
||||
padding: 3px 9px; border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.panel-title {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
font-size: 18px; font-weight: 700; letter-spacing: -.2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.panel-title i {
|
||||
width: 36px; height: 36px; border-radius: 8px;
|
||||
display: grid; place-items: center;
|
||||
background: color-mix(in srgb, var(--rc) 18%, transparent);
|
||||
color: var(--rc); font-size: 16px;
|
||||
}
|
||||
.panel-group {
|
||||
font-size: 12px; color: var(--text2); margin-bottom: 20px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
.panel-section { margin-top: 18px; }
|
||||
.panel-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text3); margin-bottom: 6px; }
|
||||
.panel-value { font-size: 13px; color: var(--text); line-height: 1.55; }
|
||||
.panel-route {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
background: var(--bg3); border: 1px solid var(--border);
|
||||
padding: 8px 11px; border-radius: 6px;
|
||||
font-size: 12px; word-break: break-all;
|
||||
}
|
||||
.panel-status {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 4px 10px; border-radius: 10px;
|
||||
font-size: 11px; font-weight: 600; letter-spacing: .3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.panel-status.done { background: rgba(34,197,94,.15); color: var(--ok); }
|
||||
.panel-status.partial { background: rgba(234,179,8,.15); color: var(--warn); }
|
||||
.panel-status.missing { background: rgba(248,113,113,.15); color: var(--pend); }
|
||||
|
||||
.panel-btn {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
background: var(--accent); color: white;
|
||||
padding: 9px 16px; border-radius: 7px;
|
||||
font-size: 12px; font-weight: 600; text-decoration: none;
|
||||
transition: opacity .15s;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.panel-btn:hover { opacity: .9; }
|
||||
|
||||
/* ============ SEARCH no results ============ */
|
||||
.empty { text-align: center; padding: 40px; color: var(--text3); font-size: 13px; }
|
||||
|
||||
/* ============ RESPONSIVE ============ */
|
||||
@media (max-width: 860px) {
|
||||
.hero h1 { font-size: 22px; }
|
||||
.hub { font-size: 14px; padding: 14px 22px; }
|
||||
.legend { display: none; }
|
||||
.stats-pill { display: none; }
|
||||
.map { grid-template-columns: 1fr; padding: 20px 16px 40px; }
|
||||
.panel { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="brand">Mapa do Sistema<small>AgenciaPsi · v5.0.0</small></div>
|
||||
<input type="search" class="search" id="search" placeholder="Buscar feature, rota ou grupo..." autocomplete="off">
|
||||
<div class="stats-pill" id="stats"></div>
|
||||
<div class="legend">
|
||||
<span><i class="dot dot-done"></i>Pronto</span>
|
||||
<span><i class="dot dot-partial"></i>Parcial</span>
|
||||
<span><i class="dot dot-missing"></i>Faltando</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Mapa do <span>Sistema</span></h1>
|
||||
<p>Tudo que o AgenciaPsi entrega hoje, agrupado por perfil de usuário. Clique em qualquer feature pra ver detalhes — rota, status e notas. Use a busca no topo pra filtrar.</p>
|
||||
<div class="hub"><span class="tag">SaaS</span>AgenciaPsi</div>
|
||||
<div class="hero-totals" id="heroTotals"></div>
|
||||
</section>
|
||||
|
||||
<main class="map" id="map"></main>
|
||||
|
||||
<aside class="panel" id="panel">
|
||||
<button class="panel-close" onclick="closePanel()" aria-label="Fechar">✕</button>
|
||||
<div id="panelContent"></div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
// ======================================================================
|
||||
// DADOS - inventário extraído dos menus de cada role
|
||||
// ======================================================================
|
||||
const DATA = {
|
||||
"roles": {
|
||||
"saas": {
|
||||
"label": "SaaS Admin",
|
||||
"icon": "pi-shield",
|
||||
"color": "#4f8cff",
|
||||
"description": "Operação da plataforma — planos, assinaturas, clínicas, canais, conteúdo",
|
||||
"groups": [
|
||||
{ "label": "Início", "icon": "pi-chart-bar", "items": [
|
||||
{ "label": "Dashboard", "icon": "pi-chart-bar", "route": "/saas", "status": "done" }
|
||||
]},
|
||||
{ "label": "Planos", "icon": "pi-list", "items": [
|
||||
{ "label": "Planos e Preços", "icon": "pi-list", "route": "/saas/plans", "status": "done" },
|
||||
{ "label": "Vitrine Pública", "icon": "pi-megaphone", "route": "/saas/plans-public", "status": "done" },
|
||||
{ "label": "Recursos", "icon": "pi-bolt", "route": "/saas/features", "status": "done" },
|
||||
{ "label": "Controle de Recursos", "icon": "pi-th-large", "route": "/saas/plan-features", "status": "done" },
|
||||
{ "label": "Limites por Plano", "icon": "pi-sliders-h", "route": "/saas/plan-limits", "status": "done" }
|
||||
]},
|
||||
{ "label": "Assinaturas", "icon": "pi-credit-card", "items": [
|
||||
{ "label": "Listagem", "icon": "pi-list", "route": "/saas/subscriptions", "status": "done" },
|
||||
{ "label": "Intenções", "icon": "pi-inbox", "route": "/saas/subscription-intents", "status": "done" },
|
||||
{ "label": "Histórico", "icon": "pi-history", "route": "/saas/subscription-events", "status": "done" },
|
||||
{ "label": "Saúde das Assinaturas", "icon": "pi-shield", "route": "/saas/subscription-health", "status": "done" }
|
||||
]},
|
||||
{ "label": "Operações", "icon": "pi-users", "items": [
|
||||
{ "label": "Clínicas (Tenants)", "icon": "pi-users", "route": "/saas/tenants", "status": "done" },
|
||||
{ "label": "Feriados", "icon": "pi-star", "route": "/saas/feriados", "status": "done" },
|
||||
{ "label": "Suporte Técnico", "icon": "pi-headphones", "route": "/saas/support", "status": "done" }
|
||||
]},
|
||||
{ "label": "Canais de Comunicação", "icon": "pi-whatsapp", "items": [
|
||||
{ "label": "WhatsApp (Evolution)", "icon": "pi-whatsapp", "route": "/saas/whatsapp", "status": "done" },
|
||||
{ "label": "WhatsApp Twilio", "icon": "pi-whatsapp", "route": "/saas/twilio-whatsapp", "status": "done" },
|
||||
{ "label": "Templates WA/SMS", "icon": "pi-comment", "route": "/saas/notification-templates", "status": "done" },
|
||||
{ "label": "Add-ons / Créditos", "icon": "pi-box", "route": "/saas/addons", "status": "done" }
|
||||
]},
|
||||
{ "label": "Conteúdo", "icon": "pi-book", "items": [
|
||||
{ "label": "Documentação", "icon": "pi-question-circle", "route": "/saas/docs", "status": "done" },
|
||||
{ "label": "FAQ", "icon": "pi-comments", "route": "/saas/faq", "status": "done" },
|
||||
{ "label": "Carrossel Login", "icon": "pi-images", "route": "/saas/login-carousel", "status": "done" },
|
||||
{ "label": "Avisos Globais", "icon": "pi-megaphone", "route": "/saas/global-notices", "status": "done" },
|
||||
{ "label": "Templates E-mail", "icon": "pi-envelope", "route": "/saas/email-templates", "status": "done" },
|
||||
{ "label": "Templates Documentos", "icon": "pi-file-edit", "route": "/saas/document-templates", "status": "done" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
"clinic": {
|
||||
"label": "Clínica Admin",
|
||||
"icon": "pi-building",
|
||||
"color": "#38bdf8",
|
||||
"description": "Gestão da clínica — agenda, pacientes, profissionais, financeiro",
|
||||
"groups": [
|
||||
{ "label": "Início", "icon": "pi-home", "items": [
|
||||
{ "label": "Dashboard", "icon": "pi-home", "route": "/admin", "status": "done" },
|
||||
{ "label": "Agenda da Clínica", "icon": "pi-calendar", "route": "/admin/agenda/clinica", "status": "done" },
|
||||
{ "label": "Recorrências", "icon": "pi-refresh", "route": "/admin/agenda/recorrencias", "status": "done" },
|
||||
{ "label": "Compromissos", "icon": "pi-clock", "route": "/admin/agenda/compromissos", "status": "done" }
|
||||
]},
|
||||
{ "label": "Pacientes", "icon": "pi-users", "items": [
|
||||
{ "label": "Lista de Pacientes", "icon": "pi-users", "route": "/admin/pacientes", "status": "done" },
|
||||
{ "label": "Grupos", "icon": "pi-sitemap", "route": "/admin/pacientes/grupos", "status": "done" },
|
||||
{ "label": "Tags", "icon": "pi-tags", "route": "/admin/pacientes/tags", "status": "done" },
|
||||
{ "label": "Médicos & Referências", "icon": "pi-heart", "route": "/admin/pacientes/medicos", "status": "done" },
|
||||
{ "label": "Link Externo", "icon": "pi-link", "route": "/admin/pacientes/link-externo", "status": "done" },
|
||||
{ "label": "Cadastros recebidos", "icon": "pi-inbox", "route": "/admin/pacientes/cadastro/recebidos", "status": "done" },
|
||||
{ "label": "Templates Documentos", "icon": "pi-file-edit", "route": "/admin/documents/templates", "status": "done" }
|
||||
]},
|
||||
{ "label": "Gestão", "icon": "pi-id-card", "items": [
|
||||
{ "label": "Profissionais", "icon": "pi-id-card", "route": "/admin/clinic/professionals", "status": "done" },
|
||||
{ "label": "Tipos de Clínicas", "icon": "pi-sliders-h", "route": "/admin/clinic/features", "status": "done" },
|
||||
{ "label": "Meu plano", "icon": "pi-credit-card", "route": "/admin/meu-plano", "status": "done" }
|
||||
]},
|
||||
{ "label": "Financeiro", "icon": "pi-wallet", "items": [
|
||||
{ "label": "Cobranças", "icon": "pi-wallet", "route": "/admin/financeiro", "status": "done" }
|
||||
]},
|
||||
{ "label": "Sistema", "icon": "pi-cog", "items": [
|
||||
{ "label": "Meu Perfil", "icon": "pi-user", "route": "/account/profile", "status": "done" },
|
||||
{ "label": "Meu Negócio", "icon": "pi-building", "route": "/account/negocio", "status": "done" },
|
||||
{ "label": "Segurança", "icon": "pi-shield", "route": "/admin/settings/security", "status": "done" },
|
||||
{ "label": "Agendamento Online (PRO)", "icon": "pi-calendar-plus", "route": "/admin/online-scheduling", "status": "done" },
|
||||
{ "label": "Agendamentos Recebidos", "icon": "pi-inbox", "route": "/admin/agendamentos-recebidos", "status": "done" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
"therapist": {
|
||||
"label": "Terapeuta",
|
||||
"icon": "pi-user",
|
||||
"color": "#6366f1",
|
||||
"description": "Dia-a-dia do profissional — agenda, prontuários, documentos, cobrança",
|
||||
"groups": [
|
||||
{ "label": "Início", "icon": "pi-home", "items": [
|
||||
{ "label": "Dashboard", "icon": "pi-home", "route": "/therapist", "status": "done" }
|
||||
]},
|
||||
{ "label": "Agenda", "icon": "pi-calendar", "items": [
|
||||
{ "label": "Agenda", "icon": "pi-calendar", "route": "/therapist/agenda", "status": "done" },
|
||||
{ "label": "Recorrências", "icon": "pi-refresh", "route": "/therapist/agenda/recorrencias", "status": "done" },
|
||||
{ "label": "Compromissos", "icon": "pi-clock", "route": "/therapist/agenda/compromissos", "status": "done" }
|
||||
]},
|
||||
{ "label": "Pacientes", "icon": "pi-list", "items": [
|
||||
{ "label": "Meus pacientes", "icon": "pi-list", "route": "/therapist/patients", "status": "done" },
|
||||
{ "label": "Grupos de pacientes", "icon": "pi-users", "route": "/therapist/patients/grupos", "status": "done" },
|
||||
{ "label": "Tags", "icon": "pi-tags", "route": "/therapist/patients/tags", "status": "done" },
|
||||
{ "label": "Médicos & Referências", "icon": "pi-heart", "route": "/therapist/patients/medicos", "status": "done" },
|
||||
{ "label": "Documentos", "icon": "pi-file", "route": "/therapist/documents", "status": "done" },
|
||||
{ "label": "Templates Documentos", "icon": "pi-file-edit", "route": "/therapist/documents/templates", "status": "done" },
|
||||
{ "label": "Meu link de cadastro", "icon": "pi-link", "route": "/therapist/patients/link-externo", "status": "done" },
|
||||
{ "label": "Cadastros recebidos", "icon": "pi-inbox", "route": "/therapist/patients/cadastro/recebidos", "status": "done" }
|
||||
]},
|
||||
{ "label": "Agendamento Online", "icon": "pi-globe", "items": [
|
||||
{ "label": "Configurar página", "icon": "pi-globe", "route": "/therapist/online-scheduling", "status": "done" },
|
||||
{ "label": "Agendamentos Recebidos", "icon": "pi-inbox", "route": "/therapist/agendamentos-recebidos", "status": "done" }
|
||||
]},
|
||||
{ "label": "Financeiro", "icon": "pi-wallet", "items": [
|
||||
{ "label": "Cobranças", "icon": "pi-wallet", "route": "/therapist/financeiro", "status": "done" },
|
||||
{ "label": "Lançamentos", "icon": "pi-list", "route": "/therapist/financeiro/lancamentos", "status": "done" }
|
||||
]},
|
||||
{ "label": "Relatórios", "icon": "pi-chart-bar", "items": [
|
||||
{ "label": "Relatórios", "icon": "pi-chart-bar", "route": "/therapist/relatorios", "status": "partial", "notes": "Página existe, mas export PDF/Excel pode não estar 100% — validar." }
|
||||
]},
|
||||
{ "label": "Conta", "icon": "pi-user", "items": [
|
||||
{ "label": "Meu plano", "icon": "pi-credit-card", "route": "/therapist/meu-plano", "status": "done" },
|
||||
{ "label": "Meu Perfil", "icon": "pi-user", "route": "/account/profile", "status": "done" },
|
||||
{ "label": "Meu Negócio", "icon": "pi-building", "route": "/account/negocio", "status": "done" },
|
||||
{ "label": "Segurança", "icon": "pi-shield", "route": "/account/security", "status": "done" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
"supervisor": {
|
||||
"label": "Supervisor",
|
||||
"icon": "pi-users",
|
||||
"color": "#a78bfa",
|
||||
"description": "Supervisão de casos e grupos",
|
||||
"groups": [
|
||||
{ "label": "Início", "icon": "pi-home", "items": [
|
||||
{ "label": "Dashboard", "icon": "pi-home", "route": "/supervisor", "status": "done" }
|
||||
]},
|
||||
{ "label": "Supervisão", "icon": "pi-users", "items": [
|
||||
{ "label": "Sala de Supervisão", "icon": "pi-users", "route": "/supervisor/sala", "status": "partial", "notes": "Estrutura base pronta — features avançadas (gravação, anotações colaborativas) a confirmar." }
|
||||
]},
|
||||
{ "label": "Conta", "icon": "pi-user", "items": [
|
||||
{ "label": "Meu plano", "icon": "pi-credit-card", "route": "/supervisor/meu-plano", "status": "done" },
|
||||
{ "label": "Meu Perfil", "icon": "pi-user", "route": "/account/profile", "status": "done" },
|
||||
{ "label": "Segurança", "icon": "pi-shield", "route": "/account/security", "status": "done" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
"portal": {
|
||||
"label": "Portal do Paciente",
|
||||
"icon": "pi-heart",
|
||||
"color": "#ec4899",
|
||||
"description": "Portal web pro paciente — ver sessões, histórico, dados",
|
||||
"groups": [
|
||||
{ "label": "Início", "icon": "pi-home", "items": [
|
||||
{ "label": "Dashboard", "icon": "pi-home", "route": "/portal", "status": "done" }
|
||||
]},
|
||||
{ "label": "Minhas sessões", "icon": "pi-calendar", "items": [
|
||||
{ "label": "Sessões", "icon": "pi-calendar", "route": "/portal/sessoes", "status": "done" }
|
||||
]},
|
||||
{ "label": "Conta", "icon": "pi-user", "items": [
|
||||
{ "label": "Meu plano", "icon": "pi-credit-card", "route": "/portal/meu-plano", "status": "done" },
|
||||
{ "label": "Minha Conta", "icon": "pi-user", "route": "/account/profile", "status": "done" },
|
||||
{ "label": "Segurança", "icon": "pi-shield", "route": "/account/security", "status": "done" }
|
||||
]}
|
||||
]
|
||||
},
|
||||
"editor": {
|
||||
"label": "Editor de Conteúdo",
|
||||
"icon": "pi-book",
|
||||
"color": "#fb923c",
|
||||
"description": "Criação de cursos e conteúdo (roadmap futuro)",
|
||||
"groups": [
|
||||
{ "label": "Início", "icon": "pi-home", "items": [
|
||||
{ "label": "Dashboard", "icon": "pi-home", "route": "/editor", "status": "done" }
|
||||
]},
|
||||
{ "label": "Conteúdo", "icon": "pi-book", "items": [
|
||||
{ "label": "Cursos", "icon": "pi-book", "route": "/editor/cursos", "status": "partial", "notes": "Placeholder / estrutura inicial — biblioteca de cursos ainda não está plena." },
|
||||
{ "label": "Módulos", "icon": "pi-th-large", "route": "/editor/modulos", "status": "partial", "notes": "Placeholder / estrutura inicial." },
|
||||
{ "label": "Publicados", "icon": "pi-check-circle", "route": "/editor/publicados", "status": "partial", "notes": "Placeholder / estrutura inicial." }
|
||||
]},
|
||||
{ "label": "Conta", "icon": "pi-user", "items": [
|
||||
{ "label": "Meu plano", "icon": "pi-credit-card", "route": "/editor/meu-plano", "status": "done" },
|
||||
{ "label": "Meu Perfil", "icon": "pi-user", "route": "/account/profile", "status": "done" },
|
||||
{ "label": "Segurança", "icon": "pi-shield", "route": "/account/security", "status": "done" }
|
||||
]}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ======================================================================
|
||||
// RENDER
|
||||
// ======================================================================
|
||||
const STATUS_LABEL = { done: 'Pronto', partial: 'Parcial', missing: 'Faltando' };
|
||||
let currentQuery = '';
|
||||
|
||||
function countItems(role) {
|
||||
const total = role.groups.reduce((s, g) => s + g.items.length, 0);
|
||||
const done = role.groups.reduce((s, g) => s + g.items.filter(i => i.status === 'done').length, 0);
|
||||
const partial = role.groups.reduce((s, g) => s + g.items.filter(i => i.status === 'partial').length, 0);
|
||||
const missing = role.groups.reduce((s, g) => s + g.items.filter(i => i.status === 'missing').length, 0);
|
||||
return { total, done, partial, missing };
|
||||
}
|
||||
|
||||
function matchesQuery(item, group, role) {
|
||||
if (!currentQuery) return true;
|
||||
const q = currentQuery.toLowerCase();
|
||||
return (
|
||||
item.label.toLowerCase().includes(q) ||
|
||||
(item.route || '').toLowerCase().includes(q) ||
|
||||
group.label.toLowerCase().includes(q) ||
|
||||
role.label.toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
|
||||
function renderMap() {
|
||||
const map = document.getElementById('map');
|
||||
let html = '';
|
||||
let totalMatch = 0;
|
||||
|
||||
for (const [key, role] of Object.entries(DATA.roles)) {
|
||||
const counts = countItems(role);
|
||||
let visibleGroups = '';
|
||||
let groupsWithMatches = 0;
|
||||
|
||||
for (const group of role.groups) {
|
||||
const itemsHtml = group.items.map(item => {
|
||||
const match = matchesQuery(item, group, role);
|
||||
if (match) totalMatch++;
|
||||
const dim = currentQuery && !match ? ' dim' : '';
|
||||
const hl = currentQuery && match ? ' hl' : '';
|
||||
const statusColor = { done: 'var(--ok)', partial: 'var(--warn)', missing: 'var(--pend)' }[item.status] || 'var(--text3)';
|
||||
return `<div class="item${dim}${hl}" onclick="openPanel('${key}','${escapeAttr(group.label)}','${escapeAttr(item.label)}')">
|
||||
<i class="pi ${item.icon}"></i>
|
||||
<span class="lbl">${escapeHtml(item.label)}</span>
|
||||
<span class="status-dot" style="background:${statusColor}"></span>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
const groupMatched = group.items.some(i => matchesQuery(i, group, role)) || matchesQuery({label:'',route:''}, group, role);
|
||||
if (groupMatched) groupsWithMatches++;
|
||||
|
||||
visibleGroups += `
|
||||
<div class="group">
|
||||
<div class="group-head"><i class="pi ${group.icon}"></i>${escapeHtml(group.label)}</div>
|
||||
<div class="items">${itemsHtml}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Decide expansion default: expanded if no search (so user sees all), expanded if search matches any
|
||||
const expanded = !currentQuery || groupsWithMatches > 0;
|
||||
|
||||
html += `
|
||||
<section class="role" style="--rc:${role.color}">
|
||||
<div class="role-head" onclick="toggleRole('${key}')">
|
||||
<div class="role-icon"><i class="pi ${role.icon}"></i></div>
|
||||
<div class="role-meta">
|
||||
<div class="role-name">${escapeHtml(role.label)}</div>
|
||||
<div class="role-sub">${escapeHtml(role.description)}</div>
|
||||
</div>
|
||||
<div class="role-counter">
|
||||
<span class="done">${counts.done}</span>
|
||||
${counts.partial ? `<span class="partial">${counts.partial}</span>` : ''}
|
||||
${counts.missing ? `<span class="missing">${counts.missing}</span>` : ''}
|
||||
</div>
|
||||
<span class="role-tg ${expanded ? 'open' : ''}" id="tg-${key}">▼</span>
|
||||
</div>
|
||||
<div class="role-body ${expanded ? 'open' : ''}" id="body-${key}">
|
||||
${visibleGroups}
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
map.innerHTML = html;
|
||||
renderStats(totalMatch);
|
||||
}
|
||||
|
||||
function renderStats(visibleCount) {
|
||||
let totalItems = 0, totalDone = 0, totalPartial = 0, totalMissing = 0;
|
||||
for (const role of Object.values(DATA.roles)) {
|
||||
const c = countItems(role);
|
||||
totalItems += c.total; totalDone += c.done; totalPartial += c.partial; totalMissing += c.missing;
|
||||
}
|
||||
const totalRoles = Object.keys(DATA.roles).length;
|
||||
const totalGroups = Object.values(DATA.roles).reduce((s, r) => s + r.groups.length, 0);
|
||||
|
||||
document.getElementById('stats').innerHTML = `
|
||||
<div class="p"><strong>${totalRoles}</strong> perfis</div>
|
||||
<div class="p"><strong>${totalGroups}</strong> grupos</div>
|
||||
<div class="p"><strong>${totalItems}</strong> features</div>`;
|
||||
|
||||
document.getElementById('heroTotals').innerHTML = `
|
||||
<span><b>${totalRoles}</b> perfis</span>
|
||||
<span>·</span>
|
||||
<span><b>${totalGroups}</b> grupos</span>
|
||||
<span>·</span>
|
||||
<span><b>${totalItems}</b> features</span>
|
||||
<span>·</span>
|
||||
<span style="color:var(--ok)"><b>${totalDone}</b> prontas</span>
|
||||
${totalPartial ? `<span>·</span><span style="color:var(--warn)"><b>${totalPartial}</b> parciais</span>` : ''}
|
||||
${totalMissing ? `<span>·</span><span style="color:var(--pend)"><b>${totalMissing}</b> faltando</span>` : ''}`;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s || '').replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]));
|
||||
}
|
||||
function escapeAttr(s) {
|
||||
return String(s || '').replace(/'/g, "\\'");
|
||||
}
|
||||
|
||||
// ======================================================================
|
||||
// INTERACTIONS
|
||||
// ======================================================================
|
||||
function toggleRole(key) {
|
||||
const body = document.getElementById('body-' + key);
|
||||
const tg = document.getElementById('tg-' + key);
|
||||
body.classList.toggle('open');
|
||||
tg.classList.toggle('open');
|
||||
}
|
||||
|
||||
function openPanel(roleKey, groupLabel, itemLabel) {
|
||||
const role = DATA.roles[roleKey];
|
||||
const group = role.groups.find(g => g.label === groupLabel);
|
||||
const item = group.items.find(i => i.label === itemLabel);
|
||||
|
||||
const statusLabel = STATUS_LABEL[item.status];
|
||||
const panel = document.getElementById('panel');
|
||||
const content = document.getElementById('panelContent');
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="panel-role" style="--rc:${role.color};color:${role.color};background:color-mix(in srgb, ${role.color} 15%, transparent)">${escapeHtml(role.label)}</div>
|
||||
<div class="panel-title">
|
||||
<i class="pi ${item.icon}" style="--rc:${role.color};background:color-mix(in srgb, ${role.color} 18%, transparent);color:${role.color}"></i>
|
||||
<span>${escapeHtml(item.label)}</span>
|
||||
</div>
|
||||
<div class="panel-group">${escapeHtml(group.label)}</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<div class="panel-label">Status</div>
|
||||
<div class="panel-status ${item.status}">
|
||||
<span class="status-dot" style="width:8px;height:8px;border-radius:50%;background:currentColor"></span>
|
||||
${statusLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<div class="panel-label">Rota</div>
|
||||
<div class="panel-route">${escapeHtml(item.route || '-')}</div>
|
||||
</div>
|
||||
|
||||
${item.notes ? `
|
||||
<div class="panel-section">
|
||||
<div class="panel-label">Notas</div>
|
||||
<div class="panel-value">${escapeHtml(item.notes)}</div>
|
||||
</div>` : ''}
|
||||
|
||||
${item.route ? `<a class="panel-btn" href="http://localhost:5173${item.route}" target="_blank" rel="noopener">
|
||||
<i class="pi pi-external-link"></i> Abrir no dev server
|
||||
</a>` : ''}
|
||||
`;
|
||||
panel.classList.add('open');
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
document.getElementById('panel').classList.remove('open');
|
||||
}
|
||||
|
||||
// ======================================================================
|
||||
// SEARCH
|
||||
// ======================================================================
|
||||
let searchTimer;
|
||||
document.getElementById('search').addEventListener('input', (e) => {
|
||||
clearTimeout(searchTimer);
|
||||
searchTimer = setTimeout(() => {
|
||||
currentQuery = e.target.value.trim();
|
||||
renderMap();
|
||||
}, 150);
|
||||
});
|
||||
|
||||
// Close panel on ESC
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closePanel();
|
||||
});
|
||||
|
||||
// ======================================================================
|
||||
// INIT
|
||||
// ======================================================================
|
||||
renderMap();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user