+ 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
@@ -431,10 +431,10 @@ function isRecent(row) {
<div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-indigo-500/[0.09]" />
</div>
<div class="relative z-[1] flex items-center gap-3">
<div class="relative z-1 flex items-center gap-3">
<!-- 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-sitemap text-base" />
</div>
<div class="min-w-0 hidden lg:block">
@@ -457,14 +457,14 @@ function isRecent(row) {
</div>
<!-- Ações desktop -->
<div class="hidden xl:flex items-center gap-1 flex-shrink-0">
<div class="hidden xl:flex items-center gap-1 shrink-0">
<Button v-if="selectedGroups?.length" label="Excluir selecionados" icon="pi pi-trash" severity="danger" outlined class="rounded-full" @click="confirmDeleteSelected" />
<Button label="Novo grupo" icon="pi pi-plus" class="rounded-full" @click="openCreate" />
<Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" :loading="loading" @click="fetchAll" />
</div>
<!-- Mobile -->
<div class="flex xl:hidden items-center gap-1 flex-shrink-0 ml-auto">
<div class="flex xl:hidden items-center gap-1 shrink-0 ml-auto">
<Button icon="pi pi-search" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="grpSearchDlgOpen = true" />
<Button icon="pi pi-plus" class="h-9 w-9 rounded-full" @click="openCreate" />
<Button label="Ações" icon="pi pi-ellipsis-v" severity="secondary" size="small" class="rounded-full" @click="(e) => grpMobileMenuRef.toggle(e)" />
@@ -564,7 +564,7 @@ function isRecent(row) {
<Column field="nome" header="Nome" sortable style="min-width: 16rem">
<template #body="{ data }">
<div class="flex items-center gap-2">
<span class="w-[3px] h-5 rounded-sm flex-shrink-0" :style="effectiveCor(data) ? colorStyle(effectiveCor(data)) : { background: 'var(--surface-border)' }" />
<span class="w-[3px] h-5 rounded-sm shrink-0" :style="effectiveCor(data) ? colorStyle(effectiveCor(data)) : { background: 'var(--surface-border)' }" />
<span class="font-medium">{{ data.nome }}</span>
</div>
</template>
@@ -616,18 +616,18 @@ function isRecent(row) {
</div>
<!-- PAINEL LATERAL: grupos com pacientes -->
<div class="w-full lg:w-[272px] lg:flex-shrink-0">
<div class="w-full lg:w-[272px] lg:shrink-0">
<div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
<!-- Header do painel -->
<div class="flex items-center gap-2.5 px-3.5 pt-3 pb-2.5 border-b border-[var(--surface-border,#f1f5f9)]">
<div class="w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0 bg-indigo-500/10 text-indigo-500">
<div class="w-8 h-8 rounded-md flex items-center justify-center shrink-0 bg-indigo-500/10 text-indigo-500">
<i class="pi pi-users text-[0.9rem]" />
</div>
<div class="flex-1 min-w-0">
<span class="block text-[1rem] font-bold text-[var(--text-color)]">Pacientes por grupo</span>
<span class="block text-[0.72rem] text-[var(--text-color-secondary)]">Grupos com associações ativas</span>
</div>
<span v-if="cards.length" class="inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[0.65rem] font-bold flex-shrink-0">{{ cards.length }}</span>
<span v-if="cards.length" class="inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[0.65rem] font-bold shrink-0">{{ cards.length }}</span>
</div>
<!-- Skeleton -->
@@ -651,7 +651,7 @@ function isRecent(row) {
@click="openGroupPatientsModal(g)"
>
<!-- Dot cor -->
<div class="w-2.5 h-2.5 rounded-full flex-shrink-0" :style="effectiveCor(g) ? colorStyle(effectiveCor(g)) : { background: 'var(--surface-border)' }" />
<div class="w-2.5 h-2.5 rounded-full shrink-0" :style="effectiveCor(g) ? colorStyle(effectiveCor(g)) : { background: 'var(--surface-border)' }" />
<div class="flex-1 min-w-0">
<div class="font-semibold text-[0.8rem] truncate text-[var(--text-color)]">{{ g.nome }}</div>
<div class="text-[1rem] text-[var(--text-color-secondary)]">
@@ -659,10 +659,10 @@ function isRecent(row) {
</div>
</div>
<!-- Badge contagem -->
<span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1 rounded-full font-bold text-[0.68rem] flex-shrink-0" :class="g.is_system ? 'bg-sky-500/10 text-sky-600' : 'bg-indigo-500/10 text-indigo-600'">{{
<span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1 rounded-full font-bold text-[0.68rem] shrink-0" :class="g.is_system ? 'bg-sky-500/10 text-sky-600' : 'bg-indigo-500/10 text-indigo-600'">{{
Number(g.patients_count ?? g.patient_count ?? 0)
}}</span>
<i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-30 group-hover:opacity-100 group-hover:text-[var(--primary-color,#6366f1)] transition-all duration-150 flex-shrink-0" />
<i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-30 group-hover:opacity-100 group-hover:text-[var(--primary-color,#6366f1)] transition-all duration-150 shrink-0" />
</button>
</div>
@@ -791,7 +791,7 @@ function isRecent(row) {
>
<template #header>
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-base flex-shrink-0" :style="{ background: patientsGroupHex }">
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-base shrink-0" :style="{ background: patientsGroupHex }">
{{ (patientsDialog.group?.nome || '?')[0].toUpperCase() }}
</div>
<div>