refactor(admin): drop status strip from dashboard; full-bleed usage tab

- admin home is tournament section + tools list only
- usage route matches sibling tabs (fullWidth, no shell padding); screen
  pads its own content so the tab bar stays flush
This commit is contained in:
2026-08-25 23:22:21 -07:00
parent 6dff5f19c1
commit 31f6237446
9 changed files with 8 additions and 162 deletions
@@ -1,24 +1,10 @@
import { Suspense } from "react";
import { Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";
import { SimpleGrid, Skeleton } from "@mantine/core";
import QuietBoundary from "./quiet-boundary";
import SectionBox from "./section-box";
import StatusStrip from "./status-strip";
import TournamentSection from "./tournament-section";
import ToolsList from "./tools-list";
const StripSkeleton = () => (
<SectionBox>
<Group grow>
{[0, 1, 2].map((i) => (
<Stack key={i} gap={4} align="center">
<Skeleton height={22} width={32} radius="sm" />
<Skeleton height={10} width={56} radius="sm" />
</Stack>
))}
</Group>
</SectionBox>
);
const TournamentSkeleton = () => (
<SectionBox>
<Skeleton height={24} width={180} radius="sm" />
@@ -32,13 +18,6 @@ const TournamentSkeleton = () => (
export const AdminDashboard = () => (
<>
<QuietBoundary>
<Suspense fallback={<StripSkeleton />}>
<SectionBox>
<StatusStrip />
</SectionBox>
</Suspense>
</QuietBoundary>
<QuietBoundary>
<Suspense fallback={<TournamentSkeleton />}>
<TournamentSection />
@@ -1,74 +0,0 @@
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;
@@ -255,7 +255,7 @@ export const UsageScreen = () => {
const range = useMemo(() => lastNDays(Number(rangeDays)), [rangeDays]);
return (
<Stack gap="md">
<Stack gap="md" px="md" pb="md">
<SegmentedControl
value={rangeDays}
onChange={(value) => setRangeDays(value as "7" | "30")}