fixes and improvements

frontend/src/pages/Dashboard.tsx

@@ -1,88 +1,37 @@
-import { Box, Divider, Grid, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import {
-	useCounts,
-	useLibraries,
-	useActivity,
-	useMonitoringOverview,
-} from "../hooks/useDashboard";
+import { useActivity, useMonitoringOverview } from "../hooks/useDashboard";
 import { NowPlaying } from "../components/NowPlaying";
-import { MetricCard } from "../components/MetricCard";
-import { LibraryOverview } from "../components/LibraryOverview";
 import { MonitoringOverviewTable } from "../components/MonitoringOverviewTable";
+import { SectionCard } from "../components/SectionCard";
 
 export function Dashboard() {
 	const navigate = useNavigate();
-	const { data: counts } = useCounts();
-	const { data: libraries } = useLibraries();
 	const { data: activity } = useActivity();
 	const { data: monitoringOverview } = useMonitoringOverview();
 
 	return (
-		<Stack spacing={3}>
-			<Box>
-				<Typography variant="h5" sx={{ mb: 1.5 }}>
-					Activity
-				</Typography>
-				{activity && (
+		<Stack spacing={2.25}>
+			<SectionCard
+				title="Jellyfin activity"
+				description="Live sessions and idle users from Jellyfin."
+			>
+				{activity ? (
 					<NowPlaying
 						sessions={activity}
 						onSelectSession={(session) =>
 							navigate(`/users?user=${encodeURIComponent(session.user)}`)
 						}
 					/>
-				)}
-			</Box>
+				) : null}
+			</SectionCard>
 
-			<Divider />
-
-			<Box>
-				<Typography variant="h5" sx={{ mb: 1.5 }}>
-					Monitoring Overview
-				</Typography>
-				<MonitoringOverviewTable overview={monitoringOverview} />
-			</Box>
-
-			<Divider />
-
-			<Box>
-				<Typography variant="h5" sx={{ mb: 1.5 }}>
-					Library Stats
-				</Typography>
-				{counts && (
-					<Grid container spacing={2} sx={{ mb: 2, alignItems: "stretch" }}>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard
-								label="Total"
-								value={(
-									counts.movies +
-									counts.series +
-									counts.episodes
-								).toLocaleString()}
-							/>
-						</Grid>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard
-								label="Movies"
-								value={counts.movies.toLocaleString()}
-							/>
-						</Grid>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard
-								label="Series"
-								value={counts.series.toLocaleString()}
-							/>
-						</Grid>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard
-								label="Episodes"
-								value={counts.episodes.toLocaleString()}
-							/>
-						</Grid>
-					</Grid>
-				)}
-				{libraries && <LibraryOverview libraries={libraries} />}
-			</Box>
+			<SectionCard
+				title="Monitoring overview"
+				description="10-minute averages and fleet status across all configured machines."
+			>
+				<MonitoringOverviewTable overview={monitoringOverview} embedded />
+			</SectionCard>
 		</Stack>
 	);
 }