Ajuste Convenios e Particular

This commit is contained in:
Leonardo
2026-03-13 21:09:34 -03:00
parent 06fb369beb
commit 587079e414
13 changed files with 971 additions and 277 deletions
@@ -4,85 +4,150 @@ 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)
const plans = ref([])
// ── Formulário ───────────────────────────────────────────────────────
const emptyForm = () => ({ name: '', notes: '', default_value: null })
// ── 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)
// ── Load ─────────────────────────────────────────────────────────────
async function load (uid) {
const { data, error } = await supabase
.from('insurance_plans')
.select('*')
.eq('owner_id', uid)
.eq('active', true)
.order('name')
if (error) throw error
plans.value = data || []
}
// ── Expansão de planos ────────────────────────────────────────────────
const expandedPlanId = ref(null)
// ── Save ─────────────────────────────────────────────────────────────
async function savePlan (payload) {
if (payload.id) {
const { error } = await supabase
.from('insurance_plans')
.update({
name: payload.name.trim(),
notes: payload.notes?.trim() || null,
default_value: payload.default_value ?? null,
updated_at: new Date().toISOString(),
})
.eq('id', payload.id)
if (error) throw error
function togglePanel (planId) {
if (expandedPlanId.value === planId) {
expandedPlanId.value = null
addingServicePlanId.value = null
} else {
const { error } = await supabase
.from('insurance_plans')
.insert({
owner_id: ownerId.value,
tenant_id: tenantId.value,
name: payload.name.trim(),
notes: payload.notes?.trim() || null,
default_value: payload.default_value ?? null,
})
if (error) throw error
expandedPlanId.value = planId
addingServicePlanId.value = null
}
}
// ── Remove (soft-delete) ─────────────────────────────────────────────
async function removePlan (id) {
const { error } = await supabase
.from('insurance_plans')
.update({ active: false })
.eq('id', id)
if (error) throw error
plans.value = plans.value.filter(p => p.id !== id)
toast.add({ severity: 'success', summary: 'Removido', detail: 'Convênio desativado.', life: 3000 })
// ── 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 }
}
// ── Edit helpers ──────────────────────────────────────────────────────
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 ?? '',
default_value: plan.default_value != null ? Number(plan.default_value) : null,
}
editForm.value = { id: plan.id, name: plan.name, notes: plan.notes ?? '' }
}
function cancelEdit () {
@@ -97,7 +162,7 @@ async function saveEdit () {
}
savingEdit.value = true
try {
await savePlan(editForm.value)
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 })
@@ -115,11 +180,11 @@ async function saveNew () {
}
savingNew.value = true
try {
await savePlan(newForm.value)
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 com sucesso.', life: 3000 })
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 {
@@ -127,11 +192,34 @@ async function saveNew () {
}
}
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 {
@@ -139,7 +227,7 @@ onMounted(async () => {
if (!uid) return
ownerId.value = uid
tenantId.value = tenantStore.activeTenantId || null
await load(uid)
await Promise.all([load(uid), loadServices(uid)])
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4000 })
} finally {
@@ -164,7 +252,7 @@ onMounted(async () => {
<div>
<div class="text-900 font-semibold text-lg">Convênios</div>
<div class="text-600 text-sm">
Cadastre os convênios que você atende e seus valores de tabela.
Cadastre os convênios que você atende e seus procedimentos com valores de tabela.
</div>
</div>
</div>
@@ -179,7 +267,7 @@ onMounted(async () => {
</Card>
<!-- Loading -->
<div v-if="pageLoading" class="flex justify-center py-10">
<div v-if="pageLoading || loading" class="flex justify-center py-10">
<ProgressSpinner style="width:40px;height:40px" />
</div>
@@ -195,28 +283,13 @@ onMounted(async () => {
</template>
<template #content>
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 sm:col-span-4">
<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-4">
<FloatLabel variant="on">
<InputNumber
v-model="newForm.default_value"
inputId="new-value"
mode="currency"
currency="BRL"
locale="pt-BR"
:min="0"
:minFractionDigits="2"
fluid
/>
<label for="new-value">Valor padrão da tabela (R$)</label>
</FloatLabel>
</div>
<div class="col-span-12 sm:col-span-4">
<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>
@@ -242,34 +315,19 @@ onMounted(async () => {
</Card>
<!-- Lista de convênios -->
<Card v-for="plan in plans" :key="plan.id">
<Card v-for="plan in plans" :key="plan.id" :class="{ 'opacity-60': !plan.active }">
<template #content>
<!-- Modo edição -->
<!-- Modo edição do plano -->
<template v-if="editingId === plan.id">
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 sm:col-span-4">
<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-4">
<FloatLabel variant="on">
<InputNumber
v-model="editForm.default_value"
:inputId="`edit-value-${plan.id}`"
mode="currency"
currency="BRL"
locale="pt-BR"
:min="0"
:minFractionDigits="2"
fluid
/>
<label :for="`edit-value-${plan.id}`">Valor padrão da tabela (R$)</label>
</FloatLabel>
</div>
<div class="col-span-12 sm:col-span-4">
<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>
@@ -284,25 +342,157 @@ onMounted(async () => {
<!-- Modo leitura -->
<template v-else>
<!-- Cabeçalho do plano -->
<div class="flex items-center justify-between gap-3 flex-wrap">
<div class="flex items-center gap-3">
<div class="cfg-icon-box-sm">
<div class="flex items-center gap-3 min-w-0">
<div class="cfg-icon-box-sm shrink-0">
<i class="pi pi-id-card" />
</div>
<div>
<div class="min-w-0">
<div class="font-semibold text-900">{{ plan.name }}</div>
<div class="text-sm text-color-secondary flex flex-wrap gap-x-3 gap-y-0.5 mt-0.5">
<span><b class="text-primary-500">{{ fmtBRL(plan.default_value) }}</b></span>
<span v-if="plan.notes" class="italic">{{ plan.notes }}</span>
</div>
<div v-if="plan.notes" class="text-sm text-color-secondary italic truncate">{{ plan.notes }}</div>
</div>
</div>
<div class="flex items-center gap-2">
<Tag value="Ativo" severity="success" />
<div class="flex items-center gap-2 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"
@click="expandedPlanId === plan.id ? (expandedPlanId = null, addingServicePlanId = null) : (expandedPlanId = plan.id, addingServicePlanId = null)"
/>
<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="'Desativar'" @click="removePlan(plan.id)" />
</div>
</div>
<!-- Painel expansível: procedimentos -->
<div v-if="expandedPlanId === plan.id" class="mt-4 border-t border-surface pt-4">
<!-- Lista de procedimentos (ativos e inativos) -->
<div v-if="plan.insurance_plan_services?.length" class="mb-3 flex flex-col gap-1">
<template v-for="ps in plan.insurance_plan_services" :key="ps.id">
<!-- Modo edição inline do procedimento -->
<div v-if="editingServiceId === ps.id" class="flex flex-wrap gap-2 items-end py-2 border-b border-surface">
<div class="flex-1 min-w-[140px]">
<label class="text-xs text-color-secondary mb-1 block">Nome</label>
<InputText v-model="editServiceForm.name" class="w-full" size="small" />
</div>
<div class="w-36">
<label class="text-xs text-color-secondary mb-1 block">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 class="flex gap-2">
<Button label="Cancelar" severity="secondary" outlined size="small" @click="cancelEditService" />
<Button label="Salvar" icon="pi pi-check" size="small" :loading="savingServiceEdit" @click="saveServiceEdit" />
</div>
</div>
<!-- Modo leitura do procedimento -->
<div
v-else
class="flex items-center justify-between gap-2 py-2 border-b border-surface last:border-0"
:class="{ 'opacity-60': !ps.active }"
>
<div class="flex items-center gap-2 min-w-0">
<Tag v-if="!ps.active" value="Inativo" severity="secondary" class="text-xs" />
<span class="text-sm font-medium text-900 truncate">{{ ps.name }}</span>
</div>
<div class="flex items-center gap-3 shrink-0">
<span class="text-sm font-semibold text-primary-500">{{ 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 definitivamente'"
@click="deleteService(ps.id)"
/>
</div>
</div>
</template>
</div>
<div v-else-if="addingServicePlanId !== plan.id" class="text-sm text-color-secondary mb-3 italic">
Nenhum procedimento cadastrado.
</div>
<!-- Formulário adicionar procedimento -->
<div v-if="addingServicePlanId === plan.id" class="mt-3">
<!-- Cards de serviços para auto-preencher -->
<div v-if="services.filter(s => s.active).length" class="mb-3">
<div class="text-xs text-color-secondary mb-2">Clique num serviço para pré-preencher:</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
<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>
<div class="flex flex-wrap gap-2 items-end">
<div class="flex-1 min-w-[140px]">
<label class="text-xs text-color-secondary mb-1 block">Nome do procedimento *</label>
<InputText v-model="newServiceForm.name" placeholder="Ex: Consulta" class="w-full" size="small" />
</div>
<div class="w-36">
<label class="text-xs text-color-secondary mb-1 block">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 class="flex gap-2">
<Button label="Cancelar" severity="secondary" outlined size="small" @click="cancelAddService" />
<Button label="Adicionar" icon="pi pi-check" size="small" :loading="savingService" @click="saveService(plan.id)" />
</div>
</div>
</div>
<Button
v-if="addingServicePlanId !== plan.id"
label="Adicionar procedimento"
icon="pi pi-plus"
severity="secondary"
outlined
size="small"
class="mt-2"
@click="startAddService(plan.id)"
/>
</div>
</template>
</template>
@@ -310,7 +500,7 @@ onMounted(async () => {
<Message severity="info" :closable="false">
<span class="text-sm">
O convênio selecionado em um evento preenche automaticamente o valor da sessão com o valor de tabela cadastrado aqui.
Os procedimentos ativos ficam disponíveis para seleção ao registrar uma sessão com convênio na agenda.
</span>
</Message>
@@ -340,4 +530,23 @@ onMounted(async () => {
color: var(--p-primary-500, #6366f1);
flex-shrink: 0;
}
.svc-quick-card {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.375rem 0.625rem;
border-radius: 0.5rem;
border: 1px solid var(--p-surface-200, #e5e7eb);
background: var(--p-surface-50, #f9fafb);
text-align: left;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.svc-quick-card:hover {
border-color: var(--p-primary-400, #818cf8);
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 6%, transparent);
}
.svc-quick-name { font-size: 0.75rem; font-weight: 600; color: var(--p-text-color); }
.svc-quick-price { font-size: 0.7rem; color: var(--p-text-muted-color); }
</style>