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/lib/components/ausencias/WizardSolicitacaoAusencia.svelte

@@ -26,26 +26,31 @@
   let dataFim = $state<string>("");
   let motivo = $state("");
   let processando = $state(false);
-  
+
   // Estados para modal de erro
   let mostrarModalErro = $state(false);
   let mensagemErroModal = $state("");
   let detalhesErroModal = $state("");
 
   // Buscar ausências existentes para exibir no calendário
-  const ausenciasExistentesQuery = useQuery(api.ausencias.listarMinhasSolicitacoes, {
-    funcionarioId,
-  });
+  const ausenciasExistentesQuery = useQuery(
+    api.ausencias.listarMinhasSolicitacoes,
+    {
+      funcionarioId,
+    },
+  );
 
   // Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
   const ausenciasExistentes = $derived(
     (ausenciasExistentesQuery?.data || [])
-      .filter((a) => a.status === "aprovado" || a.status === "aguardando_aprovacao")
+      .filter(
+        (a) => a.status === "aprovado" || a.status === "aguardando_aprovacao",
+      )
       .map((a) => ({
-      dataInicio: a.dataInicio,
-      dataFim: a.dataFim,
+        dataInicio: a.dataInicio,
+        dataFim: a.dataFim,
         status: a.status as "aguardando_aprovacao" | "aprovado",
-    }))
+      })),
   );
 
   // Calcular dias selecionados
@@ -117,14 +122,15 @@
       });
 
       toast.success("Solicitação de ausência criada com sucesso!");
-      
+
       if (onSucesso) {
         onSucesso();
       }
     } catch (error) {
       console.error("Erro ao criar solicitação:", error);
-      const mensagemErro = error instanceof Error ? error.message : String(error);
-      
+      const mensagemErro =
+        error instanceof Error ? error.message : String(error);
+
       // Verificar se é erro de sobreposição de período
       if (
         mensagemErro.includes("Já existe uma solicitação") ||
@@ -149,7 +155,10 @@
     detalhesErroModal = "";
   }
 
-  function handlePeriodoSelecionado(periodo: { dataInicio: string; dataFim: string }) {
+  function handlePeriodoSelecionado(periodo: {
+    dataInicio: string;
+    dataFim: string;
+  }) {
     dataInicio = periodo.dataInicio;
     dataFim = periodo.dataFim;
   }
@@ -158,7 +167,9 @@
 <div class="wizard-ausencia">
   <!-- Header -->
   <div class="mb-6">
-    <p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
+    <p class="text-base-content/70">
+      Solicite uma ausência para assuntos particulares
+    </p>
   </div>
 
   <!-- Indicador de progresso -->
@@ -230,22 +241,25 @@
           <div>
             <h3 class="text-2xl font-bold mb-2">Selecione o Período</h3>
             <p class="text-base-content/70">
-              Clique e arraste no calendário para selecionar o período de ausência
+              Clique e arraste no calendário para selecionar o período de
+              ausência
             </p>
           </div>
 
           {#if ausenciasExistentesQuery === undefined}
             <div class="flex items-center justify-center py-12">
               <span class="loading loading-spinner loading-lg"></span>
-              <span class="ml-4 text-base-content/70">Carregando ausências existentes...</span>
+              <span class="ml-4 text-base-content/70"
+                >Carregando ausências existentes...</span
+              >
             </div>
           {:else}
-          <CalendarioAusencias
-            dataInicio={dataInicio}
-            dataFim={dataFim}
-            ausenciasExistentes={ausenciasExistentes}
-            onPeriodoSelecionado={handlePeriodoSelecionado}
-          />
+            <CalendarioAusencias
+              {dataInicio}
+              {dataFim}
+              {ausenciasExistentes}
+              onPeriodoSelecionado={handlePeriodoSelecionado}
+            />
           {/if}
 
           {#if dataInicio && dataFim}
@@ -279,13 +293,16 @@
           <div>
             <h3 class="text-2xl font-bold mb-2">Informe o Motivo</h3>
             <p class="text-base-content/70">
-              Descreva o motivo da sua solicitação de ausência (mínimo 10 caracteres)
+              Descreva o motivo da sua solicitação de ausência (mínimo 10
+              caracteres)
             </p>
           </div>
 
           <!-- Resumo do período -->
           {#if dataInicio && dataFim}
-            <div class="card bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 border-2 border-orange-500/30">
+            <div
+              class="card bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 border-2 border-orange-500/30"
+            >
               <div class="card-body">
                 <h4 class="card-title text-orange-700 dark:text-orange-400">
                   <svg
@@ -307,15 +324,21 @@
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
                   <div>
                     <p class="text-sm text-base-content/70">Data Início</p>
-                    <p class="font-bold">{new Date(dataInicio).toLocaleDateString("pt-BR")}</p>
+                    <p class="font-bold">
+                      {new Date(dataInicio).toLocaleDateString("pt-BR")}
+                    </p>
                   </div>
                   <div>
                     <p class="text-sm text-base-content/70">Data Fim</p>
-                    <p class="font-bold">{new Date(dataFim).toLocaleDateString("pt-BR")}</p>
+                    <p class="font-bold">
+                      {new Date(dataFim).toLocaleDateString("pt-BR")}
+                    </p>
                   </div>
                   <div>
                     <p class="text-sm text-base-content/70">Total de Dias</p>
-                    <p class="font-bold text-xl text-orange-600 dark:text-orange-400">
+                    <p
+                      class="font-bold text-xl text-orange-600 dark:text-orange-400"
+                    >
                       {totalDias} dias
                     </p>
                   </div>
@@ -478,4 +501,3 @@
     margin: 0 auto;
   }
 </style>
-