SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: enhance AprovarAusencias component with improved UI and layout

Browse Source 
- 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.
This commit is contained in:
deyvisonwanderley
2025-11-18 10:13:54 -03:00
parent af6353fa40
commit 031c151967
1 changed files with 96 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
apps/web/src/lib/components/AprovarAusencias.svelte
View File

@@ -138,11 +138,12 @@
</div> </div>
<!-- Card Principal --> <!-- Card Principal -->
<div class="card bg-base-100 border-t-4 border-orange-500 shadow-2xl"> <div class="card bg-base-100 border-t-4 border-primary shadow-2xl">
<div class="card-body"> <div class="card-body p-8">
<!-- Informações do Funcionário --> <!-- Informações do Funcionário -->
<div class="mb-6"> <div class="mb-8">
<h3 class="mb-4 flex items-center gap-2 text-xl font-bold"> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="text-primary h-6 w-6" class="text-primary h-6 w-6"
@@ -157,18 +158,23 @@
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" 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> </svg>
</div>
Funcionário Funcionário
</h3> </h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<div> <div class="rounded-xl bg-base-200/50 p-4 transition-all hover:bg-base-200">
<p class="text-base-content/70 text-sm">Nome</p> <p class="mb-2 text-sm font-semibold uppercase tracking-wide text-base-content/60">
<p class="text-lg font-bold"> Nome
</p>
<p class="text-lg font-bold text-base-content">
{solicitacao.funcionario?.nome || 'N/A'} {solicitacao.funcionario?.nome || 'N/A'}
</p> </p>
</div> </div>
{#if solicitacao.time} {#if solicitacao.time}
<div> <div class="rounded-xl bg-base-200/50 p-4 transition-all hover:bg-base-200">
<p class="text-base-content/70 text-sm">Time</p> <p class="mb-2 text-sm font-semibold uppercase tracking-wide text-base-content/60">
Time
</p>
<div <div
class="badge badge-lg font-semibold" class="badge badge-lg font-semibold"
style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time
@@ -181,11 +187,12 @@
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider my-6"></div>
<!-- Período da Ausência --> <!-- Período da Ausência -->
<div class="mb-6"> <div class="mb-8">
<h3 class="mb-4 flex items-center gap-2 text-xl font-bold"> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="text-primary h-6 w-6" class="text-primary h-6 w-6"
@@ -200,42 +207,44 @@
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" 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> </svg>
</div>
Período da Ausência Período da Ausência
</h3> </h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-3"> <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
<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 Início</div> <div class="stat-title text-base-content/70">Data Início</div>
<div class="stat-value text-2xl text-orange-600 dark:text-orange-400"> <div class="stat-value text-2xl text-primary">
{new Date(solicitacao.dataInicio).toLocaleDateString('pt-BR')} {new Date(solicitacao.dataInicio).toLocaleDateString('pt-BR')}
</div> </div>
</div> </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-title text-base-content/70">Data Fim</div>
<div class="stat-value text-2xl text-orange-600 dark:text-orange-400"> <div class="stat-value text-2xl text-primary">
{new Date(solicitacao.dataFim).toLocaleDateString('pt-BR')} {new Date(solicitacao.dataFim).toLocaleDateString('pt-BR')}
</div> </div>
</div> </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-title text-base-content/70">Total de Dias</div>
<div class="stat-value text-3xl text-orange-600 dark:text-orange-400"> <div class="stat-value text-3xl font-bold text-primary">
{totalDias} {totalDias}
</div> </div>
<div class="stat-desc">dias corridos</div> <div class="stat-desc text-base-content/60">dias corridos</div>
</div> </div>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider my-6"></div>
<!-- Motivo --> <!-- Motivo -->
<div class="mb-6"> <div class="mb-8">
<h3 class="mb-4 flex items-center gap-2 text-xl font-bold"> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="text-primary h-6 w-6" class="text-primary h-6 w-6"
@@ -250,19 +259,24 @@
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" 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> </svg>
</div>
Motivo da Ausência Motivo da Ausência
</h3> </h3>
<div class="card bg-base-200"> <div class="card rounded-xl border-2 border-primary/10 bg-base-200/50 shadow-sm">
<div class="card-body"> <div class="card-body p-5">
<p class="whitespace-pre-wrap">{solicitacao.motivo}</p> <p class="whitespace-pre-wrap leading-relaxed text-base-content">
{solicitacao.motivo}
</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Status Atual --> <!-- Status Atual -->
<div class="mb-6"> <div class="mb-8 rounded-xl bg-base-200/30 p-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-3">
<span class="text-sm font-semibold">Status:</span> <span class="text-sm font-semibold uppercase tracking-wide text-base-content/70"
>Status:</span
>
<div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}> <div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
{getStatusTexto(solicitacao.status)} {getStatusTexto(solicitacao.status)}
</div> </div>
@@ -271,7 +285,7 @@
<!-- Erro --> <!-- Erro -->
{#if erro} {#if erro}
<div class="alert alert-error mb-4"> <div class="alert alert-error mb-6 shadow-lg">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current" class="h-6 w-6 shrink-0 stroke-current"
@@ -291,7 +305,7 @@
<!-- Ações --> <!-- Ações -->
{#if solicitacao.status === 'aguardando_aprovacao'} {#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 <button
type="button" type="button"
class="btn btn-error btn-lg gap-2" class="btn btn-error btn-lg gap-2"
@@ -348,14 +362,14 @@
<!-- Modal de Reprovação --> <!-- Modal de Reprovação -->
{#if motivoReprovacao !== undefined} {#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"> <div class="form-control">
<label class="label" for="motivo-reprovacao"> <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> </label>
<textarea <textarea
id="motivo-reprovacao" 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..." placeholder="Informe o motivo da reprovação..."
bind:value={motivoReprovacao} bind:value={motivoReprovacao}
></textarea> ></textarea>
@@ -363,7 +377,7 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="alert alert-info"> <div class="alert alert-info shadow-lg">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -382,10 +396,10 @@
{/if} {/if}
<!-- Botão Cancelar --> <!-- Botão Cancelar -->
<div class="mt-4 text-center"> <div class="mt-6 text-center">
<button <button
type="button" type="button"
class="btn" class="btn btn-ghost"
onclick={() => { onclick={() => {
if (onCancelar) onCancelar(); if (onCancelar) onCancelar();
}} }}