From 70b6562045645b7e4340db5e12adebe814b6ae74 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Sat, 8 Aug 2026 06:32:03 +0000
Subject: [PATCH] fixes

---
 .../features/question/pages/QuestionPage.tsx  | 164 +++++++-----------
 1 file changed, 62 insertions(+), 102 deletions(-)

diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
index 502b6c59b..a317523e9 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
@@ -15,7 +15,6 @@ import {
   Select,
   NumberInput,
   Textarea,
-  Table,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +26,7 @@ import {
   IconSend,
   IconGavel,
 } from '@tabler/icons-react';
-import { AdvancedColumn, ModalFooter, notify } from '@ema-platform/ui';
+import { AdvancedColumn, AdvancedTable, ModalFooter, notify, useErrorHandler, useServerTable } from '@ema-platform/ui';
 import { extractErrorMessage } from '@ema-platform/api';
 import { useGetCertificationsQuery } from '../../certification/api/certification-api';
 import {
@@ -242,26 +241,61 @@ export function QuestionPage() {
       cell: ({ row }) => <Text fz="sm" fw={600}>{row.original.points}</Text>,
     },
     {
-      header: t('question.columns.status'),
+      header: t('question.qc.column'),
       cell: ({ row }) => (
-        <Badge size="sm" variant="light" color={row.original.isActive ? 'teal' : 'gray'}>
-          {row.original.isActive ? t('question.status.active') : t('question.status.inactive')}
+        <Badge size="sm" variant="light" color={QC_COLOR[row.original.status] ?? 'gray'} title={row.original.reviewRemark ?? undefined}>
+          {t(`question.qc.${row.original.status}`)}
         </Badge>
       ),
     },
     {
       header: '',
       label: t('question.columns.actions', 'Actions'),
-      cell: ({ row }) => (
-        <Group gap="xs">
-          <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => { setEditing(row.original); setShowForm(true); }}>
-            <IconEdit size={14} />
-          </ActionIcon>
-          <ActionIcon variant="subtle" color="red" size="sm" onClick={() => { setDeleteTarget(row.original); openDelete(); }}>
-            <IconTrash size={14} />
-          </ActionIcon>
-        </Group>
-      ),
+      cell: ({ row }) => {
+        const q = row.original;
+        return (
+          <Group gap="xs">
+            {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
+              <Button
+                size="compact-xs"
+                variant="light"
+                leftSection={<IconSend size={12} />}
+                loading={isSubmittingReview}
+                onClick={() => handleSubmitForApproval(q)}
+              >
+                {t('question.qc.submit')}
+              </Button>
+            )}
+            {q.status === 'PENDING_APPROVAL' && (
+              <>
+                <Button size="compact-xs" variant="light" color="teal" onClick={() => openReview(q, 'APPROVED')}>
+                  {t('question.qc.approve')}
+                </Button>
+                <Button size="compact-xs" variant="light" color="red" onClick={() => openReview(q, 'REJECTED')}>
+                  {t('question.qc.reject')}
+                </Button>
+              </>
+            )}
+            {q.status === 'APPROVED' && (
+              <Button
+                size="compact-xs"
+                variant="subtle"
+                color="dark"
+                leftSection={<IconGavel size={12} />}
+                onClick={() => openReview(q, 'RETIRED')}
+              >
+                {t('question.qc.retire')}
+              </Button>
+            )}
+            <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => { setEditing(q); setShowForm(true); }}>
+              <IconEdit size={14} />
+            </ActionIcon>
+            <ActionIcon variant="subtle" color="red" size="sm" onClick={() => { setDeleteTarget(q); openDelete(); }}>
+              <IconTrash size={14} />
+            </ActionIcon>
+          </Group>
+        );
+      },
     },
   ];
 
