refactor: move service administration into settings

frontend/src/pages/Settings.tsx

@@ -19,6 +19,7 @@ import {
 	useTestMonitoringMachineSSH,
 } from "../hooks/useSettings";
 import { useIsMobile } from "../hooks/useIsMobile";
+import { CreateServiceDialog, DashboardManagementCard } from "./ServicesPage";
 import { SheetForm } from "@/components/ui/sheet-form";
 import { DialogFooter } from "../components/DialogFooter";
 import { HoverEditButton } from "../components/HoverEditButton";
@@ -1353,6 +1354,8 @@ function ServicesAdminCard({
 	const { data: services = [] } = useServiceInstances();
 	const { data: types = [] } = useServiceTypes();
 	const [selectedServiceId, setSelectedServiceId] = useState(initialServiceId);
+	const [serviceSubtab, setServiceSubtab] = useState<"list" | "dashboards">("list");
+	const [createOpen, setCreateOpen] = useState(false);
 
 	const sortedServices = useMemo(
 		() =>
@@ -1376,16 +1379,30 @@ function ServicesAdminCard({
 		? types.find((t) => t.service_type === selectedService.service_type)
 		: undefined;
 
-	if (sortedServices.length === 0) {
-		return (
-			<p className="text-sm text-muted-foreground">
-				No service instances configured. Create one from the Services page.
-			</p>
-		);
-	}
-
 	return (
-		<div className="grid grid-cols-1 gap-4 md:grid-cols-[320px_minmax(0,1fr)]">
+		<>
+			<TabbedCard
+				value={serviceSubtab}
+				onChange={(value) => setServiceSubtab(value as "list" | "dashboards")}
+				tabs={[
+					<TabsTrigger key="list" value="list">List</TabsTrigger>,
+					<TabsTrigger key="dashboards" value="dashboards">Dashboards</TabsTrigger>,
+				]}
+				contentSx={{}}
+			>
+			{serviceSubtab === "list" && (
+				<div className="flex flex-col gap-4">
+					<div className="flex justify-end">
+						<Button variant="outline" onClick={() => setCreateOpen(true)}>
+							Add service
+						</Button>
+					</div>
+					{sortedServices.length === 0 ? (
+						<p className="text-sm text-muted-foreground">
+							No service instances configured yet.
+						</p>
+					) : (
+						<div className="grid grid-cols-1 gap-4 md:grid-cols-[320px_minmax(0,1fr)]">
 			<SelectionRailCard
 				title="Services"
 				description="Select a service to edit its configuration."
@@ -1441,7 +1458,17 @@ function ServicesAdminCard({
 					</p>
 				)}
 			</SectionCard>
-		</div>
+						</div>
+					)}
+				</div>
+			)}
+			{serviceSubtab === "dashboards" && <DashboardManagementCard />}
+			</TabbedCard>
+			<CreateServiceDialog
+				open={createOpen}
+				onClose={() => setCreateOpen(false)}
+			/>
+		</>
 	);
 }