Merge pull request #3982 from bluewave-labs/fix/dashboard-types

fix: Dashboard types

client/src/Features/UI/uiSlice.ts

@@ -1,11 +1,9 @@
+import { dashboardCardKeys, type DashboardCardKey } from "@/Types/Dashboard";
 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"

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}`)}

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>

client/src/Types/Dashboard.ts

@@ -0,0 +1,2 @@
+export const dashboardCardKeys = ["monitorStatus", "monitorsByType"] as const;
+export type DashboardCardKey = (typeof dashboardCardKeys)[number];