ui chnages

apps/backoffice/src/app/features/result/pages/ResultPage/columns.tsx

@@ -1,11 +1,13 @@
+import { type StatusTone, STATUS_TONE_COLOR } from '@ema-platform/shared';
 import { Badge, Box, Text } from '@mantine/core';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
+import { StatusBadge } from '@ema-platform/ui';
 import type { Result, ResultReviewStatus } from '../../types/result';
 
-export const STATUS_COLOR: Record<string, string> = {
-  PASSED: 'teal',
-  FAILED: 'red',
+export const STATUS_TONE: Record<string, StatusTone> = {
+  PASSED: 'success',
+  FAILED: 'danger',
 };
 
 /** Where a mark sits in quality control (US-EXAM-011 → 014). */
@@ -46,20 +48,22 @@ export function resultColumns(
     {
       header: t('result.columns.status'),
       cell: ({ row }) => (
-        <Badge
+        <StatusBadge
+          tone={STATUS_TONE[row.original.status]}
+          label={t(`result.status.${row.original.status}`)}
           size="sm"
           variant="light"
-          color={STATUS_COLOR[row.original.status]}
           leftSection={
             <Box
               w={6}
               h={6}
-              style={{ borderRadius: 999, background: `var(--mantine-color-${STATUS_COLOR[row.original.status]}-6)` }}
+              style={{
+                borderRadius: 999,
+                background: `var(--mantine-color-${STATUS_TONE_COLOR[STATUS_TONE[row.original.status]]}-6)`,
+              }}
             />
           }
-        >
-          {t(`result.status.${row.original.status}`)}
-        </Badge>
+        />
       ),
     },
     {

apps/backoffice/src/app/features/result/pages/ResultPage/index.tsx

@@ -9,7 +9,6 @@ import {
   Modal,
   Text,
   Paper,
-  Card,
   Loader,
   Center,
   Alert,
@@ -34,7 +33,7 @@ import {
   IconSearch,
   IconSend,
 } from '@tabler/icons-react';
-import { notify, BilingualInput, useErrorHandler, AdvancedTable, useServerTable, ModalFooter } from '@ema-platform/ui';
+import { notify, BilingualInput, useErrorHandler, AdvancedTable, StatusBadge, useServerTable, ModalFooter } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 import type { BilingualValue } from '@ema-platform/ui';
 import { extractErrorMessage, useLocalized } from '@ema-platform/api';
@@ -53,7 +52,7 @@ import { useGetExamsQuery } from '../../../exam/api/exam-api';
 import { RecordResultModal } from '../../components/RecordResultModal';
 import type { Result, ResultBreakdown } from '../../types/result';
 import type { Exam } from '../../../exam/types/exam';
-import { resultColumns, STATUS_COLOR, REVIEW_COLOR } from './columns';
+import { resultColumns, STATUS_TONE, REVIEW_COLOR } from './columns';
 import { resultActionsColumn, type QcAction } from './actions';
 
 function ResultStat({
@@ -327,10 +326,13 @@ export function ResultPage() {
         <ResultStat label={t('result.stats.avgScore')} value={avgScore} icon={IconChartBar} color="indigo" />
       </SimpleGrid>
 
-      <Card withBorder padding={0}>
-        <Group p="md" justify="space-between" wrap="wrap" gap="sm">
-          <Text fw={600}>{t('result.section')}</Text>
-          <Group gap="sm" wrap="wrap">
+      <AdvancedTable
+        columns={columns}
+        data={page.rows}
+        title={t('result.section')}
+        tableName={t('result.title')}
+        toolbar={
+          <>
             <TextInput
               placeholder={t('result.search.seafarer')}
               leftSection={<IconSearch size={15} />}
@@ -348,23 +350,17 @@ export function ResultPage() {
               style={{ width: 280 }}
               clearable
             />
-          </Group>
-        </Group>
-
-        <AdvancedTable
-          columns={columns}
-          data={page.rows}
-          tableName={t('result.title')}
-          itemCount={page.itemCount}
-          pageIndex={page.pageIndex}
-          onPageChange={setPageIndex}
-          pageSize={pageSize}
-          onPageSizeChange={setPageSize}
-          refresh={refetch}
-          isLoading={isFetching}
-          emptyText={t('result.noItems')}
-        />
-      </Card>
+          </>
+        }
+        itemCount={page.itemCount}
+        pageIndex={page.pageIndex}
+        onPageChange={setPageIndex}
+        pageSize={pageSize}
+        onPageSizeChange={setPageSize}
+        refresh={refetch}
+        isLoading={isFetching}
+        emptyText={t('result.noItems')}
+      />
 
       <Modal
         opened={detailOpened}
@@ -421,9 +417,10 @@ export function ResultPage() {
                 {t('result.review.derivedStatus')}
               </Text>
               <Group gap="xs" mt={4}>
-                <Badge variant="light" color={STATUS_COLOR[detailResult.status]}>
-                  {t(`result.status.${detailResult.status}`)}
-                </Badge>
+                <StatusBadge
+                  tone={STATUS_TONE[detailResult.status]}
+                  label={t(`result.status.${detailResult.status}`)}
+                />
                 <Badge variant="light" color={REVIEW_COLOR[detailResult.reviewStatus] ?? 'gray'}>
                   {t(`result.review.${detailResult.reviewStatus}`)}
                 </Badge>