Preficicação, Convenio, Ajustes Agenda, Configurações Excessões
This commit is contained in:
Leonardo
@@ -53,6 +53,30 @@ const secoes = [
|
||||
to: '/configuracoes/precificacao',
|
||||
tags: ['Valores', 'Sessão', 'Compromisso']
|
||||
},
|
||||
{
|
||||
key: 'descontos',
|
||||
label: 'Descontos por Paciente',
|
||||
desc: 'Descontos recorrentes aplicados automaticamente por paciente.',
|
||||
icon: 'pi pi-percentage',
|
||||
to: '/configuracoes/descontos',
|
||||
tags: ['Desconto', 'Paciente', 'Automático']
|
||||
},
|
||||
{
|
||||
key: 'excecoes-financeiras',
|
||||
label: 'Exceções Financeiras',
|
||||
desc: 'O que cobrar em faltas, cancelamentos e outras situações excepcionais.',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
to: '/configuracoes/excecoes-financeiras',
|
||||
tags: ['Falta', 'Cancelamento', 'Cobrança']
|
||||
},
|
||||
{
|
||||
key: 'convenios',
|
||||
label: 'Convênios',
|
||||
desc: 'Cadastre os convênios que você atende e seus valores de tabela.',
|
||||
icon: 'pi pi-id-card',
|
||||
to: '/configuracoes/convenios',
|
||||
tags: ['Convênio', 'Plano de Saúde', 'Tabela']
|
||||
},
|
||||
|
||||
// Ative quando criar as rotas/páginas
|
||||
// {
|
||||
@@ -248,4 +272,4 @@ onBeforeUnmount(() => { _observer?.disconnect() })
|
||||
}
|
||||
.cfg-hero__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-color); }
|
||||
.cfg-hero__sub { font-size: 0.78rem; color: var(--text-color-secondary); margin-top: 2px; }
|
||||
</style>
|
||||
</style>
|
||||
@@ -0,0 +1,343 @@
|
||||
<!-- src/layout/configuracoes/ConfiguracoesConveniosPage.vue -->
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { supabase } from '@/lib/supabase/client'
|
||||
import { useTenantStore } from '@/stores/tenantStore'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
|
||||
const toast = useToast()
|
||||
const tenantStore = useTenantStore()
|
||||
|
||||
const ownerId = ref(null)
|
||||
const tenantId = ref(null)
|
||||
const pageLoading = ref(true)
|
||||
const plans = ref([])
|
||||
|
||||
// ── Formulário ───────────────────────────────────────────────────────
|
||||
const emptyForm = () => ({ name: '', notes: '', default_value: null })
|
||||
|
||||
const newForm = ref(emptyForm())
|
||||
const addingNew = ref(false)
|
||||
const savingNew = ref(false)
|
||||
|
||||
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 || []
|
||||
}
|
||||
|
||||
// ── 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
|
||||
} 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
|
||||
}
|
||||
}
|
||||
|
||||
// ── 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 })
|
||||
}
|
||||
|
||||
// ── Edit helpers ──────────────────────────────────────────────────────
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
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 savePlan(editForm.value)
|
||||
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 savePlan(newForm.value)
|
||||
await load(ownerId.value)
|
||||
newForm.value = emptyForm()
|
||||
addingNew.value = false
|
||||
toast.add({ severity: 'success', summary: 'Adicionado', detail: 'Convênio criado com sucesso.', life: 3000 })
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao criar.', life: 4000 })
|
||||
} finally {
|
||||
savingNew.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function fmtBRL (v) {
|
||||
if (v == null || v === '') return '—'
|
||||
return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
|
||||
}
|
||||
|
||||
// ── 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 load(uid)
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4000 })
|
||||
} finally {
|
||||
pageLoading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toast />
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- Header -->
|
||||
<Card>
|
||||
<template #content>
|
||||
<div class="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="cfg-icon-box">
|
||||
<i class="pi pi-id-card text-lg" />
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
label="Novo convênio"
|
||||
icon="pi pi-plus"
|
||||
:disabled="pageLoading || addingNew"
|
||||
@click="addingNew = true; cancelEdit()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="pageLoading" class="flex justify-center py-10">
|
||||
<ProgressSpinner style="width:40px;height:40px" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
|
||||
<!-- Formulário novo convênio -->
|
||||
<Card v-if="addingNew">
|
||||
<template #title>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-plus-circle text-primary-500" />
|
||||
<span>Novo convênio</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
<div class="col-span-12 sm:col-span-4">
|
||||
<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">
|
||||
<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-4">
|
||||
<Button label="Cancelar" severity="secondary" outlined @click="addingNew = false; newForm = emptyForm()" />
|
||||
<Button label="Salvar" icon="pi pi-check" :loading="savingNew" @click="saveNew" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Lista vazia -->
|
||||
<Card v-if="!plans.length && !addingNew">
|
||||
<template #content>
|
||||
<div class="text-center py-6 text-color-secondary">
|
||||
<i class="pi pi-id-card text-4xl opacity-30 mb-3 block" />
|
||||
<div class="font-medium mb-1">Nenhum convênio cadastrado</div>
|
||||
<div class="text-sm">Clique em "Novo convênio" para começar.</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Lista de convênios -->
|
||||
<Card v-for="plan in plans" :key="plan.id">
|
||||
<template #content>
|
||||
|
||||
<!-- Modo edição -->
|
||||
<template v-if="editingId === plan.id">
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
<div class="col-span-12 sm:col-span-4">
|
||||
<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">
|
||||
<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-4">
|
||||
<Button label="Cancelar" severity="secondary" outlined @click="cancelEdit" />
|
||||
<Button label="Salvar" icon="pi pi-check" :loading="savingEdit" @click="saveEdit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Modo leitura -->
|
||||
<template v-else>
|
||||
<div class="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="cfg-icon-box-sm">
|
||||
<i class="pi pi-id-card" />
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Tag value="Ativo" severity="success" />
|
||||
<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>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<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.
|
||||
</span>
|
||||
</Message>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cfg-icon-box {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.875rem;
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 12%, transparent);
|
||||
color: var(--p-primary-500, #6366f1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cfg-icon-box-sm {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.625rem;
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 10%, transparent);
|
||||
color: var(--p-primary-500, #6366f1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,590 @@
|
||||
<!-- src/layout/configuracoes/ConfiguracoesDescontosPage.vue -->
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { supabase } from '@/lib/supabase/client'
|
||||
import { useTenantStore } from '@/stores/tenantStore'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { usePatientDiscounts } from '@/features/agenda/composables/usePatientDiscounts'
|
||||
|
||||
const toast = useToast()
|
||||
const tenantStore = useTenantStore()
|
||||
|
||||
const { discounts, loading, error: discountsError, load, save, remove } = usePatientDiscounts()
|
||||
|
||||
const ownerId = ref(null)
|
||||
const tenantId = ref(null)
|
||||
const pageLoading = ref(true)
|
||||
const patients = ref([])
|
||||
|
||||
// ── Formulário ────────────────────────────────────────────────────────
|
||||
const emptyForm = () => ({
|
||||
patient_id: null,
|
||||
discount_pct: 0,
|
||||
discount_flat: 0,
|
||||
reason: '',
|
||||
active_from: null,
|
||||
active_to: null,
|
||||
})
|
||||
|
||||
const newForm = ref(emptyForm())
|
||||
const addingNew = ref(false)
|
||||
const savingNew = ref(false)
|
||||
|
||||
// ── Edição inline ─────────────────────────────────────────────────────
|
||||
const editingId = ref(null)
|
||||
const editForm = ref({})
|
||||
const savingEdit = ref(false)
|
||||
|
||||
// ── Lookup de nome do paciente ────────────────────────────────────────
|
||||
const patientMap = computed(() => {
|
||||
const map = {}
|
||||
for (const p of patients.value) map[p.id] = p.nome_completo
|
||||
return map
|
||||
})
|
||||
|
||||
function patientName (pid) {
|
||||
return patientMap.value[pid] || pid || '—'
|
||||
}
|
||||
|
||||
// ── Editar ────────────────────────────────────────────────────────────
|
||||
function startEdit (disc) {
|
||||
editingId.value = disc.id
|
||||
editForm.value = {
|
||||
id: disc.id,
|
||||
owner_id: ownerId.value,
|
||||
tenant_id: tenantId.value,
|
||||
patient_id: disc.patient_id,
|
||||
discount_pct: disc.discount_pct != null ? Number(disc.discount_pct) : 0,
|
||||
discount_flat: disc.discount_flat != null ? Number(disc.discount_flat) : 0,
|
||||
reason: disc.reason ?? '',
|
||||
active_from: disc.active_from ? new Date(disc.active_from) : null,
|
||||
active_to: disc.active_to ? new Date(disc.active_to) : null,
|
||||
}
|
||||
}
|
||||
|
||||
function cancelEdit () {
|
||||
editingId.value = null
|
||||
editForm.value = {}
|
||||
}
|
||||
|
||||
async function saveEdit () {
|
||||
if (!editForm.value.discount_pct && !editForm.value.discount_flat) {
|
||||
toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Informe ao menos um desconto (% ou R$).', life: 3000 })
|
||||
return
|
||||
}
|
||||
savingEdit.value = true
|
||||
try {
|
||||
await save({
|
||||
...editForm.value,
|
||||
discount_pct: editForm.value.discount_pct ?? 0,
|
||||
discount_flat: editForm.value.discount_flat ?? 0,
|
||||
reason: editForm.value.reason?.trim() || null,
|
||||
active_from: editForm.value.active_from ? editForm.value.active_from.toISOString().slice(0, 10) : null,
|
||||
active_to: editForm.value.active_to ? editForm.value.active_to.toISOString().slice(0, 10) : null,
|
||||
})
|
||||
await load(ownerId.value)
|
||||
cancelEdit()
|
||||
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Desconto atualizado.', life: 3000 })
|
||||
} catch {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: discountsError.value || 'Falha ao salvar.', life: 4000 })
|
||||
} finally {
|
||||
savingEdit.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── Novo desconto ─────────────────────────────────────────────────────
|
||||
async function saveNew () {
|
||||
if (!newForm.value.patient_id) {
|
||||
toast.add({ severity: 'warn', summary: 'Campo obrigatório', detail: 'Selecione um paciente.', life: 3000 })
|
||||
return
|
||||
}
|
||||
if (!newForm.value.discount_pct && !newForm.value.discount_flat) {
|
||||
toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Informe ao menos um desconto (% ou R$).', life: 3000 })
|
||||
return
|
||||
}
|
||||
savingNew.value = true
|
||||
try {
|
||||
await save({
|
||||
owner_id: ownerId.value,
|
||||
tenant_id: tenantId.value,
|
||||
patient_id: newForm.value.patient_id,
|
||||
discount_pct: newForm.value.discount_pct ?? 0,
|
||||
discount_flat: newForm.value.discount_flat ?? 0,
|
||||
reason: newForm.value.reason?.trim() || null,
|
||||
active_from: newForm.value.active_from ? newForm.value.active_from.toISOString().slice(0, 10) : null,
|
||||
active_to: newForm.value.active_to ? newForm.value.active_to.toISOString().slice(0, 10) : null,
|
||||
active: true,
|
||||
})
|
||||
await load(ownerId.value)
|
||||
newForm.value = emptyForm()
|
||||
addingNew.value = false
|
||||
toast.add({ severity: 'success', summary: 'Adicionado', detail: 'Desconto criado com sucesso.', life: 3000 })
|
||||
} catch {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: discountsError.value || 'Falha ao criar.', life: 4000 })
|
||||
} finally {
|
||||
savingNew.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── Desativar (soft-delete) ───────────────────────────────────────────
|
||||
async function confirmRemove (id) {
|
||||
try {
|
||||
await remove(id)
|
||||
toast.add({ severity: 'success', summary: 'Desativado', detail: 'Desconto desativado.', life: 3000 })
|
||||
} catch {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: discountsError.value || 'Falha ao desativar.', life: 4000 })
|
||||
}
|
||||
}
|
||||
|
||||
// ── Helpers de exibição ───────────────────────────────────────────────
|
||||
function fmtBRL (v) {
|
||||
if (v == null || v === '' || Number(v) === 0) return null
|
||||
return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
|
||||
}
|
||||
|
||||
function fmtPct (v) {
|
||||
if (v == null || Number(v) === 0) return null
|
||||
return `${Number(v).toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 2 })}%`
|
||||
}
|
||||
|
||||
function fmtDate (v) {
|
||||
if (!v) return null
|
||||
const d = new Date(v)
|
||||
return d.toLocaleDateString('pt-BR')
|
||||
}
|
||||
|
||||
// ── 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
|
||||
|
||||
const [, { data: pData }] = await Promise.all([
|
||||
load(uid),
|
||||
supabase
|
||||
.from('patients')
|
||||
.select('id, nome_completo')
|
||||
.eq('owner_id', uid)
|
||||
.eq('status', 'Ativo')
|
||||
.order('nome_completo', { ascending: true }),
|
||||
])
|
||||
|
||||
patients.value = pData || []
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4000 })
|
||||
} finally {
|
||||
pageLoading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toast />
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- Header -->
|
||||
<Card>
|
||||
<template #content>
|
||||
<div class="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="cfg-icon-box">
|
||||
<i class="pi pi-percentage text-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-900 font-semibold text-lg">Descontos por Paciente</div>
|
||||
<div class="text-600 text-sm">
|
||||
Configure descontos recorrentes aplicados automaticamente por paciente.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
label="Novo desconto"
|
||||
icon="pi pi-plus"
|
||||
:disabled="pageLoading || addingNew"
|
||||
@click="addingNew = true; cancelEdit()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="pageLoading || loading" class="flex justify-center py-10">
|
||||
<ProgressSpinner style="width:40px;height:40px" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
|
||||
<!-- Lista de descontos -->
|
||||
<Card v-if="discounts.length || addingNew">
|
||||
<template #content>
|
||||
<div class="flex flex-col gap-3">
|
||||
|
||||
<template v-for="disc in discounts" :key="disc.id">
|
||||
|
||||
<!-- Modo edição inline -->
|
||||
<div v-if="editingId === disc.id" class="discount-row editing">
|
||||
<div class="grid grid-cols-12 gap-3 flex-1">
|
||||
|
||||
<!-- Paciente (desabilitado na edição) -->
|
||||
<div class="col-span-12 sm:col-span-4">
|
||||
<FloatLabel variant="on">
|
||||
<Select
|
||||
v-model="editForm.patient_id"
|
||||
inputId="edit-patient"
|
||||
:options="patients"
|
||||
optionLabel="nome_completo"
|
||||
optionValue="id"
|
||||
disabled
|
||||
class="w-full"
|
||||
/>
|
||||
<label for="edit-patient">Paciente</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Desconto % -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="editForm.discount_pct"
|
||||
inputId="edit-pct"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="0"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
fluid
|
||||
/>
|
||||
<label for="edit-pct">Desconto %</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Desconto R$ -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="editForm.discount_flat"
|
||||
inputId="edit-flat"
|
||||
mode="currency"
|
||||
currency="BRL"
|
||||
locale="pt-BR"
|
||||
:min="0"
|
||||
fluid
|
||||
/>
|
||||
<label for="edit-flat">Desconto R$</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Vigência: de -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker
|
||||
v-model="editForm.active_from"
|
||||
inputId="edit-from"
|
||||
dateFormat="dd/mm/yy"
|
||||
showButtonBar
|
||||
fluid
|
||||
/>
|
||||
<label for="edit-from">Vigência: de</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Vigência: até -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker
|
||||
v-model="editForm.active_to"
|
||||
inputId="edit-to"
|
||||
dateFormat="dd/mm/yy"
|
||||
showButtonBar
|
||||
fluid
|
||||
/>
|
||||
<label for="edit-to">Vigência: até</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Motivo -->
|
||||
<div class="col-span-12">
|
||||
<FloatLabel variant="on">
|
||||
<InputText
|
||||
v-model="editForm.reason"
|
||||
inputId="edit-reason"
|
||||
class="w-full"
|
||||
/>
|
||||
<label for="edit-reason">Motivo (opcional)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
size="small"
|
||||
:loading="savingEdit"
|
||||
@click="saveEdit"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
outlined
|
||||
@click="cancelEdit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modo leitura -->
|
||||
<div v-else class="discount-row">
|
||||
<div class="discount-info">
|
||||
<div class="font-medium text-900">{{ patientName(disc.patient_id) }}</div>
|
||||
<div class="flex flex-wrap gap-2 mt-1">
|
||||
<span v-if="fmtPct(disc.discount_pct)" class="discount-badge">
|
||||
{{ fmtPct(disc.discount_pct) }}
|
||||
</span>
|
||||
<span v-if="fmtBRL(disc.discount_flat)" class="discount-badge">
|
||||
{{ fmtBRL(disc.discount_flat) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm text-600 mt-0.5">
|
||||
<span v-if="disc.active_from || disc.active_to">
|
||||
{{ fmtDate(disc.active_from) || 'Indefinido' }} →
|
||||
{{ fmtDate(disc.active_to) || 'Indefinido' }}
|
||||
</span>
|
||||
<span v-else>Vigência indefinida</span>
|
||||
</div>
|
||||
<div v-if="disc.reason" class="text-sm text-500 mt-0.5 italic">
|
||||
{{ disc.reason }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount-meta">
|
||||
<Tag
|
||||
:value="disc.active ? 'Ativo' : 'Inativo'"
|
||||
:severity="disc.active ? 'success' : 'secondary'"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2 ml-auto">
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
text
|
||||
@click="startEdit(disc); addingNew = false"
|
||||
/>
|
||||
<Button
|
||||
v-if="disc.active"
|
||||
icon="pi pi-ban"
|
||||
size="small"
|
||||
severity="danger"
|
||||
text
|
||||
v-tooltip.top="'Desativar'"
|
||||
@click="confirmRemove(disc.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- Divisor antes do form novo -->
|
||||
<Divider v-if="discounts.length && addingNew" />
|
||||
|
||||
<!-- Formulário novo desconto inline -->
|
||||
<div v-if="addingNew" class="discount-row new-row">
|
||||
<div class="grid grid-cols-12 gap-3 flex-1">
|
||||
|
||||
<!-- Paciente -->
|
||||
<div class="col-span-12 sm:col-span-4">
|
||||
<FloatLabel variant="on">
|
||||
<Select
|
||||
v-model="newForm.patient_id"
|
||||
inputId="new-patient"
|
||||
:options="patients"
|
||||
optionLabel="nome_completo"
|
||||
optionValue="id"
|
||||
filter
|
||||
class="w-full"
|
||||
/>
|
||||
<label for="new-patient">Paciente *</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Desconto % -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="newForm.discount_pct"
|
||||
inputId="new-pct"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="0"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
fluid
|
||||
/>
|
||||
<label for="new-pct">Desconto %</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Desconto R$ -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="newForm.discount_flat"
|
||||
inputId="new-flat"
|
||||
mode="currency"
|
||||
currency="BRL"
|
||||
locale="pt-BR"
|
||||
:min="0"
|
||||
fluid
|
||||
/>
|
||||
<label for="new-flat">Desconto R$</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Vigência: de -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker
|
||||
v-model="newForm.active_from"
|
||||
inputId="new-from"
|
||||
dateFormat="dd/mm/yy"
|
||||
showButtonBar
|
||||
fluid
|
||||
/>
|
||||
<label for="new-from">Vigência: de</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Vigência: até -->
|
||||
<div class="col-span-6 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker
|
||||
v-model="newForm.active_to"
|
||||
inputId="new-to"
|
||||
dateFormat="dd/mm/yy"
|
||||
showButtonBar
|
||||
fluid
|
||||
/>
|
||||
<label for="new-to">Vigência: até</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Motivo -->
|
||||
<div class="col-span-12">
|
||||
<FloatLabel variant="on">
|
||||
<InputText
|
||||
v-model="newForm.reason"
|
||||
inputId="new-reason"
|
||||
class="w-full"
|
||||
/>
|
||||
<label for="new-reason">Motivo (opcional)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
label="Adicionar"
|
||||
size="small"
|
||||
:loading="savingNew"
|
||||
@click="saveNew"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
outlined
|
||||
@click="addingNew = false; newForm = emptyForm()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Estado vazio -->
|
||||
<Card v-else>
|
||||
<template #content>
|
||||
<div class="flex flex-col items-center gap-3 py-6 text-center">
|
||||
<i class="pi pi-percentage text-4xl text-400" />
|
||||
<div class="text-600">Nenhum desconto cadastrado ainda.</div>
|
||||
<Button
|
||||
label="Adicionar primeiro desconto"
|
||||
icon="pi pi-plus"
|
||||
outlined
|
||||
@click="addingNew = true"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Dica -->
|
||||
<Message severity="info" :closable="false">
|
||||
<span class="text-sm">
|
||||
Descontos ativos são aplicados automaticamente ao adicionar serviços em sessões do paciente correspondente.
|
||||
Você ainda pode ajustá-los manualmente no diálogo de cada evento.
|
||||
</span>
|
||||
</Message>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cfg-icon-box {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.875rem;
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 12%, transparent);
|
||||
color: var(--p-primary-500, #6366f1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.discount-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--surface-border);
|
||||
background: var(--surface-ground);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.discount-row.editing {
|
||||
border-color: var(--p-primary-300, #a5b4fc);
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 4%, var(--surface-ground));
|
||||
}
|
||||
|
||||
.discount-row.new-row {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.discount-info {
|
||||
flex: 1;
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.discount-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
font-weight: 600;
|
||||
color: var(--p-primary-600, #4f46e5);
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 10%, transparent);
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,366 @@
|
||||
<!-- src/layout/configuracoes/ConfiguracoesExcecoesFinanceirasPage.vue -->
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { supabase } from '@/lib/supabase/client'
|
||||
import { useTenantStore } from '@/stores/tenantStore'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { useFinancialExceptions } from '@/features/agenda/composables/useFinancialExceptions'
|
||||
|
||||
const toast = useToast()
|
||||
const tenantStore = useTenantStore()
|
||||
|
||||
const { exceptions, loading, error: exceptionsError, load, save } = useFinancialExceptions()
|
||||
|
||||
const ownerId = ref(null)
|
||||
const tenantId = ref(null)
|
||||
const pageLoading = ref(true)
|
||||
|
||||
// ── Tipos de exceção fixos ────────────────────────────────────────────
|
||||
const exceptionTypes = [
|
||||
{ value: 'patient_no_show', label: 'Paciente não compareceu' },
|
||||
{ value: 'patient_cancellation', label: 'Cancelamento pelo paciente' },
|
||||
{ value: 'professional_cancellation', label: 'Cancelamento pelo profissional' },
|
||||
]
|
||||
|
||||
// ── Opções de modo de cobrança ────────────────────────────────────────
|
||||
const chargeModeOptions = [
|
||||
{ value: 'none', label: 'Não cobrar' },
|
||||
{ value: 'full', label: 'Sessão completa' },
|
||||
{ value: 'fixed_fee', label: 'Taxa fixa' },
|
||||
{ value: 'percentage', label: 'Percentual da sessão' },
|
||||
]
|
||||
|
||||
// ── Severidade do badge por charge_mode ──────────────────────────────
|
||||
const chargeModeSeverity = {
|
||||
none: 'secondary',
|
||||
full: 'danger',
|
||||
fixed_fee: 'warn',
|
||||
percentage: 'info',
|
||||
}
|
||||
|
||||
// ── Lookup: para cada exception_type, o registro ativo (owner > clínica) ──
|
||||
// Prioridade: registro próprio do owner > registro global (owner_id IS NULL)
|
||||
function recordFor (type) {
|
||||
const own = exceptions.value.find(e => e.exception_type === type && e.owner_id !== null)
|
||||
const global = exceptions.value.find(e => e.exception_type === type && e.owner_id === null)
|
||||
return own ?? global ?? null
|
||||
}
|
||||
|
||||
function isGlobalRecord (rec) {
|
||||
return rec?.owner_id === null
|
||||
}
|
||||
|
||||
// ── Texto descritivo do charge_mode ──────────────────────────────────
|
||||
function chargeModeLabel (mode) {
|
||||
return chargeModeOptions.find(o => o.value === mode)?.label ?? mode ?? '—'
|
||||
}
|
||||
|
||||
function fmtBRL (v) {
|
||||
if (v == null || v === '') return '—'
|
||||
return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
|
||||
}
|
||||
|
||||
function summaryFor (rec) {
|
||||
if (!rec) return 'Não configurado (padrão: não cobrar)'
|
||||
switch (rec.charge_mode) {
|
||||
case 'none': return 'Não cobrar'
|
||||
case 'full': return 'Cobrar sessão completa'
|
||||
case 'fixed_fee': return `Taxa fixa: ${fmtBRL(rec.charge_value)}`
|
||||
case 'percentage': return `${rec.charge_pct ?? 0}% da sessão`
|
||||
default: return '—'
|
||||
}
|
||||
}
|
||||
|
||||
// ── Edição inline ─────────────────────────────────────────────────────
|
||||
const editingType = ref(null)
|
||||
const editForm = ref({})
|
||||
const savingEdit = ref(false)
|
||||
|
||||
function startEdit (type) {
|
||||
const rec = recordFor(type)
|
||||
editingType.value = type
|
||||
editForm.value = {
|
||||
id: rec?.id ?? null,
|
||||
exception_type: type,
|
||||
charge_mode: rec?.charge_mode ?? 'none',
|
||||
charge_value: rec?.charge_value != null ? Number(rec.charge_value) : null,
|
||||
charge_pct: rec?.charge_pct != null ? Number(rec.charge_pct) : null,
|
||||
min_hours_notice: rec?.min_hours_notice != null ? Number(rec.min_hours_notice) : null,
|
||||
}
|
||||
}
|
||||
|
||||
function cancelEdit () {
|
||||
editingType.value = null
|
||||
editForm.value = {}
|
||||
}
|
||||
|
||||
async function saveEdit () {
|
||||
savingEdit.value = true
|
||||
try {
|
||||
await save({
|
||||
id: editForm.value.id,
|
||||
owner_id: ownerId.value,
|
||||
tenant_id: tenantId.value,
|
||||
exception_type: editForm.value.exception_type,
|
||||
charge_mode: editForm.value.charge_mode,
|
||||
charge_value: editForm.value.charge_mode === 'fixed_fee' ? (editForm.value.charge_value ?? null) : null,
|
||||
charge_pct: editForm.value.charge_mode === 'percentage' ? (editForm.value.charge_pct ?? null) : null,
|
||||
min_hours_notice: editForm.value.exception_type === 'patient_cancellation'
|
||||
? (editForm.value.min_hours_notice ?? null)
|
||||
: null,
|
||||
})
|
||||
await load(ownerId.value)
|
||||
cancelEdit()
|
||||
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Configuração atualizada.', life: 3000 })
|
||||
} catch {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: exceptionsError.value || 'Falha ao salvar.', life: 4000 })
|
||||
} finally {
|
||||
savingEdit.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── Computed auxiliares usados no template ────────────────────────────
|
||||
const showChargeValue = computed(() => editForm.value.charge_mode === 'fixed_fee')
|
||||
const showChargePct = computed(() => editForm.value.charge_mode === 'percentage')
|
||||
const showMinHours = computed(() => editForm.value.exception_type === 'patient_cancellation')
|
||||
|
||||
// ── 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 load(uid)
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4000 })
|
||||
} finally {
|
||||
pageLoading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toast />
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- Header -->
|
||||
<Card>
|
||||
<template #content>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="cfg-icon-box">
|
||||
<i class="pi pi-exclamation-triangle text-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-900 font-semibold text-lg">Exceções Financeiras</div>
|
||||
<div class="text-600 text-sm">
|
||||
Defina o que cobrar em situações excepcionais de cancelamento ou falta.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="pageLoading || loading" class="flex justify-center py-10">
|
||||
<ProgressSpinner style="width:40px;height:40px" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
|
||||
<!-- Um card por tipo de exceção -->
|
||||
<Card v-for="et in exceptionTypes" :key="et.value">
|
||||
<template #content>
|
||||
|
||||
<!-- Modo leitura -->
|
||||
<template v-if="editingType !== et.value">
|
||||
<div class="exception-row">
|
||||
<div class="exception-info">
|
||||
<div class="font-semibold text-900 text-base">{{ et.label }}</div>
|
||||
|
||||
<template v-if="recordFor(et.value)">
|
||||
<div class="text-sm text-600 mt-1">
|
||||
{{ summaryFor(recordFor(et.value)) }}
|
||||
<span
|
||||
v-if="et.value === 'patient_cancellation' && recordFor(et.value)?.min_hours_notice"
|
||||
class="text-500"
|
||||
>
|
||||
— cobrar apenas se cancelado com menos de
|
||||
{{ recordFor(et.value).min_hours_notice }}h de antecedência
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-2 flex-wrap">
|
||||
<Tag
|
||||
:value="chargeModeLabel(recordFor(et.value)?.charge_mode)"
|
||||
:severity="chargeModeSeverity[recordFor(et.value)?.charge_mode] ?? 'secondary'"
|
||||
/>
|
||||
<Tag
|
||||
v-if="isGlobalRecord(recordFor(et.value))"
|
||||
value="Regra da clínica"
|
||||
severity="secondary"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="text-sm text-500 mt-1 italic">
|
||||
Não configurado — comportamento padrão: não cobrar.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
v-if="!isGlobalRecord(recordFor(et.value))"
|
||||
label="Configurar"
|
||||
icon="pi pi-cog"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
outlined
|
||||
class="ml-auto flex-shrink-0"
|
||||
@click="startEdit(et.value)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Modo edição inline -->
|
||||
<template v-else>
|
||||
<div class="exception-row editing">
|
||||
<div class="flex flex-col gap-4 flex-1">
|
||||
|
||||
<div class="font-semibold text-900">{{ et.label }}</div>
|
||||
|
||||
<!-- Modo de cobrança -->
|
||||
<div>
|
||||
<label class="text-sm text-600 block mb-2">Modo de cobrança</label>
|
||||
<SelectButton
|
||||
v-model="editForm.charge_mode"
|
||||
:options="chargeModeOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
class="flex-wrap"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
|
||||
<!-- Taxa fixa (R$) -->
|
||||
<div v-if="showChargeValue" class="col-span-12 sm:col-span-4">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="editForm.charge_value"
|
||||
inputId="edit-charge-value"
|
||||
mode="currency"
|
||||
currency="BRL"
|
||||
locale="pt-BR"
|
||||
:min="0"
|
||||
fluid
|
||||
/>
|
||||
<label for="edit-charge-value">Taxa fixa (R$)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Percentual (%) -->
|
||||
<div v-if="showChargePct" class="col-span-12 sm:col-span-4">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="editForm.charge_pct"
|
||||
inputId="edit-charge-pct"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="0"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
fluid
|
||||
/>
|
||||
<label for="edit-charge-pct">Percentual da sessão (%)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Antecedência mínima (apenas patient_cancellation) -->
|
||||
<div v-if="showMinHours" class="col-span-12 sm:col-span-5">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="editForm.min_hours_notice"
|
||||
inputId="edit-min-hours"
|
||||
:min="0"
|
||||
:max="720"
|
||||
suffix=" h"
|
||||
fluid
|
||||
showButtons
|
||||
/>
|
||||
<label for="edit-min-hours">Cobrar se cancelado com menos de X horas (vazio = sempre)</label>
|
||||
</FloatLabel>
|
||||
<small class="text-500 mt-1 block">
|
||||
Deixe em branco para cobrar independentemente da antecedência.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
label="Salvar"
|
||||
size="small"
|
||||
:loading="savingEdit"
|
||||
@click="saveEdit"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
outlined
|
||||
@click="cancelEdit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Dica -->
|
||||
<Message severity="info" :closable="false">
|
||||
<span class="text-sm">
|
||||
Estas configurações definem o comportamento padrão de cobrança. Você pode
|
||||
ajustá-las individualmente em cada evento na agenda.
|
||||
</span>
|
||||
</Message>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cfg-icon-box {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.875rem;
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 12%, transparent);
|
||||
color: var(--p-primary-500, #6366f1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.exception-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.exception-row.editing {
|
||||
border: 1px solid var(--p-primary-300, #a5b4fc);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 4%, var(--surface-ground));
|
||||
}
|
||||
|
||||
.exception-info {
|
||||
flex: 1;
|
||||
min-width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +1,116 @@
|
||||
<!-- src/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue -->
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { supabase } from '@/lib/supabase/client'
|
||||
import { useTenantStore } from '@/stores/tenantStore'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { useServices } from '@/features/agenda/composables/useServices'
|
||||
|
||||
const toast = useToast()
|
||||
const tenantStore = useTenantStore()
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
|
||||
const ownerId = ref(null)
|
||||
const tenantId = ref(null)
|
||||
const { services, loading, error: servicesError, load, save, remove } = useServices()
|
||||
|
||||
// ── Tipos de compromisso do tenant ─────────────────────────────────
|
||||
const commitments = ref([]) // [{ id, label, native_key }]
|
||||
const ownerId = ref(null)
|
||||
const tenantId = ref(null)
|
||||
const slotMode = ref('fixed')
|
||||
const pageLoading = ref(true)
|
||||
|
||||
// ── Preços: Map<commitmentId | '__default__', { price, notes }> ────
|
||||
// '__default__' = linha com determined_commitment_id IS NULL
|
||||
const prices = ref({}) // { [key]: { price: number|null, notes: '' } }
|
||||
const isDynamic = computed(() => slotMode.value === 'dynamic')
|
||||
|
||||
// ── Carregar commitments do tenant ─────────────────────────────────
|
||||
async function loadCommitments () {
|
||||
if (!tenantId.value) return
|
||||
const { data, error } = await supabase
|
||||
.from('determined_commitments')
|
||||
.select('id, name, native_key, active')
|
||||
.eq('tenant_id', tenantId.value)
|
||||
.eq('active', true)
|
||||
.order('name')
|
||||
// ── Formulário novo serviço ──────────────────────────────────────────
|
||||
const emptyForm = () => ({ name: '', description: '', price: null, duration_min: null })
|
||||
|
||||
if (error) throw error
|
||||
const newForm = ref(emptyForm())
|
||||
const addingNew = ref(false)
|
||||
const savingNew = ref(false)
|
||||
|
||||
commitments.value = data || []
|
||||
}
|
||||
// ── Edição inline ────────────────────────────────────────────────────
|
||||
const editingId = ref(null)
|
||||
const editForm = ref({})
|
||||
const savingEdit = ref(false)
|
||||
|
||||
// ── Carregar preços existentes ──────────────────────────────────────
|
||||
async function loadPrices (uid) {
|
||||
const { data, error } = await supabase
|
||||
.from('professional_pricing')
|
||||
.select('id, determined_commitment_id, price, notes')
|
||||
.eq('owner_id', uid)
|
||||
|
||||
if (error) throw error
|
||||
|
||||
const map = {}
|
||||
for (const row of (data || [])) {
|
||||
const key = row.determined_commitment_id ?? '__default__'
|
||||
map[key] = { price: row.price != null ? Number(row.price) : null, notes: row.notes ?? '' }
|
||||
}
|
||||
prices.value = map
|
||||
}
|
||||
|
||||
// ── Garantir que todos os commitments + default têm entrada no mapa
|
||||
function ensureDefaults () {
|
||||
if (!prices.value['__default__']) {
|
||||
prices.value['__default__'] = { price: null, notes: '' }
|
||||
}
|
||||
for (const c of commitments.value) {
|
||||
if (!prices.value[c.id]) {
|
||||
prices.value[c.id] = { price: null, notes: '' }
|
||||
}
|
||||
function startEdit (svc) {
|
||||
editingId.value = svc.id
|
||||
editForm.value = {
|
||||
id: svc.id,
|
||||
owner_id: ownerId.value,
|
||||
tenant_id: tenantId.value,
|
||||
name: svc.name,
|
||||
description: svc.description ?? '',
|
||||
price: svc.price != null ? Number(svc.price) : null,
|
||||
duration_min: svc.duration_min ?? null,
|
||||
}
|
||||
}
|
||||
|
||||
// ── Mount ───────────────────────────────────────────────────────────
|
||||
function cancelEdit () {
|
||||
editingId.value = null
|
||||
editForm.value = {}
|
||||
}
|
||||
|
||||
async function saveEdit () {
|
||||
if (!editForm.value.name?.trim() || editForm.value.price == null) {
|
||||
toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Nome e preço são obrigatórios.', life: 3000 })
|
||||
return
|
||||
}
|
||||
savingEdit.value = true
|
||||
try {
|
||||
await save({
|
||||
...editForm.value,
|
||||
name: editForm.value.name.trim(),
|
||||
description: editForm.value.description?.trim() || null,
|
||||
duration_min: isDynamic.value ? (editForm.value.duration_min ?? null) : null,
|
||||
})
|
||||
await load(ownerId.value)
|
||||
cancelEdit()
|
||||
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Serviço atualizado.', life: 3000 })
|
||||
} catch {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: servicesError.value || 'Falha ao salvar.', life: 4000 })
|
||||
} finally {
|
||||
savingEdit.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveNew () {
|
||||
if (!newForm.value.name?.trim() || newForm.value.price == null) {
|
||||
toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Nome e preço são obrigatórios.', life: 3000 })
|
||||
return
|
||||
}
|
||||
savingNew.value = true
|
||||
try {
|
||||
await save({
|
||||
owner_id: ownerId.value,
|
||||
tenant_id: tenantId.value,
|
||||
name: newForm.value.name.trim(),
|
||||
description: newForm.value.description?.trim() || null,
|
||||
price: newForm.value.price,
|
||||
duration_min: isDynamic.value ? (newForm.value.duration_min ?? null) : null,
|
||||
})
|
||||
await load(ownerId.value)
|
||||
newForm.value = emptyForm()
|
||||
addingNew.value = false
|
||||
toast.add({ severity: 'success', summary: 'Adicionado', detail: 'Serviço criado com sucesso.', life: 3000 })
|
||||
} catch {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: servicesError.value || 'Falha ao criar.', life: 4000 })
|
||||
} finally {
|
||||
savingNew.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmRemove (id) {
|
||||
try {
|
||||
await remove(id)
|
||||
toast.add({ severity: 'success', summary: 'Removido', detail: 'Serviço removido.', life: 3000 })
|
||||
} catch {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: servicesError.value || 'Falha ao remover.', life: 4000 })
|
||||
}
|
||||
}
|
||||
|
||||
function fmtBRL (v) {
|
||||
if (v == null || v === '') return '—'
|
||||
return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const uid = tenantStore.user?.id || (await supabase.auth.getUser()).data?.user?.id
|
||||
@@ -73,78 +119,21 @@ onMounted(async () => {
|
||||
ownerId.value = uid
|
||||
tenantId.value = tenantStore.activeTenantId || null
|
||||
|
||||
await Promise.all([
|
||||
loadCommitments(),
|
||||
loadPrices(uid),
|
||||
])
|
||||
const { data: cfg } = await supabase
|
||||
.from('agenda_configuracoes')
|
||||
.select('slot_mode')
|
||||
.eq('owner_id', uid)
|
||||
.maybeSingle()
|
||||
|
||||
ensureDefaults()
|
||||
slotMode.value = cfg?.slot_mode ?? 'fixed'
|
||||
|
||||
await load(uid)
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4000 })
|
||||
} finally {
|
||||
loading.value = false
|
||||
pageLoading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// ── Salvar todos os preços configurados ────────────────────────────
|
||||
async function save () {
|
||||
if (!ownerId.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
const uid = ownerId.value
|
||||
const tid = tenantId.value
|
||||
|
||||
const rows = []
|
||||
|
||||
// Linha padrão (NULL commitment)
|
||||
const def = prices.value['__default__']
|
||||
if (def?.price != null && def.price !== '') {
|
||||
rows.push({
|
||||
owner_id: uid,
|
||||
tenant_id: tid,
|
||||
determined_commitment_id: null,
|
||||
price: Number(def.price),
|
||||
notes: def.notes?.trim() || null,
|
||||
})
|
||||
}
|
||||
|
||||
// Linhas por tipo de compromisso
|
||||
for (const c of commitments.value) {
|
||||
const entry = prices.value[c.id]
|
||||
if (entry?.price != null && entry.price !== '') {
|
||||
rows.push({
|
||||
owner_id: uid,
|
||||
tenant_id: tid,
|
||||
determined_commitment_id: c.id,
|
||||
price: Number(entry.price),
|
||||
notes: entry.notes?.trim() || null,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (!rows.length) {
|
||||
toast.add({ severity: 'warn', summary: 'Aviso', detail: 'Nenhum preço configurado para salvar.', life: 3000 })
|
||||
return
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from('professional_pricing')
|
||||
.upsert(rows, { onConflict: 'owner_id,determined_commitment_id' })
|
||||
|
||||
if (error) throw error
|
||||
|
||||
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Precificação atualizada!', life: 3000 })
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar.', life: 4000 })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function fmtBRL (v) {
|
||||
if (v == null || v === '') return '—'
|
||||
return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -152,7 +141,7 @@ function fmtBRL (v) {
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- Header card -->
|
||||
<!-- Header -->
|
||||
<Card>
|
||||
<template #content>
|
||||
<div class="flex items-center justify-between gap-3 flex-wrap">
|
||||
@@ -161,140 +150,174 @@ function fmtBRL (v) {
|
||||
<i class="pi pi-tag text-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-900 font-semibold text-lg">Precificação</div>
|
||||
<div class="text-600 text-sm">Defina o valor padrão da sessão e valores específicos por tipo de compromisso.</div>
|
||||
<div class="text-900 font-semibold text-lg">Serviços e Precificação</div>
|
||||
<div class="text-600 text-sm">
|
||||
Gerencie os serviços que você oferece e seus respectivos preços.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
label="Salvar preços"
|
||||
icon="pi pi-check"
|
||||
:loading="saving"
|
||||
:disabled="loading"
|
||||
@click="save"
|
||||
label="Novo serviço"
|
||||
icon="pi pi-plus"
|
||||
:disabled="pageLoading || addingNew"
|
||||
@click="addingNew = true; cancelEdit()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="flex justify-center py-10">
|
||||
<div v-if="pageLoading || loading" class="flex justify-center py-10">
|
||||
<ProgressSpinner style="width:40px;height:40px" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
|
||||
<!-- Preço padrão -->
|
||||
<Card>
|
||||
<template #content>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-star text-primary-500" />
|
||||
<span class="font-semibold text-900">Preço padrão (fallback)</span>
|
||||
</div>
|
||||
<div class="text-600 text-sm">
|
||||
Aplicado quando o tipo de compromisso da sessão não tem um preço específico cadastrado.
|
||||
</div>
|
||||
<Message v-if="isDynamic" severity="info" :closable="false">
|
||||
<span class="text-sm">
|
||||
Modo <b>dinâmico</b> ativo — a duração da sessão é definida pelo serviço selecionado.
|
||||
</span>
|
||||
</Message>
|
||||
|
||||
<div class="grid grid-cols-12 gap-3 mt-1">
|
||||
<div class="col-span-12 sm:col-span-5">
|
||||
<!-- Formulário novo serviço -->
|
||||
<Card v-if="addingNew">
|
||||
<template #title>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-plus-circle text-primary-500" />
|
||||
<span>Novo serviço</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
<div class="col-span-12 sm:col-span-4">
|
||||
<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-3">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="newForm.price"
|
||||
inputId="new-price"
|
||||
mode="currency"
|
||||
currency="BRL"
|
||||
locale="pt-BR"
|
||||
:min="0"
|
||||
:minFractionDigits="2"
|
||||
fluid
|
||||
/>
|
||||
<label for="new-price">Preço (R$) *</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div v-if="isDynamic" class="col-span-12 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber v-model="newForm.duration_min" inputId="new-duration" :min="1" :max="480" fluid />
|
||||
<label for="new-duration">Duração (min)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="col-span-12 sm:col-span-3">
|
||||
<FloatLabel variant="on">
|
||||
<InputText v-model="newForm.description" inputId="new-desc" class="w-full" />
|
||||
<label for="new-desc">Descrição (opcional)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 justify-end mt-4">
|
||||
<Button label="Cancelar" severity="secondary" outlined @click="addingNew = false; newForm = emptyForm()" />
|
||||
<Button label="Salvar" icon="pi pi-check" :loading="savingNew" @click="saveNew" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Lista vazia -->
|
||||
<Card v-if="!services.length && !addingNew">
|
||||
<template #content>
|
||||
<div class="text-center py-6 text-color-secondary">
|
||||
<i class="pi pi-tag text-4xl opacity-30 mb-3 block" />
|
||||
<div class="font-medium mb-1">Nenhum serviço cadastrado</div>
|
||||
<div class="text-sm">Clique em "Novo serviço" para começar.</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Lista de serviços -->
|
||||
<Card v-for="svc in services" :key="svc.id">
|
||||
<template #content>
|
||||
|
||||
<!-- Modo edição -->
|
||||
<template v-if="editingId === svc.id">
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
<div class="col-span-12 sm:col-span-4">
|
||||
<FloatLabel variant="on">
|
||||
<InputText v-model="editForm.name" :inputId="`edit-name-${svc.id}`" class="w-full" />
|
||||
<label :for="`edit-name-${svc.id}`">Nome *</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="col-span-12 sm:col-span-3">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="prices['__default__'].price"
|
||||
inputId="price-default"
|
||||
v-model="editForm.price"
|
||||
:inputId="`edit-price-${svc.id}`"
|
||||
mode="currency"
|
||||
currency="BRL"
|
||||
locale="pt-BR"
|
||||
:min="0"
|
||||
:max="99999"
|
||||
:minFractionDigits="2"
|
||||
fluid
|
||||
placeholder="R$ 0,00"
|
||||
/>
|
||||
<label for="price-default">Valor da sessão (R$)</label>
|
||||
<label :for="`edit-price-${svc.id}`">Preço (R$) *</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="col-span-12 sm:col-span-7">
|
||||
<div v-if="isDynamic" class="col-span-12 sm:col-span-2">
|
||||
<FloatLabel variant="on">
|
||||
<InputText
|
||||
v-model="prices['__default__'].notes"
|
||||
inputId="notes-default"
|
||||
class="w-full"
|
||||
placeholder="Ex: Particular, valor padrão"
|
||||
/>
|
||||
<label for="notes-default">Observação (opcional)</label>
|
||||
<InputNumber v-model="editForm.duration_min" :inputId="`edit-dur-${svc.id}`" :min="1" :max="480" fluid />
|
||||
<label :for="`edit-dur-${svc.id}`">Duração (min)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="col-span-12 sm:col-span-3">
|
||||
<FloatLabel variant="on">
|
||||
<InputText v-model="editForm.description" :inputId="`edit-desc-${svc.id}`" class="w-full" />
|
||||
<label :for="`edit-desc-${svc.id}`">Descrição (opcional)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="flex gap-2 justify-end mt-4">
|
||||
<Button label="Cancelar" severity="secondary" outlined @click="cancelEdit" />
|
||||
<Button label="Salvar" icon="pi pi-check" :loading="savingEdit" @click="saveEdit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Preços por tipo de compromisso -->
|
||||
<Card v-if="commitments.length">
|
||||
<template #title>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-list" />
|
||||
<span>Por tipo de compromisso</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="text-600 text-sm mb-4">
|
||||
Valores específicos sobrepõem o preço padrão quando o tipo de compromisso coincide.
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="c in commitments"
|
||||
:key="c.id"
|
||||
class="commitment-row"
|
||||
>
|
||||
<div class="commitment-label">
|
||||
<div class="font-medium text-900">{{ c.name }}</div>
|
||||
<div v-if="prices[c.id]?.price != null" class="text-xs text-color-secondary mt-0.5">
|
||||
{{ fmtBRL(prices[c.id]?.price) }}
|
||||
<!-- Modo leitura -->
|
||||
<template v-else>
|
||||
<div class="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="cfg-icon-box-sm">
|
||||
<i class="pi pi-tag" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-900">{{ svc.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(svc.price) }}</b></span>
|
||||
<span v-if="svc.duration_min">{{ svc.duration_min }}min</span>
|
||||
<span v-if="svc.description" class="italic">{{ svc.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-3 flex-1">
|
||||
<div class="col-span-12 sm:col-span-5">
|
||||
<FloatLabel variant="on">
|
||||
<InputNumber
|
||||
v-model="prices[c.id].price"
|
||||
:inputId="`price-${c.id}`"
|
||||
mode="currency"
|
||||
currency="BRL"
|
||||
locale="pt-BR"
|
||||
:min="0"
|
||||
:max="99999"
|
||||
:minFractionDigits="2"
|
||||
fluid
|
||||
placeholder="R$ 0,00"
|
||||
/>
|
||||
<label :for="`price-${c.id}`">Valor (R$)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="col-span-12 sm:col-span-7">
|
||||
<FloatLabel variant="on">
|
||||
<InputText
|
||||
v-model="prices[c.id].notes"
|
||||
:id="`notes-${c.id}`"
|
||||
class="w-full"
|
||||
placeholder="Ex: Convênio, valor reduzido..."
|
||||
/>
|
||||
<label :for="`notes-${c.id}`">Observação (opcional)</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Tag value="Ativo" severity="success" />
|
||||
<Button icon="pi pi-pencil" severity="secondary" outlined size="small" v-tooltip.top="'Editar'" @click="startEdit(svc)" />
|
||||
<Button icon="pi pi-trash" severity="danger" outlined size="small" v-tooltip.top="'Remover'" @click="confirmRemove(svc.id)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Dica -->
|
||||
<Message severity="info" :closable="false">
|
||||
<span class="text-sm">
|
||||
O preço configurado aqui é preenchido automaticamente ao criar uma sessão na agenda.
|
||||
Você ainda pode ajustá-lo manualmente no diálogo de cada evento.
|
||||
Os serviços cadastrados aqui aparecem para seleção ao criar ou editar um evento na agenda.
|
||||
</span>
|
||||
</Message>
|
||||
|
||||
@@ -314,19 +337,14 @@ function fmtBRL (v) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.commitment-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--surface-border);
|
||||
background: var(--surface-ground);
|
||||
}
|
||||
|
||||
.commitment-label {
|
||||
min-width: 9rem;
|
||||
.cfg-icon-box-sm {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.625rem;
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 10%, transparent);
|
||||
color: var(--p-primary-500, #6366f1);
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user