Documentos Pacientes, Template Documentos Pacientes Saas, Documentos prontuários, Documentos Externos, Visualização Externa, Permissão de Visualização, Render Otimização

2026-03-30 14:08:19 -03:00
parent 0658e2e9bf
commit d088a89fb7
112 changed files with 115867 additions and 5266 deletions
@@ -0,0 +1,523 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI
+|--------------------------------------------------------------------------
+| Criado e desenvolvido por Leonardo Nohama
+|
+| Tecnologia aplicada à escuta.
+| Estrutura para o cuidado.
+|
+| Arquivo: src/views/pages/saas/SaasDocumentTemplatesPage.vue
+| Data: 2026
+| Local: São Carlos/SP — Brasil
+|--------------------------------------------------------------------------
+| © 2026 — Todos os direitos reservados
+|--------------------------------------------------------------------------
+| Gestao de templates globais de documentos pelo SaaS admin.
+| Templates globais (is_global = true) ficam disponiveis para todos os tenants.
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { supabase } from '@/lib/supabase/client'
+import { useToast } from 'primevue/usetoast'
+import { useConfirm } from 'primevue/useconfirm'
+import { extractVariablesFromHtml, TEMPLATE_VARIABLES } from '@/services/DocumentTemplates.service'
+import JoditEmailEditor from '@/components/ui/JoditEmailEditor.vue'
+
+const toast = useToast()
+const confirm = useConfirm()
+
+// ── State ───────────────────────────────────────────────────
+
+const loading = ref(false)
+const rows = ref([])
+const q = ref('')
+
+const showDlg = ref(false)
+const saving = ref(false)
+const isEdit = ref(false)
+const activeTab = ref('editor')
+
+const TIPOS = [
+    { value: 'declaracao_comparecimento', label: 'Declaração de comparecimento' },
+    { value: 'atestado_psicologico', label: 'Atestado psicológico' },
+    { value: 'relatorio_acompanhamento', label: 'Relatório de acompanhamento' },
+    { value: 'recibo_pagamento', label: 'Recibo de pagamento' },
+    { value: 'termo_consentimento', label: 'Termo de consentimento (TCLE)' },
+    { value: 'encaminhamento', label: 'Encaminhamento' },
+    { value: 'contrato_servicos', label: 'Contrato de prestação de serviços' },
+    { value: 'tcle', label: 'TCLE' },
+    { value: 'autorizacao_menor', label: 'Autorização para menor' },
+    { value: 'laudo_psicologico', label: 'Laudo psicológico' },
+    { value: 'parecer_psicologico', label: 'Parecer psicológico' },
+    { value: 'termo_sigilo', label: 'Termo de sigilo' },
+    { value: 'declaracao_inicio_tratamento', label: 'Declaração de início de tratamento' },
+    { value: 'termo_alta', label: 'Termo de alta terapêutica' },
+    { value: 'tcle_online', label: 'Consentimento atendimento online' },
+    { value: 'outro', label: 'Outro' }
+]
+
+const form = ref(resetForm())
+
+function resetForm() {
+    return {
+        id: null,
+        nome_template: '',
+        tipo: 'outro',
+        descricao: '',
+        corpo_html: '',
+        cabecalho_html: '',
+        rodape_html: '',
+        variaveis: [],
+        logo_url: '',
+        ativo: true
+    }
+}
+
+// ── Filtro ───────────────────────────────────────────────────
+
+const filteredRows = computed(() => {
+    const term = String(q.value || '').trim().toLowerCase()
+    if (!term) return rows.value
+    return rows.value.filter(r =>
+        [r.nome_template, r.tipo, r.descricao].some(s =>
+            String(s || '').toLowerCase().includes(term)
+        )
+    )
+})
+
+// ── Fetch ───────────────────────────────────────────────────
+
+async function fetchAll() {
+    loading.value = true
+    try {
+        const { data, error } = await supabase
+            .from('document_templates')
+            .select('*')
+            .eq('is_global', true)
+            .order('nome_template', { ascending: true })
+
+        if (error) throw error
+        rows.value = data || []
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+    } finally {
+        loading.value = false
+    }
+}
+
+onMounted(fetchAll)
+
+// ── Dialog ──────────────────────────────────────────────────
+
+function openCreate() {
+    form.value = resetForm()
+    isEdit.value = false
+    activeTab.value = 'editor'
+    showDlg.value = true
+}
+
+function openEdit(row) {
+    form.value = {
+        id: row.id,
+        nome_template: row.nome_template || '',
+        tipo: row.tipo || 'outro',
+        descricao: row.descricao || '',
+        corpo_html: row.corpo_html || '',
+        cabecalho_html: row.cabecalho_html || '',
+        rodape_html: row.rodape_html || '',
+        variaveis: row.variaveis || [],
+        logo_url: row.logo_url || '',
+        ativo: row.ativo ?? true
+    }
+    isEdit.value = true
+    activeTab.value = 'editor'
+    showDlg.value = true
+}
+
+// ── Save ────────────────────────────────────────────────────
+
+async function save() {
+    const nome = String(form.value.nome_template || '').trim()
+    if (!nome) {
+        toast.add({ severity: 'warn', summary: 'Atenção', detail: 'Nome do template é obrigatório.' })
+        return
+    }
+
+    saving.value = true
+    try {
+        // Auto-extrair variaveis do HTML
+        const allHtml = (form.value.corpo_html || '') + (form.value.cabecalho_html || '') + (form.value.rodape_html || '')
+        const vars = extractVariablesFromHtml(allHtml)
+
+        const payload = {
+            nome_template: nome,
+            tipo: form.value.tipo || 'outro',
+            descricao: form.value.descricao || null,
+            corpo_html: form.value.corpo_html || '',
+            cabecalho_html: form.value.cabecalho_html || null,
+            rodape_html: form.value.rodape_html || null,
+            variaveis: vars,
+            logo_url: form.value.logo_url || null,
+            is_global: true,
+            ativo: form.value.ativo,
+            tenant_id: null,
+            owner_id: null
+        }
+
+        if (isEdit.value) {
+            const { error } = await supabase
+                .from('document_templates')
+                .update(payload)
+                .eq('id', form.value.id)
+
+            if (error) throw error
+            toast.add({ severity: 'success', summary: 'Salvo', detail: nome, life: 2000 })
+        } else {
+            const { error } = await supabase
+                .from('document_templates')
+                .insert(payload)
+
+            if (error) throw error
+            toast.add({ severity: 'success', summary: 'Criado', detail: nome, life: 2000 })
+        }
+
+        showDlg.value = false
+        fetchAll()
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+    } finally {
+        saving.value = false
+    }
+}
+
+// ── Toggle ativo ────────────────────────────────────────────
+
+async function toggleAtivo(row) {
+    try {
+        const { error } = await supabase
+            .from('document_templates')
+            .update({ ativo: !row.ativo })
+            .eq('id', row.id)
+
+        if (error) throw error
+        row.ativo = !row.ativo
+        toast.add({ severity: 'info', summary: row.ativo ? 'Ativado' : 'Desativado', detail: row.nome_template, life: 2000 })
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+    }
+}
+
+// ── Delete ──────────────────────────────────────────────────
+
+function onDelete(row) {
+    confirm.require({
+        message: `Excluir permanentemente "${row.nome_template}"? Essa ação não pode ser desfeita.`,
+        header: 'Excluir template global',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const { error } = await supabase
+                    .from('document_templates')
+                    .delete()
+                    .eq('id', row.id)
+
+                if (error) throw error
+                rows.value = rows.value.filter(r => r.id !== row.id)
+                toast.add({ severity: 'success', summary: 'Excluído', life: 2000 })
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+            }
+        }
+    })
+}
+
+// ── Helpers ─────────────────────────────────────────────────
+
+function tipoLabel(tipo) {
+    return TIPOS.find(t => t.value === tipo)?.label || tipo
+}
+
+// ── Preview com dados ficticios ─────────────────────────────
+
+const SAMPLE = {
+    paciente_nome: 'Maria Silva Santos',
+    paciente_cpf: '123.456.789-00',
+    paciente_data_nascimento: '15/03/1990',
+    data_sessao: '28/03/2026',
+    hora_inicio: '14:00',
+    hora_fim: '14:50',
+    terapeuta_nome: 'Dr. João Oliveira',
+    terapeuta_crp: '06/12345',
+    clinica_nome: 'Clínica Exemplo',
+    clinica_endereco: 'Av. São Carlos, 500, Centro, São Carlos/SP',
+    clinica_telefone: '(16) 3333-1111',
+    clinica_cnpj: '12.345.678/0001-00',
+    valor: 'R$ 200,00',
+    valor_extenso: 'duzentos reais',
+    forma_pagamento: 'PIX',
+    data_atual: new Date().toLocaleDateString('pt-BR'),
+    data_atual_extenso: '29 de março de 2026',
+    cidade_estado: 'São Carlos/SP'
+}
+
+function previewReplace(html) {
+    return String(html || '').replace(/\{\{(\w+)\}\}/g, (m, k) =>
+        SAMPLE[k] !== undefined
+            ? `<span style="background:#fef3c7;padding:1px 4px;border-radius:3px;">${SAMPLE[k]}</span>`
+            : `<span style="background:#fee2e2;padding:1px 4px;border-radius:3px;">${m}</span>`
+    )
+}
+
+// ── Variaveis agrupadas ─────────────────────────────────────
+
+const variablesGrouped = computed(() => {
+    const groups = {}
+    for (const v of TEMPLATE_VARIABLES) {
+        if (!groups[v.grupo]) groups[v.grupo] = []
+        groups[v.grupo].push(v)
+    }
+    return groups
+})
+
+const cursorField = ref('corpo_html')
+const editorCabecalho = ref(null)
+const editorCorpo = ref(null)
+const editorRodape = ref(null)
+
+function insertVariable(key) {
+    const tag = `{{${key}}}`
+    const editorMap = {
+        cabecalho_html: editorCabecalho,
+        corpo_html: editorCorpo,
+        rodape_html: editorRodape
+    }
+    const editorRef = editorMap[cursorField.value]
+    if (editorRef?.value?.insertHTML) {
+        editorRef.value.insertHTML(tag)
+    } else {
+        form.value[cursorField.value] = (form.value[cursorField.value] || '') + tag
+    }
+}
+</script>
+
+<template>
+    <div class="px-4 py-6 max-w-[1200px] mx-auto">
+
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
+            <div>
+                <h1 class="text-xl font-bold">Templates de Documentos</h1>
+                <p class="text-sm text-[var(--text-color-secondary)]">
+                    Templates globais disponíveis para todos os tenants (is_global = true)
+                </p>
+            </div>
+            <div class="flex items-center gap-2">
+                <Button label="Novo template" icon="pi pi-plus" size="small" @click="openCreate" />
+                <Button icon="pi pi-refresh" text rounded size="small" @click="fetchAll" :loading="loading" />
+            </div>
+        </div>
+
+        <!-- Busca -->
+        <div class="mb-4">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText v-model="q" placeholder="Buscar template..." class="!w-[300px]" size="small" />
+            </IconField>
+        </div>
+
+        <!-- Loading -->
+        <div v-if="loading" class="flex items-center justify-center py-16">
+            <i class="pi pi-spinner pi-spin text-2xl text-[var(--text-color-secondary)]" />
+        </div>
+
+        <!-- Table -->
+        <DataTable
+            v-else
+            :value="filteredRows"
+            stripedRows
+            responsiveLayout="scroll"
+            class="text-sm"
+            :rowClass="(r) => !r.ativo ? 'opacity-50' : ''"
+        >
+            <template #empty>
+                <div class="text-center py-8 text-[var(--text-color-secondary)]">Nenhum template global cadastrado.</div>
+            </template>
+
+            <Column field="nome_template" header="Nome" sortable style="min-width: 200px">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <i class="pi pi-file text-primary" />
+                        <span class="font-medium">{{ data.nome_template }}</span>
+                    </div>
+                </template>
+            </Column>
+
+            <Column field="tipo" header="Tipo" sortable style="min-width: 180px">
+                <template #body="{ data }">
+                    <Tag :value="tipoLabel(data.tipo)" severity="info" class="text-xs" />
+                </template>
+            </Column>
+
+            <Column field="variaveis" header="Variáveis" style="min-width: 100px">
+                <template #body="{ data }">
+                    <span class="text-xs text-[var(--text-color-secondary)]">{{ data.variaveis?.length || 0 }}</span>
+                </template>
+            </Column>
+
+            <Column field="ativo" header="Status" style="width: 100px" bodyClass="text-center">
+                <template #body="{ data }">
+                    <Tag
+                        :value="data.ativo ? 'Ativo' : 'Inativo'"
+                        :severity="data.ativo ? 'success' : 'danger'"
+                        class="text-xs cursor-pointer"
+                        @click="toggleAtivo(data)"
+                    />
+                </template>
+            </Column>
+
+            <Column header="Ações" style="width: 120px" bodyClass="text-center">
+                <template #body="{ data }">
+                    <div class="flex items-center justify-center gap-1">
+                        <Button icon="pi pi-pencil" text rounded size="small" @click="openEdit(data)" v-tooltip.top="'Editar'" />
+                        <Button icon="pi pi-trash" text rounded size="small" severity="danger" @click="onDelete(data)" v-tooltip.top="'Excluir'" />
+                    </div>
+                </template>
+            </Column>
+        </DataTable>
+
+        <!-- Dialog Create/Edit -->
+        <Dialog
+            v-model:visible="showDlg"
+            modal
+            maximizable
+            :draggable="false"
+            :closable="!saving"
+            :dismissableMask="!saving"
+            class="w-[65rem]"
+            :breakpoints="{ '1199px': '95vw', '768px': '98vw' }"
+            :pt="{
+                header:  { class: '!p-4 !rounded-t-xl border-b border-[var(--surface-border)]' },
+                content: { class: '!p-4' },
+                footer:  { class: '!p-3 !rounded-b-xl border-t border-[var(--surface-border)]' }
+            }"
+            pt:mask:class="backdrop-blur-xs"
+        >
+            <template #header>
+                <div class="flex items-center gap-3">
+                    <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10">
+                        <i class="pi pi-file-edit text-primary" />
+                    </span>
+                    <div>
+                        <div class="text-base font-semibold">{{ isEdit ? 'Editar' : 'Novo' }} template global</div>
+                        <div class="text-xs text-[var(--text-color-secondary)]">Visível para todos os tenants</div>
+                    </div>
+                </div>
+            </template>
+
+            <div class="flex flex-col gap-4">
+                <!-- Nome e tipo -->
+                <div class="grid grid-cols-1 sm:grid-cols-[1fr_200px] gap-3">
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Nome do template</label>
+                        <InputText v-model="form.nome_template" placeholder="Ex: Declaração de comparecimento" class="w-full" />
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Tipo</label>
+                        <Select v-model="form.tipo" :options="TIPOS" optionLabel="label" optionValue="value" class="w-full" />
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-[1fr_100px] gap-3">
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Descrição</label>
+                        <InputText v-model="form.descricao" placeholder="Breve descrição" class="w-full" />
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Status</label>
+                        <Select v-model="form.ativo" :options="[{ value: true, label: 'Ativo' }, { value: false, label: 'Inativo' }]" optionLabel="label" optionValue="value" class="w-full" />
+                    </div>
+                </div>
+
+                <!-- Tabs -->
+                <div class="flex items-center gap-1 border-b border-[var(--surface-border)]">
+                    <button
+                        class="px-3 py-2 text-sm font-medium border-b-2 transition-colors"
+                        :class="activeTab === 'editor' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-color-secondary)]'"
+                        @click="activeTab = 'editor'"
+                    >Editor</button>
+                    <button
+                        class="px-3 py-2 text-sm font-medium border-b-2 transition-colors"
+                        :class="activeTab === 'preview' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-color-secondary)]'"
+                        @click="activeTab = 'preview'"
+                    >Preview</button>
+                </div>
+
+                <!-- Editor -->
+                <div v-show="activeTab === 'editor'" class="flex flex-col lg:flex-row gap-4">
+                    <div class="flex-1 flex flex-col gap-3">
+                        <div class="flex flex-col gap-1" @focusin="cursorField = 'cabecalho_html'">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Cabeçalho</label>
+                            <JoditEmailEditor ref="editorCabecalho" v-model="form.cabecalho_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
+                        </div>
+                        <div class="flex flex-col gap-1" @focusin="cursorField = 'corpo_html'">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Corpo do documento</label>
+                            <JoditEmailEditor ref="editorCorpo" v-model="form.corpo_html" :minHeight="350" />
+                        </div>
+                        <div class="flex flex-col gap-1" @focusin="cursorField = 'rodape_html'">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Rodapé</label>
+                            <JoditEmailEditor ref="editorRodape" v-model="form.rodape_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
+                        </div>
+                        <div class="flex flex-col gap-1">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">URL do logo (opcional)</label>
+                            <InputText v-model="form.logo_url" placeholder="https://..." class="w-full" />
+                        </div>
+                    </div>
+
+                    <!-- Painel de variaveis -->
+                    <div class="w-full lg:w-[200px] flex-shrink-0">
+                        <div class="sticky top-0">
+                            <div class="text-xs font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-1">Variáveis</div>
+                            <div class="text-[0.6rem] text-[var(--text-color-secondary)] mb-2">Clique para inserir</div>
+                            <div class="flex flex-col gap-2.5 max-h-[500px] overflow-y-auto pr-1">
+                                <div v-for="(vars, grupo) in variablesGrouped" :key="grupo">
+                                    <div class="text-[0.6rem] font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-0.5">{{ grupo }}</div>
+                                    <div class="flex flex-col">
+                                        <button
+                                            v-for="v in vars"
+                                            :key="v.key"
+                                            class="text-left text-xs px-1.5 py-0.5 rounded hover:bg-primary/10 hover:text-primary transition-colors truncate"
+                                            @click="insertVariable(v.key)"
+                                        >
+                                            {{ v.label }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Preview -->
+                <div v-show="activeTab === 'preview'" class="border border-[var(--surface-border)] rounded-lg bg-white overflow-hidden">
+                    <div class="p-6 text-black" style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 12pt; line-height: 1.6;">
+                        <div v-if="form.cabecalho_html" class="text-center mb-4 pb-3 border-b border-gray-300" v-html="previewReplace(form.cabecalho_html)" />
+                        <div class="min-h-[300px]" v-html="previewReplace(form.corpo_html)" />
+                        <div v-if="form.rodape_html" class="mt-8 pt-3 border-t border-gray-300 text-center text-[10pt] text-gray-500" v-html="previewReplace(form.rodape_html)" />
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex items-center justify-end gap-2">
+                    <Button label="Cancelar" text @click="showDlg = false" :disabled="saving" />
+                    <Button :label="isEdit ? 'Salvar' : 'Criar'" icon="pi pi-check" :loading="saving" @click="save" />
+                </div>
+            </template>
+        </Dialog>
+
+        <ConfirmDialog />
+    </div>
+</template>