refactor: clean up Svelte components and improve code readability

- Refactored multiple Svelte components to enhance code clarity and maintainability.
- Standardized formatting and indentation across various files for consistency.
- Improved error handling messages in the AprovarAusencias component for better user feedback.
- Updated class names in the UI components to align with the new design system.
- Removed unnecessary whitespace and comments to streamline the codebase.

apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte

@@ -2,7 +2,22 @@
   import { goto } from "$app/navigation";
   import { useQuery } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { Users, UserPlus, ClipboardList, Trash2, BarChart3, Calendar, FileText, BadgeCheck, Plus, List, ChevronRight, CheckCircle2, Info, ArrowRight } from "lucide-svelte";
+  import {
+    Users,
+    UserPlus,
+    ClipboardList,
+    Trash2,
+    BarChart3,
+    Calendar,
+    FileText,
+    BadgeCheck,
+    Plus,
+    List,
+    ChevronRight,
+    CheckCircle2,
+    Info,
+    ArrowRight,
+  } from "lucide-svelte";
   import type { Component } from "svelte";
 
   // Buscar estatísticas para exibir nos cards
@@ -119,46 +134,61 @@
   <!-- Estatísticas Rápidas -->
   {#if statsQuery.data}
     <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-      <div class="stats shadow-lg bg-gradient-to-br from-primary/10 to-primary/20">
+      <div
+        class="stats shadow-lg bg-linear-to-br from-primary/10 to-primary/20"
+      >
         <div class="stat">
           <div class="stat-figure text-primary">
             <Users class="h-8 w-8" strokeWidth={2} />
           </div>
           <div class="stat-title">Total</div>
-          <div class="stat-value text-primary">{statsQuery.data.totalFuncionarios}</div>
+          <div class="stat-value text-primary">
+            {statsQuery.data.totalFuncionarios}
+          </div>
           <div class="stat-desc">Funcionários cadastrados</div>
         </div>
       </div>
 
-      <div class="stats shadow-lg bg-gradient-to-br from-success/10 to-success/20">
+      <div
+        class="stats shadow-lg bg-linear-to-br from-success/10 to-success/20"
+      >
         <div class="stat">
           <div class="stat-figure text-success">
             <CheckCircle2 class="h-8 w-8" strokeWidth={2} />
           </div>
           <div class="stat-title">Ativos</div>
-          <div class="stat-value text-success">{statsQuery.data.funcionariosAtivos}</div>
+          <div class="stat-value text-success">
+            {statsQuery.data.funcionariosAtivos}
+          </div>
           <div class="stat-desc">Funcionários ativos</div>
         </div>
       </div>
 
-      <div class="stats shadow-lg bg-gradient-to-br from-secondary/10 to-secondary/20">
+      <div
+        class="stats shadow-lg bg-linear-to-br from-secondary/10 to-secondary/20"
+      >
         <div class="stat">
           <div class="stat-figure text-secondary">
             <BadgeCheck class="h-8 w-8" strokeWidth={2} />
           </div>
           <div class="stat-title">Símbolos</div>
-          <div class="stat-value text-secondary">{statsQuery.data.totalSimbolos}</div>
+          <div class="stat-value text-secondary">
+            {statsQuery.data.totalSimbolos}
+          </div>
           <div class="stat-desc">Cargos e funções</div>
         </div>
       </div>
 
-      <div class="stats shadow-lg bg-gradient-to-br from-accent/10 to-accent/20">
+      <div class="stats shadow-lg bg-linear-to-br from-accent/10 to-accent/20">
         <div class="stat">
           <div class="stat-figure text-accent">
             <BarChart3 class="h-8 w-8" strokeWidth={2} />
           </div>
           <div class="stat-title">CC / FG</div>
-          <div class="stat-value text-accent">{statsQuery.data.cargoComissionado} / {statsQuery.data.funcaoGratificada}</div>
+          <div class="stat-value text-accent">
+            {statsQuery.data.cargoComissionado} / {statsQuery.data
+              .funcaoGratificada}
+          </div>
           <div class="stat-desc">Distribuição</div>
         </div>
       </div>
@@ -168,12 +198,18 @@
   <!-- Menu de Opções -->
   <div class="space-y-8">
     {#each menuItems as categoria}
-      <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
+      <div
+        class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300"
+      >
         <div class="card-body">
           <!-- Cabeçalho da Categoria -->
           <div class="flex items-start gap-6 mb-6">
             <div class="p-4 {categoria.bgIcon} rounded-2xl">
-              <svelte:component this={categoria.Icon} class="h-12 w-12 {categoria.accentColor}" strokeWidth={2} />
+              <svelte:component
+                this={categoria.Icon}
+                class="h-12 w-12 {categoria.accentColor}"
+                strokeWidth={2}
+              />
             </div>
             <div class="flex-1">
               <h2 class="card-title text-2xl mb-2 {categoria.accentColor}">
@@ -188,15 +224,17 @@
             {#each categoria.opcoes as opcao}
               <a
                 href={opcao.href}
-                class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-gradient-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
+                class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
               >
                 <div class="flex flex-col h-full">
                   <div class="flex items-start justify-between mb-4">
-                    <div class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300">
-                      <svelte:component 
-                        this={opcao.Icon} 
-                        class="h-5 w-5 {categoria.accentColor} group-hover:text-white transition-colors duration-300" 
-                        strokeWidth={2} 
+                    <div
+                      class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
+                    >
+                      <svelte:component
+                        this={opcao.Icon}
+                        class="h-5 w-5 {categoria.accentColor} group-hover:text-white transition-colors duration-300"
+                        strokeWidth={2}
                       />
                     </div>
                     <ChevronRight
@@ -204,7 +242,9 @@
                       strokeWidth={2}
                     />
                   </div>
-                  <h3 class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300">
+                  <h3
+                    class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
+                  >
                     {opcao.nome}
                   </h3>
                   <p class="text-sm text-base-content/70 flex-1">
@@ -225,7 +265,9 @@
     <div>
       <h3 class="font-bold">Precisa de ajuda?</h3>
       <div class="text-sm">
-        Entre em contato com o suporte técnico ou consulte a documentação do sistema para mais informações sobre as funcionalidades de Recursos Humanos.
+        Entre em contato com o suporte técnico ou consulte a documentação do
+        sistema para mais informações sobre as funcionalidades de Recursos
+        Humanos.
       </div>
     </div>
   </div>