From ef0e67e07a6bbea0021628906131a702f4bba46c Mon Sep 17 00:00:00 2001
From: Yashwin <yashwin.shankar@tech4biz.io>
Date: Mon, 19 Jan 2026 20:05:09 +0530
Subject: [PATCH] Enhance role management modals by adding error handling and
 validation feedback. Implemented clearErrors and setError for API response
 handling in EditRoleModal and NewRoleModal, along with general error display
 for user feedback.

---
 src/components/shared/EditRoleModal.tsx | 42 +++++++++++++++++++++++--
 src/components/shared/NewRoleModal.tsx  | 41 ++++++++++++++++++++++--
 2 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/EditRoleModal.tsx b/src/components/shared/EditRoleModal.tsx
index d71517b..42bb15b 100644
--- a/src/components/shared/EditRoleModal.tsx
+++ b/src/components/shared/EditRoleModal.tsx
@@ -51,6 +51,8 @@ export const EditRoleModal = ({
     setValue,
     watch,
     reset,
+    setError,
+    clearErrors,
     formState: { errors },
   } = useForm<EditRoleFormData>({
     resolver: zodResolver(editRoleSchema),
@@ -65,6 +67,7 @@ export const EditRoleModal = ({
         try {
           setIsLoadingRole(true);
           setLoadError(null);
+          clearErrors();
           const role = await onLoadRole(roleId);
           reset({
             name: role.name,
@@ -87,12 +90,40 @@ export const EditRoleModal = ({
         scope: 'platform',
       });
       setLoadError(null);
+      clearErrors();
     }
-  }, [isOpen, roleId, onLoadRole, reset]);
+  }, [isOpen, roleId, onLoadRole, reset, clearErrors]);
 
   const handleFormSubmit = async (data: EditRoleFormData): Promise<void> => {
-    if (roleId) {
+    if (!roleId) return;
+    
+    clearErrors();
+    try {
       await onSubmit(roleId, data);
+    } catch (error: any) {
+      // Handle validation errors from API
+      if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
+        const validationErrors = error.response.data.details;
+        validationErrors.forEach((detail: { path: string; message: string }) => {
+          if (detail.path === 'name' || detail.path === 'code' || detail.path === 'description' || detail.path === 'scope') {
+            setError(detail.path as keyof EditRoleFormData, {
+              type: 'server',
+              message: detail.message,
+            });
+          }
+        });
+      } else {
+        // Handle general errors
+        const errorMessage = 
+          error?.response?.data?.error || 
+          error?.response?.data?.message || 
+          error?.message || 
+          'Failed to update role. Please try again.';
+        setError('root', {
+          type: 'server',
+          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to update role. Please try again.',
+        });
+      }
     }
   };
 
@@ -139,6 +170,13 @@ export const EditRoleModal = ({
 
       {!isLoadingRole && (
         <form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0">
+          {/* General Error Display */}
+          {errors.root && (
+            <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
+              <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+            </div>
+          )}
+
           {/* Role Name and Role Code Row */}
           <div className="grid grid-cols-2 gap-5 pb-4">
             <FormField
diff --git a/src/components/shared/NewRoleModal.tsx b/src/components/shared/NewRoleModal.tsx
index 2811ee4..4a91af0 100644
--- a/src/components/shared/NewRoleModal.tsx
+++ b/src/components/shared/NewRoleModal.tsx
@@ -43,6 +43,8 @@ export const NewRoleModal = ({
     setValue,
     watch,
     reset,
+    setError,
+    clearErrors,
     formState: { errors },
   } = useForm<NewRoleFormData>({
     resolver: zodResolver(newRoleSchema),
@@ -62,11 +64,39 @@ export const NewRoleModal = ({
         description: '',
         scope: 'platform',
       });
+      clearErrors();
     }
-  }, [isOpen, reset]);
+  }, [isOpen, reset, clearErrors]);
 
   const handleFormSubmit = async (data: NewRoleFormData): Promise<void> => {
-    await onSubmit(data);
+    clearErrors();
+    try {
+      await onSubmit(data);
+    } catch (error: any) {
+      // Handle validation errors from API
+      if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
+        const validationErrors = error.response.data.details;
+        validationErrors.forEach((detail: { path: string; message: string }) => {
+          if (detail.path === 'name' || detail.path === 'code' || detail.path === 'description' || detail.path === 'scope') {
+            setError(detail.path as keyof NewRoleFormData, {
+              type: 'server',
+              message: detail.message,
+            });
+          }
+        });
+      } else {
+        // Handle general errors
+        const errorMessage = 
+          error?.response?.data?.error || 
+          error?.response?.data?.message || 
+          error?.message || 
+          'Failed to create role. Please try again.';
+        setError('root', {
+          type: 'server',
+          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to create role. Please try again.',
+        });
+      }
+    }
   };
 
   return (
@@ -99,6 +129,13 @@ export const NewRoleModal = ({
       }
     >
       <form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0">
+        {/* General Error Display */}
+        {errors.root && (
+          <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
+            <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+          </div>
+        )}
+
         {/* Role Name and Role Code Row */}
         <div className="grid grid-cols-2 gap-5 pb-4">
           <FormField