Copyright, Financeiro, Lançamentos, aprimoramentos de ui

src/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue

@@ -1,4 +1,19 @@
-<!-- src/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue -->
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI
+|--------------------------------------------------------------------------
+| Criado e desenvolvido por Leonardo Nohama
+|
+| Tecnologia aplicada à escuta.
+| Estrutura para o cuidado.
+|
+| Arquivo: src/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue
+| Data: 2026
+| Local: São Carlos/SP — Brasil
+|--------------------------------------------------------------------------
+| © 2026 — Todos os direitos reservados
+|--------------------------------------------------------------------------
+-->
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { supabase } from '@/lib/supabase/client'
@@ -146,7 +161,6 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Toast />
 
   <div class="flex flex-col gap-3">
 
@@ -162,10 +176,24 @@ onMounted(async () => {
       </div>
     </div>
 
-    <!-- Loading -->
-    <div v-if="pageLoading || loading" class="flex justify-center py-10">
-      <ProgressSpinner style="width:40px;height:40px" />
-    </div>
+    <!-- ══ SKELETON ══════════════════════════════════════════════ -->
+    <template v-if="pageLoading || loading">
+      <div class="cfg-wrap">
+        <div class="cfg-wrap__head">
+          <Skeleton width="1.75rem" height="1.75rem" border-radius="6px" />
+          <Skeleton width="9rem" height="12px" />
+        </div>
+        <div v-for="n in 3" :key="n" class="flex items-center gap-3 px-4 py-3 border-b border-[var(--surface-border)] last:border-b-0">
+          <Skeleton width="1.75rem" height="1.75rem" border-radius="6px" />
+          <div class="flex flex-col gap-2 flex-1">
+            <Skeleton :width="n === 1 ? '10rem' : n === 2 ? '8rem' : '12rem'" height="11px" />
+            <Skeleton width="6rem" height="10px" />
+          </div>
+          <Skeleton width="3.5rem" height="1.4rem" border-radius="999px" />
+        </div>
+      </div>
+      <AppLoadingPhrases action="Carregando serviços e precificação..." containerClass="py-6" />
+    </template>
 
     <template v-else>
 
@@ -298,6 +326,8 @@ onMounted(async () => {
         <span class="text-sm">Os serviços cadastrados aqui aparecem para seleção ao criar ou editar um evento na agenda.</span>
       </Message>
 
+      <LoadedPhraseBlock />
+
     </template>
   </div>
 </template>