Leonardo
e95ed9b585
DB
- drop agenda_excecoes (substituida por financial_exceptions + lock-edit
baseado em financial_records)
- financial_records.payment_link (Asaas + link compartilhavel)
- financial_exceptions.consume_on_miss (rotular nao-show consome ou nao)
- billing_contracts.charging_style (upfront/saldo/per_session)
Payment refactor
- paymentSettlement -> paymentMethod (string) + markPaidNow (bool).
Handler aplica payment_method sempre; status='paid'+paid_at apenas
quando markPaidNow=true && method != 'link'. Asaas (link) sempre
liquida via webhook, nunca nasce paid.
- create_financial_record_for_session com pos-RPC patch pra payment_method
e (opcional) status='paid' quando user marca "ja recebi".
Indicadores visuais (3 canais distintos por estado)
- Paid: barra esquerda emerald-500 4px na agenda (MelissaAgenda),
pi-check-circle no popover/Resumo.
- Pending: badge \$ amber canto direito (mantido); linha amber no popover/
Resumo "A receber R\$ X (cobranca pendente)".
- Neutro: sem badge nem barra (compromisso pessoal, bloqueio, ou
ocorrencia virtual de pacote upfront/saldo).
- Bulk-load de paymentState em _reloadRange etapa 4 (1 query unica em
financial_records mapeada por agenda_evento_id).
- AgendaEventDialog Resumo lateral ganha linha entre pi-clock e
pi-map-marker via novo sessionPaymentRecord (sem guard de
occurrenceMode, contrario ao occFinancialRecord que continua so pra
Rail/Clinica). 5 estados: paid+paid_at, overdue+venceu, pending+vence,
sem cobranca c/ valor, sem cobranca s/ valor.
UX de convenio
- InsurancePlanServiceQuickCreateDialog novo: cadastra procedimento
POR CIMA do AgendaEventDialog sem sair da agenda. Auto-seleciona
novo procedimento so quando nada estava selecionado antes.
- Caixa cinza "Cadastrar procedimento" sempre visivel quando convenio
selecionado, com copy variavel (0 procedimentos: chamada urgente;
1+: "se quiser adicionar mais").
- "+ Novo convenio" toolbar em ConfiguracoesConveniosPage (botao
estava faltando, empty state mandava clicar em botao inexistente).
- Hint contextual abaixo do card Sessao/Honorarios: convenio = "N da
guia eh opcional", gratuito = "sem cobranca", particular = sem hint.
Label "N da Guia" tambem ganhou "(opcional)" no service-picker dialog.
Bug fixes
- pickDbFields whitelist faltando 'modalidade' (useMelissaAgenda.js:74)
— sessoes avulsas eram salvas como presencial independente da
escolha visual. Adicionado.
- goToConveniosConfig removida — fazia router.push("/therapist/
configuracoes/convenios") mas /configuracoes/* eh rota raiz, nao
filha. Substituida pelo quick-create inline (#1).
- bloqueioCobrindo + dialogBlockOverlap passados via deps em
_buildHandlers (refs do useMelissaAgenda nao sao acessiveis no
escopo de _buildHandlers).
Fase 5 (status change + edit cobrada)
- AgendaStatusChangeConfirmDialog: confirm dialog quando user muda
status pra realizada/faltou/cancelado, com opcoes de markPaid ou
gerar cobranca conforme o caso.
- useAgendaBloqueios novo composable: extrai logica de bloqueios
cinza (background events) do MelissaAgenda.
Doc viva
- src/docs/agenda-compromisso-financeiro-cenarios.html: 13 cenarios
de teste manual. C1-C4 ja validados. Cada teste validado vira parte
da doc final pra area de ajuda (pos-Fase 9).
Wiki/handoff
- agenda-compromisso-fluxo e agenda-billing-pesquisa-mercado (decisoes
arquiteturais sobre billing).
- HANDOFF.md atualizado.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
622 lines
28 KiB
Vue
622 lines
28 KiB
Vue
<!--
|
|
|--------------------------------------------------------------------------
|
|
| Agência PSI
|
|
|--------------------------------------------------------------------------
|
|
| Criado e desenvolvido por Leonardo Nohama
|
|
|
|
|
| Tecnologia aplicada à escuta.
|
|
| Estrutura para o cuidado.
|
|
|
|
|
| Arquivo: src/layout/configuracoes/ConfiguracoesConveniosPage.vue
|
|
| Data: 2026
|
|
| Local: São Carlos/SP — Brasil
|
|
|--------------------------------------------------------------------------
|
|
| © 2026 — Todos os direitos reservados
|
|
|--------------------------------------------------------------------------
|
|
-->
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { supabase } from '@/lib/supabase/client';
|
|
import { useTenantStore } from '@/stores/tenantStore';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { useInsurancePlans } from '@/features/agenda/composables/useInsurancePlans';
|
|
import { useServices } from '@/features/agenda/composables/useServices';
|
|
|
|
const toast = useToast();
|
|
const tenantStore = useTenantStore();
|
|
|
|
const { plans, loading, error: plansError, load, save, toggle, remove, savePlanService, togglePlanService, removePlanService, removeDefinitivo } = useInsurancePlans();
|
|
|
|
const { services, load: loadServices } = useServices();
|
|
|
|
const ownerId = ref(null);
|
|
const tenantId = ref(null);
|
|
const pageLoading = ref(true);
|
|
|
|
// ── Formulário novo plano ─────────────────────────────────────────────
|
|
const emptyForm = () => ({ name: '', notes: '' });
|
|
const newForm = ref(emptyForm());
|
|
const addingNew = ref(false);
|
|
const savingNew = ref(false);
|
|
|
|
// ── Edição inline do plano ────────────────────────────────────────────
|
|
const editingId = ref(null);
|
|
const editForm = ref({});
|
|
const savingEdit = ref(false);
|
|
|
|
// ── Expansão de planos ────────────────────────────────────────────────
|
|
const expandedPlanId = ref(null);
|
|
|
|
function togglePanel(planId) {
|
|
if (expandedPlanId.value === planId) {
|
|
expandedPlanId.value = null;
|
|
addingServicePlanId.value = null;
|
|
} else {
|
|
expandedPlanId.value = planId;
|
|
addingServicePlanId.value = null;
|
|
}
|
|
}
|
|
|
|
// ── Procedimentos ─────────────────────────────────────────────────────
|
|
const addingServicePlanId = ref(null);
|
|
const newServiceForm = ref({ name: '', value: null });
|
|
const savingService = ref(false);
|
|
const editingServiceId = ref(null);
|
|
const editServiceForm = ref({});
|
|
const savingServiceEdit = ref(false);
|
|
|
|
function startAddService(planId) {
|
|
addingServicePlanId.value = planId;
|
|
newServiceForm.value = { name: '', value: null };
|
|
}
|
|
|
|
function cancelAddService() {
|
|
addingServicePlanId.value = null;
|
|
newServiceForm.value = { name: '', value: null };
|
|
}
|
|
|
|
function fillFromService(svc) {
|
|
newServiceForm.value.name = svc.name;
|
|
newServiceForm.value.value = Number(svc.price);
|
|
}
|
|
|
|
async function saveService(planId) {
|
|
if (!newServiceForm.value.name?.trim() || newServiceForm.value.value == null) {
|
|
toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Nome e valor são obrigatórios.', life: 3000 });
|
|
return;
|
|
}
|
|
savingService.value = true;
|
|
try {
|
|
await savePlanService({
|
|
insurance_plan_id: planId,
|
|
name: newServiceForm.value.name.trim(),
|
|
value: newServiceForm.value.value
|
|
});
|
|
await load(ownerId.value);
|
|
cancelAddService();
|
|
toast.add({ severity: 'success', summary: 'Adicionado', detail: 'Procedimento adicionado.', life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar.', life: 4000 });
|
|
} finally {
|
|
savingService.value = false;
|
|
}
|
|
}
|
|
|
|
function startEditService(ps) {
|
|
editingServiceId.value = ps.id;
|
|
editServiceForm.value = { id: ps.id, name: ps.name, value: Number(ps.value) };
|
|
}
|
|
|
|
function cancelEditService() {
|
|
editingServiceId.value = null;
|
|
editServiceForm.value = {};
|
|
}
|
|
|
|
async function saveServiceEdit() {
|
|
if (!editServiceForm.value.name?.trim() || editServiceForm.value.value == null) {
|
|
toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Nome e valor são obrigatórios.', life: 3000 });
|
|
return;
|
|
}
|
|
savingServiceEdit.value = true;
|
|
try {
|
|
await savePlanService({
|
|
id: editServiceForm.value.id,
|
|
name: editServiceForm.value.name.trim(),
|
|
value: editServiceForm.value.value
|
|
});
|
|
await load(ownerId.value);
|
|
cancelEditService();
|
|
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Procedimento atualizado.', life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar.', life: 4000 });
|
|
} finally {
|
|
savingServiceEdit.value = false;
|
|
}
|
|
}
|
|
|
|
async function onToggleService(ps) {
|
|
try {
|
|
await togglePlanService(ps.id, !ps.active);
|
|
await load(ownerId.value);
|
|
toast.add({ severity: 'success', summary: ps.active ? 'Desativado' : 'Ativado', detail: `Procedimento ${ps.active ? 'desativado' : 'ativado'}.`, life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao atualizar.', life: 4000 });
|
|
}
|
|
}
|
|
|
|
async function deleteService(id) {
|
|
try {
|
|
await removePlanService(id);
|
|
await load(ownerId.value);
|
|
toast.add({ severity: 'success', summary: 'Removido', detail: 'Procedimento removido.', life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao remover.', life: 4000 });
|
|
}
|
|
}
|
|
|
|
// ── Edit helpers plano ────────────────────────────────────────────────
|
|
function startEdit(plan) {
|
|
editingId.value = plan.id;
|
|
editForm.value = { id: plan.id, name: plan.name, notes: plan.notes ?? '' };
|
|
}
|
|
|
|
function cancelEdit() {
|
|
editingId.value = null;
|
|
editForm.value = {};
|
|
}
|
|
|
|
async function saveEdit() {
|
|
if (!editForm.value.name?.trim()) {
|
|
toast.add({ severity: 'warn', summary: 'Campo obrigatório', detail: 'Nome é obrigatório.', life: 3000 });
|
|
return;
|
|
}
|
|
savingEdit.value = true;
|
|
try {
|
|
await save({ ...editForm.value, name: editForm.value.name.trim(), notes: editForm.value.notes?.trim() || null });
|
|
await load(ownerId.value);
|
|
cancelEdit();
|
|
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Convênio atualizado.', life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar.', life: 4000 });
|
|
} finally {
|
|
savingEdit.value = false;
|
|
}
|
|
}
|
|
|
|
async function saveNew() {
|
|
if (!newForm.value.name?.trim()) {
|
|
toast.add({ severity: 'warn', summary: 'Campo obrigatório', detail: 'Nome é obrigatório.', life: 3000 });
|
|
return;
|
|
}
|
|
savingNew.value = true;
|
|
try {
|
|
await save({ owner_id: ownerId.value, tenant_id: tenantId.value, name: newForm.value.name.trim(), notes: newForm.value.notes?.trim() || null });
|
|
await load(ownerId.value);
|
|
newForm.value = emptyForm();
|
|
addingNew.value = false;
|
|
toast.add({ severity: 'success', summary: 'Adicionado', detail: 'Convênio criado.', life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao criar.', life: 4000 });
|
|
} finally {
|
|
savingNew.value = false;
|
|
}
|
|
}
|
|
|
|
async function togglePlan(plan) {
|
|
try {
|
|
await toggle(plan.id, !plan.active);
|
|
toast.add({ severity: 'success', summary: plan.active ? 'Desativado' : 'Ativado', detail: `Convênio ${plan.active ? 'desativado' : 'ativado'}.`, life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao atualizar.', life: 4000 });
|
|
}
|
|
}
|
|
|
|
async function removePlan(id) {
|
|
try {
|
|
await removeDefinitivo(id);
|
|
if (expandedPlanId.value === id) expandedPlanId.value = null;
|
|
toast.add({ severity: 'success', summary: 'Removido', detail: 'Convênio removido.', life: 3000 });
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao remover.', life: 4000 });
|
|
}
|
|
}
|
|
|
|
function fmtBRL(v) {
|
|
if (v == null || v === '') return '—';
|
|
return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
|
|
}
|
|
|
|
function totalProcedimentos(plan) {
|
|
return plan.insurance_plan_services?.length || 0;
|
|
}
|
|
|
|
// ── Mount ─────────────────────────────────────────────────────────────
|
|
onMounted(async () => {
|
|
try {
|
|
const uid = tenantStore.user?.id || (await supabase.auth.getUser()).data?.user?.id;
|
|
if (!uid) return;
|
|
ownerId.value = uid;
|
|
tenantId.value = tenantStore.activeTenantId || null;
|
|
await Promise.all([load(uid), loadServices(uid)]);
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4000 });
|
|
} finally {
|
|
pageLoading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-3">
|
|
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
|
|
<template v-if="pageLoading || loading">
|
|
<div class="cfg-wrap">
|
|
<div class="cfg-wrap__head">
|
|
<Skeleton width="1.75rem" height="1.75rem" border-radius="6px" />
|
|
<Skeleton width="9rem" height="12px" />
|
|
</div>
|
|
<div v-for="n in 3" :key="n" class="flex items-center gap-3 px-4 py-3 border-b border-[var(--surface-border)] last:border-b-0">
|
|
<Skeleton width="1.75rem" height="1.75rem" border-radius="6px" />
|
|
<div class="flex flex-col gap-2 flex-1">
|
|
<Skeleton :width="n === 1 ? '12rem' : n === 2 ? '9rem' : '11rem'" height="11px" />
|
|
<Skeleton width="5rem" height="10px" />
|
|
</div>
|
|
<Skeleton width="3rem" height="1.4rem" border-radius="999px" />
|
|
</div>
|
|
</div>
|
|
<AppLoadingPhrases action="Carregando convênios..." containerClass="py-6" />
|
|
</template>
|
|
|
|
<template v-else>
|
|
<!-- Toolbar topo: botão "+ Novo convênio". Só aparece quando
|
|
não está no modo de cadastro inline (senão fica visualmente
|
|
confuso ter botão + form abertos juntos). -->
|
|
<div v-if="!addingNew" class="flex items-center justify-end gap-2">
|
|
<Button
|
|
label="Novo convênio"
|
|
icon="pi pi-plus"
|
|
size="small"
|
|
class="rounded-full"
|
|
@click="addingNew = true"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Form novo convênio -->
|
|
<div v-if="addingNew" class="cfg-wrap">
|
|
<div class="cfg-wrap__head">
|
|
<div class="cfg-wrap__icon"><i class="pi pi-plus" /></div>
|
|
<span class="cfg-wrap__title">Novo convênio</span>
|
|
</div>
|
|
<div class="cfg-wrap__body">
|
|
<div class="grid grid-cols-12 gap-3">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<FloatLabel variant="on">
|
|
<InputText v-model="newForm.name" inputId="new-name" class="w-full" />
|
|
<label for="new-name">Nome *</label>
|
|
</FloatLabel>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<FloatLabel variant="on">
|
|
<InputText v-model="newForm.notes" inputId="new-notes" class="w-full" />
|
|
<label for="new-notes">Observações (opcional)</label>
|
|
</FloatLabel>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2 justify-end mt-3">
|
|
<Button
|
|
label="Cancelar"
|
|
severity="secondary"
|
|
outlined
|
|
class="rounded-full"
|
|
@click="
|
|
addingNew = false;
|
|
newForm = emptyForm();
|
|
"
|
|
/>
|
|
<Button label="Salvar" icon="pi pi-check" class="rounded-full" :loading="savingNew" @click="saveNew" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista vazia -->
|
|
<div v-if="!plans.length && !addingNew" class="cfg-empty">
|
|
<i class="pi pi-id-card text-3xl opacity-25" />
|
|
<div class="text-sm font-medium">Nenhum convênio cadastrado</div>
|
|
<div class="text-xs opacity-70">Use o botão <b>Novo convênio</b> acima pra começar.</div>
|
|
</div>
|
|
|
|
<!-- Lista de convênios -->
|
|
<div v-for="plan in plans" :key="plan.id" class="cfg-wrap" :class="{ 'opacity-60': !plan.active }">
|
|
<!-- Modo edição do plano -->
|
|
<template v-if="editingId === plan.id">
|
|
<div class="cfg-wrap__body">
|
|
<div class="grid grid-cols-12 gap-3">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<FloatLabel variant="on">
|
|
<InputText v-model="editForm.name" :inputId="`edit-name-${plan.id}`" class="w-full" />
|
|
<label :for="`edit-name-${plan.id}`">Nome *</label>
|
|
</FloatLabel>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<FloatLabel variant="on">
|
|
<InputText v-model="editForm.notes" :inputId="`edit-notes-${plan.id}`" class="w-full" />
|
|
<label :for="`edit-notes-${plan.id}`">Observações (opcional)</label>
|
|
</FloatLabel>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2 justify-end mt-3">
|
|
<Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="cancelEdit" />
|
|
<Button label="Salvar" icon="pi pi-check" class="rounded-full" :loading="savingEdit" @click="saveEdit" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Modo leitura -->
|
|
<template v-else>
|
|
<!-- Cabeçalho do plano -->
|
|
<div class="cnv-plan-head">
|
|
<div class="flex items-center gap-2.5 min-w-0 flex-1">
|
|
<div class="cfg-wrap__icon shrink-0"><i class="pi pi-id-card" /></div>
|
|
<div class="min-w-0">
|
|
<div class="font-semibold text-sm">{{ plan.name }}</div>
|
|
<div v-if="plan.notes" class="text-xs text-[var(--text-color-secondary)] opacity-70 truncate">{{ plan.notes }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 flex-wrap">
|
|
<Tag :value="plan.active ? 'Ativo' : 'Inativo'" :severity="plan.active ? 'success' : 'secondary'" />
|
|
<Button
|
|
:label="`Procedimentos (${totalProcedimentos(plan)})`"
|
|
:icon="expandedPlanId === plan.id ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
|
|
severity="secondary"
|
|
outlined
|
|
size="small"
|
|
class="rounded-full"
|
|
@click="togglePanel(plan.id)"
|
|
/>
|
|
<Button :icon="plan.active ? 'pi pi-eye-slash' : 'pi pi-eye'" :severity="plan.active ? 'secondary' : 'success'" outlined size="small" v-tooltip.top="plan.active ? 'Desativar' : 'Ativar'" @click="togglePlan(plan)" />
|
|
<Button icon="pi pi-pencil" severity="secondary" outlined size="small" v-tooltip.top="'Editar'" @click="startEdit(plan)" />
|
|
<Button icon="pi pi-trash" severity="danger" outlined size="small" v-tooltip.top="'Remover'" @click="removePlan(plan.id)" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Painel procedimentos expandível -->
|
|
<div v-if="expandedPlanId === plan.id" class="cnv-procedures">
|
|
<!-- Lista de procedimentos -->
|
|
<div v-if="plan.insurance_plan_services?.length" class="cnv-proc-list">
|
|
<template v-for="ps in plan.insurance_plan_services" :key="ps.id">
|
|
<!-- Edição inline do procedimento -->
|
|
<div v-if="editingServiceId === ps.id" class="cnv-proc-edit">
|
|
<div class="grid grid-cols-12 gap-2 flex-1">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="cnv-label">Nome</label>
|
|
<InputText v-model="editServiceForm.name" class="w-full" size="small" />
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="cnv-label">Valor (R$)</label>
|
|
<InputNumber v-model="editServiceForm.value" mode="currency" currency="BRL" locale="pt-BR" :min="0" :minFractionDigits="2" class="w-full" size="small" />
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2 justify-end mt-2">
|
|
<Button label="Cancelar" severity="secondary" outlined size="small" class="rounded-full" @click="cancelEditService" />
|
|
<Button label="Salvar" icon="pi pi-check" size="small" class="rounded-full" :loading="savingServiceEdit" @click="saveServiceEdit" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leitura do procedimento -->
|
|
<div v-else class="cnv-proc-row" :class="{ 'opacity-50': !ps.active }">
|
|
<div class="flex items-center gap-2 min-w-0 flex-1">
|
|
<Tag v-if="!ps.active" value="Inativo" severity="secondary" class="text-xs shrink-0" />
|
|
<span class="text-sm font-medium truncate">{{ ps.name }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<span class="text-sm font-semibold text-[var(--primary-color)]">{{ fmtBRL(ps.value) }}</span>
|
|
<Button :icon="ps.active ? 'pi pi-eye-slash' : 'pi pi-eye'" :severity="ps.active ? 'secondary' : 'success'" text size="small" v-tooltip.top="ps.active ? 'Desativar' : 'Ativar'" @click="onToggleService(ps)" />
|
|
<Button icon="pi pi-pencil" severity="secondary" text size="small" v-tooltip.top="'Editar'" @click="startEditService(ps)" />
|
|
<Button icon="pi pi-trash" severity="danger" text size="small" v-tooltip.top="'Remover'" @click="deleteService(ps.id)" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div v-else-if="addingServicePlanId !== plan.id" class="text-sm text-[var(--text-color-secondary)] italic px-1 py-2">Nenhum procedimento cadastrado.</div>
|
|
|
|
<!-- Form adicionar procedimento -->
|
|
<div v-if="addingServicePlanId === plan.id" class="cnv-proc-form">
|
|
<!-- Quick-fill dos serviços -->
|
|
<div v-if="services.filter((s) => s.active).length" class="mb-3">
|
|
<div class="cnv-label mb-1.5">Clique num serviço para pré-preencher:</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
|
|
<button v-for="svc in services.filter((s) => s.active)" :key="svc.id" class="svc-quick-card" @click="fillFromService(svc)">
|
|
<span class="svc-quick-name">{{ svc.name }}</span>
|
|
<span class="svc-quick-price">{{ fmtBRL(svc.price) }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Campos nome + valor -->
|
|
<div class="grid grid-cols-12 gap-2">
|
|
<div class="col-span-12 sm:col-span-7">
|
|
<label class="cnv-label">Nome do procedimento *</label>
|
|
<InputText v-model="newServiceForm.name" placeholder="Ex: Consulta" class="w-full" size="small" />
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-5">
|
|
<label class="cnv-label">Valor (R$) *</label>
|
|
<InputNumber v-model="newServiceForm.value" mode="currency" currency="BRL" locale="pt-BR" :min="0" :minFractionDigits="2" class="w-full" size="small" />
|
|
</div>
|
|
</div>
|
|
<!-- Botões em linha separada -->
|
|
<div class="flex gap-2 justify-end mt-2">
|
|
<Button label="Cancelar" severity="secondary" outlined size="small" class="rounded-full" @click="cancelAddService" />
|
|
<Button label="Adicionar" icon="pi pi-check" size="small" class="rounded-full" :loading="savingService" @click="saveService(plan.id)" />
|
|
</div>
|
|
</div>
|
|
|
|
<Button v-if="addingServicePlanId !== plan.id" label="Adicionar procedimento" icon="pi pi-plus" severity="secondary" outlined size="small" class="mt-2 rounded-full" @click="startAddService(plan.id)" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<Message severity="info" :closable="false">
|
|
<span class="text-sm"> Os procedimentos ativos ficam disponíveis para seleção ao registrar uma sessão com convênio na agenda. </span>
|
|
</Message>
|
|
|
|
<LoadedPhraseBlock />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ── Card wrap ────────────────────────────────────── */
|
|
.cfg-wrap {
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: 6px;
|
|
background: var(--surface-card);
|
|
overflow: hidden;
|
|
}
|
|
.cfg-wrap__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--surface-border);
|
|
background: var(--surface-ground);
|
|
}
|
|
.cfg-wrap__icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
background: color-mix(in srgb, var(--primary-color, #6366f1) 12%, transparent);
|
|
color: var(--primary-color, #6366f1);
|
|
font-size: 0.8rem;
|
|
}
|
|
.cfg-wrap__title {
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
color: var(--text-color);
|
|
}
|
|
.cfg-wrap__body {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* ── Empty state ──────────────────────────────────── */
|
|
.cfg-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 2.5rem 1rem;
|
|
text-align: center;
|
|
color: var(--text-color-secondary);
|
|
border: 1px dashed var(--surface-border);
|
|
border-radius: 6px;
|
|
background: var(--surface-ground);
|
|
}
|
|
|
|
/* ── Cabeçalho do plano ───────────────────────────── */
|
|
.cnv-plan-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── Painel procedimentos ─────────────────────────── */
|
|
.cnv-procedures {
|
|
border-top: 1px solid var(--surface-border);
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
background: var(--surface-ground);
|
|
}
|
|
.cnv-proc-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
background: var(--surface-card);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.cnv-proc-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--surface-border);
|
|
transition: background 0.1s;
|
|
}
|
|
.cnv-proc-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.cnv-proc-row:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.cnv-proc-edit {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid var(--surface-border);
|
|
background: color-mix(in srgb, var(--primary-color, #6366f1) 3%, var(--surface-card));
|
|
}
|
|
.cnv-proc-edit:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* ── Form adicionar procedimento ──────────────────── */
|
|
.cnv-proc-form {
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: 6px;
|
|
background: var(--surface-card);
|
|
padding: 0.75rem;
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* ── Labels ───────────────────────────────────────── */
|
|
.cnv-label {
|
|
display: block;
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
color: var(--text-color-secondary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* ── Quick-fill serviços ──────────────────────────── */
|
|
.svc-quick-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1rem;
|
|
padding: 0.375rem 0.625rem;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--surface-border);
|
|
background: var(--surface-ground);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 0.12s,
|
|
background 0.12s;
|
|
}
|
|
.svc-quick-card:hover {
|
|
border-color: var(--primary-color, #6366f1);
|
|
background: color-mix(in srgb, var(--primary-color, #6366f1) 5%, transparent);
|
|
}
|
|
.svc-quick-name {
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
}
|
|
.svc-quick-price {
|
|
font-size: 0.68rem;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
</style>
|