kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
kyle
2026-08-25 23:22:21 -07:00
parent 6dff5f19c1
commit 31f6237446
9 changed files with 8 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/routes/_authed/admin/index.tsx
-13
View File
@@ -2,24 +2,11 @@ import { createFileRoute } from "@tanstack/react-router";
import { msg } from "@lingui/core/macro";
import { AdminDashboard } from "@/features/admin";
import { tournamentQueries } from "@/features/tournaments/queries";
import { telemetryQueries } from "@/features/telemetry/queries";
import { isoDay, lastNDays } from "@/features/telemetry/range";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
export const Route = createFileRoute("/_authed/admin/")({
beforeLoad: ({ context }) => {
prefetchServerQuery(context.queryClient, tournamentQueries.current());
prefetchServerQuery(context.queryClient, telemetryQueries.runtimeStatus());
const month = lastNDays(30);
prefetchServerQuery(
context.queryClient,
telemetryQueries.errorGroups({ from: month.from, to: month.to })
);
const today = isoDay(new Date());
prefetchServerQuery(
context.queryClient,
telemetryQueries.rollups({ metrics: ["server_fn.count"], from: today, to: today })
);
},
loader: () => ({
header: {
src/app/routes/_authed/admin/telemetry/usage.tsx
+2
View File
@@ -10,6 +10,8 @@ export const Route = createFileRoute("/_authed/admin/telemetry/usage")({
prefetchServerQuery(context.queryClient, telemetryQueries.rollups(defaultUsageParams()));
},
loader: () => ({
withPadding: false,
fullWidth: true,
refresh: [telemetryQueries.rollups(defaultUsageParams()).queryKey],
}),
});
src/features/admin/components/dashboard/index.tsx
+1 -22
View File
@@ -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 />
src/features/admin/components/dashboard/status-strip.tsx
-74
View File
@@ -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;
src/features/telemetry/components/usage-screen.tsx
+1 -1
View File
@@ -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")}
src/locales/de/messages.po
+1 -13
View File
@@ -446,7 +446,7 @@ msgid "Add Team"
msgstr "Team hinzufügen"
#: src/app/routes/_authed/admin.tsx:15
#: src/app/routes/_authed/admin/index.tsx:27
#: src/app/routes/_authed/admin/index.tsx:14
#: src/features/core/hooks/use-links.ts:37
msgid "Admin"
msgstr "Admin"
@@ -660,10 +660,6 @@ msgstr "Brutal"
msgid "CA"
msgstr "CA"
#: src/features/admin/components/dashboard/status-strip.tsx:67
msgid "Calls today"
msgstr "Aufrufe heute"
#: src/components/sheet/slide-panel/slide-panel.tsx:41
#: src/components/sheet/slide-panel/slide-panel.tsx:190
#: src/features/bracket/components/match-form.tsx:160
@@ -1879,14 +1875,6 @@ msgstr "Sobald du angemeldet bist, kannst du andere Free Agents und ihre Telefon
msgid "One time code"
msgstr "Einmalcode"
#: src/features/admin/components/dashboard/status-strip.tsx:56
msgid "Online"
msgstr "Online"
#: src/features/admin/components/dashboard/status-strip.tsx:61
msgid "Open errors"
msgstr "Offene Fehler"
#: src/features/admin/components/dashboard/tools-list.tsx:95
msgid "Open Pocketbase"
msgstr "Pocketbase öffnen"
src/locales/en/messages.po
+1 -13
View File
@@ -446,7 +446,7 @@ msgid "Add Team"
msgstr "Add Team"
#: src/app/routes/_authed/admin.tsx:15
#: src/app/routes/_authed/admin/index.tsx:27
#: src/app/routes/_authed/admin/index.tsx:14
#: src/features/core/hooks/use-links.ts:37
msgid "Admin"
msgstr "Admin"
@@ -660,10 +660,6 @@ msgstr "Brutal"
msgid "CA"
msgstr "CA"
#: src/features/admin/components/dashboard/status-strip.tsx:67
msgid "Calls today"
msgstr "Calls today"
#: src/components/sheet/slide-panel/slide-panel.tsx:41
#: src/components/sheet/slide-panel/slide-panel.tsx:190
#: src/features/bracket/components/match-form.tsx:160
@@ -1879,14 +1875,6 @@ msgstr "Once enrolled, you can view other free agents and their phone number in
msgid "One time code"
msgstr "One time code"
#: src/features/admin/components/dashboard/status-strip.tsx:56
msgid "Online"
msgstr "Online"
#: src/features/admin/components/dashboard/status-strip.tsx:61
msgid "Open errors"
msgstr "Open errors"
#: src/features/admin/components/dashboard/tools-list.tsx:95
msgid "Open Pocketbase"
msgstr "Open Pocketbase"
src/locales/es/messages.po
+1 -13
View File
@@ -446,7 +446,7 @@ msgid "Add Team"
msgstr "Agregar Equipo"
#: src/app/routes/_authed/admin.tsx:15
#: src/app/routes/_authed/admin/index.tsx:27
#: src/app/routes/_authed/admin/index.tsx:14
#: src/features/core/hooks/use-links.ts:37
msgid "Admin"
msgstr "Admin"
@@ -660,10 +660,6 @@ msgstr "Brutal"
msgid "CA"
msgstr "VC"
#: src/features/admin/components/dashboard/status-strip.tsx:67
msgid "Calls today"
msgstr "Llamadas hoy"
#: src/components/sheet/slide-panel/slide-panel.tsx:41
#: src/components/sheet/slide-panel/slide-panel.tsx:190
#: src/features/bracket/components/match-form.tsx:160
@@ -1879,14 +1875,6 @@ msgstr "Una vez inscrito, puedes ver a otros agentes libres y su número de tel
msgid "One time code"
msgstr "Código de un solo uso"
#: src/features/admin/components/dashboard/status-strip.tsx:56
msgid "Online"
msgstr "En línea"
#: src/features/admin/components/dashboard/status-strip.tsx:61
msgid "Open errors"
msgstr "Errores abiertos"
#: src/features/admin/components/dashboard/tools-list.tsx:95
msgid "Open Pocketbase"
msgstr "Abrir Pocketbase"
src/locales/ja/messages.po
+1 -13
View File
@@ -446,7 +446,7 @@ msgid "Add Team"
msgstr "チームを追加"
#: src/app/routes/_authed/admin.tsx:15
#: src/app/routes/_authed/admin/index.tsx:27
#: src/app/routes/_authed/admin/index.tsx:14
#: src/features/core/hooks/use-links.ts:37
msgid "Admin"
msgstr "管理者"
@@ -660,10 +660,6 @@ msgstr "ブルータル"
msgid "CA"
msgstr "CA"
#: src/features/admin/components/dashboard/status-strip.tsx:67
msgid "Calls today"
msgstr "本日の呼び出し数"
#: src/components/sheet/slide-panel/slide-panel.tsx:41
#: src/components/sheet/slide-panel/slide-panel.tsx:190
#: src/features/bracket/components/match-form.tsx:160
@@ -1879,14 +1875,6 @@ msgstr "登録が完了すると、他のフリーエージェントとその電
msgid "One time code"
msgstr "ワンタイムコード"
#: src/features/admin/components/dashboard/status-strip.tsx:56
msgid "Online"
msgstr "オンライン"
#: src/features/admin/components/dashboard/status-strip.tsx:61
msgid "Open errors"
msgstr "未解決のエラー"
#: src/features/admin/components/dashboard/tools-list.tsx:95
msgid "Open Pocketbase"
msgstr "Pocketbaseを開く"