+ Menu Hover no Layout Rail, Twilio, Sms, Email, Templates, LNovo Layout Configurações

This commit is contained in:
Leonardo
2026-03-25 08:39:45 -03:00
parent 53a4980396
commit 3f1786c9bf
59 changed files with 2553 additions and 1106 deletions
@@ -360,12 +360,12 @@ const emptySub = computed(() => {
<div class="absolute w-56 h-56 -bottom-8 right-1/4 rounded-full blur-[55px] bg-orange-400/[0.07]" />
</div>
<div class="relative z-[1] flex flex-col gap-2.5">
<div class="relative z-1 flex flex-col gap-2.5">
<!-- Linha 1: brand + busca + refresh -->
<div class="flex items-center gap-3 flex-wrap">
<!-- Brand -->
<div class="flex items-center gap-2 flex-shrink-0">
<div class="grid place-items-center w-9 h-9 rounded-md flex-shrink-0 bg-indigo-500/10 text-indigo-500">
<div class="flex items-center gap-2 shrink-0">
<div class="grid place-items-center w-9 h-9 rounded-md shrink-0 bg-indigo-500/10 text-indigo-500">
<i class="pi pi-inbox text-base" />
</div>
<div class="min-w-0 hidden sm:block">
@@ -386,7 +386,7 @@ const emptySub = computed(() => {
</div>
<!-- Refresh -->
<Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full flex-shrink-0" :loading="loading" title="Atualizar" @click="load" />
<Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full shrink-0" :loading="loading" title="Atualizar" @click="load" />
</div>
<!-- Linha 2: chips de status -->
@@ -425,7 +425,7 @@ const emptySub = computed(() => {
@click="filtroStatus = 'autorizado'"
>
<!-- Ícone pulsante -->
<div class="relative flex-shrink-0">
<div class="relative shrink-0">
<div class="grid place-items-center w-8 h-8 rounded-md bg-amber-400/20 text-amber-600">
<i class="pi pi-calendar-plus text-[0.95rem]" />
</div>
@@ -444,7 +444,7 @@ const emptySub = computed(() => {
</div>
<!-- Badge + seta -->
<div class="flex items-center gap-2 flex-shrink-0">
<div class="flex items-center gap-2 shrink-0">
<span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-amber-500 text-white text-[1rem] font-bold">
{{ totalAutorizados }}
</span>
@@ -460,7 +460,7 @@ const emptySub = computed(() => {
<!-- Loading skeleton -->
<div v-if="loading" class="flex flex-col gap-3">
<div v-for="n in 4" :key="n" class="flex items-center gap-4 p-4 rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)]">
<div class="w-10 h-10 rounded-full flex-shrink-0 bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
<div class="w-10 h-10 rounded-full shrink-0 bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
<div class="flex flex-col gap-2 flex-1">
<div class="h-3.5 w-3/5 rounded-md bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
<div class="h-2.5 w-2/5 rounded-md bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
@@ -512,7 +512,7 @@ const emptySub = computed(() => {
<!-- Linha principal clicável -->
<div class="flex items-center gap-3 px-4 py-3.5 cursor-pointer hover:bg-[var(--surface-ground,#f8fafc)] transition-colors duration-100" @click="toggleExpand(s.id)">
<!-- Avatar inicial -->
<div class="grid place-items-center w-10 h-10 rounded-full flex-shrink-0 font-bold text-[0.95rem] bg-indigo-500/10 text-indigo-600">
<div class="grid place-items-center w-10 h-10 rounded-full shrink-0 font-bold text-[0.95rem] bg-indigo-500/10 text-indigo-600">
{{ initials(s) }}
</div>
@@ -532,24 +532,24 @@ const emptySub = computed(() => {
</div>
<!-- Ações rápidas pendente -->
<div v-if="s.status === 'pendente'" class="hidden sm:flex items-center gap-1.5 flex-shrink-0" @click.stop>
<div v-if="s.status === 'pendente'" class="hidden sm:flex items-center gap-1.5 shrink-0" @click.stop>
<Button label="Aprovar" icon="pi pi-check" size="small" severity="success" class="rounded-full" :loading="aprovando === s.id" @click="aprovar(s)" />
<Button label="Recusar" icon="pi pi-times" size="small" severity="danger" outlined class="rounded-full" @click="abrirRecusa(s)" />
<Button label="Converter" icon="pi pi-calendar-plus" size="small" severity="info" outlined class="rounded-full" :loading="convertendoId === s.id" @click="converterEmSessao(s)" />
</div>
<!-- Ações autorizado -->
<div v-else-if="s.status === 'autorizado'" class="hidden sm:flex items-center flex-shrink-0" @click.stop>
<div v-else-if="s.status === 'autorizado'" class="hidden sm:flex items-center shrink-0" @click.stop>
<Button label="Converter em sessão" icon="pi pi-calendar-plus" size="small" severity="info" outlined class="rounded-full" :loading="convertendoId === s.id" @click="converterEmSessao(s)" />
</div>
<!-- Ações convertido -->
<div v-else-if="s.status === 'convertido'" class="hidden sm:flex items-center flex-shrink-0" @click.stop>
<div v-else-if="s.status === 'convertido'" class="hidden sm:flex items-center shrink-0" @click.stop>
<Button label="Ver na agenda" icon="pi pi-calendar" size="small" severity="secondary" outlined class="rounded-full" @click="irParaAgenda(s)" />
</div>
<!-- Chevron -->
<i class="pi flex-shrink-0 text-[1rem] text-[var(--text-color-secondary)] transition-transform duration-200" :class="expandedId === s.id ? 'pi-chevron-up' : 'pi-chevron-down'" />
<i class="pi shrink-0 text-[1rem] text-[var(--text-color-secondary)] transition-transform duration-200" :class="expandedId === s.id ? 'pi-chevron-up' : 'pi-chevron-down'" />
</div>
<!-- Ações mobile (visíveis quando expandido, em telas pequenas) -->