refactor(admin): align admin ui with app design language

- dashboard: card grid replaced by status strip + nav-tile section + list - nav-tile promoted to shared component - stat tiles and usage screen de-carded, sections divided like settings - hub run tournament back to a list row - telemetry link restored in tools list
2026-08-25 22:24:36 -07:00
parent 895737febc
commit 1cc75591fa
22 changed files with 511 additions and 799 deletions
@@ -0,0 +1,74 @@
+import { useMemo } from "react";
+import { Group, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useLingui } from "@lingui/react/macro";
+import { useNavigate } from "@tanstack/react-router";
+import {
+  useClientErrorGroups,
+  useRollupRange,
+  useTelemetryRuntimeStatus,
+} from "@/features/telemetry/queries";
+import { isoDay, lastNDays } from "@/features/telemetry/range";
+
+interface StatProps {
+  value: string | number;
+  label: string;
+  alert?: boolean;
+  onClick: () => void;
+}
+
+const Stat = ({ value, label, alert, onClick }: StatProps) => (
+  <UnstyledButton className="flxn-press" onClick={onClick}>
+    <Stack gap={0} align="center">
+      <Text fz="lg" fw={700} lh={1.3} c={alert ? "red" : undefined}>
+        {value}
+      </Text>
+      <Text size="xs" c="dimmed">
+        {label}
+      </Text>
+    </Stack>
+  </UnstyledButton>
+);
+
+export const StatusStrip = () => {
+  const { t } = useLingui();
+  const navigate = useNavigate();
+  const today = useMemo(() => isoDay(new Date()), []);
+  const month = useMemo(() => lastNDays(30), []);
+
+  const { data: status } = useTelemetryRuntimeStatus();
+  const { data: errorGroups } = useClientErrorGroups({ from: month.from, to: month.to });
+  const { data: rollups } = useRollupRange({
+    metrics: ["server_fn.count"],
+    from: today,
+    to: today,
+  });
+
+  const callsToday = useMemo(
+    () => (rollups ?? []).reduce((sum, row) => sum + row.value, 0),
+    [rollups]
+  );
+  const openErrors = errorGroups?.length ?? 0;
+
+  return (
+    <Group grow>
+      <Stat
+        value={status?.activeSseConnections ?? 0}
+        label={t`Online`}
+        onClick={() => navigate({ to: "/admin/telemetry/players" })}
+      />
+      <Stat
+        value={openErrors}
+        label={t`Open errors`}
+        alert={openErrors > 0}
+        onClick={() => navigate({ to: "/admin/telemetry/errors" })}
+      />
+      <Stat
+        value={callsToday.toLocaleString()}
+        label={t`Calls today`}
+        onClick={() => navigate({ to: "/admin/telemetry/usage" })}
+      />
+    </Group>
+  );
+};
+
+export default StatusStrip;