backoffice

apps/backoffice/src/app/features/certification/pages/CertificationPage/index.tsx

@@ -1,20 +1,9 @@
 import { useState } from 'react';
-import {
-  Stack,
-  Title,
-  Group,
-  Button,
-  Modal,
-  Text,
-  TextInput,
-  Textarea,
-  Card,
-  Alert,
-} from '@mantine/core';
+import {Stack, Button, Modal, Text, TextInput, Textarea, Card} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
-import { IconPlus, IconInfoCircle } from '@tabler/icons-react';
-import { notify, useErrorHandler, AdvancedTable, useServerTable, ModalFooter } from '@ema-platform/ui';
+import {IconPlus} from '@tabler/icons-react';
+import { AdvancedTable, ErrorState, ModalFooter, notify, PageHeader, useErrorHandler, useServerTable } from '@ema-platform/ui';
 import {
   useGetCertificationsQuery,
   useCreateCertificationMutation,
@@ -120,7 +109,8 @@ export function CertificationPage() {
     }
   };
 
-  if (isError) return <Alert icon={<IconInfoCircle size={16} />} color="red" title={t('certification.loadError')} />;
+  if (isError)
+    return <ErrorState title={t('certification.loadError')} onRetry={refetch} />;
 
   const columns = [
     ...certificationColumns(t, locale),
@@ -134,17 +124,18 @@ export function CertificationPage() {
 
   return (
     <Stack gap="lg">
-      <Group justify="space-between" align="flex-end">
-        <div>
-          <Title order={2}>{t('certification.title')}</Title>
-          <Text fz="sm" c="dimmed">{t('certification.subtitle')}</Text>
-        </div>
-        {!showForm && (
-          <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
-            {t('certification.add')}
-          </Button>
-        )}
-      </Group>
+      <PageHeader
+        title={t('certification.title')}
+        subtitle={t('certification.subtitle')}
+        noMargin
+        action={
+          !showForm && (
+            <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
+              {t('certification.add')}
+            </Button>
+          )
+        }
+      />
 
       {showForm && (
         <CertificationForm