feat: replace Paper with Modal in CertificationPage, ConfigurationPage, ExamPage, and QuestionPage for consistent UI

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>
   );
 }
 

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>
   );
 }
 

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>
   );
 }
 

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>
   );
 }