@@ -299,93 +333,19 @@ export function QuestionPage() {
             clearable
           />
         </Group>
-        <Table striped highlightOnHover>
-          <Table.Thead bg="var(--mantine-color-default-hover)">
-            <Table.Tr>
-              <Table.Th>{t('question.columns.title')}</Table.Th>
-              <Table.Th>{t('question.columns.certification')}</Table.Th>
-              <Table.Th>{t('question.columns.form')}</Table.Th>
-              <Table.Th>{t('question.columns.points')}</Table.Th>
-              <Table.Th>{t('question.qc.column')}</Table.Th>
-              <Table.Th />
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {filtered.map((q) => (
-              <Table.Tr key={q.id}>
-                <Table.Td><Text fz="sm" maw={300} lineClamp={2}>{q.title[locale]}</Text></Table.Td>
-                <Table.Td><Text fz="sm">{getCertName(q.certificationId)}</Text></Table.Td>
-                <Table.Td><Badge size="sm" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>{t(`question.form.${q.form === 'ESSAY' ? 'essay' : 'choice'}`)}</Badge></Table.Td>
-                <Table.Td><Text fz="sm" fw={600}>{q.points}</Text></Table.Td>
-                <Table.Td>
-                  <Badge size="sm" variant="light" color={QC_COLOR[q.status] ?? 'gray'} title={q.reviewRemark ?? undefined}>
-                    {t(`question.qc.${q.status}`)}
-                  </Badge>
-                </Table.Td>
-                <Table.Td>
-                  <Group gap="xs">
-                    {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
-                      <Button
-                        size="compact-xs"
-                        variant="light"
-                        leftSection={<IconSend size={12} />}
-                        loading={isSubmittingReview}
-                        onClick={() => handleSubmitForApproval(q)}
-                      >
-                        {t('question.qc.submit')}
-                      </Button>
-                    )}
-                    {q.status === 'PENDING_APPROVAL' && (
-                      <>
-                        <Button
-                          size="compact-xs"
-                          variant="light"
-                          color="teal"
-                          onClick={() => openReview(q, 'APPROVED')}
-                        >
-                          {t('question.qc.approve')}
-                        </Button>
-                        <Button
-                          size="compact-xs"
-                          variant="light"
-                          color="red"
-                          onClick={() => openReview(q, 'REJECTED')}
-                        >
-                          {t('question.qc.reject')}
-                        </Button>
-                      </>
-                    )}
-                    {q.status === 'APPROVED' && (
-                      <Button
-                        size="compact-xs"
-                        variant="subtle"
-                        color="dark"
-                        leftSection={<IconGavel size={12} />}
-                        onClick={() => openReview(q, 'RETIRED')}
-                      >
-                        {t('question.qc.retire')}
-                      </Button>
-                    )}
-                    <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => { setEditing(q); setShowForm(true); }}>
-                      <IconEdit size={14} />
-                    </ActionIcon>
-                    <ActionIcon variant="subtle" color="red" size="sm" onClick={() => { setDeleteTarget(q); openDelete(); }}>
-                      <IconTrash size={14} />
-                    </ActionIcon>
-                  </Group>
-                </Table.Td>
-              </Table.Tr>
-            ))}
-            {filtered.length === 0 && (
-              <Table.Tr>
-                <Table.Td colSpan={6}>
-                  <Text c="dimmed" ta="center" py="xl">{t('question.noQuestions')}</Text>
-                </Table.Td>
-              </Table.Tr>
-            )}
-          </Table.Tbody>
-        </Table>
-      </Paper>
+        <AdvancedTable
+          columns={columns}
+          data={page.rows}
+          tableName={t('question.title')}
+          itemCount={page.itemCount}
+          pageIndex={page.pageIndex}
+          onPageChange={setPageIndex}
+          pageSize={pageSize}
+          refresh={refetch}
+          isLoading={isFetching}
+          emptyText={t('question.noQuestions')}
+        />
+      </Card>
 
       <Modal
         opened={Boolean(reviewTarget)}