wire up incidents table

client/src/Components/v2/inputs/Dialog.tsx

@@ -16,6 +16,8 @@ export const DialogInput = ({
 	confirmColor = "primary",
 	cancelColor = "error",
 	loading = false,
+	cancelText,
+	confirmText,
 }: {
 	open: boolean;
 	title?: string;
@@ -25,6 +27,8 @@ export const DialogInput = ({
 	confirmColor?: "error" | "primary";
 	cancelColor?: "error" | "primary";
 	loading?: boolean;
+	cancelText?: string;
+	confirmText?: string;
 }) => {
 	const { t } = useTranslation();
 	return (
@@ -40,7 +44,7 @@ export const DialogInput = ({
 					color={cancelColor}
 					onClick={onCancel}
 				>
-					{t("common.buttons.cancel")}
+					{cancelText ?? t("common.buttons.cancel")}
 				</Button>
 				<Button
 					loading={loading}
@@ -48,7 +52,7 @@ export const DialogInput = ({
 					color={confirmColor}
 					onClick={onConfirm}
 				>
-					{t("common.buttons.confirm")}
+					{confirmText ?? t("common.buttons.confirm")}
 				</Button>
 			</DialogActions>
 		</Dialog>

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

@@ -1,4 +1,5 @@
 import { Table } from "@/Components/v2/design-elements";
+import { Pagination } from "@/Components/v2/design-elements/Table";
 import type { Header } from "@/Components/v2/design-elements/Table";
 import { StatusLabel, ValueLabel } from "@/Components/v2/design-elements";
 import type { ValueType } from "@/Components/v2/design-elements/StatusLabel";
@@ -14,10 +15,16 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
 
 interface IncidentsTableProps {
 	incidents?: Incident[];
 	monitors?: Monitor[];
+	incidentsCount: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
 	onOpenDetails?: (incidentId: string) => void;
 	onResolve?: (incidentId: string) => void;
 }
@@ -25,6 +32,11 @@ interface IncidentsTableProps {
 export const IncidentsTable = ({
 	incidents,
 	monitors,
+	incidentsCount,
+	page,
+	setPage,
+	rowsPerPage,
+	setRowsPerPage,
 	onOpenDetails,
 	onResolve,
 }: IncidentsTableProps) => {
@@ -162,13 +174,41 @@ export const IncidentsTable = ({
 		];
 	};
 
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		const value = Number(e.target.value);
+		setPage(0);
+		setRowsPerPage(value);
+	};
+
 	if (!incidents || !monitors) {
 		return null;
 	}
 
-	void getHeaders;
-	void Table;
-
-	// Headers: Monitor name, status, start time, end time, resolution type, status code, message, actions
-	return "Table here";
+	return (
+		<Box>
+			<Table
+				headers={getHeaders()}
+				data={incidents}
+				onRowClick={(row) => onOpenDetails?.(row.id)}
+				emptyViewText={t("common.table.empty")}
+			/>
+			<Pagination
+				component="div"
+				count={incidentsCount}
+				page={page}
+				rowsPerPage={rowsPerPage}
+				onPageChange={handlePageChange}
+				onRowsPerPageChange={handleRowsPerPageChange}
+			/>
+		</Box>
+	);
 };

client/src/Pages/Incidents/index.tsx

@@ -5,6 +5,7 @@ import {
 	SummaryCardLatestIncidents,
 	SummaryCardStats,
 } from "@/Pages/Incidents/Components/SummaryCard";
+import { IncidentsTable } from "@/Pages/Incidents/Components/IncidentTable";
 
 import { useGet } from "@/Hooks/UseApi";
 import { useState, useEffect, useMemo } from "react";
@@ -96,21 +97,23 @@ const IncidentsPage = () => {
 	void setFilter;
 	void dateRange;
 	void setDateRange;
-	void page;
-	void setPage;
-	void rowsPerPage;
-	void setRowsPerPage;
 	void isLoadingIncidents;
 	void isLoadingMonitors;
 	void isLoadingSummary;
 	void refetchIncidents;
 	void refetchSummary;
 	void monitorLookup;
-	void incidents;
-	void incidentsCount;
 	void summaryData;
 	void networkError;
 
+	const handleOpenDetails = (incidentId: string) => {
+		console.log("Open details for incident:", incidentId);
+	};
+
+	const handleResolve = (incidentId: string) => {
+		console.log("Resolve incident:", incidentId);
+	};
+
 	return (
 		<BasePage>
 			<Stack
@@ -124,6 +127,17 @@ const IncidentsPage = () => {
 				/>
 				<SummaryCardStats summary={summaryData} />
 			</Stack>
+			<IncidentsTable
+				incidents={incidents}
+				monitors={monitorsData ?? undefined}
+				incidentsCount={incidentsCount}
+				page={page}
+				setPage={setPage}
+				rowsPerPage={rowsPerPage}
+				setRowsPerPage={setRowsPerPage}
+				onOpenDetails={handleOpenDetails}
+				onResolve={handleResolve}
+			/>
 		</BasePage>
 	);
 };