Copyright, Financeiro, Lançamentos, aprimoramentos de ui

src/layout/ConfiguracoesPage.vue

@@ -1,4 +1,19 @@
-<!-- src/layout/ConfiguracoesPage.vue -->
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI
+|--------------------------------------------------------------------------
+| Criado e desenvolvido por Leonardo Nohama
+|
+| Tecnologia aplicada à escuta.
+| Estrutura para o cuidado.
+|
+| Arquivo: src/layout/ConfiguracoesPage.vue
+| Data: 2026
+| Local: São Carlos/SP — Brasil
+|--------------------------------------------------------------------------
+| © 2026 — Todos os direitos reservados
+|--------------------------------------------------------------------------
+-->
 <script setup>
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -6,6 +21,8 @@ import { useRoute, useRouter } from 'vue-router'
 const route = useRoute()
 const router = useRouter()
 
+const showMenu = ref(false)
+
 // ── Hero sticky ────────────────────────────────────────────
 const headerEl = ref(null)
 const headerSentinelRef = ref(null)
@@ -111,6 +128,10 @@ function ir(to) {
 }
 
 onMounted(() => {
+	requestAnimationFrame(() => {
+		showMenu.value = true
+	})
+  
   const rootMargin = `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px`
   _observer = new IntersectionObserver(
     ([entry]) => { headerStuck.value = !entry.isIntersecting },
@@ -124,21 +145,29 @@ onBeforeUnmount(() => { _observer?.disconnect() })
 
 <template>
   <!-- Sentinel -->
-  <div ref="headerSentinelRef" class="cfg-sentinel" />
+  <div ref="headerSentinelRef" class="h-px" />
 
-  <!-- Hero compacto — padrão Compromissos -->
-  <div ref="headerEl" class="cfg-hero mx-3 md:mx-4 mb-3" :class="{ 'cfg-hero--stuck': headerStuck }">
-    <div class="cfg-hero__blobs" aria-hidden="true">
-      <div class="cfg-hero__blob cfg-hero__blob--1" />
-      <div class="cfg-hero__blob cfg-hero__blob--2" />
+  <!-- Hero compacto -->
+  <div
+    ref="headerEl"
+    class="sticky top-[var(--layout-sticky-top,56px)] z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] px-3 py-2.5 mx-3 md:mx-4 mb-3"
+    :class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
+  >
+    <!-- Blobs decorativos -->
+    <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
+      <div class="absolute w-64 h-64 -top-16 -right-8 rounded-full blur-[60px] bg-emerald-300/10" />
+      <div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-indigo-500/[0.09]" />
     </div>
-    <div class="cfg-hero__inner">
+
+    <div class="relative z-[1] flex items-center gap-3">
       <!-- Brand -->
-      <div class="cfg-hero__brand">
-        <div class="cfg-hero__icon"><i class="pi pi-cog text-base" /></div>
+      <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/[0.12] text-[var(--p-primary-500,#6366f1)]">
+          <i class="pi pi-cog text-base" />
+        </div>
         <div class="min-w-0 lg:block">
-          <div class="cfg-hero__title">Configurações</div>
-          <div class="cfg-hero__sub">
+          <div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Configurações</div>
+          <div class="text-xs text-[var(--text-color-secondary)]">
             <span v-if="activeSecao">
               <i :class="activeSecao.icon" class="text-xs mr-1 opacity-60" />{{ activeSecao.label }}
             </span>
@@ -148,52 +177,78 @@ onBeforeUnmount(() => { _observer?.disconnect() })
       </div>
 
       <!-- Ações -->
-      <div class="cfg-hero__actions">
+      <div class="flex items-center gap-2 ml-auto">
         <Button icon="pi pi-arrow-left" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Voltar'" @click="router.back()" />
       </div>
     </div>
   </div>
 
-  <!-- Stats: seções como cards clicáveis -->
+  <!-- Cards de seção (stats row) -->
   <div class="flex flex-wrap gap-2 px-3 md:px-4 mb-3">
     <button
       v-for="s in secoes"
       :key="s.key"
-      class="cfg-sec-card"
-      :class="{ 'cfg-sec-card--active': activeTo === s.to }"
+      class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] cursor-pointer whitespace-nowrap transition-[border-color,background,box-shadow] duration-150 hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)]"
+      :class="
+        activeTo === s.to
+          ? 'cfg-sec-card--active'
+          : 'hover:border-indigo-500/40'
+      "
       @click="ir(s.to)"
     >
-      <i :class="s.icon" class="cfg-sec-card__icon" />
-      <span class="cfg-sec-card__label">{{ s.label }}</span>
+      <i
+        :class="[s.icon, activeTo === s.to ? 'text-[var(--primary-color,#6366f1)]' : 'text-[var(--text-color-secondary)] opacity-75']"
+        class="text-[0.78rem]"
+      />
+      <span
+        class="text-[0.78rem] font-semibold"
+        :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)]' : 'text-[var(--text-color)]'"
+      >{{ s.label }}</span>
     </button>
   </div>
 
   <!-- Layout: sidebar + conteúdo -->
   <div class="flex flex-col xl:flex-row gap-3 px-3 md:px-4 pb-5 items-start">
 
