bump mui

client/package.json

@@ -17,10 +17,10 @@
 		"@emotion/styled": "^11.13.0",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@hookform/resolvers": "5.2.2",
-		"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
-		"@mui/material": "6.4.11",
-		"@mui/x-charts": "^7.5.1",
-		"@mui/x-date-pickers": "7.29.0",
+		"@mui/lab": "7.0.0",
+		"@mui/material": "7.3.7",
+		"@mui/x-charts": "7.29.1",
+		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",

client/src/Components/v2/design-elements/Table.tsx

@@ -1,5 +1,5 @@
 import Stack from "@mui/material/Stack";
-import Grid2 from "@mui/material/Grid2";
+import Grid2 from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";

client/src/Pages/Incidents/Components/CardDetails.tsx

@@ -6,48 +6,60 @@ import Typography from "@mui/material/Typography";
 import { BaseBox, ValueLabel } from "@/Components/v2/design-elements";
 
 import { useTranslation } from "react-i18next";
-import type { Monitor } from "@/Types/Monitor";
 import type { Incident } from "@/Types/Incident";
+import type { Monitor } from "@/Types/Monitor";
 import { useTheme } from "@mui/material";
 
 interface CardDetailsProps {
 	incident: Incident | null;
 	monitor: Monitor | null;
-	sx?: React.CSSProperties;
+	sx?: object;
 }
 
 export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 
+	void monitor; // Will be used in future UI implementation
+
 	if (!incident) {
 		return null;
 	}
 	return (
-		<Stack gap={theme.spacing(4)}>
+		<Stack
+			gap={theme.spacing(4)}
+			sx={sx}
+		>
 			<Typography textTransform={"uppercase"}>
 				{t("pages.incidents.dialog.details.title")}
 			</Typography>
 			<BaseBox padding={8}>
-				<Typography textTransform={"uppercase"}>
-					{t("pages.incidents.dialog.details.overview")}
-				</Typography>
-				<Divider />
+				<Stack gap={theme.spacing(4)}>
+					<Typography textTransform={"uppercase"}>
+						{t("pages.incidents.dialog.details.overview")}
+					</Typography>
+					<Divider />
 
-				<Grid container>
-					<Grid>
-						<Box>
-							<ValueLabel
-								value={incident.status ? "positive" : "negative"}
-								text={
-									incident.status
-										? t("common.labels.active")
-										: t("common.labels.resolved")
-								}
-							/>
-						</Box>
+					<Grid
+						container
+						gap={theme.spacing(4)}
+					>
+						<Grid size={12}>
+							<Box>
+								<ValueLabel
+									value={incident.status ? "positive" : "negative"}
+									text={
+										incident.status
+											? t("common.labels.active")
+											: t("common.labels.resolved")
+									}
+								/>
+							</Box>
+						</Grid>
+						<Grid size={6}>Test</Grid>
+						<Grid size={6}>Test</Grid>
 					</Grid>
-				</Grid>
+				</Stack>
 			</BaseBox>
 		</Stack>
 	);

client/src/Pages/Incidents/Components/IncidentItem.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { ValueLabel } from "@/Components/v2/design-elements";
 import { Globe } from "lucide-react";

client/src/Pages/Infrastructure/Details/Components/Charts.tsx

@@ -1,4 +1,4 @@
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import { HistogramInfrastructure } from "@/Components/v2/monitors";
 
 import { useTranslation } from "react-i18next";

client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx

@@ -1,4 +1,4 @@
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import { HistogramInfrastructure } from "@/Components/v2/monitors";
 
 import { useTranslation } from "react-i18next";