Leonardo
7c20b518d4
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>
742 lines
32 KiB
HTML
742 lines
32 KiB
HTML
<!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>
|