Главная Обзор Помощь
Вход
star_oraculo
/
frontend
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

leonardo 16 часов назад
Родитель
5558350fd6
Сommit
9b9357da6b
22 измененных файлов с 175 добавлено и 219 удалено
Единый вид Показать статистику Diff
  1. 4 0
      index.html
  2. 3 0
      src/components/base/Logo.vue
  3. 9 3
      src/components/base/PageHeaderCard.vue
  4. 2 3
      src/composables/useAsyncState.js
  5. 4 3
      src/composables/useChat.js
  6. 4 3
      src/composables/useConversas.js
  7. 2 1
      src/composables/useDocumentos.js
  8. 2 1
      src/composables/useListaAvaliacoes.js
  9. 2 3
      src/layout/HeaderSistema.vue
  10. 0 2
      src/layout/SidebarSistema.vue
  11. 37 34
      src/views/atendimentos/AtendimentoView.vue
  12. 10 21
      src/views/atendimentos/AvaliacoesView.vue
  13. 8 18
      src/views/atendimentos/GoldenSetView.vue
  14. 11 21
      src/views/atendimentos/NaoResolvidosView.vue
  15. 11 19
      src/views/atendimentos/RankingAtendentesView.vue
  16. 2 1
      src/views/auth/LoginView.vue
  17. 14 26
      src/views/configuracoes/ConfiguracoesView.vue
  18. 14 16
      src/views/conversas/ConversasHistoricoView.vue
  19. 9 13
      src/views/conversas/ConversasPesquisarView.vue
  20. 12 7
      src/views/conversas/ConversasWhatsappView.vue
  21. 1 1
      src/views/pagina-inicial/PaginaInicialView.vue
  22. 14 23
      src/views/usuarios/UsuariosView.vue

+ 4 - 0
index.html
Просмотреть файл 

@@ -4,7 +4,11 @@
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 
+    <meta name="description" content="Assistente interno com base de conhecimento — busca em documentos e atendimentos." />
 
+    <meta name="theme-color" content="#1e2d4b" />
 
+    <meta property="og:title" content="ORÁCULO" />
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
 
+    <link rel="apple-touch-icon" href="/favicon.ico?v=2" />
 
     <title>ORÁCULO</title>
 
     <title>ORÁCULO</title>
 
   </head>
 
   </head>
 
   <body class="bg-background">
 
   <body class="bg-background">

+ 3 - 0
src/components/base/Logo.vue
Просмотреть файл 

@@ -0,0 +1,3 @@
 
+<template>
 
+  <div class="text-[16px] font-extrabold tracking-[0.14em]">ORÁCULO</div>
 
+</template>

+ 9 - 3
src/components/base/PageHeaderCard.vue
Просмотреть файл 

@@ -6,13 +6,17 @@ defineProps({
 
   title: { type: String, required: true },
 
   title: { type: String, required: true },
 
   description: { type: String, default: "" },
 
   description: { type: String, default: "" },
 
   iconClass: { type: String, default: "bg-primary/10 text-primary dark:bg-primary/20" },
 
   iconClass: { type: String, default: "bg-primary/10 text-primary dark:bg-primary/20" },
 
+  // headers com conteúdo extra (ex.: botão "voltar", título multilinha) alinham ao topo
 
+  // em vez de centralizar verticalmente contra o ícone
 
+  alignStart: { type: Boolean, default: false },
 
 });
 
 });
 
 </script>
 
 </script>
 
 
 
 <template>
 
 <template>
 
   <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
   <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
-    <div class="flex flex-wrap items-center justify-between gap-4">
 
-      <div class="flex items-center gap-4">
 
+    <div class="flex flex-wrap justify-between gap-4" :class="alignStart ? 'items-start' : 'items-center'">
 
+      <div class="flex min-w-0 gap-4" :class="alignStart ? 'items-start' : 'items-center'">
 
+        <slot name="leading" />
 
         <div
 
         <div
 
           v-if="icon"
 
           v-if="icon"
 
           class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl"
 
           class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl"
 
@@ -21,7 +25,9 @@ defineProps({
 
           <BaseIcon :icon="icon" class="h-5 w-5" />
 
           <BaseIcon :icon="icon" class="h-5 w-5" />
 
         </div>
 
         </div>
 
         <div class="min-w-0">
 
         <div class="min-w-0">
 
-          <h2 class="text-base font-semibold text-foreground">{{ title }}</h2>
 
+          <slot name="title">
 
+            <h2 class="text-base font-semibold text-foreground">{{ title }}</h2>
 
+          </slot>
 
           <p v-if="description" class="mt-0.5 text-sm text-muted-foreground">{{ description }}</p>
 
           <p v-if="description" class="mt-0.5 text-sm text-muted-foreground">{{ description }}</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>

+ 2 - 3
src/composables/useAsyncState.js
Просмотреть файл 

@@ -1,4 +1,5 @@
 
 import { ref } from "vue";
 
 import { ref } from "vue";
 
+import { friendlyErrorMessage } from "../api/client.js";
 
 
 
 export function useAsyncState(defaultValue = null) {
 
 export function useAsyncState(defaultValue = null) {
 
   const data = ref(defaultValue);
 
   const data = ref(defaultValue);
 
@@ -25,9 +26,7 @@ export function useAsyncState(defaultValue = null) {
 
       return result;
 
       return result;
 
     } catch (e) {
 
     } catch (e) {
 
       if (isStale(id)) return;
 
       if (isStale(id)) return;
 
-      // a mensagem da chamada vem primeiro: o que sobe da API costuma ser técnico
 
-      // ("http_error:500", "network_error") e não diz nada para quem está na tela
 
-      error.value = onErrorMessage || e?.message || "Erro inesperado.";
 
+      error.value = friendlyErrorMessage(e, onErrorMessage || "Erro inesperado.");
 
       throw e;
 
       throw e;
 
     } finally {
 
     } finally {
 
       if (!isStale(id)) loading.value = false;
 
       if (!isStale(id)) loading.value = false;

+ 4 - 3
src/composables/useChat.js
Просмотреть файл 

@@ -10,6 +10,7 @@ import {
 
 } from "../api/chatConversas.js";
 
 } from "../api/chatConversas.js";
 
 import { useToast } from "./useToast.js";
 
 import { useToast } from "./useToast.js";
 
 import { baixarBlob } from "../utils/download.js";
 
 import { baixarBlob } from "../utils/download.js";
 
+import { friendlyErrorMessage } from "../api/client.js";
 
 
 
 let singleton;
 
 let singleton;
 
 let _streamAbort = null;
 
 let _streamAbort = null;
 
@@ -100,7 +101,7 @@ export function useChat() {
 
       conversations.value = [];
 
       conversations.value = [];
 
       conversationsHasMore.value = false;
 
       conversationsHasMore.value = false;
 
       if (err?.message !== "session_expired") {
 
       if (err?.message !== "session_expired") {
 
-        conversationsError.value = err?.message || "Erro ao carregar conversas.";
 
+        conversationsError.value = friendlyErrorMessage(err, "Erro ao carregar conversas.");
 
       }
 
       }
 
     } finally {
 
     } finally {
 
       conversationsLoading.value = false;
 
       conversationsLoading.value = false;
 
@@ -343,7 +344,7 @@ export function useChat() {
 
           if (_streamAbort !== abortController) return;
 
           if (_streamAbort !== abortController) return;
 
           _streamAbort = null;
 
           _streamAbort = null;
 
           _flushStream = null;
 
           _flushStream = null;
 
-          error.value = e?.message || "erro";
 
+          error.value = friendlyErrorMessage(e, "Não consegui responder no momento.");
 
           loading.value = false;
 
           loading.value = false;
 
         }
 
         }
 
       });
 
       });
 
@@ -356,7 +357,7 @@ export function useChat() {
 
       if (_streamAbort === abortController) {
 
       if (_streamAbort === abortController) {
 
         _streamAbort = null;
 
         _streamAbort = null;
 
         _flushStream = null;
 
         _flushStream = null;
 
-        error.value = e?.message || "erro";
 
+        error.value = friendlyErrorMessage(e, "Não consegui responder no momento.");
 
         loading.value = false;
 
         loading.value = false;
 
       }
 
       }
 
     }
 
     }

+ 4 - 3
src/composables/useConversas.js
Просмотреть файл 

@@ -1,5 +1,6 @@
 
 import { ref } from "vue";
 
 import { ref } from "vue";
 
 import { listarConversas, listarMensagensConversa, responderConversa, excluirConversa as excluirConversaApi, buscarMidiaBlob, gerarSugestaoResposta } from "../api/conversas.js";
 
 import { listarConversas, listarMensagensConversa, responderConversa, excluirConversa as excluirConversaApi, buscarMidiaBlob, gerarSugestaoResposta } from "../api/conversas.js";
 
