sgse-app/apps/web/src/lib/components/ponto/PrintPontoModal.svelte

<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>