refactor: enhance employee management with regime de trabalho integration
- Added regime de trabalho selection to employee forms for better categorization. - Updated backend validation to include regime de trabalho options for employees. - Enhanced employee data handling by integrating regime de trabalho into various components. - Removed the print modal for financial data to streamline the employee profile interface. - Improved overall code clarity and maintainability across multiple files.
This commit is contained in:
@@ -1,443 +1,406 @@
|
||||
<script lang="ts">
|
||||
import { useQuery } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
|
||||
import { onMount } from "svelte";
|
||||
import { useQuery } from 'convex-svelte';
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
||||
|
||||
interface Props {
|
||||
funcionarioId: Id<"funcionarios">;
|
||||
}
|
||||
interface Props {
|
||||
funcionarioId: Id<'funcionarios'>;
|
||||
}
|
||||
|
||||
let { funcionarioId }: Props = $props();
|
||||
let { funcionarioId }: Props = $props();
|
||||
|
||||
// Queries
|
||||
const saldosQuery = useQuery(api.saldoFerias.listarSaldos, { funcionarioId });
|
||||
const solicitacoesQuery = useQuery(api.ferias.listarMinhasSolicitacoes, {
|
||||
funcionarioId,
|
||||
});
|
||||
// Queries
|
||||
const saldosQuery = useQuery(api.saldoFerias.listarSaldos, { funcionarioId });
|
||||
const solicitacoesQuery = useQuery(api.ferias.listarMinhasSolicitacoes, {
|
||||
funcionarioId
|
||||
});
|
||||
|
||||
const saldos = $derived(saldosQuery.data || []);
|
||||
const solicitacoes = $derived(solicitacoesQuery.data || []);
|
||||
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 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,
|
||||
);
|
||||
// Estatísticas derivadas
|
||||
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);
|
||||
|
||||
// Canvas para gráfico de pizza
|
||||
let canvasSaldo = $state<HTMLCanvasElement>();
|
||||
let canvasStatus = $state<HTMLCanvasElement>();
|
||||
// Canvas para gráfico de pizza
|
||||
let canvasSaldo = $state<HTMLCanvasElement>();
|
||||
let canvasStatus = $state<HTMLCanvasElement>();
|
||||
|
||||
// Função para desenhar gráfico de pizza moderno
|
||||
function desenharGraficoPizza(
|
||||
canvas: HTMLCanvasElement,
|
||||
dados: { label: string; valor: number; cor: string }[],
|
||||
) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
// Função para desenhar gráfico de pizza moderno
|
||||
function desenharGraficoPizza(
|
||||
canvas: HTMLCanvasElement,
|
||||
dados: { label: string; valor: number; cor: string }[]
|
||||
) {
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
const total = dados.reduce((acc, d) => acc + d.valor, 0);
|
||||
if (total === 0) return;
|
||||
const total = dados.reduce((acc, d) => acc + d.valor, 0);
|
||||
if (total === 0) return;
|
||||
|
||||
let startAngle = -Math.PI / 2;
|
||||
let startAngle = -Math.PI / 2;
|
||||
|
||||
dados.forEach((item) => {
|
||||
const sliceAngle = (2 * Math.PI * item.valor) / total;
|
||||
dados.forEach((item) => {
|
||||
const sliceAngle = (2 * Math.PI * item.valor) / total;
|
||||
|
||||
// Desenhar fatia com sombra
|
||||
ctx.save();
|
||||
ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
|
||||
ctx.shadowBlur = 15;
|
||||
ctx.shadowOffsetX = 5;
|
||||
ctx.shadowOffsetY = 5;
|
||||
// Desenhar fatia com sombra
|
||||
ctx.save();
|
||||
ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
|
||||
ctx.shadowBlur = 15;
|
||||
ctx.shadowOffsetX = 5;
|
||||
ctx.shadowOffsetY = 5;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, centerY);
|
||||
ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
|
||||
ctx.closePath();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, centerY);
|
||||
ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
|
||||
ctx.closePath();
|
||||
|
||||
ctx.fillStyle = item.cor;
|
||||
ctx.fill();
|
||||
ctx.fillStyle = item.cor;
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
ctx.restore();
|
||||
|
||||
// Desenhar borda branca
|
||||
ctx.strokeStyle = "#ffffff";
|
||||
ctx.lineWidth = 3;
|
||||
ctx.stroke();
|
||||
// Desenhar borda branca
|
||||
ctx.strokeStyle = '#ffffff';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.stroke();
|
||||
|
||||
startAngle += sliceAngle;
|
||||
});
|
||||
startAngle += sliceAngle;
|
||||
});
|
||||
|
||||
// Desenhar círculo branco no centro (efeito donut)
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fill();
|
||||
}
|
||||
// Desenhar círculo branco no centro (efeito donut)
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Atualizar gráficos quando dados mudarem
|
||||
$effect(() => {
|
||||
if (canvasSaldo && saldoAtual) {
|
||||
desenharGraficoPizza(canvasSaldo, [
|
||||
{ label: "Usado", valor: saldoAtual.diasUsados, cor: "#ff6b6b" },
|
||||
{ label: "Pendente", valor: saldoAtual.diasPendentes, cor: "#ffa94d" },
|
||||
{
|
||||
label: "Disponível",
|
||||
valor: saldoAtual.diasDisponiveis,
|
||||
cor: "#51cf66",
|
||||
},
|
||||
]);
|
||||
}
|
||||
// Atualizar gráficos quando dados mudarem
|
||||
$effect(() => {
|
||||
if (canvasSaldo && saldoAtual) {
|
||||
desenharGraficoPizza(canvasSaldo, [
|
||||
{ label: 'Usado', valor: saldoAtual.diasUsados, cor: '#ff6b6b' },
|
||||
{ label: 'Pendente', valor: saldoAtual.diasPendentes, cor: '#ffa94d' },
|
||||
{
|
||||
label: 'Disponível',
|
||||
valor: saldoAtual.diasDisponiveis,
|
||||
cor: '#51cf66'
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
if (canvasStatus && totalSolicitacoes > 0) {
|
||||
desenharGraficoPizza(canvasStatus, [
|
||||
{ label: "Aprovadas", valor: aprovadas, cor: "#51cf66" },
|
||||
{ label: "Pendentes", valor: pendentes, cor: "#ffa94d" },
|
||||
{ label: "Reprovadas", valor: reprovadas, cor: "#ff6b6b" },
|
||||
]);
|
||||
}
|
||||
});
|
||||
if (canvasStatus && totalSolicitacoes > 0) {
|
||||
desenharGraficoPizza(canvasStatus, [
|
||||
{ label: 'Aprovadas', valor: aprovadas, cor: '#51cf66' },
|
||||
{ label: 'Pendentes', valor: pendentes, cor: '#ffa94d' },
|
||||
{ label: 'Reprovadas', valor: reprovadas, cor: '#ff6b6b' }
|
||||
]);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="dashboard-ferias">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<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>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<h1
|
||||
class="from-primary to-secondary bg-linear-to-r bg-clip-text text-4xl font-bold 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>
|
||||
</div>
|
||||
|
||||
{#if saldosQuery.isLoading || solicitacoesQuery.isLoading}
|
||||
<!-- Loading Skeletons -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
{#each Array(4) as _}
|
||||
<div class="skeleton h-32 rounded-2xl"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Cards de Estatísticas -->
|
||||
<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-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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block w-10 h-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</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-desc text-success/70">dias para usar</div>
|
||||
</div>
|
||||
{#if saldosQuery.isLoading || solicitacoesQuery.isLoading}
|
||||
<!-- Loading Skeletons -->
|
||||
<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{#each Array(4)}
|
||||
<div class="skeleton h-32 rounded-2xl"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Cards de Estatísticas -->
|
||||
<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- Card 1: Saldo Disponível -->
|
||||
<div
|
||||
class="stat from-success/20 to-success/5 border-success/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div class="stat-figure text-success">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block h-10 w-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</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-desc text-success/70">dias para usar</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Dias Usados -->
|
||||
<div
|
||||
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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block w-10 h-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</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-desc text-error/70">dias já gozados</div>
|
||||
</div>
|
||||
<!-- Card 2: Dias Usados -->
|
||||
<div
|
||||
class="stat from-error/20 to-error/5 border-error/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div class="stat-figure text-error">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block h-10 w-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</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-desc text-error/70">dias já gozados</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Pendentes -->
|
||||
<div
|
||||
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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block w-10 h-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</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-desc text-warning/70">aguardando aprovação</div>
|
||||
</div>
|
||||
<!-- Card 3: Pendentes -->
|
||||
<div
|
||||
class="stat from-warning/20 to-warning/5 border-warning/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div class="stat-figure text-warning">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block h-10 w-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</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-desc text-warning/70">aguardando aprovação</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4: Total de Direito -->
|
||||
<div
|
||||
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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block w-10 h-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
></path>
|
||||
</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-desc text-primary/70">dias no ano</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Total de Direito -->
|
||||
<div
|
||||
class="stat from-primary/20 to-primary/5 border-primary/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div class="stat-figure text-primary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block h-10 w-10 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
></path>
|
||||
</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-desc text-primary/70">dias no ano</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gráficos -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
||||
<!-- Gráfico 1: Distribuição de Saldo -->
|
||||
<div class="card bg-base-100 shadow-2xl border-2 border-base-300">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-4">
|
||||
🥧 Distribuição de Saldo
|
||||
<div class="badge badge-primary badge-lg">
|
||||
Ano {saldoAtual?.anoReferencia || new Date().getFullYear()}
|
||||
</div>
|
||||
</h2>
|
||||
<!-- Gráficos -->
|
||||
<div class="mb-8 grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<!-- Gráfico 1: Distribuição de Saldo -->
|
||||
<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4 text-2xl">
|
||||
🥧 Distribuição de Saldo
|
||||
<div class="badge badge-primary badge-lg">
|
||||
Ano {saldoAtual?.anoReferencia || new Date().getFullYear()}
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
{#if saldoAtual}
|
||||
<div class="flex items-center justify-center">
|
||||
<canvas
|
||||
bind:this={canvasSaldo}
|
||||
width="300"
|
||||
height="300"
|
||||
class="max-w-full"
|
||||
></canvas>
|
||||
</div>
|
||||
{#if saldoAtual}
|
||||
<div class="flex items-center justify-center">
|
||||
<canvas bind:this={canvasSaldo} width="300" height="300" class="max-w-full"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Legenda -->
|
||||
<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
|
||||
>
|
||||
</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
|
||||
>
|
||||
</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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="alert alert-info">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="stroke-current shrink-0 w-6 h-6"
|
||||
>
|
||||
<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"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Nenhum saldo disponível para o ano atual</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Legenda -->
|
||||
<div class="mt-4 flex flex-wrap justify-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 rounded-full bg-[#51cf66]"></div>
|
||||
<span class="text-sm font-semibold"
|
||||
>Disponível: {saldoAtual.diasDisponiveis} dias</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ffa94d]"></div>
|
||||
<span class="text-sm font-semibold">Pendente: {saldoAtual.diasPendentes} dias</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ff6b6b]"></div>
|
||||
<span class="text-sm font-semibold">Usado: {saldoAtual.diasUsados} dias</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="alert alert-info">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-6 w-6 shrink-0 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"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Nenhum saldo disponível para o ano atual</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gráfico 2: Status de Solicitações -->
|
||||
<div class="card bg-base-100 shadow-2xl border-2 border-base-300">
|
||||
<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>
|
||||
</h2>
|
||||
<!-- Gráfico 2: Status de Solicitações -->
|
||||
<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4 text-2xl">
|
||||
📋 Status de Solicitações
|
||||
<div class="badge badge-secondary badge-lg">
|
||||
Total: {totalSolicitacoes}
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
{#if totalSolicitacoes > 0}
|
||||
<div class="flex items-center justify-center">
|
||||
<canvas
|
||||
bind:this={canvasStatus}
|
||||
width="300"
|
||||
height="300"
|
||||
class="max-w-full"
|
||||
></canvas>
|
||||
</div>
|
||||
{#if totalSolicitacoes > 0}
|
||||
<div class="flex items-center justify-center">
|
||||
<canvas bind:this={canvasStatus} width="300" height="300" class="max-w-full"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Legenda -->
|
||||
<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
|
||||
>
|
||||
</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
|
||||
>
|
||||
</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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="alert alert-info">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="stroke-current shrink-0 w-6 h-6"
|
||||
>
|
||||
<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"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Nenhuma solicitação de férias ainda</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Legenda -->
|
||||
<div class="mt-4 flex flex-wrap justify-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 rounded-full bg-[#51cf66]"></div>
|
||||
<span class="text-sm font-semibold">Aprovadas: {aprovadas}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ffa94d]"></div>
|
||||
<span class="text-sm font-semibold">Pendentes: {pendentes}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ff6b6b]"></div>
|
||||
<span class="text-sm font-semibold">Reprovadas: {reprovadas}</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="alert alert-info">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-6 w-6 shrink-0 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"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Nenhuma solicitação de férias ainda</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Histórico de Saldos -->
|
||||
{#if saldos.length > 0}
|
||||
<div class="card bg-base-100 shadow-2xl border-2 border-base-300">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-4">📅 Histórico de Saldos</h2>
|
||||
<!-- Histórico de Saldos -->
|
||||
{#if saldos.length > 0}
|
||||
<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4 text-2xl">📅 Histórico de Saldos</h2>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ano</th>
|
||||
<th>Direito</th>
|
||||
<th>Usado</th>
|
||||
<th>Pendente</th>
|
||||
<th>Disponível</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each saldos as saldo}
|
||||
<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>
|
||||
{#if saldo.status === "ativo"}
|
||||
<span class="badge badge-success">Ativo</span>
|
||||
{:else if saldo.status === "vencido"}
|
||||
<span class="badge badge-error">Vencido</span>
|
||||
{:else}
|
||||
<span class="badge badge-neutral">Concluído</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-zebra table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ano</th>
|
||||
<th>Direito</th>
|
||||
<th>Usado</th>
|
||||
<th>Pendente</th>
|
||||
<th>Disponível</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each saldos as saldo (saldo._id)}
|
||||
<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>
|
||||
{#if saldo.status === 'ativo'}
|
||||
<span class="badge badge-success">Ativo</span>
|
||||
{:else if saldo.status === 'vencido'}
|
||||
<span class="badge badge-error">Vencido</span>
|
||||
{:else}
|
||||
<span class="badge badge-neutral">Concluído</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-clip-text {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
.bg-clip-text {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
canvas {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
canvas {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user