feat: add required field validation and error handling in file upload component

- Introduced a `required` prop in the `FileUpload` component to enforce mandatory file uploads.
- Enhanced error handling by implementing a modal for displaying error messages related to missing required fields and upload issues.
- Updated the `+page.svelte` file to integrate the new error modal and improve user feedback during form submissions.
- Ensured that all relevant file upload sections now validate the presence of documents before allowing form submission.

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  interface Props {
+    open: boolean;
+    title?: string;
+    message: string;
+    details?: string;
+    onClose: () => void;
+  }
+
+  let {
+    open = $bindable(false),
+    title = "Erro",
+    message,
+    details,
+    onClose,
+  }: Props = $props();
+</script>
+
+{#if open}
+  <div class="modal modal-open">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg text-error mb-4 flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        {title}
+      </h3>
+      <p class="py-4 text-base-content">{message}</p>
+      {#if details}
+        <div class="bg-base-200 rounded-lg p-3 mb-4">
+          <p class="text-sm text-base-content/70 font-mono">{details}</p>
+        </div>
+      {/if}
+      <div class="modal-action">
+        <button class="btn btn-primary" onclick={() => { open = false; onClose(); }}>
+          Fechar
+        </button>
+      </div>
+    </div>
+    <div class="modal-backdrop" onclick={() => { open = false; onClose(); }}></div>
+  </div>
+{/if}
+

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

@@ -6,6 +6,7 @@
     helpUrl?: string;
     value?: string; // storageId
     disabled?: boolean;
+    required?: boolean;
     onUpload: (file: File) => Promise<void>;
     onRemove: () => Promise<void>;
   }
@@ -15,6 +16,7 @@
     helpUrl,
     value = $bindable(),
     disabled = false,
+    required = false,
     onUpload,
     onRemove,
   }: Props = $props();
@@ -145,6 +147,9 @@
   <label class="label" for="file-upload-input">
     <span class="label-text font-medium flex items-center gap-2">
       {label}
+      {#if required}
+        <span class="text-error">*</span>
+      {/if}
       {#if helpUrl}
         <div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
           <a 

apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte

@@ -5,6 +5,7 @@
   import { toast } from "svelte-sonner";
   import FuncionarioSelect from "$lib/components/FuncionarioSelect.svelte";
   import FileUpload from "$lib/components/FileUpload.svelte";
+  import ErrorModal from "$lib/components/ErrorModal.svelte";
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
 
   const client = useConvexClient();
@@ -74,6 +75,14 @@
   let salvandoMaternidade = $state(false);
   let salvandoPaternidade = $state(false);
 
+  // Modal de erro
+  let erroModal = $state({
+    aberto: false,
+    titulo: "",
+    mensagem: "",
+    detalhes: "",
+  });
+
   // Licenças maternidade para prorrogação (derivar dos dados já carregados)
   const licencasMaternidade = $derived.by(() => {
     const dados = dadosQuery?.data;
@@ -114,10 +123,33 @@
     }
   }
 
+  // Função para mostrar erro em modal
+  function mostrarErro(titulo: string, mensagem: string, detalhes?: string) {
+    erroModal = {
+      aberto: true,
+      titulo,
+      mensagem,
+      detalhes: detalhes || "",
+    };
+  }
+
   // Salvar Atestado Médico
   async function salvarAtestadoMedico() {
     if (!atestadoMedico.funcionarioId || !atestadoMedico.dataInicio || !atestadoMedico.dataFim || !atestadoMedico.cid) {
-      toast.error("Preencha todos os campos obrigatórios");
+      mostrarErro(
+        "Campos obrigatórios",
+        "Preencha todos os campos obrigatórios antes de salvar.",
+        "Campos obrigatórios: Funcionário, Data Início, Data Fim e CID"
+      );
+      return;
+    }
+
+    if (!atestadoMedico.documentoId) {
+      mostrarErro(
+        "Documento obrigatório",
+        "É necessário anexar o documento do atestado médico.",
+        "Por favor, faça o upload do arquivo PDF ou imagem do atestado antes de salvar."
+      );
       return;
     }
 
@@ -129,14 +161,16 @@
         dataFim: atestadoMedico.dataFim,
         cid: atestadoMedico.cid,
         observacoes: atestadoMedico.observacoes || undefined,
-        documentoId: atestadoMedico.documentoId as Id<"_storage"> | undefined,
+        documentoId: atestadoMedico.documentoId as Id<"_storage">,
       });
 
       toast.success("Atestado médico registrado com sucesso!");
       resetarFormularioAtestado();
       abaAtiva = "dashboard";
     } catch (error: any) {
-      toast.error(error?.message || "Erro ao registrar atestado");
+      const mensagemErro = error?.message || "Erro ao registrar atestado";
+      const detalhesErro = error?.data?.message || error?.toString() || "";
+      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
     } finally {
       salvandoAtestado = false;
     }
@@ -145,7 +179,20 @@
   // Salvar Declaração
   async function salvarDeclaracao() {
     if (!declaracao.funcionarioId || !declaracao.dataInicio || !declaracao.dataFim) {
-      toast.error("Preencha todos os campos obrigatórios");
+      mostrarErro(
+        "Campos obrigatórios",
+        "Preencha todos os campos obrigatórios antes de salvar.",
+        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
+      );
+      return;
+    }
+
+    if (!declaracao.documentoId) {
+      mostrarErro(
+        "Documento obrigatório",
+        "É necessário anexar o documento da declaração.",
+        "Por favor, faça o upload do arquivo PDF ou imagem da declaração antes de salvar."
+      );
       return;
     }
 
@@ -156,14 +203,16 @@
         dataInicio: declaracao.dataInicio,
         dataFim: declaracao.dataFim,
         observacoes: declaracao.observacoes || undefined,
-        documentoId: declaracao.documentoId as Id<"_storage"> | undefined,
+        documentoId: declaracao.documentoId as Id<"_storage">,
       });
 
       toast.success("Declaração registrada com sucesso!");
       resetarFormularioDeclaracao();
       abaAtiva = "dashboard";
     } catch (error: any) {
-      toast.error(error?.message || "Erro ao registrar declaração");
+      const mensagemErro = error?.message || "Erro ao registrar declaração";
+      const detalhesErro = error?.data?.message || error?.toString() || "";
+      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
     } finally {
       salvandoDeclaracao = false;
     }
