feat(LicenseReviewPage): refactor staff evidence display to use StaffEvidenceCell component for better maintainability

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

@@ -45,6 +45,7 @@ import {
   useEscalateApplicationMutation,
   useFinalApproveMutation,
   useGetApplicationForReviewQuery,
+  useGetAttachmentsQuery,
   useGetInspectionsQuery,
   useGetAssignableOfficersQuery,
   useGetLicenseTypeRequirementsQuery,
@@ -757,25 +758,7 @@ export function LicenseReviewPage() {
                           <Text size="sm">{member.fullName}</Text>
                         </Table.Td>
                         <Table.Td>
-                          <Group gap={4}>
-                            {(member.documents ?? []).map((doc) => {
-                              const url = doc.files?.[0]?.url;
-                              return (
-                                <Badge
-                                  key={doc.id}
-                                  size="xs"
-                                  variant="light"
-                                  component={url ? 'a' : undefined}
-                                  href={url}
-                                  target={url ? '_blank' : undefined}
-                                  rel={url ? 'noreferrer' : undefined}
-                                  style={url ? { cursor: 'pointer' } : undefined}
-                                >
-                                  {doc.documentKey}
-                                </Badge>
-                              );
-                            })}
-                          </Group>
+                          <StaffEvidenceCell staffId={member.id} fallback={member.documents} />
                         </Table.Td>
                         {/* A person's papers are as returnable as a document
                             or a form section: an ERB certificate for the wrong
@@ -1013,6 +996,51 @@ export function LicenseReviewPage() {
   );
 }
 
+/**
+ * Evidence badges for one staff member.
+ *
+ * `application-for-review` nests a `documents` array per staff member, but it
+ * doesn't always carry the uploaded file (the portal's own upload widget
+ * hits the attachments endpoint directly for the same reason). Query
+ * attachments by owner here too, so the officer gets a working link instead
+ * of a badge with nowhere to go.
+ */
+function StaffEvidenceCell({
+  staffId,
+  fallback,
+}: {
+  staffId: string;
+  fallback?: { id: string; documentKey: string; files: { url?: string }[] }[];
+}) {
+  const { data: attachments } = useGetAttachmentsQuery({
+    ownerType: 'APPLICATION_STAFF',
+    ownerId: staffId,
+  });
+  const docs = attachments?.length ? attachments : (fallback ?? []);
+
+  return (
+    <Group gap={4}>
+      {docs.map((doc) => {
+        const url = doc.files?.[0]?.url;
+        return (
+          <Badge
+            key={doc.id}
+            size="xs"
+            variant="light"
+            component={url ? 'a' : undefined}
+            href={url}
+            target={url ? '_blank' : undefined}
+            rel={url ? 'noreferrer' : undefined}
+            style={url ? { cursor: 'pointer' } : undefined}
+          >
+            {doc.documentKey}
+          </Badge>
+        );
+      })}
+    </Group>
+  );
+}
+
 function SummaryRow({ label, value }: { label: string; value?: string | null }) {
   return (
     <Group justify="space-between" gap="xs" wrap="nowrap">