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/configuration/pages/ConfigurationPage.tsx

@@ -21,7 +21,7 @@ import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import { IconEdit, IconTrash, IconPlus, IconBriefcase, IconMap, IconCertificate, IconInfoCircle } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-import { notify } from '@ema-platform/ui';
+import { notify, useErrorHandler } from '@ema-platform/ui';
 import { LocationPage } from '../../location/pages/LocationPage';
 import { CertificationPage } from '../../certification/pages/CertificationPage';
 import {
@@ -131,6 +131,7 @@ function ProfessionForm({ editingProf, deptOptions, isSubmitting, onSubmit, onCa
 function ProfessionTab() {
   const { t, i18n } = useTranslation();
   const locale = i18n.language as 'en' | 'am';
+  const { handleError } = useErrorHandler();
   const { data: deptRes } = useGetOrganizationsQuery();
   const { data: profRes, isLoading, isError } = useGetProfessionsQuery();
   const [createProfession, { isLoading: isCreating }] = useCreateProfessionMutation();
@@ -172,10 +173,10 @@ function ProfessionTab() {
       notify.success(t('configuration.deleted'));
       closeDelete();
       setDeleteTarget(null);
-    } catch {
-      notify.error(t('configuration.error'));
+    } catch (e) {
+      handleError(e);
     }
-  }, [deleteTarget, deleteProfession, closeDelete, t]);
+  }, [deleteTarget, deleteProfession, closeDelete, handleError]);
 
   const handleProfSubmit = useCallback(async (values: ProfFormValues) => {
     const name = { en: values.nameEn, am: values.nameAm };
@@ -199,10 +200,10 @@ function ProfessionTab() {
         notify.success(t('configuration.created'));
       }
       resetProfForm();
-    } catch {
-      notify.error(t('configuration.error'));
+    } catch (e) {
+      handleError(e);
     }
-  }, [editingProf, createProfession, updateProfession, resetProfForm, t]);
+  }, [editingProf, createProfession, updateProfession, resetProfForm, handleError]);
 
   const getDeptName = useCallback((deptId: string) => {
     const dept = departments.find((d) => d.id === deptId);