feat(backoffice): show each role's eTrade business on the customer detail page

The reviewer approving a role had no way to see which business it claims
to operate as, so there was nothing to check the uploaded licence
document against. The Role profiles table now carries a column with the
trade name, the licensed activity (does it actually cover this role?),
the licence number (the only unambiguous handle — trade names repeat
across a TIN's licences) and the renewal date.

A role with nothing attached reads as a yellow "Not attached" rather than
a blank: it is a review finding. Yellow, not red, because a co-operative
or investment-licence company legitimately has none.

Two fixes alongside it:

- The profile reference was already rendered but is minted only on
  approval, so every pending role drew an empty line. It now says so.
- `TableCard` gained an optional header section, so padding sits per
  section and the table runs edge to edge. The header stays outside the
  scroll region — inside, a title slides away from its own table.

apps/edr-freight-web/backoffice/src/components/customers/TableCard.tsx

@@ -3,6 +3,12 @@ import type { ReactNode } from "react";
 
 export interface TableCardProps {
   children: ReactNode;
+  /**
+   * Optional heading row (title, chips, actions). Rendered in its own padded
+   * section above the table and OUTSIDE the scroll region — a header inside it
+   * would slide away from its own table on a narrow viewport.
+   */
+  header?: ReactNode;
   /**
    * Minimum width (px) the table is forced to occupy. The Mantine `Table` is
    * always `width: 100%`, so without a floor it can never overflow its
@@ -14,14 +20,27 @@ export interface TableCardProps {
 }
 
 /**
- * Flush card shell for a `DataTable`: a borderless, padding-less card whose
- * single child is a horizontally scrollable region. Pair with the table's
- * `containerClassName="border-0 shadow-none bg-transparent"` so every table on
- * the customer pages reads identically (same surface, same scroll behaviour).
+ * Flush card shell for a `DataTable`: a padding-less card whose table region
+ * runs edge to edge. Padding is applied per section rather than to the card, so
+ * the optional {@link TableCardProps.header} is inset like any other card
+ * content while the table's own rows and header cells reach both edges.
+ *
+ * Pair with the table's `containerClassName="border-0 shadow-none bg-transparent"`
+ * so every table on the customer pages reads identically (same surface, same
+ * scroll behaviour).
  */
-export function TableCard({ children, minWidth = 860 }: TableCardProps) {
+export function TableCard({
+  children,
+  minWidth = 860,
+  header,
+}: TableCardProps) {
   return (
     <Card p={0}>
+      {header && (
+        <Box p="md" style={{ borderBottom: "1px solid var(--mantine-color-edr-border-0)" }}>
+          {header}
+        </Box>
+      )}
       <Box style={{ overflowX: "auto" }} w="100%">
         <Box miw={minWidth}>{children}</Box>
       </Box>