[] = useMemo(
+ () => [
+ {
+ header: 'Request №',
+ accessorKey: 'requestNumber',
+ cell: ({ row }) => (
+
+
+ {row.original.requestNumber}
+
+ {row.original.documentNumber && (
+
+ {row.original.documentNumber}
+
+ )}
+
+ ),
+ },
+ {
+ header: 'Seafarer',
+ accessorKey: 'applicant.name',
+ cell: ({ row }) => (
+
+
+ {row.original.applicant?.name ?? '—'}
+
+
+ {row.original.applicant?.seafarerNumber ?? '—'}
+
+
+ ),
+ },
+ {
+ header: 'Fee',
+ accessorKey: 'feeAmount',
+ cell: ({ row }) => (
+
+ {row.original.feeAmount !== null ? `${row.original.feeAmount} ${row.original.feeCurrency}` : '—'}
+
+ ),
+ },
+ {
+ header: 'Released',
+ accessorKey: 'submittedAt',
+ cell: ({ row }) => (
+ {row.original.submittedAt ? showDate(row.original.submittedAt) : '—'}
+ ),
+ },
+ {
+ header: 'Status',
+ accessorKey: 'status',
+ cell: ({ row }) => (
+
+ {SEAFARER_DOCUMENT_STATUS_LABELS[row.original.status]}
+
+ ),
+ },
+ ],
+ [showDate],
+ );
+
+ return (
+
+
+ {SEAFARER_DOCUMENT_KIND_LABELS[kind]} Queue
+
+
+ Requests released by an approved seafarer registration: confirm payment, schedule the
+ collection date, then issue.
+
+
+ }
+ value={search}
+ onChange={(e) => {
+ setSearch(e.currentTarget.value);
+ setPage(0);
+ }}
+ w={280}
+ />
+
+ {
+ setPageSize(size);
+ setPage(0);
+ }}
+ refresh={refetch}
+ isLoading={isLoading || isFetching}
+ emptyText="No requests match."
+ onRowClick={(row) => navigate(`/seafarer-documents/${row.id}`)}
+ />
+
+ );
+}
+
+export const SeamanBookQueuePage = () => ;
+export const BtcQueuePage = () => ;
diff --git a/apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentReviewPage.tsx b/apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentReviewPage.tsx
new file mode 100644
index 000000000..a090bd576
--- /dev/null
+++ b/apps/backoffice/src/app/features/seafarer-document-review/pages/SeafarerDocumentReviewPage.tsx
@@ -0,0 +1,276 @@
+import { useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import {
+ Alert,
+ Badge,
+ Button,
+ Center,
+ Container,
+ Group,
+ Loader,
+ Modal,
+ Paper,
+ Stack,
+ Table,
+ Text,
+ Textarea,
+ Title,
+} from '@mantine/core';
+import { IconAlertTriangle, IconArrowLeft, IconCheck, IconDownload } from '@tabler/icons-react';
+import {
+ SEAFARER_DOCUMENT_KIND_LABELS,
+ SEAFARER_DOCUMENT_STATUS_COLORS,
+ SEAFARER_DOCUMENT_STATUS_LABELS,
+ extractErrorMessage,
+ useConfirmSeafarerDocumentPaymentMutation,
+ useGetSeafarerDocumentReviewQuery,
+ useIssueSeafarerDocumentMutation,
+ useLazyGetSeafarerDocumentReviewDownloadQuery,
+ useRejectSeafarerDocumentMutation,
+ useScheduleSeafarerDocumentMutation,
+} from '@ema-platform/api';
+import { AmharicDatePicker, notify } from '@ema-platform/ui';
+import { useDateDisplayer } from '@ema-platform/shared';
+import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
+
+const QUEUE_PATH = { SEAMAN_BOOK: '/seaman-book-queue', BTC_BASIC_TRAINING: '/btc-queue' } as const;
+
+function Row({ label, value }: { label: string; value: React.ReactNode }) {
+ return (
+
+
+
+ {label}
+
+
+
+
+ {value ?? '—'}
+
+
+
+ );
+}
+
+/** One Seaman Book / BTC request: payment → collection date → issue, or reject. */
+export function SeafarerDocumentReviewPage() {
+ const { id = '' } = useParams();
+ const navigate = useNavigate();
+ const showDate = useDateDisplayer();
+ const { data, isLoading, error } = useGetSeafarerDocumentReviewQuery(id, { skip: !id });
+
+ const [confirmPayment, { isLoading: confirming }] = useConfirmSeafarerDocumentPaymentMutation();
+ const [schedule, { isLoading: scheduling }] = useScheduleSeafarerDocumentMutation();
+ const [issue, { isLoading: issuing }] = useIssueSeafarerDocumentMutation();
+ const [reject, { isLoading: rejecting }] = useRejectSeafarerDocumentMutation();
+ const [getDownload, { isFetching: downloading }] = useLazyGetSeafarerDocumentReviewDownloadQuery();
+
+ const [scheduleOpen, setScheduleOpen] = useState(false);
+ const [pickupDate, setPickupDate] = useState('');
+ const [rejectOpen, setRejectOpen] = useState(false);
+ const [reason, setReason] = useState('');
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+ if (error || !data) {
+ return (
+
+ }>
+ {extractErrorMessage(error, 'Could not load this request.')}
+
+
+ );
+ }
+
+ const { document, applicant, payment } = data;
+ const kindLabel = SEAFARER_DOCUMENT_KIND_LABELS[document.kind];
+ const terminal = ['ISSUED', 'REJECTED', 'CANCELLED'].includes(document.status);
+
+ async function run(action: () => Promise, done: string) {
+ try {
+ await action();
+ notify.success(done);
+ setScheduleOpen(false);
+ setRejectOpen(false);
+ setReason('');
+ } catch (err) {
+ notify.error(extractErrorMessage(err, 'Could not record the action'));
+ }
+ }
+
+ async function download() {
+ try {
+ const { url } = await getDownload(id).unwrap();
+ window.open(url, '_blank', 'noopener');
+ } catch (err) {
+ notify.error(extractErrorMessage(err, 'Could not fetch the PDF'));
+ }
+ }
+
+ return (
+
+ }
+ onClick={() => navigate(QUEUE_PATH[document.kind])}
+ mb="xs"
+ >
+ Back to queue
+
+
+
+
+ {kindLabel} — {applicant?.name ?? '—'}
+
+
+
+ {document.requestNumber}
+
+
+ {SEAFARER_DOCUMENT_STATUS_LABELS[document.status]}
+
+ {document.documentNumber && (
+ }>
+ {document.documentNumber}
+
+ )}
+
+
+
+ {(document.status === 'PAYMENT_PENDING' || document.status === 'PAID') && (
+
+
+
+ )}
+ {document.status === 'PAYMENT_CONFIRMED' && (
+
+
+
+ )}
+ {(document.status === 'SCHEDULED' || document.status === 'PAYMENT_CONFIRMED') && (
+
+
+
+ )}
+ {document.status === 'ISSUED' && (
+ } loading={downloading} onClick={download}>
+ Download PDF
+
+ )}
+ {!terminal && (
+
+
+
+ )}
+
+
+
+ {document.status === 'REJECTED' && (
+ } title="Rejected" mb="md">
+ {document.rejectionReason}
+
+ )}
+
+
+
+
+
+ Seafarer
+
+
+
+ |
+ |
+
+ {applicant.registrationNumber}
+
+ ) : (
+ applicant?.registrationNumber
+ )
+ }
+ />
+
+
+