From 031c151967e078e02517526e432a4471d7fe5a01 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Tue, 18 Nov 2025 10:13:54 -0300
Subject: [PATCH] refactor: enhance AprovarAusencias component with improved UI
 and layout

- Updated card styling and layout for a more modern and user-friendly experience.
- Enhanced visual elements, including updated icons and spacing for better readability.
- Improved responsiveness and hover effects for interactive elements.
- Refined status display and error handling for clearer user feedback.
---
 .../lib/components/AprovarAusencias.svelte    | 178 ++++++++++--------
 1 file changed, 96 insertions(+), 82 deletions(-)

diff --git a/apps/web/src/lib/components/AprovarAusencias.svelte b/apps/web/src/lib/components/AprovarAusencias.svelte
index 7dc5b55..7a67e6e 100644
--- a/apps/web/src/lib/components/AprovarAusencias.svelte
+++ b/apps/web/src/lib/components/AprovarAusencias.svelte
@@ -138,37 +138,43 @@
 	</div>
 
 	<!-- Card Principal -->
-	<div class="card bg-base-100 border-t-4 border-orange-500 shadow-2xl">
-		<div class="card-body">
+	<div class="card bg-base-100 border-t-4 border-primary shadow-2xl">
+		<div class="card-body p-8">
 			<!-- Informações do Funcionário -->
-			<div class="mb-6">
-				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="text-primary h-6 w-6"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-						/>
-					</svg>
+			<div class="mb-8">
+				<h3 class="mb-5 flex items-center gap-3 text-xl font-bold text-primary">
+					<div class="rounded-lg bg-primary/10 p-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+							/>
+						</svg>
+					</div>
 					Funcionário
 				</h3>
