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

+ Menu Hover no Layout Rail, Twilio, Sms, Email, Templates, LNovo Layout Configurações

Browse Source
This commit is contained in:
Leonardo
2026-03-25 08:39:45 -03:00
parent 53a4980396
commit 3f1786c9bf
59 changed files with 2553 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/AppConfigurator.vue
+34 -3
View File
@@ -15,11 +15,22 @@
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, inject } from 'vue';
import { computed, inject, onMounted, onBeforeUnmount, ref } from 'vue';
import { useLayout } from '@/layout/composables/layout';
import { useConfiguratorBar } from '@/layout/composables/useConfiguratorBar';
import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options';
const { layoutConfig, isDarkTheme, changeMenuMode, setVariant } = useLayout();
const { layoutConfig, isDarkTheme, changeMenuMode, setVariant, setRailOpenMode } = useLayout();
const { open, close } = useConfiguratorBar();
// ── Fechar ao clicar fora ────────────────────────────────────
const panelEl = ref(null);
function onDocClick(e) {
if (!open.value) return;
if (!panelEl.value?.contains(e.target)) close();
}
onMounted(() => document.addEventListener('mousedown', onDocClick, true));
onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick, true));
// ✅ vem do AppTopbar (mesma instância)
const queuePatch = inject('queueUserSettingsPatch', null);
@@ -74,8 +85,11 @@ function updateColors(type, item) {
</script>
<template>
<Teleport to="body">
<div
class="config-panel hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
v-if="open"
ref="panelEl"
class="config-panel fixed bottom-18 left-18 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-bottom-left shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] z-2000"
>
<div class="flex flex-col gap-4">
<div>
@@ -122,6 +136,22 @@ function updateColors(type, item) {
<SelectButton v-model="menuModeModel" :options="menuModeOptions" :allowEmpty="false" optionLabel="label" optionValue="value" />
</div>
<!-- Abrir Menu: visível apenas no Layout Rail -->
<div v-show="layoutConfig.variant === 'rail'" class="flex flex-col gap-1">
<span class="text-sm text-muted-color font-semibold">Abrir Menu</span>
<div class="flex flex-col gap-1">
<button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.railOpenMode === 'hover' }" @click="setRailOpenMode('hover')">
<i :class="layoutConfig.railOpenMode === 'hover' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
<span class="layout-option__label">Mouse Hover</span>
<span v-if="layoutConfig.railOpenMode === 'hover'" class="layout-option__badge layout-option__badge--default">Padrão</span>
</button>
<button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.railOpenMode === 'click' }" @click="setRailOpenMode('click')">
<i :class="layoutConfig.railOpenMode === 'click' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
<span class="layout-option__label">Com Clique</span>
</button>
</div>
</div>
<div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Layout</span>
<div class="flex flex-col gap-1">
@@ -141,6 +171,7 @@ function updateColors(type, item) {
</div>
</div>
</div>
</Teleport>
</template>
<style scoped>
src/layout/AppLayout.vue
+1
View File
@@ -51,6 +51,7 @@ const route = useRoute();
const noticeStore = useNoticeStore();
const { layoutConfig, layoutState, hideMobileMenu, isDesktop, effectiveVariant, effectiveMenuMode } = useLayout();
const layoutArea = computed(() => route.meta?.area || null);
provide('layoutArea', layoutArea);
src/layout/AppMenuFooterPanel.vue
+8 -18
View File
@@ -303,24 +303,14 @@ defineExpose({ toggle });
<i :class="['pi', isDarkTheme ? 'pi-sun' : 'pi-moon', 'text-[0.72rem] opacity-40 group-hover:opacity-100 group-hover:text-[var(--primary-color)] transition-all duration-150']" />
{{ isDarkTheme ? 'Modo claro' : 'Modo escuro' }}
</button>
<div class="relative footer-theme-panel">
<button
type="button"
class="group flex items-center gap-2.5 w-full px-3.5 py-[7px] text-[1rem] font-medium text-[var(--text-color)] hover:bg-[var(--surface-ground)] hover:pl-4 transition-all duration-150"
v-styleclass="{
selector: '@next',
enterFromClass: 'hidden',
enterActiveClass: 'p-anchored-overlay-enter-active',
leaveToClass: 'hidden',
leaveActiveClass: 'p-anchored-overlay-leave-active',
hideOnOutsideClick: true
}"
>
<i class="pi pi-palette text-[0.72rem] opacity-40 group-hover:opacity-100 group-hover:text-[var(--primary-color)] transition-all duration-150" />
Cores do tema
</button>
<AppConfigurator />
</div>
<button
type="button"
class="group flex items-center gap-2.5 w-full px-3.5 py-[7px] text-[1rem] font-medium text-[var(--text-color)] hover:bg-[var(--surface-ground)] hover:pl-4 transition-all duration-150"
@click="toggleThemeBar"
>
<i class="pi pi-palette text-[0.72rem] opacity-40 group-hover:opacity-100 group-hover:text-[var(--primary-color)] transition-all duration-150" />
Cores do tema
</button>
</div>
<!-- Footer: Sair -->
src/layout/AppMenuItem.vue
+3 -3
View File
@@ -271,7 +271,7 @@ async function irLinkCadastro() {
<Popover v-if="item.quickCreate" ref="pop">
<div class="flex flex-col gap-0.5 min-w-[190px] py-0.5">
<button class="flex items-center gap-2.5 px-3 py-2 rounded-md cursor-pointer border-0 bg-transparent text-left w-full transition-colors duration-100 hover:bg-[var(--surface-ground,#f8fafc)]" @click="abrirCadastroRapido">
<div class="w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 bg-indigo-500/10 text-indigo-500">
<div class="w-7 h-7 rounded-md flex items-center justify-center shrink-0 bg-indigo-500/10 text-indigo-500">
<i class="pi pi-bolt text-xs" />
</div>
<div>
@@ -281,7 +281,7 @@ async function irLinkCadastro() {
</button>
<button class="flex items-center gap-2.5 px-3 py-2 rounded-md cursor-pointer border-0 bg-transparent text-left w-full transition-colors duration-100 hover:bg-[var(--surface-ground,#f8fafc)]" @click="irCadastroCompleto">
<div class="w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 bg-emerald-500/10 text-emerald-600">
<div class="w-7 h-7 rounded-md flex items-center justify-center shrink-0 bg-emerald-500/10 text-emerald-600">
<i class="pi pi-user-plus text-xs" />
</div>
<div>
@@ -293,7 +293,7 @@ async function irLinkCadastro() {
<div class="mx-3 my-1 border-t border-[var(--surface-border,#e2e8f0)]" />
<button class="flex items-center gap-2.5 px-3 py-2 rounded-md cursor-pointer border-0 bg-transparent text-left w-full transition-colors duration-100 hover:bg-[var(--surface-ground,#f8fafc)]" @click="irLinkCadastro">
<div class="w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 bg-sky-500/10 text-sky-600">
<div class="w-7 h-7 rounded-md flex items-center justify-center shrink-0 bg-sky-500/10 text-sky-600">
<i class="pi pi-link text-xs" />
</div>
<div>
src/layout/AppRail.vue
+38 -2
View File
@@ -25,7 +25,41 @@ import { sessionUser } from '@/app/session';
import AppMenuFooterPanel from './AppMenuFooterPanel.vue';
const menuStore = useMenuStore();
const { layoutState } = useLayout();
const { layoutState, layoutConfig, clearRailHoverClose, scheduleRailHoverClose } = useLayout();
// ── Hover com delay ──────────────────────────────────────────
let _hoverOpenTimer = null;
function onRailMouseLeave() {
if (layoutConfig.railOpenMode !== 'hover') return;
clearTimeout(_hoverOpenTimer);
scheduleRailHoverClose(200);
}
function onRailMouseEnter() {
if (layoutConfig.railOpenMode !== 'hover') return;
clearRailHoverClose();
}
function onSectionHover(section) {
if (layoutConfig.railOpenMode !== 'hover') return;
clearRailHoverClose();
clearTimeout(_hoverOpenTimer);
_hoverOpenTimer = setTimeout(() => {
layoutState.railSectionKey = section.key;
layoutState.railPanelOpen = true;
}, 120);
}
function onHomeHover() {
if (layoutConfig.railOpenMode !== 'hover') return;
clearRailHoverClose();
clearTimeout(_hoverOpenTimer);
_hoverOpenTimer = setTimeout(() => {
layoutState.railSectionKey = '__home__';
layoutState.railPanelOpen = true;
}, 120);
}
// ── Seções do rail (derivadas do model) ─────────────────────
const railSections = computed(() => {
@@ -98,7 +132,7 @@ function toggleUserMenu(e) {
</script>
<template>
<aside class="rail w-[60px] shrink-0 h-screen flex flex-col items-center border-r border-[var(--surface-border)] bg-[var(--surface-card)] z-50 select-none">
<aside class="rail w-[60px] shrink-0 h-screen flex flex-col items-center border-r border-[var(--surface-border)] bg-[var(--surface-card)] z-50 select-none" @mouseenter="onRailMouseEnter" @mouseleave="onRailMouseLeave">
<!-- ── Brand ──────────────────────────────────────────── -->
<div class="w-full h-14 shrink-0 grid place-items-center border-b border-[var(--surface-border)]">
<span class="text-[1.35rem] font-extrabold leading-none text-[var(--primary-color)] [text-shadow:0_0_20px_color-mix(in_srgb,var(--primary-color)_40%,transparent)]">Ψ</span>
@@ -113,6 +147,7 @@ function toggleUserMenu(e) {
v-tooltip.right="{ value: 'Início', showDelay: 0 }"
aria-label="Início"
@click="selectHome"
@mouseenter="onHomeHover"
>
<i class="pi pi-fw pi-home" />
</button>
@@ -125,6 +160,7 @@ function toggleUserMenu(e) {
v-tooltip.right="{ value: section.label, showDelay: 0 }"
:aria-label="section.label"
@click="selectSection(section)"
@mouseenter="onSectionHover(section)"
>
<i :class="section.icon" />
</button>
src/layout/AppRailPanel.vue
+31 -2
View File
@@ -28,7 +28,7 @@ import PatientCreatePopover from '@/components/ui/PatientCreatePopover.vue';
import ComponentCadastroRapido from '@/components/ComponentCadastroRapido.vue';
const menuStore = useMenuStore();
const { layoutState } = useLayout();
const { layoutState, layoutConfig, clearRailHoverClose, scheduleRailHoverClose } = useLayout();
const entitlements = useEntitlementsStore();
const menuBadges = useMenuBadges();
const router = useRouter();
@@ -107,6 +107,16 @@ function closePanel() {
layoutState.railPanelOpen = false;
}
// ── Hover: mantém painel aberto enquanto mouse está dentro ───
function onPanelMouseEnter() {
if (layoutConfig.railOpenMode !== 'hover') return;
clearRailHoverClose();
}
function onPanelMouseLeave() {
if (layoutConfig.railOpenMode !== 'hover') return;
scheduleRailHoverClose(200);
}
// ── QuickCreate (Pacientes) ───────────────────────────────
const createPopover = ref(null);
const quickDialog = ref(false);
@@ -301,7 +311,14 @@ async function goToResult(r) {
<template>
<Transition name="panel-slide">
<aside v-if="layoutState.railPanelOpen" class="w-[260px] shrink-0 h-screen flex flex-col border-r border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden" aria-label="Menu lateral">
<aside
v-if="layoutState.railPanelOpen"
class="w-[260px] shrink-0 h-screen flex flex-col border-r border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden"
:class="{ 'rp-panel--hover': layoutConfig.railOpenMode === 'hover' }"
aria-label="Menu lateral"
@mouseenter="onPanelMouseEnter"
@mouseleave="onPanelMouseLeave"
>
<!-- Header -->
<div class="h-14 shrink-0 flex items-center justify-between px-4 border-b border-[var(--surface-border)]">
<span class="text-[0.9rem] font-bold tracking-tight text-[var(--text-color)]">
@@ -483,6 +500,18 @@ async function goToResult(r) {
</template>
<style scoped>
/* ── Hover mode: painel flutua sobre o conteúdo (não empurra) ──
Reserva o espaço da barra de ícones (60px) e do topbar (56px),
igual ao comportamento do .layout-sidebar no layout clássico. */
.rp-panel--hover {
position: fixed !important;
top: calc(56px + var(--notice-banner-height, 0px)) !important;
left: 60px !important;
height: calc(100vh - 56px - var(--notice-banner-height, 0px)) !important;
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06) !important;
z-index: 999;
}
.panel-slide-enter-active,
.panel-slide-leave-active {
transition:
src/layout/AppThemeBar.vue
+30 -2
View File
@@ -21,7 +21,7 @@ import { useConfiguratorBar } from '@/layout/composables/useConfiguratorBar';
import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options';
import { useUserSettingsPersistence } from '@/composables/useUserSettingsPersistence';
const { layoutConfig, isDarkTheme, changeMenuMode, setVariant, layoutState, isMobile, effectiveVariant, effectiveMenuMode } = useLayout();
const { layoutConfig, isDarkTheme, changeMenuMode, setVariant, setRailOpenMode, layoutState, isMobile, effectiveVariant, effectiveMenuMode, railPanelPushesLayout } = useLayout();
const { close } = useConfiguratorBar();
const { init: initSettings, queuePatch } = useUserSettingsPersistence();
@@ -35,7 +35,7 @@ onMounted(() => initSettings());
const leftOffset = computed(() => {
if (isMobile.value) return '0px';
if (effectiveVariant.value === 'rail') {
const panelW = layoutState.railPanelOpen ? 260 : 0;
const panelW = railPanelPushesLayout.value ? 260 : 0;
return `${60 + panelW}px`;
}
// Clássico
@@ -151,6 +151,34 @@ function handleSetVariant(v) {
</div>
</template>
<!-- ── Abrir Menu (somente layout rail) ─────────── -->
<template v-if="effectiveVariant === 'rail'">
<div class="theme-bar__divider" />
<div class="theme-bar__section">
<span class="theme-bar__label">Abrir Menu</span>
<div class="flex gap-2">
<button
type="button"
class="variant-btn"
:class="{ 'variant-btn--active': layoutConfig.railOpenMode === 'hover' }"
@click="setRailOpenMode('hover')"
>
<i :class="layoutConfig.railOpenMode === 'hover' ? 'pi pi-check-circle' : 'pi pi-circle'" />
Hover
</button>
<button
type="button"
class="variant-btn"
:class="{ 'variant-btn--active': layoutConfig.railOpenMode === 'click' }"
@click="setRailOpenMode('click')"
>
<i :class="layoutConfig.railOpenMode === 'click' ? 'pi pi-check-circle' : 'pi pi-circle'" />
Clique
</button>
</div>
</div>
</template>
<div class="theme-bar__divider" />
<!-- ── Layout variant ────────────────────────────── -->
src/layout/ConfiguracoesPage.vue
+163 -84
View File
@@ -17,11 +17,25 @@
<script setup>
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';
const route = useRoute();
const router = useRouter();
const showMenu = ref(false);
const asideOpen = ref(false);
// ── Layout-aware left position (igual ao TherapistDashboard) ──────────────
const { effectiveVariant, layoutState, layoutConfig, isMobile, railPanelPushesLayout } = useLayout();
const isMobileLayout = computed(() => isMobile.value);
const asideLeft = computed(() => {
if (isMobileLayout.value) return undefined;
if (effectiveVariant.value !== 'rail') {
const isStaticActive = layoutConfig.menuMode === 'static' && !layoutState.staticMenuInactive;
return isStaticActive ? '20rem' : '0';
}
return railPanelPushesLayout.value ? 'calc(60px + 260px)' : '60px';
});
// ── Hero sticky ────────────────────────────────────────────
const headerEl = ref(null);
@@ -118,6 +132,14 @@ const secoes = [
to: '/configuracoes/whatsapp',
tags: ['WhatsApp', 'Mensagens', 'Notificações']
},
{
key: 'whatsapp-twilio',
label: 'WhatsApp Oficial',
desc: 'Número WhatsApp Business exclusivo via Twilio.',
icon: 'pi pi-whatsapp',
to: '/configuracoes/whatsapp-twilio',
tags: ['WhatsApp', 'Twilio', 'Número Exclusivo']
},
{
key: 'sms',
label: 'SMS',
@@ -147,6 +169,7 @@ const activeSecao = computed(() => secoes.find((s) => s.to === activeTo.value));
function ir(to) {
if (!to) return;
if (route.path !== to) router.push(to);
asideOpen.value = false;
}
onMounted(() => {
@@ -170,104 +193,160 @@ onBeforeUnmount(() => {
</script>
<template>
<!-- Sentinel -->
<div ref="headerSentinelRef" class="h-px" />
<div class="flex min-h-screen bg-[var(--surface-ground)]">
<!-- Overlay mobile -->
<div v-if="asideOpen" class="fixed inset-0 bg-black/40 backdrop-blur-sm z-[39] xl:hidden" @click="asideOpen = false" />
<!-- 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" />
<!-- Aside drawer -->
<aside
class="cfg-aside-drawer flex flex-col overflow-y-auto shrink-0 bg-[var(--surface-card)] border-r border-[var(--surface-border)]"
:class="asideOpen ? 'translate-x-0 visible' : 'max-xl:-translate-x-full max-xl:invisible'"
:style="{ left: asideLeft }"
>
<!-- Cabeçalho da aside -->
<div class="flex items-center gap-2 px-4 py-3.5 border-b border-[var(--surface-border)] shrink-0">
<div class="grid place-items-center w-8 h-8 rounded-md bg-indigo-500/[0.12] text-[var(--p-primary-500,#6366f1)] shrink-0">
<i class="pi pi-cog text-sm" />
</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>
<span class="text-sm font-bold text-[var(--text-color)] tracking-tight">Configurações</span>
</div>
<!-- Label seções -->
<div class="flex items-center gap-1.5 px-4 pt-3 pb-1.5 text-[0.68rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-60">
<i class="pi pi-list text-[0.65rem]" />
<span>Seções</span>
</div>
<!-- Itens de navegação -->
<TransitionGroup name="menu" tag="div" class="flex flex-col gap-0 px-2 pb-3">
<button
v-for="(s, i) in showMenu ? secoes : []"
:key="s.key"
:style="{ transitionDelay: `${i * 40}ms` }"
class="flex items-center gap-2.5 px-3 py-2.5 rounded-md cursor-pointer w-full text-left transition-colors duration-[120ms] hover:bg-[var(--surface-hover)]"
:class="activeTo === s.to ? 'cfg-nav-item--active' : ''"
@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] shrink-0 w-4 text-center"
/>
<div class="flex-1 min-w-0 flex flex-col gap-px">
<span class="text-[0.88rem] font-semibold truncate" :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)]' : 'text-[var(--text-color)]'">{{ s.label }}</span>
<span class="text-[0.75rem] text-[var(--text-color-secondary)] opacity-70 truncate">{{ s.desc }}</span>
</div>
<i class="pi pi-chevron-right text-[0.6rem] shrink-0" :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)] opacity-60' : 'text-[var(--text-color-secondary)] opacity-30'" />
</button>
</TransitionGroup>
</aside>
<!-- Área principal -->
<div class="flex-1 min-w-0 xl:pl-[272px]">
<!-- 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 shrink-0">
<div class="grid place-items-center w-9 h-9 rounded-md 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">
<!-- Título: Configurações · Seção -->
<div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)] flex items-center gap-1.5 flex-wrap">
<span>Configurações</span>
<template v-if="activeSecao">
<span class="text-[var(--text-color-secondary)] opacity-40 font-normal">·</span>
<span>{{ activeSecao.label }}</span>
</template>
</div>
<!-- Subtítulo: ícone + descrição da seção -->
<div class="text-xs text-[var(--text-color-secondary)] flex items-center gap-1 mt-px">
<template v-if="activeSecao">
<i :class="activeSecao.icon" class="opacity-50 shrink-0" />
<span>{{ activeSecao.desc }}</span>
</template>
<span v-else class="opacity-60">Configurações gerais do sistema</span>
</div>
</div>
</div>
<!-- Ações -->
<div class="flex items-center gap-2 ml-auto shrink-0">
<!-- Toggle aside — mobile/tablet apenas -->
<button
class="xl:hidden inline-flex items-center gap-1.5 h-9 px-3 rounded-full border border-[var(--surface-border)] bg-transparent text-xs font-semibold text-[var(--text-color)] cursor-pointer hover:bg-[var(--surface-hover)] transition-colors duration-150"
@click="asideOpen = !asideOpen"
>
<i class="pi pi-bars text-[0.75rem]" />
<span class="hidden sm:inline">Menu desta seção</span>
</button>
<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>
<!-- 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()" />
<!-- Conteúdo da seção -->
<div class="px-3 md:px-4 pb-5">
<router-view />
</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);
/* Aside drawer — comportamento responsivo */
.cfg-aside-drawer {
position: fixed;
top: calc(56px + var(--notice-banner-height, 0px));
left: 0;
height: calc(100dvh - 56px - var(--notice-banner-height, 0px));
width: min(272px, 85vw);
z-index: 40;
overflow-y: auto;
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.25s;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1280px) {
.cfg-aside-drawer {
position: fixed;
top: calc(56px + var(--notice-banner-height, 0px));
height: calc(100vh - 56px - var(--notice-banner-height, 0px));
width: 272px;
transform: none;
visibility: visible;
box-shadow: none;
z-index: auto;
overflow-y: auto;
}
}
.cfg-nav-item--active {
background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-card));
background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-card));
}
/* TransitionGroup menu */
.menu-enter-active {
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.menu-enter-from {
opacity: 0;
transform: translateX(-6px);
}
</style>
src/layout/composables/layout.js
+45 -1
View File
@@ -28,13 +28,22 @@ function _loadVariant() {
return 'rail';
}
function _loadRailOpenMode() {
try {
const v = localStorage.getItem('rail_open_mode');
if (v === 'click' || v === 'hover') return v;
} catch {}
return 'hover';
}
const layoutConfig = reactive({
preset: 'Aura',
primary: 'emerald',
surface: null,
darkTheme: false,
menuMode: 'static',
variant: _loadVariant() // 'classic' | 'rail'
variant: _loadVariant(), // 'classic' | 'rail'
railOpenMode: _loadRailOpenMode() // 'click' | 'hover'
});
const layoutState = reactive({
@@ -84,6 +93,9 @@ if (typeof window !== 'undefined') {
window.addEventListener('resize', _onResize, { passive: true });
}
// ── Timer compartilhado para hover do rail ───────────────────
let _railHoverCloseTimer = null;
export function useLayout() {
// ✅ garante coerência sempre que alguém usar useLayout()
syncDarkFromDomOnce();
@@ -188,9 +200,37 @@ export function useLayout() {
if (fromUser) layoutState._variantDirty = true;
};
const setRailOpenMode = (mode) => {
if (mode !== 'click' && mode !== 'hover') return;
layoutConfig.railOpenMode = mode;
try {
localStorage.setItem('rail_open_mode', mode);
} catch {}
};
const clearRailHoverClose = () => {
if (_railHoverCloseTimer !== null) {
clearTimeout(_railHoverCloseTimer);
_railHoverCloseTimer = null;
}
};
const scheduleRailHoverClose = (delay = 200) => {
clearRailHoverClose();
_railHoverCloseTimer = setTimeout(() => {
layoutState.railPanelOpen = false;
_railHoverCloseTimer = null;
}, delay);
};
const isDarkTheme = computed(() => layoutConfig.darkTheme);
const hasOpenOverlay = computed(() => layoutState.overlayMenuActive);
// true apenas quando o painel está aberto E empurra o layout (não no modo hover)
const railPanelPushesLayout = computed(() =>
layoutState.railPanelOpen && layoutConfig.railOpenMode !== 'hover'
);
// ── Em mobile (≤ xl / 1280px) sempre usa o layout clássico, ───────
// independente de layoutConfig.variant
const isMobile = computed(() => _isMobileRef.value);
@@ -210,6 +250,10 @@ export function useLayout() {
closeMenuOnNavigate,
changeMenuMode,
setVariant,
setRailOpenMode,
railPanelPushesLayout,
clearRailHoverClose,
scheduleRailHoverClose,
isDesktop,
isRailMobile,
isMobile,
src/layout/configuracoes/BloqueiosPage.vue
-62
View File
@@ -302,21 +302,6 @@ const loading = computed(() => loadingF.value || loadingB.value);
<ConfirmDialog />
<div class="flex flex-col gap-3">
<!-- Subheader degradê -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-ban" /></div>
<div class="min-w-0 flex-1">
<div class="cfg-subheader__title">Bloqueios</div>
<div class="cfg-subheader__sub">Feriados e períodos em que não é possível agendar com pacientes</div>
</div>
<!-- Nav de ano -->
<div class="flex items-center gap-1 shrink-0 relative z-10">
<Button icon="pi pi-chevron-left" text rounded size="small" severity="secondary" @click="anoAnterior" />
<span class="font-bold text-sm w-12 text-center text-[var(--primary-color)]">{{ ano }}</span>
<Button icon="pi pi-chevron-right" text rounded size="small" severity="secondary" @click="anoProximo" />
</div>
</div>
<!-- Stats + ações -->
<div class="flex flex-wrap items-center gap-2">
<div class="blk-stat blk-stat--blue">
@@ -524,53 +509,6 @@ const loading = computed(() => loadingF.value || loadingB.value);
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
color: var(--primary-color, #6366f1);
letter-spacing: -0.01em;
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
/* ── Stats ────────────────────────────────────────── */
.blk-stat {
display: flex;
src/layout/configuracoes/ConfiguracoesAgendaPage.vue
-9
View File
@@ -939,15 +939,6 @@ const jornadaEndDate = computed({
<div v-if="!loading" class="flex flex-col xl:flex-row gap-4">
<!-- ══ COLUNA ESQUERDA: CARDS ══════════════════════════════ -->
<div class="anim-child [--delay:0ms] flex flex-col gap-3 xl:w-[58%]">
<!-- Subheader -->
<div class="cfg-subheader">
<i class="pi pi-calendar w-10 h-10 rounded-md cfg-subheader__icon" />
<div class="min-w-0">
<div class="cfg-subheader__title">Agenda</div>
<div class="cfg-subheader__sub">Horários semanais, duração e intervalo padrão</div>
</div>
</div>
<!-- ── CARD 1: JORNADA ─────────────────────────────────── -->
<div class="cfg-card" :class="{ 'cfg-card--open': expandedCard === 'jornada' }">
<!-- Cabeçalho clicável -->
src/layout/configuracoes/ConfiguracoesAgendadorPage.vue
-65
View File
@@ -550,15 +550,6 @@ onMounted(load);
</template>
<template v-else>
<!-- Subheader (fora das colunas — ocupa a largura toda) -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-calendar-clock" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Agendador Online</div>
<div class="cfg-subheader__sub">Personalize a aparência, fluxo e comportamento do seu agendador público</div>
</div>
</div>
<!-- ── 2 COLUNAS: seções (esq) + preview (dir) ───────────── -->
<div class="flex flex-col xl:flex-row gap-4 items-start">
<!-- Coluna esquerda: todos os cards -->
@@ -1134,62 +1125,6 @@ onMounted(load);
background: color-mix(in srgb, var(--primary-color, #6366f1) 5%, transparent);
}
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 1rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card status (sem accordion) ─────────────────── */
.agd-card {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesConveniosPage.vue
-78
View File
@@ -248,28 +248,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-id-card" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Convênios</div>
<div class="cfg-subheader__sub">Convênios e planos de saúde que você atende</div>
</div>
<div class="cfg-subheader__actions">
<Button
label="Novo convênio"
icon="pi pi-plus"
size="small"
:disabled="pageLoading || addingNew"
class="rounded-full"
@click="
addingNew = true;
cancelEdit();
"
/>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div class="cfg-wrap">
@@ -474,62 +452,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesDescontosPage.vue
-78
View File
@@ -190,28 +190,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-percentage" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Descontos por Paciente</div>
<div class="cfg-subheader__sub">Descontos recorrentes aplicados automaticamente por paciente</div>
</div>
<div class="cfg-subheader__actions">
<Button
label="Novo desconto"
icon="pi pi-plus"
size="small"
:disabled="pageLoading || addingNew"
class="rounded-full"
@click="
addingNew = true;
cancelEdit();
"
/>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div class="cfg-wrap">
@@ -396,62 +374,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesEmailTemplatesPage.vue
-67
View File
@@ -323,18 +323,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-envelope" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Templates de E-mail</div>
<div class="cfg-subheader__sub">Personalize os e-mails enviados aos seus pacientes</div>
</div>
<div class="cfg-subheader__actions">
<Button label="Personalizar +" icon="pi pi-palette" size="small" class="rounded-full" @click="openLayoutDlg" />
</div>
</div>
<!-- Filtro -->
<div class="flex gap-2 flex-wrap">
<Button v-for="opt in DOMAIN_OPTIONS" :key="String(opt.value)" :label="opt.label" size="small" :severity="filterDomain === opt.value ? 'primary' : 'secondary'" :outlined="filterDomain !== opt.value" @click="filterDomain = opt.value" />
@@ -711,61 +699,6 @@ onMounted(async () => {
</template>
<style scoped>
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Layout cards ───────────────────────────────────────── */
.layout-card {
flex: 1;
src/layout/configuracoes/ConfiguracoesExcecoesFinanceirasPage.vue
-65
View File
@@ -162,15 +162,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-exclamation-triangle" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Exceções Financeiras</div>
<div class="cfg-subheader__sub">Defina o que cobrar em cancelamentos, faltas e situações excepcionais</div>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div v-for="n in 3" :key="n" class="cfg-wrap">
@@ -267,62 +258,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesMinhaEmpresaPage.vue
-69
View File
@@ -298,19 +298,6 @@ onMounted(load);
<template>
<ConfirmDialog />
<div class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-building" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Minha Empresa</div>
<div class="cfg-subheader__sub">Dados da empresa, logomarca e presença digital</div>
</div>
<div class="cfg-subheader__actions">
<Button label="Exemplo" icon="pi pi-magic-wand" size="small" severity="secondary" outlined class="rounded-full" @click="preencherExemplo" />
<Button label="Salvar" icon="pi pi-check" size="small" class="rounded-full" :loading="saving" @click="save" />
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="loading">
<div class="flex gap-4 items-start">
@@ -581,62 +568,6 @@ onMounted(load);
</template>
<style scoped>
/* ── Subheader ─────────────────────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Layout colunas ────────────────────────────────────────── */
.preview-col {
width: 40%;
src/layout/configuracoes/ConfiguracoesPagamentoPage.vue
-69
View File
@@ -217,19 +217,6 @@ onMounted(load);
</template>
<div v-else class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-wallet" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Pagamento</div>
<div class="cfg-subheader__sub">Formas de pagamento aceitas: Pix, depósito, dinheiro, cartão e convênio</div>
</div>
<div class="cfg-subheader__actions">
<Button size="small" icon="pi pi-arrows-v" label="Expandir" severity="secondary" outlined class="rounded-full" @click="expandAll" />
<Button size="small" icon="pi pi-minus" label="Contrair" severity="secondary" outlined class="rounded-full" @click="collapseAll" />
</div>
</div>
<!-- Pix ──────────────────────────────────────────────────── -->
<div class="rounded-[6px] border bg-[var(--surface-card)] overflow-hidden" :class="cfg.pix_ativo ? 'border-green-300' : 'border-[var(--surface-border)]'">
<!-- Header -->
@@ -493,62 +480,6 @@ onMounted(load);
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue
-78
View File
@@ -158,28 +158,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-tag" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Precificação</div>
<div class="cfg-subheader__sub">Valor padrão da sessão e preços por tipo de compromisso</div>
</div>
<div class="cfg-subheader__actions">
<Button
label="Novo serviço"
icon="pi pi-plus"
size="small"
:disabled="pageLoading || addingNew"
class="rounded-full"
@click="
addingNew = true;
cancelEdit();
"
/>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div class="cfg-wrap">
@@ -336,62 +314,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
+460
View File
@@ -0,0 +1,460 @@
<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Arquivo: src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
| Data: 2026
|--------------------------------------------------------------------------
| Painel self-service — WhatsApp via Twilio para o tenant.
| A clínica/terapeuta ativa, testa e monitora seu WhatsApp sem suporte.
|
| Estados:
| not_provisioned — nunca foi ativado → botão "Ativar WhatsApp"
| connected — ativo e funcionando
| suspended — suspenso pelo admin SaaS
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useTwilioWhatsappStore } from '@/stores/twilioWhatsappStore';
import { useTenantStore } from '@/stores/tenantStore';
const toast = useToast();
const confirm = useConfirm();
const store = useTwilioWhatsappStore();
const tenant = useTenantStore();
// ── Computed ───────────────────────────────────────────────────────────────
const tenantId = computed(() => tenant.tenantId);
const statusConfig = computed(() => {
switch (store.myChannelStatus) {
case 'not_provisioned':
return {
icon: 'pi-whatsapp',
color: 'text-gray-400',
bg: 'bg-gray-100',
label: 'WhatsApp não ativado',
sub: 'Ative para enviar lembretes automáticos aos seus pacientes.',
severity: 'secondary',
};
case 'connected':
return {
icon: 'pi-check-circle',
color: 'text-green-600',
bg: 'bg-green-50',
label: 'WhatsApp ativo',
sub: `Enviando de ${store.myChannel?.twilio_phone_number ?? '—'}`,
severity: 'success',
};
case 'suspended':
return {
icon: 'pi-pause-circle',
color: 'text-orange-500',
bg: 'bg-orange-50',
label: 'WhatsApp suspenso',
sub: 'Sua conta está temporariamente suspensa. Entre em contato com o suporte.',
severity: 'warn',
};
default:
return {
icon: 'pi-exclamation-circle',
color: 'text-red-500',
bg: 'bg-red-50',
label: 'Erro de conexão',
sub: 'Verifique as configurações ou entre em contato com o suporte.',
severity: 'danger',
};
}
});
// ── Ativação ───────────────────────────────────────────────────────────────
const activateDialog = ref(false);
const activateForm = ref({ display_name: '' });
function openActivateDialog() {
activateForm.value.display_name = '';
activateDialog.value = true;
}
async function doActivate() {
try {
const result = await store.provisionMyChannel(tenantId.value, {
display_name: activateForm.value.display_name || undefined,
});
toast.add({
severity: 'success',
summary: 'WhatsApp ativado!',
detail: result.message,
life: 6000,
});
activateDialog.value = false;
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro ao ativar', detail: e.message, life: 6000 });
}
}
// ── Teste de envio ─────────────────────────────────────────────────────────
const testToNumber = ref('');
const testMessage = ref('Olá! Esta é uma mensagem de teste do AgenciaPsi. ✓');
async function doTest() {
if (!testToNumber.value) {
toast.add({ severity: 'warn', summary: 'Informe o número', life: 3000 });
return;
}
if (!store.myChannel?.id) return;
try {
const result = await store.testSendMessage(store.myChannel.id, testToNumber.value, testMessage.value);
toast.add({
severity: 'success',
summary: 'Mensagem enviada!',
detail: `SID: ${result.message_sid} — Status: ${result.status}`,
life: 5000,
});
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro no envio', detail: e.message, life: 5000 });
}
}
// ── Logs ───────────────────────────────────────────────────────────────────
async function loadLogs() {
if (!tenantId.value) return;
try {
await store.loadMyLogs(tenantId.value);
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro ao carregar histórico', detail: e.message, life: 4000 });
}
}
// ── Helpers ────────────────────────────────────────────────────────────────
function logStatusTag(status) {
switch (status) {
case 'sent': return { label: 'Enviado', severity: 'info' };
case 'delivered': return { label: 'Entregue', severity: 'success' };
case 'read': return { label: 'Lido', severity: 'success' };
case 'failed': return { label: 'Falhou', severity: 'danger' };
case 'bounced': return { label: 'Bounced', severity: 'danger' };
default: return { label: status, severity: 'secondary' };
}
}
function fmtDateTime(dt) {
if (!dt) return '—';
const d = new Date(dt);
return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' })
+ ' ' + d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}
function fmtPhone(p) {
if (!p) return '—';
return p.replace('whatsapp:', '');
}
// ── Tabs ───────────────────────────────────────────────────────────────────
const activeTab = ref(0);
function onTabChange(val) {
activeTab.value = val;
if (val === 1 && !store.messageLogs.length) loadLogs();
}
// ── Init ───────────────────────────────────────────────────────────────────
onMounted(async () => {
if (tenantId.value) {
await store.loadMyChannel(tenantId.value);
}
});
</script>
<template>
<div class="flex flex-col gap-4 p-4">
<!-- Loading inicial ───────────────────────────────────────────── -->
<div v-if="store.loadingMyChannel" class="flex justify-center py-12">
<ProgressSpinner style="width: 40px; height: 40px" />
</div>
<template v-else>
<!-- Card de status ─────────────────────────────────────────── -->
<div class="status-card" :class="`status-card--${statusConfig.severity}`">
<div class="flex items-start gap-4 flex-wrap">
<div :class="['status-icon', statusConfig.bg, statusConfig.color]">
<i :class="`pi ${statusConfig.icon} text-xl`" />
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<h3 class="status-title">{{ statusConfig.label }}</h3>
<Tag :value="statusConfig.label" :severity="statusConfig.severity" class="text-xs" />
</div>
<p class="status-sub">{{ statusConfig.sub }}</p>
</div>
<!-- Ação principal -->
<div class="flex gap-2 items-center">
<!-- Não provisionado: botão ativar -->
<Button
v-if="store.myChannelStatus === 'not_provisioned'"
label="Ativar WhatsApp"
icon="pi pi-whatsapp"
:loading="store.provisioning"
@click="openActivateDialog"
/>
<!-- Ativo: mostrar número -->
<template v-if="store.myChannelStatus === 'connected'">
<div class="flex flex-col items-end gap-1">
<div class="flex items-center gap-2">
<i class="pi pi-phone text-green-600 text-sm" />
<span class="font-mono font-bold text-sm">{{ store.myChannel?.twilio_phone_number }}</span>
</div>
<span class="text-xs text-(--text-color-secondary)">Seu número WhatsApp exclusivo</span>
</div>
</template>
<!-- Suspenso: contatar suporte -->
<Button
v-if="store.myChannelStatus === 'suspended'"
label="Contatar suporte"
icon="pi pi-envelope"
severity="secondary"
outlined
tag="a"
href="mailto:suporte@agenciapsi.com.br"
/>
</div>
</div>
</div>
<!-- Tabs (só aparecem quando provisionado) ──────────────────── -->
<template v-if="store.myChannelStatus !== 'not_provisioned'">
<Tabs :value="activeTab" @update:value="onTabChange">
<TabList>
<Tab :value="0"><i class="pi pi-cog mr-2" />Configurações</Tab>
<Tab :value="1"><i class="pi pi-list mr-2" />Histórico</Tab>
</TabList>
<TabPanels>
<!-- ══ ABA 1 — Configurações ══════════════════════ -->
<TabPanel :value="0">
<div class="flex flex-col gap-4 pt-3">
<!-- Informações do canal ──────────────────── -->
<div class="info-card">
<div class="info-card__header">
<i class="pi pi-info-circle opacity-60 text-sm" />
<span class="text-sm font-semibold">Informações da conta</span>
</div>
<div class="info-card__body">
<div class="info-row">
<span class="info-label">Número WhatsApp</span>
<span class="font-mono font-bold">{{ store.myChannel?.twilio_phone_number ?? '—' }}</span>
</div>
<div class="info-row">
<span class="info-label">Provedor</span>
<span>Twilio WhatsApp Business</span>
</div>
<div class="info-row">
<span class="info-label">Subconta ID</span>
<span class="font-mono text-xs text-(--text-color-secondary)">
{{ store.myChannel?.twilio_subaccount_sid?.slice(0, 20) ?? '—' }}…
</span>
</div>
<div class="info-row">
<span class="info-label">Ativado em</span>
<span>{{ fmtDateTime(store.myChannel?.provisioned_at) }}</span>
</div>
<div class="info-row">
<span class="info-label">Preço por mensagem</span>
<span class="font-semibold">
{{ new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(store.myChannel?.price_per_message_brl ?? 0) }}
</span>
</div>
</div>
</div>
<!-- Envio de teste ────────────────────────── -->
<div v-if="store.myChannelStatus === 'connected'" class="info-card">
<div class="info-card__header">
<i class="pi pi-send opacity-60 text-sm" />
<span class="text-sm font-semibold">Envio de teste</span>
</div>
<div class="info-card__body">
<p class="text-sm text-(--text-color-secondary) m-0 mb-3">
Envie uma mensagem de teste para confirmar que seu WhatsApp está funcionando.
</p>
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-1.5">
<label class="field-label">Número destino (E.164)</label>
<InputText v-model="testToNumber" placeholder="+5511999990000" class="w-full max-w-xs" />
</div>
<div class="flex flex-col gap-1.5">
<label class="field-label">Mensagem</label>
<Textarea v-model="testMessage" rows="2" class="w-full max-w-lg" auto-resize />
</div>
<div>
<Button
label="Enviar teste"
icon="pi pi-send"
size="small"
:loading="store.testingSend"
:disabled="!testToNumber || store.testingSend"
@click="doTest"
/>
</div>
</div>
</div>
</div>
<!-- Informações de uso ────────────────────── -->
<Message severity="info" :closable="false">
<template #messageicon><i class="pi pi-whatsapp" /></template>
<div class="text-sm">
<strong>Como funciona:</strong> Seu número WhatsApp Business exclusivo é usado para enviar
lembretes de sessão, confirmações e outras notificações automáticas aos seus pacientes.
Os envios são cobrados por mensagem conforme seu plano.
</div>
</Message>
</div>
</TabPanel>
<!-- ══ ABA 2 — Histórico ═══════════════════════════ -->
<TabPanel :value="1">
<div class="flex flex-col gap-3 pt-3">
<div class="flex items-center gap-2">
<span class="text-sm text-(--text-color-secondary)">
Últimas {{ store.messageLogs.length }} mensagens
</span>
<Button icon="pi pi-refresh" size="small" severity="secondary" outlined :loading="store.loadingLogs" class="ml-auto" @click="loadLogs" />
</div>
<DataTable :value="store.messageLogs" :loading="store.loadingLogs" striped-rows responsive-layout="scroll" class="text-sm">
<Column header="Destinatário" style="min-width: 140px">
<template #body="{ data }">
<span class="font-mono text-sm">{{ fmtPhone(data.recipient_address) }}</span>
</template>
</Column>
<Column header="Status" style="min-width: 100px">
<template #body="{ data }">
<Tag :value="logStatusTag(data.status).label" :severity="logStatusTag(data.status).severity" class="text-[0.7rem]" />
</template>
</Column>
<Column header="Enviado em" style="min-width: 140px">
<template #body="{ data }">
<span class="text-xs">{{ fmtDateTime(data.sent_at || data.created_at) }}</span>
</template>
</Column>
<Column header="Entregue" style="min-width: 140px">
<template #body="{ data }">
<span class="text-xs">{{ fmtDateTime(data.delivered_at) }}</span>
</template>
</Column>
<Column header="Motivo de falha" style="min-width: 180px">
<template #body="{ data }">
<span v-if="data.failure_reason" class="text-xs text-red-500">{{ data.failure_reason }}</span>
<span v-else class="text-xs text-(--text-color-secondary)">—</span>
</template>
</Column>
<template #empty>
<div class="text-center py-8 text-sm text-(--text-color-secondary)">
Nenhuma mensagem enviada ainda.
</div>
</template>
</DataTable>
</div>
</TabPanel>
</TabPanels>
</Tabs>
</template>
</template>
<!-- Dialog: Ativar WhatsApp ──────────────────────────────────── -->
<Dialog
v-model:visible="activateDialog"
header="Ativar WhatsApp"
modal
:style="{ width: '440px', maxWidth: '96vw' }"
:draggable="false"
>
<div class="flex flex-col gap-4 py-2">
<Message severity="success" :closable="false">
<template #messageicon><i class="pi pi-whatsapp" /></template>
<div class="text-sm">
Você receberá um <strong>número WhatsApp exclusivo</strong> para sua clínica.
Suas mensagens automáticas aos pacientes serão enviadas por este número.
</div>
</Message>
<div class="field-group">
<label class="field-label">Nome de exibição (opcional)</label>
<InputText
v-model="activateForm.display_name"
placeholder="Ex: Clínica Bem Estar"
class="w-full"
/>
<small class="text-(--text-color-secondary)">Identificação interna do seu canal.</small>
</div>
<div class="border border-(--surface-border) rounded-lg p-3 bg-(--surface-ground)">
<div class="text-xs font-semibold mb-2">O que está incluído:</div>
<ul class="text-sm text-(--text-color-secondary) flex flex-col gap-1 m-0 pl-4">
<li>Número WhatsApp Business exclusivo</li>
<li>Envio de lembretes de sessão automáticos</li>
<li>Confirmações e cancelamentos por WhatsApp</li>
<li>Histórico completo de mensagens</li>
</ul>
</div>
</div>
<template #footer>
<Button label="Cancelar" text @click="activateDialog = false" />
<Button
label="Ativar agora"
icon="pi pi-check"
:loading="store.provisioning"
:disabled="store.provisioning"
@click="doActivate"
/>
</template>
</Dialog>
<Toast />
<ConfirmDialog />
</div>
</template>
<style scoped>
.status-card {
padding: 1.25rem; border-radius: 8px;
border: 1px solid var(--surface-border);
background: var(--surface-card);
}
.status-card--success { border-color: color-mix(in srgb, #22c55e 30%, transparent); }
.status-card--warn { border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
.status-card--danger { border-color: color-mix(in srgb, #ef4444 30%, transparent); }
.status-icon {
display: grid; place-items: center;
width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0;
}
.status-title { font-size: 1rem; font-weight: 700; margin: 0; }
.status-sub { font-size: 0.8rem; color: var(--text-color-secondary); margin: 4px 0 0; }
.info-card {
border: 1px solid var(--surface-border); border-radius: 8px; overflow: hidden;
}
.info-card__header {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.625rem 1rem; background: var(--surface-ground);
}
.info-card__body { padding: 0.875rem 1rem; }
.info-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; padding: 0.375rem 0;
border-bottom: 1px solid var(--surface-border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 0.75rem; color: var(--text-color-secondary); flex-shrink: 0; }
.field-group { display: flex; flex-direction: column; gap: 0.375rem; }
.field-label { font-size: 0.75rem; font-weight: 600; }
</style>
src/layout/configuracoes/ConfiguracoesWhatsappPage.vue
-66
View File
@@ -474,18 +474,6 @@ onBeforeUnmount(() => {
<template>
<div class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-comments" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">WhatsApp</div>
<div class="cfg-subheader__sub">Configure a integração e os templates de mensagem do WhatsApp</div>
</div>
<div class="cfg-subheader__actions">
<Tag :value="connectionTag.label" :severity="connectionTag.severity" class="text-xs" />
</div>
</div>
<!-- Abas -->
<Tabs :value="activeTab" @update:value="activeTab = $event">
<TabList>
@@ -730,58 +718,4 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
</style>