fix: envio de formulário e validações

frontend/src/components/forms/ExpenseForm/index.jsx

@@ -3,7 +3,7 @@
 import ButtonUI from '../../ui/Button';
 import CustomSplitAmount from './CustomSplitAmount';
 import { useFormExpense } from './useForm';
 import { useEffect, useState, useCallback, useMemo } from 'react';
 import { customToast } from '../../CustomToast';
 import Modal from '../../Modal';
 import ListMembers from './ListMembers';
@@ -11,6 +11,7 @@
 
 import { useCreateExpenseMutation } from '../../../hooks/ReactQuery/Mutations/useCreateExpenseMutation';
 import { useMembersQuery } from '../../../hooks/ReactQuery/Queries/useMembersQuery';
+import { validatorCreateNewExpense } from '../../../schemas/createNewExpense/form';
 
 export default function ExpenseForm({ groupData: group }) {
   const [search, setSearch] = useState(''); // termo final para API
@@ -50,8 +51,6 @@
         );
       }
 
-      setIsSubmitting(true);
-
       try {
         const formData = new FormData(e.target);
         const formValues = Object.fromEntries(formData);
@@ -70,18 +69,22 @@
           ),
         };
 
-        await useExpenseMutation.mutateAsync(expenseData, {
-          onSuccess: () =>
-            customToast(
-              'Nova despesa',
-              'Despesa adicionada com sucesso!',
-              'success'
-            ),
-          onError: ({ response: { data: error } }) => {
-            customToast(error.title, error.message, 'error');
-          },
-          onSettled: () => setIsSubmitting(false),
-        });
+        if (validatorCreateNewExpense(expenseData)) {
+          setIsSubmitting(true);
+
+          await useExpenseMutation.mutateAsync(expenseData, {
+            onSuccess: () =>
+              customToast(
+                'Nova despesa',
+                'Despesa adicionada com sucesso!',
+                'success'
+              ),
+            onError: ({ response: { data: error } }) => {
+              customToast(error.title, error.message, 'error');
+            },
+            onSettled: () => setIsSubmitting(false),
+          });
+        }
       } catch (err) {
         console.error(err);
         customToast(
@@ -92,7 +95,7 @@
         setIsSubmitting(false);
       }
     },
     [amount, divisionAmount, distributionOK, isSubmitting]
   );
 
   const removeMember = memberId => {

frontend/src/components/forms/GroupForm.jsx

@@ -8,6 +8,11 @@
 import { Form } from 'react-router';
 import { REACTQUERY_KEYS } from '../../libs/ReactQuery/keys';
 import { customToast } from '../CustomToast';
+import {
+  createGroupFormSchema,
+  validatorGroupForm,
+} from '../../schemas/createGroup/form';
+import { ZodError } from 'zod';
 
 export default function GroupForm({ page }) {
   const queryClient = useQueryClient();
@@ -50,13 +55,18 @@
     async e => {
       e.preventDefault();
       if (isPending || isDisabled) return;
-      mutateAsync({
+
+      const formData = {
         name: groupName,
         description,
         icon: selectedIcon,
-      });
+      };
+
+      if (validatorGroupForm(formData)) {
+        await mutateAsync(formData);
+      }
     },
-    [isPending, isDisabled]
+    [isPending, isDisabled, groupName, selectedIcon, mutateAsync]
   );
 
   return (

frontend/src/schemas/createGroup/form.js

@@ -1,4 +1,5 @@
-import { z } from 'zod';
+import { z, ZodError } from 'zod';
+import { customToast } from '../../components/CustomToast';
 
 export const createGroupFormSchema = z.object({
   name: z
@@ -8,3 +9,21 @@ export const createGroupFormSchema = z.object({
   icon: z.string(),
   description: z.string().optional(),
 });
+
+export function validatorGroupForm(formData) {
+  const { success, error } = createGroupFormSchema.safeParse(formData);
+  if (success) return success;
+
+  const errors = {};
+  if (error instanceof ZodError) {
+    error.issues.forEach(issue => {
+      const fieldName = issue.path[0];
+      const title =
+        createGroupFormSchema.shape[fieldName]?.description || fieldName;
+      customToast(title, issue.message, 'error');
+    });
+  } else {
+    errors.global = 'Ocorreu um erro inesperado.';
+  }
+  return success;
+}

frontend/src/schemas/createNewExpense/form.js

@@ -1,8 +1,48 @@
-import { z } from 'zod';
+import { z, ZodError } from 'zod';
+import { customToast } from '../../components/CustomToast';
 
 export const createNewExpenseFormSchema = z.object({
-  title:z.string().min(3),
-  ExpenseValue:,
-  category:,
-  WhoPaid:
+  title: z.string().min(3, 'Título deve ter ao menos 3 caracteres'),
+  expenseValue: z
+    .number({
+      required_error: 'O valor da despesa é obrigatório',
+      invalid_type_error: 'Valor inválido',
+    })
+    .positive('A despesa deve ter um valor maior que zero'),
+
+  categoryId: z
+    .number({
+      required_error: 'Categoria é obrigatória',
+      invalid_type_error: 'Categoria inválida',
+    })
+    .int()
+    .positive(),
+  description: z.string().optional(),
+  deadlineDate: z.string(), // normalmente vem como string ISO de input date
+
+  expenseDivision: z
+    .array(
+      z.object({
+        id: z.number().int().positive(),
+        value: z.number().nonnegative(),
+      })
+    )
+    .min(1, 'A divisão da despesa é obrigatória'),
 });
+
+export function validatorCreateNewExpense(formData) {
+  const { success, error } = createNewExpenseFormSchema.safeParse(formData);
+  if (success) return success;
+  const errors = {};
+  if (error instanceof ZodError) {
+    error.issues.forEach(issue => {
+      const fieldName = issue.path[0];
+      const title =
+        createNewExpenseFormSchema.shape[fieldName]?.description || fieldName;
+      customToast(title, issue.message, 'error');
+    });
+  } else {
+    errors.global = 'Ocorreu um erro inesperado.';
+  }
+  return success;
+}