feat(dashboard): enhance dashboard with stat tiles for better data visualization

apps/backoffice/src/app/features/dashboard/pages/DashboardPage/index.tsx

@@ -1,16 +1,42 @@
 import { useNavigate } from 'react-router-dom';
-import {Card, Center, Container, Group, Loader, SimpleGrid, Text} from '@mantine/core';
-import { IconChevronRight } from '@tabler/icons-react';
-import { useGetAssignedToMeQuery, useGetQueueQuery } from '@ema-platform/api';
-import { AdvancedTable, PageHeader, PageLoader, useServerTable } from '@ema-platform/ui';
+import { Anchor, Grid, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import {
+  IconAlertTriangle,
+  IconCreditCard,
+  IconFileText,
+  IconInbox,
+  IconUserCheck,
+} from '@tabler/icons-react';
+import {
+  useGetAssignedToMeQuery,
+  useGetQueueQuery,
+  useListSeafarerDocumentsQuery,
+  useListSeafarerRegistrationsQuery,
+  type LicenseApplication,
+} from '@ema-platform/api';
+import {
+  AdvancedTable,
+  PageHeader,
+  PageLoader,
+  StatTile,
+  WaitingFor,
+  useServerTable,
+} from '@ema-platform/ui';
 import { dashboardQueueColumns } from './columns';
 
 /**
  * Backoffice home.
  *
- * Shows the licence pipeline, which is the part of the platform that has real
- * data behind it. The previous version charted invented registration volumes
- * and a fictional breakdown of staff roles.
+ * Every figure here is counted from a queue the officer can open, and each
+ * tile navigates to the list it counted — a dashboard that cannot be drilled
+ * into is a poster. Nothing is charted: the platform exposes queues, not time
+ * series, and an earlier version of this page invented both a registration
+ * trend and a staff-role breakdown rather than admit that.
+ *
+ * The seafarer counts are fetched with `take: 1`, for `total` alone. Both
+ * queues are permission-gated and an officer without them simply gets no
+ * count — never a broken page — so the tiles read `—` rather than `0`, which
+ * would be a lie.
  */
 export function DashboardPage() {
   const navigate = useNavigate();
@@ -18,6 +44,13 @@ export function DashboardPage() {
   const mine = useGetAssignedToMeQuery();
   const table = useServerTable();
 
+  const registrations = useListSeafarerRegistrationsQuery({ status: 'SUBMITTED', take: 1 });
+  const seamanBooks = useListSeafarerDocumentsQuery({
+    kind: 'SEAMAN_BOOK',
+    status: 'PAYMENT_PENDING',
+    take: 1,
+  });
+
   if (queue.isLoading || mine.isLoading) {
     return <PageLoader label="Loading Backoffice Dashboard…" height={400} />;
   }
@@ -25,71 +58,143 @@ export function DashboardPage() {
   const unclaimed = queue.data?.items ?? [];
   const inProgress = mine.data?.items ?? [];
   const all = [...unclaimed, ...inProgress];
-  const paged = table.paginate(unclaimed.slice(0, 8));
 
-  const stats = [
-    { label: 'Awaiting claim', value: unclaimed.length, color: 'blue' },
-    { label: 'Assigned to me', value: inProgress.length, color: 'indigo' },
-    {
-      label: 'Needs applicant action',
-      value: all.filter((a) => a.status === 'RESUBMIT_REQUIRED').length,
-      color: 'orange',
-    },
-    {
-      label: 'Awaiting payment',
-      value: all.filter((a) => a.status === 'PAYMENT_PENDING').length,
-      color: 'yellow',
-    },
-  ];
+  const needsApplicant = all.filter((a) => a.status === 'RESUBMIT_REQUIRED').length;
+  const awaitingPayment = all.filter((a) => a.status === 'PAYMENT_PENDING').length;
+
+  /** Oldest first: a queue is worked by age, so the dashboard previews it that way. */
+  const byAge = [...unclaimed].sort((a, b) =>
+    (a.submittedAt ?? a.createdAt).localeCompare(b.submittedAt ?? b.createdAt),
+  );
+  const paged = table.paginate(byAge.slice(0, 8));
+
+  /** `undefined` while loading or forbidden — rendered as "—", never as 0. */
+  const countOf = (q: { data?: { total: number }; isError: boolean }) =>
+    q.isError ? undefined : q.data?.total;
+
+  const show = (n: number | undefined) => (n === undefined ? '—' : n);
 
   return (
-    <Container size="xl" py="md">
+    <Stack gap="lg">
       <PageHeader
         title="Dashboard"
-        subtitle="Licence applications currently in the system."
+        subtitle="Work waiting across the Authority's review queues."
+        noMargin
       />
 
-      <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} mb="xl">
-        {stats.map((stat) => (
-          <Card withBorder key={stat.label} padding="md" radius="md">
-            <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-              {stat.label}
-            </Text>
-            <Text fz={32} fw={700} c={stat.color} lh={1.2}>
-              {stat.value}
-            </Text>
-          </Card>
-        ))}
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
+        <StatTile
+          label="Awaiting claim"
+          value={unclaimed.length}
+          hint="Licence applications nobody has picked up"
+          icon={IconInbox}
+          tone="info"
+          onClick={() => navigate('/licence-review')}
+        />
+        <StatTile
+          label="Assigned to me"
+          value={inProgress.length}
+          hint="Your open licence reviews"
+          icon={IconFileText}
+          tone="neutral"
+          onClick={() => navigate('/licence-review')}
+        />
+        <StatTile
+          label="Needs applicant action"
+          value={needsApplicant}
+          hint="Returned for corrections"
+          icon={IconAlertTriangle}
+          tone="pending"
+        />
+        <StatTile
+          label="Awaiting payment"
+          value={awaitingPayment}
+          hint="Approved, fee not yet settled"
+          icon={IconCreditCard}
+          tone="warning"
+        />
       </SimpleGrid>
 
-      <Card withBorder padding={0} radius="md">
-        <Group justify="space-between" p="md" pb="xs">
-          <Text fw={600} size="sm">
-            Awaiting claim
-          </Text>
-          <Text
-            size="xs"
-            c="blue"
-            style={{ cursor: 'pointer' }}
-            onClick={() => navigate('/licence-review')}
-          >
-            Open queue <IconChevronRight size={11} style={{ verticalAlign: -1 }} />
-          </Text>
-        </Group>
-        <AdvancedTable
-          tableName="Awaiting claim"
-          columns={dashboardQueueColumns}
-          data={paged.rows}
-          itemCount={paged.itemCount}
-          pageIndex={paged.pageIndex}
-          onPageChange={table.setPageIndex}
-          pageSize={table.pageSize}
-          onRowClick={() => navigate('/licence-review')}
-          refresh={queue.refetch}
-          emptyText="Nothing waiting to be claimed."
+      {/* Same 4-column track as the row above, so a two-tile row lines up with
+          it instead of stretching each tile to half the page. */}
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
+        <StatTile
+          label="Seafarer registrations"
+          value={show(countOf(registrations))}
+          hint="Submitted, awaiting review"
+          icon={IconUserCheck}
+          tone="info"
+          onClick={() => navigate('/seafarer-registrations')}
         />
-      </Card>
-    </Container>
+        <StatTile
+          label="Seaman books"
+          value={show(countOf(seamanBooks))}
+          hint="Released, awaiting payment"
+          icon={IconCreditCard}
+          tone="pending"
+          onClick={() => navigate('/seaman-book-queue')}
+        />
+      </SimpleGrid>
+
+      <Grid gutter="lg">
+        <Grid.Col span={{ base: 12, lg: 8 }}>
+          <AdvancedTable<LicenseApplication>
+            title="Awaiting claim — oldest first"
+            tableName="Awaiting claim"
+            columns={dashboardQueueColumns}
+            data={paged.rows}
+            itemCount={paged.itemCount}
+            pageIndex={paged.pageIndex}
+            onPageChange={table.setPageIndex}
+            pageSize={table.pageSize}
+            onRowClick={(row) => navigate(`/licence-review/${row.id}`)}
+            refresh={queue.refetch}
+            isLoading={queue.isFetching}
+            emptyText="Nothing waiting to be claimed."
+            toolbar={
+              <Anchor size="sm" onClick={() => navigate('/licence-review')}>
+                Open queue
+              </Anchor>
+            }
+          />
+        </Grid.Col>
+
+        <Grid.Col span={{ base: 12, lg: 4 }}>
+          <Paper withBorder radius="lg" p="lg" h="100%">
+            <Text fw={600} size="sm" mb="xs">
+              Longest waiting
+            </Text>
+            <Text size="xs" c="dimmed" mb="md">
+              Unclaimed applications, by how long they have sat.
+            </Text>
+            <Stack gap="sm">
+              {byAge.slice(0, 5).map((app) => (
+                <Group key={app.id} justify="space-between" wrap="nowrap" gap="sm">
+                  <Anchor
+                    size="sm"
+                    lineClamp={1}
+                    onClick={() => navigate(`/licence-review/${app.id}`)}
+                  >
+                    {app.applicationNumber}
+                  </Anchor>
+                  <WaitingFor
+                    since={app.submittedAt ?? app.createdAt}
+                    slaDays={
+                      app.licenseType?.slaHours ? app.licenseType.slaHours / 24 : undefined
+                    }
+                  />
+                </Group>
+              ))}
+              {byAge.length === 0 && (
+                <Text size="sm" c="dimmed">
+                  Nothing waiting.
+                </Text>
+              )}
+            </Stack>
+          </Paper>
+        </Grid.Col>
+      </Grid>
+    </Stack>
   );
 }