feat(dashboard): add edit visible cards modal

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<DashboardCardKey>;
+	onClose: () => void;
+	onSave: (visibleCards: Set<DashboardCardKey>) => void;
+}
+
+const allCards: DashboardCardKey[] = ["monitorStatus", "monitorsByType"];
+
+export const EditCardsModal = ({
+	open,
+	visibleCards,
+	onClose,
+	onSave,
+}: EditCardsModalProps) => {
+	const { t } = useTranslation();
+	const [draft, setDraft] = useState<Set<DashboardCardKey>>(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 (
+		<Dialog
+			open={open}
+			title={t("pages.dashboard.editCardsModal.title")}
+			content={t("pages.dashboard.editCardsModal.description")}
+			onCancel={onClose}
+			onConfirm={() => onSave(draft)}
+			confirmText={t("pages.dashboard.editCardsModal.done")}
+			maxWidth="xs"
+			fullWidth
+		>
+			<Stack>
+				{allCards.map((key) => (
+					<FormControlLabel
+						key={key}
+						label={t(`pages.dashboard.cards.${key}`)}
+						control={
+							<Checkbox
+								checked={draft.has(key)}
+								disabled={draft.has(key) && draft.size === 1}
+								onChange={() => handleToggle(key)}
+							/>
+						}
+					/>
+				))}
+			</Stack>
+		</Dialog>
+	);
+};

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<DashboardCardKey>(["monitorStatus", "monitorsByType"]);
 
 const Dashboard = () => {
 	const theme = useTheme();
+	const { t } = useTranslation();
+	const [editOpen, setEditOpen] = useState(false);
+	const [visibleCards, setVisibleCards] = useState<Set<DashboardCardKey>>(allCards);
+
 	const { monitors, summary } = useMonitorListController({
 		types: [...MonitorTypes],
 		checksLimit: 1,
@@ -32,14 +45,41 @@ const Dashboard = () => {
 
 	return (
 		<BasePage headerKey="dashboard">
-			<Box
-				display="grid"
-				gridTemplateColumns={{ xs: "1fr", md: "1fr 1fr" }}
-				gap={theme.spacing(LAYOUT.MD)}
-			>
-				<MonitorStatusCard summary={summary} />
-				<MonitorsByTypeCard monitorsByType={monitorsByType} />
-			</Box>
+			<Stack gap={theme.spacing(LAYOUT.SM)}>
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="outlined"
+						size="small"
+						onClick={() => setEditOpen(true)}
+					>
+						{t("pages.dashboard.editCards")}
+					</Button>
+				</Stack>
+
+				<Box
+					display="grid"
+					gridTemplateColumns={{ xs: "1fr", md: "1fr 1fr" }}
+					gap={theme.spacing(LAYOUT.MD)}
+				>
+					{visibleCards.has("monitorStatus") && <MonitorStatusCard summary={summary} />}
+					{visibleCards.has("monitorsByType") && (
+						<MonitorsByTypeCard monitorsByType={monitorsByType} />
+					)}
+				</Box>
+			</Stack>
+
+			<EditCardsModal
+				open={editOpen}
+				visibleCards={visibleCards}
+				onClose={() => setEditOpen(false)}
+				onSave={(next) => {
+					setVisibleCards(next);
+					setEditOpen(false);
+				}}
+			/>
 		</BasePage>
 	);
 };

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"
 			}
 		}
 	}