diff --git a/client/src/Pages/Dashboard/components/EditCardsModal.tsx b/client/src/Pages/Dashboard/components/EditCardsModal.tsx new file mode 100644 index 000000000..1ffbeeb1a --- /dev/null +++ b/client/src/Pages/Dashboard/components/EditCardsModal.tsx @@ -0,0 +1,71 @@ +import { useState, useEffect } from "react"; +import Stack from "@mui/material/Stack"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import { useTranslation } from "react-i18next"; +import { Checkbox, Dialog } from "@/Components/inputs"; + +export type DashboardCardKey = "monitorStatus" | "monitorsByType"; + +interface EditCardsModalProps { + open: boolean; + visibleCards: Set; + onClose: () => void; + onSave: (visibleCards: Set) => void; +} + +const allCards: DashboardCardKey[] = ["monitorStatus", "monitorsByType"]; + +export const EditCardsModal = ({ + open, + visibleCards, + onClose, + onSave, +}: EditCardsModalProps) => { + const { t } = useTranslation(); + const [draft, setDraft] = useState>(new Set(visibleCards)); + + useEffect(() => { + if (open) setDraft(new Set(visibleCards)); + }, [open, visibleCards]); + + const handleToggle = (key: DashboardCardKey) => { + setDraft((prev) => { + const next = new Set(prev); + if (next.has(key)) { + next.delete(key); + } else { + next.add(key); + } + return next; + }); + }; + + return ( + onSave(draft)} + confirmText={t("pages.dashboard.editCardsModal.done")} + maxWidth="xs" + fullWidth + > + + {allCards.map((key) => ( + handleToggle(key)} + /> + } + /> + ))} + + + ); +}; diff --git a/client/src/Pages/Dashboard/index.tsx b/client/src/Pages/Dashboard/index.tsx index 845f4ab8c..2ad50da7e 100644 --- a/client/src/Pages/Dashboard/index.tsx +++ b/client/src/Pages/Dashboard/index.tsx @@ -1,17 +1,30 @@ -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; import { useTheme } from "@mui/material/styles"; +import { useTranslation } from "react-i18next"; import { BasePage } from "@/Components/design-elements/BasePage"; +import { Button } from "@/Components/inputs"; import { LAYOUT } from "@/Utils/Theme/constants"; import { useMonitorListController } from "@/Hooks/useMonitorListController"; import { MonitorTypes, type MonitorTypeCount } from "@/Types/Monitor"; import { MonitorStatusCard } from "@/Pages/Dashboard/components/cards/MonitorStatusCard"; import { MonitorsByTypeCard } from "@/Pages/Dashboard/components/cards/MonitorsByTypeCard"; +import { + EditCardsModal, + type DashboardCardKey, +} from "@/Pages/Dashboard/components/EditCardsModal"; + +const allCards = new Set(["monitorStatus", "monitorsByType"]); const Dashboard = () => { const theme = useTheme(); + const { t } = useTranslation(); + const [editOpen, setEditOpen] = useState(false); + const [visibleCards, setVisibleCards] = useState>(allCards); + const { monitors, summary } = useMonitorListController({ types: [...MonitorTypes], checksLimit: 1, @@ -32,14 +45,41 @@ const Dashboard = () => { return ( - - - - + + + + + + + {visibleCards.has("monitorStatus") && } + {visibleCards.has("monitorsByType") && ( + + )} + + + + setEditOpen(false)} + onSave={(next) => { + setVisibleCards(next); + setEditOpen(false); + }} + /> ); }; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 75e695c70..980fcd3ab 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -1922,6 +1922,12 @@ "header": { "title": "Dashboard", "description": "See every monitor type in one place and spot what needs attention." + }, + "editCards": "Edit cards", + "editCardsModal": { + "title": "Edit cards", + "description": "Select the cards to display on your dashboard.", + "done": "Done" } } }