Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carousel, agenda arquivados, agenda cor, agenda arquivados, grupos pacientes, pacientes arquivados - desativados, sessoes verificadas, ajuste notificações, Prontuario, Agenda Animation, Menu Profile, bagdes Profile, Offline

Browse Source
This commit is contained in:
Leonardo
2026-03-18 09:26:09 -03:00
parent 66f67cd40f
commit d6d2fe29d1
55 changed files with 3655 additions and 1512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/pages/NotFound.vue
View File

@@ -55,7 +55,7 @@ function goDashboard () {
</p>
</div>
<!-- “selo” minimalista -->
<!-- "selo" minimalista -->
<div
class="shrink-0 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4"
>
@@ -95,7 +95,7 @@ function goDashboard () {
/>
</div>
<!-- rodapé “noir” discreto -->
<!-- rodapé "noir" discreto -->
<div class="mt-6 text-xs text-[var(--text-color-secondary)] opacity-80">
Se isso estiver acontecendo com frequência, pode ser um problema de rota ou permissão.
</div>

266
src/views/pages/clinic/clinic/ClinicFeaturesPage.vue
View File

@@ -24,7 +24,7 @@ const applyingPreset = ref(false)
// evita cliques enquanto o contexto inicial ainda tá montando
const booting = ref(true)
// guarda features que o plano bloqueou (pra não ficar “clicando e errando”)
// guarda features que o plano bloqueou (pra não ficar "clicando e errando")
const planDenied = ref(new Set())
const tenantId = computed(() =>
@@ -110,7 +110,7 @@ function requestMenuRefresh () {
async function afterFeaturesChanged () {
if (!tenantId.value) return
// ✅ refresh suave (evita “pisca vazio”)
// ✅ refresh suave (evita "pisca vazio")
await tf.fetchForTenant(tenantId.value, { force: false })
// ✅ nunca navegar/replace aqui
@@ -292,7 +292,7 @@ watch(
clearPlanDenied()
try {
// ✅ não force no mount para evitar “pisca”
// ✅ não force no mount para evitar "pisca"
await tf.fetchForTenant(id, { force: false })
// ✅ reset só quando estiver estável (debounced)
@@ -327,246 +327,246 @@ watch(
<Toast />
<!-- Sentinel -->
<div class=”h-px” />
<div class="h-px" />
<!-- Hero sticky -->
<div
class=”sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”
:style=”{ top: 'var(--layout-sticky-top, 56px)' }”
class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5"
:style="{ top: 'var(--layout-sticky-top, 56px)' }"
>
<div class=”absolute inset-0 pointer-events-none overflow-hidden” aria-hidden=”true”>
<div class=”absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-indigo-400/10” />
<div class=”absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-emerald-400/10” />
<div class=”absolute rounded-full blur-[70px] w-72 h-72 -bottom-20 right-24 bg-fuchsia-400/10” />
<div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
<div class="absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-indigo-400/10" />
<div class="absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-emerald-400/10" />
<div class="absolute rounded-full blur-[70px] w-72 h-72 -bottom-20 right-24 bg-fuchsia-400/10" />
</div>
<div class=”relative z-10 flex flex-col gap-2”>
<div class=”flex items-center justify-between gap-3 flex-wrap”>
<div class=”min-w-0”>
<div class=”text-[1rem] font-bold tracking-tight text-[var(--text-color)]”>Tipos de Clínica</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-0.5”>
<div class="relative z-10 flex flex-col gap-2">
<div class="flex items-center justify-between gap-3 flex-wrap">
<div class="min-w-0">
<div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Tipos de Clínica</div>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-0.5">
Ative/desative recursos por clínica. Controla menu, rotas e acesso no banco (RLS).
</div>
</div>
<div class=”shrink-0 flex items-center gap-2”>
<div class="shrink-0 flex items-center gap-2">
<Button
label=”Recarregar”
icon=”pi pi-refresh”
severity=”secondary”
label="Recarregar"
icon="pi pi-refresh"
severity="secondary"
outlined
:loading=”loading”
:disabled=”applyingPreset || !!savingKey”
@click=”reload”
:loading="loading"
:disabled="applyingPreset || !!savingKey"
@click="reload"
/>
</div>
</div>
<div class=”flex flex-wrap items-center gap-2”>
<span class=”inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)]”>
<i class=”pi pi-building” />
Tenant: <b class=”font-mono”>{{ tenantId || '—' }}</b>
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)]">
<i class="pi pi-building" />
Tenant: <b class="font-mono">{{ tenantId || '<EFBFBD>"' }}</b>
</span>
<span class=”inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)]”>
<i class=”pi pi-user” />
Role: <b>{{ role || '—' }}</b>
<span class="inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)]">
<i class="pi pi-user" />
Role: <b>{{ role || '<EFBFBD>"' }}</b>
</span>
<span
v-if=”!tenantReady”
class=”inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)] opacity-70”
v-if="!tenantReady"
class="inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)] opacity-70"
>
<i class=”pi pi-spin pi-spinner” />
<i class="pi pi-spin pi-spinner" />
Carregando contexto…
</span>
<span
v-else-if=”loading”
class=”inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)] opacity-70”
v-else-if="loading"
class="inline-flex items-center gap-2 rounded-full border border-[var(--surface-border)] px-3 py-1 text-[1rem] text-[var(--text-color-secondary)] opacity-70"
>
<i class=”pi pi-spin pi-spinner” />
<i class="pi pi-spin pi-spinner" />
Atualizando módulos…
</span>
</div>
</div>
</div>
<div class=”px-3 md:px-4 pb-8 flex flex-col gap-4”>
<div class="px-3 md:px-4 pb-8 flex flex-col gap-4">
<!-- Banner: somente leitura -->
<div
v-if=”!isOwner && tenantReady”
class=”flex items-center gap-3 rounded-md border border-amber-400/40 bg-amber-400/10 px-5 py-4 text-[1rem]”
v-if="!isOwner && tenantReady"
class="flex items-center gap-3 rounded-md border border-amber-400/40 bg-amber-400/10 px-5 py-4 text-[1rem]"
>
<i class=”pi pi-lock text-amber-400 shrink-0” />
<span class=”text-[1rem] text-[var(--text-color)] opacity-90”>
<i class="pi pi-lock text-amber-400 shrink-0" />
<span class="text-[1rem] text-[var(--text-color)] opacity-90">
Você está visualizando as configurações da clínica em <b>modo somente leitura</b>.
Apenas o administrador pode ativar ou desativar módulos.
</span>
</div>
<!-- Presets -->
<div class=”grid grid-cols-1 md:grid-cols-3 gap-3”>
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”>
<div class=”flex items-start justify-between gap-3”>
<div class=”min-w-0”>
<div class=”text-[1rem] font-semibold text-[var(--text-color)]”>Preset: Coworking</div>
<div class=”mt-1 text-[1rem] text-[var(--text-color-secondary)]”>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<div class="text-[1rem] font-semibold text-[var(--text-color)]">Preset: Coworking</div>
<div class="mt-1 text-[1rem] text-[var(--text-color-secondary)]">
Para aluguel de salas: sem pacientes, com salas.
</div>
</div>
<Button
size=”small”
label=”Aplicar”
severity=”secondary”
size="small"
label="Aplicar"
severity="secondary"
outlined
:loading=”applyingPreset”
:disabled=”!isOwner || !tenantReady || loading || !!savingKey”
@click=”applyPreset('coworking')”
:loading="applyingPreset"
:disabled="!isOwner || !tenantReady || loading || !!savingKey"
@click="applyPreset('coworking')"
/>
</div>
</div>
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”>
<div class=”flex items-start justify-between gap-3”>
<div class=”min-w-0”>
<div class=”text-[1rem] font-semibold text-[var(--text-color)]”>Preset: Clínica com recepção</div>
<div class=”mt-1 text-[1rem] text-[var(--text-color-secondary)]”>
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<div class="text-[1rem] font-semibold text-[var(--text-color)]">Preset: Clínica com recepção</div>
<div class="mt-1 text-[1rem] text-[var(--text-color-secondary)]">
Para secretária gerenciar agenda (pacientes opcional).
</div>
</div>
<Button
size=”small”
label=”Aplicar”
severity=”secondary”
size="small"
label="Aplicar"
severity="secondary"
outlined
:loading=”applyingPreset”
:disabled=”!isOwner || !tenantReady || loading || !!savingKey”
@click=”applyPreset('reception')”
:loading="applyingPreset"
:disabled="!isOwner || !tenantReady || loading || !!savingKey"
@click="applyPreset('reception')"
/>
</div>
</div>
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”>
<div class=”flex items-start justify-between gap-3”>
<div class=”min-w-0”>
<div class=”text-[1rem] font-semibold text-[var(--text-color)]”>Preset: Clínica completa</div>
<div class=”mt-1 text-[1rem] text-[var(--text-color-secondary)]”>
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<div class="text-[1rem] font-semibold text-[var(--text-color)]">Preset: Clínica completa</div>
<div class="mt-1 text-[1rem] text-[var(--text-color-secondary)]">
Pacientes + recepção + salas (se quiser).
</div>
</div>
<Button
size=”small”
label=”Aplicar”
severity=”secondary”
size="small"
label="Aplicar"
severity="secondary"
outlined
:loading=”applyingPreset”
:disabled=”!isOwner || !tenantReady || loading || !!savingKey”
@click=”applyPreset('full')”
:loading="applyingPreset"
:disabled="!isOwner || !tenantReady || loading || !!savingKey"
@click="applyPreset('full')"
/>
</div>
</div>
</div>
<!-- Modules -->
<div class=”grid grid-cols-1 lg:grid-cols-2 gap-3”>
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
<ModuleRow
title=”Pacientes”
desc=”Habilita gestão de pacientes por clínica. Todo paciente tem um responsável (therapist).”
icon=”pi pi-users”
:enabled=”isOn('patients')”
:loading=”savingKey === 'patients'”
:disabled=”isLocked('patients')”
@toggle=”toggle('patients')”
title="Pacientes"
desc="Habilita gestão de pacientes por clínica. Todo paciente tem um responsável (therapist)."
icon="pi pi-users"
:enabled="isOn('patients')"
:loading="savingKey === 'patients'"
:disabled="isLocked('patients')"
@toggle="toggle('patients')"
/>
<div
v-if=”planDenied.has('patients')”
class=”mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90”
v-if="planDenied.has('patients')"
class="mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90"
>
<i class=”pi pi-lock mr-2” />
<i class="pi pi-lock mr-2" />
Este módulo foi bloqueado pelo plano atual do tenant.
</div>
<Divider class=”my-4” />
<div class=”text-[1rem] text-[var(--text-color-secondary)] leading-relaxed”>
<Divider class="my-4" />
<div class="text-[1rem] text-[var(--text-color-secondary)] leading-relaxed">
Quando desligado:
<ul class=”mt-2 list-disc pl-5 space-y-1”>
<li>Menu “Pacientes” some.</li>
<li>Rotas com <span class=”font-mono”>meta.tenantFeature = 'patients'</span> redirecionam pra cá.</li>
<ul class="mt-2 list-disc pl-5 space-y-1">
<li>Menu "Pacientes" some.</li>
<li>Rotas com <span class="font-mono">meta.tenantFeature = 'patients'</span> redirecionam pra cá.</li>
<li>RLS bloqueia acesso direto no banco.</li>
</ul>
</div>
</div>
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”>
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
<ModuleRow
title=”Recepção / Secretária”
desc=”Permite um papel de secretária gerenciar a agenda dos profissionais (sem precisar ver tudo do paciente).”
icon=”pi pi-briefcase”
:enabled=”isOn('shared_reception')”
:loading=”savingKey === 'shared_reception'”
:disabled=”isLocked('shared_reception')”
@toggle=”toggle('shared_reception')”
title="Recepção / Secretária"
desc="Permite um papel de secretária gerenciar a agenda dos profissionais (sem precisar ver tudo do paciente)."
icon="pi pi-briefcase"
:enabled="isOn('shared_reception')"
:loading="savingKey === 'shared_reception'"
:disabled="isLocked('shared_reception')"
@toggle="toggle('shared_reception')"
/>
<div
v-if=”planDenied.has('shared_reception')”
class=”mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90”
v-if="planDenied.has('shared_reception')"
class="mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90"
>
<i class=”pi pi-lock mr-2” />
<i class="pi pi-lock mr-2" />
Este módulo foi bloqueado pelo plano atual do tenant.
</div>
<Divider class=”my-4” />
<div class=”text-[1rem] text-[var(--text-color-secondary)] leading-relaxed”>
Observação: este módulo é “produto” (UX + permissões). A base aqui é só o toggle.
<Divider class="my-4" />
<div class="text-[1rem] text-[var(--text-color-secondary)] leading-relaxed">
Observação: este módulo é "produto" (UX + permissões). A base aqui é só o toggle.
Depois a gente cria:
<ul class=”mt-2 list-disc pl-5 space-y-1”>
<li>role <span class=”font-mono”>secretary</span> em <span class=”font-mono”>tenant_members</span></li>
<ul class="mt-2 list-disc pl-5 space-y-1">
<li>role <span class="font-mono">secretary</span> em <span class="font-mono">tenant_members</span></li>
<li>policies e telas para a secretária</li>
<li>nível de visibilidade do paciente na agenda</li>
</ul>
</div>
</div>
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”>
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
<ModuleRow
title=”Salas / Coworking”
desc=”Habilita cadastro e reserva de salas/recursos no agendamento.”
icon=”pi pi-building”
:enabled=”isOn('rooms')”
:loading=”savingKey === 'rooms'”
:disabled=”isLocked('rooms')”
@toggle=”toggle('rooms')”
title="Salas / Coworking"
desc="Habilita cadastro e reserva de salas/recursos no agendamento."
icon="pi pi-building"
:enabled="isOn('rooms')"
:loading="savingKey === 'rooms'"
:disabled="isLocked('rooms')"
@toggle="toggle('rooms')"
/>
<div
v-if=”planDenied.has('rooms')”
class=”mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90”
v-if="planDenied.has('rooms')"
class="mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90"
>
<i class=”pi pi-lock mr-2” />
<i class="pi pi-lock mr-2" />
Este módulo foi bloqueado pelo plano atual do tenant.
</div>
<Divider class=”my-4” />
<div class=”text-[1rem] text-[var(--text-color-secondary)] leading-relaxed”>
<Divider class="my-4" />
<div class="text-[1rem] text-[var(--text-color-secondary)] leading-relaxed">
Isso prepara o terreno para a clínica operar como locação de sala, com agenda vinculando sala + profissional.
</div>
</div>
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”>
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
<ModuleRow
title=”Link externo de cadastro”
desc=”Libera fluxo público de intake/cadastro externo para a clínica.”
icon=”pi pi-link”
:enabled=”isOn('intake_public')”
:loading=”savingKey === 'intake_public'”
:disabled=”isLocked('intake_public')”
@toggle=”toggle('intake_public')”
title="Link externo de cadastro"
desc="Libera fluxo público de intake/cadastro externo para a clínica."
icon="pi pi-link"
:enabled="isOn('intake_public')"
:loading="savingKey === 'intake_public'"
:disabled="isLocked('intake_public')"
@toggle="toggle('intake_public')"
/>
<div
v-if=”planDenied.has('intake_public')”
class=”mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90”
v-if="planDenied.has('intake_public')"
class="mt-3 text-[1rem] rounded-md border border-[var(--surface-border)] p-3 opacity-90"
>
<i class=”pi pi-lock mr-2” />
<i class="pi pi-lock mr-2" />
Este módulo foi bloqueado pelo plano atual do tenant.
</div>
<Divider class=”my-4” />
<div class=”text-[1rem] text-[var(--text-color-secondary)] leading-relaxed”>
<Divider class="my-4" />
<div class="text-[1rem] text-[var(--text-color-secondary)] leading-relaxed">
Você já tem páginas de link externo. Isso vira o controle fino: a clínica decide se usa ou não.
</div>
</div>

