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

MelissaPaciente Fase 7: Tabs Documentos + Conversas (KPIs + embed componentes existentes)

Browse Source 
Duas tabs entregues numa sessao — sao mais leves porque reusam
DocumentsListPage e PatientConversationsTab existentes (testados em
producao no PatientProntuario legacy) com KPIs Melissa por cima.

EXTENSAO src/features/patients/utils/patientFormatters.js
- fmtSize(bytes): legivel B/KB/MB/GB
- DOC_TYPE_LABEL map: atestado/receita/laudo/encaminhamento/termo/etc
- chConvLabel(c): whatsapp -> WhatsApp / sms -> SMS / email -> E-mail

EXTENSAO src/features/patients/composables/usePatientDocuments.js
- topType computed: { tipo, count, label } do tipo mais comum
- pendentes computed: count status_revisao === 'pendente'
- sizeTotalFormatted computed: fmtSize(totalBytes)

EXTENSAO src/features/patients/composables/usePatientMessages.js
- primeiraMensagem computed (mais antiga)
- canais computed: Set de m.channel unicos

MELISSAPACIENTE.VUE — Tab Documentos
- 4 KPIs adaptativos (so renderizam com dados):
  Total + sizeTotalFormatted / Mais comum / Ultimo / Revisao pendente
- DocumentsListPage embedded no card Melissa (mpa-embed wrapper).
  Reusa upload/preview/listagem testados.

MELISSAPACIENTE.VUE — Tab Conversas
- 4 KPIs: Mensagens com canais / Recebidas % / Enviadas % / Ultima
- CTA "Abrir conversa no drawer" estilo WhatsApp pill verde #25d366
  que emite open-whatsapp pro parent (Fase 8 integra com
  conversationDrawerStore.openForPatient)
- PatientConversationsTab embedded — thread completa com filter/media

CSS: ~50L novos (mpa-conv-cta + mpa-embed wrapper).

Removido kpiDocumentos nao usado (substituido por documentsHook.total
direto).

ESLint: 0 errors da minha mudanca.

