Layout 100%, Notificações, SetupWizard
This commit is contained in:
Leonardo
@@ -329,56 +329,53 @@ onBeforeUnmount(() => {
|
||||
<Toast />
|
||||
<ConfirmDialog />
|
||||
|
||||
<div class="limits-root">
|
||||
<!-- Sentinel -->
|
||||
<div ref="heroSentinelRef" class="h-px" />
|
||||
|
||||
<!-- Info decorativa (scrolls away naturalmente) -->
|
||||
<div class="flex items-start gap-4 px-4 pb-3">
|
||||
<div class="limits-hero__icon-wrap">
|
||||
<i class="pi pi-sliders-h limits-hero__icon" />
|
||||
</div>
|
||||
<div class="limits-hero__sub">
|
||||
Configure os limites reais de cada feature por plano (ex: max_patients, max_sessions_per_month).
|
||||
Esses valores são lidos pelo sistema para bloquear ações quando o limite é atingido.
|
||||
</div>
|
||||
<!-- Hero sticky -->
|
||||
<div
|
||||
ref="heroEl"
|
||||
class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5"
|
||||
:style="{ top: 'var(--layout-sticky-top, 56px)' }"
|
||||
>
|
||||
<div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
|
||||
<div class="absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-orange-400/10" />
|
||||
<div class="absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-indigo-400/10" />
|
||||
</div>
|
||||
|
||||
<!-- ── HERO ─────────────────────────────────────────────── -->
|
||||
<div ref="heroSentinelRef" class="limits-hero-sentinel" />
|
||||
<div ref="heroEl" class="limits-hero mb-4" :class="{ 'limits-hero--stuck': heroStuck }">
|
||||
<div class="limits-hero__blobs" aria-hidden="true">
|
||||
<div class="limits-hero__blob limits-hero__blob--1" />
|
||||
<div class="limits-hero__blob limits-hero__blob--2" />
|
||||
<div class="relative z-10 flex items-center justify-between gap-3 flex-wrap">
|
||||
<div class="min-w-0">
|
||||
<div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Limites por Plano</div>
|
||||
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-0.5">Configure os limites reais de cada feature por plano.</div>
|
||||
</div>
|
||||
|
||||
<div class="limits-hero__inner">
|
||||
<div class="limits-hero__info min-w-0">
|
||||
<div class="limits-hero__title">Limites por Plano</div>
|
||||
</div>
|
||||
<!-- Ações desktop (≥ 1200px) -->
|
||||
<div class="hidden xl:flex items-center gap-2 flex-wrap">
|
||||
<SelectButton v-model="targetFilter" :options="targetOptions" optionLabel="label" optionValue="value" size="small" :disabled="loading || saving" />
|
||||
<Button label="Recarregar" icon="pi pi-refresh" severity="secondary" outlined size="small" :loading="loading" :disabled="saving" @click="fetchAll" />
|
||||
</div>
|
||||
|
||||
<!-- Ações desktop (≥ 1200px) -->
|
||||
<div class="limits-hero__actions limits-hero__actions--desktop">
|
||||
<SelectButton v-model="targetFilter" :options="targetOptions" optionLabel="label" optionValue="value" size="small" :disabled="loading || saving" />
|
||||
<Button label="Recarregar" icon="pi pi-refresh" severity="secondary" outlined size="small" :loading="loading" :disabled="saving" @click="fetchAll" />
|
||||
</div>
|
||||
|
||||
<!-- Ações mobile (< 1200px) -->
|
||||
<div class="limits-hero__actions--mobile">
|
||||
<Button
|
||||
label="Ações"
|
||||
icon="pi pi-ellipsis-v"
|
||||
severity="warn"
|
||||
size="small"
|
||||
aria-haspopup="true"
|
||||
aria-controls="limits_hero_menu"
|
||||
@click="(e) => heroMenuRef.toggle(e)"
|
||||
/>
|
||||
<Menu ref="heroMenuRef" id="limits_hero_menu" :model="heroMenuItems" :popup="true" />
|
||||
</div>
|
||||
<!-- Ações mobile (< 1200px) -->
|
||||
<div class="flex xl:hidden">
|
||||
<Button
|
||||
label="Ações"
|
||||
icon="pi pi-ellipsis-v"
|
||||
severity="warn"
|
||||
size="small"
|
||||
aria-haspopup="true"
|
||||
aria-controls="limits_hero_menu"
|
||||
@click="(e) => heroMenuRef.toggle(e)"
|
||||
/>
|
||||
<Menu ref="heroMenuRef" id="limits_hero_menu" :model="heroMenuItems" :popup="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search — sempre visível, fora do hero sticky -->
|
||||
<div class="px-4 mb-4">
|
||||
<!-- content -->
|
||||
<div class="px-3 md:px-4 pb-8 flex flex-col gap-4">
|
||||
|
||||
<!-- Search -->
|
||||
<div>
|
||||
<FloatLabel variant="on" class="w-full md:w-80">
|
||||
<IconField class="w-full">
|
||||
<InputIcon class="pi pi-search" />
|
||||
@@ -388,19 +385,18 @@ onBeforeUnmount(() => {
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<div class="px-4 pb-4">
|
||||
<!-- Legenda rápida -->
|
||||
<div class="surface-100 border-round p-3 mb-4">
|
||||
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-3">
|
||||
<div class="flex flex-wrap gap-4 items-center">
|
||||
<div class="flex items-center gap-2 text-sm text-color-secondary">
|
||||
<div class="flex items-center gap-2 text-[1rem] text-[var(--text-color-secondary)]">
|
||||
<i class="pi pi-info-circle text-blue-400" />
|
||||
<span><strong>Sem limites</strong> = acesso habilitado sem restrição de quantidade</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-color-secondary">
|
||||
<div class="flex items-center gap-2 text-[1rem] text-[var(--text-color-secondary)]">
|
||||
<i class="pi pi-info-circle text-orange-400" />
|
||||
<span><strong>-1</strong> = ilimitado (explícito no JSON, útil para planos PRO)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-color-secondary">
|
||||
<div class="flex items-center gap-2 text-[1rem] text-[var(--text-color-secondary)]">
|
||||
<i class="pi pi-info-circle text-red-400" />
|
||||
<span><strong>0 ou N</strong> = limite máximo que o sistema vai verificar</span>
|
||||
</div>
|
||||
@@ -431,11 +427,11 @@ onBeforeUnmount(() => {
|
||||
:severity="domainSeverity(featureDomain(data.feature.key))"
|
||||
rounded
|
||||
/>
|
||||
<span class="font-medium font-mono text-sm">{{ data.feature.key }}</span>
|
||||
<span class="font-medium font-mono text-[1rem]">{{ data.feature.key }}</span>
|
||||
</div>
|
||||
<small class="text-color-secondary mt-1 leading-snug">
|
||||
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1 leading-snug">
|
||||
{{ data.feature.descricao || '—' }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
@@ -452,7 +448,7 @@ onBeforeUnmount(() => {
|
||||
<span class="font-semibold truncate" :title="plan.name">{{ plan.name || plan.key }}</span>
|
||||
<Tag :value="targetLabel(plan.target)" :severity="targetSeverity(plan.target)" rounded />
|
||||
</div>
|
||||
<small class="text-color-secondary font-mono">{{ plan.key }}</small>
|
||||
<div class="text-[1rem] text-[var(--text-color-secondary)] font-mono">{{ plan.key }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -472,7 +468,7 @@ onBeforeUnmount(() => {
|
||||
<!-- Limites atuais -->
|
||||
<div
|
||||
v-if="data.planCols[plan.id].limits"
|
||||
class="text-xs text-color-secondary leading-relaxed bg-surface-100 border-round p-2"
|
||||
class="text-[1rem] text-[var(--text-color-secondary)] leading-relaxed rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-2"
|
||||
>
|
||||
<div
|
||||
v-for="(val, key) in data.planCols[plan.id].limits"
|
||||
@@ -483,7 +479,7 @@ onBeforeUnmount(() => {
|
||||
<span>{{ limitValueDisplay(val) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="data.planCols[plan.id].hasRecord" class="text-xs text-color-secondary">
|
||||
<div v-else-if="data.planCols[plan.id].hasRecord" class="text-[1rem] text-[var(--text-color-secondary)]">
|
||||
Sem limites definidos
|
||||
</div>
|
||||
|
||||
@@ -508,7 +504,7 @@ onBeforeUnmount(() => {
|
||||
@click="askClearLimits(plan, data.feature)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="text-xs text-color-secondary italic">
|
||||
<div v-else class="text-[1rem] text-[var(--text-color-secondary)] italic">
|
||||
Feature não vinculada a este plano.<br/>
|
||||
Configure em <strong>Recursos por Plano</strong>.
|
||||
</div>
|
||||
@@ -516,260 +512,195 @@ onBeforeUnmount(() => {
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
</div><!-- /px-4 pb-4 -->
|
||||
|
||||
<!-- Dialog: editar limites de plan_features -->
|
||||
<Dialog
|
||||
v-model:visible="showDlg"
|
||||
modal
|
||||
:draggable="false"
|
||||
:closable="!saving"
|
||||
:dismissableMask="!saving"
|
||||
:style="{ width: '680px' }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="text-lg font-semibold">Limites — {{ dlgFeature?.key }}</div>
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<Tag :value="dlgPlan?.name || dlgPlan?.key" severity="secondary" />
|
||||
<Tag :value="targetLabel(dlgPlan?.target)" :severity="targetSeverity(dlgPlan?.target)" rounded />
|
||||
</div>
|
||||
<!-- Dialog: editar limites de plan_features -->
|
||||
<Dialog
|
||||
v-model:visible="showDlg"
|
||||
modal
|
||||
:draggable="false"
|
||||
:closable="!saving"
|
||||
:dismissableMask="!saving"
|
||||
:style="{ width: '680px' }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="text-[1rem] font-semibold">Limites — {{ dlgFeature?.key }}</div>
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<Tag :value="dlgPlan?.name || dlgPlan?.key" severity="secondary" />
|
||||
<Tag :value="targetLabel(dlgPlan?.target)" :severity="targetSeverity(dlgPlan?.target)" rounded />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- Campos existentes -->
|
||||
<div v-if="limitFields.length">
|
||||
<div class="font-semibold mb-2">Limites configurados</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div
|
||||
v-for="(field, idx) in limitFields"
|
||||
:key="idx"
|
||||
class="flex items-center gap-3 surface-100 border-round p-3"
|
||||
>
|
||||
<!-- Key (não editável) -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-mono font-medium text-sm">{{ field.key }}</div>
|
||||
<small class="text-color-secondary">{{ field.type }}</small>
|
||||
</div>
|
||||
|
||||
<!-- Valor -->
|
||||
<div class="w-40 shrink-0">
|
||||
<template v-if="field.type === 'number'">
|
||||
<InputNumber
|
||||
v-model="field.value"
|
||||
class="w-full"
|
||||
inputClass="w-full"
|
||||
:disabled="saving"
|
||||
:min="-1"
|
||||
placeholder="-1 = ilimitado"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="field.type === 'boolean'">
|
||||
<SelectButton
|
||||
v-model="field.value"
|
||||
:options="[{ label: 'Sim', value: true }, { label: 'Não', value: false }]"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="saving"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<InputText v-model="field.value" class="w-full" :disabled="saving" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Ações rápidas -->
|
||||
<div class="flex gap-1 shrink-0">
|
||||
<Button
|
||||
icon="pi pi-infinity"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
outlined
|
||||
v-tooltip.top="'Definir como ilimitado (-1)'"
|
||||
:disabled="saving || field.type !== 'number'"
|
||||
@click="setUnlimited(idx)"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
size="small"
|
||||
severity="danger"
|
||||
outlined
|
||||
v-tooltip.top="'Remover este campo'"
|
||||
:disabled="saving"
|
||||
@click="removeLimitField(idx)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-sm text-color-secondary surface-100 border-round p-3 text-center">
|
||||
Nenhum limite configurado. Adicione abaixo.
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<!-- Adicionar novo campo -->
|
||||
<div>
|
||||
<div class="font-semibold mb-3">Adicionar campo de limite</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Nome -->
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-color-secondary uppercase tracking-wide block mb-1">
|
||||
Nome do campo *
|
||||
</label>
|
||||
<InputText
|
||||
id="new-limit-key"
|
||||
v-model="newLimitKey"
|
||||
class="w-full"
|
||||
variant="filled"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
placeholder="ex: max_patients"
|
||||
@keydown.enter.prevent="addLimitField"
|
||||
/>
|
||||
<small class="text-color-secondary mt-1 block">
|
||||
Ex: <span class="font-mono">max_patients</span>, <span class="font-mono">max_sessions_per_month</span>
|
||||
</small>
|
||||
<!-- Campos existentes -->
|
||||
<div v-if="limitFields.length">
|
||||
<div class="font-semibold mb-2">Limites configurados</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div
|
||||
v-for="(field, idx) in limitFields"
|
||||
:key="idx"
|
||||
class="flex items-center gap-3 rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-3"
|
||||
>
|
||||
<!-- Key (não editável) -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-mono font-medium text-[1rem]">{{ field.key }}</div>
|
||||
<div class="text-[1rem] text-[var(--text-color-secondary)]">{{ field.type }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Tipo + Valor + Botão -->
|
||||
<div class="flex items-end gap-2 flex-wrap">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-color-secondary uppercase tracking-wide block mb-1">Tipo</label>
|
||||
<SelectButton
|
||||
v-model="newLimitType"
|
||||
:options="limitTypeOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="saving"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1" style="min-width: 8rem;">
|
||||
<label class="text-xs font-semibold text-color-secondary uppercase tracking-wide block mb-1">Valor inicial</label>
|
||||
<!-- Valor -->
|
||||
<div class="w-40 shrink-0">
|
||||
<template v-if="field.type === 'number'">
|
||||
<InputNumber
|
||||
v-if="newLimitType === 'number'"
|
||||
v-model="newLimitValue"
|
||||
v-model="field.value"
|
||||
class="w-full"
|
||||
inputClass="w-full"
|
||||
variant="filled"
|
||||
:disabled="saving"
|
||||
:min="-1"
|
||||
placeholder="-1 = ilimitado"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="field.type === 'boolean'">
|
||||
<SelectButton
|
||||
v-else-if="newLimitType === 'boolean'"
|
||||
v-model="newLimitValue"
|
||||
v-model="field.value"
|
||||
:options="[{ label: 'Sim', value: true }, { label: 'Não', value: false }]"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="saving"
|
||||
/>
|
||||
<InputText
|
||||
v-else
|
||||
v-model="newLimitValue"
|
||||
class="w-full"
|
||||
variant="filled"
|
||||
:disabled="saving"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<InputText v-model="field.value" class="w-full" :disabled="saving" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Ações rápidas -->
|
||||
<div class="flex gap-1 shrink-0">
|
||||
<Button
|
||||
icon="pi pi-plus"
|
||||
label="Adicionar"
|
||||
:disabled="saving || !newLimitKey?.trim()"
|
||||
@click="addLimitField"
|
||||
icon="pi pi-infinity"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
outlined
|
||||
v-tooltip.top="'Definir como ilimitado (-1)'"
|
||||
:disabled="saving || field.type !== 'number'"
|
||||
@click="setUnlimited(idx)"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
size="small"
|
||||
severity="danger"
|
||||
outlined
|
||||
v-tooltip.top="'Remover este campo'"
|
||||
:disabled="saving"
|
||||
@click="removeLimitField(idx)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dica de boas práticas -->
|
||||
<div class="surface-100 border-round p-3 text-xs text-color-secondary leading-relaxed">
|
||||
<div class="font-semibold mb-1">Convenções recomendadas</div>
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<div><span class="font-mono">max_patients</span> — número máximo de pacientes</div>
|
||||
<div><span class="font-mono">max_sessions_per_month</span> — sessões/mês</div>
|
||||
<div><span class="font-mono">max_members</span> — membros da clínica</div>
|
||||
<div><span class="font-mono">max_therapists</span> — terapeutas vinculados</div>
|
||||
<div><span class="font-mono">-1</span> — sem limite (planos PRO)</div>
|
||||
<div><span class="font-mono">0</span> — bloqueado completamente</div>
|
||||
<div v-else class="text-[1rem] text-[var(--text-color-secondary)] rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 text-center">
|
||||
Nenhum limite configurado. Adicione abaixo.
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<!-- Adicionar novo campo -->
|
||||
<div>
|
||||
<div class="font-semibold mb-3">Adicionar campo de limite</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Nome -->
|
||||
<div>
|
||||
<label class="text-[1rem] font-semibold text-[var(--text-color-secondary)] uppercase tracking-wide block mb-1">
|
||||
Nome do campo *
|
||||
</label>
|
||||
<InputText
|
||||
id="new-limit-key"
|
||||
v-model="newLimitKey"
|
||||
class="w-full"
|
||||
variant="filled"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
placeholder="ex: max_patients"
|
||||
@keydown.enter.prevent="addLimitField"
|
||||
/>
|
||||
<div class="text-[1rem] text-[var(--text-color-secondary)] mt-1">
|
||||
Ex: <span class="font-mono">max_patients</span>, <span class="font-mono">max_sessions_per_month</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tipo + Valor + Botão -->
|
||||
<div class="flex items-end gap-2 flex-wrap">
|
||||
<div>
|
||||
<label class="text-[1rem] font-semibold text-[var(--text-color-secondary)] uppercase tracking-wide block mb-1">Tipo</label>
|
||||
<SelectButton
|
||||
v-model="newLimitType"
|
||||
:options="limitTypeOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="saving"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1" style="min-width: 8rem;">
|
||||
<label class="text-[1rem] font-semibold text-[var(--text-color-secondary)] uppercase tracking-wide block mb-1">Valor inicial</label>
|
||||
<InputNumber
|
||||
v-if="newLimitType === 'number'"
|
||||
v-model="newLimitValue"
|
||||
class="w-full"
|
||||
inputClass="w-full"
|
||||
variant="filled"
|
||||
:disabled="saving"
|
||||
:min="-1"
|
||||
placeholder="-1 = ilimitado"
|
||||
/>
|
||||
<SelectButton
|
||||
v-else-if="newLimitType === 'boolean'"
|
||||
v-model="newLimitValue"
|
||||
:options="[{ label: 'Sim', value: true }, { label: 'Não', value: false }]"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="saving"
|
||||
/>
|
||||
<InputText
|
||||
v-else
|
||||
v-model="newLimitValue"
|
||||
class="w-full"
|
||||
variant="filled"
|
||||
:disabled="saving"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
icon="pi pi-plus"
|
||||
label="Adicionar"
|
||||
:disabled="saving || !newLimitKey?.trim()"
|
||||
@click="addLimitField"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button label="Cancelar" severity="secondary" outlined :disabled="saving" @click="showDlg = false" />
|
||||
<Button label="Salvar limites" icon="pi pi-check" :loading="saving" @click="saveLimits" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Dica de boas práticas -->
|
||||
<div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 text-[1rem] text-[var(--text-color-secondary)] leading-relaxed">
|
||||
<div class="font-semibold mb-1">Convenções recomendadas</div>
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<div><span class="font-mono">max_patients</span> — número máximo de pacientes</div>
|
||||
<div><span class="font-mono">max_sessions_per_month</span> — sessões/mês</div>
|
||||
<div><span class="font-mono">max_members</span> — membros da clínica</div>
|
||||
<div><span class="font-mono">max_therapists</span> — terapeutas vinculados</div>
|
||||
<div><span class="font-mono">-1</span> — sem limite (planos PRO)</div>
|
||||
<div><span class="font-mono">0</span> — bloqueado completamente</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style scoped>
|
||||
.limits-root { padding: 1rem; }
|
||||
@media (min-width: 768px) { .limits-root { padding: 1.5rem; } }
|
||||
|
||||
.limits-hero-sentinel { height: 1px; }
|
||||
|
||||
.limits-hero {
|
||||
position: sticky;
|
||||
top: var(--layout-sticky-top, 56px);
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
border-radius: 1.75rem;
|
||||
border: 1px solid var(--surface-border);
|
||||
background: var(--surface-card);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.limits-hero--stuck {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.limits-hero__blobs {
|
||||
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
|
||||
}
|
||||
.limits-hero__blob {
|
||||
position: absolute; border-radius: 50%; filter: blur(70px);
|
||||
}
|
||||
.limits-hero__blob--1 { width: 20rem; height: 20rem; top: -5rem; right: -4rem; background: rgba(251,146,60,0.12); }
|
||||
.limits-hero__blob--2 { width: 18rem; height: 18rem; top: 1rem; left: -5rem; background: rgba(99,102,241,0.09); }
|
||||
|
||||
.limits-hero__inner {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
|
||||
}
|
||||
.limits-hero__icon-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 4rem; height: 4rem; border-radius: 1.125rem;
|
||||
border: 2px solid var(--surface-border);
|
||||
background: var(--surface-ground);
|
||||
display: grid; place-items: center;
|
||||
}
|
||||
.limits-hero__icon { font-size: 1.5rem; color: var(--text-color); }
|
||||
|
||||
.limits-hero__info { flex: 1; min-width: 0; }
|
||||
.limits-hero__title {
|
||||
font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em;
|
||||
color: var(--text-color); line-height: 1.2;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.limits-hero__sub {
|
||||
font-size: 0.78rem; color: var(--text-color-secondary); margin-top: 4px; line-height: 1.5;
|
||||
}
|
||||
|
||||
.limits-hero__actions--desktop {
|
||||
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
|
||||
}
|
||||
.limits-hero__actions--mobile { display: none; }
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.limits-hero__actions--desktop { display: none; }
|
||||
.limits-hero__actions--mobile { display: flex; }
|
||||
}
|
||||
</style>
|
||||
<template #footer>
|
||||
<Button label="Cancelar" severity="secondary" outlined :disabled="saving" @click="showDlg = false" />
|
||||
<Button label="Salvar limites" icon="pi pi-check" :loading="saving" @click="saveLimits" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user