+import { friendlyErrorMessage } from "../api/client.js";
 
 
 
 let singleton;
 
 let singleton;
 
 
 
@@ -70,7 +71,7 @@ export function useConversas() {
 
       conversas.value = results;
 
       conversas.value = results;
 
     } catch (err) {
 
     } catch (err) {
 
       if (epoch !== conversasEpoch) return;
 
       if (epoch !== conversasEpoch) return;
 
-      conversasError.value = err?.message ?? "Falha ao carregar conversas";
 
+      conversasError.value = friendlyErrorMessage(err, "Falha ao carregar conversas");
 
     } finally {
 
     } finally {
 
       if (epoch === conversasEpoch) conversasLoading.value = false;
 
       if (epoch === conversasEpoch) conversasLoading.value = false;
 
     }
 
     }
 
@@ -100,7 +101,7 @@ export function useConversas() {
 
     } catch (err){
 
     } catch (err){
 
       if ( conversaAtivaId.value !== idAlvo) return;
 
       if ( conversaAtivaId.value !== idAlvo) return;
 
       sugestao.value = null;
 
       sugestao.value = null;
 
-      sugestaoError.value = err?.message ?? "Falha ao gerar sugestão";
 
+      sugestaoError.value = friendlyErrorMessage(err, "Falha ao gerar sugestão");
 
     } finally {
 
     } finally {
 
       sugestaoLoading.value = false;
 
       sugestaoLoading.value = false;
 
     }
 
     }
 
@@ -151,7 +152,7 @@ export function useConversas() {
 
       if (results.length && results[results.length - 1].Direcao === "entrada") buscarSugestao();
 
       if (results.length && results[results.length - 1].Direcao === "entrada") buscarSugestao();
 
     } catch (err) {
 
     } catch (err) {
 
       if (conversaAtivaId.value !== id) return;
 
       if (conversaAtivaId.value !== id) return;
 
-      mensagensError.value = err?.message ?? "Falha ao carregar mensagens";
 
+      mensagensError.value = friendlyErrorMessage(err, "Falha ao carregar mensagens");
 
     } finally {
 
     } finally {
 
       if (conversaAtivaId.value === id) mensagensLoading.value = false;
 
       if (conversaAtivaId.value === id) mensagensLoading.value = false;
 
     }
 
     }

+ 2 - 1
src/composables/useDocumentos.js
Просмотреть файл 

@@ -1,6 +1,7 @@
 
 import { markRaw, onMounted, reactive } from "vue";
 
 import { markRaw, onMounted, reactive } from "vue";
 
 import { listDocuments } from "../api/chat.js";
 
 import { listDocuments } from "../api/chat.js";
 
 import { useAsyncState } from "./useAsyncState.js";
 
 import { useAsyncState } from "./useAsyncState.js";
 
+import { friendlyErrorMessage } from "../api/client.js";
 
 
 
 export function useDocumentos() {
 
 export function useDocumentos() {
 
   const docs = reactive({
 
   const docs = reactive({
 
@@ -35,7 +36,7 @@ export function useDocumentos() {
 
       }
 
       }
 
     } catch (e) {
 
     } catch (e) {
 
       if (raceGuard.isStale(epoch)) return;
 
       if (raceGuard.isStale(epoch)) return;
 
-      docs.error = e?.message || "erro";
 
+      docs.error = friendlyErrorMessage(e, "Falha ao carregar os documentos.");
 
       docs.items = [];
 
       docs.items = [];
 
     } finally {
 
     } finally {
 
       if (!raceGuard.isStale(epoch)) docs.loading = false;
 
       if (!raceGuard.isStale(epoch)) docs.loading = false;

+ 2 - 1
src/composables/useListaAvaliacoes.js
Просмотреть файл 

@@ -3,6 +3,7 @@ import { useRoute, useRouter } from "vue-router";
 
 import { listarAvaliacoes, listarSetoresAvaliacoes } from "../api/atendimentos.js";
 
 import { listarAvaliacoes, listarSetoresAvaliacoes } from "../api/atendimentos.js";
 
 import { useAsyncState } from "./useAsyncState.js";
 
 import { useAsyncState } from "./useAsyncState.js";
 
 import { useToast } from "./useToast.js";
 
 import { useToast } from "./useToast.js";
 
+import { friendlyErrorMessage } from "../api/client.js";
 
 
 
 const DEBOUNCE_BUSCA_MS = 400;
 
 const DEBOUNCE_BUSCA_MS = 400;
 
 
 
@@ -86,7 +87,7 @@ export function useListaAvaliacoes({
 
       setores.value = r.results ?? [];
 
       setores.value = r.results ?? [];
 
     } catch (e) {
 
     } catch (e) {
 
       setores.value = [];
 
       setores.value = [];
 
-      toast.erro(e?.message ?? "Falha ao carregar setores");
 
+      toast.erro(friendlyErrorMessage(e, "Falha ao carregar setores"));
 
     }
 
     }
 
   }
 
   }

+ 2 - 3
src/layout/HeaderSistema.vue
Просмотреть файл 

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from "vue-router";
 
 import { ChevronDown, Settings, LogOut } from "lucide-vue-next";
 
 import { ChevronDown, Settings, LogOut } from "lucide-vue-next";
 
 import BotaoAlterarTema from "../components/BotaoAlterarTema.vue";
 
 import BotaoAlterarTema from "../components/BotaoAlterarTema.vue";
 
 import BaseIcon from "../components/base/BaseIcon.vue";
 
 import BaseIcon from "../components/base/BaseIcon.vue";
 
+import Logo from "../components/base/Logo.vue";
 
 import { avatarIniciais as _avatarIniciais, avatarCor as _avatarCor } from "../utils/avatar.js";
 
 import { avatarIniciais as _avatarIniciais, avatarCor as _avatarCor } from "../utils/avatar.js";
 
 import { useAuth } from "../composables/useAuth.js";
 
 import { useAuth } from "../composables/useAuth.js";
 
 import { useMenuUsuario } from "../composables/useMenuUsuario.js";
 
 import { useMenuUsuario } from "../composables/useMenuUsuario.js";
 
@@ -56,9 +57,7 @@ async function encerrarSessao() {
 
     class="col-span-full row-start-1 relative z-30 grid grid-cols-[280px_1fr] items-center gap-4 border-b border-border bg-primary px-5 py-3.5 text-primary-foreground dark:bg-primary max-layout:flex"
 
     class="col-span-full row-start-1 relative z-30 grid grid-cols-[280px_1fr] items-center gap-4 border-b border-border bg-primary px-5 py-3.5 text-primary-foreground dark:bg-primary max-layout:flex"
 
   >
 
   >
 
     <div class="min-w-0 overflow-hidden">
 
     <div class="min-w-0 overflow-hidden">
 
-      <div class="truncate whitespace-nowrap text-[16px] font-extrabold tracking-[0.14em]">
 
-        ORÁCULO
 
-      </div>
 
+      <Logo class="truncate whitespace-nowrap" />
 
       <div class="mt-1.5 truncate whitespace-nowrap text-xs text-primary-foreground/80">
 
       <div class="mt-1.5 truncate whitespace-nowrap text-xs text-primary-foreground/80">
 
         Assistente interno com base de conhecimento
 
         Assistente interno com base de conhecimento
 
       </div>
 
       </div>

+ 0 - 2
src/layout/SidebarSistema.vue
Просмотреть файл 

@@ -11,7 +11,6 @@ import {
 
   FileText,
 
   FileText,
 
   Star,
 
   Star,
 
   TriangleAlert,
 
   TriangleAlert,
 
-  CircleCheck,
 
   SlidersHorizontal,
 
   SlidersHorizontal,
 
   Trophy,
 
   Trophy,
 
 } from "lucide-vue-next";
 
 } from "lucide-vue-next";
 
@@ -47,7 +46,6 @@ const itensBiblioteca = [
 
   { rota: "avaliacoes", icon: Star, label: "Avaliações" },
 
   { rota: "avaliacoes", icon: Star, label: "Avaliações" },
 
   { rota: "ranking-atendentes", icon: Trophy, label: "Ranking de atendentes" },
 
   { rota: "ranking-atendentes", icon: Trophy, label: "Ranking de atendentes" },
 
   { rota: "atendimentos-nao-resolvidos", icon: TriangleAlert, label: "Não resolvidos" },
 
   { rota: "atendimentos-nao-resolvidos", icon: TriangleAlert, label: "Não resolvidos" },
 
-  { rota: "golden-set", icon: CircleCheck, label: "Golden set" },
 
 ];
 
 ];
 
 
 
 function irPara(nome) {
 
 function irPara(nome) {

+ 37 - 34
src/views/atendimentos/AtendimentoView.vue
Просмотреть файл 

@@ -23,6 +23,9 @@ import {
 
 import { ehAudio as ehAudioMidia, ehImagem as ehImagemMidia, ehVideo as ehVideoMidia } from "../../utils/midia.js";
 
 import { ehAudio as ehAudioMidia, ehImagem as ehImagemMidia, ehVideo as ehVideoMidia } from "../../utils/midia.js";
 
 import { ehNovoDia, formatarData, formatarHora } from "../../utils/data.js";
 
 import { ehNovoDia, formatarData, formatarHora } from "../../utils/data.js";
 
 import { useToast } from "../../composables/useToast.js";
 
 import { useToast } from "../../composables/useToast.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
+import Spinner from "../../components/base/Spinner.vue";
 
 
 
 const HORARIO_VISITA_INFORMADO_LABEL = { sim: "Sim", nao: "Não", nao_se_aplica: "Não se aplica" };
 
 const HORARIO_VISITA_INFORMADO_LABEL = { sim: "Sim", nao: "Não", nao_se_aplica: "Não se aplica" };
 
 const toast = useToast();
 
 const toast = useToast();
 
@@ -98,7 +101,7 @@ async function salvarRotulo() {
 
     atendimento.value = { ...atendimento.value, goldenLabel: atualizado };
 
     atendimento.value = { ...atendimento.value, goldenLabel: atualizado };
 
     toast.sucesso("Rótulo salvo.");
 
     toast.sucesso("Rótulo salvo.");
 
   } catch (err) {
 
   } catch (err) {
 
-    toast.erro(err?.message ?? "Falha ao salvar o rótulo.");
 
+    toast.erro(friendlyErrorMessage(err, "Falha ao salvar o rótulo."));
 
   } finally {
 
   } finally {
 
     salvando.value = false;
 
     salvando.value = false;
 
   }
 
   }
 
@@ -116,7 +119,7 @@ async function aceitarComoIa() {
 
     form.value = criarFormulario(atualizado);
 
     form.value = criarFormulario(atualizado);
 
     toast.sucesso("Avaliação da IA aceita como rótulo.");
 
     toast.sucesso("Avaliação da IA aceita como rótulo.");
 
   } catch (err) {
 
   } catch (err) {
 
-    toast.erro(err?.message ?? "Falha ao aceitar a avaliação da IA.");
 
+    toast.erro(friendlyErrorMessage(err, "Falha ao aceitar a avaliação da IA."));
 
   } finally {
 
   } finally {
 
     aceitando.value = false;
 
     aceitando.value = false;
 
   }
 
   }
 
@@ -180,7 +183,7 @@ async function carregar(id) {
 
     form.value = criarFormulario(resultado.goldenLabel ?? null);
 
     form.value = criarFormulario(resultado.goldenLabel ?? null);
 
   } catch (err) {
 
   } catch (err) {
 
     if (String(route.params.id) !== String(id)) return;
 
     if (String(route.params.id) !== String(id)) return;
 
-    erro.value = err?.message ?? "Falha ao carregar o atendimento";
 
+    erro.value = friendlyErrorMessage(err, "Falha ao carregar o atendimento");
 
   } finally {
 
   } finally {
 
     if (String(route.params.id) === String(id)) carregando.value = false;
 
     if (String(route.params.id) === String(id)) carregando.value = false;
 
   }
 
   }
 
@@ -197,7 +200,7 @@ async function atualizarDoIfbot() {
 
     await carregar(atendimento.value.Id);
 
     await carregar(atendimento.value.Id);
 
     toast.sucesso("Atendimento atualizado com os dados mais recentes do ifbot.");
 
     toast.sucesso("Atendimento atualizado com os dados mais recentes do ifbot.");
 
   } catch (err) {
 
   } catch (err) {
 
-    toast.erro(err?.message ?? "Falha ao atualizar o atendimento.");
 
+    toast.erro(friendlyErrorMessage(err, "Falha ao atualizar o atendimento."));
 
   } finally {
 
   } finally {
 
     sincronizandoIfbot.value = false;
 
     sincronizandoIfbot.value = false;
 
   }
 
   }
 
@@ -213,7 +216,7 @@ async function reavaliar() {
 
     await carregar(atendimento.value.Id);
 
     await carregar(atendimento.value.Id);
 
     toast.sucesso("Atendimento reavaliado.");
 
     toast.sucesso("Atendimento reavaliado.");
 
   } catch (err) {
 
   } catch (err) {
 
-    toast.erro(err?.message ?? "Falha ao reavaliar o atendimento.");
 
+    toast.erro(friendlyErrorMessage(err, "Falha ao reavaliar o atendimento."));
 
   } finally {
 
   } finally {
 
     reavaliando.value = false;
 
     reavaliando.value = false;
 
   }
 
   }
 