-    <!-- Sidebar: lista de seções (oculto no mobile — já temos os cards acima) -->
-    <div class="hidden xl:flex flex-col gap-1 w-[260px] shrink-0 cfg-sidebar-col">
-      <div class="cfg-sidebar-wrap">
-        <div class="cfg-sidebar-head">
-          <i class="pi pi-cog text-xs opacity-60" />
+    <!-- Sidebar (oculto no mobile) -->
+    <div
+      class="hidden xl:flex flex-col gap-1 w-[300px] shrink-0"
+      style="position: sticky; top: calc(var(--layout-sticky-top, 56px) + 58px); align-self: flex-start;"
+    >
+      <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] overflow-hidden">
+        <!-- Cabeçalho -->
+        <div class="flex items-center gap-1.5 px-3.5 py-2.5 border-b border-[var(--surface-border)] text-[0.7rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65">
+          <i class="pi pi-cog" />
           <span>Seções</span>
         </div>
-        <div class="flex flex-col gap-0.5">
+
+        <!-- Itens -->
+        <TransitionGroup name="menu" tag="div" class="flex flex-col gap-0.5">
           <button
-            v-for="s in secoes"
-            :key="s.key"
-            class="cfg-nav-item"
-            :class="{ 'cfg-nav-item--active': activeTo === s.to }"
+            v-for="(s, i) in showMenu ? secoes : []"
+			:key="s.key"
+			:style="{ transitionDelay: `${i * 50}ms` }"
+            class="flex items-center gap-2.5 px-3.5 py-2.5 border-b last:border-b-0 bg-transparent cursor-pointer w-full text-left transition-colors duration-[120ms] hover:bg-[var(--surface-hover)]"
+            :class="activeTo === s.to ? 'cfg-nav-item--active border border-[var(--primary-color,#6366f1)] last:border-b-1 last:rounded-bl-[6px] last:rounded-br-[6px]' : ''"
             @click="ir(s.to)"
           >
-            <i :class="s.icon" class="cfg-nav-item__icon" />
-            <div class="cfg-nav-item__body">
-              <span class="cfg-nav-item__label">{{ s.label }}</span>
-              <span class="cfg-nav-item__desc">{{ s.desc }}</span>
+            <i
+              :class="[s.icon, activeTo === s.to ? 'text-[var(--primary-color,#6366f1)] opacity-100' : 'text-[var(--text-color-secondary)] opacity-60']"
+              class="text-[0.85rem] flex-shrink-0 w-4 text-center"
+            />
+            <div class="flex-1 min-w-0 flex flex-col gap-px ">
+              <span
+                class="text-[0.90rem] font-semibold truncate"
+                :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)]' : 'text-[var(--text-color)]'"
+              >{{ s.label }}</span>
+              <span class="text-[0.88rem] text-[var(--text-color-secondary)] opacity-70">{{ s.desc }}</span>
             </div>
-            <i class="pi pi-chevron-right cfg-nav-item__arrow" />
+            <i
+              class="pi pi-chevron-right text-[0.6rem] flex-shrink-0"
+              :class="activeTo === s.to ? 'text-[var(--primary-color,#6366f1)] opacity-60' : 'text-[var(--text-color-secondary)] opacity-30'"
+            />
           </button>
-        </div>
+        </TransitionGroup>
       </div>
     </div>
 
@@ -206,178 +261,13 @@ onBeforeUnmount(() => { _observer?.disconnect() })
 </template>
 
 <style scoped>
