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.
This commit is contained in:
2025-11-08 10:11:40 -03:00
parent 28107b4050
commit 01138b3e1c
24 changed files with 4655 additions and 1927 deletions

View File

@@ -11,7 +11,14 @@
| "document"
| "teams"
| "userPlus";
type PaletteKey = "primary" | "success" | "secondary" | "accent" | "info" | "error" | "warning";
type PaletteKey =
| "primary"
| "success"
| "secondary"
| "accent"
| "info"
| "error"
| "warning";
type FeatureCard = {
title: string;
@@ -294,32 +301,54 @@
</script>
<main class="mx-auto w-full max-w-7xl space-y-12 px-4 py-10">
<section class="relative overflow-hidden rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-base-100 to-secondary/20 p-8 shadow-2xl">
<div class="absolute -left-10 top-10 h-40 w-40 rounded-full bg-primary/20 blur-3xl"></div>
<div class="absolute -bottom-16 right-0 h-56 w-56 rounded-full bg-secondary/20 blur-3xl"></div>
<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
<section
class="relative overflow-hidden rounded-3xl border border-primary/25 bg-linear-to-br from-primary/10 via-base-100 to-secondary/20 p-8 shadow-2xl"
>
<div
class="absolute -left-10 top-10 h-40 w-40 rounded-full bg-primary/20 blur-3xl"
></div>
<div
class="absolute -bottom-16 right-0 h-56 w-56 rounded-full bg-secondary/20 blur-3xl"
></div>
<div
class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between"
>
<div class="max-w-3xl space-y-4">
<span class="inline-flex w-fit items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-primary">
<span
class="inline-flex w-fit items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-primary"
>
Tecnologia da Informação
</span>
<h1 class="text-4xl font-black leading-tight text-base-content sm:text-5xl">
<h1
class="text-4xl font-black leading-tight text-base-content sm:text-5xl"
>
Sistemas de Informação
</h1>
<p class="text-base leading-relaxed text-base-content/70 sm:text-lg">
Acesso restrito para gerenciamento de solicitações de acesso ao sistema, configuração de permissões e monitoramento técnico das operações do SGSE.
Acesso restrito para gerenciamento de solicitações de acesso ao
sistema, configuração de permissões e monitoramento técnico das
operações do SGSE.
</p>
</div>
<div class="grid grid-cols-2 gap-4 rounded-2xl border border-base-200/60 bg-base-100/70 p-6 shadow-lg backdrop-blur sm:max-w-sm">
<div
class="grid grid-cols-2 gap-4 rounded-2xl border border-base-200/60 bg-base-100/70 p-6 shadow-lg backdrop-blur sm:max-w-sm"
>
<div>
<p class="text-sm font-semibold text-base-content/60">Status</p>
<p class="mt-2 text-2xl font-bold text-base-content">Operacional</p>
</div>
</div>
<div class="text-right">
<p class="text-sm font-semibold text-base-content/60">Última atualização</p>
<p class="text-sm font-semibold text-base-content/60">
Última atualização
</p>
<p class="mt-2 text-xl font-bold text-base-content">Agora mesmo</p>
</div>
<div class="col-span-2 h-px bg-gradient-to-r from-transparent via-base-300 to-transparent"></div>
<div class="col-span-2 flex items-center justify-between text-sm text-base-content/70">
<div
class="col-span-2 h-px bg-linear-to-r from-transparent via-base-300 to-transparent"
></div>
<div
class="col-span-2 flex items-center justify-between text-sm text-base-content/70"
>
<span>Monitoramento em tempo real.</span>
<span class="badge badge-primary badge-sm">SGSE</span>
</div>
@@ -332,7 +361,9 @@
<article
class={`card-hover group relative overflow-hidden rounded-2xl border ${paletteStyles[card.palette].cardBorder} bg-base-100/90 p-6 shadow-lg transition-all duration-300`}
>
<div class="absolute inset-x-6 top-0 h-24 rounded-b-full bg-gradient-to-b from-base-200/40 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div
class="absolute inset-x-6 top-0 h-24 rounded-b-full bg-linear-to-b from-base-200/40 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div>
<div class="relative flex items-start gap-4">
<div
class={`flex h-14 w-14 items-center justify-center rounded-2xl ${paletteStyles[card.palette].iconBg} ${paletteStyles[card.palette].iconRing}`}
@@ -345,7 +376,7 @@
class={`h-7 w-7 ${paletteStyles[card.palette].iconColor}`}
>
{#each iconPaths[card.icon] as path (path.d)}
<path
<path
d={path.d}
stroke-linecap={path.strokeLinecap ?? "round"}
stroke-linejoin={path.strokeLinejoin ?? "round"}
@@ -355,16 +386,22 @@
</svg>
</div>
<div class="relative flex-1">
<h2 class="text-xl font-semibold text-base-content">{card.title}</h2>
<p class="mt-2 text-sm leading-relaxed text-base-content/70">{card.description}</p>
</div>
</div>
<h2 class="text-xl font-semibold text-base-content">
{card.title}
</h2>
<p class="mt-2 text-sm leading-relaxed text-base-content/70">
{card.description}
</p>
</div>
</div>
{#if card.highlightBadges}
<div class="mt-4 flex flex-wrap gap-2">
{#each card.highlightBadges as badge (badge.label)}
{#if badge.variant === "solid"}
<span class={`badge ${paletteStyles[card.palette].badgeSolid}`}>{badge.label}</span>
<span class={`badge ${paletteStyles[card.palette].badgeSolid}`}
>{badge.label}</span
>
{:else}
<span
class={`badge ${paletteStyles[card.palette].badgeOutline} ${paletteStyles[card.palette].iconColor}`}
@@ -391,33 +428,45 @@
disabled
>
{card.ctaLabel}
</button>
</button>
{/if}
</div>
</article>
{/each}
</section>
<section class="relative overflow-hidden rounded-2xl border border-warning/30 bg-gradient-to-br from-warning/15 via-warning/10 to-warning/5 p-6 shadow-lg">
<div class="absolute -top-10 right-0 h-32 w-32 rounded-full bg-warning/30 blur-3xl"></div>
<section
class="relative overflow-hidden rounded-2xl border border-warning/30 bg-linear-to-br from-warning/15 via-warning/10 to-warning/5 p-6 shadow-lg"
>
<div
class="absolute -top-10 right-0 h-32 w-32 rounded-full bg-warning/30 blur-3xl"
></div>
<div class="relative z-10 flex items-start gap-4">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-warning/25 text-warning">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 stroke-current">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
<div
class="flex h-12 w-12 items-center justify-center rounded-full bg-warning/25 text-warning"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</svg>
</div>
<div>
<div>
<h3 class="text-lg font-bold text-base-content">Área Restrita</h3>
<p class="mt-2 text-sm leading-relaxed text-base-content/70">
Esta área é exclusiva da equipe de Tecnologia da Informação. Garanta que apenas usuários autorizados acessem o Painel Administrativo e mantenha suas credenciais em segurança.
Esta área é exclusiva da equipe de Tecnologia da Informação. Garanta
que apenas usuários autorizados acessem o Painel Administrativo e
mantenha suas credenciais em segurança.
</p>
</div>
</div>
</section>
</main>