PROXIMA: Fase 8 wire-up final (Dialog -> router.push em MelissaPacientes/
MelissaAgenda; decisao sobre TherapistDashboard + PatientsListPage).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-08 10:06:29 -03:00
parent e7c0f6c4f5
commit 167e864b8a
5 changed files with 364 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaPaciente.vue
+221 -30
View File
@@ -21,6 +21,8 @@
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
import { useToast } from 'primevue/usetoast';
import MelissaConfigList from './MelissaConfigList.vue';
import DocumentsListPage from '@/features/documents/DocumentsListPage.vue';
import PatientConversationsTab from '@/features/patients/prontuario/PatientConversationsTab.vue';
import { usePatientDetail } from '@/features/patients/composables/usePatientDetail';
import { usePatientSessions } from '@/features/patients/composables/usePatientSessions';
import { usePatientFinancial } from '@/features/patients/composables/usePatientFinancial';
@@ -41,6 +43,7 @@ import {
fmtMarital,
fmtPhoneMobile,
sessionDuration,
chConvLabel,
recordStatus,
RECORD_STATUS_LABEL,
fmtPaymentMethod,
@@ -318,7 +321,6 @@ const sessoesComEvolucao = computed(() =>
const kpiSessoes = computed(() => sessionsHook.totalSessoes.value);
const kpiRealizadas = computed(() => sessionsHook.totalRealizadas.value);
const kpiMensagens = computed(() => messagesHook.messages.value.length);
const kpiDocumentos = computed(() => documentsHook.total.value);
// ── Acoes ──────────────────────────────────────────────────
function close() { emit('close'); }
@@ -1638,41 +1640,179 @@ onBeforeUnmount(() => {
</template>
</div>
<!-- ABA: Documentos -->
<!-- ABA: Documentos (Fase 7 — KPIs + DocumentsListPage embedded) -->
<div v-else-if="activeTab === 'doc'" class="mpa-tab">
<div class="mpa-w">
<div class="mpa-w__head">
<div class="mpa-w__icon mpa-w__icon--orange"><i class="pi pi-folder" /></div>
<div class="mpa-w__title">
<div class="mpa-w__title-text">Documentos — Fase 7</div>
<div class="mpa-w__sub">Listagem completa + upload + preview</div>
</div>
</div>
<div class="mpa-w__body">
<p class="mpa-placeholder">
Em desenvolvimento — <strong>Fase 7</strong>. Total: <strong>{{ kpiDocumentos }}</strong> documentos.
</p>
</div>
<!-- Loading -->
<div v-if="documentsHook.loading.value" class="mpa-empty">
<i class="pi pi-spin pi-spinner mr-2" /> Carregando…
</div>
<template v-else>
<!-- KPIs (so quando ha algo) -->
<div v-if="documentsHook.total.value" class="mpa-kpis">
<article class="mpa-kpi" style="--c:var(--p-primary-color)">
<span class="mpa-kpi__num">01</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-folder" /></div>
<span class="mpa-kpi__tag">Total</span>
</header>
<div class="mpa-kpi__big">{{ documentsHook.total.value }}</div>
<div class="mpa-kpi__cap">{{ documentsHook.sizeTotalFormatted.value }} no total</div>
</article>
<article v-if="documentsHook.topType.value" class="mpa-kpi" style="--c:#0ea5e9">
<span class="mpa-kpi__num">02</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-tag" /></div>
<span class="mpa-kpi__tag">Mais comum</span>
</header>
<div class="mpa-kpi__big mpa-kpi__big--small">
{{ documentsHook.topType.value.label }}
</div>
<div class="mpa-kpi__cap">
{{ documentsHook.topType.value.count }}
{{ documentsHook.topType.value.count === 1 ? 'documento' : 'documentos' }}
</div>
</article>
<article v-if="documentsHook.ultimo.value" class="mpa-kpi" style="--c:#4ade80">
<span class="mpa-kpi__num">03</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-clock" /></div>
<span class="mpa-kpi__tag">Último</span>
</header>
<div class="mpa-kpi__big mpa-kpi__big--small">
{{ fmtRelative(documentsHook.ultimo.value.created_at) }}
</div>
<div class="mpa-kpi__cap">{{ fmtDateBR(documentsHook.ultimo.value.created_at) }}</div>
</article>
<article v-if="documentsHook.pendentes.value > 0" class="mpa-kpi" style="--c:#f59e0b">
<span class="mpa-kpi__num">04</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-exclamation-circle" /></div>
<span class="mpa-kpi__tag">Revisão</span>
</header>
<div class="mpa-kpi__big">{{ documentsHook.pendentes.value }}</div>
<div class="mpa-kpi__cap">
{{ documentsHook.pendentes.value === 1 ? 'pendente' : 'pendentes' }}
</div>
</article>
</div>
<!-- DocumentsListPage embedded (ja vem com upload/preview/lista) -->
<section class="mpa-w mpa-embed">
<div class="mpa-w__body mpa-embed__body">
<DocumentsListPage
:patient-id="patientId"
:patient-name="nomeCompleto || ''"
embedded
/>
</div>
</section>
</template>
</div>
<!-- ABA: Conversas -->
<!-- ABA: Conversas (Fase 7 — KPIs + CTA + PatientConversationsTab embedded) -->
<div v-else-if="activeTab === 'conv'" class="mpa-tab">
<div class="mpa-w">
<div class="mpa-w__head">
<div class="mpa-w__icon" style="background:#22c55e22;color:#22c55e"><i class="pi pi-whatsapp" /></div>
<div class="mpa-w__title">
<div class="mpa-w__title-text">Conversas — Fase 7</div>
<div class="mpa-w__sub">Thread completa + envio</div>
</div>
</div>
<div class="mpa-w__body">
<p class="mpa-placeholder">
Em desenvolvimento — <strong>Fase 7</strong>. {{ messagesHook.totalIn.value }} recebidas
/ {{ messagesHook.totalOut.value }} enviadas.
</p>
</div>
<!-- Loading -->
<div v-if="messagesHook.loading.value" class="mpa-empty">
<i class="pi pi-spin pi-spinner mr-2" /> Carregando…
</div>
<template v-else>
<!-- KPIs (so quando ha mensagens) -->
<div v-if="kpiMensagens" class="mpa-kpis">
<article class="mpa-kpi" style="--c:#25d366">
<span class="mpa-kpi__num">01</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-comments" /></div>
<span class="mpa-kpi__tag">Mensagens</span>
</header>
<div class="mpa-kpi__big">{{ kpiMensagens }}</div>
<div class="mpa-kpi__cap">
<template v-if="messagesHook.canais.value.length">
via {{ messagesHook.canais.value.map(chConvLabel).join(', ') }}
</template>
<template v-else>no histórico</template>
</div>
</article>
<article class="mpa-kpi" style="--c:#4ade80">
<span class="mpa-kpi__num">02</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-arrow-down-left" /></div>
<span class="mpa-kpi__tag">Recebidas</span>
</header>
<div class="mpa-kpi__big">{{ messagesHook.totalIn.value }}</div>
<div class="mpa-kpi__cap">
<template v-if="kpiMensagens">
{{ Math.round((messagesHook.totalIn.value / kpiMensagens) * 100) }}% do total
</template>
<template v-else>—</template>
</div>
</article>
<article class="mpa-kpi" style="--c:#60a5fa">
<span class="mpa-kpi__num">03</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-arrow-up-right" /></div>
<span class="mpa-kpi__tag">Enviadas</span>
</header>
<div class="mpa-kpi__big">{{ messagesHook.totalOut.value }}</div>
<div class="mpa-kpi__cap">
<template v-if="kpiMensagens">
{{ Math.round((messagesHook.totalOut.value / kpiMensagens) * 100) }}% do total
</template>
<template v-else>—</template>
</div>
</article>
<article class="mpa-kpi" style="--c:var(--p-primary-color)">
<span class="mpa-kpi__num">04</span>
<header class="mpa-kpi__head">
<div class="mpa-kpi__icon"><i class="pi pi-clock" /></div>
<span class="mpa-kpi__tag">Última</span>
</header>
<template v-if="messagesHook.ultimaMensagem.value">
<div class="mpa-kpi__big mpa-kpi__big--small">
{{ fmtRelative(messagesHook.ultimaMensagem.value.created_at) }}
</div>
<div class="mpa-kpi__cap">
{{ messagesHook.ultimaMensagem.value.direction === 'inbound' ? 'Recebida' : 'Enviada' }}
<span v-if="messagesHook.primeiraMensagem.value" class="mpa-kpi__cap-dim">
· 1ª {{ fmtRelative(messagesHook.primeiraMensagem.value.created_at) }}
</span>
</div>
</template>
<template v-else>
<div class="mpa-kpi__big mpa-kpi__big--small">—</div>
<div class="mpa-kpi__cap">Sem mensagens</div>
</template>
</article>
</div>
<!-- CTA: abrir conversa no drawer global (continuar real-time) -->
<div class="mpa-conv-cta">
<button type="button" class="mpa-conv-cta__btn" @click="openWhatsapp">
<i class="pi pi-whatsapp" />
<span>Abrir conversa no drawer</span>
</button>
<span class="mpa-conv-cta__hint">
Continue a conversa em tempo real sem fechar o prontuário.
</span>
</div>
<!-- PatientConversationsTab embedded (thread completa) -->
<section class="mpa-w mpa-embed">
<div class="mpa-w__body mpa-embed__body">
<PatientConversationsTab
:patient-id="patientId"
:patient-name="nomeCompleto || ''"
/>
</div>
</section>
</template>
</div>
</template>
</div>
@@ -2662,6 +2802,57 @@ onBeforeUnmount(() => {
font-size: 0.66rem !important;
}
/* ═══════ Tab Conversas (Fase 7) — CTA pra drawer ═══════ */
.mpa-conv-cta {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
background: color-mix(in srgb, #25d366 8%, transparent);
border: 1px solid color-mix(in srgb, #25d366 28%, transparent);
flex-wrap: wrap;
}
.mpa-conv-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: #25d366;
color: #fff;
border: none;
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: background-color 120ms ease, transform 120ms ease;
}
.mpa-conv-cta__btn:hover {
background: color-mix(in srgb, #25d366 88%, black);
transform: translateY(-1px);
}
.mpa-conv-cta__btn > i { font-size: 0.92rem; }
.mpa-conv-cta__hint {
font-size: 0.74rem;
color: var(--m-text-muted);
flex: 1;
min-width: 0;
}
/* ═══════ Embed wrapper (DocumentsListPage / PatientConversationsTab) ═══════
O componente embedded ja vem com seu proprio padding/scroll. So damos
o card-base do Melissa (border-radius, fundo) e zeramos o body padding
pra ele preencher tudo. */
.mpa-embed {
background: var(--m-bg-soft);
overflow: hidden;
}
.mpa-embed__body {
padding: 0;
gap: 0;
}
/* ═══════ Tab Financeiro (Fase 6) ═══════ */
.mpa-fin__head-actions {
display: flex;