4
src/views/pages/public/AcceptInvitePage.vue
View File

@@ -183,7 +183,7 @@ function friendlyError (err) {
function safeRpcError (rpcError) {
const raw = (rpcError?.message || '').toString().trim()
// Por padrão: mensagem amigável. Se quiser ver a “real”, coloque em debugDetails.
// Por padrão: mensagem amigável. Se quiser ver a "real", coloque em debugDetails.
const friendly = friendlyError(rpcError)
return { friendly, raw }
}
@@ -241,7 +241,7 @@ async function acceptInvite (token) {
const { friendly, raw } = safeRpcError(error)
state.error = friendly
// Se você quiser ver a mensagem “crua” para debug, descomente a linha abaixo:
// Se você quiser ver a mensagem "crua" para debug, descomente a linha abaixo:
// state.debugDetails = raw
// Opcional: toast discreto

4
src/views/pages/public/CadastroPacienteExterno.vue
View File

@@ -2,7 +2,7 @@
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-slate-100">
<Toast />
<!-- “Backdrop” conceitual -->
<!-- "Backdrop" conceitual -->
<div class="pointer-events-none fixed inset-0 opacity-30">
<div class="absolute -top-24 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-emerald-400 blur-3xl" />
<div class="absolute top-40 left-16 h-56 w-56 rounded-full bg-indigo-400 blur-3xl" />
@@ -1233,7 +1233,7 @@ function validate () {
// Progress (conceitual e útil)
// ------------------------------------------------------
const progressPct = computed(() => {
// contagem simples e honesta: dá sensação de avanço sem “gamificar demais”
// contagem simples e honesta: dá sensação de avanço sem "gamificar demais"
const checks = [
!!cleanStr(form.nome_completo),
!!digitsOnly(form.telefone),

6
src/views/pages/public/Landingpage-v1.vue
View File

@@ -64,7 +64,7 @@
<p class="mt-4 text-base md:text-lg text-[var(--text-color-secondary)] max-w-2xl leading-relaxed">
Centralize a rotina clínica em um lugar só: pacientes, sessões, lembretes e indicadores.
O objetivo não é “burocratizar”: é deixar o consultório respirável.
O objetivo não é "burocratizar": é deixar o consultório respirável.
</p>
<div class="mt-6 flex flex-col sm:flex-row gap-2">
@@ -101,7 +101,7 @@
</div>
<div class="mt-6 text-xs text-[var(--text-color-secondary)]">
“A diferença entre ter uma agenda e ter um sistema mora nos detalhes.”
"A diferença entre ter uma agenda e ter um sistema mora nos detalhes."
</div>
</div>
@@ -322,7 +322,7 @@
<div>
<div class="font-semibold">3) Acompanhar</div>
<div class="text-sm text-[var(--text-color-secondary)] mt-1 leading-relaxed">
Financeiro e indicadores acompanham o movimento. Menos “cadê?”, mais previsibilidade.
Financeiro e indicadores acompanham o movimento. Menos "cadê?", mais previsibilidade.
</div>
<div class="mt-2">
<Tag severity="secondary" value="Recebimentos" />

2
src/views/pages/public/Signup.vue
View File

@@ -21,7 +21,7 @@ const email = ref('')
const password = ref('')
const loading = ref(false)
// validação simples (sem “viajar”)
// validação simples (sem "viajar")
const emailOk = computed(() => /\S+@\S+\.\S+/.test(String(email.value || '').trim()))
const passwordOk = computed(() => String(password.value || '').length >= 6)
const canSubmit = computed(() => !loading.value && emailOk.value && passwordOk.value)

2
src/views/pages/saas/SaasPlanFeaturesMatrixPage.vue
View File

@@ -156,7 +156,7 @@ function isEnabled (planId, featureId) {
/**
* ✅ Toggle agora NÃO salva no banco.
* Apenas altera o estado local (links) e marca como “pendente”.
* Apenas altera o estado local (links) e marca como "pendente".
*/
function toggleLocal (planId, featureId, nextValue) {
if (loading.value || saving.value) return

270
src/views/pages/saas/SaasPlansPage.vue
View File

@@ -433,91 +433,91 @@ onBeforeUnmount(() => {
<ConfirmDialog />
<!-- Sentinel -->
<div ref=”heroSentinelRef” class=”h-px” />
<div ref="heroSentinelRef" class="h-px" />
<!-- Hero sticky -->
<div
ref=”heroEl”
class=”sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”
:style=”{ top: 'var(--layout-sticky-top, 56px)' }”
ref="heroEl"
class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5"
:style="{ top: 'var(--layout-sticky-top, 56px)' }"
>
<div class=”absolute inset-0 pointer-events-none overflow-hidden” aria-hidden=”true”>
<div class=”absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-indigo-400/10” />
<div class=”absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-emerald-400/10” />
<div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
<div class="absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-indigo-400/10" />
<div class="absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-emerald-400/10" />
</div>
<div class=”relative z-10 flex items-center justify-between gap-3 flex-wrap”>
<div class=”min-w-0”>
<div class=”text-[1rem] font-bold tracking-tight text-[var(--text-color)]”>Planos e preços</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-0.5”>Catálogo de planos do SaaS.</div>
<div class="relative z-10 flex items-center justify-between gap-3 flex-wrap">
<div class="min-w-0">
<div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Planos e preços</div>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-0.5">Catálogo de planos do SaaS.</div>
</div>
<!-- Ações desktop (≥ 1200px) -->
<div class=”hidden xl:flex items-center gap-2 flex-wrap”>
<div class="hidden xl:flex items-center gap-2 flex-wrap">
<SelectButton
v-model=”targetFilter”
:options=”targetFilterOptions”
optionLabel=”label”
optionValue=”value”
size=”small”
v-model="targetFilter"
:options="targetFilterOptions"
optionLabel="label"
optionValue="value"
size="small"
/>
<Button label=”Atualizar” icon=”pi pi-refresh” severity=”secondary” outlined size=”small” :loading=”loading” :disabled=”saving” @click=”fetchAll” />
<Button label=”Adicionar plano” icon=”pi pi-plus” size=”small” :disabled=”saving” @click=”openCreate” />
<Button label="Atualizar" icon="pi pi-refresh" severity="secondary" outlined size="small" :loading="loading" :disabled="saving" @click="fetchAll" />
<Button label="Adicionar plano" icon="pi pi-plus" size="small" :disabled="saving" @click="openCreate" />
</div>
<!-- Ações mobile (< 1200px) -->
<div class=”flex xl:hidden”>
<div class="flex xl:hidden">
<Button
label=”Ações”
icon=”pi pi-ellipsis-v”
severity=”warn”
size=”small”
aria-haspopup=”true”
aria-controls=”plans_hero_menu”
@click=”(e) => heroMenuRef.toggle(e)”
label="Ações"
icon="pi pi-ellipsis-v"
severity="warn"
size="small"
aria-haspopup="true"
aria-controls="plans_hero_menu"
@click="(e) => heroMenuRef.toggle(e)"
/>
<Menu ref=”heroMenuRef” id=”plans_hero_menu” :model=”heroMenuItems” :popup=”true” />
<Menu ref="heroMenuRef" id="plans_hero_menu" :model="heroMenuItems" :popup="true" />
</div>
</div>
</div>
<!-- content -->
<div class=”px-3 md:px-4 pb-8 flex flex-col gap-4”>
<DataTable :value=”filteredRows” dataKey=”id” :loading=”loading” stripedRows responsiveLayout=”scroll”>
<Column field=”name” header=”Nome” sortable style=”min-width: 14rem” />
<Column field=”key” header=”Key” sortable />
<div class="px-3 md:px-4 pb-8 flex flex-col gap-4">
<DataTable :value="filteredRows" dataKey="id" :loading="loading" stripedRows responsiveLayout="scroll">
<Column field="name" header="Nome" sortable style="min-width: 14rem" />
<Column field="key" header="Key" sortable />
<Column field=”target” header=”Público” sortable style=”width: 10rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatTargetLabel(data.target) }}</span>
<Column field="target" header="Público" sortable style="width: 10rem">
<template #body="{ data }">
<span class="font-medium">{{ formatTargetLabel(data.target) }}</span>
</template>
</Column>
<Column header=”Mensal” sortable style=”width: 12rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatBRLFromCents(data.monthly_cents) }}</span>
<Column header="Mensal" sortable style="width: 12rem">
<template #body="{ data }">
<span class="font-medium">{{ formatBRLFromCents(data.monthly_cents) }}</span>
</template>
</Column>
<Column header=”Anual” sortable style=”width: 12rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatBRLFromCents(data.yearly_cents) }}</span>
<Column header="Anual" sortable style="width: 12rem">
<template #body="{ data }">
<span class="font-medium">{{ formatBRLFromCents(data.yearly_cents) }}</span>
</template>
</Column>
<Column v-if=”hasCreatedAt” field=”created_at” header=”Criado em” sortable />
<Column v-if="hasCreatedAt" field="created_at" header="Criado em" sortable />
<Column header=”Ações” style=”width: 12rem”>
<template #body=”{ data }”>
<div class=”flex gap-2”>
<Button icon=”pi pi-pencil” severity=”secondary” outlined @click=”openEdit(data)” />
<Column header="Ações" style="width: 12rem">
<template #body="{ data }">
<div class="flex gap-2">
<Button icon="pi pi-pencil" severity="secondary" outlined @click="openEdit(data)" />
<Button
icon=”pi pi-trash”
severity=”danger”
icon="pi pi-trash"
severity="danger"
outlined
:disabled=”isDeleteLockedRow(data)”
:title=”isDeleteLockedRow(data) ? 'Plano padrão do sistema não pode ser removido.' : 'Excluir plano'”
@click=”askDelete(data)”
:disabled="isDeleteLockedRow(data)"
:title="isDeleteLockedRow(data) ? 'Plano padrão do sistema não pode ser removido.' : 'Excluir plano'"
@click="askDelete(data)"
/>
</div>
</template>
@@ -526,137 +526,137 @@ onBeforeUnmount(() => {
</div>
<Dialog
v-model:visible=”showDlg”
v-model:visible="showDlg"
modal
:draggable=”false”
:header=”isEdit ? 'Editar plano' : 'Novo plano'”
:style=”{ width: '620px' }”
:draggable="false"
:header="isEdit ? 'Editar plano' : 'Novo plano'"
:style="{ width: '620px' }"
>
<div class=”flex flex-col gap-4”>
<div class="flex flex-col gap-4">
<div>
<label class=”block mb-2”>Público do plano</label>
<label class="block mb-2">Público do plano</label>
<SelectButton
v-model=”form.target”
:options=”targetOptions”
optionLabel=”label”
optionValue=”value”
class=”w-full”
:disabled=”isTargetLocked || saving”
v-model="form.target"
:options="targetOptions"
optionLabel="label"
optionValue="value"
class="w-full"
:disabled="isTargetLocked || saving"
/>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">
Planos já existentes não mudam de público. Isso evita inconsistência no catálogo.
</div>
</div>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-tag” />
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-tag" />
<InputText
v-model=”form.key”
id=”plan_key”
class=”w-full pr-10”
variant=”filled”
placeholder=”ex.: clinic_pro”
:disabled=”(isCorePlanEditing || saving)”
@blur=”form.key = slugifyKey(form.key)”
v-model="form.key"
id="plan_key"
class="w-full pr-10"
variant="filled"
placeholder="ex.: clinic_pro"
:disabled="(isCorePlanEditing || saving)"
@blur="form.key = slugifyKey(form.key)"
/>
</IconField>
<label for=”plan_key”>Key</label>
<label for="plan_key">Key</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] -mt-3”>
<div class="text-[1rem] text-[var(--text-color-secondary)] -mt-3">
Key é técnica e estável (slug). Planos padrão do sistema têm a key protegida.
</div>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-bookmark” />
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-bookmark" />
<InputText
v-model=”form.name”
id=”plan_name”
class=”w-full pr-10”
variant=”filled”
placeholder=”ex.: Clínica PRO”
:disabled=”saving”
v-model="form.name"
id="plan_name"
class="w-full pr-10"
variant="filled"
placeholder="ex.: Clínica PRO"
:disabled="saving"
/>
</IconField>
<label for=”plan_name”>Nome</label>
<label for="plan_name">Nome</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] -mt-3”>
<div class="text-[1rem] text-[var(--text-color-secondary)] -mt-3">
Nome interno para administração. (Nome público vem de <b>plan_public</b>.)
</div>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-4”>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-money-bill” />
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-money-bill" />
<InputNumber
v-model=”form.price_monthly”
inputId=”price_monthly”
class=”w-full”
inputClass=”w-full pr-10”
variant=”filled”
mode=”decimal”
:minFractionDigits=”2”
:maxFractionDigits=”2”
placeholder=”ex.: 49,90”
:disabled=”saving”
v-model="form.price_monthly"
inputId="price_monthly"
class="w-full"
inputClass="w-full pr-10"
variant="filled"
mode="decimal"
:minFractionDigits="2"
:maxFractionDigits="2"
placeholder="ex.: 49,90"
:disabled="saving"
/>
</IconField>
<label for=”price_monthly”>Preço mensal (R$)</label>
<label for="price_monthly">Preço mensal (R$)</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>Deixe vazio para “sem preço definido”.</div>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">Deixe vazio para "sem preço definido".</div>
</div>
<div>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-calendar” />
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-calendar" />
<InputNumber
v-model=”form.price_yearly”
inputId=”price_yearly”
class=”w-full”
inputClass=”w-full pr-10”
variant=”filled”
mode=”decimal”
:minFractionDigits=”2”
:maxFractionDigits=”2”
placeholder=”ex.: 490,00”
:disabled=”saving”
v-model="form.price_yearly"
inputId="price_yearly"
class="w-full"
inputClass="w-full pr-10"
variant="filled"
mode="decimal"
:minFractionDigits="2"
:maxFractionDigits="2"
placeholder="ex.: 490,00"
:disabled="saving"
/>
</IconField>
<label for=”price_yearly”>Preço anual (R$)</label>
<label for="price_yearly">Preço anual (R$)</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>Deixe vazio para “sem preço definido”.</div>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">Deixe vazio para "sem preço definido".</div>
</div>
</div>
<!-- max_supervisees: só para planos de supervisor -->
<div v-if=”form.target === 'supervisor'”>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-users” />
<div v-if="form.target === 'supervisor'">
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-users" />
<InputNumber
v-model=”form.max_supervisees”
inputId=”max_supervisees”
class=”w-full”
inputClass=”w-full pr-10”
variant=”filled”
:useGrouping=”false”
:min=”1”
placeholder=”ex.: 3”
:disabled=”saving”
v-model="form.max_supervisees"
inputId="max_supervisees"
class="w-full"
inputClass="w-full pr-10"
variant="filled"
:useGrouping="false"
:min="1"
placeholder="ex.: 3"
:disabled="saving"
/>
</IconField>
<label for=”max_supervisees”>Limite de supervisionados</label>
<label for="max_supervisees">Limite de supervisionados</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>Número máximo de terapeutas que podem ser supervisionados neste plano.</div>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">Número máximo de terapeutas que podem ser supervisionados neste plano.</div>
</div>
</div>
<template #footer>
<Button label=”Cancelar” severity=”secondary” outlined @click=”showDlg = false” :disabled=”saving” />
<Button :label=”isEdit ? 'Salvar' : 'Criar'” icon=”pi pi-check” :loading=”saving” @click=”save” />
<Button label="Cancelar" severity="secondary" outlined @click="showDlg = false" :disabled="saving" />
<Button :label="isEdit ? 'Salvar' : 'Criar'" icon="pi pi-check" :loading="saving" @click="save" />
</template>
</Dialog>
</template>

460
src/views/pages/saas/SaasPlansPublicPage.vue
View File

@@ -48,7 +48,7 @@ const targetOptions = [
const previewPricePolicy = ref('hide') // 'hide' | 'consult'
const previewPolicyOptions = [
{ label: 'Ocultar sem preço', value: 'hide' },
{ label: 'Mostrar “Sob consulta”', value: 'consult' }
{ label: 'Mostrar "Sob consulta"', value: 'consult' }
]
function normalizeTarget (row) {
@@ -450,148 +450,148 @@ onBeforeUnmount(() => {
<ConfirmDialog />
<!-- Sentinel -->
<div ref=”heroSentinelRef” class=”h-px” />
<div ref="heroSentinelRef" class="h-px" />
<!-- Hero sticky -->
<div
ref=”heroEl”
class=”sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5”
:style=”{ top: 'var(--layout-sticky-top, 56px)' }”
ref="heroEl"
class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5"
:style="{ top: 'var(--layout-sticky-top, 56px)' }"
>
<div class=”absolute inset-0 pointer-events-none overflow-hidden” aria-hidden=”true”>
<div class=”absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-emerald-400/10” />
<div class=”absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-indigo-400/10” />
<div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
<div class="absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-emerald-400/10" />
<div class="absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-indigo-400/10" />
</div>
<div class=”relative z-10 flex items-center justify-between gap-3 flex-wrap”>
<div class=”min-w-0”>
<div class=”text-[1rem] font-bold tracking-tight text-[var(--text-color)]”>Vitrine de Planos</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-0.5”>Configure como os planos aparecem na página pública.</div>
<div class="relative z-10 flex items-center justify-between gap-3 flex-wrap">
<div class="min-w-0">
<div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Vitrine de Planos</div>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-0.5">Configure como os planos aparecem na página pública.</div>
</div>
<!-- Ações desktop (≥ 1200px) -->
<div class=”hidden xl:flex items-center gap-2 flex-wrap”>
<SelectButton v-model=”targetFilter” :options=”targetOptions” optionLabel=”label” optionValue=”value” size=”small” :disabled=”loading || saving || bulletSaving” />
<Button label=”Recarregar” icon=”pi pi-refresh” severity=”secondary” outlined size=”small” :loading=”loading” :disabled=”saving || bulletSaving” @click=”fetchAll” />
<div class="hidden xl:flex items-center gap-2 flex-wrap">
<SelectButton v-model="targetFilter" :options="targetOptions" optionLabel="label" optionValue="value" size="small" :disabled="loading || saving || bulletSaving" />
<Button label="Recarregar" icon="pi pi-refresh" severity="secondary" outlined size="small" :loading="loading" :disabled="saving || bulletSaving" @click="fetchAll" />
</div>
<!-- Ações mobile (< 1200px) -->
<div class=”flex xl:hidden”>
<div class="flex xl:hidden">
<Button
label=”Ações”
icon=”pi pi-ellipsis-v”
severity=”warn”
size=”small”
aria-haspopup=”true”
aria-controls=”showcase_hero_menu”
@click=”(e) => heroMenuRef.toggle(e)”
label="Ações"
icon="pi pi-ellipsis-v"
severity="warn"
size="small"
aria-haspopup="true"
aria-controls="showcase_hero_menu"
@click="(e) => heroMenuRef.toggle(e)"
/>
<Menu ref=”heroMenuRef” id=”showcase_hero_menu” :model=”heroMenuItems” :popup=”true” />
<Menu ref="heroMenuRef" id="showcase_hero_menu" :model="heroMenuItems" :popup="true" />
</div>
</div>
</div>
<!-- content -->
<div class=”px-3 md:px-4 pb-8 flex flex-col gap-4”>
<div class="px-3 md:px-4 pb-8 flex flex-col gap-4">
<!-- Search -->
<div>
<FloatLabel variant=”on” class=”w-full md:w-80”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-search” />
<InputText v-model=”q” id=”plans_public_search” class=”w-full pr-10” variant=”filled” :disabled=”loading || saving || bulletSaving” />
<FloatLabel variant="on" class="w-full md:w-80">
<IconField class="w-full">
<InputIcon class="pi pi-search" />
<InputText v-model="q" id="plans_public_search" class="w-full pr-10" variant="filled" :disabled="loading || saving || bulletSaving" />
</IconField>
<label for=”plans_public_search”>Buscar plano</label>
<label for="plans_public_search">Buscar plano</label>
</FloatLabel>
</div>
<!-- Popover global (reutilizado) -->
<Popover ref=”bulletsPop”>
<div class=”w-[340px] max-w-[80vw]”>
<div class=”text-[1rem] font-semibold mb-2”>{{ popPlanTitle }}</div>
<Popover ref="bulletsPop">
<div class="w-[340px] max-w-[80vw]">
<div class="text-[1rem] font-semibold mb-2">{{ popPlanTitle }}</div>
<div v-if=”!popBullets?.length” class=”text-[1rem] text-[var(--text-color-secondary)]”>
<div v-if="!popBullets?.length" class="text-[1rem] text-[var(--text-color-secondary)]">
Nenhum benefício configurado.
</div>
<ul v-else class=”m-0 pl-4 space-y-2”>
<li v-for=”b in popBullets” :key=”b.id” class=”text-[1rem] leading-snug”>
<span :class=”b.highlight ? 'font-semibold' : ''”>
<ul v-else class="m-0 pl-4 space-y-2">
<li v-for="b in popBullets" :key="b.id" class="text-[1rem] leading-snug">
<span :class="b.highlight ? 'font-semibold' : ''">
{{ b.text }}
</span>
<div v-if=”b.highlight” class=”inline ml-2 text-[1rem] text-[var(--text-color-secondary)]”>(destaque)</div>
<div v-if="b.highlight" class="inline ml-2 text-[1rem] text-[var(--text-color-secondary)]">(destaque)</div>
</li>
</ul>
</div>
</Popover>
<DataTable :value=”tableRows” dataKey=”plan_id” :loading=”loading” stripedRows responsiveLayout=”scroll”>
<Column header=”Plano” style=”min-width: 18rem”>
<template #body=”{ data }”>
<div class=”flex flex-col”>
<span class=”font-semibold”>{{ data.public_name || data.plan_name || data.plan_key }}</span>
<div class=”text-[1rem] text-[var(--text-color-secondary)]”>
<DataTable :value="tableRows" dataKey="plan_id" :loading="loading" stripedRows responsiveLayout="scroll">
<Column header="Plano" style="min-width: 18rem">
<template #body="{ data }">
<div class="flex flex-col">
<span class="font-semibold">{{ data.public_name || data.plan_name || data.plan_key }}</span>
<div class="text-[1rem] text-[var(--text-color-secondary)]">
{{ data.plan_key }} • {{ data.plan_name || '—' }}
</div>
</div>
</template>
</Column>
<Column header=”Público” style=”width: 10rem”>
<template #body=”{ data }”>
<Tag :value=”targetLabel(normalizeTarget(data))” :severity=”targetSeverity(normalizeTarget(data))” rounded />
<Column header="Público" style="width: 10rem">
<template #body="{ data }">
<Tag :value="targetLabel(normalizeTarget(data))" :severity="targetSeverity(normalizeTarget(data))" rounded />
</template>
</Column>
<Column header=”Mensal” style=”width: 12rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatBRLFromCents(data.monthly_cents) }}</span>
<Column header="Mensal" style="width: 12rem">
<template #body="{ data }">
<span class="font-medium">{{ formatBRLFromCents(data.monthly_cents) }}</span>
</template>
</Column>
<Column header=”Anual” style=”width: 12rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatBRLFromCents(data.yearly_cents) }}</span>
<Column header="Anual" style="width: 12rem">
<template #body="{ data }">
<span class="font-medium">{{ formatBRLFromCents(data.yearly_cents) }}</span>
</template>
</Column>
<Column field=”badge” header=”Badge” style=”min-width: 12rem” />
<Column field="badge" header="Badge" style="min-width: 12rem" />
<Column header=”Visível” style=”width: 8rem”>
<template #body=”{ data }”>
<Column header="Visível" style="width: 8rem">
<template #body="{ data }">
<span>{{ data.is_visible ? 'Sim' : 'Não' }}</span>
</template>
</Column>
<Column header=”Destaque” style=”width: 9rem”>
<template #body=”{ data }”>
<Column header="Destaque" style="width: 9rem">
<template #body="{ data }">
<span>{{ data.is_featured ? 'Sim' : 'Não' }}</span>
</template>
</Column>
<Column field=”sort_order” header=”Ordem” style=”width: 8rem” />
<Column field="sort_order" header="Ordem" style="width: 8rem" />
<Column header=”Ações” style=”width: 14rem”>
<template #body=”{ data }”>
<div class=”flex gap-2 justify-end”>
<Column header="Ações" style="width: 14rem">
<template #body="{ data }">
<div class="flex gap-2 justify-end">
<Button
severity=”secondary”
severity="secondary"
outlined
size=”small”
:disabled=”loading || saving || bulletSaving”
@click=”(e) => openBulletsPopover(e, data)”
size="small"
:disabled="loading || saving || bulletSaving"
@click="(e) => openBulletsPopover(e, data)"
>
<i class=”pi pi-list mr-2” />
<span class=”font-medium”>{{ data.bullets?.length || 0 }}</span>
<i class="pi pi-list mr-2" />
<span class="font-medium">{{ data.bullets?.length || 0 }}</span>
</Button>
<Button
icon=”pi pi-pencil”
severity=”secondary”
icon="pi pi-pencil"
severity="secondary"
outlined
size=”small”
:disabled=”loading || saving || bulletSaving”
@click=”openEdit(data)”
size="small"
:disabled="loading || saving || bulletSaving"
@click="openEdit(data)"
/>
</div>
</template>
@@ -599,53 +599,53 @@ onBeforeUnmount(() => {
</DataTable>
<!-- PREVIEW PÚBLICO (conceitual) -->
<div class=”rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden”>
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden">
<!-- Hero -->
<div class=”relative p-6 md:p-10”>
<div class=”absolute inset-0 opacity-40 pointer-events-none bg-[radial-gradient(ellipse_at_top,rgba(16,185,129,0.18),transparent_55%)]” />
<div class=”relative”>
<div class=”flex flex-col md:flex-row md:items-end md:justify-between gap-6”>
<div class=”max-w-2xl”>
<div class=”flex items-center gap-2 mb-3 flex-wrap”>
<div class="relative p-6 md:p-10">
<div class="absolute inset-0 opacity-40 pointer-events-none bg-[radial-gradient(ellipse_at_top,rgba(16,185,129,0.18),transparent_55%)]" />
<div class="relative">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
<div class="max-w-2xl">
<div class="flex items-center gap-2 mb-3 flex-wrap">
<Tag
:value=”targetFilter === 'all' ? 'Vitrine (Todos)' : `Vitrine (${targetLabel(targetFilter)})`”
:severity=”targetFilter === 'therapist' ? 'success' : (targetFilter === 'clinic' ? 'info' : 'secondary')”
:value="targetFilter === 'all' ? 'Vitrine (Todos)' : `Vitrine (${targetLabel(targetFilter)})`"
:severity="targetFilter === 'therapist' ? 'success' : (targetFilter === 'clinic' ? 'info' : 'secondary')"
rounded
/>
<div class=”text-[1rem] text-[var(--text-color-secondary)]”>
<div class="text-[1rem] text-[var(--text-color-secondary)]">
Ajuste nomes, descrições, badges e benefícios — e veja o resultado aqui.
</div>
</div>
<div class=”text-3xl md:text-5xl font-semibold leading-tight”>
<div class="text-3xl md:text-5xl font-semibold leading-tight">
Um plano não é preço.<br />
É promessa organizada.
</div>
<div class=”text-[var(--text-color-secondary)] mt-3”>
<div class="text-[var(--text-color-secondary)] mt-3">
A vitrine é o lugar onde o produto deixa de ser tabela e vira escolha.
Clareza, contraste e uma hierarquia que guia o olhar — sem ruído.
</div>
</div>
<div class=”flex flex-col items-start md:items-end gap-4”>
<div class=”flex flex-col gap-2”>
<div class=”text-[1rem] text-[var(--text-color-secondary)]”>Cobrança</div>
<div class="flex flex-col items-start md:items-end gap-4">
<div class="flex flex-col gap-2">
<div class="text-[1rem] text-[var(--text-color-secondary)]">Cobrança</div>
<SelectButton
v-model=”billingInterval”
:options=”intervalOptions”
optionLabel=”label”
optionValue=”value”
v-model="billingInterval"
:options="intervalOptions"
optionLabel="label"
optionValue="value"
/>
</div>
<div class=”flex flex-col gap-2”>
<div class=”text-[1rem] text-[var(--text-color-secondary)]”>Planos sem preço</div>
<div class="flex flex-col gap-2">
<div class="text-[1rem] text-[var(--text-color-secondary)]">Planos sem preço</div>
<SelectButton
v-model=”previewPricePolicy”
:options=”previewPolicyOptions”
optionLabel=”label”
optionValue=”value”
v-model="previewPricePolicy"
:options="previewPolicyOptions"
optionLabel="label"
optionValue="value"
/>
</div>
</div>
@@ -654,101 +654,101 @@ onBeforeUnmount(() => {
</div>
<!-- Cards -->
<div class=”p-6 md:p-10 pt-0”>
<div v-if=”!previewPlans.length” class=”text-[1rem] text-[var(--text-color-secondary)]”>
<div class="p-6 md:p-10 pt-0">
<div v-if="!previewPlans.length" class="text-[1rem] text-[var(--text-color-secondary)]">
Nenhum plano visível para este filtro.
</div>
<div v-else class=”mt-6 grid grid-cols-1 md:grid-cols-3 gap-6”>
<div v-else class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
<div
v-for=”p in previewPlans”
:key=”p.plan_id”
:class=”[
v-for="p in previewPlans"
:key="p.plan_id"
:class="[
'relative rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden',
'shadow-sm transition-transform',
p.is_featured ? 'md:-translate-y-2 md:scale-[1.02] ring-1 ring-emerald-500/25' : ''
]”
]"
>
<div class=”h-2 w-full opacity-50 bg-[var(--surface-100)]” />
<div class="h-2 w-full opacity-50 bg-[var(--surface-100)]" />
<div class=”p-6”>
<div class=”flex items-center justify-between gap-3”>
<div class=”flex items-center gap-2 flex-wrap”>
<Tag :value=”targetLabel(normalizeTarget(p))” :severity=”targetSeverity(normalizeTarget(p))” rounded />
<div class="p-6">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2 flex-wrap">
<Tag :value="targetLabel(normalizeTarget(p))" :severity="targetSeverity(normalizeTarget(p))" rounded />
<Tag
v-if=”p.badge || p.is_featured”
:value=”p.badge || 'Destaque'”
:severity=”p.is_featured ? 'success' : 'secondary'”
v-if="p.badge || p.is_featured"
:value="p.badge || 'Destaque'"
:severity="p.is_featured ? 'success' : 'secondary'"
rounded
/>
</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)]”>{{ p.plan_key }}</div>
<div class="text-[1rem] text-[var(--text-color-secondary)]">{{ p.plan_key }}</div>
</div>
<div class=”mt-4”>
<template v-if=”priceDisplayForPreview(p).kind === 'paid'”>
<div class=”text-4xl font-semibold leading-none”>
<div class="mt-4">
<template v-if="priceDisplayForPreview(p).kind === 'paid'">
<div class="text-4xl font-semibold leading-none">
{{ priceDisplayForPreview(p).main }}
</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">
{{ priceDisplayForPreview(p).sub }}
</div>
</template>
<template v-else-if=”priceDisplayForPreview(p).kind === 'free'”>
<div class=”text-4xl font-semibold leading-none”>
<template v-else-if="priceDisplayForPreview(p).kind === 'free'">
<div class="text-4xl font-semibold leading-none">
{{ priceDisplayForPreview(p).main }}
</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">
{{ billingInterval === 'year' ? 'no anual' : 'no mensal' }}
</div>
</template>
<template v-else>
<div class=”text-2xl font-semibold leading-none”>
<div class="text-2xl font-semibold leading-none">
{{ priceDisplayForPreview(p).main }}
</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">
Fale com a equipe para montar o plano ideal.
</div>
</template>
</div>
<div class=”text-[var(--text-color-secondary)] mt-3 min-h-[44px]”>
<div class="text-[var(--text-color-secondary)] mt-3 min-h-[44px]">
{{ p.public_description || '—' }}
</div>
<Button
class=”mt-5 w-full”
:label=”p.is_featured ? 'Começar agora' : 'Selecionar plano'”
:severity=”p.is_featured ? 'success' : 'secondary'”
:outlined=”!p.is_featured”
class="mt-5 w-full"
:label="p.is_featured ? 'Começar agora' : 'Selecionar plano'"
:severity="p.is_featured ? 'success' : 'secondary'"
:outlined="!p.is_featured"
/>
<div class=”mt-6”>
<div class=”border-t border-dashed border-[var(--surface-border)]” />
<div class="mt-6">
<div class="border-t border-dashed border-[var(--surface-border)]" />
</div>
<ul v-if=”p.bullets?.length” class=”mt-4 space-y-2”>
<li v-for=”b in p.bullets” :key=”b.id” class=”flex items-start gap-2”>
<i class=”pi pi-check mt-1 text-[1rem] text-[var(--text-color-secondary)]”></i>
<span :class=”['text-[1rem] leading-snug', b.highlight ? 'font-semibold' : '']”>
<ul v-if="p.bullets?.length" class="mt-4 space-y-2">
<li v-for="b in p.bullets" :key="b.id" class="flex items-start gap-2">
<i class="pi pi-check mt-1 text-[1rem] text-[var(--text-color-secondary)]"></i>
<span :class="['text-[1rem] leading-snug', b.highlight ? 'font-semibold' : '']">
{{ b.text }}
</span>
</li>
</ul>
<div v-else class=”mt-4 text-[1rem] text-[var(--text-color-secondary)]”>
<div v-else class="mt-4 text-[1rem] text-[var(--text-color-secondary)]">
Nenhum benefício configurado.
</div>
</div>
</div>
</div>
<div v-if=”previewPricePolicy === 'hide'” class=”mt-6 text-[1rem] text-[var(--text-color-secondary)]”>
<div v-if="previewPricePolicy === 'hide'" class="mt-6 text-[1rem] text-[var(--text-color-secondary)]">
Observação: planos sem preço não aparecem no preview (política atual).
Para exibir como “Sob consulta”, mude acima.
Para exibir como "Sob consulta", mude acima.
</div>
</div>
</div>
@@ -757,90 +757,90 @@ onBeforeUnmount(() => {
<!-- Dialog principal (✅ sem drag: removemos draggable) -->
<Dialog
v-model:visible=”showDlg”
v-model:visible="showDlg"
modal
header=”Editar vitrine”
:style=”{ width: '820px' }”
:closable=”!saving”
:dismissableMask=”!saving”
:draggable=”false”
header="Editar vitrine"
:style="{ width: '820px' }"
:closable="!saving"
:dismissableMask="!saving"
:draggable="false"
>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-6”>
<div class=”flex flex-col gap-4”>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex flex-col gap-4">
<!-- ✅ Nome público (FloatLabel + Icon) -->
<FloatLabel variant=”on”>
<FloatLabel variant="on">
<IconField>
<InputIcon class=”pi pi-tag” />
<InputIcon class="pi pi-tag" />
<InputText
id=”pp-public-name”
v-model.trim=”form.public_name”
class=”w-full”
variant=”filled”
:disabled=”saving”
autocomplete=”off”
id="pp-public-name"
v-model.trim="form.public_name"
class="w-full"
variant="filled"
:disabled="saving"
autocomplete="off"
autofocus
@keydown.enter.prevent=”save”
@keydown.enter.prevent="save"
/>
</IconField>
<label for=”pp-public-name”>Nome público *</label>
<label for="pp-public-name">Nome público *</label>
</FloatLabel>
<!-- ✅ Descrição pública -->
<FloatLabel variant=”on”>
<FloatLabel variant="on">
<IconField>
<InputIcon class=”pi pi-align-left” />
<InputIcon class="pi pi-align-left" />
<Textarea
id=”pp-public-desc”
v-model.trim=”form.public_description”
class=”w-full”
rows=”3”
id="pp-public-desc"
v-model.trim="form.public_description"
class="w-full"
rows="3"
autoResize
:disabled=”saving”
:disabled="saving"
/>
</IconField>
<label for=”pp-public-desc”>Descrição pública</label>
<label for="pp-public-desc">Descrição pública</label>
</FloatLabel>
<!-- ✅ Badge -->
<FloatLabel variant=”on”>
<FloatLabel variant="on">
<IconField>
<InputIcon class=”pi pi-bookmark” />
<InputIcon class="pi pi-bookmark" />
<InputText
id=”pp-badge”
v-model.trim=”form.badge”
class=”w-full”
variant=”filled”
:disabled=”saving”
autocomplete=”off”
@keydown.enter.prevent=”save”
id="pp-badge"
v-model.trim="form.badge"
class="w-full"
variant="filled"
:disabled="saving"
autocomplete="off"
@keydown.enter.prevent="save"
/>
</IconField>
<label for=”pp-badge”>Badge (opcional)</label>
<label for="pp-badge">Badge (opcional)</label>
</FloatLabel>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-4”>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- ✅ Ordem -->
<FloatLabel variant=”on”>
<FloatLabel variant="on">
<IconField>
<InputIcon class=”pi pi-sort-amount-up-alt” />
<InputIcon class="pi pi-sort-amount-up-alt" />
<InputNumber
id=”pp-sort”
v-model=”form.sort_order”
class=”w-full”
inputClass=”w-full”
:disabled=”saving”
id="pp-sort"
v-model="form.sort_order"
class="w-full"
inputClass="w-full"
:disabled="saving"
/>
</IconField>
<label for=”pp-sort”>Ordem</label>
<label for="pp-sort">Ordem</label>
</FloatLabel>
<div class=”flex flex-col gap-3 pt-2”>
<div class=”flex items-center gap-2”>
<Checkbox v-model=”form.is_visible” :binary=”true” :disabled=”saving” />
<div class="flex flex-col gap-3 pt-2">
<div class="flex items-center gap-2">
<Checkbox v-model="form.is_visible" :binary="true" :disabled="saving" />
<label>Visível no público</label>
</div>
<div class=”flex items-center gap-2”>
<Checkbox v-model=”form.is_featured” :binary=”true” :disabled=”saving” />
<div class="flex items-center gap-2">
<Checkbox v-model="form.is_featured" :binary="true" :disabled="saving" />
<label>Destaque</label>
</div>
</div>
@@ -849,24 +849,24 @@ onBeforeUnmount(() => {
<!-- bullets -->
<div>
<div class=”flex items-center justify-between mb-3”>
<div class=”font-semibold”>Benefícios (bullets)</div>
<Button label=”Adicionar” icon=”pi pi-plus” size=”small” :disabled=”saving || bulletSaving” @click=”openBulletCreate” />
<div class="flex items-center justify-between mb-3">
<div class="font-semibold">Benefícios (bullets)</div>
<Button label="Adicionar" icon="pi pi-plus" size="small" :disabled="saving || bulletSaving" @click="openBulletCreate" />
</div>
<DataTable :value=”bullets” dataKey=”id” stripedRows responsiveLayout=”scroll”>
<Column field=”text” header=”Texto” />
<Column field=”sort_order” header=”Ordem” style=”width: 7rem” />
<Column header=”Destaque” style=”width: 8rem”>
<template #body=”{ data }”>
<DataTable :value="bullets" dataKey="id" stripedRows responsiveLayout="scroll">
<Column field="text" header="Texto" />
<Column field="sort_order" header="Ordem" style="width: 7rem" />
<Column header="Destaque" style="width: 8rem">
<template #body="{ data }">
<span>{{ data.highlight ? 'Sim' : 'Não' }}</span>
</template>
</Column>
<Column header=”Ações” style=”width: 9rem”>
<template #body=”{ data }”>
<div class=”flex gap-2”>
<Button icon=”pi pi-pencil” severity=”secondary” outlined size=”small” :disabled=”saving || bulletSaving” @click=”openBulletEdit(data)” />
<Button icon=”pi pi-trash” severity=”danger” outlined size=”small” :disabled=”saving || bulletSaving” @click=”askDeleteBullet(data)” />
<Column header="Ações" style="width: 9rem">
<template #body="{ data }">
<div class="flex gap-2">
<Button icon="pi pi-pencil" severity="secondary" outlined size="small" :disabled="saving || bulletSaving" @click="openBulletEdit(data)" />
<Button icon="pi pi-trash" severity="danger" outlined size="small" :disabled="saving || bulletSaving" @click="askDeleteBullet(data)" />
</div>
</template>
</Column>
@@ -875,62 +875,62 @@ onBeforeUnmount(() => {
</div>
<template #footer>
<Button label=”Cancelar” severity=”secondary” outlined :disabled=”saving” @click=”showDlg = false” />
<Button label=”Salvar” icon=”pi pi-check” :loading=”saving” @click=”save” />
<Button label="Cancelar" severity="secondary" outlined :disabled="saving" @click="showDlg = false" />
<Button label="Salvar" icon="pi pi-check" :loading="saving" @click="save" />
</template>
</Dialog>
<!-- Dialog bullet (✅ sem drag + inputs padronizados) -->
<Dialog
v-model:visible=”showBulletDlg”
v-model:visible="showBulletDlg"
modal
:header=”bulletIsEdit ? 'Editar benefício' : 'Novo benefício'”
:style=”{ width: '560px' }”
:closable=”!bulletSaving”
:dismissableMask=”!bulletSaving”
:draggable=”false”
:header="bulletIsEdit ? 'Editar benefício' : 'Novo benefício'"
:style="{ width: '560px' }"
:closable="!bulletSaving"
:dismissableMask="!bulletSaving"
:draggable="false"
>
<div class=”flex flex-col gap-4”>
<FloatLabel variant=”on”>
<div class="flex flex-col gap-4">
<FloatLabel variant="on">
<IconField>
<InputIcon class=”pi pi-list” />
<InputIcon class="pi pi-list" />
<Textarea
id=”pp-bullet-text”
v-model.trim=”bulletForm.text”
class=”w-full”
rows=”3”
id="pp-bullet-text"
v-model.trim="bulletForm.text"
class="w-full"
rows="3"
autoResize
:disabled=”bulletSaving”
:disabled="bulletSaving"
/>
</IconField>
<label for=”pp-bullet-text”>Texto *</label>
<label for="pp-bullet-text">Texto *</label>
</FloatLabel>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-4”>
<FloatLabel variant=”on”>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<FloatLabel variant="on">
<IconField>
<InputIcon class=”pi pi-sort-numeric-up” />
<InputIcon class="pi pi-sort-numeric-up" />
<InputNumber
id=”pp-bullet-order”
v-model=”bulletForm.sort_order”
class=”w-full”
inputClass=”w-full”
:disabled=”bulletSaving”
id="pp-bullet-order"
v-model="bulletForm.sort_order"
class="w-full"
inputClass="w-full"
:disabled="bulletSaving"
/>
</IconField>
<label for=”pp-bullet-order”>Ordem</label>
<label for="pp-bullet-order">Ordem</label>
</FloatLabel>
<div class=”flex items-center gap-2 pt-7”>
<Checkbox v-model=”bulletForm.highlight” :binary=”true” :disabled=”bulletSaving” />
<div class="flex items-center gap-2 pt-7">
<Checkbox v-model="bulletForm.highlight" :binary="true" :disabled="bulletSaving" />
<label>Destaque</label>
</div>
</div>
</div>
<template #footer>
<Button label=”Cancelar” severity=”secondary” outlined :disabled=”bulletSaving” @click=”showBulletDlg = false” />
<Button :label=”bulletIsEdit ? 'Salvar' : 'Criar'” icon=”pi pi-check” :loading=”bulletSaving” @click=”saveBullet” />
<Button label="Cancelar" severity="secondary" outlined :disabled="bulletSaving" @click="showBulletDlg = false" />
<Button :label="bulletIsEdit ? 'Salvar' : 'Criar'" icon="pi pi-check" :loading="bulletSaving" @click="saveBullet" />
</template>
</Dialog>
</template>

423
src/views/pages/therapist/TherapistDashboard.vue
View File

@@ -35,7 +35,7 @@
'bg-indigo-500/10 text-[var(--primary-color,#6366f1)] font-bold': cell.day === selectedDay && !cell.isToday,
'text-[var(--text-color,#1e293b)] hover:bg-[var(--surface-hover,#f1f5f9)]': !cell.isToday && !cell.isOther,
}"
@click="cell.day && (selectedDay = cell.day)"
@click="cell.day && onCalDayClick($event, cell.day)"
>
<span>{{ cell.day }}</span>
<span
@@ -60,15 +60,17 @@
<div
v-for="ev in eventosDoDia"
:key="ev.id"
class="flex items-center gap-1.5 px-1.5 py-1.5 rounded-md bg-[var(--surface-ground,#f8fafc)] border-l-[3px]"
class="flex items-center gap-1.5 px-1.5 py-1.5 rounded-md bg-[var(--surface-ground,#f8fafc)] border-l-[3px] cursor-pointer hover:bg-[var(--surface-hover,#f1f5f9)] transition-colors duration-100"
:style="ev.bgColor ? { borderLeftColor: ev.bgColor } : {}"
:class="{
'border-l-sky-400': ev.tipo === 'reuniao',
'border-l-green-400': ev.status === 'realizado',
'border-l-[var(--primary-color,#6366f1)]': ev.tipo !== 'reuniao' && ev.status !== 'realizado',
'border-l-sky-400': !ev.bgColor && ev.tipo === 'reuniao',
'border-l-green-400': !ev.bgColor && ev.status === 'realizado',
'border-l-[var(--primary-color,#6366f1)]': !ev.bgColor && ev.tipo !== 'reuniao' && ev.status !== 'realizado',
}"
@click="openEvMenu($event, ev)"
>
<div class="flex flex-col items-end min-w-[38px]">
<span class="text-[1rem] font-bold text-[var(--text-color)]">{{ ev.hora }}</span>
<span class="text-[0.7rem] font-bold text-[var(--text-color)]">{{ ev.hora }}</span>
<span class="text-xs text-[var(--text-color-secondary)]">{{ ev.dur }}</span>
</div>
<div class="flex-1 min-w-0">
@@ -93,7 +95,7 @@
<span class="ml-auto bg-[var(--primary-color,#6366f1)] text-white rounded-full px-1.5 text-xs font-bold">{{ recorrencias.length }}</span>
</div>
<div class="flex flex-col gap-1.5 max-h-[170px] overflow-y-auto">
<div v-for="r in recorrencias" :key="r.id" class="flex items-center gap-2 py-0.5">
<div v-for="r in recorrencias" :key="r.id" class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-[var(--surface-hover,#f1f5f9)] rounded-md px-1 transition-colors duration-100" @click="openRecMenu($event, r)">
<div class="w-[26px] h-[26px] rounded-full flex items-center justify-center text-[0.58rem] font-bold text-white flex-shrink-0" :style="{ background: r.color }">{{ r.initials }}</div>
<div class="flex-1 min-w-0">
<span class="block text-xs font-semibold">{{ r.nome }}</span>
@@ -130,7 +132,7 @@
</div>
<div class="min-w-0">
<div class="text-[1.1rem] font-bold tracking-tight text-[var(--text-color)]">{{ saudacao }} <span class="text-[var(--primary-color,#6366f1)]">👋</span></div>
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-0.5">{{ resumoHoje }}</div>
<div class="text-[0.78rem] text-[var(--text-color-secondary)] mt-0.5">{{ resumoHoje }}</div>
</div>
</div>
<!-- Controles (desktop e mobile — mesmo conteúdo, sempre visível) -->
@@ -163,7 +165,7 @@
'text-[var(--text-color)]': !s.cls,
}"
>{{ s.value }}</div>
<div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75">{{ s.label }}</div>
<div class="text-[0.7rem] text-[var(--text-color-secondary)] opacity-75">{{ s.label }}</div>
</div>
</div>
</div>
@@ -204,11 +206,11 @@
v-for="ev in timelineEvents"
:key="ev.id"
class="absolute top-[3px] h-[34px] rounded flex items-center px-1.5 overflow-hidden cursor-default min-w-[32px] hover:brightness-110 transition-[filter] duration-150 z-10"
:style="ev.style"
:style="{ ...ev.style, ...(ev.bgColor ? { backgroundColor: ev.bgColor, color: ev.txtColor || '#fff' } : {}) }"
:class="{
'bg-sky-400': ev.tipo === 'reuniao',
'bg-green-500': ev.status === 'realizado',
'bg-[var(--primary-color,#6366f1)]': ev.tipo !== 'reuniao' && ev.status !== 'realizado',
'bg-sky-400': !ev.bgColor && ev.tipo === 'reuniao',
'bg-green-500': !ev.bgColor && ev.status === 'realizado',
'bg-[var(--primary-color,#6366f1)]': !ev.bgColor && ev.tipo !== 'reuniao' && ev.status !== 'realizado',
}"
:title="ev.tooltip"
>
@@ -235,7 +237,7 @@
<div class="flex items-center gap-2.5 px-3.5 pt-3 pb-2 border-b border-[var(--surface-border,#f1f5f9)]">
<div class="w-8 h-8 rounded-md flex items-center justify-center text-[0.9rem] flex-shrink-0 bg-red-500/10 text-red-500"><i class="pi pi-inbox" /></div>
<div class="flex-1">
<span class="block text-[1rem] font-bold text-[var(--text-color)]">Agendador Online</span>
<span class="block text-[0.78rem] font-bold text-[var(--text-color)]">Agendador Online</span>
<span class="block text-xs text-[var(--text-color-secondary)]">Solicitações do portal externo</span>
</div>
<span v-if="solicitacoesPendentes > 0" class="rounded-full px-1.5 py-px text-xs font-bold bg-red-50 text-red-500 border border-red-300">{{ solicitacoesPendentes }}</span>
@@ -266,7 +268,7 @@
<div class="flex items-center gap-2.5 px-3.5 pt-3 pb-2 border-b border-[var(--surface-border,#f1f5f9)]">
<div class="w-8 h-8 rounded-md flex items-center justify-center text-[0.9rem] flex-shrink-0 bg-sky-500/10 text-sky-500"><i class="pi pi-user-plus" /></div>
<div class="flex-1">
<span class="block text-[1rem] font-bold text-[var(--text-color)]">Cadastros Externos</span>
<span class="block text-[0.78rem] font-bold text-[var(--text-color)]">Cadastros Externos</span>
<span class="block text-xs text-[var(--text-color-secondary)]">Pacientes aguardando triagem</span>
</div>
<span v-if="cadastrosPendentes > 0" class="rounded-full px-1.5 py-px text-xs font-bold bg-blue-50 text-blue-500 border border-blue-200">{{ cadastrosPendentes }}</span>
@@ -275,7 +277,7 @@
<div v-for="c in cadastros" :key="c.id" class="flex items-center gap-2">
<div class="w-[26px] h-[26px] rounded-full bg-gradient-to-br from-sky-400 to-indigo-500 text-white text-[0.58rem] font-bold flex items-center justify-center flex-shrink-0">{{ c.initials }}</div>
<div class="flex-1 min-w-0">
<span class="block text-[1rem] font-semibold">{{ c.nome }}</span>
<span class="block text-[0.7rem] font-semibold">{{ c.nome }}</span>
<span class="block text-xs text-[var(--text-color-secondary)]">{{ c.detalhe }}</span>
</div>
<button
@@ -299,7 +301,7 @@
<div class="flex items-center gap-2.5 px-3.5 pt-3 pb-2 border-b border-[var(--surface-border,#f1f5f9)]">
<div class="w-8 h-8 rounded-md flex items-center justify-center text-[0.9rem] flex-shrink-0 bg-amber-500/10 text-amber-500"><i class="pi pi-refresh" /></div>
<div class="flex-1">
<span class="block text-[1rem] font-bold text-[var(--text-color)]">Recorrências</span>
<span class="block text-[0.78rem] font-bold text-[var(--text-color)]">Recorrências</span>
<span class="block text-xs text-[var(--text-color-secondary)]">Atenção necessária</span>
</div>
<span v-if="recAlerta.length" class="rounded-full px-1.5 py-px text-xs font-bold bg-amber-50 text-amber-500 border border-amber-200">{{ recAlerta.length }}</span>
@@ -307,7 +309,7 @@
<div class="flex-1 flex flex-col gap-1.5 px-3.5 py-1.5 min-h-[72px]">
<div v-for="r in recAlerta" :key="r.id" class="flex items-center gap-2.5 py-1">
<div class="flex-1">
<span class="block text-[1rem] font-semibold">{{ r.nome }}</span>
<span class="block text-[0.7rem] font-semibold">{{ r.nome }}</span>
<span
class="block text-xs font-semibold mt-0.5"
:class="{
@@ -342,7 +344,7 @@
<div class="flex items-center gap-2.5 px-3.5 pt-3 pb-2 border-b border-[var(--surface-border,#f1f5f9)]">
<div class="w-8 h-8 rounded-md flex items-center justify-center text-[0.9rem] flex-shrink-0 bg-indigo-500/10 text-indigo-500"><i class="pi pi-chart-pie" /></div>
<div class="flex-1">
<span class="block text-[1rem] font-bold text-[var(--text-color)]">Radar da Semana</span>
<span class="block text-[0.78rem] font-bold text-[var(--text-color)]">Radar da Semana</span>
<span class="block text-xs text-[var(--text-color-secondary)]">Presença, faltas e reposições</span>
</div>
</div>
@@ -418,13 +420,49 @@
</section>
</main>
<!-- Menus de contexto (fora do aside para evitar visibility:hidden) -->
<Menu ref="calDayMenuRef" :model="calDayMenuItems" :popup="true" />
<Menu ref="evMenuRef" :model="evMenuItems" :popup="true" />
<Menu ref="recMenuRef" :model="recMenuItems" :popup="true" />
<!-- Dialog: Novo Compromisso (aberto pelo menu de contexto do mini calendário) -->
<AgendaEventDialog
v-if="agendaDialogOpen"
v-model="agendaDialogOpen"
:eventRow="agendaDialogEventRow"
:initialStartISO="agendaDialogStartISO"
:initialEndISO="agendaDialogEndISO"
:ownerId="ownerId"
:tenantId="clinicTenantId"
:commitmentOptions="commitmentOptionsNormalized"
newPatientRoute="/therapist/patients/cadastro"
@save="onAgendaDialogSave"
@delete="() => { agendaDialogOpen = false; load() }"
/>
<!-- Dialog: Prontuário do paciente -->
<PatientProntuario
:key="selectedPatient?.id || 'none'"
v-model="prontuarioOpen"
:patient="selectedPatient"
@close="closeProntuario"
/>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import Menu from 'primevue/menu'
import { supabase } from '@/lib/supabase/client'
import { useTenantStore } from '@/stores/tenantStore'
import { useAgendaEvents } from '@/features/agenda/composables/useAgendaEvents'
import AgendaEventDialog from '@/features/agenda/components/AgendaEventDialog.vue'
import { useDeterminedCommitments } from '@/features/agenda/composables/useDeterminedCommitments'
import PatientProntuario from '@/features/patients/prontuario/PatientProntuario.vue'
const dashHeroSentinelRef = ref(null)
const heroStuck = ref(false)
@@ -449,6 +487,241 @@ const saudacao = computed(() => {
})
const tenantStore = useTenantStore()
const router = useRouter()
const toast = useToast()
const { create: createEvento, update: updateEvento } = useAgendaEvents()
// ── Prontuário ────────────────────────────────────────────────
const prontuarioOpen = ref(false)
const selectedPatient = ref(null)
function openProntuario (patientId, patientNome) {
if (!patientId) return
selectedPatient.value = { id: patientId, nome_completo: patientNome || '' }
prontuarioOpen.value = true
}
function closeProntuario () { prontuarioOpen.value = false; selectedPatient.value = null }
// ── Tipos de compromisso (para o dialog) ─────────────────────
const clinicTenantId = computed(() => tenantStore.activeTenantId || tenantStore.tenantId || null)
const { rows: determinedCommitments, load: loadCommitments } = useDeterminedCommitments(clinicTenantId)
const COMMITMENT_PRIORITY = new Map([
['session', 0], ['class', 1], ['study', 2],
['reading', 3], ['supervision', 4], ['content_creation', 5],
])
const commitmentOptionsNormalized = computed(() => {
const list = Array.isArray(determinedCommitments.value) ? determinedCommitments.value : []
return [...list]
.filter(i => i?.id && i?.active !== false)
.sort((a, b) => {
const pa = COMMITMENT_PRIORITY.get(a.native_key) ?? 99
const pb = COMMITMENT_PRIORITY.get(b.native_key) ?? 99
if (pa !== pb) return pa - pb
return String(a.name || '').localeCompare(String(b.name || ''), 'pt-BR')
})
.map(i => ({
id: i.id,
tenant_id: i.tenant_id ?? null,
created_by: i.created_by ?? null,
name: String(i.name || '').trim() || 'Sem nome',
description: i.description || '',
native_key: i.native_key || null,
is_native: !!i.is_native,
is_locked: !!i.is_locked,
active: i.active !== false,
bg_color: i.bg_color || null,
text_color: i.text_color || null,
fields: Array.isArray(i.determined_commitment_fields)
? [...i.determined_commitment_fields].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
: [],
}))
})
// ── Mini calendário: menu de contexto ────────────────────────
const calDayMenuRef = ref(null)
const calDayMenuItems = computed(() => [
{
label: 'Opções do dia',
items: [
{
label: 'Novo Compromisso',
icon: 'pi pi-plus-circle',
command: () => openNovoCompromisso(),
},
{
label: 'Ver dia na agenda',
icon: 'pi pi-calendar',
command: () => verDiaNaAgenda(),
},
],
},
])
function onCalDayClick (event, day) {
selectedDay.value = day
calDayMenuRef.value?.toggle(event)
}
function verDiaNaAgenda () {
const d = String(selectedDay.value).padStart(2, '0')
const m = String(mesAtual + 1).padStart(2, '0')
router.push(`/therapist/agenda?date=${anoAtual}-${m}-${d}`)
}
// ── Menu de contexto: Eventos do dia ─────────────────────────
const evMenuRef = ref(null)
const _evAtivo = ref(null) // evento clicado
const evMenuItems = computed(() => [
{
label: 'Opções',
items: [
{
label: 'Ver prontuário',
icon: 'pi pi-file-edit',
disabled: !_evAtivo.value?.patientId,
command: () => openProntuario(_evAtivo.value?.patientId, _evAtivo.value?.nome),
},
{
label: 'Ver na agenda',
icon: 'pi pi-calendar',
command: () => {
if (!_evAtivo.value?.inicioISO) return
const d = new Date(_evAtivo.value.inicioISO)
const ds = d.toISOString().slice(0, 10)
router.push(`/therapist/agenda?date=${ds}`)
},
},
],
},
])
function openEvMenu (event, ev) {
_evAtivo.value = ev
evMenuRef.value?.toggle(event)
}
// ── Menu de contexto: Recorrências ativas ────────────────────
const recMenuRef = ref(null)
const _recAtivo = ref(null) // recorrência clicada
const recMenuItems = computed(() => [
{
label: 'Opções',
items: [
{
label: 'Ver prontuário',
icon: 'pi pi-file-edit',
disabled: !_recAtivo.value?.patientId,
command: () => openProntuario(_recAtivo.value?.patientId, _recAtivo.value?.nome),
},
{
label: 'Ver na agenda',
icon: 'pi pi-calendar',
command: () => router.push('/therapist/agenda'),
},
],
},
])
function openRecMenu (event, r) {
_recAtivo.value = r
recMenuRef.value?.toggle(event)
}
// ── Dialog: Novo Compromisso ──────────────────────────────────
const agendaDialogOpen = ref(false)
const agendaDialogEventRow = ref(null)
const agendaDialogStartISO = ref('')
const agendaDialogEndISO = ref('')
function openNovoCompromisso () {
if (!ownerId.value) return
const durMin = 50
const now = new Date()
const base = new Date(anoAtual, mesAtual, selectedDay.value, now.getHours(), now.getMinutes(), 0, 0)
agendaDialogEventRow.value = {
owner_id: ownerId.value,
tipo: 'sessao',
status: 'agendado',
titulo: null,
observacoes: null,
}
agendaDialogStartISO.value = base.toISOString()
agendaDialogEndISO.value = new Date(base.getTime() + durMin * 60000).toISOString()
agendaDialogOpen.value = true
}
function _isUuid (v) {
return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(String(v || ''))
}
function _pickDbFields (obj) {
const allowed = [
'tenant_id', 'owner_id', 'terapeuta_id', 'patient_id',
'tipo', 'status', 'titulo', 'observacoes',
'inicio_em', 'fim_em', 'visibility_scope',
'determined_commitment_id', 'titulo_custom', 'extra_fields',
'recurrence_id', 'recurrence_date',
'price', 'insurance_plan_id', 'insurance_guide_number',
'insurance_value', 'insurance_plan_service_id',
]
const out = {}
for (const k of allowed) { if (obj[k] !== undefined) out[k] = obj[k] }
return out
}
async function onAgendaDialogSave (arg) {
try {
const isWrapped = !!arg && typeof arg === 'object' && Object.prototype.hasOwnProperty.call(arg, 'payload')
const payload = isWrapped ? arg.payload : arg
const id = isWrapped ? (arg.id ?? null) : (arg?.id ?? null)
const normalized = { ...(payload || {}) }
if (!normalized.owner_id && ownerId.value) normalized.owner_id = ownerId.value
const tid = clinicTenantId.value
if (!tid) throw new Error('tenant_id não encontrado.')
normalized.tenant_id = tid
if (!normalized.visibility_scope) normalized.visibility_scope = 'public'
if (!normalized.status) normalized.status = 'agendado'
if (!normalized.tipo) normalized.tipo = 'sessao'
if (!String(normalized.titulo || '').trim()) normalized.titulo = normalized.tipo === 'bloqueio' ? 'Ocupado' : 'Sessão'
if (!_isUuid(normalized.paciente_id)) normalized.paciente_id = null
if (normalized.determined_commitment_id && !_isUuid(normalized.determined_commitment_id)) normalized.determined_commitment_id = null
const dbPayload = _pickDbFields(normalized)
if (id) {
await updateEvento(id, dbPayload)
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Compromisso atualizado.', life: 2500 })
} else {
await createEvento(dbPayload)
toast.add({ severity: 'success', summary: 'Criado', detail: 'Compromisso criado com sucesso.', life: 2500 })
}
agendaDialogOpen.value = false
await load()
} catch (e) {
const msg = String(e?.message || '')
const isOverlap =
e?.code === '23P01' ||
msg.includes('agenda_eventos_sem_sobreposicao') ||
msg.includes('exclusion constraint')
if (isOverlap) {
toast.add({ severity: 'warn', summary: 'Conflito de horário', detail: 'Já existe um compromisso neste horário.', life: 4000 })
} else {
toast.add({ severity: 'error', summary: 'Erro ao salvar', detail: msg || 'Tente novamente.', life: 4000 })
}
}
}
const ownerId = ref(null)
const eventosDoMes = ref([])
@@ -506,18 +779,33 @@ const STATUS_ICON = {
agendado: 'pi pi-clock',
}
const commitmentColorMap = computed(() =>
new Map(
commitmentOptionsNormalized.value
.filter(c => c.id && c.bg_color)
.map(c => [c.id, { bg_color: c.bg_color, text_color: c.text_color }])
)
)
function buildEventoItem (ev) {
const inicio = new Date(ev.inicio_em)
const fim = ev.fim_em ? new Date(ev.fim_em) : null
const durMin = fim ? Math.round((fim - inicio) / 60000) : 50
const h = inicio.getHours().toString().padStart(2, '0')
const m = inicio.getMinutes().toString().padStart(2, '0')
const joinColor = ev.determined_commitments
const mapColor = ev.determined_commitment_id ? commitmentColorMap.value.get(ev.determined_commitment_id) : null
const bgColor = joinColor?.bg_color ? `#${joinColor.bg_color}` : mapColor?.bg_color ? `#${mapColor.bg_color}` : null
const txtColor = joinColor?.text_color ? `#${joinColor.text_color}` : mapColor?.text_color ? `#${mapColor.text_color}` : null
return {
id: ev.id, hora: `${h}:${m}`, dur: `${durMin}min`,
nome: ev.patients?.nome_completo || ev.titulo || ev.titulo_custom || '—',
modalidade: ev.modalidade || 'Presencial', recorrente: !!ev.recurrence_id,
status: ev.status || 'agendado', statusIcon: STATUS_ICON[ev.status] || 'pi pi-clock',
tipo: ev.tipo || 'sessao',
patientId: ev.patient_id || null,
inicioISO: ev.inicio_em || null,
bgColor, txtColor,
}
}
@@ -576,40 +864,62 @@ const recorrencias = computed(() =>
const diaLabel = weekdays.map(d => DIAS_PT[d]).join(', ')
const hora = r.start_time ? String(r.start_time).slice(0, 5) : ''
const proxLabel = nextOccurrenceLabel(r)
return { id: r.id, nome: nomeAb, freq: `${freq} · ${diaLabel}${hora ? ' ' + hora : ''}`, proxLabel, proxHoje: proxLabel === 'Hoje', color: hashColor(r.patient_id || r.id), initials: initials(nome) }
return { id: r.id, nome: nomeAb, freq: `${freq} · ${diaLabel}${hora ? ' ' + hora : ''}`, proxLabel, proxHoje: proxLabel === 'Hoje', color: hashColor(r.patient_id || r.id), initials: initials(nome), patientId: r.patient_id || null }
})
)
const eventosHoje = computed(() =>
eventosDoMes.value.filter(ev => { if (!ev.inicio_em) return false; const d = new Date(ev.inicio_em); return d.getDate() === hoje && d.getMonth() === mesAtual && d.getFullYear() === anoAtual })
)
// ── Derivados de eventosDoMes — single pass ───────────────────
// Um único computed varre o array uma vez e extrai tudo,
// evitando N loops separados que re-executam a cada reatividade.
const _statsDoMes = computed(() => {
const now = agora.value
const semIni = new Date(now); semIni.setDate(now.getDate() - now.getDay()); semIni.setHours(0, 0, 0, 0)
const semFim = new Date(semIni); semFim.setDate(semIni.getDate() + 6); semFim.setHours(23, 59, 59, 999)
const daqui30 = new Date(now); daqui30.setDate(now.getDate() + 30)
const eventosSemana = computed(() => {
const now = agora.value, ini = new Date(now)
ini.setDate(now.getDate() - now.getDay()); ini.setHours(0, 0, 0, 0)
const fim = new Date(ini); fim.setDate(ini.getDate() + 6); fim.setHours(23, 59, 59, 999)
return eventosDoMes.value.filter(ev => { if (!ev.inicio_em) return false; const d = new Date(ev.inicio_em); return d >= ini && d <= fim })
let hojeCnt = 0, semanaCnt = 0, realizadosCnt = 0, encerradosCnt = 0
const hojeLista = [], timelineLista = []
const diasSemanaMap = [[], [], [], [], [], [], []]
for (const ev of eventosDoMes.value) {
if (!ev.inicio_em) continue
const d = new Date(ev.inicio_em)
const dDay = d.getDate(), dMon = d.getMonth(), dYear = d.getFullYear()
const isHoje = dDay === hoje && dMon === mesAtual && dYear === anoAtual
if (isHoje) { hojeCnt++; hojeLista.push(ev); timelineLista.push(ev) }
if (d >= semIni && d <= semFim) {
semanaCnt++
diasSemanaMap[d.getDay()].push(ev)
}
if (d < now && ['realizado','faltou','cancelado'].includes(ev.status)) {
encerradosCnt++
if (ev.status === 'realizado') realizadosCnt++
}
}
const taxaPresenca = encerradosCnt > 0 ? Math.round((realizadosCnt / encerradosCnt) * 100) : null
return { hojeCnt, semanaCnt, taxaPresenca, hojeLista, timelineLista, diasSemanaMap }
})
const taxaPresenca = computed(() => {
const encerrados = eventosDoMes.value.filter(ev => ev.inicio_em && new Date(ev.inicio_em) < new Date() && ['realizado','faltou','cancelado'].includes(ev.status))
if (!encerrados.length) return null
return Math.round((encerrados.filter(ev => ev.status === 'realizado').length / encerrados.length) * 100)
})
const eventosHoje = computed(() => _statsDoMes.value.hojeLista)
const eventosSemana = computed(() => ({ length: _statsDoMes.value.semanaCnt }))
const taxaPresenca = computed(() => _statsDoMes.value.taxaPresenca)
const quickStats = computed(() => {
const pendentes = _solicitacoesBruto.value.length + _cadastrosBruto.value.length
const pct = taxaPresenca.value
return [
{ value: String(eventosHoje.value.length), label: 'Hoje', cls: '' },
{ value: String(pendentes), label: 'Pendentes', cls: pendentes > 0 ? 'qs-urgente' : '' },
{ value: String(eventosSemana.value.length), label: 'Semana', cls: '' },
{ value: pct !== null ? `${pct}%` : '—', label: 'Presença', cls: pct !== null && pct >= 85 ? 'qs-ok' : '' },
{ value: String(_statsDoMes.value.hojeCnt), label: 'Hoje', cls: '' },
{ value: String(pendentes), label: 'Pendentes', cls: pendentes > 0 ? 'qs-urgente' : '' },
{ value: String(_statsDoMes.value.semanaCnt), label: 'Semana', cls: '' },
{ value: pct !== null ? `${pct}%` : '—', label: 'Presença', cls: pct !== null && pct >= 85 ? 'qs-ok' : '' },
]
})
const resumoHoje = computed(() => {
const sessoes = eventosHoje.value.filter(ev => ev.tipo !== 'bloqueio').length
const sessoes = _statsDoMes.value.hojeLista.filter(ev => ev.tipo !== 'bloqueio').length
const sols = _solicitacoesBruto.value.length
const parts = []
if (sessoes === 1) parts.push('1 sessão hoje')
@@ -648,11 +958,11 @@ const cadastros = computed(() =>
const cadastrosPendentes = computed(() => cadastros.value.length)
const recAlerta = computed(() => {
const daqui30 = new Date(); daqui30.setDate(daqui30.getDate() + 30)
const now = new Date(), daqui30 = new Date(); daqui30.setDate(now.getDate() + 30)
const alerts = []
for (const r of regraRecorrencias.value) {
const nome = (r._patientNome || '—').split(' ').slice(0, 2).join(' ')
if (r.end_date) { const ed = new Date(r.end_date + 'T00:00:00'); if (ed >= new Date() && ed <= daqui30) alerts.push({ id: r.id + '_end', nome, motivo: 'Encerramento próximo', tipo: 'feriado' }) }
if (r.end_date) { const ed = new Date(r.end_date + 'T00:00:00'); if (ed >= now && ed <= daqui30) alerts.push({ id: r.id + '_end', nome, motivo: 'Encerramento próximo', tipo: 'feriado' }) }
if (r.max_occurrences && r._sessionsCount !== undefined) {
const pct = (r._sessionsCount / r.max_occurrences) * 100
if (pct > 75) alerts.push({ id: r.id + '_limit', nome, motivo: 'Limite próximo', tipo: 'limite', sessoesUsadas: r._sessionsCount, totalSessoes: r.max_occurrences, progresso: Math.round(pct) })
@@ -662,12 +972,14 @@ const recAlerta = computed(() => {
})
const radarSemana = computed(() => {
const now = agora.value, dow = now.getDay(), iniSem = new Date(now)
iniSem.setDate(now.getDate() - dow); iniSem.setHours(0, 0, 0, 0)
const diasMap = _statsDoMes.value.diasSemanaMap
const dow = agora.value.getDay()
return DIAS_PT.map((dia, i) => {
const dayDate = new Date(iniSem); dayDate.setDate(iniSem.getDate() + i)
const evs = eventosDoMes.value.filter(ev => { if (!ev.inicio_em) return false; const d = new Date(ev.inicio_em); return d.getDate() === dayDate.getDate() && d.getMonth() === dayDate.getMonth() && d.getFullYear() === dayDate.getFullYear() })
const total = evs.length, presentes = evs.filter(ev => ev.status === 'realizado').length, faltas = evs.filter(ev => ev.status === 'faltou').length, reposicao = evs.filter(ev => ['reposicao','reposição'].includes(ev.status)).length
const evs = diasMap[i]
const total = evs.length
const presentes = evs.filter(ev => ev.status === 'realizado').length
const faltas = evs.filter(ev => ev.status === 'faltou').length
const reposicao = evs.filter(ev => ['reposicao','reposição'].includes(ev.status)).length
let status = 'ok'
if (faltas > 0 && faltas >= presentes) status = 'falta'
else if (reposicao > 0 && reposicao > presentes) status = 'repo'
@@ -691,15 +1003,16 @@ const hoursRange = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
const TL_START = 7, TL_END = 20, TL_SPAN = TL_END - TL_START
function toPercent (h, m) { return ((h + m / 60 - TL_START) / TL_SPAN) * 100 }
const timelineEvents = computed(() =>
eventosDoMes.value
.filter(ev => { if (!ev.inicio_em) return false; const d = new Date(ev.inicio_em); return d.getDate() === hoje && d.getMonth() === mesAtual && d.getFullYear() === anoAtual })
_statsDoMes.value.timelineLista
.slice()
.sort((a, b) => new Date(a.inicio_em) - new Date(b.inicio_em))
.map(ev => {
const item = buildEventoItem(ev)
const [hh, mm] = item.hora.split(':').map(Number)
const durMin = parseInt(item.dur) || 50
return { id: item.id, label: item.nome.split(' ')[0], tipo: item.tipo, status: item.status, tooltip: `${item.hora} · ${item.nome} · ${item.modalidade}`, badge: item.modalidade?.toLowerCase() === 'online' ? '📱' : '', style: { left: toPercent(hh, mm) + '%', width: Math.max((durMin / 60 / TL_SPAN) * 100, 4) + '%' } }
return { id: item.id, label: item.nome.split(' ')[0], tipo: item.tipo, status: item.status, tooltip: `${item.hora} · ${item.nome} · ${item.modalidade}`, badge: item.modalidade?.toLowerCase() === 'online' ? '📱' : '', bgColor: item.bgColor, txtColor: item.txtColor, style: { left: toPercent(hh, mm) + '%', width: Math.max((durMin / 60 / TL_SPAN) * 100, 4) + '%' } }
})
)
@@ -714,11 +1027,12 @@ async function load () {
if (!ownerId.value) return
await tenantStore.ensureLoaded()
const tid = tenantStore.activeTenantId || tenantStore.tenantId || null
await loadCommitments()
const mesInicio = new Date(anoAtual, mesAtual, 1, 0, 0, 0, 0).toISOString()
const mesFim = new Date(anoAtual, mesAtual + 1, 0, 23, 59, 59, 999).toISOString()
try {
const [eventosRes, recRes, solRes, cadRes] = await Promise.all([
(() => { let q = supabase.from('agenda_eventos').select('id, inicio_em, fim_em, status, modalidade, tipo, titulo, titulo_custom, patient_id, recurrence_id, patients(nome_completo)').eq('owner_id', ownerId.value).gte('inicio_em', mesInicio).lte('inicio_em', mesFim).order('inicio_em', { ascending: true }); if (tid) q = q.eq('tenant_id', tid); return q })(),
(() => { let q = supabase.from('agenda_eventos').select('id, inicio_em, fim_em, status, modalidade, tipo, titulo, titulo_custom, patient_id, recurrence_id, determined_commitment_id, patients(nome_completo), determined_commitments(bg_color, text_color)').eq('owner_id', ownerId.value).gte('inicio_em', mesInicio).lte('inicio_em', mesFim).order('inicio_em', { ascending: true }); if (tid) q = q.eq('tenant_id', tid); return q })(),
(() => { let q = supabase.from('recurrence_rules').select('id, patient_id, type, interval, weekdays, start_date, end_date, max_occurrences, start_time').eq('owner_id', ownerId.value).eq('status', 'ativo').order('start_date', { ascending: false }); if (tid) q = q.eq('tenant_id', tid); return q })(),
supabase.from('agendador_solicitacoes').select('id, paciente_nome, paciente_sobrenome, tipo, modalidade, data_solicitada, hora_solicitada').eq('owner_id', ownerId.value).eq('status', 'pendente').order('created_at', { ascending: false }).limit(10),
supabase.from('patient_intake_requests').select('id, nome_completo, status, created_at').eq('owner_id', ownerId.value).eq('status', 'new').order('created_at', { ascending: false }).limit(10),
@@ -780,15 +1094,4 @@ onMounted(async () => {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
/* Highlight pulse (acionado externamente via classe JS) */
@keyframes highlight-pulse {
0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.7), 0 0 0 0 rgba(99,102,241,0.4); }
40% { box-shadow: 0 0 0 8px rgba(99,102,241,0.3), 0 0 0 16px rgba(99,102,241,0.1); }
100% { box-shadow: 0 0 0 0 rgba(99,102,241,0), 0 0 0 0 rgba(99,102,241,0); }
}
.notif-card--highlight {
animation: highlight-pulse 1s ease-out 3;
border-color: rgba(99,102,241,0.6) !important;
}
</style>