Files
sgse-app/apps/web/src/routes/(dashboard)/termo-consentimento/+page.svelte

277 lines
9.5 KiB
Svelte

<script lang="ts">
import { resolve } from '$app/paths';
import { Shield, CheckCircle, AlertCircle, FileText } from 'lucide-svelte';
import { useQuery, useMutation } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
let aceito = $state(false);
let carregando = $state(false);
let erro = $state<string | null>(null);
let sucesso = $state(false);
// Verificar se já aceitou o termo
const consentimentoQuery = useQuery(api.lgpd.verificarConsentimento, { tipo: 'termo_uso' });
const registrarConsentimento = useMutation(api.lgpd.registrarConsentimento);
const jaAceitou = $derived(
consentimentoQuery?.data?.aceito === true && consentimentoQuery?.data?.versao === '1.0'
);
async function aceitarTermo() {
if (!aceito) {
erro = 'Você precisa aceitar o termo para continuar';
return;
}
carregando = true;
erro = null;
try {
await registrarConsentimento({
tipo: 'termo_uso',
aceito: true,
versao: '1.0'
});
sucesso = true;
} catch (e: any) {
erro = e.message || 'Erro ao registrar consentimento';
} finally {
carregando = false;
}
}
</script>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Header -->
<div class="mb-8">
<div class="flex items-center gap-4 mb-4">
<div class="p-3 bg-primary/10 rounded-xl">
<Shield class="h-8 w-8 text-primary" strokeWidth={2} />
</div>
<div>
<h1 class="text-3xl font-bold text-base-content">Termo de Consentimento</h1>
<p class="text-base-content/60 mt-1">
Termo de Uso e Consentimento para Tratamento de Dados Pessoais
</p>
</div>
</div>
</div>
{#if consentimentoQuery === undefined}
<div class="flex justify-center items-center py-20">
<span class="loading loading-spinner loading-lg text-primary"></span>
</div>
{:else if jaAceitou}
<!-- Já aceitou -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body text-center">
<CheckCircle class="h-16 w-16 text-success mx-auto mb-4" strokeWidth={2} />
<h2 class="card-title text-2xl justify-center mb-4">Termo Já Aceito</h2>
<p class="text-base-content/80 mb-6">
Você já aceitou este termo de consentimento. Se desejar revogar seu consentimento ou
gerenciar suas preferências de privacidade, acesse a página de privacidade.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href={resolve('/privacidade')} class="btn btn-primary">
<FileText class="h-5 w-5" />
Ver Política de Privacidade
</a>
<a href={resolve('/perfil/privacidade')} class="btn btn-outline">
<Shield class="h-5 w-5" />
Gerenciar Privacidade
</a>
</div>
</div>
</div>
{:else if sucesso}
<!-- Sucesso -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body text-center">
<CheckCircle class="h-16 w-16 text-success mx-auto mb-4" strokeWidth={2} />
<h2 class="card-title text-2xl justify-center mb-4">Termo Aceito com Sucesso!</h2>
<p class="text-base-content/80 mb-6">
Seu consentimento foi registrado. Você pode acessar o sistema normalmente.
</p>
<a href={resolve('/')} class="btn btn-primary btn-lg">
Continuar para o Sistema
</a>
</div>
</div>
{:else}
<!-- Termo -->
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<div class="prose max-w-none">
<h2 class="text-2xl font-bold mb-4">Termo de Uso e Consentimento</h2>
<section class="mb-6">
<h3 class="text-xl font-semibold mb-3">1. Aceitação dos Termos</h3>
<p class="text-base-content/80 mb-4">
Ao utilizar o Sistema de Gestão da Secretaria de Esportes (SGSE), você concorda
com os termos e condições estabelecidos neste documento, bem como com a
Política de Privacidade do sistema.
</p>
</section>
<section class="mb-6">
<h3 class="text-xl font-semibold mb-3">2. Tratamento de Dados Pessoais</h3>
<p class="text-base-content/80 mb-4">
Você consente que a Secretaria de Esportes do Estado de Pernambuco trate seus
dados pessoais para as finalidades descritas na Política de Privacidade,
incluindo:
</p>
<ul class="list-disc list-inside space-y-2 text-base-content/80 mb-4">
<li>Gestão de recursos humanos e folha de pagamento</li>
<li>Controle de ponto e registro de jornada de trabalho</li>
<li>Gestão de férias, ausências e licenças</li>
<li>Processamento de atestados médicos e licenças de saúde</li>
<li>Comunicação interna e notificações</li>
<li>Cumprimento de obrigações legais e regulatórias</li>
</ul>
</section>
<section class="mb-6">
<h3 class="text-xl font-semibold mb-3">3. Base Legal</h3>
<p class="text-base-content/80 mb-4">
O tratamento de seus dados pessoais fundamenta-se nas seguintes bases legais,
conforme previsto na Lei Geral de Proteção de Dados (LGPD):
</p>
<ul class="list-disc list-inside space-y-2 text-base-content/80">
<li>
<strong>Execução de Políticas Públicas:</strong> Para a execução de políticas
públicas previstas em leis ou regulamentos
</li>
<li>
<strong>Cumprimento de Obrigação Legal:</strong> Para cumprimento de
obrigação legal ou regulatória
</li>
<li>
<strong>Execução de Contrato:</strong> Para a execução de contrato ou de
procedimentos preliminares relacionados a contrato
</li>
</ul>
</section>
<section class="mb-6">
<h3 class="text-xl font-semibold mb-3">4. Direitos do Titular</h3>
<p class="text-base-content/80 mb-4">
Você possui os seguintes direitos em relação aos seus dados pessoais:
</p>
<ul class="list-disc list-inside space-y-2 text-base-content/80">
<li>Confirmar a existência de tratamento de dados</li>
<li>Acessar seus dados pessoais</li>
<li>Corrigir dados incompletos, inexatos ou desatualizados</li>
<li>Solicitar anonimização, bloqueio ou eliminação de dados</li>
<li>Solicitar portabilidade dos dados</li>
<li>Revogar seu consentimento</li>
</ul>
<p class="text-base-content/80 mt-4">
Para exercer seus direitos, acesse a página{' '}
<a href={resolve('/privacidade/meus-dados')} class="link link-primary">
Solicitar Meus Direitos
</a>
.
</p>
</section>
<section class="mb-6">
<h3 class="text-xl font-semibold mb-3">5. Segurança dos Dados</h3>
<p class="text-base-content/80 mb-4">
A Secretaria de Esportes adota medidas técnicas e administrativas para proteger
seus dados pessoais contra acesso não autorizado, alteração, divulgação ou
destruição.
</p>
</section>
<section class="mb-6">
<h3 class="text-xl font-semibold mb-3">6. Revogação do Consentimento</h3>
<p class="text-base-content/80 mb-4">
Você pode revogar seu consentimento a qualquer momento através da página de
gerenciamento de privacidade. No entanto, a revogação pode impedir o acesso a
algumas funcionalidades do sistema que dependem do tratamento de dados pessoais.
</p>
</section>
<section class="mb-6">
<h3 class="text-xl font-semibold mb-3">7. Contato</h3>
<p class="text-base-content/80 mb-4">
Para questões relacionadas ao tratamento de dados pessoais, entre em contato com
o Encarregado de Proteção de Dados:
</p>
<div class="bg-base-200 p-4 rounded-lg">
<p class="text-sm">
<strong>E-mail:</strong> lgpd@esportes.pe.gov.br
</p>
<p class="text-sm">
<strong>Telefone:</strong> (81) 3184-XXXX
</p>
</div>
</section>
<div class="alert alert-warning mb-6">
<AlertCircle class="h-5 w-5" />
<p class="text-sm">
<strong>Atenção:</strong> O aceite deste termo é obrigatório para utilização do
sistema. Ao aceitar, você confirma que leu, compreendeu e concorda com todos os
termos e condições estabelecidos.
</p>
</div>
</div>
</div>
</div>
<!-- Formulário de Aceite -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">Aceitar Termo</h2>
{#if erro}
<div class="alert alert-error mb-4">
<AlertCircle class="h-5 w-5" />
<span>{erro}</span>
</div>
{/if}
<div class="form-control mb-6">
<label class="label cursor-pointer justify-start gap-4">
<input
type="checkbox"
bind:checked={aceito}
class="checkbox checkbox-primary"
/>
<span class="label-text text-base-content/80">
Declaro que li, compreendi e aceito os termos e condições estabelecidos neste
Termo de Consentimento e na{' '}
<a href={resolve('/privacidade')} class="link link-primary" target="_blank">
Política de Privacidade
</a>
.
</span>
</label>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button
onclick={aceitarTermo}
disabled={!aceito || carregando}
class="btn btn-primary btn-lg flex-1"
>
{#if carregando}
<span class="loading loading-spinner loading-sm"></span>
Processando...
{:else}
<CheckCircle class="h-5 w-5" />
Aceitar e Continuar
{/if}
</button>
<a href={resolve('/privacidade')} class="btn btn-outline btn-lg flex-1">
<FileText class="h-5 w-5" />
Ver Política de Privacidade
</a>
</div>
</div>
</div>
{/if}
</div>