feat(exam,result): quick status action, per-row publish

Two UX gaps found in testing:

- Exams list: changing status (e.g. PENDING -> ACTIVE) required opening the
  full Edit modal for a one-field change. Added a status menu (teal toggle
  icon) directly in the row actions, calling PUT /exams/:id with just
  {status} — the backend DTO was already PartialType, nothing to change
  there.
- Exam Results: publishing required first picking the exam in a page-level
  filter to un-grey the header Publish button — not discoverable, and an
  extra step disconnected from the row you actually care about. Added a
  Publish action directly on any APPROVED result's row, confirm-gated since
  it publishes every approved result for that exam (not just the one row)
  and notifies every candidate. The header filter+button still works too,
  for publishing a batch at once.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/backoffice/src/app/features/exam/pages/ExamPage/actions.tsx

@@ -1,9 +1,18 @@
-import { ActionIcon, Group } from "@mantine/core";
-import { IconEdit, IconTrash, IconDetails } from "@tabler/icons-react";
+import { ActionIcon, Group, Menu } from "@mantine/core";
+import { IconEdit, IconTrash, IconDetails, IconToggleRight } from "@tabler/icons-react";
 import type { TFunction } from "i18next";
 import type { AdvancedColumn } from "@ema-platform/ui";
 import { LICENSE_PERMISSIONS, RequirePermission } from "@ema-platform/auth";
-import type { Exam } from "../../types/exam";
+import type { Exam, ExamStatus } from "../../types/exam";
+
+const STATUSES: ExamStatus[] = [
+  "PENDING",
+  "ACTIVE",
+  "COMPLETED",
+  "CANCELLED",
+  "POSTPONED",
+  "PUBLISHED",
+];
 
 export function examActionsColumn(
   t: TFunction,
@@ -11,6 +20,8 @@ export function examActionsColumn(
     onEdit: (exam: Exam) => void;
     onDelete: (exam: Exam) => void;
     onDetails: (exam: Exam) => void;
+    onChangeStatus: (exam: Exam, status: ExamStatus) => void;
+    changingStatusId?: string | null;
   },
 ): AdvancedColumn<Exam> {
   return {
@@ -19,6 +30,30 @@ export function examActionsColumn(
     cell: ({ row }) => (
       <Group gap="xs">
         <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_EXAMS]} hideOnly>
+          <Menu shadow="md" width={160} position="bottom-end">
+            <Menu.Target>
+              <ActionIcon
+                variant="subtle"
+                color="teal"
+                size="sm"
+                loading={handlers.changingStatusId === row.original.id}
+              >
+                <IconToggleRight size={14} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Label>{t("exam.form.status")}</Menu.Label>
+              {STATUSES.map((status) => (
+                <Menu.Item
+                  key={status}
+                  disabled={status === row.original.status}
+                  onClick={() => handlers.onChangeStatus(row.original, status)}
+                >
+                  {t(`exam.form.${status.toLowerCase()}`)}
+                </Menu.Item>
+              ))}
+            </Menu.Dropdown>
+          </Menu>
           <ActionIcon
             variant="subtle"
             color="blue"

apps/backoffice/src/app/features/exam/pages/ExamPage/index.tsx

@@ -355,6 +355,7 @@ export function ExamPage() {
   const [deleteTarget, setDeleteTarget] = useState<Exam | null>(null);
   const [deleteOpened, { open: openDelete, close: closeDelete }] =
     useDisclosure(false);
+  const [changingStatusId, setChangingStatusId] = useState<string | null>(null);
 
   const certOptions = certifications
     .filter((c) => c.isActive)
@@ -405,6 +406,18 @@ export function ExamPage() {
     }
   };
 
+  const handleChangeStatus = async (exam: Exam, status: Exam["status"]) => {
+    setChangingStatusId(exam.id);
+    try {
+      await updateExam({ id: exam.id, status }).unwrap();
+      notify.success(t("exam.updated"));
+    } catch (e) {
+      handleError(e);
+    } finally {
+      setChangingStatusId(null);
+    }
+  };
+
   const handleDelete = async () => {
     if (!deleteTarget) return;
     try {
@@ -438,6 +451,8 @@ export function ExamPage() {
         openDelete();
       },
       onDetails: (exam) => navigate(`/exams/${exam.id}`),
+      onChangeStatus: handleChangeStatus,
+      changingStatusId,
     }),
   ];
 

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

@@ -1,5 +1,5 @@
 import { Button, Group } from '@mantine/core';
-import { IconEye, IconTrash } from '@tabler/icons-react';
+import { IconEye, IconSend, IconTrash } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -13,6 +13,7 @@ export function resultActionsColumn(
     onQc: (result: Result, action: QcAction) => void;
     onViewDetail: (result: Result) => void;
     onDelete: (result: Result) => void;
+    onPublish: (result: Result) => void;
   },
 ): AdvancedColumn<Result> {
   return {
@@ -49,6 +50,19 @@ export function resultActionsColumn(
               </Button>
             </RequirePermission>
           )}
+          {r.reviewStatus === 'APPROVED' && (
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.PUBLISH_EXAM_RESULT]} hideOnly>
+              <Button
+                size="compact-xs"
+                variant="light"
+                color="teal"
+                leftSection={<IconSend size={13} />}
+                onClick={() => handlers.onPublish(r)}
+              >
+                {t('result.review.publish')}
+              </Button>
+            </RequirePermission>
+          )}
           <Button size="xs" variant="subtle" leftSection={<IconEye size={13} />} onClick={() => handlers.onViewDetail(r)}>
             {t('result.action.viewEdit')}
           </Button>

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

