From b2cfc6038704878abb327d448d74297b20431a87 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 22 Sep 2026 09:35:53 -0700
Subject: [PATCH 1/2] Move types to  dir, div -> Fragment

---
 client/src/Features/UI/uiSlice.ts                     |  3 ---
 .../src/Pages/Dashboard/components/EditCardsModal.tsx |  6 ++----
 client/src/Pages/Dashboard/index.tsx                  | 11 ++++-------
 client/src/Types/Dashboard.ts                         |  2 ++
 4 files changed, 8 insertions(+), 14 deletions(-)
 create mode 100644 client/src/Types/Dashboard.ts

diff --git a/client/src/Features/UI/uiSlice.ts b/client/src/Features/UI/uiSlice.ts
index 143d170db..2ff9e8b1b 100644
--- a/client/src/Features/UI/uiSlice.ts
+++ b/client/src/Features/UI/uiSlice.ts
@@ -3,9 +3,6 @@ import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
 
-export const dashboardCardKeys = ["monitorStatus", "monitorsByType"] as const;
-export type DashboardCardKey = (typeof dashboardCardKeys)[number];
-
 type TableName =
 	| "monitors"
 	| "team"
diff --git a/client/src/Pages/Dashboard/components/EditCardsModal.tsx b/client/src/Pages/Dashboard/components/EditCardsModal.tsx
index 48731eb9b..84257c1ec 100644
--- a/client/src/Pages/Dashboard/components/EditCardsModal.tsx
+++ b/client/src/Pages/Dashboard/components/EditCardsModal.tsx
@@ -3,9 +3,7 @@ import Stack from "@mui/material/Stack";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import { useTranslation } from "react-i18next";
 import { Checkbox, Dialog } from "@/Components/inputs";
-import { type DashboardCardKey, dashboardCardKeys } from "@/Features/UI/uiSlice";
-
-export type { DashboardCardKey };
+import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";
 
 interface EditCardsModalProps {
 	open: boolean;
@@ -52,7 +50,7 @@ export const EditCardsModal = ({
 			fullWidth
 		>
 			<Stack>
-				{dashboardCardKeys.map((key) => (
+				{dashboardCardKeys.map((key: DashboardCardKey) => (
 					<FormControlLabel
 						key={key}
 						label={t(`pages.dashboard.cards.${key}`)}
diff --git a/client/src/Pages/Dashboard/index.tsx b/client/src/Pages/Dashboard/index.tsx
index e92ec9791..f86b224f1 100644
--- a/client/src/Pages/Dashboard/index.tsx
+++ b/client/src/Pages/Dashboard/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from "react";
+import { Fragment, useMemo, useState, type ReactNode } from "react";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
@@ -10,16 +10,13 @@ import { Button } from "@/Components/inputs";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { useMonitorListController } from "@/Hooks/useMonitorListController";
 import { MonitorTypes, type MonitorTypeCount } from "@/Types/Monitor";
-import {
-	setDashboardVisibleCards,
-	dashboardCardKeys,
-	type DashboardCardKey,
-} from "@/Features/UI/uiSlice";
+import { setDashboardVisibleCards } from "@/Features/UI/uiSlice";
 import type { RootState, AppDispatch } from "@/store";
 
 import { MonitorStatusCard } from "@/Pages/Dashboard/components/cards/MonitorStatusCard";
 import { MonitorsByTypeCard } from "@/Pages/Dashboard/components/cards/MonitorsByTypeCard";
 import { EditCardsModal } from "@/Pages/Dashboard/components/EditCardsModal";
+import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";
 
 const Dashboard = () => {
 	const theme = useTheme();
@@ -78,7 +75,7 @@ const Dashboard = () => {
 					{dashboardCardKeys
 						.filter((key) => visibleCards.has(key))
 						.map((key) => (
-							<div key={key}>{cardComponents[key]}</div>
+							<Fragment key={key}>{cardComponents[key]}</Fragment>
 						))}
 				</Box>
 			</Stack>
diff --git a/client/src/Types/Dashboard.ts b/client/src/Types/Dashboard.ts
new file mode 100644
index 000000000..a397ec807
--- /dev/null
+++ b/client/src/Types/Dashboard.ts
@@ -0,0 +1,2 @@
+export const dashboardCardKeys = ["monitorStatus", "monitorsByType"] as const;
+export type DashboardCardKey = (typeof dashboardCardKeys)[number];

From 1f9072a905ce1f234ce202b87bc8f0012874442e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 22 Sep 2026 09:42:15 -0700
Subject: [PATCH 2/2] add missing imports

---
 client/src/Features/UI/uiSlice.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/Features/UI/uiSlice.ts b/client/src/Features/UI/uiSlice.ts
index 2ff9e8b1b..55e83333c 100644
--- a/client/src/Features/UI/uiSlice.ts
+++ b/client/src/Features/UI/uiSlice.ts
@@ -1,3 +1,4 @@
+import { dashboardCardKeys, type DashboardCardKey } from "@/Types/Dashboard";
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
 type ThemeMode = "light" | "dark";