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

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

Browse Source 
- 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
This commit is contained in:
kyle
2026-08-25 22:24:36 -07:00
parent 895737febc
commit 1cc75591fa
22 changed files with 511 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/dashboard/index.tsx
+41 -47
View File
@@ -1,57 +1,51 @@
import { Suspense } from "react";
import { Box, SimpleGrid, Stack } from "@mantine/core";
import { CardSkeleton, StatTileSkeleton } from "@/components/skeletons";
import { Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";
import QuietBoundary from "./quiet-boundary";
import NowStrip from "./now-strip";
import TournamentCard from "./tournament-card";
import UsageCard from "./usage-card";
import ErrorsCard from "./errors-card";
import ActivityFeed from "./activity-feed";
import SectionBox from "./section-box";
import StatusStrip from "./status-strip";
import TournamentSection from "./tournament-section";
import ToolsList from "./tools-list";
const NowStripSkeleton = () => (
<SimpleGrid cols={3} spacing="xs">
<StatTileSkeleton />
<StatTileSkeleton />
<StatTileSkeleton />
</SimpleGrid>
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" />
<SimpleGrid cols={3} spacing="sm" mt="sm">
<Skeleton height={72} radius="md" />
<Skeleton height={72} radius="md" />
<Skeleton height={72} radius="md" />
</SimpleGrid>
</SectionBox>
);
export const AdminDashboard = () => (
<Stack gap="md" pb="md">
<Stack gap="md" px="md" pt="md">
<QuietBoundary>
<Suspense fallback={<NowStripSkeleton />}>
<NowStrip />
</Suspense>
</QuietBoundary>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
<QuietBoundary>
<Suspense fallback={<CardSkeleton />}>
<TournamentCard />
</Suspense>
</QuietBoundary>
<QuietBoundary>
<Suspense fallback={<CardSkeleton />}>
<ErrorsCard />
</Suspense>
</QuietBoundary>
</SimpleGrid>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
<QuietBoundary>
<Suspense fallback={<CardSkeleton />}>
<UsageCard />
</Suspense>
</QuietBoundary>
<QuietBoundary>
<ActivityFeed />
</QuietBoundary>
</SimpleGrid>
</Stack>
<Box>
<ToolsList />
</Box>
</Stack>
<>
<QuietBoundary>
<Suspense fallback={<StripSkeleton />}>
<SectionBox>
<StatusStrip />
</SectionBox>
</Suspense>
</QuietBoundary>
<QuietBoundary>
<Suspense fallback={<TournamentSkeleton />}>
<TournamentSection />
</Suspense>
</QuietBoundary>
<ToolsList />
</>
);
export default AdminDashboard;