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

Correcao Sidebar Classico e Rail, Correcao Layout, Ajuste de Breakpoint para Tailwind, Ajuste AppTopbar, Ajuste Menu PopOver, Recriado Paleta de Cores, Inserido algumas animações leves, Reajuste Cor items NOVOS da tabela, Drawer Ajuda Corrigido no Logout, Whatsapp, sms, email, recursos extras

Browse Source
This commit is contained in:
Leonardo
2026-03-24 21:26:58 -03:00
parent a89d1f5560
commit 53a4980396
453 changed files with 121427 additions and 174407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/agendador/AgendadorPreview.vue
+257 -190
View File
@@ -16,269 +16,336 @@
-->
<script setup>
import { computed } from 'vue'
import { computed } from 'vue';
const props = defineProps({
cfg: { type: Object, required: true }
})
cfg: { type: Object, required: true }
});
const cor = computed(() => props.cfg.cor_primaria || '#4b6bff')
const cor = computed(() => props.cfg.cor_primaria || '#4b6bff');
const corMix = computed(() => `color-mix(in srgb, ${cor.value} 15%, transparent)`)
const corMix = computed(() => `color-mix(in srgb, ${cor.value} 15%, transparent)`);
const tipos = [
{ key: 'primeira', label: 'Primeira Entrevista', sub: 'Novo paciente', icon: 'pi-star', bg: '#0284c7', shadow: 'rgba(2,132,199,.25)' },
{ key: 'retorno', label: 'Retorno', sub: 'Já sou paciente', icon: 'pi-refresh', bg: '#059669', shadow: 'rgba(5,150,105,.25)' },
{ key: 'reagendar',label: 'Reagendar', sub: 'Mudar data ou horário', icon: 'pi-calendar-plus', bg: '#7c3aed', shadow: 'rgba(124,58,237,.25)' },
]
{ key: 'primeira', label: 'Primeira Entrevista', sub: 'Novo paciente', icon: 'pi-star', bg: '#0284c7', shadow: 'rgba(2,132,199,.25)' },
{ key: 'retorno', label: 'Retorno', sub: 'Já sou paciente', icon: 'pi-refresh', bg: '#059669', shadow: 'rgba(5,150,105,.25)' },
{ key: 'reagendar', label: 'Reagendar', sub: 'Mudar data ou horário', icon: 'pi-calendar-plus', bg: '#7c3aed', shadow: 'rgba(124,58,237,.25)' }
];
const tiposAtivos = computed(() =>
tipos.filter(t => props.cfg.tipos_habilitados?.includes(t.key))
)
const tiposAtivos = computed(() => tipos.filter((t) => props.cfg.tipos_habilitados?.includes(t.key)));
const modalidadeLabel = computed(() => ({
presencial: 'Presencial',
online: 'Online (vídeo)',
ambos: 'Presencial · Online',
}[props.cfg.modalidade] || 'Presencial'))
const modalidadeLabel = computed(
() =>
({
presencial: 'Presencial',
online: 'Online (vídeo)',
ambos: 'Presencial · Online'
})[props.cfg.modalidade] || 'Presencial'
);
</script>
<template>
<!-- Frame de celular -->
<div class="phone-frame">
<div class="phone-notch" />
<!-- Frame de celular -->
<div class="phone-frame">
<div class="phone-notch" />
<!-- Root do agendador -->
<div class="agdp-root">
<!-- Root do agendador -->
<div class="agdp-root">
<!-- Card principal -->
<div class="agdp-card" :style="{ '--cp': cor }">
<!-- Hero -->
<div class="agdp-hero">
<!-- Blobs -->
<div class="agdp-blobs" aria-hidden="true">
<div class="agdp-blob agdp-blob--1" :style="{ background: `color-mix(in srgb, ${cor} 22%, transparent)` }" />
<div class="agdp-blob agdp-blob--2" :style="{ background: `color-mix(in srgb, ${cor} 12%, transparent)` }" />
</div>
<!-- Card principal -->
<div class="agdp-card" :style="{ '--cp': cor }">
<!-- Logo -->
<div class="agdp-avatar">
<img v-if="cfg.logomarca_url" :src="cfg.logomarca_url" alt="logo" class="w-full h-full object-cover" />
<i v-else class="pi pi-heart text-xl" :style="{ color: cor }" />
</div>
<!-- Hero -->
<div class="agdp-hero">
<!-- Blobs -->
<div class="agdp-blobs" aria-hidden="true">
<div class="agdp-blob agdp-blob--1" :style="{ background: `color-mix(in srgb, ${cor} 22%, transparent)` }" />
<div class="agdp-blob agdp-blob--2" :style="{ background: `color-mix(in srgb, ${cor} 12%, transparent)` }" />
</div>
<!-- Nome -->
<div class="agdp-name">
{{ cfg.nome_exibicao || 'Seu nome aqui' }}
</div>
<!-- Logo -->
<div class="agdp-avatar">
<img v-if="cfg.logomarca_url" :src="cfg.logomarca_url" alt="logo" class="w-full h-full object-cover" />
<i v-else class="pi pi-heart text-xl" :style="{ color: cor }" />
</div>
<!-- Endereço -->
<div v-if="cfg.botao_como_chegar_ativo && cfg.endereco" class="agdp-endereco">
<i class="pi pi-map-marker text-[0.6rem]" />
<span>{{ cfg.endereco }}</span>
</div>
<!-- Nome -->
<div class="agdp-name">
{{ cfg.nome_exibicao || 'Seu nome aqui' }}
</div>
<!-- Modalidade badge -->
<div class="agdp-badge" :style="{ background: corMix, color: cor }">
<i class="pi pi-video text-[0.55rem]" />
{{ modalidadeLabel }}
</div>
</div>
<!-- Endereço -->
<div v-if="cfg.botao_como_chegar_ativo && cfg.endereco" class="agdp-endereco">
<i class="pi pi-map-marker text-[0.6rem]" />
<span>{{ cfg.endereco }}</span>
</div>
<!-- Home section -->
<div class="agdp-section">
<!-- Mensagem de boas-vindas -->
<p class="agdp-welcome">
{{ cfg.mensagem_boas_vindas || 'Bem-vindo! Escolha o tipo de consulta para começar.' }}
</p>
<!-- Modalidade badge -->
<div class="agdp-badge" :style="{ background: corMix, color: cor }">
<i class="pi pi-video text-[0.55rem]" />
{{ modalidadeLabel }}
</div>
</div>
<!-- Como chegar -->
<div v-if="cfg.botao_como_chegar_ativo && cfg.endereco" class="agdp-como-chegar">
<i class="pi pi-directions text-[0.6rem]" />
<span :style="{ color: cor }">Como chegar</span>
</div>
<!-- Home section -->
<div class="agdp-section">
<div class="agdp-divider" />
<!-- Mensagem de boas-vindas -->
<p class="agdp-welcome">
{{ cfg.mensagem_boas_vindas || 'Bem-vindo! Escolha o tipo de consulta para começar.' }}
</p>
<!-- Botões de tipo -->
<div class="agdp-tipos">
<div v-for="t in tiposAtivos" :key="t.key" class="agdp-tipo-btn" :style="{ '--btn-bg': t.bg, '--btn-shadow': t.shadow }">
<div class="agdp-tipo-icon">
<i :class="`pi ${t.icon} text-[0.65rem]`" />
</div>
<div class="agdp-tipo-label">
<span class="agdp-tipo-main">{{ t.label }}</span>
<span class="agdp-tipo-sub">{{ t.sub }}</span>
</div>
<i class="pi pi-arrow-right text-[0.55rem] opacity-40 ml-auto" />
</div>
<!-- Como chegar -->
<div v-if="cfg.botao_como_chegar_ativo && cfg.endereco" class="agdp-como-chegar">
<i class="pi pi-directions text-[0.6rem]" />
<span :style="{ color: cor }">Como chegar</span>
</div>
<!-- Placeholder se nenhum tipo ativo -->
<div v-if="!tiposAtivos.length" class="agdp-no-tipos">Nenhum tipo de consulta habilitado</div>
</div>
<div class="agdp-divider" />
<!-- Botões de tipo -->
<div class="agdp-tipos">
<div
v-for="t in tiposAtivos"
:key="t.key"
class="agdp-tipo-btn"
:style="{ '--btn-bg': t.bg, '--btn-shadow': t.shadow }"
>
<div class="agdp-tipo-icon">
<i :class="`pi ${t.icon} text-[0.65rem]`" />
</div>
<div class="agdp-tipo-label">
<span class="agdp-tipo-main">{{ t.label }}</span>
<span class="agdp-tipo-sub">{{ t.sub }}</span>
</div>
<i class="pi pi-arrow-right text-[0.55rem] opacity-40 ml-auto" />
<!-- Powered -->
<p class="agdp-powered">Powered by <strong>Agência Psi</strong></p>
</div>
</div>
<!-- Placeholder se nenhum tipo ativo -->
<div v-if="!tiposAtivos.length" class="agdp-no-tipos">
Nenhum tipo de consulta habilitado
</div>
</div>
<!-- Powered -->
<p class="agdp-powered">Powered by <strong>Agência Psi</strong></p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
/* ── Frame de celular ──────────────────── */
.phone-frame {
position: relative;
width: 260px;
min-height: 500px;
margin: 0 auto;
border-radius: 2.5rem;
border: 8px solid #1e293b;
background: #1e293b;
box-shadow:
0 0 0 2px #334155,
0 32px 64px rgba(0,0,0,.35),
0 8px 24px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
width: 260px;
min-height: 500px;
margin: 0 auto;
border-radius: 2.5rem;
border: 8px solid #1e293b;
background: #1e293b;
box-shadow:
0 0 0 2px #334155,
0 32px 64px rgba(0, 0, 0, 0.35),
0 8px 24px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 10px;
background: #1e293b;
border-radius: 0 0 10px 10px;
z-index: 10;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 10px;
background: #1e293b;
border-radius: 0 0 10px 10px;
z-index: 10;
}
/* ── Root ──────────────────────────────── */
.agdp-root {
background: #f0f3fb;
min-height: 100%;
padding: 12px 10px 16px;
overflow-y: auto;
max-height: 560px;
background: #f0f3fb;
min-height: 100%;
padding: 12px 10px 16px;
overflow-y: auto;
max-height: 560px;
}
/* ── Card ──────────────────────────────── */
.agdp-card {
background: #fff;
border-radius: 1.25rem;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
overflow: hidden;
background: #fff;
border-radius: 1.25rem;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
/* ── Hero ──────────────────────────────── */
.agdp-hero {
position: relative;
overflow: hidden;
padding: 1.25rem 1rem 0.875rem;
background: #f7f8fd;
border-bottom: 1px solid rgba(0,0,0,.06);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
position: relative;
overflow: hidden;
padding: 1.25rem 1rem 0.875rem;
background: #f7f8fd;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.agdp-blobs {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.agdp-blob {
position: absolute;
border-radius: 50%;
filter: blur(40px);
}
.agdp-blob--1 {
width: 8rem;
height: 8rem;
top: -2rem;
right: -2rem;
}
.agdp-blob--2 {
width: 7rem;
height: 7rem;
bottom: -2rem;
left: -2rem;
}
.agdp-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.agdp-blob { position: absolute; border-radius: 50%; filter: blur(40px); }
.agdp-blob--1 { width: 8rem; height: 8rem; top: -2rem; right: -2rem; }
.agdp-blob--2 { width: 7rem; height: 7rem; bottom: -2rem; left: -2rem; }
.agdp-avatar {
position: relative; z-index: 1;
width: 52px; height: 52px;
border-radius: 50%;
border: 2.5px solid #fff;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
background: #f1f5f9;
overflow: hidden;
display: grid; place-items: center;
flex-shrink: 0;
position: relative;
z-index: 1;
width: 52px;
height: 52px;
border-radius: 50%;
border: 2.5px solid #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
background: #f1f5f9;
overflow: hidden;
display: grid;
place-items: center;
flex-shrink: 0;
}
.agdp-name {
position: relative; z-index: 1;
font-size: 0.82rem; font-weight: 800;
letter-spacing: -0.02em;
color: #111827;
text-align: center;
position: relative;
z-index: 1;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #111827;
text-align: center;
}
.agdp-endereco {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 3px;
font-size: 0.62rem; color: #6b7280;
text-align: center;
max-width: 90%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 3px;
font-size: 0.62rem;
color: #6b7280;
text-align: center;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.agdp-badge {
position: relative; z-index: 1;
font-size: 0.58rem; font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
display: flex; align-items: center; gap: 3px;
position: relative;
z-index: 1;
font-size: 0.58rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 3px;
}
/* ── Section ───────────────────────────── */
.agdp-section { padding: 0.875rem 0.875rem 0.75rem; }
.agdp-section {
padding: 0.875rem 0.875rem 0.75rem;
}
.agdp-welcome {
font-size: 0.68rem; color: #6b7280;
text-align: center; line-height: 1.5;
margin-bottom: 0.6rem;
font-size: 0.68rem;
color: #6b7280;
text-align: center;
line-height: 1.5;
margin-bottom: 0.6rem;
}
.agdp-como-chegar {
display: flex; align-items: center; justify-content: center; gap: 3px;
font-size: 0.62rem; font-weight: 700;
margin-bottom: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
font-size: 0.62rem;
font-weight: 700;
margin-bottom: 0.6rem;
}
.agdp-divider {
height: 1px; background: #e5e7eb; margin-bottom: 0.75rem;
height: 1px;
background: #e5e7eb;
margin-bottom: 0.75rem;
}
/* ── Tipos ─────────────────────────────── */
.agdp-tipos { display: flex; flex-direction: column; gap: 0.5rem; }
.agdp-tipos {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.agdp-tipo-btn {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: 0.75rem;
border: 1.5px solid #e5e7eb;
background: #fff;
cursor: default;
transition: border-color .15s, box-shadow .15s;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 0.75rem;
border: 1.5px solid #e5e7eb;
background: #fff;
cursor: default;
transition:
border-color 0.15s,
box-shadow 0.15s;
}
.agdp-tipo-icon {
width: 28px; height: 28px;
border-radius: 0.5rem;
display: grid; place-items: center;
background: color-mix(in srgb, var(--btn-bg, #6366f1) 15%, transparent);
color: var(--btn-bg, #6366f1);
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 0.5rem;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--btn-bg, #6366f1) 15%, transparent);
color: var(--btn-bg, #6366f1);
flex-shrink: 0;
}
.agdp-tipo-label {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.agdp-tipo-main {
font-size: 0.72rem;
font-weight: 700;
color: #111827;
}
.agdp-tipo-sub {
font-size: 0.58rem;
color: #9ca3af;
}
.agdp-tipo-label { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.agdp-tipo-main { font-size: 0.72rem; font-weight: 700; color: #111827; }
.agdp-tipo-sub { font-size: 0.58rem; color: #9ca3af; }
.agdp-no-tipos {
font-size: 0.68rem; color: #9ca3af;
text-align: center; padding: 1rem 0;
font-size: 0.68rem;
color: #9ca3af;
text-align: center;
padding: 1rem 0;
}
.agdp-powered {
text-align: center; font-size: 0.58rem; color: #9ca3af;
margin-top: 1rem;
text-align: center;
font-size: 0.58rem;
color: #9ca3af;
margin-top: 1rem;
}
.agdp-powered strong {
color: #6b7280;
font-weight: 700;
}
.agdp-powered strong { color: #6b7280; font-weight: 700; }
</style>