@@ -228,32 +231,32 @@ watch(() => route.params.id, carregar, { immediate: true });
 
   <LayoutSistema>
 
   <LayoutSistema>
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
-        <section
 
-          class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
 
-        >
 
-          <div class="flex flex-wrap items-start justify-between gap-4">
 
-            <div class="flex min-w-0 items-start gap-4">
 
-              <button
 
-                type="button"
 
-                class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-gray-300 text-gray-600 hover:bg-black/[0.03] dark:border-gray-600 dark:text-gray-300 dark:hover:bg-white/[0.04]"
 
-                title="Voltar"
 
-                @click="voltar"
 
-              >
 
-                <BaseIcon :icon="ArrowLeft" class="h-4 w-4" />
 
-              </button>
 
-              <div class="min-w-0">
 
-                <h2 class="text-base font-semibold text-foreground">
 
-                  {{ atendimento?.Codigo ?? `Atendimento #${route.params.id}` }}
 
-                  <span v-if="atendimento?.cliente?.Nome" class="font-normal text-muted-foreground">
 
-                    — {{ atendimento.cliente.Nome }}
 
-                  </span>
 
-                </h2>
 
-                <p v-if="atendimento" class="mt-0.5 text-sm text-muted-foreground">
 
-                  <span v-if="atendimento.Setor">{{ atendimento.Setor }} · </span>{{ formatarData(atendimento.Abertura) }}
 
-                  · {{ mensagens.length }} mensagens
 
-                </p>
 
-              </div>
 
-            </div>
 
+        <PageHeaderCard align-start title="">
 
+          <template #leading>
 
+            <button
 
+              type="button"
 
+              class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-gray-300 text-gray-600 hover:bg-black/[0.03] dark:border-gray-600 dark:text-gray-300 dark:hover:bg-white/[0.04]"
 
+              title="Voltar"
 
+              @click="voltar"
 
+            >
 
+              <BaseIcon :icon="ArrowLeft" class="h-4 w-4" />
 
+            </button>
 
+          </template>
 
+
 
+          <template #title>
 
+            <h2 class="text-base font-semibold text-foreground">
 
+              {{ atendimento?.Codigo ?? `Atendimento #${route.params.id}` }}
 
+              <span v-if="atendimento?.cliente?.Nome" class="font-normal text-muted-foreground">
 
+                — {{ atendimento.cliente.Nome }}
 
+              </span>
 
+            </h2>
 
+            <p v-if="atendimento" class="mt-0.5 text-sm text-muted-foreground">
 
+              <span v-if="atendimento.Setor">{{ atendimento.Setor }} · </span>{{ formatarData(atendimento.Abertura) }}
 
+              · {{ mensagens.length }} mensagens
 
+            </p>
 
+          </template>
 
+
 
+          <template #actions>
 
             <div class="flex flex-wrap items-center gap-2">
 
             <div class="flex flex-wrap items-center gap-2">
 
               <BaseButton
 
               <BaseButton
 
                 v-if="isAdmin && atendimento"
 
                 v-if="isAdmin && atendimento"
 
@@ -288,7 +291,7 @@ watch(() => route.params.id, carregar, { immediate: true });
 
                 </BaseBadge>
 
                 </BaseBadge>
 
               </template>
 
               </template>
 
             </div>
 
             </div>
 
-          </div>
 
+          </template>
 
 
 
           <p v-if="avaliacao?.Resumo" class="mt-4 text-sm text-muted-foreground">
 
           <p v-if="avaliacao?.Resumo" class="mt-4 text-sm text-muted-foreground">
 
             <span class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Resumo da IA: </span>
 
             <span class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Resumo da IA: </span>
 
