feat: add ExamStageActions component for exam fee handling

- Implemented ExamStageActions component to manage actions related to exam booking and payment based on application status.
- Added mock-base-query for development, providing a partial mock backend for various API endpoints.
- Introduced mock-data for simulating responses in the mock-base-query, covering profiles, vessels, applications, licenses, exams, and notifications.

apps/backoffice/src/app/features/certificate-designer/hooks/useDesignerActions.ts

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { notifications } from '@mantine/notifications';
+import { useTranslation } from 'react-i18next';
+import { extractErrorMessage } from '@ema-platform/api';
+
+/**
+ * Runs a designer mutation and reports the outcome once.
+ *
+ * Every action on this page succeeds or fails the same way, so the toast
+ * handling lives here rather than being repeated at each call site.
+ */
+export function useDesignerActions() {
+  const { t } = useTranslation();
+
+  return useCallback(
+    async (action: () => Promise<unknown>, success: string) => {
+      try {
+        await action();
+        notifications.show({ color: 'teal', title: success, message: '' });
+      } catch (err) {
+        notifications.show({
+          color: 'red',
+          title: t('designer.actionFailed', 'Action failed'),
+          message: extractErrorMessage(err),
+        });
+      }
+    },
+    [t],
+  );
+}

apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts

@@ -0,0 +1,84 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { LicenseTemplate } from '@ema-platform/api';
+
+/**
+ * Editor state for the selected version.
+ *
+ * Selection defaults to the live design because that is the one staff usually
+ * open, and the fields reset whenever the selection changes so an edit can
+ * never leak from one version into another.
+ */
+export function useTemplateDraft(templates: LicenseTemplate[]) {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [source, setSource] = useState('');
+  const [name, setName] = useState('');
+  const [landscape, setLandscape] = useState(true);
+  const [backgroundUrl, setBackgroundUrl] = useState('');
+  const editorRef = useRef<HTMLTextAreaElement>(null);
+
+  const selected = useMemo(
+    () => templates.find((tpl) => tpl.id === selectedId) ?? null,
+    [templates, selectedId],
+  );
+
+  useEffect(() => {
+    if (!templates.length) {
+      setSelectedId(null);
+      return;
+    }
+    if (selectedId && templates.some((tpl) => tpl.id === selectedId)) return;
+    const published = templates.find((tpl) => tpl.status === 'PUBLISHED');
+    setSelectedId((published ?? templates[0]).id);
+  }, [templates, selectedId]);
+
+  useEffect(() => {
+    if (!selected) return;
+    setSource(selected.hbsSource);
+    setName(selected.name);
+    setLandscape(selected.pageOptions?.landscape ?? true);
+    setBackgroundUrl(selected.backgroundUrl ?? '');
+  }, [selected]);
+
+  const isPublished = selected?.status === 'PUBLISHED';
+  const dirty =
+    Boolean(selected) &&
+    (source !== selected?.hbsSource ||
+      name !== selected?.name ||
+      landscape !== (selected?.pageOptions?.landscape ?? true) ||
+      backgroundUrl !== (selected?.backgroundUrl ?? ''));
+
+  /** Inserts a placeholder where the caret is, rather than at the end. */
+  function insertVariable(key: string) {
+    const el = editorRef.current;
+    const token = `{{${key}}}`;
+    if (!el) {
+      setSource((prev) => prev + token);
+      return;
+    }
+    const start = el.selectionStart ?? source.length;
+    const end = el.selectionEnd ?? start;
+    setSource(source.slice(0, start) + token + source.slice(end));
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(start + token.length, start + token.length);
+    });
+  }
+
+  return {
+    selected,
+    selectedId,
+    setSelectedId,
+    source,
+    setSource,
+    name,
+    setName,
+    landscape,
+    setLandscape,
+    backgroundUrl,
+    setBackgroundUrl,
+    editorRef,
+    isPublished,
+    dirty,
+    insertVariable,
+  };
+}

apps/backoffice/src/app/features/certificate-designer/hooks/useTemplatePreview.ts

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { notifications } from '@mantine/notifications';
+import { useTranslation } from 'react-i18next';
+import { extractErrorMessage } from '@ema-platform/api';
+import { authStorage } from '@ema-platform/auth';
+import { API_BASE_URL, pageOptionsFor } from '../config/designer';
+
+interface PreviewArgs {
+  hbsSource: string;
+  licenseTypeId: string | null;
+  landscape: boolean;
+}
+
+/**
+ * Renders the editor's current contents, not the saved row, so unsaved edits
+ * are what you see. Opened as a blob so it never leaves a file behind.
+ */
+export function useTemplatePreview() {
+  const { t } = useTranslation();
+
+  return useCallback(
+    async ({ hbsSource, licenseTypeId, landscape }: PreviewArgs) => {
+      try {
+        // The preview returns a PDF stream, not JSON, so it bypasses RTK Query
+        // and calls the API directly — which means spelling out the base URL and
+        // the bearer token that the shared baseQuery would normally attach.
+        const token = authStorage.getToken();
+        const response = await fetch(`${API_BASE_URL}/license-templates/preview`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+          },
+          body: JSON.stringify({
+            hbsSource,
+            licenseTypeId,
+            pageOptions: pageOptionsFor(landscape),
+          }),
+        });
+        if (!response.ok) throw new Error(await response.text());
+        const url = URL.createObjectURL(await response.blob());
+        window.open(url, '_blank', 'noopener');
+        // Give the new tab time to read it before revoking.
+        setTimeout(() => URL.revokeObjectURL(url), 60_000);
+      } catch (err) {
+        notifications.show({
+          color: 'red',
+          title: t('designer.previewFailed', 'Could not render the preview'),
+          message: extractErrorMessage(err),
+        });
+      }
+    },
+    [t],
+  );
+}