diff --git a/client/src/Pages/Settings/index.tsx b/client/src/Pages/Settings/index.tsx index 077755bf1..d956fbe82 100644 --- a/client/src/Pages/Settings/index.tsx +++ b/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("/settings"); @@ -451,6 +455,47 @@ export const SettingsPage = () => { )} + {/* Demo Monitors - Admin Only */} + {isAdmin && ( + + + + } + /> + )} + + {/* Remove All Monitors - Admin Only */} + {isAdmin && ( + + + + } + /> + )} + {/* Clear Stats Confirmation Dialog */} { loading={isDeletingStats} /> + {/* Delete All Monitors Confirmation Dialog */} + setIsDemoMonitorsDialogOpen(false)} + onConfirm={async () => { + await deleteAllMonitors("/monitors/"); + setIsDemoMonitorsDialogOpen(false); + }} + loading={isDeletingAllMonitors} + /> + {/* Sticky Save Button */}