@@ -126,6 +126,8 @@ export function ResultPage() {
   const [detailOpened, { open: openDetail, close: closeDetail }] = useDisclosure(false);
   const [deleteTarget, setDeleteTarget] = useState<Result | null>(null);
   const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+  const [publishTarget, setPublishTarget] = useState<Result | null>(null);
+  const [publishOpened, { open: openPublish, close: closePublish }] = useDisclosure(false);
   const [detailRemark, setDetailRemark] = useState<BilingualValue>({ en: '', am: '' });
   const [detailBreakdowns, setDetailBreakdowns] = useState<ResultBreakdown[]>([]);
   const [detailSaving, setDetailSaving] = useState(false);
@@ -262,6 +264,19 @@ export function ResultPage() {
     }
   };
 
+  /** Same publish call as handlePublish, but scoped to one row's exam — no page filter needed. */
+  const handleConfirmPublish = async () => {
+    if (!publishTarget) return;
+    try {
+      const outcome = await publishResults(publishTarget.examId).unwrap();
+      notify.success(t('result.review.publishedCount', outcome));
+      closePublish();
+      setPublishTarget(null);
+    } catch (error) {
+      notify.error(extractErrorMessage(error, t('result.review.error')));
+    }
+  };
+
   const handleDetailClose = () => {
     closeDetail();
     setDetailBreakdowns([]);
@@ -288,6 +303,7 @@ export function ResultPage() {
       onQc: openQc,
       onViewDetail: viewDetail,
       onDelete: (r) => { setDeleteTarget(r); openDelete(); },
+      onPublish: (r) => { setPublishTarget(r); openPublish(); },
     }),
   ];
 
@@ -584,6 +600,20 @@ export function ResultPage() {
         </ModalFooter>
       </Modal>
 
+      <Modal opened={publishOpened} onClose={closePublish} title={t('result.review.publish')} size="sm">
+        <Text mb="md">
+          {t('result.review.publishConfirmText', {
+            exam: publishTarget ? getExamTitle(publishTarget.examId) : '',
+          })}
+        </Text>
+        <ModalFooter>
+          <Button variant="default" onClick={closePublish} size="sm">{t('result.cancel')}</Button>
+          <Button color="teal" loading={isPublishing} onClick={handleConfirmPublish} size="sm">
+            {t('result.review.publish')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+
       {/* Choose exam, then record */}
       <Modal opened={pickerOpened} onClose={closePicker} title={t('result.record')} size="md" radius="lg">
         <Stack gap="md">

apps/backoffice/src/app/i18n/locales/am.ts

@@ -660,6 +660,8 @@ export const am: Translations = {
       returned: "ውጤት ወደ ፈታኙ ተመልሷል",
       publishedCount: "{{published}} ውጤቶች ወጥተዋል፤ {{skipped}} ተዘለዋል።",
       publishNeedsExam: "ውጤቶችን ለማውጣት መጀመሪያ በፈተና ያጣሩ።",
+      publishConfirmText:
+        "ይህ ለ{{exam}} የጸደቁትን ሁሉንም ውጤቶች ያወጣል — ይህን ብቻ አይደለም — እና እያንዳንዱን ተፈታኝ ያሳውቃል። ይቀጥል?",
       lockedAfterApproval: "ይህ ውጤት ጸድቋል፤ ማስተካከል አይቻልም። መጀመሪያ ወደ ፈታኙ ይመልሱት።",
       originalScore: "የፈታኙ ጠቅላላ",
       derivedStatus: "ውጤት (ከማለፊያ ነጥብ የተገኘ)",

apps/backoffice/src/app/i18n/locales/en.ts

@@ -660,6 +660,8 @@ export const en = {
       returned: 'Result returned to the examiner',
       publishedCount: 'Published {{published}} result(s); {{skipped}} skipped.',
       publishNeedsExam: 'Filter by an exam first to publish its results.',
+      publishConfirmText:
+        'This publishes every approved result for {{exam}} — not just this one — and notifies each candidate. Continue?',
       lockedAfterApproval:
         'This result is approved and can no longer be edited. Return it to the examiner first.',
       originalScore: 'Examiner total',