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

refactor: clean up Svelte components and improve code readability

Browse Source 
- 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:
killer-cf
2025-11-08 10:11:40 -03:00
parent 28107b4050
commit 01138b3e1c
24 changed files with 4655 additions and 1927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
apps/web/src/lib/components/ferias/DashboardFerias.svelte
View File

@@ -12,17 +12,29 @@
// Queries
const saldosQuery = useQuery(api.saldoFerias.listarSaldos, { funcionarioId });
const solicitacoesQuery = useQuery(api.ferias.listarMinhasSolicitacoes, { funcionarioId });
const solicitacoesQuery = useQuery(api.ferias.listarMinhasSolicitacoes, {
funcionarioId,
});
const saldos = $derived(saldosQuery.data || []);
const solicitacoes = $derived(solicitacoesQuery.data || []);
// Estatísticas derivadas
const saldoAtual = $derived(saldos.find((s) => s.anoReferencia === new Date().getFullYear()));
const saldoAtual = $derived(
saldos.find((s) => s.anoReferencia === new Date().getFullYear()),
);
const totalSolicitacoes = $derived(solicitacoes.length);
const aprovadas = $derived(solicitacoes.filter((s) => s.status === "aprovado" || s.status === "data_ajustada_aprovada").length);
const pendentes = $derived(solicitacoes.filter((s) => s.status === "aguardando_aprovacao").length);
const reprovadas = $derived(solicitacoes.filter((s) => s.status === "reprovado").length);
const aprovadas = $derived(
solicitacoes.filter(
(s) => s.status === "aprovado" || s.status === "data_ajustada_aprovada",
).length,
);
const pendentes = $derived(
solicitacoes.filter((s) => s.status === "aguardando_aprovacao").length,
);
const reprovadas = $derived(
solicitacoes.filter((s) => s.status === "reprovado").length,
);
// Canvas para gráfico de pizza
let canvasSaldo = $state<HTMLCanvasElement>();
@@ -31,7 +43,7 @@
// Função para desenhar gráfico de pizza moderno
function desenharGraficoPizza(
canvas: HTMLCanvasElement,
dados: { label: string; valor: number; cor: string }[]
dados: { label: string; valor: number; cor: string }[],
) {
const ctx = canvas.getContext("2d");
if (!ctx) return;
@@ -90,7 +102,11 @@
desenharGraficoPizza(canvasSaldo, [
{ label: "Usado", valor: saldoAtual.diasUsados, cor: "#ff6b6b" },
{ label: "Pendente", valor: saldoAtual.diasPendentes, cor: "#ffa94d" },
{ label: "Disponível", valor: saldoAtual.diasDisponiveis, cor: "#51cf66" },
{
label: "Disponível",
valor: saldoAtual.diasDisponiveis,
cor: "#51cf66",
},
]);
}
@@ -107,10 +123,14 @@
<div class="dashboard-ferias">
<!-- Header -->
<div class="mb-8">
<h1 class="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
<h1
class="text-4xl font-bold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
>
📊 Dashboard de Férias
</h1>
<p class="text-base-content/70 mt-2">Visualize seus saldos e histórico de solicitações</p>
<p class="text-base-content/70 mt-2">
Visualize seus saldos e histórico de solicitações
</p>
</div>
{#if saldosQuery.isLoading || solicitacoesQuery.isLoading}
@@ -125,7 +145,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Card 1: Saldo Disponível -->
<div
class="stat bg-gradient-to-br from-success/20 to-success/5 border-2 border-success/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
class="stat bg-linear-to-br from-success/20 to-success/5 border-2 border-success/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
>
<div class="stat-figure text-success">
<svg
@@ -143,13 +163,15 @@
</svg>
</div>
<div class="stat-title text-success font-semibold">Disponível</div>
<div class="stat-value text-success text-4xl">{saldoAtual?.diasDisponiveis || 0}</div>
<div class="stat-value text-success text-4xl">
{saldoAtual?.diasDisponiveis || 0}
</div>
<div class="stat-desc text-success/70">dias para usar</div>
</div>
<!-- Card 2: Dias Usados -->
<div
class="stat bg-gradient-to-br from-error/20 to-error/5 border-2 border-error/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
class="stat bg-linear-to-br from-error/20 to-error/5 border-2 border-error/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
>
<div class="stat-figure text-error">
<svg
@@ -167,13 +189,15 @@
</svg>
</div>
<div class="stat-title text-error font-semibold">Usado</div>
<div class="stat-value text-error text-4xl">{saldoAtual?.diasUsados || 0}</div>
<div class="stat-value text-error text-4xl">
{saldoAtual?.diasUsados || 0}
</div>
<div class="stat-desc text-error/70">dias já gozados</div>
</div>
<!-- Card 3: Pendentes -->
<div
class="stat bg-gradient-to-br from-warning/20 to-warning/5 border-2 border-warning/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
class="stat bg-linear-to-br from-warning/20 to-warning/5 border-2 border-warning/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
>
<div class="stat-figure text-warning">
<svg
@@ -191,13 +215,15 @@
</svg>
</div>
<div class="stat-title text-warning font-semibold">Pendentes</div>
<div class="stat-value text-warning text-4xl">{saldoAtual?.diasPendentes || 0}</div>
<div class="stat-value text-warning text-4xl">
{saldoAtual?.diasPendentes || 0}
</div>
<div class="stat-desc text-warning/70">aguardando aprovação</div>
</div>
<!-- Card 4: Total de Direito -->
<div
class="stat bg-gradient-to-br from-primary/20 to-primary/5 border-2 border-primary/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
class="stat bg-linear-to-br from-primary/20 to-primary/5 border-2 border-primary/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
>
<div class="stat-figure text-primary">
<svg
@@ -215,7 +241,9 @@
</svg>
</div>
<div class="stat-title text-primary font-semibold">Total Direito</div>
<div class="stat-value text-primary text-4xl">{saldoAtual?.diasDireito || 0}</div>
<div class="stat-value text-primary text-4xl">
{saldoAtual?.diasDireito || 0}
</div>
<div class="stat-desc text-primary/70">dias no ano</div>
</div>
</div>
@@ -246,15 +274,21 @@
<div class="flex justify-center gap-4 mt-4 flex-wrap">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-[#51cf66]"></div>
<span class="text-sm font-semibold">Disponível: {saldoAtual.diasDisponiveis} dias</span>
<span class="text-sm font-semibold"
>Disponível: {saldoAtual.diasDisponiveis} dias</span
>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-[#ffa94d]"></div>
<span class="text-sm font-semibold">Pendente: {saldoAtual.diasPendentes} dias</span>
<span class="text-sm font-semibold"
>Pendente: {saldoAtual.diasPendentes} dias</span
>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-[#ff6b6b]"></div>
<span class="text-sm font-semibold">Usado: {saldoAtual.diasUsados} dias</span>
<span class="text-sm font-semibold"
>Usado: {saldoAtual.diasUsados} dias</span
>
</div>
</div>
{:else}
@@ -283,7 +317,9 @@
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
📋 Status de Solicitações
<div class="badge badge-secondary badge-lg">Total: {totalSolicitacoes}</div>
<div class="badge badge-secondary badge-lg">
Total: {totalSolicitacoes}
</div>
</h2>
{#if totalSolicitacoes > 0}
@@ -300,15 +336,19 @@
<div class="flex justify-center gap-4 mt-4 flex-wrap">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-[#51cf66]"></div>
<span class="text-sm font-semibold">Aprovadas: {aprovadas}</span>
<span class="text-sm font-semibold">Aprovadas: {aprovadas}</span
>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-[#ffa94d]"></div>
<span class="text-sm font-semibold">Pendentes: {pendentes}</span>
<span class="text-sm font-semibold">Pendentes: {pendentes}</span
>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-[#ff6b6b]"></div>
<span class="text-sm font-semibold">Reprovadas: {reprovadas}</span>
<span class="text-sm font-semibold"
>Reprovadas: {reprovadas}</span
>
</div>
</div>
{:else}
@@ -356,9 +396,20 @@
<tr>
<td class="font-bold">{saldo.anoReferencia}</td>
<td>{saldo.diasDireito} dias</td>
<td><span class="badge badge-error">{saldo.diasUsados}</span></td>
<td><span class="badge badge-warning">{saldo.diasPendentes}</span></td>
<td><span class="badge badge-success">{saldo.diasDisponiveis}</span></td>
<td
><span class="badge badge-error">{saldo.diasUsados}</span
></td
>
<td
><span class="badge badge-warning"
>{saldo.diasPendentes}</span
></td
>
<td
><span class="badge badge-success"
>{saldo.diasDisponiveis}</span
></td
>
<td>
{#if saldo.status === "ativo"}
<span class="badge badge-success">Ativo</span>
@@ -390,5 +441,3 @@
image-rendering: crisp-edges;
}
</style>