Merge pull request #32 from killer-cf/feat-controle-ponto
Feat controle ponto
This commit is contained in:
GitHub
200
apps/web/src/lib/components/ponto/PrintPontoModal.svelte
Normal file
200
apps/web/src/lib/components/ponto/PrintPontoModal.svelte
Normal file
@@ -0,0 +1,200 @@
|
||||
<script lang="ts">
|
||||
import { CheckCircle2, X, Printer } from 'lucide-svelte';
|
||||
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
||||
|
||||
interface Props {
|
||||
funcionarioId: Id<'funcionarios'>;
|
||||
onClose: () => void;
|
||||
onGenerate: (sections: {
|
||||
dadosFuncionario: boolean;
|
||||
registrosPonto: boolean;
|
||||
saldoDiario: boolean;
|
||||
bancoHoras: boolean;
|
||||
alteracoesGestor: boolean;
|
||||
dispensasRegistro: boolean;
|
||||
}) => void;
|
||||
}
|
||||
|
||||
let { funcionarioId, onClose, onGenerate }: Props = $props();
|
||||
|
||||
let modalRef: HTMLDialogElement;
|
||||
|
||||
// Seções selecionáveis
|
||||
let sections = $state({
|
||||
dadosFuncionario: true,
|
||||
registrosPonto: true,
|
||||
saldoDiario: true,
|
||||
bancoHoras: true,
|
||||
alteracoesGestor: true,
|
||||
dispensasRegistro: true,
|
||||
});
|
||||
|
||||
function selectAll() {
|
||||
Object.keys(sections).forEach((key) => {
|
||||
sections[key as keyof typeof sections] = true;
|
||||
});
|
||||
}
|
||||
|
||||
function deselectAll() {
|
||||
Object.keys(sections).forEach((key) => {
|
||||
sections[key as keyof typeof sections] = false;
|
||||
});
|
||||
}
|
||||
|
||||
function handleGenerate() {
|
||||
onGenerate(sections);
|
||||
onClose();
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
if (modalRef) {
|
||||
modalRef.close();
|
||||
}
|
||||
onClose();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (modalRef) {
|
||||
modalRef.showModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<dialog bind:this={modalRef} class="modal modal-open">
|
||||
<div class="modal-box max-w-4xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-2xl">Selecionar Campos para Impressão</h3>
|
||||
<button class="btn btn-sm btn-circle btn-ghost" onclick={handleClose} aria-label="Fechar">
|
||||
<X class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<!-- Seção 1: Dados do Funcionário -->
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body p-4">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text font-semibold">Dados do Funcionário</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
bind:checked={sections.dadosFuncionario}
|
||||
/>
|
||||
</label>
|
||||
<p class="text-sm text-base-content/70 mt-2">
|
||||
Nome, matrícula, cargo e informações básicas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seção 2: Registros de Ponto -->
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body p-4">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text font-semibold">Registros de Ponto</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
bind:checked={sections.registrosPonto}
|
||||
/>
|
||||
</label>
|
||||
<p class="text-sm text-base-content/70 mt-2">
|
||||
Data, tipo, horário e status de cada registro
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seção 3: Saldo Diário -->
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body p-4">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text font-semibold">Saldo Diário</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
bind:checked={sections.saldoDiario}
|
||||
/>
|
||||
</label>
|
||||
<p class="text-sm text-base-content/70 mt-2">
|
||||
Saldo em horas e minutos de cada dia (positivo/negativo)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seção 4: Banco de Horas -->
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body p-4">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text font-semibold">Banco de Horas</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
bind:checked={sections.bancoHoras}
|
||||
/>
|
||||
</label>
|
||||
<p class="text-sm text-base-content/70 mt-2">
|
||||
Saldo acumulado do banco de horas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seção 5: Alterações pelo Gestor -->
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body p-4">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text font-semibold">Alterações pelo Gestor</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
bind:checked={sections.alteracoesGestor}
|
||||
/>
|
||||
</label>
|
||||
<p class="text-sm text-base-content/70 mt-2">
|
||||
Edições e ajustes realizados pelo gestor (se houver)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seção 6: Dispensas de Registro -->
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body p-4">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text font-semibold">Dispensas de Registro</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-primary"
|
||||
bind:checked={sections.dispensasRegistro}
|
||||
/>
|
||||
</label>
|
||||
<p class="text-sm text-base-content/70 mt-2">
|
||||
Períodos onde o funcionário esteve dispensado de registrar ponto
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm btn-outline" onclick={selectAll}>
|
||||
Selecionar Todos
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline" onclick={deselectAll}>
|
||||
Desmarcar Todos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-ghost" onclick={handleClose}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button class="btn btn-primary gap-2" onclick={handleGenerate}>
|
||||
<Printer class="h-4 w-4" />
|
||||
Gerar PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop" onsubmit={handleClose}>
|
||||
<button type="submit">fechar</button>
|
||||
</form>
|
||||
</dialog>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Clock } from 'lucide-svelte';
|
||||
import { Clock, CheckCircle2, XCircle } from 'lucide-svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
</script>
|
||||
|
||||
@@ -62,6 +62,86 @@
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href={resolve('/(dashboard)/recursos-humanos/controle-ponto/homologacao')}
|
||||
class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br from-green-500/10 to-green-600/20 p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div
|
||||
class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
|
||||
>
|
||||
<div
|
||||
class="text-green-600 group-hover:text-white"
|
||||
>
|
||||
<CheckCircle2 class="h-5 w-5" strokeWidth={2} />
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3
|
||||
class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
Homologação de Registro
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/70 flex-1">
|
||||
Edite registros de ponto e ajuste banco de horas
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href={resolve('/(dashboard)/recursos-humanos/controle-ponto/dispensa')}
|
||||
class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br from-orange-500/10 to-orange-600/20 p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div
|
||||
class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
|
||||
>
|
||||
<div
|
||||
class="text-orange-600 group-hover:text-white"
|
||||
>
|
||||
<XCircle class="h-5 w-5" strokeWidth={2} />
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3
|
||||
class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
Dispensa de Registro
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/70 flex-1">
|
||||
Gerencie períodos de dispensa de registro de ponto
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user