Leonardo
274 lines
11 KiB
Vue
274 lines
11 KiB
Vue
<!--
|
|
|--------------------------------------------------------------------------
|
|
| Agência PSI
|
|
|--------------------------------------------------------------------------
|
|
| Criado e desenvolvido por Leonardo Nohama
|
|
|
|
|
| Tecnologia aplicada à escuta.
|
|
| Estrutura para o cuidado.
|
|
|
|
|
| Arquivo: src/layout/ConfiguracoesPage.vue
|
|
| Data: 2026
|
|
| Local: São Carlos/SP — Brasil
|
|
|--------------------------------------------------------------------------
|
|
| © 2026 — Todos os direitos reservados
|
|
|--------------------------------------------------------------------------
|
|
-->
|
|
<script setup>
|
|
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const showMenu = ref(false);
|
|
|
|
// ── Hero sticky ────────────────────────────────────────────
|
|
const headerEl = ref(null);
|
|
const headerSentinelRef = ref(null);
|
|
const headerStuck = ref(false);
|
|
let _observer = null;
|
|
|
|
const secoes = [
|
|
{
|
|
key: 'agenda',
|
|
label: 'Agenda',
|
|
desc: 'Horários semanais, exceções, duração e intervalo padrão.',
|
|
icon: 'pi pi-calendar',
|
|
to: '/configuracoes/agenda',
|
|
tags: ['Horários', 'Exceções', 'Duração']
|
|
},
|
|
{
|
|
key: 'bloqueios',
|
|
label: 'Bloqueios',
|
|
desc: 'Feriados nacionais, municipais e períodos bloqueados.',
|
|
icon: 'pi pi-ban',
|
|
to: '/configuracoes/bloqueios',
|
|
tags: ['Feriados', 'Períodos', 'Recorrentes']
|
|
},
|
|
{
|
|
key: 'agendador',
|
|
label: 'Agendador Online',
|
|
desc: 'Link público para pacientes solicitarem horários.',
|
|
icon: 'pi pi-calendar-clock',
|
|
to: '/configuracoes/agendador',
|
|
tags: ['PRO', 'Link', 'Pix', 'LGPD']
|
|
},
|
|
{
|
|
key: 'pagamento',
|
|
label: 'Pagamento',
|
|
desc: 'Formas de pagamento: Pix, depósito, dinheiro, cartão, convênio.',
|
|
icon: 'pi pi-wallet',
|
|
to: '/configuracoes/pagamento',
|
|
tags: ['Pix', 'TED', 'Cartão', 'Convênio']
|
|
},
|
|
{
|
|
key: 'precificacao',
|
|
label: 'Precificação',
|
|
desc: 'Valor padrão da sessão e preços por tipo de compromisso.',
|
|
icon: 'pi pi-tag',
|
|
to: '/configuracoes/precificacao',
|
|
tags: ['Valores', 'Sessão', 'Compromisso']
|
|
},
|
|
{
|
|
key: 'descontos',
|
|
label: 'Descontos por Paciente',
|
|
desc: 'Descontos recorrentes aplicados automaticamente.',
|
|
icon: 'pi pi-percentage',
|
|
to: '/configuracoes/descontos',
|
|
tags: ['Desconto', 'Paciente', 'Automático']
|
|
},
|
|
{
|
|
key: 'excecoes-financeiras',
|
|
label: 'Exceções Financeiras',
|
|
desc: 'O que cobrar em faltas, cancelamentos e situações excepcionais.',
|
|
icon: 'pi pi-exclamation-triangle',
|
|
to: '/configuracoes/excecoes-financeiras',
|
|
tags: ['Falta', 'Cancelamento', 'Cobrança']
|
|
},
|
|
{
|
|
key: 'convenios',
|
|
label: 'Convênios',
|
|
desc: 'Cadastre os convênios que você atende e seus valores.',
|
|
icon: 'pi pi-id-card',
|
|
to: '/configuracoes/convenios',
|
|
tags: ['Convênio', 'Plano de Saúde', 'Tabela']
|
|
},
|
|
{
|
|
key: 'empresa',
|
|
label: 'Minha Empresa',
|
|
desc: 'CNPJ, endereço, logomarca e redes sociais.',
|
|
icon: 'pi pi-building',
|
|
to: '/configuracoes/empresa',
|
|
tags: ['CNPJ', 'Endereço', 'Logo']
|
|
},
|
|
{
|
|
key: 'email-templates',
|
|
label: 'Templates de E-mail',
|
|
desc: 'Personalize os e-mails enviados aos pacientes.',
|
|
icon: 'pi pi-envelope',
|
|
to: '/configuracoes/email-templates',
|
|
tags: ['E-mail', 'Notificações', 'Personalizar']
|
|
},
|
|
{
|
|
key: 'whatsapp',
|
|
label: 'WhatsApp',
|
|
desc: 'Configure a integração WhatsApp e personalize as mensagens.',
|
|
icon: 'pi pi-whatsapp',
|
|
to: '/configuracoes/whatsapp',
|
|
tags: ['WhatsApp', 'Mensagens', 'Notificações']
|
|
},
|
|
{
|
|
key: 'sms',
|
|
label: 'SMS',
|
|
desc: 'Gerencie créditos SMS e personalize as mensagens enviadas.',
|
|
icon: 'pi pi-comment',
|
|
to: '/configuracoes/sms',
|
|
tags: ['SMS', 'Créditos', 'Mensagens']
|
|
},
|
|
{
|
|
key: 'recursos-extras',
|
|
label: 'Recursos Extras',
|
|
desc: 'Amplíe as funcionalidades com recursos adicionais e créditos.',
|
|
icon: 'pi pi-box',
|
|
to: '/configuracoes/recursos-extras',
|
|
tags: ['Add-ons', 'Créditos', 'Extra']
|
|
}
|
|
];
|
|
|
|
const activeTo = computed(() => {
|
|
const p = route.path || '';
|
|
const hit = [...secoes].sort((a, b) => b.to.length - a.to.length).find((s) => p === s.to || p.startsWith(s.to + '/'));
|
|
return hit?.to || '/configuracoes/agenda';
|
|
});
|
|
|
|
const activeSecao = computed(() => secoes.find((s) => s.to === activeTo.value));
|
|
|
|
function ir(to) {
|
|
if (!to) return;
|
|
if (route.path !== to) router.push(to);
|
|
}
|
|
|
|
onMounted(() => {
|
|
requestAnimationFrame(() => {
|
|
showMenu.value = true;
|
|
});
|
|
|
|
const rootMargin = `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px`;
|
|
_observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
headerStuck.value = !entry.isIntersecting;
|
|
},
|
|
{ threshold: 0, rootMargin }
|
|
);
|
|
if (headerSentinelRef.value) _observer.observe(headerSentinelRef.value);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
_observer?.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Sentinel -->
|
|
<div ref="headerSentinelRef" class="h-px" />
|
|
|
|
<!-- Hero compacto -->
|
|
<div
|
|
ref="headerEl"
|
|
class="sticky top-[var(--layout-sticky-top,56px)] z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] px-3 py-2.5 mx-3 md:mx-4 mb-3"
|
|
:class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
|
|
>
|
|
<!-- Blobs decorativos -->
|
|
<div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
|
|
<div class="absolute w-64 h-64 -top-16 -right-8 rounded-full blur-[60px] bg-emerald-300/10" />
|
|
<div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-indigo-500/[0.09]" />
|
|
</div>
|
|
|
|
<div class="relative z-[1] flex items-center gap-3">
|
|
<!-- Brand -->
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<div class="grid place-items-center w-9 h-9 rounded-md flex-shrink-0 bg-indigo-500/[0.12] text-[var(--p-primary-500,#6366f1)]">
|
|
<i class="pi pi-cog text-base" />
|
|
</div>
|
|
<div class="min-w-0 lg:block">
|
|
<div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Configurações</div>
|
|
<div class="text-xs text-[var(--text-color-secondary)]">
|
|
<span v-if="activeSecao"> <i :class="activeSecao.icon" class="text-xs mr-1 opacity-60" />{{ activeSecao.label }} </span>
|
|
<span v-else>Configurações gerais</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ações -->
|
|
<div class="flex items-center gap-2 ml-auto">
|
|
<Button icon="pi pi-arrow-left" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Voltar'" @click="router.back()" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards de seção (stats row) -->
|
|
<div class="flex flex-wrap gap-2 px-3 md:px-4 mb-3">
|
|
<button
|
|
v-for="s in secoes"
|
|
:key="s.key"
|
|
class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] cursor-pointer whitespace-nowrap transition-[border-color,background,box-shadow] duration-150 hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)]"
|
|
:class="activeTo === s.to ? 'cfg-sec-card--active' : 'hover:border-indigo-500/40'"
|
|
@click="ir(s.to)"
|
|
>
|
|
<i :class="[s.icon, activeTo === s.to ? 'text-[var(--primary-color,#6366f1)]' : 'text-[var(--text-color-secondary)] opacity-75']" class="text-[0.78rem]" />
|
|
<span class="text-[0.78rem] font-semibold" :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)]' : 'text-[var(--text-color)]'">{{ s.label }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Layout: sidebar + conteúdo -->
|
|
<div class="flex flex-col xl:flex-row gap-3 px-3 md:px-4 pb-5 items-start">
|
|
<!-- Sidebar (oculto no mobile) -->
|
|
<div class="hidden xl:flex flex-col gap-1 w-[300px] shrink-0" style="position: sticky; top: calc(var(--layout-sticky-top, 56px) + 58px); align-self: flex-start">
|
|
<div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] overflow-hidden">
|
|
<!-- Cabeçalho -->
|
|
<div class="flex items-center gap-1.5 px-3.5 py-2.5 border-b border-[var(--surface-border)] text-[0.7rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65">
|
|
<i class="pi pi-cog" />
|
|
<span>Seções</span>
|
|
</div>
|
|
|
|
<!-- Itens -->
|
|
<TransitionGroup name="menu" tag="div" class="flex flex-col gap-0.5">
|
|
<button
|
|
v-for="(s, i) in showMenu ? secoes : []"
|
|
:key="s.key"
|
|
:style="{ transitionDelay: `${i * 50}ms` }"
|
|
class="flex items-center gap-2.5 px-3.5 py-2.5 border-b last:border-b-0 bg-transparent cursor-pointer w-full text-left transition-colors duration-[120ms] hover:bg-[var(--surface-hover)]"
|
|
:class="activeTo === s.to ? 'cfg-nav-item--active border border-[var(--primary-color,#6366f1)] last:border-b-1 last:rounded-bl-[6px] last:rounded-br-[6px]' : ''"
|
|
@click="ir(s.to)"
|
|
>
|
|
<i :class="[s.icon, activeTo === s.to ? 'text-[var(--primary-color,#6366f1)] opacity-100' : 'text-[var(--text-color-secondary)] opacity-60']" class="text-[0.85rem] flex-shrink-0 w-4 text-center" />
|
|
<div class="flex-1 min-w-0 flex flex-col gap-px">
|
|
<span class="text-[0.90rem] font-semibold truncate" :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)]' : 'text-[var(--text-color)]'">{{ s.label }}</span>
|
|
<span class="text-[0.88rem] text-[var(--text-color-secondary)] opacity-70">{{ s.desc }}</span>
|
|
</div>
|
|
<i class="pi pi-chevron-right text-[0.6rem] flex-shrink-0" :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)] opacity-60' : 'text-[var(--text-color-secondary)] opacity-30'" />
|
|
</button>
|
|
</TransitionGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conteúdo da seção -->
|
|
<div class="flex-1 min-w-0 w-full">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cfg-sec-card--active {
|
|
border-color: var(--primary-color, #6366f1);
|
|
background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-card));
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
|
|
}
|
|
|
|
.cfg-nav-item--active {
|
|
background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-card));
|
|
}
|
|
</style>
|