@@ -298,14 +301,14 @@ watch(() => route.params.id, carregar, { immediate: true });
 
             <span class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Motivo do cancelamento: </span>
 
             <span class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Motivo do cancelamento: </span>
 
             {{ avaliacao.MotivoCancelamento }}
 
             {{ avaliacao.MotivoCancelamento }}
 
           </p>
 
           </p>
 
-        </section>
 
+        </PageHeaderCard>
 
 
 
         <section class="rounded-2xl border border-gray-200 bg-background/70 shadow-sm dark:border-gray-700 dark:bg-background/20">
 
         <section class="rounded-2xl border border-gray-200 bg-background/70 shadow-sm dark:border-gray-700 dark:bg-background/20">
 
           <div class="border-b border-gray-200 px-4 py-3 text-sm font-semibold text-gray-900 dark:border-gray-700 dark:text-gray-100">
 
           <div class="border-b border-gray-200 px-4 py-3 text-sm font-semibold text-gray-900 dark:border-gray-700 dark:text-gray-100">
 
             Conversa completa
 
             Conversa completa
 
           </div>
 
           </div>
 
 
 
-          <div v-if="carregando" class="p-6 text-sm text-muted-foreground">Carregando conversa...</div>
 
+          <Spinner v-if="carregando" class="p-6" label="Carregando conversa..." />
 
           <div v-else-if="erro" class="m-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
           <div v-else-if="erro" class="m-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
             {{ erro }}
 
             {{ erro }}
 
           </div>
 
           </div>

+ 10 - 21
src/views/atendimentos/AvaliacoesView.vue
Просмотреть файл 

