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

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

Browse Source
This commit is contained in:
Leonardo
2026-03-30 14:08:19 -03:00
parent 0658e2e9bf
commit d088a89fb7
112 changed files with 115867 additions and 5266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/pages/account/ProfilePage.vue
+228 -19
View File
@@ -15,22 +15,22 @@
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { applyThemeEngine } from '@/theme/theme.options';
import { useLayout as _useLayout } from '@/layout/composables/layout';
import { applyThemeEngine } from '@/theme/theme.options';
const { setVariant } = _useLayout();
import Textarea from 'primevue/textarea';
import InputMask from 'primevue/inputmask';
import Checkbox from 'primevue/checkbox';
import InputMask from 'primevue/inputmask';
import Select from 'primevue/select';
import Textarea from 'primevue/textarea';
import { supabase } from '@/lib/supabase/client';
import { useLayout } from '@/layout/composables/layout';
import { supabase } from '@/lib/supabase/client';
const router = useRouter();
const toast = useToast();
@@ -50,6 +50,25 @@ const AVATAR_BUCKET = 'avatars';
const saving = ref(false);
const dirty = ref(false);
const fieldErrors = reactive({
full_name: '',
nickname: '',
phone: ''
});
function clearErr(field) {
fieldErrors[field] = '';
}
function validateRequired() {
const nameParts = form.full_name?.trim().split(/\s+/).filter(Boolean) || [];
fieldErrors.full_name = nameParts.length === 0 ? 'Nome completo é obrigatório.' : nameParts.length < 2 ? 'Informe seu nome e sobrenome.' : '';
fieldErrors.nickname = form.nickname?.trim() ? '' : 'Nome de exibição é obrigatório.';
const digits = form.phone?.replace(/[^0-9]/g, '') || '';
fieldErrors.phone = digits.length >= 10 ? '' : 'WhatsApp é obrigatório.';
return !fieldErrors.full_name && !fieldErrors.nickname && !fieldErrors.phone;
}
const openPassword = ref(false);
const sendingPassword = ref(false);
const passwordSent = ref(false);
@@ -140,6 +159,59 @@ function markDirty() {
dirty.value = true;
}
/* ----------------------------
Gamificação / Progresso
----------------------------- */
const profileFields = computed(() => [
{ key: 'full_name', filled: !!form.full_name?.trim(), icon: 'pi pi-user', text: 'Preencha seu nome completo' },
{ key: 'nickname', filled: !!form.nickname?.trim(), icon: 'pi pi-comment', text: 'Escolha um nome de exibição' },
{ key: 'work_description', filled: !!form.work_description?.trim(), icon: 'pi pi-briefcase', text: 'Descreva seu trabalho' },
{ key: 'avatar', filled: !!(form.avatar_url?.trim() || ui.avatarFile), icon: 'pi pi-image', text: 'Adicione uma foto' },
{ key: 'bio', filled: !!form.bio?.trim(), icon: 'pi pi-pencil', text: 'Complete sua bio' },
{ key: 'phone', filled: !!form.phone?.trim()?.replace(/[^0-9]/g, ''), icon: 'pi pi-whatsapp', text: 'Informe seu WhatsApp' },
{ key: 'social', filled: !!(form.social_instagram || form.social_x || form.site_url || form.social_youtube || form.social_facebook || customSocials.value.length), icon: 'pi pi-share-alt', text: 'Adicione uma rede social' }
]);
const profileProgress = computed(() => {
const filled = profileFields.value.filter((f) => f.filled).length;
return Math.round((filled / profileFields.value.length) * 100);
});
const progressSuggestions = computed(() => profileFields.value.filter((f) => !f.filled));
const progressColor = computed(() => {
if (profileProgress.value >= 80) return '#10b981';
if (profileProgress.value >= 50) return '#f59e0b';
return '#ef4444';
});
const gameLevels = [
{ min: 0, max: 14, label: 'Iniciante', icon: '🌱', color: '#94a3b8' },
{ min: 15, max: 28, label: 'Aprendiz', icon: '🌿', color: '#60a5fa' },
{ min: 29, max: 42, label: 'Praticante', icon: '⚡', color: '#f59e0b' },
{ min: 43, max: 57, label: 'Avançado', icon: '🔥', color: '#f97316' },
{ min: 58, max: 71, label: 'Expert', icon: '💎', color: '#a78bfa' },
{ min: 72, max: 85, label: 'Mestre', icon: '🏆', color: '#10b981' },
{ min: 86, max: 100, label: 'Lendário', icon: '🌟', color: '#eab308' }
];
const currentLevel = computed(() => gameLevels.find((l) => profileProgress.value >= l.min && profileProgress.value <= l.max) || gameLevels[0]);
const nextLevel = computed(() => {
const i = gameLevels.indexOf(currentLevel.value);
return i < gameLevels.length - 1 ? gameLevels[i + 1] : null;
});
const xpToNext = computed(() => (nextLevel.value ? nextLevel.value.min - profileProgress.value : 0));
const badges = computed(() => [
{ key: 'name', earned: !!form.full_name?.trim(), icon: '👤', label: 'Identificado' },
{ key: 'nick', earned: !!form.nickname?.trim(), icon: '✏️', label: 'Apelido' },
{ key: 'work', earned: !!form.work_description?.trim(), icon: '💼', label: 'Profissional' },
{ key: 'photo', earned: !!(form.avatar_url?.trim() || ui.avatarFile), icon: '📷', label: 'Fotogênico' },
{ key: 'bio', earned: !!form.bio?.trim(), icon: '📝', label: 'Eloquente' },
{ key: 'phone', earned: !!form.phone?.trim()?.replace(/[^0-9]/g, ''), icon: '📱', label: 'Conectado' },
{ key: 'social', earned: !!(form.social_instagram || form.social_x || form.site_url || form.social_youtube || form.social_facebook || customSocials.value.length), icon: '🌐', label: 'Social' }
]);
/* ----------------------------
Cores e preset
----------------------------- */
@@ -500,6 +572,12 @@ async function loadProfile() {
}
async function saveAll() {
if (!validateRequired()) {
toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Preencha nome completo, nome de exibição e WhatsApp antes de salvar.', life: 4000 });
// Rola até a seção Conta para o usuário ver os erros
document.getElementById('conta')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
saving.value = true;
try {
if (ui.avatarFile) {
@@ -677,11 +755,11 @@ onBeforeUnmount(() => {
<template>
<!-- ── HERO ────────────────────────────────────────────── -->
<div ref="heroSentinelRef" class="h-px" />
<div ref="heroSentinelRef" class="p-2" />
<div
ref="heroEl"
class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-2"
:style="{ top: 'var(--layout-sticky-top, 56px)' }"
:style="{ top: 'var(--layout-sticky-top, 55px)' }"
:class="{ 'rounded-tl-none rounded-tr-none': heroStuck }"
>
<div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
@@ -717,11 +795,66 @@ onBeforeUnmount(() => {
</div>
</div>
<!-- ── PROGRESSO / GAMIFICAÇÃO ──────────────────────────── -->
<div class="px-3 md:px-4 mb-4">
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-4 space-y-4">
<!-- Nível + barra -->
<div class="flex items-center gap-4">
<div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-2xl border" :style="{ backgroundColor: currentLevel.color + '18', borderColor: currentLevel.color + '40' }" v-tooltip.top="currentLevel.label">
{{ currentLevel.icon }}
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-1.5">
<div class="flex items-center gap-2">
<span class="text-[1rem] font-bold text-[var(--text-color)]">{{ currentLevel.label }}</span>
<span class="text-xs font-semibold px-2 py-0.5 rounded-full" :style="{ backgroundColor: currentLevel.color + '20', color: currentLevel.color }">Nível {{ gameLevels.indexOf(currentLevel) + 1 }}</span>
</div>
<span class="text-xs font-bold" :style="{ color: progressColor }">{{ profileProgress }}%</span>
</div>
<div class="w-full h-2.5 rounded-full bg-[var(--surface-ground)] overflow-hidden">
<div class="h-full rounded-full transition-all duration-700 ease-out relative overflow-hidden" :style="{ width: profileProgress + '%', backgroundColor: currentLevel.color }">
<div class="absolute inset-0 prof-shimmer" />
</div>
</div>
<p class="text-xs text-[var(--text-color-secondary)] mt-1.5 m-0">
<span v-if="nextLevel">
<span class="font-medium" :style="{ color: nextLevel.color }">{{ xpToNext }}% até {{ nextLevel.label }} {{ nextLevel.icon }}</span>
— preencha mais dados para evoluir
</span>
<span v-else class="font-semibold" style="color: #10b981">🎉 Perfil 100% completo!</span>
</p>
</div>
</div>
<!-- Badges -->
<div>
<p class="text-xs font-semibold text-[var(--text-color-secondary)] uppercase tracking-wider mb-2">Conquistas</p>
<div class="flex gap-2 flex-wrap">
<div v-for="badge in badges" :key="badge.key" class="prof-badge" :class="badge.earned ? 'prof-badge--earned' : 'prof-badge--locked'" v-tooltip.top="badge.earned ? badge.label : 'Bloqueado — ' + badge.label">
<span class="text-base leading-none">{{ badge.icon }}</span>
<span class="text-xs font-medium leading-none">{{ badge.label }}</span>
</div>
</div>
</div>
<!-- Dicas do que falta -->
<div v-if="progressSuggestions.length" class="flex flex-wrap gap-2 pt-1 border-t border-[var(--surface-border)]">
<span v-for="(tip, i) in progressSuggestions" :key="i" class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full bg-[var(--surface-ground)] text-[var(--text-color-secondary)] border border-[var(--surface-border)]">
<i :class="tip.icon" class="text-[0.65rem]" />
{{ tip.text }}
</span>
</div>
</div>
</div>
<!-- ── GRID ─────────────────────────────────────────────── -->
<div class="px-3 md:px-4 pb-8 grid grid-cols-12 gap-4 md:gap-5">
<!-- Sidebar -->
<div class="col-span-12 lg:col-span-3">
<div class="sticky top-4 rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5 flex flex-col gap-3">
<div class="sticky rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5 flex flex-col gap-3" :style="{ top: 'var(--layout-sticky-top, 140px)' }">
<!-- Mini user -->
<div class="flex items-center gap-3 pb-1">
<div class="relative shrink-0">
@@ -788,19 +921,41 @@ onBeforeUnmount(() => {
<!-- Nome completo -->
<div class="col-span-12 md:col-span-6">
<FloatLabel variant="on">
<InputText id="prof_name" v-model="form.full_name" class="w-full" autocomplete="name" @input="markDirty" />
<label for="prof_name">Nome completo</label>
<InputText
id="prof_name"
v-model="form.full_name"
class="w-full"
autocomplete="name"
:invalid="!!fieldErrors.full_name"
@input="
markDirty();
clearErr('full_name');
"
/>
<label for="prof_name">Nome completo <span class="text-red-400">*</span></label>
</FloatLabel>
<div class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Aparece no menu, cabeçalhos e registros.</div>
<Message v-if="fieldErrors.full_name" severity="error" size="small" variant="simple" class="mt-1">{{ fieldErrors.full_name }}</Message>
<div v-else class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Aparece no menu, cabeçalhos e registros.</div>
</div>
<!-- Como a Agência PSI deveria te chamar? -->
<div class="col-span-12 md:col-span-6">
<FloatLabel variant="on">
<InputText id="prof_nickname" v-model="form.nickname" class="w-full" autocomplete="nickname" @input="markDirty" />
<label for="prof_nickname">Como a Agência PSI deveria te chamar?</label>
<InputText
id="prof_nickname"
v-model="form.nickname"
class="w-full"
autocomplete="nickname"
:invalid="!!fieldErrors.nickname"
@input="
markDirty();
clearErr('nickname');
"
/>
<label for="prof_nickname">Como a Agência PSI deveria te chamar? <span class="text-red-400">*</span></label>
</FloatLabel>
<div class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Apelido ou nome preferido para comunicação.</div>
<Message v-if="fieldErrors.nickname" severity="error" size="small" variant="simple" class="mt-1">{{ fieldErrors.nickname }}</Message>
<div v-else class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Apelido ou nome preferido para comunicação.</div>
</div>
<!-- O que melhor descreve seu trabalho? -->
@@ -847,10 +1002,25 @@ onBeforeUnmount(() => {
<!-- Whatsapp -->
<div class="col-span-12 md:col-span-6">
<FloatLabel variant="on">
<InputMask id="prof_phone" v-model="form.phone" class="w-full" mask="(99) 99999-9999" :autoClear="false" @update:modelValue="markDirty" />
<label for="prof_phone">Whatsapp</label>
<InputMask
id="prof_phone"
v-model="form.phone"
class="w-full"
mask="(99) 99999-9999"
:autoClear="false"
:invalid="!!fieldErrors.phone"
@update:modelValue="
markDirty();
clearErr('phone');
"
/>
<label for="prof_phone">WhatsApp <span class="text-red-400">*</span></label>
</FloatLabel>
<div class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Opcional.</div>
<Message v-if="fieldErrors.phone" severity="error" size="small" variant="simple" class="mt-1">{{ fieldErrors.phone }}</Message>
<div v-else class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)] flex items-center gap-1.5">
<i class="pi pi-lock text-[0.7rem] opacity-60" />
<span>Usado apenas para notificações importantes.</span>
</div>
</div>
</div>
</div>
@@ -1333,6 +1503,45 @@ onBeforeUnmount(() => {
</template>
<style scoped>
/* ─── Shimmer na barra de progresso ─────────────────────── */
@keyframes prof-shimmer-anim {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(250%);
}
}
.prof-shimmer {
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
width: 55%;
animation: prof-shimmer-anim 2.2s ease-in-out infinite;
}
/* ─── Badges de conquista ────────────────────────────────── */
.prof-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.3rem 0.65rem;
border-radius: 9999px;
border: 1px solid;
transition: all 0.18s ease;
cursor: default;
}
.prof-badge--earned {
background-color: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.3);
color: #10b981;
}
.prof-badge--locked {
background-color: var(--surface-ground);
border-color: var(--surface-border);
color: var(--text-color-secondary);
filter: grayscale(1);
opacity: 0.45;
}
/* ─── Sidebar nav ───────────────────────────────────────── */
.nav-link {
color: var(--text-color-secondary);