From 7c9f78c680f8b59359a6c73c425fd885e250f91b Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 12 Aug 2026 07:55:43 +0000
Subject: [PATCH] feat: replace Paper with Modal in CertificationPage,
 ConfigurationPage, ExamPage, and QuestionPage for consistent UI

---
 .../certification/pages/CertificationPage.tsx  |  9 ++++-----
 .../configuration/pages/ConfigurationPage.tsx  | 18 +++++++++++++-----
 .../src/app/features/exam/pages/ExamPage.tsx   |  9 ++++-----
 .../features/question/pages/QuestionPage.tsx   |  9 ++++-----
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx
index 77a2579ed..88fdbe449 100644
--- a/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx
+++ b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx
@@ -10,7 +10,6 @@ import {
   Text,
   TextInput,
   Textarea,
-  Paper,
   Card,
   Alert,
 } from '@mantine/core';
@@ -53,20 +52,20 @@ function CertificationForm({
   };
 
   return (
-    <Paper p="md" withBorder mb="md" radius="md">
+    <Modal opened onClose={onCancel} title={editing ? t('certification.update') : t('certification.add')} size="md">
       <form onSubmit={handleSubmit}>
         <Stack gap="sm">
           <TextInput label={t('certification.form.nameEn')} placeholder={t('certification.form.nameEnPlaceholder')} value={nameEn} onChange={(e) => setNameEn(e.currentTarget.value)} size="sm" required />
           <TextInput label={t('certification.form.nameAm')} placeholder={t('certification.form.nameAmPlaceholder')} value={nameAm} onChange={(e) => setNameAm(e.currentTarget.value)} size="sm" required />
           <Textarea label={t('certification.form.descEn')} placeholder={t('certification.form.descEnPlaceholder')} value={descEn} onChange={(e) => setDescEn(e.currentTarget.value)} size="sm" autosize minRows={2} />
           <Textarea label={t('certification.form.descAm')} placeholder={t('certification.form.descAmPlaceholder')} value={descAm} onChange={(e) => setDescAm(e.currentTarget.value)} size="sm" autosize minRows={2} />
-          <Group justify="flex-end">
+          <ModalFooter>
             <Button variant="default" onClick={onCancel} size="sm">{t('certification.cancel')}</Button>
             <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('certification.update') : t('certification.create')}</Button>
-          </Group>
+          </ModalFooter>
         </Stack>
       </form>
-    </Paper>
+    </Modal>
   );
 }
 
diff --git a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
index a4416d7c8..c270c3cf3 100644
--- a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
+++ b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
@@ -11,7 +11,6 @@ import {
   Modal,
   Text,
   Select,
-  Paper,
   Loader,
   Center,
   Alert,
@@ -104,7 +103,16 @@ function ProfessionForm({
   );
 
   return (
-    <Paper p="md" withBorder mb="md" radius="md">
+    <Modal
+      opened
+      onClose={onCancel}
+      title={
+        editingProf
+          ? t("configuration.update")
+          : t("configuration.addProfession")
+      }
+      size="md"
+    >
       <form onSubmit={handleSubmit}>
         <Stack gap="sm">
           <TextInput
@@ -143,7 +151,7 @@ function ProfessionForm({
             size="sm"
             searchable
           />
-          <Group justify="flex-end">
+          <ModalFooter>
             <Button variant="default" onClick={onCancel} size="sm">
               {t("configuration.cancel")}
             </Button>
@@ -152,10 +160,10 @@ function ProfessionForm({
                 ? t("configuration.update")
                 : t("configuration.create")}
             </Button>
-          </Group>
+          </ModalFooter>
         </Stack>
       </form>
-    </Paper>
+    </Modal>
   );
 }
 
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx
index 8991aa4b4..a3a5436e4 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx
@@ -11,7 +11,6 @@ import {
   Text,
   TextInput,
   Textarea,
-  Paper,
   Card,
   Alert,
   Select,
@@ -132,7 +131,7 @@ function ExamForm({
   };
 
   return (
-    <Paper p="md" withBorder mb="md" radius="md">
+    <Modal opened onClose={onCancel} title={editing ? t("exam.update") : t("exam.add")} size="xl">
       <form onSubmit={handleSubmit}>
         <Tabs defaultValue="basic" variant="outline" radius="md">
           <Tabs.List mb="md">
@@ -333,16 +332,16 @@ function ExamForm({
           </Tabs.Panel>
         </Tabs>
 
-        <Group justify="flex-end" mt="md">
+        <ModalFooter mt="md">
           <Button variant="default" onClick={onCancel} size="sm">
             {t("exam.cancel")}
           </Button>
           <Button type="submit" size="sm" loading={isSubmitting}>
             {editing ? t("exam.update") : t("exam.create")}
           </Button>
-        </Group>
+        </ModalFooter>
       </form>
-    </Paper>
+    </Modal>
   );
 }
 
diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
index 88297739f..dfdf184a8 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
@@ -9,7 +9,6 @@ import {
   Modal,
   Text,
   TextInput,
-  Paper,
   Card,
   Alert,
   Select,
@@ -93,7 +92,7 @@ function QuestionForm({
   };
 
   return (
-    <Paper p="md" withBorder mb="md" radius="md">
+    <Modal opened onClose={onCancel} title={editing ? t('question.update') : t('question.addQuestion')} size="lg">
       <form onSubmit={handleSubmit}>
         <Stack gap="sm">
           <Select label={t('question.form.certification')} placeholder={t('question.form.selectCertification')} data={certOptions} value={certificationId} onChange={setCertificationId} size="sm" searchable required />
@@ -107,13 +106,13 @@ function QuestionForm({
             <NumberInput label={t('question.form.hours')} value={hours} onChange={(v) => setHours(Number(v))} min={0} size="sm" />
             <NumberInput label={t('question.form.minutes')} value={minutes} onChange={(v) => setMinutes(Number(v))} min={0} size="sm" />
           </Group>
-          <Group justify="flex-end">
+          <ModalFooter>
             <Button variant="default" onClick={onCancel} size="sm">{t('question.cancel')}</Button>
             <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('question.update') : t('question.create')}</Button>
-          </Group>
+          </ModalFooter>
         </Stack>
       </form>
-    </Paper>
+    </Modal>
   );
 }