deyvisonwanderley
71550874ce
- Changed all instances of "Sistema de Gerenciamento da Secretaria de Esportes" to "Sistema de Gerenciamento de Secretaria" for a more concise branding. - Enhanced the PrintModal component with a user-friendly interface for selecting sections to include in PDF generation. - Improved error handling and user feedback during PDF generation processes. - Updated various components and routes to reflect the new branding, ensuring consistency across the application.
239 lines
8.3 KiB
Svelte
239 lines
8.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { useConvexClient } from "convex-svelte";
|
|
import { api } from "@sgse-app/backend/convex/_generated/api";
|
|
import type { Doc, Id } from "@sgse-app/backend/convex/_generated/dataModel";
|
|
import TicketForm from "$lib/components/chamados/TicketForm.svelte";
|
|
import TicketTimeline from "$lib/components/chamados/TicketTimeline.svelte";
|
|
import { chamadosStore } from "$lib/stores/chamados";
|
|
import { resolve } from "$app/paths";
|
|
import { useConvexWithAuth } from "$lib/hooks/useConvexWithAuth";
|
|
|
|
type Ticket = Doc<"tickets">;
|
|
|
|
const client = useConvexClient();
|
|
|
|
let submitLoading = $state(false);
|
|
let resetSignal = $state(0);
|
|
let feedback = $state<{ tipo: "success" | "error"; mensagem: string; numero?: string } | null>(
|
|
null,
|
|
);
|
|
|
|
const exemploTimeline = $state<NonNullable<Ticket["timeline"]>>([
|
|
{
|
|
etapa: "abertura",
|
|
status: "concluido",
|
|
prazo: Date.now(),
|
|
concluidoEm: Date.now(),
|
|
observacao: "Chamado criado",
|
|
},
|
|
{
|
|
etapa: "resposta_inicial",
|
|
status: "pendente",
|
|
prazo: Date.now() + 4 * 60 * 60 * 1000,
|
|
},
|
|
{
|
|
etapa: "conclusao",
|
|
status: "pendente",
|
|
prazo: Date.now() + 24 * 60 * 60 * 1000,
|
|
},
|
|
]);
|
|
|
|
$effect(() => {
|
|
// Garante que o cliente Convex use o token do usuário logado
|
|
useConvexWithAuth();
|
|
});
|
|
|
|
async function uploadArquivo(file: File) {
|
|
const uploadUrl = await client.mutation(api.chamados.generateUploadUrl, {});
|
|
|
|
const response = await fetch(uploadUrl, {
|
|
method: "POST",
|
|
headers: { "Content-Type": file.type },
|
|
body: file,
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!data?.storageId) {
|
|
throw new Error("Falha ao enviar arquivo. Tente novamente.");
|
|
}
|
|
|
|
return {
|
|
arquivoId: data.storageId as Id<"_storage">,
|
|
nome: file.name,
|
|
tipo: file.type,
|
|
tamanho: file.size,
|
|
};
|
|
}
|
|
|
|
async function handleSubmit(event: CustomEvent<{ values: any }>) {
|
|
const { values } = event.detail;
|
|
try {
|
|
submitLoading = true;
|
|
feedback = null;
|
|
|
|
const anexos = [];
|
|
for (const file of values.anexos ?? []) {
|
|
const uploaded = await uploadArquivo(file);
|
|
anexos.push(uploaded);
|
|
}
|
|
|
|
const resultado = await client.mutation(api.chamados.abrirChamado, {
|
|
titulo: values.titulo,
|
|
descricao: values.descricao,
|
|
tipo: values.tipo,
|
|
categoria: values.categoria,
|
|
prioridade: values.prioridade,
|
|
canalOrigem: values.canalOrigem,
|
|
anexos,
|
|
});
|
|
|
|
feedback = {
|
|
tipo: "success",
|
|
mensagem: "Chamado registrado com sucesso! Você pode acompanhar pelo seu perfil.",
|
|
numero: resultado.numero,
|
|
};
|
|
resetSignal = resetSignal + 1;
|
|
|
|
// Atualizar store local
|
|
const novoTicket = await client.query(api.chamados.obterChamado, {
|
|
ticketId: resultado.ticketId,
|
|
});
|
|
if (novoTicket?.ticket) {
|
|
chamadosStore.upsertTicket(novoTicket.ticket);
|
|
chamadosStore.setDetalhe(resultado.ticketId, novoTicket);
|
|
}
|
|
} catch (error) {
|
|
const mensagem =
|
|
error instanceof Error ? error.message : "Erro ao enviar o chamado. Tente novamente.";
|
|
feedback = {
|
|
tipo: "error",
|
|
mensagem,
|
|
};
|
|
} finally {
|
|
submitLoading = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<main class="mx-auto w-full max-w-6xl space-y-10 px-4 py-8">
|
|
<section
|
|
class="relative overflow-hidden rounded-3xl border border-primary/30 bg-linear-to-br from-primary/10 via-base-100 to-secondary/20 p-10 shadow-2xl"
|
|
>
|
|
<div class="absolute -left-16 top-0 h-52 w-52 rounded-full bg-primary/20 blur-3xl"></div>
|
|
<div class="absolute -bottom-20 right-0 h-64 w-64 rounded-full bg-secondary/20 blur-3xl"></div>
|
|
|
|
<div class="relative z-10 space-y-4">
|
|
<span
|
|
class="inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-primary"
|
|
>
|
|
Central de Chamados
|
|
</span>
|
|
<div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
|
|
<div class="max-w-3xl space-y-4">
|
|
<h1 class="text-4xl font-black leading-tight text-base-content sm:text-5xl">
|
|
Abrir novo chamado
|
|
</h1>
|
|
<p class="text-base text-base-content/70 sm:text-lg">
|
|
Registre reclamações, sugestões, elogios ou chamados técnicos. Toda interação gera
|
|
notificações automáticas via e-mail e chat com a assinatura do SGSE - Sistema de Gerenciamento de Secretaria.
|
|
</p>
|
|
<div class="flex flex-wrap gap-3 text-sm text-base-content/70">
|
|
<span class="badge badge-success badge-sm">Resposta ágil</span>
|
|
<span class="badge badge-info badge-sm">Timeline com SLA</span>
|
|
<span class="badge badge-warning badge-sm">Alertas de vencimento</span>
|
|
</div>
|
|
</div>
|
|
<a href={resolve("/perfil/chamados")} class="btn btn-outline btn-sm">
|
|
Acompanhar meus chamados
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{#if feedback}
|
|
<div class={`alert ${feedback.tipo === "success" ? "alert-success" : "alert-error"} shadow-lg`}>
|
|
<div>
|
|
<span class="font-semibold">{feedback.mensagem}</span>
|
|
{#if feedback.numero}
|
|
<p class="text-sm">Número do ticket: {feedback.numero}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="grid gap-8 lg:grid-cols-3">
|
|
<div class="lg:col-span-2">
|
|
<div class="rounded-3xl border-2 border-primary/20 bg-gradient-to-br from-base-100 via-base-100/95 to-primary/5 p-8 shadow-xl">
|
|
<div class="mb-6 flex items-center gap-3">
|
|
<div class="rounded-xl bg-primary/10 p-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 text-primary"
|
|
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>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-base-content">Formulário</h2>
|
|
<p class="text-sm text-base-content/60">
|
|
Informe os detalhes para que nossa equipe possa priorizar o atendimento.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
{#if resetSignal % 2 === 0}
|
|
<TicketForm loading={submitLoading} on:submit={handleSubmit} />
|
|
{:else}
|
|
<TicketForm loading={submitLoading} on:submit={handleSubmit} />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="space-y-6">
|
|
<div class="rounded-3xl border-2 border-info/20 bg-gradient-to-br from-base-100 via-base-100/95 to-info/5 p-6 shadow-lg">
|
|
<div class="mb-4 flex items-center gap-3">
|
|
<div class="rounded-xl bg-info/10 p-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 text-info"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-base-content">Como funciona a timeline</h3>
|
|
</div>
|
|
<div class="mb-4 space-y-2 rounded-xl bg-base-200/50 p-4">
|
|
<p class="text-sm font-medium text-base-content/80">
|
|
Todas as etapas do ticket são monitoradas automaticamente.
|
|
</p>
|
|
<p class="text-xs text-base-content/60">
|
|
Os prazos mudam de cor conforme o SLA: <span class="text-success">dentro do prazo</span>, <span class="text-warning">próximo ao vencimento</span> ou <span class="text-error">vencido</span>.
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl border border-base-300 bg-base-100/80 p-4">
|
|
<TicketTimeline timeline={exemploTimeline} />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
|