@@ -12,11 +12,13 @@ import Spinner from "../../components/base/Spinner.vue";
 
 import ItemAvaliacao from "../../components/atendimentos/ItemAvaliacao.vue";
 
 import ItemAvaliacao from "../../components/atendimentos/ItemAvaliacao.vue";
 
 import { ClipboardList, Star, CircleCheck, Check, Smile, TriangleAlert, ChevronUp, ChevronDown } from "lucide-vue-next";
 
 import { ClipboardList, Star, CircleCheck, Check, Smile, TriangleAlert, ChevronUp, ChevronDown } from "lucide-vue-next";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
 import { avaliarAtendimentosPendentes, estatisticasAvaliacoes } from "../../api/atendimentos.js";
 
 import { avaliarAtendimentosPendentes, estatisticasAvaliacoes } from "../../api/atendimentos.js";
 
 import { queryTexto, useListaAvaliacoes } from "../../composables/useListaAvaliacoes.js";
 
 import { queryTexto, useListaAvaliacoes } from "../../composables/useListaAvaliacoes.js";
 
 import { useAsyncState } from "../../composables/useAsyncState.js";
 
 import { useAsyncState } from "../../composables/useAsyncState.js";
 
 import { useToast } from "../../composables/useToast.js";
 
 import { useToast } from "../../composables/useToast.js";
 
 import { cancelamentoLabel, pct, resolvidoLabel, sentimentoLabel } from "../../utils/avaliacoes.js";
 
 import { cancelamentoLabel, pct, resolvidoLabel, sentimentoLabel } from "../../utils/avaliacoes.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
 
 
 const opcoesResolucao = Object.entries({ ...resolvidoLabel, ...cancelamentoLabel }).map(([value, label]) => ({
 
 const opcoesResolucao = Object.entries({ ...resolvidoLabel, ...cancelamentoLabel }).map(([value, label]) => ({
 
   value,
 
   value,
 
@@ -124,7 +126,7 @@ async function avaliarPendentes() {
 
     loteResultado.value = await avaliarAtendimentosPendentes({ limite: 10 });
 
     loteResultado.value = await avaliarAtendimentosPendentes({ limite: 10 });
 
     await Promise.all([carregarStats(), carregarLista()]);
 
     await Promise.all([carregarStats(), carregarLista()]);
 
   } catch (err) {
 
   } catch (err) {
 
-    erro.value = err?.message ?? "Falha ao avaliar pendentes";
 
+    erro.value = friendlyErrorMessage(err, "Falha ao avaliar pendentes");
 
   } finally {
 
   } finally {
 
     avaliandoLote.value = false;
 
     avaliandoLote.value = false;
 
   }
 
   }
 
@@ -152,29 +154,16 @@ onBeforeUnmount(() => {
 
   <LayoutSistema>
 
   <LayoutSistema>
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
-        <section
 
-          class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
 
+        <PageHeaderCard
 
+          :icon="Star"
 
+          title="Avaliações de Atendimento (IA)"
 
+          description="Score do atendente, resolução, sentimento do cliente e pontos de melhoria gerados automaticamente."
 
         >
 
         >
 
-          <div class="flex flex-wrap items-center justify-between gap-4">
 
-            <div class="flex items-center gap-4">
 
-              <div
 
-                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary dark:bg-primary/20"
 
-              >
 
-                <BaseIcon :icon="Star" class="h-5 w-5" />
 
-              </div>
 
-              <div class="min-w-0">
 
-                <h2 class="text-base font-semibold text-foreground">
 
-                  Avaliações de Atendimento (IA)
 
-                </h2>
 
-                <p class="mt-0.5 text-sm text-muted-foreground">
 
-                  Score do atendente, resolução, sentimento do cliente e pontos de melhoria gerados automaticamente.
 
-                </p>
 
-              </div>
 
-            </div>
 
+          <template #actions>
 
             <BaseButton :loading="avaliandoLote" @click="avaliarPendentes">
 
             <BaseButton :loading="avaliandoLote" @click="avaliarPendentes">
 
               {{ avaliandoLote ? "Avaliando..." : `Avaliar pendentes${stats?.pendentes ? ` (${stats.pendentes})` : ""}` }}
 
               {{ avaliandoLote ? "Avaliando..." : `Avaliar pendentes${stats?.pendentes ? ` (${stats.pendentes})` : ""}` }}
 
             </BaseButton>
 
             </BaseButton>
 
-          </div>
 
+          </template>
 
 
 
           <div v-if="progresso" class="mt-5">
 
           <div v-if="progresso" class="mt-5">
 
             <div class="flex items-center justify-between text-xs text-muted-foreground">
 
             <div class="flex items-center justify-between text-xs text-muted-foreground">
 
@@ -207,7 +196,7 @@ onBeforeUnmount(() => {
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
             {{ erro }}
 
             {{ erro }}
 
           </div>
 
           </div>
 
-        </section>
 
+        </PageHeaderCard>
 
 
 
         <section v-if="stats" class="grid grid-cols-2 gap-3 md:grid-cols-5">
 
         <section v-if="stats" class="grid grid-cols-2 gap-3 md:grid-cols-5">
 
           <StatCard label="Score médio" :value="stats.scoreMedio ?? '—'" suffix=" / 10" variant="info">
 
           <StatCard label="Score médio" :value="stats.scoreMedio ?? '—'" suffix=" / 10" variant="info">

+ 8 - 18
src/views/atendimentos/GoldenSetView.vue
Просмотреть файл 

@@ -8,10 +8,12 @@ import StatCard from "../../components/base/StatCard.vue";
 
 import ListItemCard from "../../components/base/ListItemCard.vue";
 
 import ListItemCard from "../../components/base/ListItemCard.vue";
 
 import EmptyState from "../../components/base/EmptyState.vue";
 
 import EmptyState from "../../components/base/EmptyState.vue";
 
 import Spinner from "../../components/base/Spinner.vue";
 
 import Spinner from "../../components/base/Spinner.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
 import { FolderSearch, CircleCheck, CircleAlert, Check } from "lucide-vue-next";
 
 import { FolderSearch, CircleCheck, CircleAlert, Check } from "lucide-vue-next";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import { listarGoldenSet } from "../../api/atendimentos.js";
 
 import { listarGoldenSet } from "../../api/atendimentos.js";
 
 import { formatarData } from "../../utils/data.js";
 
 import { formatarData } from "../../utils/data.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
 
 
 const router = useRouter();
 
 const router = useRouter();
 
 
 
@@ -41,7 +43,7 @@ async function carregar() {
 
     const r = await listarGoldenSet();
 
     const r = await listarGoldenSet();
 
     itens.value = r.results ?? [];
 
     itens.value = r.results ?? [];
 
   } catch (err) {
 
   } catch (err) {
 
-    erro.value = err?.message ?? "Falha ao carregar o golden set";
 
+    erro.value = friendlyErrorMessage(err, "Falha ao carregar o golden set");
 
   } finally {
 
   } finally {
 
     carregando.value = false;
 
     carregando.value = false;
 
   }
 
   }
 
@@ -58,27 +60,15 @@ onMounted(carregar);
 
   <LayoutSistema>
 
   <LayoutSistema>
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
-        <section
 
-          class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
 
+        <PageHeaderCard
 
+          :icon="CircleCheck"
 
+          title="Golden Set"
 
+          description="Amostra de atendimentos rotulados à mão, usada para medir a acurácia do avaliador por IA."
 
         >
 
         >
 
-          <div class="flex items-center gap-4">
 
-            <div
 
-              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary dark:bg-primary/20"
 
-            >
 
-              <BaseIcon :icon="CircleCheck" class="h-5 w-5" />
 
-            </div>
 
-            <div class="min-w-0">
 
-              <h2 class="text-base font-semibold text-foreground">Golden Set</h2>
 
-              <p class="mt-0.5 text-sm text-muted-foreground">
 
-                Amostra de atendimentos rotulados à mão, usada para medir a acurácia do avaliador por IA.
 
-              </p>
 
-            </div>
 
-          </div>
 
-
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
             {{ erro }}
 
             {{ erro }}
 
           </div>
 
           </div>
 
-        </section>
 
+        </PageHeaderCard>
 
 
 
         <section class="grid grid-cols-2 gap-3 sm:grid-cols-4">
 
         <section class="grid grid-cols-2 gap-3 sm:grid-cols-4">
 
           <StatCard label="Total na amostra" :value="itens.length" variant="default">
 
           <StatCard label="Total na amostra" :value="itens.length" variant="default">

+ 11 - 21
src/views/atendimentos/NaoResolvidosView.vue
Просмотреть файл 

@@ -12,11 +12,13 @@ import Spinner from "../../components/base/Spinner.vue";
 
 import ItemAvaliacao from "../../components/atendimentos/ItemAvaliacao.vue";
 
 import ItemAvaliacao from "../../components/atendimentos/ItemAvaliacao.vue";
 
 import { CircleCheck, TriangleAlert, Star, BarChart3, ChevronUp, ChevronDown, Download } from "lucide-vue-next";
 
 import { CircleCheck, TriangleAlert, Star, BarChart3, ChevronUp, ChevronDown, Download } from "lucide-vue-next";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
 import { baixarRelatorioNaoResolvidos, estatisticasAvaliacoes } from "../../api/atendimentos.js";
 
 import { baixarRelatorioNaoResolvidos, estatisticasAvaliacoes } from "../../api/atendimentos.js";
 
 import { useToast } from "../../composables/useToast.js";
 
 import { useToast } from "../../composables/useToast.js";
 
 import { queryTexto, useListaAvaliacoes } from "../../composables/useListaAvaliacoes.js";
 
 import { queryTexto, useListaAvaliacoes } from "../../composables/useListaAvaliacoes.js";
 
 import { useAsyncState } from "../../composables/useAsyncState.js";
 
 import { useAsyncState } from "../../composables/useAsyncState.js";
 
 import { pct, sentimentoLabel } from "../../utils/avaliacoes.js";
 
 import { pct, sentimentoLabel } from "../../utils/avaliacoes.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
 
 
 const opcoesSentimento = Object.entries(sentimentoLabel).map(([value, label]) => ({ value, label }));
 
 const opcoesSentimento = Object.entries(sentimentoLabel).map(([value, label]) => ({ value, label }));
 
 
 
@@ -131,7 +133,7 @@ async function baixarRelatorio() {
 
       ordenacao: filtroOrdenacao.value
 
       ordenacao: filtroOrdenacao.value
 
     });
 
     });
 
   } catch (err) {
 
   } catch (err) {
 
-    toast.erro(err?.message ?? "Falha ao gerar o relatório");
 
+    toast.erro(friendlyErrorMessage(err, "Falha ao gerar o relatório"));
 
   } finally {
 
   } finally {
 
     gerandoRelatorio.value = false;
 
     gerandoRelatorio.value = false;
 
   }
 
   }
 
@@ -147,25 +149,13 @@ onMounted(() => {
 
   <LayoutSistema>
 
   <LayoutSistema>
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
-        <section
 
-          class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
 
+        <PageHeaderCard
 
+          :icon="TriangleAlert"
 
+          icon-class="bg-red-500/10 text-red-600 dark:bg-red-500/20 dark:text-red-400"
 
+          title="Atendimentos Não Resolvidos (IA)"
 
+          description="Atendimentos marcados como não resolvidos pelo avaliador automático, por período e setor."
 
         >
 
         >
 
-          <div class="flex flex-wrap items-center justify-between gap-4">
 
-            <div class="flex items-center gap-4">
 
-              <div
 
-                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-red-500/10 text-red-600 dark:bg-red-500/20 dark:text-red-400"
 
-              >
 
-                <BaseIcon :icon="TriangleAlert" class="h-5 w-5" />
 
-              </div>
 
-              <div class="min-w-0">
 
-                <h2 class="text-base font-semibold text-foreground">
 
-                  Atendimentos Não Resolvidos (IA)
 
-                </h2>
 
-                <p class="mt-0.5 text-sm text-muted-foreground">
 
-                  Atendimentos marcados como não resolvidos pelo avaliador automático, por período e setor.
 
-                </p>
 
-              </div>
 
-            </div>
 
+          <template #actions>
 
             <div class="flex items-center gap-2">
 
             <div class="flex items-center gap-2">
 
               <input
 
               <input
 
                 v-model="filtroDataInicio"
 
                 v-model="filtroDataInicio"
 
@@ -181,12 +171,12 @@ onMounted(() => {
 
                 @change="aplicarFiltros"
 
                 @change="aplicarFiltros"
 
               />
 
               />
 
             </div>
 
             </div>
 
-          </div>
 
+          </template>
 
 
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
             {{ erro }}
 
             {{ erro }}
 
           </div>
 
           </div>
 
-        </section>
 
+        </PageHeaderCard>
 
 
 
         <section v-if="stats" class="grid grid-cols-2 gap-3 md:grid-cols-3">
 
         <section v-if="stats" class="grid grid-cols-2 gap-3 md:grid-cols-3">
 
           <StatCard label="Não resolvidos no período" :value="stats.avaliados" variant="danger">
 
           <StatCard label="Não resolvidos no período" :value="stats.avaliados" variant="danger">

+ 11 - 19
src/views/atendimentos/RankingAtendentesView.vue
Просмотреть файл 

@@ -8,12 +8,14 @@ import BaseBadge from "../../components/base/BaseBadge.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import EmptyState from "../../components/base/EmptyState.vue";
 
 import EmptyState from "../../components/base/EmptyState.vue";
 
 import Spinner from "../../components/base/Spinner.vue";
 
 import Spinner from "../../components/base/Spinner.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
 import { Trophy, Star, Users, CircleCheck, Info, ChevronUp, ChevronDown, Download } from "lucide-vue-next";
 
 import { Trophy, Star, Users, CircleCheck, Info, ChevronUp, ChevronDown, Download } from "lucide-vue-next";
 
 import { rankingAtendentesAvaliacoes, baixarRelatorioRankingAtendentes } from "../../api/atendimentos.js";
 
 import { rankingAtendentesAvaliacoes, baixarRelatorioRankingAtendentes } from "../../api/atendimentos.js";
 
 import { useAsyncState } from "../../composables/useAsyncState.js";
 
 import { useAsyncState } from "../../composables/useAsyncState.js";
 
 import { useToast } from "../../composables/useToast.js";
 
 import { useToast } from "../../composables/useToast.js";
 
 import { queryTexto } from "../../composables/useListaAvaliacoes.js";
 
 import { queryTexto } from "../../composables/useListaAvaliacoes.js";
 
 import { scoreVariant } from "../../utils/avaliacoes.js";
 
 import { scoreVariant } from "../../utils/avaliacoes.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
 
 
 
 
 const COR_BARRA = {
 
 const COR_BARRA = {
 
@@ -157,7 +159,7 @@ async function baixarRelatorio() {
 
       dataFim: filtroDataFim.value || undefined
 
       dataFim: filtroDataFim.value || undefined
 
     });
 
     });
 
   } catch (err) {
 
   } catch (err) {
 
-    toast.erro(err?.message ?? "Falha ao gerar o relatório.");
 
+    toast.erro(friendlyErrorMessage(err, "Falha ao gerar o relatório."));
 
   } finally {
 
   } finally {
 
     gerandoRelatorio.value = false;
 
     gerandoRelatorio.value = false;
 
   }
 
   }
 
@@ -172,23 +174,13 @@ onMounted(() => {
 
   <LayoutSistema>
 
   <LayoutSistema>
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
     <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
       <div class="mx-auto w-full max-w-[960px] space-y-6">
 
-        <section
 
-          class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
 
+        <PageHeaderCard
 
+          :icon="Trophy"
 
+          icon-class="bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400"
 
+          title="Ranking de Atendentes — Suporte Interno"
 
+          description="Técnicos do Suporte Interno ordenados pela nota média das avaliações automáticas, por período."
 
         >
 
         >
 
-          <div class="flex flex-wrap items-center justify-between gap-4">
 
-            <div class="flex items-center gap-4">
 
-              <div
 
-                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400"
 
-              >
 
-                <BaseIcon :icon="Trophy" class="h-5 w-5" />
 
-              </div>
 
-              <div class="min-w-0">
 
-                <h2 class="text-base font-semibold text-foreground">Ranking de Atendentes — Suporte Interno</h2>
 
-                <p class="mt-0.5 text-sm text-muted-foreground">
 
-                  Técnicos do Suporte Interno ordenados pela nota média das avaliações automáticas, por período.
 
-                </p>
 
-              </div>
 
-            </div>
 
+          <template #actions>
 
             <div class="flex items-center gap-2">
 
             <div class="flex items-center gap-2">
 
               <input
 
               <input
 
                 v-model="filtroDataInicio"
 
                 v-model="filtroDataInicio"
 
@@ -204,7 +196,7 @@ onMounted(() => {
 
                 @change="carregar"
 
                 @change="carregar"
 
               />
 
               />
 
             </div>
 
             </div>
 
-          </div>
 
+          </template>
 
 
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
           <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
             {{ erro }}
 
             {{ erro }}
 
@@ -215,7 +207,7 @@ onMounted(() => {
 
             {{ metadados.descartadasSemAtendente + metadados.descartadasNomeInvalido + metadados.descartadasForaDaEquipe }}
 
             {{ metadados.descartadasSemAtendente + metadados.descartadasNomeInvalido + metadados.descartadasForaDaEquipe }}
 
             sem atendente identificado ou fora da equipe
 
             sem atendente identificado ou fora da equipe
 
           </p>
 
           </p>
 
-        </section>
 
+        </PageHeaderCard>
 
 
 
         <section class="grid grid-cols-2 gap-3 md:grid-cols-3">
 
         <section class="grid grid-cols-2 gap-3 md:grid-cols-3">
 
           <StatCard label="Atendentes no ranking" :value="resumo.totalAtendentes" variant="default">
 
           <StatCard label="Atendentes no ranking" :value="resumo.totalAtendentes" variant="default">

+ 2 - 1
src/views/auth/LoginView.vue
Просмотреть файл 

@@ -6,6 +6,7 @@ import DecorativeGradient from "../../components/DecorativeGradient.vue";
 
 import ModalEsqueciSenha from "../../components/ModalEsqueciSenha.vue";
 
 import ModalEsqueciSenha from "../../components/ModalEsqueciSenha.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
+import Logo from "../../components/base/Logo.vue";
 
 import { LocateFixed, Eye, EyeOff } from "lucide-vue-next";
 
 import { LocateFixed, Eye, EyeOff } from "lucide-vue-next";
 
 import { useAuth } from "../../composables/useAuth.js";
 
 import { useAuth } from "../../composables/useAuth.js";
 
 
 
@@ -115,7 +116,7 @@ async function onSubmit() {
 
 
 
     <header class="relative z-10 flex items-center justify-between px-6 py-5">
 
     <header class="relative z-10 flex items-center justify-between px-6 py-5">
 
       <div>
 
       <div>
 
-        <div class="text-[16px] font-extrabold tracking-[0.14em]">ORÁCULO</div>
 
+        <Logo />
 
         <div class="mt-1 text-sm text-muted-foreground">
 
         <div class="mt-1 text-sm text-muted-foreground">
 
           Acesso ao assistente interno
 
           Acesso ao assistente interno
 
         </div>
 
         </div>

+ 14 - 26
src/views/configuracoes/ConfiguracoesView.vue
Просмотреть файл 

@@ -5,10 +5,12 @@ import BotaoAlterarTema from "../../components/BotaoAlterarTema.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseBadge from "../../components/base/BaseBadge.vue";
 
 import BaseBadge from "../../components/base/BaseBadge.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
 import { SlidersVertical, Users, ChevronRight, RefreshCw, MessageCircle, Sun } from "lucide-vue-next";
 
 import { SlidersVertical, Users, ChevronRight, RefreshCw, MessageCircle, Sun } from "lucide-vue-next";
 
 import { useAuth } from "../../composables/useAuth.js";
 
 import { useAuth } from "../../composables/useAuth.js";
 
 import { useWhatsappConexao } from "../../composables/useWhatsappConexao.js";
 
 import { useWhatsappConexao } from "../../composables/useWhatsappConexao.js";
 
 import { sincronizarAtendimentos, sincronizarTodosAtendimentos } from "../../api/atendimentos.js";
 
 import { sincronizarAtendimentos, sincronizarTodosAtendimentos } from "../../api/atendimentos.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
 
 
 const { isAdmin } = useAuth();
 
 const { isAdmin } = useAuth();
 
 
 
@@ -50,7 +52,7 @@ async function sincronizarAgora() {
 
   try {
 
   try {
 
     syncResultado.value = await sincronizarAtendimentos({ limite: 50 });
 
     syncResultado.value = await sincronizarAtendimentos({ limite: 50 });
 
   } catch (err) {
 
   } catch (err) {
 
-    syncErro.value = err?.message ?? "Falha ao sincronizar";
 
+    syncErro.value = friendlyErrorMessage(err, "Falha ao sincronizar");
 
   } finally {
 
   } finally {
 
     sincronizando.value = false;
 
     sincronizando.value = false;
 
   }
 
   }
 
@@ -64,7 +66,7 @@ async function importarTudo() {
 
   try {
 
   try {
 
     syncResultado.value = await sincronizarTodosAtendimentos();
 
     syncResultado.value = await sincronizarTodosAtendimentos();
 
   } catch (err) {
 
   } catch (err) {
 
-    syncErro.value = err?.message ?? "Falha ao importar";
 
+    syncErro.value = friendlyErrorMessage(err, "Falha ao importar");
 
   } finally {
 
   } finally {
 
     importandoTudo.value = false;
 
     importandoTudo.value = false;
 
   }
 
   }
 
@@ -77,25 +79,11 @@ async function importarTudo() {
 
       class="min-h-[calc(100vh-var(--layout-header-height))] flex items-start justify-center px-4 pt-8 pb-12"
 
       class="min-h-[calc(100vh-var(--layout-header-height))] flex items-start justify-center px-4 pt-8 pb-12"
 
     >
 
     >
 
       <div class="w-full max-w-[640px] space-y-6">
 
       <div class="w-full max-w-[640px] space-y-6">
 
-        <section
 
-          class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
 
-        >
 
-          <div class="flex items-center gap-4">
 
-            <div
 
-              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary dark:bg-primary/20"
 
-            >
 
-              <BaseIcon :icon="SlidersVertical" class="h-5 w-5" />
 
-            </div>
 
-            <div class="min-w-0">
 
-              <h2 class="text-base font-semibold text-foreground">
 
-                Configurações do Sistema
 
-              </h2>
 
-              <p class="mt-0.5 text-sm text-muted-foreground">
 
-                Gerencie usuários e preferências da plataforma.
 
-              </p>
 
-            </div>
 
-          </div>
 
-        </section>
 
+        <PageHeaderCard
 
+          :icon="SlidersVertical"
 
+          title="Configurações do Sistema"
 
+          description="Gerencie usuários e preferências da plataforma."
 
+        />
 
 
 
         <section v-if="isAdmin">
 
         <section v-if="isAdmin">
 
           <div class="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
 
           <div class="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
 
@@ -184,14 +172,14 @@ async function importarTudo() {
 
               </div>
 
               </div>
 
               <div class="flex shrink-0 items-center gap-3">
 
               <div class="flex shrink-0 items-center gap-3">
 
                 <BaseBadge :variant="badgeConexaoVariant">{{ badgeConexaoTexto }}</BaseBadge>
 
                 <BaseBadge :variant="badgeConexaoVariant">{{ badgeConexaoTexto }}</BaseBadge>
 
-                <button
 
-                  type="button"
 
-                  class="rounded-xl border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-white/5"
 
-                  :disabled="verificandoWhatsapp"
 
+                <BaseButton
 
+                  variant="secondary"
 
+                  size="sm"
 
+                  :loading="verificandoWhatsapp"
 
                   @click="atualizarStatusWhatsapp"
 
                   @click="atualizarStatusWhatsapp"
 
                 >
 
                 >
 
                   Verificar status
 
                   Verificar status
 
-                </button>
 
+                </BaseButton>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
             <div v-if="erroWhatsapp" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
             <div v-if="erroWhatsapp" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">

+ 14 - 16
src/views/conversas/ConversasHistoricoView.vue
Просмотреть файл 

@@ -4,6 +4,8 @@ import { useRouter } from "vue-router";
 
 import LayoutSistema from "../../layout/LayoutSistema.vue";
 
 import LayoutSistema from "../../layout/LayoutSistema.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import ConfirmDialog from "../../components/base/ConfirmDialog.vue";
 
 import ConfirmDialog from "../../components/base/ConfirmDialog.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
+import EmptyState from "../../components/base/EmptyState.vue";
 
 import { History, Trash2 } from "lucide-vue-next";
 
 import { History, Trash2 } from "lucide-vue-next";
 
 import { useChat } from "../../composables/useChat.js";
 
 import { useChat } from "../../composables/useChat.js";
 
 import { formatarDataHora } from "../../utils/data.js";
 
 import { formatarDataHora } from "../../utils/data.js";
 
@@ -38,21 +40,17 @@ function confirmarExclusao(id) {
 
 
 
 <template>
 
 <template>
 
   <LayoutSistema>
 
   <LayoutSistema>
 
-    <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
-      <div class="flex items-start justify-between gap-4">
 
-        <div>
 
-          <h2 class="text-lg font-semibold text-foreground">Histórico</h2>
 
-          <p class="mt-1 text-sm text-muted-foreground">{{ items.length }} conversa{{ items.length === 1 ? '' : 's' }}</p>
 
-        </div>
 
-      </div>
 
-
 
-      <div v-if="!items.length" class="mt-8 flex flex-col items-center gap-3 py-8 text-center">
 
-        <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-dashed border-gray-300 dark:border-gray-600">
 
-          <BaseIcon :icon="History" class="h-6 w-6 text-muted-foreground" />
 
-        </div>
 
-        <div class="text-sm font-medium text-muted-foreground">Nenhuma conversa ainda</div>
 
-        <div class="text-xs text-muted-foreground">Suas conversas aparecerão aqui após a primeira mensagem.</div>
 
-      </div>
 
+    <PageHeaderCard
 
+      title="Histórico"
 
+      :description="`${items.length} conversa${items.length === 1 ? '' : 's'}`"
 
+    >
 
+      <EmptyState
 
+        v-if="!items.length"
 
+        class="mt-8"
 
+        :icon="History"
 
+        titulo="Nenhuma conversa ainda"
 
+        descricao="Suas conversas aparecerão aqui após a primeira mensagem."
 
+      />
 
 
 
       <div v-else class="mt-4 grid gap-2">
 
       <div v-else class="mt-4 grid gap-2">
 
         <div v-for="c in items" :key="c.id" class="grid grid-cols-[1fr_auto] items-stretch gap-2">
 
         <div v-for="c in items" :key="c.id" class="grid grid-cols-[1fr_auto] items-stretch gap-2">
 
@@ -89,7 +87,7 @@ function confirmarExclusao(id) {
 
           </button>
 
           </button>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
-    </section>
 
+    </PageHeaderCard>
 
 
 
     <ConfirmDialog
 
     <ConfirmDialog
 
       :open="!!confirmandoExclusaoId"
 
       :open="!!confirmandoExclusaoId"

+ 9 - 13
src/views/conversas/ConversasPesquisarView.vue
Просмотреть файл 

@@ -4,6 +4,8 @@ import { useRouter } from "vue-router";
 
 import LayoutSistema from "../../layout/LayoutSistema.vue";
 
 import LayoutSistema from "../../layout/LayoutSistema.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
+import EmptyState from "../../components/base/EmptyState.vue";
 
 import { Search } from "lucide-vue-next";
 
 import { Search } from "lucide-vue-next";
 
 import { useChat } from "../../composables/useChat.js";
 
 import { useChat } from "../../composables/useChat.js";
 
 
 
@@ -32,9 +34,7 @@ function abrirConversa(id) {
 
 
 
 <template>
 
 <template>
 
   <LayoutSistema>
 
   <LayoutSistema>
 
-    <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-4 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
 
-      <h2 class="text-lg font-semibold text-foreground">Pesquisar conversas</h2>
 
-
 
+    <PageHeaderCard title="Pesquisar conversas">
 
       <div class="mt-3 grid grid-cols-1 gap-2 compact:grid-cols-[1fr_120px]">
 
       <div class="mt-3 grid grid-cols-1 gap-2 compact:grid-cols-[1fr_120px]">
 
         <div class="relative">
 
         <div class="relative">
 
           <BaseIcon
 
           <BaseIcon
 
@@ -78,17 +78,13 @@ function abrirConversa(id) {
 
           <div class="mt-1 text-xs text-muted-foreground">{{ c.messageCount ?? 0 }} msgs</div>
 
           <div class="mt-1 text-xs text-muted-foreground">{{ c.messageCount ?? 0 }} msgs</div>
 
         </button>
 
         </button>
 
 
 
-        <div
 
+        <EmptyState
 
           v-if="query.trim() && !results.length"
 
           v-if="query.trim() && !results.length"
 
-          class="flex flex-col items-center gap-3 py-8 text-center"
 
-        >
 
-          <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-dashed border-gray-300 dark:border-gray-600">
 
-            <BaseIcon :icon="Search" class="h-6 w-6 text-muted-foreground" />
 
-          </div>
 
-          <div class="text-sm font-medium text-muted-foreground">Nenhuma conversa encontrada</div>
 
-          <div class="text-xs text-muted-foreground">Tente buscar por outro título.</div>
 
-        </div>
 
+          :icon="Search"
 
+          titulo="Nenhuma conversa encontrada"
 
+          descricao="Tente buscar por outro título."
 
+        />
 
       </div>
 
       </div>
 
-    </section>
 
+    </PageHeaderCard>
 
   </LayoutSistema>
 
   </LayoutSistema>
 
 </template>
 
 </template>

+ 12 - 7
src/views/conversas/ConversasWhatsappView.vue
Просмотреть файл 

@@ -7,6 +7,7 @@ import BaseBadge from "../../components/base/BaseBadge.vue";
 
 import ChatBubble from "../../components/base/ChatBubble.vue";
 
 import ChatBubble from "../../components/base/ChatBubble.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import ConfirmDialog from "../../components/base/ConfirmDialog.vue";
 
 import ConfirmDialog from "../../components/base/ConfirmDialog.vue";
 
+import EmptyState from "../../components/base/EmptyState.vue";
 
 import { MessageCircle, Trash2, ArrowLeft, Mic, Play, Sparkles, RefreshCw, X, TriangleAlert } from "lucide-vue-next";
 
 import { MessageCircle, Trash2, ArrowLeft, Mic, Play, Sparkles, RefreshCw, X, TriangleAlert } from "lucide-vue-next";
 
 import { useConversas } from "../../composables/useConversas.js";
 
 import { useConversas } from "../../composables/useConversas.js";
 
 import { useAuth } from "../../composables/useAuth.js";
 
 import { useAuth } from "../../composables/useAuth.js";
 
@@ -14,6 +15,7 @@ import { useToast } from "../../composables/useToast.js";
 
 import { ehAudio, ehImagem, ehVideo } from "../../utils/midia.js";
 
 import { ehAudio, ehImagem, ehVideo } from "../../utils/midia.js";
 
 import { agruparPorRecencia, ehNovoDia, formatarData, formatarHora, formatarRecencia } from "../../utils/data.js";
 
 import { agruparPorRecencia, ehNovoDia, formatarData, formatarHora, formatarRecencia } from "../../utils/data.js";
 
 import { avatarIniciais, avatarCor } from "../../utils/avatar.js";
 
 import { avatarIniciais, avatarCor } from "../../utils/avatar.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
 
 
 const toast = useToast();
 
 const toast = useToast();
 
 
 
@@ -105,7 +107,7 @@ async function onExcluir(id) {
 
     confirmandoExclusao.value = null;
 
     confirmandoExclusao.value = null;
 
     toast.sucesso("Conversa excluída com sucesso.");
 
     toast.sucesso("Conversa excluída com sucesso.");
 
   } catch (err) {
 
   } catch (err) {
 
-    toast.erro(`Erro ao excluir: ${err?.message ?? "erro desconhecido"}`);
 
+    toast.erro(friendlyErrorMessage(err, "Falha ao excluir a conversa."));
 
   } finally {
 
   } finally {
 
     excluindo.value = null;
 
     excluindo.value = null;
 
   }
 
   }
 
@@ -175,7 +177,7 @@ function novoDia(idx) {
 
 
 
 function mensagemErroEnvio(err) {
 
 function mensagemErroEnvio(err) {
 
   if (err?.message === "whatsapp_nao_conectado") return "WhatsApp desconectado. Peça a um admin para reconectar.";
 
   if (err?.message === "whatsapp_nao_conectado") return "WhatsApp desconectado. Peça a um admin para reconectar.";
 
-  return `Erro ao enviar: ${err?.message ?? "erro desconhecido"}`;
 
+  return friendlyErrorMessage(err, "Falha ao enviar a mensagem.");
 
 }
 
 }
 
 
 
 async function enviar() {
 
 async function enviar() {
 
@@ -238,11 +240,14 @@ onUnmounted(() => {
 
         <div v-else-if="conversasError" class="m-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
         <div v-else-if="conversasError" class="m-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
 
           {{ conversasError }}
 
           {{ conversasError }}
 
         </div>
 
         </div>
 
-        <div v-else-if="!conversas.length" class="flex flex-1 flex-col items-center justify-center gap-2 p-4 text-center">
 
-          <BaseIcon :icon="MessageCircle" class="h-8 w-8 text-gray-300 dark:text-gray-600" stroke-width="1.5" />
 
-          <p class="text-sm text-muted-foreground">Nenhuma conversa ainda.</p>
 
-          <p class="text-xs text-muted-foreground">Mande uma mensagem para o número de teste no WhatsApp.</p>
 
-        </div>
 
+        <EmptyState
 
+          v-else-if="!conversas.length"
 
+          class="flex-1 justify-center"
 
+          compacto
 
+          :icon="MessageCircle"
 
+          titulo="Nenhuma conversa ainda."
 
+          descricao="Mande uma mensagem para o número de teste no WhatsApp."
 
+        />
 
 
 
         <div v-else class="scroll-thin min-h-0 flex-1 overflow-y-auto p-2">
 
         <div v-else class="scroll-thin min-h-0 flex-1 overflow-y-auto p-2">
 
           <template v-for="grupo in conversasAgrupadas" :key="grupo.label">
 
           <template v-for="grupo in conversasAgrupadas" :key="grupo.label">

+ 1 - 1
src/views/pagina-inicial/PaginaInicialView.vue
Просмотреть файл 

@@ -53,7 +53,7 @@ async function onLandingSend() {
 
 
 
 const FRASES_EXEMPLO = [
 
 const FRASES_EXEMPLO = [
 
   "Como posso ajudar você hoje?",
 
   "Como posso ajudar você hoje?",
 
-  "Qual a sua duvida?",
 
+  "Qual a sua dúvida?",
 
   "Qual a configuração que você deseja saber?"
 
   "Qual a configuração que você deseja saber?"
 
 ];
 
 ];
 
 const PLACEHOLDER_PADRAO = "Digite sua pergunta...";
 
 const PLACEHOLDER_PADRAO = "Digite sua pergunta...";

+ 14 - 23
src/views/usuarios/UsuariosView.vue
Просмотреть файл 

@@ -11,9 +11,12 @@ import BaseButton from "../../components/base/BaseButton.vue";
 
 import BaseBadge from "../../components/base/BaseBadge.vue";
 
 import BaseBadge from "../../components/base/BaseBadge.vue";
 
 import Spinner from "../../components/base/Spinner.vue";
 
 import Spinner from "../../components/base/Spinner.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
 import BaseIcon from "../../components/base/BaseIcon.vue";
 
+import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
 
+import EmptyState from "../../components/base/EmptyState.vue";
 
 import { Plus, Search, User, Pencil, KeyRound } from "lucide-vue-next";
 
 import { Plus, Search, User, Pencil, KeyRound } from "lucide-vue-next";
 
 import { avatarIniciais, avatarCor } from "../../utils/avatar.js";
 
 import { avatarIniciais, avatarCor } from "../../utils/avatar.js";
 
 import { formatarDataHoraSemAno } from "../../utils/data.js";
 
 import { formatarDataHoraSemAno } from "../../utils/data.js";
 
+import { friendlyErrorMessage } from "../../api/client.js";
 
 
 
 const { users, loading, error, loadUsers, toggleStatus } = useUsers();
 
 const { users, loading, error, loadUsers, toggleStatus } = useUsers();
 
 const toast = useToast();
 
 const toast = useToast();
 
@@ -89,7 +92,7 @@ async function alternarStatus(usuario) {
 
     const novoStatus = String(usuario.Status) === "1" ? "desativado" : "ativado";
 
     const novoStatus = String(usuario.Status) === "1" ? "desativado" : "ativado";
 
     toast.sucesso(`${nome} ${novoStatus} com sucesso.`);
 
     toast.sucesso(`${nome} ${novoStatus} com sucesso.`);
 
   } catch (e) {
 
   } catch (e) {
 
-    toast.erro(e?.message || "Erro ao alterar status do usuário.");
 
+    toast.erro(friendlyErrorMessage(e, "Erro ao alterar status do usuário."));
 
   } finally {
 
   } finally {
 
     statusEmProcessamento.value.delete(usuario.Id);
 
     statusEmProcessamento.value.delete(usuario.Id);
 
   }
 
   }
 
@@ -134,7 +137,7 @@ async function dispensarSolicitacao(solicitacao) {
 
     toast.sucesso("Solicitação dispensada.");
 
     toast.sucesso("Solicitação dispensada.");
 
     await carregarSolicitacoes();
 
     await carregarSolicitacoes();
 
   } catch (e) {
 
   } catch (e) {
 
-    toast.erro(e?.message || "Erro ao dispensar solicitação.");
 
+    toast.erro(friendlyErrorMessage(e, "Erro ao dispensar solicitação."));
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -153,17 +156,8 @@ onMounted(async () => {
 
 
 
 <template>
 
 <template>
 
   <LayoutSistema>
 
   <LayoutSistema>
 
-    <section
 
-      class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
 
-    >
 
-      
-      <div class="flex items-start justify-between gap-4">
 
-        <div>
 
-          <h2 class="text-lg font-semibold text-foreground">Usuários</h2>
 
-          <p class="mt-1 text-sm text-muted-foreground">
 
-            Lista dos usuários cadastrados no sistema.
 
-          </p>
 
-        </div>
 
+    <PageHeaderCard title="Usuários" description="Lista dos usuários cadastrados no sistema.">
 
+      <template #actions>
 
         <div class="flex items-center gap-3">
 
         <div class="flex items-center gap-3">
 
           <div
 
           <div
 
             class="rounded-xl border border-primary/15 bg-primary/10 px-3 py-2 text-sm font-medium text-primary dark:border-primary/20 dark:bg-primary/15"
 
             class="rounded-xl border border-primary/15 bg-primary/10 px-3 py-2 text-sm font-medium text-primary dark:border-primary/20 dark:bg-primary/15"
 
@@ -175,7 +169,7 @@ onMounted(async () => {
 
             Novo usuário
 
             Novo usuário
 
           </BaseButton>
 
           </BaseButton>
 
         </div>
 
         </div>
 
-      </div>
 
+      </template>
 
 
 
       <div
 
       <div
 
         v-if="solicitacoes.length"
 
         v-if="solicitacoes.length"
 
@@ -248,15 +242,12 @@ onMounted(async () => {
 
       </div>
 
       </div>
 
 
 
   
   
-      <div
 
+      <EmptyState
 
         v-else-if="!users.length"
 
         v-else-if="!users.length"
 
-        class="mt-6 flex flex-col items-center gap-3 py-8 text-center"
 
-      >
 
-        <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-dashed border-gray-300 dark:border-gray-600">
 
-          <BaseIcon :icon="User" class="h-6 w-6 text-muted-foreground" />
 
-        </div>
 
-        <div class="text-sm font-medium text-muted-foreground">Nenhum usuário encontrado.</div>
 
-      </div>
 
+        class="mt-6"
 
+        :icon="User"
 
+        titulo="Nenhum usuário encontrado."
 
+      />
 
 
 
       
       
       <div v-else class="mt-4 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
 
       <div v-else class="mt-4 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
 
@@ -373,7 +364,7 @@ onMounted(async () => {
 
           <span class="font-medium">{{ busca || (filtroStatus !== "todos" ? filtroStatus : "") }}</span>.
 
           <span class="font-medium">{{ busca || (filtroStatus !== "todos" ? filtroStatus : "") }}</span>.
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
-    </section>
 
+    </PageHeaderCard>
 
 
 
     <ModalUsuario
 
     <ModalUsuario
 
       v-if="modalAberto"
 
       v-if="modalAberto"