feat: integrate error handling across various components

- Added `useErrorHandler` hook to centralize error handling logic.
- Updated components in the backoffice and portal applications to utilize the new error handling mechanism, replacing direct notify calls with `handleError` for improved error messaging.
- Enhanced localization files to include generic error messages for better user feedback.
- Refactored error handling in forms and API interactions to ensure consistent user experience across the application.

apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx

@@ -39,7 +39,7 @@ import {
   IconCheck,
   IconX,
 } from '@tabler/icons-react';
-import { notify } from '@ema-platform/ui';
+import { notify, useErrorHandler } from '@ema-platform/ui';
 import { useGetExamQuery, useUpdateExamMutation, useAssignQuestionsMutation } from '../api/exam-api';
 import { useGetQuestionsQuery } from '../../question/api/question-api';
 import { useGetCertificationsQuery } from '../../certification/api/certification-api';
@@ -69,6 +69,7 @@ function InfoRow({ label, value }: { label: string; value: string }) {
 export function ExamDetailPage() {
   const { t, i18n } = useTranslation();
   const locale = i18n.language as 'en' | 'am';
+  const { handleError } = useErrorHandler();
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const printRef = useRef<HTMLDivElement>(null);
@@ -154,8 +155,8 @@ export function ExamDetailPage() {
       await assignQuestions({ examId: exam.id, questionIds, remark: undefined }).unwrap();
       notify.success('Questions assigned');
       closeAssign();
-    } catch {
-      notify.error('Failed to assign questions');
+    } catch (e) {
+      handleError(e);
     }
   };
 

apps/backoffice/src/app/features/exam/pages/ExamPage.tsx

@@ -25,7 +25,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
 import { IconEdit, IconTrash, IconPlus, IconInfoCircle, IconCalendar, IconClipboardList } from '@tabler/icons-react';
-import { notify } from '@ema-platform/ui';
+import { notify, useErrorHandler } from '@ema-platform/ui';
 import { useGetCertificationsQuery } from '../../certification/api/certification-api';
 import {
   useGetExamsQuery,
@@ -149,6 +149,7 @@ function ExamForm({
 export function ExamPage() {
   const navigate = useNavigate();
   const { t, i18n } = useTranslation();
+  const { handleError } = useErrorHandler();
   const locale = i18n.language as 'en' | 'am';
   const { data: certRes } = useGetCertificationsQuery();
   const { data, isLoading, isError } = useGetExamsQuery();
@@ -195,8 +196,8 @@ export function ExamPage() {
         notify.success(t('exam.created'));
       }
       resetForm();
-    } catch {
-      notify.error(t('exam.error'));
+    } catch (e) {
+      handleError(e);
     }
   };
 
@@ -207,8 +208,8 @@ export function ExamPage() {
       notify.success(t('exam.deleted'));
       closeDelete();
       setDeleteTarget(null);
-    } catch {
-      notify.error(t('exam.error'));
+    } catch (e) {
+      handleError(e);
     }
   };