dialog initial commit

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

@@ -0,0 +1,38 @@
+import { Dialog } from "@/Components/v2/inputs";
+import { useTranslation } from "react-i18next";
+import type { Incident } from "@/Types/Incident";
+
+interface DialogIncidentDetailsProps {
+	open: boolean;
+	incident: Incident | null;
+	onClose: () => void;
+	onResolve: () => void;
+}
+
+export const DialogIncidentDetails = ({
+	open,
+	incident,
+	onClose,
+	onResolve,
+}: DialogIncidentDetailsProps) => {
+	const { t } = useTranslation();
+
+	if (!incident) {
+		return null;
+	}
+
+	return (
+		<Dialog
+			open={open}
+			title={t("pages.incidents.dialog.details.title")}
+			onCancel={onClose}
+			onConfirm={onResolve}
+			cancelText={t("common.buttons.cancel")}
+			confirmText={t("pages.incidents.dialog.details.resolve")}
+			maxWidth="md"
+			fullWidth
+		>
+			<pre>{JSON.stringify(incident, null, 2)}</pre>
+		</Dialog>
+	);
+};

client/src/Pages/Incidents/index.tsx

@@ -7,12 +7,13 @@ import {
 } from "@/Pages/Incidents/Components/SummaryCard";
 import { IncidentsTable } from "@/Pages/Incidents/Components/IncidentTable";
 import { DialogResolution } from "@/Pages/Incidents/Components/DialogResolution";
+import { DialogIncidentDetails } from "@/Pages/Incidents/Components/DialogIncidentDetails";
 import { HeaderTimeRange } from "@/Components/v2/common";
 
 import { useGet } from "@/Hooks/UseApi";
 import { useState, useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
-import type { IncidentsResponse, IncidentSummary } from "@/Types/Incident";
+import type { Incident, IncidentsResponse, IncidentSummary } from "@/Types/Incident";
 import type { Monitor } from "@/Types/Monitor";
 import { useTheme } from "@mui/material";
 
@@ -31,6 +32,10 @@ const IncidentsPage = () => {
 	const [isResolveDialogOpen, setIsResolveDialogOpen] = useState(false);
 	const [resolveIncidentId, setResolveIncidentId] = useState<string | null>(null);
 
+	// Details dialog state
+	const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false);
+	const [selectedIncident, setSelectedIncident] = useState<Incident | null>(null);
+
 	// Build incidents URL with query params
 	const incidentsUrl = useMemo(() => {
 		const params = new URLSearchParams();
@@ -94,7 +99,21 @@ const IncidentsPage = () => {
 	void networkError;
 
 	const handleOpenDetails = (incidentId: string) => {
-		console.log("Open details for incident:", incidentId);
+		const incident = incidents.find((i) => i.id === incidentId) ?? null;
+		setSelectedIncident(incident);
+		setIsDetailsDialogOpen(true);
+	};
+
+	const handleDetailsClose = () => {
+		setIsDetailsDialogOpen(false);
+		setSelectedIncident(null);
+	};
+
+	const handleDetailsResolve = () => {
+		if (selectedIncident) {
+			handleDetailsClose();
+			handleResolve(selectedIncident.id);
+		}
 	};
 
 	const handleResolve = (incidentId: string) => {
@@ -147,6 +166,12 @@ const IncidentsPage = () => {
 				onClose={handleResolveClose}
 				onResolved={handleResolved}
 			/>
+			<DialogIncidentDetails
+				open={isDetailsDialogOpen}
+				incident={selectedIncident}
+				onClose={handleDetailsClose}
+				onResolve={handleDetailsResolve}
+			/>
 		</BasePage>
 	);
 };

client/src/locales/en.json

@@ -389,6 +389,12 @@
 					"goToMonitor": "Go to monitor",
 					"resolveManually": "Resolve Manually"
 				}
+			},
+			"dialog": {
+				"details": {
+					"title": "Incident Details",
+					"resolve": "Resolve Incident"
+				}
 			}
 		}
 	},