Ajuste Convenios e Particular

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>
@@ -9,7 +9,7 @@ import { useServices } from '@/features/agenda/composables/useServices'
 const toast       = useToast()
 const tenantStore = useTenantStore()

-const { services, loading, error: servicesError, load, save, remove } = useServices()
+const { services, loading, error: servicesError, load, save, toggle, remove } = useServices()

 const ownerId     = ref(null)
 const tenantId    = ref(null)
@@ -97,10 +97,19 @@ async function saveNew () {
  }
 }

+async function toggleService (svc) {
+  try {
+    await toggle(svc.id, !svc.active)
+    toast.add({ severity: 'success', summary: svc.active ? 'Desativado' : 'Ativado', detail: `Serviço ${svc.active ? 'desativado' : 'ativado'}.`, life: 3000 })
+  } catch {
+    toast.add({ severity: 'error', summary: 'Erro', detail: servicesError.value || 'Falha ao atualizar.', life: 4000 })
+  }
+}
+
 async function confirmRemove (id) {
  try {
    await remove(id)
-    toast.add({ severity: 'success', summary: 'Removido', detail: 'Serviço removido.', life: 3000 })
+    toast.add({ severity: 'success', summary: 'Removido', detail: 'Serviço removido permanentemente.', life: 3000 })
  } catch {
    toast.add({ severity: 'error', summary: 'Erro', detail: servicesError.value || 'Falha ao remover.', life: 4000 })
  }
@@ -242,7 +251,7 @@ onMounted(async () => {
      </Card>

      <!-- Lista de serviços -->
-      <Card v-for="svc in services" :key="svc.id">
+      <Card v-for="svc in services" :key="svc.id" :class="{ 'opacity-60': !svc.active }">
        <template #content>

          <!-- Modo edição -->
@@ -305,7 +314,15 @@ onMounted(async () => {
                </div>
              </div>
              <div class="flex items-center gap-2">
-                <Tag value="Ativo" severity="success" />
+                <Tag :value="svc.active ? 'Ativo' : 'Inativo'" :severity="svc.active ? 'success' : 'secondary'" />
+                <Button
+                  :icon="svc.active ? 'pi pi-eye-slash' : 'pi pi-eye'"
+                  :severity="svc.active ? 'secondary' : 'success'"
+                  outlined
+                  size="small"
+                  v-tooltip.top="svc.active ? 'Desativar' : 'Ativar'"
+                  @click="toggleService(svc)"
+                />
                <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>