@@ -172,12 +221,29 @@
   // Salvar Licença Maternidade
   async function salvarLicencaMaternidade() {
     if (!licencaMaternidade.funcionarioId || !licencaMaternidade.dataInicio || !licencaMaternidade.dataFim) {
-      toast.error("Preencha todos os campos obrigatórios");
+      mostrarErro(
+        "Campos obrigatórios",
+        "Preencha todos os campos obrigatórios antes de salvar.",
+        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
+      );
       return;
     }
 
     if (licencaMaternidade.ehProrrogacao && !licencaMaternidade.licencaOriginalId) {
-      toast.error("Selecione a licença original para prorrogação");
+      mostrarErro(
+        "Licença original obrigatória",
+        "Para prorrogações, é necessário selecionar a licença original.",
+        "Selecione a licença de maternidade original no campo 'Licença Original'."
+      );
+      return;
+    }
+
+    if (!licencaMaternidade.documentoId) {
+      mostrarErro(
+        "Documento obrigatório",
+        "É necessário anexar o documento da licença de maternidade.",
+        "Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
+      );
       return;
     }
 
@@ -188,7 +254,7 @@
         dataInicio: licencaMaternidade.dataInicio,
         dataFim: licencaMaternidade.dataFim,
         observacoes: licencaMaternidade.observacoes || undefined,
-        documentoId: licencaMaternidade.documentoId as Id<"_storage"> | undefined,
+        documentoId: licencaMaternidade.documentoId as Id<"_storage">,
         licencaOriginalId: licencaMaternidade.licencaOriginalId as Id<"licencas"> | undefined,
       });
 
@@ -196,7 +262,9 @@
       resetarFormularioMaternidade();
       abaAtiva = "dashboard";
     } catch (error: any) {
-      toast.error(error?.message || "Erro ao registrar licença");
+      const mensagemErro = error?.message || "Erro ao registrar licença";
+      const detalhesErro = error?.data?.message || error?.toString() || "";
+      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
     } finally {
       salvandoMaternidade = false;
     }
@@ -205,7 +273,20 @@
   // Salvar Licença Paternidade
   async function salvarLicencaPaternidade() {
     if (!licencaPaternidade.funcionarioId || !licencaPaternidade.dataInicio || !licencaPaternidade.dataFim) {
-      toast.error("Preencha todos os campos obrigatórios");
+      mostrarErro(
+        "Campos obrigatórios",
+        "Preencha todos os campos obrigatórios antes de salvar.",
+        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
+      );
+      return;
+    }
+
+    if (!licencaPaternidade.documentoId) {
+      mostrarErro(
+        "Documento obrigatório",
+        "É necessário anexar o documento da licença de paternidade.",
+        "Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
+      );
       return;
     }
 
@@ -216,14 +297,16 @@
         dataInicio: licencaPaternidade.dataInicio,
         dataFim: licencaPaternidade.dataFim,
         observacoes: licencaPaternidade.observacoes || undefined,
-        documentoId: licencaPaternidade.documentoId as Id<"_storage"> | undefined,
+        documentoId: licencaPaternidade.documentoId as Id<"_storage">,
       });
 
       toast.success("Licença paternidade registrada com sucesso!");
       resetarFormularioPaternidade();
       abaAtiva = "dashboard";
     } catch (error: any) {
-      toast.error(error?.message || "Erro ao registrar licença");
+      const mensagemErro = error?.message || "Erro ao registrar licença";
+      const detalhesErro = error?.data?.message || error?.toString() || "";
+      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
     } finally {
       salvandoPaternidade = false;
     }
@@ -1220,6 +1303,7 @@
             <FileUpload
               label="Anexar Atestado (PDF ou Imagem)"
               bind:value={atestadoMedico.documentoId}
+              required={true}
               onUpload={async (file) => {
                 atestadoMedico.documentoId = await handleDocumentoUpload(
                   file
@@ -1305,6 +1389,7 @@
             <FileUpload
               label="Anexar Documento (PDF ou Imagem)"
               bind:value={declaracao.documentoId}
+              required={true}
               onUpload={async (file) => {
                 declaracao.documentoId = await handleDocumentoUpload(file);
               }}
@@ -1424,6 +1509,7 @@
             <FileUpload
               label="Anexar Documento (PDF ou Imagem)"
               bind:value={licencaMaternidade.documentoId}
+              required={true}
               onUpload={async (file) => {
                 licencaMaternidade.documentoId = await handleDocumentoUpload(
                   file
@@ -1512,6 +1598,7 @@
             <FileUpload
               label="Anexar Documento (PDF ou Imagem)"
               bind:value={licencaPaternidade.documentoId}
+              required={true}
               onUpload={async (file) => {
                 licencaPaternidade.documentoId = await handleDocumentoUpload(
                   file
@@ -1560,3 +1647,14 @@
   {/if}
 </main>
 
+<!-- Modal de Erro -->
+<ErrorModal
+  bind:open={erroModal.aberto}
+  title={erroModal.titulo}
+  message={erroModal.mensagem}
+  details={erroModal.detalhes}
+  onClose={() => {
+    erroModal.aberto = false;
+  }}
+/>
+