demo monitors, remove monitors

client/src/Pages/Settings/index.tsx

@@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
 import DummyChart from "@/Pages/Settings/DummyChart";
-import { useGet, usePatch } from "@/Hooks/UseApi";
+import { useGet, usePatch, usePost } from "@/Hooks/UseApi";
 import { useSettingsForm } from "@/Hooks/useSettingsForm";
 import { useIsAdmin } from "@/Hooks/useIsAdmin.js";
 import type { SettingsFormData } from "@/Validation/settings";
@@ -44,6 +44,10 @@ export const SettingsPage = () => {
 	const { t, i18n } = useTranslation();
 	const dispatch = useDispatch();
 	const isAdmin = useIsAdmin();
+	// Local state for demo monitors dialog
+	const [isDemoMonitorsDialogOpen, setIsDemoMonitorsDialogOpen] = useState(false);
+	const { post: postDemoMonitors, loading: isPostingDemoMonitors } = usePost();
+	const { deleteFn: deleteAllMonitors, loading: isDeletingAllMonitors } = useDelete();
 
 	// Fetch settings data from API
 	const { data: fetchedSettings } = useGet<SettingsResponse>("/settings");
@@ -451,6 +455,47 @@ export const SettingsPage = () => {
 				)}
 			</Stack>
 
+			{/* Demo Monitors - Admin Only */}
+			{isAdmin && (
+				<ConfigBox
+					title={t("pages.settings.form.demoMonitors.title")}
+					subtitle={t("pages.settings.form.demoMonitors.description")}
+					rightContent={
+						<Box>
+							<Button
+								variant="contained"
+								loading={isPostingDemoMonitors}
+								onClick={async () => {
+									await postDemoMonitors("/monitors/demo", {});
+								}}
+							>
+								{t("common.buttons.addDemo")}
+							</Button>
+						</Box>
+					}
+				/>
+			)}
+
+			{/* Remove All Monitors - Admin Only */}
+			{isAdmin && (
+				<ConfigBox
+					title={t("pages.settings.form.removeMonitors.title")}
+					subtitle={t("pages.settings.form.removeMonitors.description")}
+					rightContent={
+						<Box>
+							<Button
+								variant="contained"
+								color="error"
+								loading={isDeletingAllMonitors}
+								onClick={() => setIsDemoMonitorsDialogOpen(true)}
+							>
+								{t("common.buttons.removeMonitors")}
+							</Button>
+						</Box>
+					}
+				/>
+			)}
+
 			{/* Clear Stats Confirmation Dialog */}
 			<Dialog
 				open={isStatsDialogOpen}
@@ -461,6 +506,19 @@ export const SettingsPage = () => {
 				loading={isDeletingStats}
 			/>
 
+			{/* Delete All Monitors Confirmation Dialog */}
+			<Dialog
+				open={isDemoMonitorsDialogOpen}
+				title={t("pages.settings.form.removeMonitors.dialog.title")}
+				content={t("pages.settings.form.removeMonitors.dialog.description")}
+				onCancel={() => setIsDemoMonitorsDialogOpen(false)}
+				onConfirm={async () => {
+					await deleteAllMonitors("/monitors/");
+					setIsDemoMonitorsDialogOpen(false);
+				}}
+				loading={isDeletingAllMonitors}
+			/>
+
 			{/* Sticky Save Button */}
 			<Stack
 				direction="row"

client/src/locales/en.json

@@ -40,7 +40,9 @@
 			"notFound": "Go to the main dashboard",
 			"resetPassword": "Reset password",
 			"reset": "Reset",
-			"clear": "Clear"
+			"clear": "Clear",
+			"addDemo": "Add demo monitors",
+			"removeMonitors": "Remove monitors"
 		},
 		"charts": {
 			"labels": {
@@ -1016,6 +1018,18 @@
 							"placeholder": "1 - 150"
 						}
 					}
+				},
+				"demoMonitors": {
+					"title": "Demo monitors",
+					"description": "Add sample monitors for demonstration purposes."
+				},
+				"removeMonitors": {
+					"title": "System reset",
+					"description": "Remove all monitors from your system.",
+					"dialog": {
+						"title": "Remove all monitors?",
+						"description": "This cannot be undone."
+					}
 				}
 			}
 		},