refactor: update menu and routing for ticket management

- Replaced references to "Solicitar Acesso" with "Abrir Chamado" across the application for consistency in terminology.
- Updated routing logic to reflect the new ticket management flow, ensuring that the dashboard and sidebar components point to the correct paths.
- Removed the obsolete "Solicitar Acesso" page, streamlining the user experience and reducing unnecessary navigation options.
- Enhanced backend schema to support new ticket functionalities, including ticket creation and management.

apps/web/src/lib/components/MenuProtection.svelte

@@ -52,8 +52,8 @@
   });
 
   function verificarPermissoes() {
-    // Dashboard e Solicitar Acesso são públicos
-    if (menuPath === "/" || menuPath === "/solicitar-acesso") {
+    // Dashboard e abertura de chamados são públicos
+    if (menuPath === "/" || menuPath === "/abrir-chamado") {
       verificando = false;
       temPermissao = true;
       return;

apps/web/src/lib/components/Sidebar.svelte

@@ -376,11 +376,11 @@
 				{/each}
 				<li class="mt-auto rounded-xl">
 					<a
-						href={resolve('/solicitar-acesso')}
-						class={getSolicitarClasses(currentPath === '/solicitar-acesso')}
+						href={resolve('/abrir-chamado')}
+						class={getSolicitarClasses(currentPath === '/abrir-chamado')}
 					>
 						<UserPlus class="h-5 w-5" strokeWidth={2} />
-						<span>Solicitar acesso</span>
+						<span>Abrir Chamado</span>
 					</a>
 				</li>
 			</ul>
@@ -460,11 +460,11 @@
 					</div>
 					<div class="mt-4 space-y-2 text-center">
 						<a
-							href={resolve('/solicitar-acesso')}
+							href={resolve('/abrir-chamado')}
 							class="link link-primary block text-sm"
 							onclick={closeLoginModal}
 						>
-							Não tem acesso? Solicite aqui
+							Abrir Chamado
 						</a>
 						<a
 							href={resolve('/esqueci-senha')}

apps/web/src/lib/components/chamados/TicketCard.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { Doc, Id } from "@sgse-app/backend/convex/_generated/dataModel";
+  import {
+    corPrazo,
+    formatarData,
+    getStatusBadge,
+    getStatusDescription,
+    getStatusLabel,
+    prazoRestante,
+  } from "$lib/utils/chamados";
+  import { createEventDispatcher } from "svelte";
+
+  type Ticket = Doc<"tickets">;
+
+  interface Props {
+    ticket: Ticket;
+    selected?: boolean;
+  }
+
+const dispatch = createEventDispatcher<{ select: { ticketId: Id<"tickets"> } }>();
+const props = $props<Props>();
+const ticket = $derived(props.ticket);
+const selected = $derived(props.selected ?? false);
+
+  const prioridadeClasses: Record<string, string> = {
+    baixa: "badge badge-sm bg-base-200 text-base-content/70",
+    media: "badge badge-sm badge-info badge-outline",
+    alta: "badge badge-sm badge-warning",
+    critica: "badge badge-sm badge-error",
+  };
+
+  function handleSelect() {
+    dispatch("select", { ticketId: ticket._id });
+  }
+
+  function getPrazoBadges() {
+    const badges: Array<{ label: string; classe: string }> = [];
+    if (ticket.prazoResposta) {
+      const cor = corPrazo(ticket.prazoResposta);
+      badges.push({
+        label: `Resposta ${prazoRestante(ticket.prazoResposta) ?? ""}`,
+        classe: `badge badge-xs ${
+          cor === "error" ? "badge-error" : cor === "warning" ? "badge-warning" : "badge-success"
+        }`,
+      });
+    }
+    if (ticket.prazoConclusao) {
+      const cor = corPrazo(ticket.prazoConclusao);
+      badges.push({
+        label: `Conclusão ${prazoRestante(ticket.prazoConclusao) ?? ""}`,
+        classe: `badge badge-xs ${
+          cor === "error" ? "badge-error" : cor === "warning" ? "badge-warning" : "badge-success"
+        }`,
+      });
+    }
+    return badges;
+  }
+</script>
+
+<article
+  class={`rounded-2xl border p-4 transition-all duration-200 ${
+    selected
+      ? "border-primary bg-primary/5 shadow-lg"
+      : "border-base-200 bg-base-100/70 hover:border-primary/40 hover:shadow-md"
+  }`}
+>
+  <button class="w-full text-left" type="button" onclick={handleSelect}>
+    <div class="flex items-start justify-between gap-3">
+      <div>
+        <p class="text-xs uppercase tracking-wide text-base-content/50">
+          Ticket {ticket.numero}
+        </p>
+        <h3 class="text-lg font-semibold text-base-content">{ticket.titulo}</h3>
+      </div>
+      <span class={getStatusBadge(ticket.status)}>{getStatusLabel(ticket.status)}</span>
+    </div>
+
+    <p class="text-base-content/60 mt-2 text-sm line-clamp-2">{ticket.descricao}</p>
+
+    <div class="mt-3 flex flex-wrap items-center gap-2 text-xs text-base-content/60">
+      <span class={prioridadeClasses[ticket.prioridade] ?? "badge badge-sm"}>
+        Prioridade {ticket.prioridade}
+      </span>
+      <span class="badge badge-xs badge-outline">
+        {ticket.tipo.charAt(0).toUpperCase() + ticket.tipo.slice(1)}
+      </span>
+      {#if ticket.setorResponsavel}
+        <span class="badge badge-xs badge-outline badge-ghost">
+          {ticket.setorResponsavel}
+        </span>
+      {/if}
+    </div>
+
+    <div class="mt-4 space-y-1 text-xs text-base-content/50">
+      <p>
+        Última interação: {formatarData(ticket.ultimaInteracaoEm)}
+      </p>
+      <p>{getStatusDescription(ticket.status)}</p>
+      <div class="flex flex-wrap gap-2">
+        {#each getPrazoBadges() as badge (badge.label)}
+          <span class={badge.classe}>{badge.label}</span>
+        {/each}
+      </div>
+    </div>
+  </button>
+</article>
+

apps/web/src/lib/components/chamados/TicketForm.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  import type { Doc, Id } from "@sgse-app/backend/convex/_generated/dataModel";
+  import { createEventDispatcher } from "svelte";
+
+  type SlaConfig = Doc<"slaConfigs">;
+
+  interface FormValues {
+    titulo: string;
+    descricao: string;
+    tipo: Doc<"tickets">["tipo"];
+    prioridade: Doc<"tickets">["prioridade"];
+    categoria: string;
+    slaConfigId?: Id<"slaConfigs">;
+    canalOrigem?: string;
+    anexos: File[];
+  }
+
+interface Props {
+  slaConfigs?: Array<SlaConfig>;
+  loading?: boolean;
+}
+
+const dispatch = createEventDispatcher<{ submit: { values: FormValues } }>();
+const props = $props<Props>();
+const slaConfigs = $derived<Array<SlaConfig>>(props.slaConfigs ?? []);
+const loading = $derived(props.loading ?? false);
+
+  let titulo = $state("");
+  let descricao = $state("");
+  let tipo = $state<Doc<"tickets">["tipo"]>("chamado");
+  let prioridade = $state<Doc<"tickets">["prioridade"]>("media");
+  let categoria = $state("");
+let slaConfigId = $state<Id<"slaConfigs"> | "">("");
+  let canalOrigem = $state("Portal SGSE");
+  let anexos = $state<Array<File>>([]);
+  let errors = $state<Record<string, string>>({});
+  function validate(): boolean {
+    const novoErros: Record<string, string> = {};
+    if (!titulo.trim()) novoErros.titulo = "Informe um título para o chamado.";
+    if (!descricao.trim()) novoErros.descricao = "Descrição é obrigatória.";
+    if (!categoria.trim()) novoErros.categoria = "Informe uma categoria.";
+    errors = novoErros;
+    return Object.keys(novoErros).length === 0;
+  }
+
+  function handleFiles(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const files = Array.from(target.files ?? []);
+    anexos = files.slice(0, 5); // limitar para 5 anexos
+  }
+
+  function removeFile(index: number) {
+    anexos = anexos.filter((_, idx) => idx !== index);
+  }
+
+  function resetForm() {
+    titulo = "";
+    descricao = "";
+    categoria = "";
+    tipo = "chamado";
+    prioridade = "media";
+    anexos = [];
+    errors = {};
+  }
+
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    if (!validate()) return;
+
+    const slaSelecionada =
+      (slaConfigId && slaConfigId !== "" ? (slaConfigId as Id<"slaConfigs">) : slaConfigs[0]?._id) ??
+      undefined;
+
+    dispatch("submit", {
+      values: {
+        titulo: titulo.trim(),
+        descricao: descricao.trim(),
+        tipo,
+        prioridade,
+        categoria: categoria.trim(),
+        slaConfigId: slaSelecionada,
+        canalOrigem,
+        anexos,
+      },
+    });
+  }
+</script>
+
+<form class="space-y-8" onsubmit={handleSubmit}>
+  <section class="grid gap-6 md:grid-cols-2">
+    <div class="form-control md:col-span-2">
+      <label class="label">
+        <span class="label-text font-semibold">Título do chamado</span>
+      </label>
+      <input
+        type="text"
+        class="input input-bordered input-primary w-full"
+        placeholder="Ex: Erro ao acessar o módulo de licitações"
+        bind:value={titulo}
+      />
+      {#if errors.titulo}
+        <span class="text-error mt-1 text-sm">{errors.titulo}</span>
+      {/if}
+    </div>
+
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text font-semibold">Tipo de solicitação</span>
+      </label>
+      <div class="grid gap-2">
+        {#each ["chamado", "reclamacao", "elogio", "sugestao"] as opcao}
+          <label class="btn btn-outline btn-sm justify-start gap-2">
+            <input
+              type="radio"
+              name="tipo"
+              class="radio radio-primary"
+              value={opcao}
+              checked={tipo === opcao}
+              onclick={() => (tipo = opcao as typeof tipo)}
+            />
+            {opcao.charAt(0).toUpperCase() + opcao.slice(1)}
+          </label>
+        {/each}
+      </div>
+    </div>
+
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text font-semibold">Prioridade</span>
+      </label>
+      <select class="select select-bordered w-full" bind:value={prioridade}>
+        <option value="baixa">Baixa</option>
+        <option value="media">Média</option>
+        <option value="alta">Alta</option>
+        <option value="critica">Crítica</option>
+      </select>
+    </div>
+
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text font-semibold">Categoria</span>
+      </label>
+      <input
+        type="text"
+        class="input input-bordered w-full"
+        placeholder="Ex: Infraestrutura, Sistemas, Acesso"
+        bind:value={categoria}
+      />
+      {#if errors.categoria}
+        <span class="text-error mt-1 text-sm">{errors.categoria}</span>
+      {/if}
+    </div>
+
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text font-semibold">Configuração de SLA</span>
+      </label>
+      <select class="select select-bordered w-full" bind:value={slaConfigId}>
+        {#each slaConfigs as sla (sla._id)}
+          <option value={sla._id}>
+            {sla.nome} • Resp. {sla.tempoRespostaHoras}h • Conc.
+            {sla.tempoConclusaoHoras}h
+          </option>
+        {:else}
+          <option value="">Padrão (24h)</option>
+        {/each}
+      </select>
+    </div>
+  </section>
+
+  <section class="form-control">
+    <label class="label">
+      <span class="label-text font-semibold">Descrição detalhada</span>
+    </label>
+    <textarea
+      class="textarea textarea-bordered textarea-lg min-h-[180px]"
+      placeholder="Descreva o problema, erro ou sugestão com o máximo de detalhes possível."
+      bind:value={descricao}
+    ></textarea>
+    {#if errors.descricao}
+      <span class="text-error mt-1 text-sm">{errors.descricao}</span>
+    {/if}
+  </section>
+
+  <section class="space-y-4">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="font-semibold text-base-content">Anexos (opcional)</p>
+        <p class="text-base-content/60 text-sm">
+          Suporte a PDF e imagens (máx. 10MB por arquivo)
+        </p>
+      </div>
+      <label class="btn btn-outline btn-sm">
+        Selecionar arquivos
+        <input type="file" class="hidden" multiple accept=".pdf,.png,.jpg,.jpeg" onchange={handleFiles} />
+      </label>
+    </div>
+
+    {#if anexos.length > 0}
+      <div class="space-y-2 rounded-2xl border border-base-200 bg-base-100/70 p-4">
+        {#each anexos as file, index (file.name + index)}
+          <div class="flex items-center justify-between gap-3 rounded-xl border border-base-200 bg-base-100 px-3 py-2">
+            <div>
+              <p class="text-sm font-medium">{file.name}</p>
+              <p class="text-xs text-base-content/60">
+                {(file.size / 1024 / 1024).toFixed(2)} MB • {file.type}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="btn btn-ghost btn-sm text-error"
+              onclick={() => removeFile(index)}
+            >
+              Remover
+            </button>
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="rounded-2xl border border-dashed border-base-300 bg-base-100/50 p-6 text-center text-sm text-base-content/60">
+        Nenhum arquivo selecionado.
+      </div>
+    {/if}
+  </section>
+
+  <section class="flex flex-wrap gap-3">
+    <button
+      type="submit"
+      class="btn btn-primary flex-1 min-w-[200px]"
+      disabled={loading}
+    >
+      {#if loading}
+        <span class="loading loading-spinner loading-sm"></span>
+        Enviando...
+      {:else}
+        Registrar chamado
+      {/if}
+    </button>
+    <button
+      type="button"
+      class="btn btn-ghost"
+      onclick={resetForm}
+      disabled={loading}
+    >
+      Limpar
+    </button>
+  </section>
+</form>
+

apps/web/src/lib/components/chamados/TicketTimeline.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Doc } from "@sgse-app/backend/convex/_generated/dataModel";
+  import {
+    formatarData,
+    formatarTimelineEtapa,
+    prazoRestante,
+    timelineStatus,
+  } from "$lib/utils/chamados";
+
+  type Ticket = Doc<"tickets">;
+  type TimelineEntry = NonNullable<Ticket["timeline"]>[number];
+
+interface Props {
+  timeline?: Array<TimelineEntry>;
+}
+
+const props = $props<Props>();
+const timeline = $derived<Array<TimelineEntry>>(props.timeline ?? []);
+
+  const badgeClasses: Record<string, string> = {
+    success: "bg-success/20 text-success border-success/40",
+    warning: "bg-warning/20 text-warning border-warning/40",
+    error: "bg-error/20 text-error border-error/40",
+    info: "bg-info/20 text-info border-info/40",
+  };
+
+  function getBadgeClass(entry: TimelineEntry) {
+    const status = timelineStatus(entry);
+    return badgeClasses[status] ?? badgeClasses.info;
+  }
+
+  function getStatusLabel(entry: TimelineEntry) {
+    if (entry.status === "concluido") return "Concluído";
+    if (entry.status === "em_andamento") return "Em andamento";
+    if (entry.status === "vencido") return "Vencido";
+    return "Pendente";
+  }
+
+  function getPrazoDescricao(entry: TimelineEntry) {
+    if (entry.status === "concluido" && entry.concluidoEm) {
+      return `Concluído em ${formatarData(entry.concluidoEm)}`;
+    }
+    if (!entry.prazo) return "Sem prazo definido";
+    return `${formatarData(entry.prazo)} • ${prazoRestante(entry.prazo) ?? ""}`;
+  }
+</script>
+
+<div class="space-y-4">
+  {#if timeline.length === 0}
+    <div class="alert alert-info">
+      <span>Nenhuma etapa registrada ainda.</span>
+    </div>
+  {:else}
+    {#each timeline as entry (entry.etapa + entry.prazo)}
+      <div class="flex gap-3">
+        <div class="relative flex flex-col items-center">
+          <div class={`badge border ${getBadgeClass(entry)}`}>
+            {formatarTimelineEtapa(entry.etapa)}
+          </div>
+          {#if entry !== timeline[timeline.length - 1]}
+            <div class="bg-base-200/80 mt-2 h-full w-px flex-1"></div>
+          {/if}
+        </div>
+        <div class="flex-1 rounded-2xl border border-base-200 bg-base-100/80 p-4 shadow-sm">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="text-sm font-semibold text-base-content">
+              {getStatusLabel(entry)}
+            </span>
+            {#if entry.status !== "concluido" && entry.prazo}
+              <span class="badge badge-sm badge-outline">
+                {prazoRestante(entry.prazo)}
+              </span>
+            {/if}
+          </div>
+          {#if entry.observacao}
+            <p class="text-base-content/70 mt-2 text-sm">{entry.observacao}</p>
+          {/if}
+          <p class="text-base-content/50 mt-3 text-xs uppercase tracking-wide">
+            {getPrazoDescricao(entry)}
+          </p>
+        </div>
+      </div>
+    {/each}
+  {/if}
+</div>
+

apps/web/src/lib/stores/chamados.ts

@@ -0,0 +1,53 @@
+import { writable } from "svelte/store";
+import type { Doc, Id } from "@sgse-app/backend/convex/_generated/dataModel";
+
+export type TicketDetalhe = {
+  ticket: Doc<"tickets">;
+  interactions: Doc<"ticketInteractions">[];
+};
+
+function createChamadosStore() {
+  const tickets = writable<Array<Doc<"tickets">>>([]);
+  const detalhes = writable<Record<string, TicketDetalhe>>({});
+  const carregando = writable(false);
+
+  function setTickets(lista: Array<Doc<"tickets">>) {
+    tickets.set(lista);
+  }
+
+  function upsertTicket(ticket: Doc<"tickets">) {
+    tickets.update((current) => {
+      const existente = current.findIndex((t) => t._id === ticket._id);
+      if (existente >= 0) {
+        const copia = [...current];
+        copia[existente] = ticket;
+        return copia;
+      }
+      return [ticket, ...current];
+    });
+  }
+
+  function setDetalhe(ticketId: Id<"tickets">, detalhe: TicketDetalhe) {
+    detalhes.update((mapa) => ({
+      ...mapa,
+      [ticketId]: detalhe,
+    }));
+  }
+
+  function setCarregando(flag: boolean) {
+    carregando.set(flag);
+  }
+
+  return {
+    tickets,
+    detalhes,
+    carregando,
+    setTickets,
+    upsertTicket,
+    setDetalhe,
+    setCarregando,
+  };
+}
+
+export const chamadosStore = createChamadosStore();
+

apps/web/src/lib/utils/chamados.ts

@@ -0,0 +1,123 @@
+import type { Doc } from "@sgse-app/backend/convex/_generated/dataModel";
+
+type Ticket = Doc<"tickets">;
+type TicketStatus = Ticket["status"];
+type TimelineEntry = NonNullable<Ticket["timeline"]>[number];
+
+const UM_DIA_MS = 24 * 60 * 60 * 1000;
+
+const statusConfig: Record<
+  TicketStatus,
+  {
+    label: string;
+    badge: string;
+    description: string;
+  }
+> = {
+  aberto: {
+    label: "Aberto",
+    badge: "badge badge-info badge-outline",
+    description: "Chamado recebido e aguardando triagem.",
+  },
+  em_andamento: {
+    label: "Em andamento",
+    badge: "badge badge-primary",
+    description: "Equipe de TI trabalhando no chamado.",
+  },
+  aguardando_usuario: {
+    label: "Aguardando usuário",
+    badge: "badge badge-warning",
+    description: "Aguardando retorno ou aprovação do solicitante.",
+  },
+  resolvido: {
+    label: "Resolvido",
+    badge: "badge badge-success badge-outline",
+    description: "Solução aplicada, aguardando confirmação.",
+  },
+  encerrado: {
+    label: "Encerrado",
+    badge: "badge badge-success",
+    description: "Chamado finalizado.",
+  },
+  cancelado: {
+    label: "Cancelado",
+    badge: "badge badge-neutral",
+    description: "Chamado cancelado.",
+  },
+};
+
+export function getStatusLabel(status: TicketStatus): string {
+  return statusConfig[status]?.label ?? status;
+}
+
+export function getStatusBadge(status: TicketStatus): string {
+  return statusConfig[status]?.badge ?? "badge";
+}
+
+export function getStatusDescription(status: TicketStatus): string {
+  return statusConfig[status]?.description ?? "";
+}
+
+export function formatarData(timestamp?: number | null) {
+  if (!timestamp) return "--";
+  return new Date(timestamp).toLocaleString("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function prazoRestante(timestamp?: number | null) {
+  if (!timestamp) return null;
+  const diff = timestamp - Date.now();
+  const dias = Math.floor(diff / UM_DIA_MS);
+  const horas = Math.floor((diff % UM_DIA_MS) / (60 * 60 * 1000));
+
+  if (diff < 0) {
+    return `Vencido há ${Math.abs(dias)}d ${Math.abs(horas)}h`;
+  }
+
+  if (dias === 0 && horas >= 0) {
+    return `Vence em ${horas}h`;
+  }
+
+  return `Vence em ${dias}d ${Math.abs(horas)}h`;
+}
+
+export function corPrazo(timestamp?: number | null) {
+  if (!timestamp) return "info";
+  const diff = timestamp - Date.now();
+  if (diff < 0) return "error";
+  if (diff <= UM_DIA_MS) return "warning";
+  return "success";
+}
+
+export function timelineStatus(entry: TimelineEntry) {
+  if (entry.status === "concluido") {
+    return "success";
+  }
+  if (!entry.prazo) {
+    return "info";
+  }
+  const diff = entry.prazo - Date.now();
+  if (diff < 0) {
+    return "error";
+  }
+  if (diff <= UM_DIA_MS) {
+    return "warning";
+  }
+  return "info";
+}
+
+export function formatarTimelineEtapa(etapa: string) {
+  const mapa: Record<string, string> = {
+    abertura: "Registro",
+    resposta_inicial: "Resposta inicial",
+    conclusao: "Conclusão",
+    encerramento: "Encerramento",
+  };
+
+  return mapa[etapa] ?? etapa;
+}
+