Enhance certificate designer and seafarer registration features with image support and dynamic department/rank options

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

@@ -24,7 +24,7 @@ import {
 import { notify, useErrorHandler, AdvancedTable, useServerTable, ModalFooter, AmharicDatePicker } from "@ema-platform/ui";
 import { LICENSE_PERMISSIONS, RequirePermission } from "@ema-platform/auth";
 import { useGetCertificationsQuery } from "../../../certification/api/certification-api";
-import { RANK_KEY_OPTIONS } from "../../../certification/types/certification";
+import { useGetRanksQuery, useLocalized } from "@ema-platform/api";
 import {
   useGetExamsQuery,
   useCreateExamMutation,
@@ -364,7 +364,10 @@ export function ExamPage() {
   const { t, i18n } = useTranslation();
   const { handleError } = useErrorHandler();
   const locale = i18n.language as "en" | "am";
+  const localized = useLocalized();
   const { data: certRes } = useGetCertificationsQuery();
+  const { data: rankRes } = useGetRanksQuery();
+  const rankLabelByKey = new Map((rankRes?.items ?? []).map((r) => [r.key, localized(r.name)]));
   const { data, isFetching, isError, refetch } = useGetExamsQuery();
   const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
   const [createExam, { isLoading: isCreating }] = useCreateExamMutation();
@@ -391,7 +394,7 @@ export function ExamPage() {
   const certOptions = certifications
     .filter((c) => c.isActive)
     .map((c) => {
-      const rank = RANK_KEY_OPTIONS.find((r) => r.value === c.rankKey)?.label;
+      const rank = c.rankKey ? rankLabelByKey.get(c.rankKey) : undefined;
       return {
         value: c.id,
         label: rank ? `${c.name[locale]} — ${rank}` : c.name[locale],