Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout 100%, Notificações, SetupWizard

Browse Source
This commit is contained in:
Leonardo
2026-03-17 21:08:14 -03:00
parent 84d65e49c0
commit 66f67cd40f
77 changed files with 35823 additions and 15023 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/pages/saas/SaasPlansPage.vue
+192 -282
View File
@@ -432,321 +432,231 @@ onBeforeUnmount(() => {
<Toast />
<ConfirmDialog />
<div class="plans-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="plans-hero__icon-wrap">
<i class="pi pi-list plans-hero__icon" />
</div>
<div class="plans-hero__sub">
Catálogo de planos do SaaS. A <b>key</b> é a referência técnica estável.
O <b>público</b> indica se o plano é para <b>Clínica</b> ou <b>Terapeuta</b>.
</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-indigo-400/10” />
<div class=”absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-emerald-400/10” />
</div>
<!-- ── HERO ─────────────────────────────────────────────── -->
<div ref="heroSentinelRef" class="plans-hero-sentinel" />
<div ref="heroEl" class="plans-hero mb-5" :class="{ 'plans-hero--stuck': heroStuck }">
<div class="plans-hero__blobs" aria-hidden="true">
<div class="plans-hero__blob plans-hero__blob--1" />
<div class="plans-hero__blob plans-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)]”>Planos e preços</div>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-0.5”>Catálogo de planos do SaaS.</div>
</div>
<div class="plans-hero__inner">
<!-- Título -->
<div class="plans-hero__info min-w-0">
<div class="plans-hero__title">Planos e preços</div>
</div>
<!-- Ações desktop (≥ 1200px) -->
<div class=”hidden xl:flex items-center gap-2 flex-wrap”>
<SelectButton
v-model=”targetFilter”
:options=”targetFilterOptions”
optionLabel=”label”
optionValue=”value”
size=”small”
/>
<Button label=”Atualizar” icon=”pi pi-refresh” severity=”secondary” outlined size=”small” :loading=”loading” :disabled=”saving” @click=”fetchAll” />
<Button label=”Adicionar plano” icon=”pi pi-plus” size=”small” :disabled=”saving” @click=”openCreate” />
</div>
<!-- Ações desktop (≥ 1200px) -->
<div class="plans-hero__actions plans-hero__actions--desktop">
<SelectButton
v-model="targetFilter"
:options="targetFilterOptions"
optionLabel="label"
optionValue="value"
size="small"
/>
<Button label="Atualizar" icon="pi pi-refresh" severity="secondary" outlined size="small" :loading="loading" :disabled="saving" @click="fetchAll" />
<Button label="Adicionar plano" icon="pi pi-plus" size="small" :disabled="saving" @click="openCreate" />
</div>
<!-- Ações mobile (< 1200px) -->
<div class="plans-hero__actions--mobile">
<Button
label="Ações"
icon="pi pi-ellipsis-v"
severity="warn"
size="small"
aria-haspopup="true"
aria-controls="plans_hero_menu"
@click="(e) => heroMenuRef.toggle(e)"
/>
<Menu ref="heroMenuRef" id="plans_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=”plans_hero_menu”
@click=”(e) => heroMenuRef.toggle(e)”
/>
<Menu ref=”heroMenuRef” id=”plans_hero_menu” :model=”heroMenuItems” :popup=”true” />
</div>
</div>
</div>
<div class="px-4 pb-4">
<DataTable :value="filteredRows" dataKey="id" :loading="loading" stripedRows responsiveLayout="scroll">
<Column field="name" header="Nome" sortable style="min-width: 14rem" />
<Column field="key" header="Key" sortable />
<!-- content -->
<div class=”px-3 md:px-4 pb-8 flex flex-col gap-4”>
<DataTable :value=”filteredRows” dataKey=”id” :loading=”loading” stripedRows responsiveLayout=”scroll”>
<Column field=”name” header=”Nome” sortable style=”min-width: 14rem” />
<Column field=”key” header=”Key” sortable />
<Column field="target" header="Público" sortable style="width: 10rem">
<template #body="{ data }">
<span class="font-medium">{{ formatTargetLabel(data.target) }}</span>
<Column field=”target” header=”Público” sortable style=”width: 10rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatTargetLabel(data.target) }}</span>
</template>
</Column>
<Column header="Mensal" sortable style="width: 12rem">
<template #body="{ data }">
<span class="font-medium">{{ formatBRLFromCents(data.monthly_cents) }}</span>
<Column header=”Mensal” sortable style=”width: 12rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatBRLFromCents(data.monthly_cents) }}</span>
</template>
</Column>
<Column header="Anual" sortable style="width: 12rem">
<template #body="{ data }">
<span class="font-medium">{{ formatBRLFromCents(data.yearly_cents) }}</span>
<Column header=”Anual” sortable style=”width: 12rem”>
<template #body=”{ data }”>
<span class=”font-medium”>{{ formatBRLFromCents(data.yearly_cents) }}</span>
</template>
</Column>
<Column v-if="hasCreatedAt" field="created_at" header="Criado em" sortable />
<Column v-if=”hasCreatedAt” field=”created_at” header=”Criado em” sortable />
<Column header="Ações" style="width: 12rem">
<template #body="{ data }">
<div class="flex gap-2">
<Button icon="pi pi-pencil" severity="secondary" outlined @click="openEdit(data)" />
<Column header=”Ações” style=”width: 12rem”>
<template #body=”{ data }”>
<div class=”flex gap-2”>
<Button icon=”pi pi-pencil” severity=”secondary” outlined @click=”openEdit(data)” />
<Button
icon="pi pi-trash"
severity="danger"
icon=”pi pi-trash”
severity=”danger”
outlined
:disabled="isDeleteLockedRow(data)"
:title="isDeleteLockedRow(data) ? 'Plano padrão do sistema não pode ser removido.' : 'Excluir plano'"
@click="askDelete(data)"
:disabled=”isDeleteLockedRow(data)”
:title=”isDeleteLockedRow(data) ? 'Plano padrão do sistema não pode ser removido.' : 'Excluir plano'”
@click=”askDelete(data)”
/>
</div>
</template>
</Column>
</DataTable>
</div>
</div>
<Dialog
v-model:visible="showDlg"
modal
:draggable="false"
:header="isEdit ? 'Editar plano' : 'Novo plano'"
:style="{ width: '620px' }"
class="plans-dialog"
>
<div class="flex flex-col gap-4">
<div>
<label class="block mb-2">Público do plano</label>
<SelectButton
v-model="form.target"
:options="targetOptions"
optionLabel="label"
optionValue="value"
class="w-full"
:disabled="isTargetLocked || saving"
/>
<small class="text-color-secondary">
Planos já existentes não mudam de público. Isso evita inconsistência no catálogo.
</small>
</div>
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-tag" />
<InputText
v-model="form.key"
id="plan_key"
class="w-full pr-10"
variant="filled"
placeholder="ex.: clinic_pro"
:disabled="(isCorePlanEditing || saving)"
@blur="form.key = slugifyKey(form.key)"
/>
</IconField>
<label for="plan_key">Key</label>
</FloatLabel>
<small class="text-color-secondary -mt-3">
Key é técnica e estável (slug). Planos padrão do sistema têm a key protegida.
</small>
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-bookmark" />
<InputText
v-model="form.name"
id="plan_name"
class="w-full pr-10"
variant="filled"
placeholder="ex.: Clínica PRO"
:disabled="saving"
/>
</IconField>
<label for="plan_name">Nome</label>
</FloatLabel>
<small class="text-color-secondary -mt-3">
Nome interno para administração. (Nome público vem de <b>plan_public</b>.)
</small>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-money-bill" />
<InputNumber
v-model="form.price_monthly"
inputId="price_monthly"
class="w-full"
inputClass="w-full pr-10"
variant="filled"
mode="decimal"
:minFractionDigits="2"
:maxFractionDigits="2"
placeholder="ex.: 49,90"
:disabled="saving"
/>
</IconField>
<label for="price_monthly">Preço mensal (R$)</label>
</FloatLabel>
<small class="text-color-secondary">Deixe vazio para “sem preço definido”.</small>
</div>
<div>
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-calendar" />
<InputNumber
v-model="form.price_yearly"
inputId="price_yearly"
class="w-full"
inputClass="w-full pr-10"
variant="filled"
mode="decimal"
:minFractionDigits="2"
:maxFractionDigits="2"
placeholder="ex.: 490,00"
:disabled="saving"
/>
</IconField>
<label for="price_yearly">Preço anual (R$)</label>
</FloatLabel>
<small class="text-color-secondary">Deixe vazio para “sem preço definido”.</small>
</div>
</div>
<!-- max_supervisees: só para planos de supervisor -->
<div v-if="form.target === 'supervisor'">
<FloatLabel variant="on" class="w-full">
<IconField class="w-full">
<InputIcon class="pi pi-users" />
<InputNumber
v-model="form.max_supervisees"
inputId="max_supervisees"
class="w-full"
inputClass="w-full pr-10"
variant="filled"
:useGrouping="false"
:min="1"
placeholder="ex.: 3"
:disabled="saving"
/>
</IconField>
<label for="max_supervisees">Limite de supervisionados</label>
</FloatLabel>
<small class="text-color-secondary">Número máximo de terapeutas que podem ser supervisionados neste plano.</small>
<Dialog
v-model:visible=”showDlg”
modal
:draggable=”false”
:header=”isEdit ? 'Editar plano' : 'Novo plano'”
:style=”{ width: '620px' }”
>
<div class=”flex flex-col gap-4”>
<div>
<label class=”block mb-2”>Público do plano</label>
<SelectButton
v-model=”form.target”
:options=”targetOptions”
optionLabel=”label”
optionValue=”value”
class=”w-full”
:disabled=”isTargetLocked || saving”
/>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>
Planos já existentes não mudam de público. Isso evita inconsistência no catálogo.
</div>
</div>
<template #footer>
<Button label="Cancelar" severity="secondary" outlined @click="showDlg = false" :disabled="saving" />
<Button :label="isEdit ? 'Salvar' : 'Criar'" icon="pi pi-check" :loading="saving" @click="save" />
</template>
</Dialog>
</div>
</template>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-tag” />
<InputText
v-model=”form.key”
id=”plan_key”
class=”w-full pr-10”
variant=”filled”
placeholder=”ex.: clinic_pro”
:disabled=”(isCorePlanEditing || saving)”
@blur=”form.key = slugifyKey(form.key)”
/>
</IconField>
<label for=”plan_key”>Key</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] -mt-3”>
Key é técnica e estável (slug). Planos padrão do sistema têm a key protegida.
</div>
<style scoped>
/* ─── Root ──────────────────────────────────────────────── */
.plans-root { padding: 1rem; }
@media (min-width: 768px) { .plans-root { padding: 1.5rem; } }
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-bookmark” />
<InputText
v-model=”form.name”
id=”plan_name”
class=”w-full pr-10”
variant=”filled”
placeholder=”ex.: Clínica PRO”
:disabled=”saving”
/>
</IconField>
<label for=”plan_name”>Nome</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] -mt-3”>
Nome interno para administração. (Nome público vem de <b>plan_public</b>.)
</div>
/* ─── Hero ──────────────────────────────────────────────── */
.plans-hero-sentinel { height: 1px; }
<div class=”grid grid-cols-1 md:grid-cols-2 gap-4”>
<div>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-money-bill” />
<InputNumber
v-model=”form.price_monthly”
inputId=”price_monthly”
class=”w-full”
inputClass=”w-full pr-10”
variant=”filled”
mode=”decimal”
:minFractionDigits=”2”
:maxFractionDigits=”2”
placeholder=”ex.: 49,90”
:disabled=”saving”
/>
</IconField>
<label for=”price_monthly”>Preço mensal (R$)</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>Deixe vazio para “sem preço definido”.</div>
</div>
.plans-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;
}
.plans-hero--stuck {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.plans-hero__blobs {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.plans-hero__blob {
position: absolute; border-radius: 50%; filter: blur(70px);
}
.plans-hero__blob--1 { width: 20rem; height: 20rem; top: -5rem; right: -4rem; background: rgba(99,102,241,0.12); }
.plans-hero__blob--2 { width: 18rem; height: 18rem; top: 1rem; left: -5rem; background: rgba(52,211,153,0.09); }
<div>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-calendar” />
<InputNumber
v-model=”form.price_yearly”
inputId=”price_yearly”
class=”w-full”
inputClass=”w-full pr-10”
variant=”filled”
mode=”decimal”
:minFractionDigits=”2”
:maxFractionDigits=”2”
placeholder=”ex.: 490,00”
:disabled=”saving”
/>
</IconField>
<label for=”price_yearly”>Preço anual (R$)</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>Deixe vazio para “sem preço definido”.</div>
</div>
</div>
.plans-hero__inner {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
<!-- max_supervisees: só para planos de supervisor -->
<div v-if=”form.target === 'supervisor'”>
<FloatLabel variant=”on” class=”w-full”>
<IconField class=”w-full”>
<InputIcon class=”pi pi-users” />
<InputNumber
v-model=”form.max_supervisees”
inputId=”max_supervisees”
class=”w-full”
inputClass=”w-full pr-10”
variant=”filled”
:useGrouping=”false”
:min=”1”
placeholder=”ex.: 3”
:disabled=”saving”
/>
</IconField>
<label for=”max_supervisees”>Limite de supervisionados</label>
</FloatLabel>
<div class=”text-[1rem] text-[var(--text-color-secondary)] mt-1”>Número máximo de terapeutas que podem ser supervisionados neste plano.</div>
</div>
</div>
/* Ícone */
.plans-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;
}
.plans-hero__icon { font-size: 1.5rem; color: var(--text-color); }
/* Info */
.plans-hero__info { flex: 1; min-width: 0; }
.plans-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;
}
.plans-hero__sub {
font-size: 0.78rem; color: var(--text-color-secondary); margin-top: 4px; line-height: 1.5;
}
/* Ações */
.plans-hero__actions--desktop {
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.plans-hero__actions--mobile { display: none; }
@media (max-width: 1199px) {
.plans-hero__actions--desktop { display: none; }
.plans-hero__actions--mobile { display: flex; }
}
/* ─── Dialog: linhas divisórias no header e footer */
:deep(.plans-dialog .p-dialog-header) {
border-bottom: 1px solid var(--surface-border);
}
:deep(.plans-dialog .p-dialog-footer) {
border-top: 1px solid var(--surface-border);
}
/* Pequena melhoria de leitura */
small.text-color-secondary {
line-height: 1.35rem;
}
</style>
<template #footer>
<Button label=”Cancelar” severity=”secondary” outlined @click=”showDlg = false” :disabled=”saving” />
<Button :label=”isEdit ? 'Salvar' : 'Criar'” icon=”pi pi-check” :loading=”saving” @click=”save” />
</template>
</Dialog>
</template>