-/* ── Hero ─────────────────────────────────────────────── */
-.cfg-sentinel { height: 1px; }
-
-.cfg-hero {
-  position: sticky;
-  top: var(--layout-sticky-top, 56px);
-  z-index: 20;
-  overflow: hidden;
-  border-radius: 6px;
-  border: 1px solid var(--surface-border);
-  background: var(--surface-card);
-  padding: 10px 12px;
-}
-.cfg-hero--stuck {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-.cfg-hero__blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
-.cfg-hero__blob  { position: absolute; border-radius: 50%; filter: blur(60px); }
-.cfg-hero__blob--1 { width: 16rem; height: 16rem; top: -4rem; right: -2rem; background: rgba(52,211,153,0.10); }
-.cfg-hero__blob--2 { width: 18rem; height: 18rem; top: 0; left: -4rem; background: rgba(99,102,241,0.09); }
-
-.cfg-hero__inner {
-  position: relative; z-index: 1;
-  display: flex; align-items: center; gap: 0.75rem;
-}
-.cfg-hero__brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
-.cfg-hero__icon {
-  display: grid; place-items: center;
-  width: 2.25rem; height: 2.25rem; border-radius: 6px; flex-shrink: 0;
-  background: color-mix(in srgb, var(--p-primary-500, #6366f1) 12%, transparent);
-  color: var(--p-primary-500, #6366f1);
-}
-.cfg-hero__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-color); }
-.cfg-hero__sub   { font-size: 0.75rem; color: var(--text-color-secondary); }
-.cfg-hero__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
-
-/* Breadcrumb seção ativa */
-.cfg-breadcrumb { display: flex; align-items: center; gap: 0.5rem; }
-.cfg-breadcrumb__active {
-  display: inline-flex; align-items: center; gap: 0.4rem;
-  padding: 0.25rem 0.75rem; border-radius: 999px;
-  border: 1px solid var(--primary-color, #6366f1);
-  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
-  color: var(--primary-color, #6366f1);
-  font-size: 0.8rem; font-weight: 600;
-}
-
-/* ── Cards de seção (stats row) ────────────────────────── */
-.cfg-sec-card {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 0.875rem;
-  border-radius: 6px;
-  border: 1px solid var(--surface-border);
-  background: var(--surface-card);
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
-  white-space: nowrap;
-}
-.cfg-sec-card:hover {
-  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-}
 .cfg-sec-card--active {
   border-color: var(--primary-color, #6366f1);
   background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-card));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
 }
-.cfg-sec-card__icon {
-  font-size: 0.78rem;
-  color: var(--text-color-secondary);
-  opacity: 0.75;
-}
-.cfg-sec-card--active .cfg-sec-card__icon {
-  color: var(--primary-color, #6366f1);
-  opacity: 1;
-}
-.cfg-sec-card__label {
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--text-color);
-}
-.cfg-sec-card--active .cfg-sec-card__label {
-  color: var(--primary-color, #6366f1);
-}
 
-/* ── Sidebar col sticky ───────────────────────────────── */
-.cfg-sidebar-col {
-  position: sticky;
-  top: calc(var(--layout-sticky-top, 56px) + 58px);
-  align-self: flex-start;
-}
-
-/* ── Sidebar nav ──────────────────────────────────────── */
-.cfg-sidebar-wrap {
-  border: 1px solid var(--surface-border);
-  border-radius: 6px;
-  background: var(--surface-card);
-  overflow: hidden;
-}
-.cfg-sidebar-head {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.625rem 0.875rem;
-  border-bottom: 1px solid var(--surface-border);
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-color-secondary);
-  opacity: 0.65;
-}
-.cfg-nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem 0.875rem;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  transition: background 0.12s;
-  width: 100%;
-  text-align: left;
-  border-bottom: 1px solid var(--surface-border);
-}
-.cfg-nav-item:last-child { border-bottom: none; }
-.cfg-nav-item:hover { background: var(--surface-hover); }
 .cfg-nav-item--active {
   background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-card));
 }
-.cfg-nav-item__icon {
-  font-size: 0.85rem;
-  color: var(--text-color-secondary);
-  opacity: 0.6;
-  flex-shrink: 0;
-  width: 16px;
-  text-align: center;
-}
-.cfg-nav-item--active .cfg-nav-item__icon {
-  color: var(--primary-color, #6366f1);
-  opacity: 1;
-}
-.cfg-nav-item__body {
-  flex: 1; min-width: 0;
-  display: flex; flex-direction: column; gap: 1px;
-}
-.cfg-nav-item__label {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--text-color);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.cfg-nav-item--active .cfg-nav-item__label {
-  color: var(--primary-color, #6366f1);
-}
-.cfg-nav-item__desc {
-  font-size: 0.7rem;
-  color: var(--text-color-secondary);
-  opacity: 0.7;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.cfg-nav-item__arrow {
-  font-size: 0.6rem;
-  color: var(--text-color-secondary);
-  opacity: 0.3;
-  flex-shrink: 0;
-}
-.cfg-nav-item--active .cfg-nav-item__arrow {
-  color: var(--primary-color, #6366f1);
-  opacity: 0.6;
-}
 </style>