agenciapsilmno/development/saas-docs/01-busca-global-melissa.json

{
    "titulo": "Busca global e Acessados recentemente",
    "conteudo": "<h2>Busca global no Layout Melissa</h2>\n\n<p>A <strong>busca global</strong> é o atalho mais rápido para encontrar pacientes, sessões, documentos e cadastros recebidos sem precisar navegar pelos menus. Você acessa pelo <em>dock central</em> do Layout Melissa ou usando o atalho de teclado <kbd>Ctrl</kbd> + <kbd>K</kbd> (em qualquer página do Melissa).</p>\n\n<h3>1. Como abrir</h3>\n<p>Localize o campo de busca no dock central do Melissa. Ele aparece como um botão com o ícone de lupa e o placeholder <em>“Buscar paciente, agenda, atalho…”</em>, com o atalho <kbd>Ctrl K</kbd> indicado no canto direito.</p>\n\n<div style=\"border: 1px solid #cbd5e1; border-radius: 12px; padding: 0 14px; height: 44px; max-width: 480px; display: flex; align-items: center; gap: 10px; background: #1e2333; color: #cbd5e1; font-family: 'Segoe UI', sans-serif; margin: 12px 0;\">\n  <i class=\"pi pi-search\" style=\"font-size: 0.95rem;\"></i>\n  <span style=\"flex: 1; font-size: 0.9rem;\">Buscar paciente, agenda, atalho…</span>\n  <span style=\"font-size: 0.62rem; padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); letter-spacing: 0.05em;\">Ctrl K</span>\n</div>\n\n<p><strong>Três jeitos de abrir:</strong></p>\n<ul>\n  <li>Clicando no campo no dock central</li>\n  <li>Pressionando <kbd>Ctrl + K</kbd> (Windows/Linux) ou <kbd>⌘ + K</kbd> (Mac) em qualquer página</li>\n  <li>Pelo menu lateral, opção “Buscar” (quando disponível)</li>\n</ul>\n\n<h3>2. O Dialog Spotlight</h3>\n<p>Ao abrir, o sistema mostra um <strong>diálogo centralizado</strong> com o input grande no topo e os resultados em colunas abaixo. Isso é o padrão Spotlight (igual ao usado em macOS, Linear, GitHub, Slack).</p>\n\n<div style=\"background: var(--surface-card, #fff); border: 1px solid #e2e8f0; border-radius: 14px; max-width: 520px; box-shadow: 0 12px 32px rgba(0,0,0,0.15); overflow: hidden; margin: 12px 0; font-family: 'Segoe UI', sans-serif;\">\n  <div style=\"padding: 14px 18px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 12px;\">\n    <i class=\"pi pi-search\" style=\"color: #64748b;\"></i>\n    <span style=\"flex: 1; color: #94a3b8; font-size: 1.05rem;\">Buscar paciente, agenda, atalho…</span>\n    <span style=\"font-size: 0.65rem; padding: 2px 8px; border-radius: 4px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;\">Esc</span>\n  </div>\n  <div style=\"padding: 6px;\">\n    <div style=\"text-transform: uppercase; letter-spacing: 0.18em; color: #64748b; font-size: 0.62rem; font-weight: 700; padding: 8px 10px 4px; opacity: 0.75;\">Acessados recentemente</div>\n    <div style=\"display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;\">\n      <span style=\"width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: rgba(244,114,182,0.18); color: #ec4899; font-size: 0.9rem;\">\n        <i class=\"pi pi-user\"></i>\n      </span>\n      <div style=\"flex: 1;\">\n        <div style=\"font-size: 0.88rem; font-weight: 500;\">André Green</div>\n        <div style=\"font-size: 0.74rem; color: #64748b;\">andre@email.com</div>\n      </div>\n      <i class=\"pi pi-arrow-right\" style=\"color: #94a3b8; font-size: 0.75rem;\"></i>\n    </div>\n  </div>\n</div>\n\n<h3>3. Onde a busca procura</h3>\n<p>Digitando <strong>pelo menos 2 caracteres</strong>, o sistema dispara uma busca completa em 5 categorias:</p>\n<ul>\n  <li><strong style=\"color: #ec4899;\">Pacientes</strong> — por nome completo, e-mail, telefone ou CPF</li>\n  <li><strong style=\"color: #6366f1;\">Sessões</strong> — por título ou nome do paciente, em qualquer data</li>\n  <li><strong style=\"color: #0ea5e9;\">Documentos</strong> — por nome do arquivo ou descrição</li>\n  <li><strong style=\"color: #f97316;\">Cadastros recebidos</strong> — solicitações de novos pacientes pendentes</li>\n  <li><strong>Atalhos</strong> — ações rápidas como “Agenda”, “Financeiro”, etc.</li>\n</ul>\n\n<p>Cada categoria aparece com um <strong>ícone colorido distinto</strong> para facilitar a leitura visual. Os resultados são limitados aos 6 mais relevantes por categoria.</p>\n\n<h3>4. Como navegar nos resultados</h3>\n<p>Você pode usar o mouse ou o teclado:</p>\n<ul>\n  <li><kbd>↑</kbd> / <kbd>↓</kbd> — navegar entre os resultados</li>\n  <li><kbd>Enter</kbd> — abrir o item selecionado</li>\n  <li><kbd>Esc</kbd> — fechar o diálogo</li>\n  <li><kbd>Clique no backdrop</kbd> — fecha também</li>\n</ul>\n\n<h3>5. Acessados recentemente</h3>\n<p>Quando você abre a busca <strong>sem digitar nada</strong>, a primeira seção mostra <strong>“Acessados recentemente”</strong> — os últimos 5 pacientes que você visitou (em qualquer dispositivo deste navegador).</p>\n\n<div style=\"background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; margin: 12px 0; font-size: 0.88rem; color: #475569;\">\n  <strong>💡 Dica:</strong> Use Ctrl+K + Enter para reabrir o último paciente acessado em 2 segundos.\n</div>\n\n<p>Esses 5 pacientes ficam salvos no seu navegador (não no banco de dados), então:</p>\n<ul>\n  <li>São <strong>privados</strong> — outros usuários não veem</li>\n  <li>São <strong>por navegador</strong> — se trocar do Chrome pro Firefox, a lista recomeça</li>\n  <li><strong>Persistem</strong> após fechar o navegador (localStorage)</li>\n  <li>Auto-rotacionam: ao acessar o 6º paciente, o mais antigo sai</li>\n</ul>\n\n<h3>6. Clique nos resultados</h3>\n<p>Ao clicar:</p>\n<ul>\n  <li><strong>Paciente</strong> → abre o prontuário (<code>/melissa/paciente?id=…</code>)</li>\n  <li><strong>Sessão</strong> → abre o evento na agenda</li>\n  <li><strong>Documento</strong> → abre o prontuário do paciente na aba Documentos</li>\n  <li><strong>Cadastro recebido</strong> → vai pra lista de Cadastros recebidos</li>\n  <li><strong>Atalho</strong> → navega pra seção (Agenda, Financeiro, etc.)</li>\n</ul>\n\n<h3>7. Tema claro × escuro</h3>\n<p>O Dialog adapta automaticamente as cores conforme o tema escolhido em <strong>Meu Perfil → Preferências</strong>. Texto, fundos e bordas seguem as configurações do sistema. Apenas os ícones por categoria (paciente rosa, sessão índigo, documento azul, cadastro laranja) mantêm a mesma cor para preservar a identificação visual rápida.</p>\n\n<h3>⚠️ Notas pro desenvolvedor</h3>\n<p>Atualmente o componente <code>MelissaBusca.vue</code> <strong>não tem atributos <code>id</code></strong> em seus elementos. Para o sistema de highlight da ajuda funcionar (links <code>data-highlight</code>), sugere-se adicionar:</p>\n<ul>\n  <li><code>id=\"melissa-busca-trigger\"</code> no botão de trigger no dock</li>\n  <li><code>id=\"melissa-busca-dialog\"</code> no Dialog</li>\n  <li><code>id=\"melissa-busca-input\"</code> no input dentro do Dialog</li>\n  <li><code>id=\"melissa-busca-recent\"</code> no grupo de Acessados recentemente</li>\n</ul>",
    "categoria": "Navegação",
    "exibir_no_faq": true,
    "tipo_acesso": "usuario",
    "pagina_path": "/melissa",
    "ordem": 1,
    "ativo": true,
    "medias": [
        { "tipo": "imagem", "url": "" }
    ],
    "_faq_itens": [
        {
            "pergunta": "Como abrir a busca rapidamente?",
            "resposta": "Use o atalho <kbd>Ctrl + K</kbd> (Windows/Linux) ou <kbd>⌘ + K</kbd> (Mac) em qualquer página do Melissa. Você também pode clicar diretamente no campo de busca no dock central.",
            "ordem": 0,
            "ativo": true
        },
        {
            "pergunta": "Posso buscar paciente por telefone ou CPF?",
            "resposta": "Sim. A busca de pacientes encontra pelo <strong>nome completo, e-mail, telefone ou CPF</strong>. Digite pelo menos 2 caracteres e aguarde os resultados.",
            "ordem": 1,
            "ativo": true
        },
        {
            "pergunta": "O que aparece em \"Acessados recentemente\"?",
            "resposta": "Os últimos 5 pacientes que você abriu pelo prontuário, em ordem do mais recente pro mais antigo. A lista aparece quando você abre a busca <strong>sem digitar nada</strong>.",
            "ordem": 2,
            "ativo": true
        },
        {
            "pergunta": "Outros usuários veem meus \"Acessados recentemente\"?",
            "resposta": "Não. A lista é <strong>privada e local</strong> — fica salva apenas no seu navegador atual (localStorage). Se você logar em outro navegador ou computador, a lista começa vazia naquele dispositivo.",
            "ordem": 3,
            "ativo": true
        },
        {
            "pergunta": "Quantos caracteres preciso digitar pra começar a buscar?",
            "resposta": "<strong>Pelo menos 2</strong>. Buscas de 1 caractere são muito amplas e não disparam pesquisa. A partir de 2 caracteres, o sistema aguarda 200ms (tempo de digitação) antes de consultar o banco — assim você não dispara dezenas de buscas digitando rápido.",
            "ordem": 4,
            "ativo": true
        },
        {
            "pergunta": "Por que minha busca não retorna nada?",
            "resposta": "Verifique: (1) digitou pelo menos 2 caracteres; (2) o termo está sem erros graves de digitação (a busca tolera pequenas variações via similarity); (3) o paciente/sessão realmente existe no seu cadastro. Se persistir, faça uma busca mais ampla — ex: apenas o primeiro nome.",
            "ordem": 5,
            "ativo": true
        },
        {
            "pergunta": "O que cada cor de ícone significa?",
            "resposta": "Cada categoria tem uma cor própria: <strong style=\"color: #ec4899;\">Rosa</strong> = Paciente, <strong style=\"color: #6366f1;\">Índigo</strong> = Sessão da agenda, <strong style=\"color: #0ea5e9;\">Azul</strong> = Documento, <strong style=\"color: #f97316;\">Laranja</strong> = Cadastro recebido pendente. Atalhos vêm em cinza neutro.",
            "ordem": 6,
            "ativo": true
        },
        {
            "pergunta": "Como navegar pelos resultados sem usar o mouse?",
            "resposta": "Use as setas do teclado <kbd>↑</kbd> e <kbd>↓</kbd> para navegar entre os itens e <kbd>Enter</kbd> para abrir o selecionado. Pra fechar sem selecionar, use <kbd>Esc</kbd>.",
            "ordem": 7,
            "ativo": true
        },
        {
            "pergunta": "Posso buscar documentos pelo nome do paciente?",
            "resposta": "Sim. A busca de documentos cruza pelo nome do arquivo, descrição e <strong>nome do paciente vinculado</strong>. Ao clicar num resultado de documento, você é levado direto pra aba Documentos do prontuário daquele paciente.",
            "ordem": 8,
            "ativo": true
        },
        {
            "pergunta": "Como limpar a lista de \"Acessados recentemente\"?",
            "resposta": "Hoje não há um botão na interface — a lista é gerenciada automaticamente (limite de 5, mais antigo cai quando você acessa um novo). Pra limpar manualmente, você pode apagar os dados do site no seu navegador (Configurações → Privacidade → Limpar dados de navegação → escopo \"localStorage\").",
            "ordem": 9,
            "ativo": true
        },
        {
            "pergunta": "A busca encontra sessões antigas ou só as de hoje?",
            "resposta": "Encontra sessões de <strong>qualquer data</strong> — passadas e futuras. O grupo \"Agenda de hoje\" mostra apenas as do dia atual (preview rápido); o grupo \"Sessões\" inclui todas as outras encontradas no banco. Cada item mostra a data e horário da sessão.",
            "ordem": 10,
            "ativo": true
        },
        {
            "pergunta": "Os atalhos (Agenda, Financeiro, etc.) sempre aparecem?",
            "resposta": "Sim. Quando o campo está vazio, mostramos 4 atalhos padrão. Conforme você digita, os atalhos que combinam com sua busca permanecem visíveis (junto com os resultados do banco).",
            "ordem": 11,
            "ativo": true
        }
    ]
}