Layout 100%, Notificações, SetupWizard
This commit is contained in:
Leonardo
@@ -239,32 +239,19 @@ onMounted(async () => {
|
||||
<template>
|
||||
<Toast />
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-3">
|
||||
|
||||
<!-- 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 procedimentos com 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>
|
||||
<!-- Subheader -->
|
||||
<div class="cfg-subheader">
|
||||
<div class="cfg-subheader__icon"><i class="pi pi-id-card" /></div>
|
||||
<div class="min-w-0">
|
||||
<div class="cfg-subheader__title">Convênios</div>
|
||||
<div class="cfg-subheader__sub">Convênios e planos de saúde que você atende</div>
|
||||
</div>
|
||||
<div class="cfg-subheader__actions">
|
||||
<Button label="Novo convênio" icon="pi pi-plus" size="small" :disabled="pageLoading || addingNew" class="rounded-full" @click="addingNew = true; cancelEdit()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="pageLoading || loading" class="flex justify-center py-10">
|
||||
@@ -273,15 +260,13 @@ onMounted(async () => {
|
||||
|
||||
<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>
|
||||
<!-- Form novo convênio -->
|
||||
<div v-if="addingNew" class="cfg-wrap">
|
||||
<div class="cfg-wrap__head">
|
||||
<div class="cfg-wrap__icon"><i class="pi pi-plus" /></div>
|
||||
<span class="cfg-wrap__title">Novo convênio</span>
|
||||
</div>
|
||||
<div class="cfg-wrap__body">
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<FloatLabel variant="on">
|
||||
@@ -296,30 +281,30 @@ onMounted(async () => {
|
||||
</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 class="flex gap-2 justify-end mt-3">
|
||||
<Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="addingNew = false; newForm = emptyForm()" />
|
||||
<Button label="Salvar" icon="pi pi-check" class="rounded-full" :loading="savingNew" @click="saveNew" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<div v-if="!plans.length && !addingNew" class="cfg-empty">
|
||||
<i class="pi pi-id-card text-3xl opacity-25" />
|
||||
<div class="text-sm font-medium">Nenhum convênio cadastrado</div>
|
||||
<div class="text-xs opacity-70">Clique em "Novo convênio" para começar.</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista de convênios -->
|
||||
<Card v-for="plan in plans" :key="plan.id" :class="{ 'opacity-60': !plan.active }">
|
||||
<template #content>
|
||||
|
||||
<!-- Modo edição do plano -->
|
||||
<template v-if="editingId === plan.id">
|
||||
<div
|
||||
v-for="plan in plans"
|
||||
:key="plan.id"
|
||||
class="cfg-wrap"
|
||||
:class="{ 'opacity-60': !plan.active }"
|
||||
>
|
||||
<!-- Modo edição do plano -->
|
||||
<template v-if="editingId === plan.id">
|
||||
<div class="cfg-wrap__body">
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<FloatLabel variant="on">
|
||||
@@ -334,169 +319,138 @@ onMounted(async () => {
|
||||
</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 class="flex gap-2 justify-end mt-3">
|
||||
<Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="cancelEdit" />
|
||||
<Button label="Salvar" icon="pi pi-check" class="rounded-full" :loading="savingEdit" @click="saveEdit" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 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 min-w-0">
|
||||
<div class="cfg-icon-box-sm shrink-0">
|
||||
<i class="pi pi-id-card" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="font-semibold text-900">{{ plan.name }}</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 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)" />
|
||||
<!-- Modo leitura -->
|
||||
<template v-else>
|
||||
|
||||
<!-- Cabeçalho do plano -->
|
||||
<div class="cnv-plan-head">
|
||||
<div class="flex items-center gap-2.5 min-w-0 flex-1">
|
||||
<div class="cfg-wrap__icon shrink-0"><i class="pi pi-id-card" /></div>
|
||||
<div class="min-w-0">
|
||||
<div class="font-semibold text-sm">{{ plan.name }}</div>
|
||||
<div v-if="plan.notes" class="text-xs text-[var(--text-color-secondary)] opacity-70 truncate">{{ plan.notes }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 flex-wrap">
|
||||
<Tag :value="plan.active ? 'Ativo' : 'Inativo'" :severity="plan.active ? 'success' : 'secondary'" />
|
||||
<Button
|
||||
:label="`Procedimentos (${totalProcedimentos(plan)})`"
|
||||
:icon="expandedPlanId === plan.id ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
|
||||
severity="secondary" outlined size="small" class="rounded-full"
|
||||
@click="togglePanel(plan.id)"
|
||||
/>
|
||||
<Button
|
||||
:icon="plan.active ? 'pi pi-eye-slash' : 'pi pi-eye'"
|
||||
:severity="plan.active ? 'secondary' : 'success'"
|
||||
outlined size="small"
|
||||
v-tooltip.top="plan.active ? 'Desativar' : 'Ativar'"
|
||||
@click="togglePlan(plan)"
|
||||
/>
|
||||
<Button icon="pi pi-pencil" severity="secondary" outlined size="small" v-tooltip.top="'Editar'" @click="startEdit(plan)" />
|
||||
<Button icon="pi pi-trash" severity="danger" outlined size="small" v-tooltip.top="'Remover'" @click="removePlan(plan.id)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Painel expansível: procedimentos -->
|
||||
<div v-if="expandedPlanId === plan.id" class="mt-4 border-t border-surface pt-4">
|
||||
<!-- Painel procedimentos expandível -->
|
||||
<div v-if="expandedPlanId === plan.id" class="cnv-procedures">
|
||||
|
||||
<!-- 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">
|
||||
<!-- Lista de procedimentos -->
|
||||
<div v-if="plan.insurance_plan_services?.length" class="cnv-proc-list">
|
||||
<template v-for="ps in plan.insurance_plan_services" :key="ps.id">
|
||||
|
||||
<!-- 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>
|
||||
<!-- Edição inline do procedimento -->
|
||||
<div v-if="editingServiceId === ps.id" class="cnv-proc-edit">
|
||||
<div class="grid grid-cols-12 gap-2 flex-1">
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<label class="cnv-label">Nome</label>
|
||||
<InputText v-model="editServiceForm.name" class="w-full" size="small" />
|
||||
</div>
|
||||
<div class="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 class="col-span-12 sm:col-span-6">
|
||||
<label class="cnv-label">Valor (R$)</label>
|
||||
<InputNumber v-model="editServiceForm.value" mode="currency" currency="BRL" locale="pt-BR" :min="0" :minFractionDigits="2" class="w-full" size="small" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 class="flex gap-2 justify-end mt-2">
|
||||
<Button label="Cancelar" severity="secondary" outlined size="small" class="rounded-full" @click="cancelEditService" />
|
||||
<Button label="Salvar" icon="pi pi-check" size="small" class="rounded-full" :loading="savingServiceEdit" @click="saveServiceEdit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
<!-- Leitura do procedimento -->
|
||||
<div v-else class="cnv-proc-row" :class="{ 'opacity-50': !ps.active }">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<Tag v-if="!ps.active" value="Inativo" severity="secondary" class="text-xs shrink-0" />
|
||||
<span class="text-sm font-medium truncate">{{ ps.name }}</span>
|
||||
</div>
|
||||
<div class="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 class="flex items-center gap-2 shrink-0">
|
||||
<span class="text-sm font-semibold text-[var(--primary-color)]">{{ fmtBRL(ps.value) }}</span>
|
||||
<Button :icon="ps.active ? 'pi pi-eye-slash' : 'pi pi-eye'" :severity="ps.active ? 'secondary' : 'success'" text size="small" v-tooltip.top="ps.active ? 'Desativar' : 'Ativar'" @click="onToggleService(ps)" />
|
||||
<Button icon="pi pi-pencil" severity="secondary" text size="small" v-tooltip.top="'Editar'" @click="startEditService(ps)" />
|
||||
<Button icon="pi pi-trash" severity="danger" text size="small" v-tooltip.top="'Remover'" @click="deleteService(ps.id)" />
|
||||
</div>
|
||||
</div>
|
||||
</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)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else-if="addingServicePlanId !== plan.id" class="text-sm text-[var(--text-color-secondary)] italic px-1 py-2">
|
||||
Nenhum procedimento cadastrado.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Form adicionar procedimento -->
|
||||
<div v-if="addingServicePlanId === plan.id" class="cnv-proc-form">
|
||||
|
||||
<!-- Quick-fill dos serviços -->
|
||||
<div v-if="services.filter(s => s.active).length" class="mb-3">
|
||||
<div class="cnv-label mb-1.5">Clique num serviço para pré-preencher:</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
|
||||
<button
|
||||
v-for="svc in services.filter(s => s.active)"
|
||||
:key="svc.id"
|
||||
class="svc-quick-card"
|
||||
@click="fillFromService(svc)"
|
||||
>
|
||||
<span class="svc-quick-name">{{ svc.name }}</span>
|
||||
<span class="svc-quick-price">{{ fmtBRL(svc.price) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Campos nome + valor -->
|
||||
<div class="grid grid-cols-12 gap-2">
|
||||
<div class="col-span-12 sm:col-span-7">
|
||||
<label class="cnv-label">Nome do procedimento *</label>
|
||||
<InputText v-model="newServiceForm.name" placeholder="Ex: Consulta" class="w-full" size="small" />
|
||||
</div>
|
||||
<div class="col-span-12 sm:col-span-5">
|
||||
<label class="cnv-label">Valor (R$) *</label>
|
||||
<InputNumber v-model="newServiceForm.value" mode="currency" currency="BRL" locale="pt-BR" :min="0" :minFractionDigits="2" class="w-full" size="small" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Botões em linha separada -->
|
||||
<div class="flex gap-2 justify-end mt-2">
|
||||
<Button label="Cancelar" severity="secondary" outlined size="small" class="rounded-full" @click="cancelAddService" />
|
||||
<Button label="Adicionar" icon="pi pi-check" size="small" class="rounded-full" :loading="savingService" @click="saveService(plan.id)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
v-if="addingServicePlanId !== plan.id"
|
||||
label="Adicionar procedimento"
|
||||
icon="pi pi-plus"
|
||||
severity="secondary" outlined size="small" class="mt-2 rounded-full"
|
||||
@click="startAddService(plan.id)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Message severity="info" :closable="false">
|
||||
<span class="text-sm">
|
||||
@@ -509,44 +463,129 @@ onMounted(async () => {
|
||||
</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;
|
||||
/* ── Subheader degradê ────────────────────────────── */
|
||||
.cfg-subheader {
|
||||
display: flex; align-items: center; gap: 0.65rem;
|
||||
padding: 0.875rem 1rem; border-radius: 6px;
|
||||
border: 1px solid color-mix(in srgb, var(--primary-color,#6366f1) 30%, transparent);
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--primary-color,#6366f1) 12%, var(--surface-card)) 0%,
|
||||
color-mix(in srgb, var(--primary-color,#6366f1) 4%, var(--surface-card)) 60%,
|
||||
var(--surface-card) 100%);
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.cfg-subheader::before {
|
||||
content: ''; position: absolute; top: -20px; right: -20px;
|
||||
width: 80px; height: 80px; border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--primary-color,#6366f1) 15%, transparent);
|
||||
filter: blur(20px); pointer-events: none;
|
||||
}
|
||||
.cfg-subheader__icon {
|
||||
display: grid; place-items: center;
|
||||
width: 2rem; height: 2rem; border-radius: 6px; flex-shrink: 0;
|
||||
background: color-mix(in srgb, var(--primary-color,#6366f1) 20%, transparent);
|
||||
color: var(--primary-color,#6366f1); font-size: 0.85rem;
|
||||
}
|
||||
.cfg-subheader__title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--primary-color,#6366f1); }
|
||||
.cfg-subheader__sub { font-size: 0.75rem; color: var(--text-color-secondary); opacity: 0.85; }
|
||||
.cfg-subheader__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; position: relative; z-index: 1; }
|
||||
|
||||
/* ── Card wrap ────────────────────────────────────── */
|
||||
.cfg-wrap {
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px; background: var(--surface-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cfg-wrap__head {
|
||||
display: flex; align-items: center; gap: 0.625rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: var(--surface-ground);
|
||||
}
|
||||
.cfg-wrap__icon {
|
||||
display: grid; place-items: center;
|
||||
width: 1.75rem; height: 1.75rem; border-radius: 6px; flex-shrink: 0;
|
||||
background: color-mix(in srgb, var(--primary-color,#6366f1) 12%, transparent);
|
||||
color: var(--primary-color,#6366f1); font-size: 0.8rem;
|
||||
}
|
||||
.cfg-wrap__title { font-size: 0.88rem; font-weight: 700; color: var(--text-color); }
|
||||
.cfg-wrap__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
|
||||
/* ── Empty state ──────────────────────────────────── */
|
||||
.cfg-empty {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 0.75rem; padding: 2.5rem 1rem; text-align: center;
|
||||
color: var(--text-color-secondary);
|
||||
border: 1px dashed var(--surface-border);
|
||||
border-radius: 6px; background: var(--surface-ground);
|
||||
}
|
||||
|
||||
.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;
|
||||
/* ── Cabeçalho do plano ───────────────────────────── */
|
||||
.cnv-plan-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 0.75rem; padding: 0.75rem 1rem; flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ── Painel procedimentos ─────────────────────────── */
|
||||
.cnv-procedures {
|
||||
border-top: 1px solid var(--surface-border);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex; flex-direction: column; gap: 0.25rem;
|
||||
background: var(--surface-ground);
|
||||
}
|
||||
.cnv-proc-list {
|
||||
display: flex; flex-direction: column;
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px; overflow: hidden;
|
||||
background: var(--surface-card);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.cnv-proc-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 0.5rem; padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.cnv-proc-row:last-child { border-bottom: none; }
|
||||
.cnv-proc-row:hover { background: var(--surface-hover); }
|
||||
|
||||
.cnv-proc-edit {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: color-mix(in srgb, var(--primary-color,#6366f1) 3%, var(--surface-card));
|
||||
}
|
||||
.cnv-proc-edit:last-child { border-bottom: none; }
|
||||
|
||||
/* ── Form adicionar procedimento ──────────────────── */
|
||||
.cnv-proc-form {
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-card);
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Labels ───────────────────────────────────────── */
|
||||
.cnv-label {
|
||||
display: block;
|
||||
font-size: 0.72rem; font-weight: 500;
|
||||
color: var(--text-color-secondary); margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Quick-fill serviços ──────────────────────────── */
|
||||
.svc-quick-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.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;
|
||||
display: flex; flex-direction: column; gap: 0.1rem;
|
||||
padding: 0.375rem 0.625rem; border-radius: 6px;
|
||||
border: 1px solid var(--surface-border);
|
||||
background: var(--surface-ground);
|
||||
text-align: left; cursor: pointer;
|
||||
transition: border-color 0.12s, background 0.12s;
|
||||
}
|
||||
.svc-quick-card:hover {
|
||||
border-color: var(--p-primary-400, #818cf8);
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 6%, transparent);
|
||||
border-color: var(--primary-color,#6366f1);
|
||||
background: color-mix(in srgb, var(--primary-color,#6366f1) 5%, 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>
|
||||
.svc-quick-name { font-size: 0.72rem; font-weight: 600; color: var(--text-color); }
|
||||
.svc-quick-price { font-size: 0.68rem; color: var(--text-color-secondary); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user