feat(backoffice): add an Account tab with the customer's portal logins

The detail page showed the company's business contact details but not the
credentials anyone actually signs in with, and the two drift apart
routinely — so "the customer says they can't log in" was unanswerable
from this screen.

Adds `GET /backoffice/customers/:companyId/accounts`, joining each
external profile to its IAM account, primary contact first. Deliberately
not filtered to active accounts: a suspended or never-activated login is
exactly the case being looked into. The user query selects columns
explicitly — the entity's relations include credentials and sessions, and
this response reaches a browser.

Rendered as cards rather than a table: it is a handful of rows of
mostly-optional fields, which a table renders as a field of dashes.
"Password never set" is called out on its own, being the usual answer to
"they never got in", and a profile whose IAM user is gone reads as a red
fault rather than an inactive status.

apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx

@@ -29,6 +29,7 @@ import {
   FileText,
   History,
   Hourglass,
+  KeyRound,
   IdCard,
   LayoutGrid,
   Package,
@@ -43,6 +44,7 @@ import { useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
 import {
+  AccountCard,
   BookingStatusBadge,
   ChangeRequestPendingBadge,
   ChangeRequestReview,
@@ -157,6 +159,12 @@ export default function CustomerDetailPage() {
       enabled: Boolean(id),
     }),
   );
+  const accountsQuery = useQuery(
+    api.customers.accounts.queryOptions({
+      input: { companyId: id ?? "" },
+      enabled: Boolean(id),
+    }),
+  );
   const documentsQuery = useQuery(
     api.customers.documents.queryOptions({
       input: { id: id ?? "" },
@@ -823,6 +831,9 @@ export default function CustomerDetailPage() {
           <Tabs.Tab value="invoices" leftSection={<Receipt size={16} />}>
             Invoices
           </Tabs.Tab>
+          <Tabs.Tab value="accounts" leftSection={<KeyRound size={16} />}>
+            Account
+          </Tabs.Tab>
           <Tabs.Tab value="history" leftSection={<History size={16} />}>
             History
           </Tabs.Tab>
@@ -1488,6 +1499,51 @@ export default function CustomerDetailPage() {
         </Tabs.Panel>
 
         {/* HISTORY */}
+        {/* ACCOUNT — the IAM logins behind this customer. Distinct from the
+            contact details on Overview: those are business contact info on the
+            company row, these are the credentials someone actually signs in
+            with, and the two drift apart routinely. Cards rather than a table:
+            it is a handful of rows of mostly-optional detail, which a table
+            renders as a field of dashes. */}
+        <Tabs.Panel value="accounts" pt="lg">
+          {accountsQuery.isLoading ? (
+            <Center py="xl">
+              <Loader size="sm" color="edr-green" />
+            </Center>
+          ) : accountsQuery.isError ? (
+            <Alert
+              color="red"
+              icon={<AlertTriangle size={16} />}
+              title="Failed to load accounts"
+            >
+              <Group justify="space-between" align="center">
+                <Text size="sm">
+                  We couldn't load this customer's portal logins.
+                </Text>
+                <Button
+                  size="xs"
+                  variant="light"
+                  onClick={() => void accountsQuery.refetch()}
+                >
+                  Retry
+                </Button>
+              </Group>
+            </Alert>
+          ) : (accountsQuery.data?.length ?? 0) === 0 ? (
+            <Card>
+              <Text size="sm" c="edr-muted" ta="center" py="md">
+                This customer has no portal login yet.
+              </Text>
+            </Card>
+          ) : (
+            <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
+              {accountsQuery.data?.map((account) => (
+                <AccountCard key={account.profileId} account={account} />
+              ))}
+            </SimpleGrid>
+          )}
+        </Tabs.Panel>
+
         <Tabs.Panel value="history" pt="lg">
           <CompanyTimeline company={company} />
         </Tabs.Panel>