backoffice

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

@@ -291,7 +291,7 @@ export function ExamDetailPage() {
             <IconArrowLeft size={18} />
           </ActionIcon>
           <div>
-            <Title order={3}>{exam.title[locale]}</Title>
+            <Title order={2}>{exam.title[locale]}</Title>
           </div>
         </Group>
         <Group gap="sm">

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

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Stack,
-  Title,
   Group,
   Button,
   Modal,
@@ -10,7 +9,6 @@ import {
   TextInput,
   Textarea,
   Card,
-  Alert,
   Select,
   NumberInput,
   Tabs,
@@ -35,6 +33,7 @@ import {
 import type { Exam } from "../../types/exam";
 import { examColumns } from "./columns";
 import { examActionsColumn } from "./actions";
+import { ErrorState, PageHeader } from '@ema-platform/ui';
 
 function ExamForm({
   editing,
@@ -416,13 +415,7 @@ export function ExamPage() {
   };
 
   if (isError)
-    return (
-      <Alert
-        icon={<IconInfoCircle size={16} />}
-        color="red"
-        title={t("exam.loadError")}
-      />
-    );
+    return <ErrorState title={t("exam.loadError")} onRetry={refetch} />;
 
   const columns = [
     ...examColumns(t, locale, getCertName, (exam) => navigate(`/exams/${exam.id}`)),
@@ -443,26 +436,25 @@ export function ExamPage() {
 
   return (
     <Stack gap="lg">
-      <Group justify="space-between" align="flex-end">
-        <div>
-          <Title order={2}>{t("exam.title")}</Title>
-          <Text fz="sm" c="dimmed">
-            {t("exam.subtitle")}
-          </Text>
-        </div>
-        {!showForm && (
-          <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_EXAMS]} hideOnly>
-            <Button
-              variant="light"
-              leftSection={<IconPlus size={16} />}
-              onClick={() => setShowForm(true)}
-              size="sm"
-            >
-              {t("exam.add")}
-            </Button>
-          </RequirePermission>
-        )}
-      </Group>
+      <PageHeader
+        title={t("exam.title")}
+        subtitle={t("exam.subtitle")}
+        noMargin
+        action={
+          !showForm && (
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_EXAMS]} hideOnly>
+              <Button
+                variant="light"
+                leftSection={<IconPlus size={16} />}
+                onClick={() => setShowForm(true)}
+                size="sm"
+              >
+                {t("exam.add")}
+              </Button>
+            </RequirePermission>
+          )
+        }
+      />
 
       {showForm && (
         <ExamForm