feat: integrate jsPDF and jsPDF-autotable for document generation; enhance employee management with print functionality and improved data handling in employee forms

This commit is contained in:
2025-10-27 23:36:04 -03:00
parent 3a1956f83b
commit 81e6eb4a42
26 changed files with 6405 additions and 935 deletions

View File

@@ -0,0 +1,162 @@
<script lang="ts">
import { modelosDeclaracoes } from "$lib/utils/modelosDeclaracoes";
import {
gerarDeclaracaoAcumulacaoCargo,
gerarDeclaracaoDependentesIR,
gerarDeclaracaoIdoneidade,
gerarTermoNepotismo,
gerarTermoOpcaoRemuneracao,
downloadBlob
} from "$lib/utils/declaracoesGenerator";
interface Props {
funcionario?: any;
showPreencherButton?: boolean;
}
let { funcionario, showPreencherButton = false }: Props = $props();
let generating = $state(false);
function baixarModelo(arquivoUrl: string, nomeModelo: string) {
const link = document.createElement('a');
link.href = arquivoUrl;
link.download = nomeModelo + '.pdf';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
async function gerarPreenchido(modeloId: string) {
if (!funcionario) {
alert('Dados do funcionário não disponíveis');
return;
}
try {
generating = true;
let blob: Blob;
let nomeArquivo: string;
switch (modeloId) {
case 'acumulacao_cargo':
blob = await gerarDeclaracaoAcumulacaoCargo(funcionario);
nomeArquivo = `Declaracao_Acumulacao_Cargo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
break;
case 'dependentes_ir':
blob = await gerarDeclaracaoDependentesIR(funcionario);
nomeArquivo = `Declaracao_Dependentes_IR_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
break;
case 'idoneidade':
blob = await gerarDeclaracaoIdoneidade(funcionario);
nomeArquivo = `Declaracao_Idoneidade_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
break;
case 'nepotismo':
blob = await gerarTermoNepotismo(funcionario);
nomeArquivo = `Termo_Nepotismo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
break;
case 'opcao_remuneracao':
blob = await gerarTermoOpcaoRemuneracao(funcionario);
nomeArquivo = `Termo_Opcao_Remuneracao_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
break;
default:
alert('Modelo não encontrado');
return;
}
downloadBlob(blob, nomeArquivo);
} catch (error) {
console.error('Erro ao gerar declaração:', error);
alert('Erro ao gerar declaração preenchida');
} finally {
generating = false;
}
}
</script>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl border-b pb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Modelos de Declarações
</h2>
<div class="alert alert-info shadow-sm mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24">
<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>
<div class="text-sm">
<p class="font-semibold">Baixe os modelos, preencha, assine e faça upload no sistema</p>
<p class="text-xs opacity-80 mt-1">Estes documentos são necessários para completar o cadastro do funcionário</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{#each modelosDeclaracoes as modelo}
<div class="card bg-base-200 shadow-sm hover:shadow-md transition-shadow">
<div class="card-body p-4">
<div class="flex items-start gap-3">
<!-- Ícone PDF -->
<div class="flex-shrink-0 w-12 h-12 bg-error/10 rounded-lg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</div>
<!-- Conteúdo -->
<div class="flex-1 min-w-0">
<h3 class="font-semibold text-sm mb-1 line-clamp-2">{modelo.nome}</h3>
<p class="text-xs text-base-content/70 mb-3 line-clamp-2">{modelo.descricao}</p>
<!-- Ações -->
<div class="flex flex-col gap-2">
<button
type="button"
class="btn btn-primary btn-xs gap-1"
onclick={() => baixarModelo(modelo.arquivo, modelo.nome)}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Baixar Modelo
</button>
{#if showPreencherButton && modelo.podePreencherAutomaticamente && funcionario}
<button
type="button"
class="btn btn-outline btn-xs gap-1"
onclick={() => gerarPreenchido(modelo.id)}
disabled={generating}
>
{#if generating}
<span class="loading loading-spinner loading-xs"></span>
Gerando...
{:else}
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Gerar Preenchido
{/if}
</button>
{/if}
</div>
</div>
</div>
</div>
</div>
{/each}
</div>
<div class="mt-4 text-xs text-base-content/60 text-center">
<p>💡 Dica: Após preencher e assinar os documentos, faça upload na seção "Documentação Anexa"</p>
</div>
</div>
</div>