refactor: streamline Svelte components and enhance user feedback

- Refactored multiple Svelte components, including AprovarAusencias, AprovarFerias, and ErrorModal, to improve code clarity and maintainability.
- Updated modal interactions and error handling messages for better user feedback.
- Cleaned up component structures and standardized formatting for consistency across the codebase.
- Enhanced styling and layout adjustments to align with the new design system.
This commit is contained in:
2025-11-10 16:34:15 -03:00
parent ed00739b30
commit c7479222da
41 changed files with 22118 additions and 21337 deletions

View File

@@ -1,264 +1,363 @@
<script lang="ts">
import { useConvexClient } from "convex-svelte";
import { api } from "@sgse-app/backend/convex/_generated/api";
import { useConvexClient } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
const convex = useConvexClient();
const convex = useConvexClient();
let matricula = $state("");
let email = $state("");
let carregando = $state(false);
let notice = $state<{ type: "success" | "error" | "info"; message: string } | null>(null);
let solicitacaoEnviada = $state(false);
let matricula = $state('');
let email = $state('');
let carregando = $state(false);
let notice = $state<{ type: 'success' | 'error' | 'info'; message: string } | null>(null);
let solicitacaoEnviada = $state(false);
async function handleSubmit(e: Event) {
e.preventDefault();
notice = null;
async function handleSubmit(e: Event) {
e.preventDefault();
notice = null;
if (!matricula || !email) {
notice = {
type: "error",
message: "Por favor, preencha todos os campos",
};
return;
}
if (!matricula || !email) {
notice = {
type: 'error',
message: 'Por favor, preencha todos os campos'
};
return;
}
carregando = true;
carregando = true;
try {
// Verificar se o usuário existe
const usuarios = await convex.query(api.usuarios.listar, {
matricula: matricula,
});
try {
// Verificar se o usuário existe
const usuarios = await convex.query(api.usuarios.listar, {
matricula: matricula
});
const usuario = usuarios.find(u => u.matricula === matricula && u.email === email);
const usuario = usuarios.find((u) => u.matricula === matricula && u.email === email);
if (!usuario) {
notice = {
type: "error",
message: "Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.",
};
carregando = false;
return;
}
if (!usuario) {
notice = {
type: 'error',
message: 'Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.'
};
carregando = false;
return;
}
// Simular envio de solicitação
solicitacaoEnviada = true;
notice = {
type: "success",
message: "Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.",
};
// Simular envio de solicitação
solicitacaoEnviada = true;
notice = {
type: 'success',
message: 'Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.'
};
// Limpar campos
matricula = "";
email = "";
} catch (error: any) {
notice = {
type: "error",
message: error.message || "Erro ao processar solicitação",
};
} finally {
carregando = false;
}
}
// Limpar campos
matricula = '';
email = '';
} catch (error: any) {
notice = {
type: 'error',
message: error.message || 'Erro ao processar solicitação'
};
} finally {
carregando = false;
}
}
</script>
<main class="container mx-auto px-4 py-8 max-w-2xl">
<!-- Header -->
<div class="mb-8">
<div class="flex items-center gap-3 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h1 class="text-4xl font-bold text-primary">Esqueci Minha Senha</h1>
</div>
<p class="text-base-content/70 text-lg">
Solicite a recuperação da sua senha de acesso
</p>
</div>
<main class="container mx-auto max-w-2xl px-4 py-8">
<!-- Header -->
<div class="mb-8">
<div class="mb-2 flex items-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary h-10 w-10"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<h1 class="text-primary text-4xl font-bold">Esqueci Minha Senha</h1>
</div>
<p class="text-base-content/70 text-lg">Solicite a recuperação da sua senha de acesso</p>
</div>
<!-- Breadcrumbs -->
<div class="text-sm breadcrumbs mb-6">
<ul>
<li><a href="/">Dashboard</a></li>
<li>Esqueci Minha Senha</li>
</ul>
</div>
<!-- Breadcrumbs -->
<div class="breadcrumbs mb-6 text-sm">
<ul>
<li><a href="/">Dashboard</a></li>
<li>Esqueci Minha Senha</li>
</ul>
</div>
<!-- Alertas -->
{#if notice}
<div class="alert {notice.type === 'success' ? 'alert-success' : notice.type === 'error' ? 'alert-error' : 'alert-info'} mb-6 shadow-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
class="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
{#if notice.type === "success"}
<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"
/>
{:else if notice.type === "error"}
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
{:else}
<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"
/>
{/if}
</svg>
<span>{notice.message}</span>
</div>
{/if}
<!-- Alertas -->
{#if notice}
<div
class="alert {notice.type === 'success'
? 'alert-success'
: notice.type === 'error'
? 'alert-error'
: 'alert-info'} mb-6 shadow-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
fill="none"
viewBox="0 0 24 24"
>
{#if notice.type === 'success'}
<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"
/>
{:else if notice.type === 'error'}
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
{:else}
<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"
/>
{/if}
</svg>
<span>{notice.message}</span>
</div>
{/if}
{#if !solicitacaoEnviada}
<!-- Formulário -->
<div class="card bg-base-100 shadow-xl border border-base-300">
<div class="card-body">
<div class="alert alert-info mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
<h3 class="font-bold">Como funciona?</h3>
<p class="text-sm">
Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e entrará em contato para resetar sua senha.
</p>
</div>
</div>
{#if !solicitacaoEnviada}
<!-- Formulário -->
<div class="card bg-base-100 border-base-300 border shadow-xl">
<div class="card-body">
<div class="alert alert-info mb-6">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
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>
<h3 class="font-bold">Como funciona?</h3>
<p class="text-sm">
Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e
entrará em contato para resetar sua senha.
</p>
</div>
</div>
<form onsubmit={handleSubmit} class="space-y-6">
<!-- Matrícula -->
<div class="form-control">
<label class="label" for="matricula">
<span class="label-text font-semibold">Matrícula</span>
<span class="label-text-alt text-error">*</span>
</label>
<input
id="matricula"
type="text"
placeholder="Digite sua matrícula"
class="input input-bordered input-primary w-full"
bind:value={matricula}
required
disabled={carregando}
/>
</div>
<form onsubmit={handleSubmit} class="space-y-6">
<!-- Matrícula -->
<div class="form-control">
<label class="label" for="matricula">
<span class="label-text font-semibold">Matrícula</span>
<span class="label-text-alt text-error">*</span>
</label>
<input
id="matricula"
type="text"
placeholder="Digite sua matrícula"
class="input input-bordered input-primary w-full"
bind:value={matricula}
required
disabled={carregando}
/>
</div>
<!-- E-mail -->
<div class="form-control">
<label class="label" for="email">
<span class="label-text font-semibold">E-mail</span>
<span class="label-text-alt text-error">*</span>
</label>
<input
id="email"
type="email"
placeholder="Digite seu e-mail cadastrado"
class="input input-bordered input-primary w-full"
bind:value={email}
required
disabled={carregando}
/>
<label class="label">
<span class="label-text-alt text-base-content/60">
Use o e-mail cadastrado no sistema
</span>
</label>
</div>
<!-- E-mail -->
<div class="form-control">
<label class="label" for="email">
<span class="label-text font-semibold">E-mail</span>
<span class="label-text-alt text-error">*</span>
</label>
<input
id="email"
type="email"
placeholder="Digite seu e-mail cadastrado"
class="input input-bordered input-primary w-full"
bind:value={email}
required
disabled={carregando}
/>
<label class="label">
<span class="label-text-alt text-base-content/60">
Use o e-mail cadastrado no sistema
</span>
</label>
</div>
<!-- Botões -->
<div class="flex gap-4 justify-end mt-8">
<a href="/" class="btn btn-ghost" class:btn-disabled={carregando}>
<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="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Voltar
</a>
<button
type="submit"
class="btn btn-primary"
disabled={carregando}
>
{#if carregando}
<span class="loading loading-spinner loading-sm"></span>
Enviando...
{:else}
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Enviar Solicitação
{/if}
</button>
</div>
</form>
</div>
</div>
{:else}
<!-- Mensagem de Sucesso -->
<div class="card bg-success/10 shadow-xl border border-success/30">
<div class="card-body text-center">
<div class="flex justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<h2 class="text-2xl font-bold text-success mb-4">Solicitação Enviada!</h2>
<p class="text-base-content/70 mb-6">
Sua solicitação de recuperação de senha foi enviada para a equipe de TI.
Você receberá um contato em breve com as instruções para resetar sua senha.
</p>
<div class="flex gap-4 justify-center">
<a href="/" class="btn btn-primary">
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Voltar ao Dashboard
</a>
<button type="button" class="btn btn-ghost" onclick={() => solicitacaoEnviada = false}>
Enviar Nova Solicitação
</button>
</div>
</div>
</div>
{/if}
<!-- Botões -->
<div class="mt-8 flex justify-end gap-4">
<a href="/" class="btn" class:btn-disabled={carregando}>
<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="M10 19l-7-7m0 0l7-7m-7 7h18"
/>
</svg>
Voltar
</a>
<button type="submit" class="btn btn-primary" disabled={carregando}>
{#if carregando}
<span class="loading loading-spinner loading-sm"></span>
Enviando...
{:else}
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
Enviar Solicitação
{/if}
</button>
</div>
</form>
</div>
</div>
{:else}
<!-- Mensagem de Sucesso -->
<div class="card bg-success/10 border-success/30 border shadow-xl">
<div class="card-body text-center">
<div class="mb-4 flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-success h-24 w-24"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<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"
/>
</svg>
</div>
<h2 class="text-success mb-4 text-2xl font-bold">Solicitação Enviada!</h2>
<p class="text-base-content/70 mb-6">
Sua solicitação de recuperação de senha foi enviada para a equipe de TI. Você receberá um
contato em breve com as instruções para resetar sua senha.
</p>
<div class="flex justify-center gap-4">
<a href="/" class="btn btn-primary">
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
Voltar ao Dashboard
</a>
<button type="button" class="btn" onclick={() => (solicitacaoEnviada = false)}>
Enviar Nova Solicitação
</button>
</div>
</div>
</div>
{/if}
<!-- Card de Contato -->
<div class="mt-6 card bg-base-200 shadow-lg">
<div class="card-body">
<h3 class="card-title text-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
Precisa de Ajuda?
</h3>
<p class="text-sm text-base-content/70">
Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato diretamente com a equipe de TI:
</p>
<div class="mt-4 space-y-2">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span class="text-sm">ti@sgse.pe.gov.br</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<span class="text-sm">(81) 3183-8000</span>
</div>
</div>
</div>
</div>
<!-- Card de Contato -->
<div class="card bg-base-200 mt-6 shadow-lg">
<div class="card-body">
<h3 class="card-title text-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-info h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<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>
Precisa de Ajuda?
</h3>
<p class="text-base-content/70 text-sm">
Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato
diretamente com a equipe de TI:
</p>
<div class="mt-4 space-y-2">
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
<span class="text-sm">ti@sgse.pe.gov.br</span>
</div>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
<span class="text-sm">(81) 3183-8000</span>
</div>
</div>
</div>
</div>
</main>