-				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-					<div>
-						<p class="text-base-content/70 text-sm">Nome</p>
-						<p class="text-lg font-bold">
+				<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+					<div class="rounded-xl bg-base-200/50 p-4 transition-all hover:bg-base-200">
+						<p class="mb-2 text-sm font-semibold uppercase tracking-wide text-base-content/60">
+							Nome
+						</p>
+						<p class="text-lg font-bold text-base-content">
 							{solicitacao.funcionario?.nome || 'N/A'}
 						</p>
 					</div>
 					{#if solicitacao.time}
-						<div>
-							<p class="text-base-content/70 text-sm">Time</p>
+						<div class="rounded-xl bg-base-200/50 p-4 transition-all hover:bg-base-200">
+							<p class="mb-2 text-sm font-semibold uppercase tracking-wide text-base-content/60">
+								Time
+							</p>
 							<div
 								class="badge badge-lg font-semibold"
 								style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time
@@ -181,88 +187,96 @@
 				</div>
 			</div>
 
-			<div class="divider"></div>
+			<div class="divider my-6"></div>
 
 			<!-- Período da Ausência -->
-			<div class="mb-6">
-				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="text-primary h-6 w-6"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-						/>
-					</svg>
+			<div class="mb-8">
+				<h3 class="mb-5 flex items-center gap-3 text-xl font-bold text-primary">
+					<div class="rounded-lg bg-primary/10 p-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+					</div>
 					Período da Ausência
 				</h3>
 				<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
 					<div
-						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+						class="stat rounded-xl border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 shadow-md transition-all hover:border-primary/30 hover:shadow-lg"
 					>
-						<div class="stat-title">Data Início</div>
-						<div class="stat-value text-2xl text-orange-600 dark:text-orange-400">
+						<div class="stat-title text-base-content/70">Data Início</div>
+						<div class="stat-value text-2xl text-primary">
 							{new Date(solicitacao.dataInicio).toLocaleDateString('pt-BR')}
 						</div>
 					</div>
 					<div
-						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+						class="stat rounded-xl border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 shadow-md transition-all hover:border-primary/30 hover:shadow-lg"
 					>
-						<div class="stat-title">Data Fim</div>
-						<div class="stat-value text-2xl text-orange-600 dark:text-orange-400">
+						<div class="stat-title text-base-content/70">Data Fim</div>
+						<div class="stat-value text-2xl text-primary">
 							{new Date(solicitacao.dataFim).toLocaleDateString('pt-BR')}
 						</div>
 					</div>
 					<div
-						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+						class="stat rounded-xl border-2 border-primary/30 bg-gradient-to-br from-primary/10 to-primary/15 shadow-md transition-all hover:border-primary/40 hover:shadow-lg"
 					>
-						<div class="stat-title">Total de Dias</div>
-						<div class="stat-value text-3xl text-orange-600 dark:text-orange-400">
+						<div class="stat-title text-base-content/70">Total de Dias</div>
+						<div class="stat-value text-3xl font-bold text-primary">
 							{totalDias}
 						</div>
-						<div class="stat-desc">dias corridos</div>
+						<div class="stat-desc text-base-content/60">dias corridos</div>
 					</div>
 				</div>
 			</div>
 
-			<div class="divider"></div>
+			<div class="divider my-6"></div>
 
 			<!-- Motivo -->
-			<div class="mb-6">
-				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="text-primary h-6 w-6"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-						/>
-					</svg>
+			<div class="mb-8">
+				<h3 class="mb-5 flex items-center gap-3 text-xl font-bold text-primary">
+					<div class="rounded-lg bg-primary/10 p-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+							/>
+						</svg>
+					</div>
 					Motivo da Ausência
 				</h3>
-				<div class="card bg-base-200">
-					<div class="card-body">
-						<p class="whitespace-pre-wrap">{solicitacao.motivo}</p>
+				<div class="card rounded-xl border-2 border-primary/10 bg-base-200/50 shadow-sm">
+					<div class="card-body p-5">
+						<p class="whitespace-pre-wrap leading-relaxed text-base-content">
+							{solicitacao.motivo}
+						</p>
 					</div>
 				</div>
 			</div>
 
 			<!-- Status Atual -->
-			<div class="mb-6">
-				<div class="flex items-center gap-2">
-					<span class="text-sm font-semibold">Status:</span>
+			<div class="mb-8 rounded-xl bg-base-200/30 p-4">
+				<div class="flex items-center gap-3">
+					<span class="text-sm font-semibold uppercase tracking-wide text-base-content/70"
+						>Status:</span
+					>
 					<div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
 						{getStatusTexto(solicitacao.status)}
 					</div>
@@ -271,7 +285,7 @@
 
 			<!-- Erro -->
 			{#if erro}
-				<div class="alert alert-error mb-4">
+				<div class="alert alert-error mb-6 shadow-lg">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-6 w-6 shrink-0 stroke-current"
@@ -291,7 +305,7 @@
 
 			<!-- Ações -->
 			{#if solicitacao.status === 'aguardando_aprovacao'}
-				<div class="card-actions mt-6 justify-end gap-4">
+				<div class="card-actions mt-8 justify-end gap-4">
 					<button
 						type="button"
 						class="btn btn-error btn-lg gap-2"
@@ -348,14 +362,14 @@
 
 				<!-- Modal de Reprovação -->
 				{#if motivoReprovacao !== undefined}
-					<div class="mt-4">
+					<div class="mt-6 rounded-xl border-2 border-error/20 bg-error/5 p-5">
 						<div class="form-control">
 							<label class="label" for="motivo-reprovacao">
-								<span class="label-text font-bold">Motivo da Reprovação</span>
+								<span class="label-text font-bold text-error">Motivo da Reprovação</span>
 							</label>
 							<textarea
 								id="motivo-reprovacao"
-								class="textarea textarea-bordered h-24"
+								class="textarea textarea-bordered h-24 focus:border-error focus:outline-error"
 								placeholder="Informe o motivo da reprovação..."
 								bind:value={motivoReprovacao}
 							></textarea>
@@ -363,7 +377,7 @@
 					</div>
 				{/if}
 			{:else}
-				<div class="alert alert-info">
+				<div class="alert alert-info shadow-lg">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
@@ -382,10 +396,10 @@
 			{/if}
 
 			<!-- Botão Cancelar -->
-			<div class="mt-4 text-center">
+			<div class="mt-6 text-center">
 				<button
 					type="button"
-					class="btn"
+					class="btn btn-ghost"
 					onclick={() => {
 						if (onCancelar) onCancelar();
 					}}