feat: update routing and navigation for Basic Training Certificate and Seaman Book applications

apps/backoffice/src/app/features/license-review/pages/LicenseReviewPage/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   ActionIcon,
   Alert,
@@ -146,6 +146,7 @@ function buildChecklist(
  * position instead of scrolling back to a column of buttons.
  */
 export function LicenseReviewPage() {
+  const navigate = useNavigate();
   const { t, i18n } = useTranslation();
   const showDate = useDateDisplayer();
   const localized = useLocalized();
@@ -672,6 +673,12 @@ export function LicenseReviewPage() {
     applicantFullName ||
     applicantOrCompanyName(app) ||
     app.applicationNumber;
+  const linkedBookServices = (data.relatedApplications ?? []).filter(
+    (related) =>
+      ["SEAMAN_BOOK", "BTC_BASIC_TRAINING"].includes(
+        related.licenseType?.key ?? "",
+      ),
+  );
 
   return (
     <Container size="xl" py="md">
@@ -694,6 +701,25 @@ export function LicenseReviewPage() {
               </Badge>
             )}
           </Group>
+          {linkedBookServices.length > 1 && (
+            <Group gap="xs" mt="xs">
+              {linkedBookServices.map((related) => (
+                <Badge
+                  key={related.id}
+                  variant={related.id === app.id ? "filled" : "outline"}
+                  color={STATUS_COLORS[related.status]}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => navigate(`/licence-review/${related.id}`)}
+                >
+                  {related.licenseType?.key === "SEAMAN_BOOK"
+                    ? "Seaman Book"
+                    : "BTC"}{" "}
+                  · {related.applicationNumber} ·{" "}
+                  {STATUS_LABELS[related.status]}
+                </Badge>
+              ))}
+            </Group>
+          )}
         </div>
         <Group gap="xs">
           <Tooltip
@@ -1186,13 +1212,16 @@ export function LicenseReviewPage() {
               disabled={!issuanceDate}
               aria-label={t("review.schedule", "Schedule")}
               onClick={() =>
-                run(async () => {
-                  await scheduleIssuance({
-                    id,
-                    scheduledDate: issuanceDate,
-                  }).unwrap();
-                  setIssuanceOpen(false);
-                }, t("review.done.scheduleIssuance", "Pickup scheduled"))
+                run(
+                  async () => {
+                    await scheduleIssuance({
+                      id,
+                      scheduledDate: issuanceDate,
+                    }).unwrap();
+                    setIssuanceOpen(false);
+                  },
+                  t("review.done.scheduleIssuance", "Pickup scheduled"),
+                )
               }
             >
               <IconCheck size={18} />