From 6ffa5ac6487aa2db9537f0423d3f22b505e2601e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Jan 2026 18:14:23 +0000
Subject: [PATCH] v2-table

---
 .../components/NotificationsTable.tsx         | 96 +++++++++++++++++++
 client/src/Pages/Notifications/index.tsx      | 31 ++++--
 client/src/Types/Notification.ts              | 17 ++++
 client/src/locales/en.json                    |  5 +
 4 files changed, 142 insertions(+), 7 deletions(-)
 create mode 100644 client/src/Pages/Notifications/components/NotificationsTable.tsx
 create mode 100644 client/src/Types/Notification.ts

diff --git a/client/src/Pages/Notifications/components/NotificationsTable.tsx b/client/src/Pages/Notifications/components/NotificationsTable.tsx
new file mode 100644
index 000000000..0e804d276
--- /dev/null
+++ b/client/src/Pages/Notifications/components/NotificationsTable.tsx
@@ -0,0 +1,96 @@
+import { ActionsMenu, type ActionMenuItem } from "@/Components/v2/actions-menu";
+import Typography from "@mui/material/Typography";
+import type { Header } from "@/Components/v2/design-elements/Table";
+import { Table } from "@/Components/v2/design-elements";
+
+import type { Notification } from "@/Types/Notification";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
+
+interface NotificationsTableProps {
+	notifications: Notification[];
+	setSelectedChannel: Function;
+}
+
+export const NotificationsTable = ({
+	notifications,
+	setSelectedChannel,
+}: NotificationsTableProps) => {
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	const getActions = (channel: Notification): ActionMenuItem[] => {
+		return [
+			{
+				id: 1,
+				label: t("pages.common.monitors.actions.configure"),
+				action: () => {
+					navigate(`/notification-channels/${channel.id}/configure`);
+				},
+				closeMenu: true,
+			},
+
+			{
+				id: 7,
+				label: (
+					<Typography color={theme.palette.error.main}>
+						{t("pages.common.monitors.actions.delete")}
+					</Typography>
+				),
+				action: async () => {
+					setSelectedChannel(channel);
+				},
+				closeMenu: true,
+			},
+		];
+	};
+
+	const getHeaders = () => {
+		const headers: Header<Notification>[] = [
+			{
+				id: "name",
+				content: t("common.table.headers.name"),
+				render: (row) => {
+					return <Typography>{row?.notificationName}</Typography>;
+				},
+			},
+
+			{
+				id: "type",
+				content: t("common.table.headers.type"),
+				render: (row) => {
+					return <Typography textTransform={"capitalize"}>{row?.type}</Typography>;
+				},
+			},
+			{
+				id: "destination",
+				content: t("pages.notifications.table.headers.destination"),
+				render: (row) => {
+					return <Typography>{row?.address}</Typography>;
+				},
+			},
+			{
+				id: "actions",
+				content: t("common.table.headers.actions"),
+				render: (row) => {
+					return <ActionsMenu items={getActions(row)} />;
+				},
+			},
+		];
+		return headers;
+	};
+
+	const headers = getHeaders();
+
+	return (
+		<Table
+			headers={headers}
+			data={notifications}
+			onRowClick={(row) => {
+				navigate(`/notification-channels/${row.id}/configure`);
+			}}
+		/>
+	);
+};
diff --git a/client/src/Pages/Notifications/index.tsx b/client/src/Pages/Notifications/index.tsx
index cc8d68285..c5d710394 100644
--- a/client/src/Pages/Notifications/index.tsx
+++ b/client/src/Pages/Notifications/index.tsx
@@ -1,25 +1,42 @@
 import { BasePageWithStates } from "@/Components/v2/design-elements";
+import { NotificationsTable } from "@/Pages/Notifications/components/NotificationsTable";
 
+import { useState } from "react";
+import { useGet } from "@/Hooks/UseApi";
 import { useTranslation } from "react-i18next";
+import type { Notification } from "@/Types/Notification";
+
 const NotificationsPage = () => {
 	const { t } = useTranslation();
 
+	const [selectedChannel, setSelectedChannel] = useState<Notification | null>(null);
+
+	const {
+		data: notifications,
+		isLoading,
+		isValidating,
+		error,
+		refetch,
+	} = useGet<Notification[]>("/notifications/team");
+
 	return (
 		<BasePageWithStates
 			page={t("pages.notifications.fallback.title")}
 			bullets={
-				t("pages.notifications.fallback.checks", {
-					returnObjects: true,
-				}) as string[]
+				t("pages.notifications.fallback.checks", { returnObjects: true }) as string[]
 			}
-			loading={false}
-			error={false}
-			items={[]}
+			loading={isLoading || isValidating}
+			error={!!error}
+			items={notifications ?? []}
 			actionButtonText={t("pages.notifications.fallback.actionButton")}
 			actionLink="/notifications/create"
 		>
-			Notifications
+			<NotificationsTable
+				notifications={notifications ?? []}
+				setSelectedChannel={setSelectedChannel}
+			/>
 		</BasePageWithStates>
 	);
 };
+
 export default NotificationsPage;
diff --git a/client/src/Types/Notification.ts b/client/src/Types/Notification.ts
new file mode 100644
index 000000000..669c840ca
--- /dev/null
+++ b/client/src/Types/Notification.ts
@@ -0,0 +1,17 @@
+export const NotificationChannels = ["email", "slack", "discord", "webhook", "pager_duty", "matrix"] as const;
+export type NotificationChannel = (typeof NotificationChannels)[number];
+
+export interface Notification {
+	id: string;
+	userId: string;
+	teamId: string;
+	type: NotificationChannel;
+	notificationName: string;
+	address?: string;
+	phone?: string;
+	homeserverUrl?: string;
+	roomId?: string;
+	accessToken?: string;
+	createdAt: string;
+	updatedAt: string;
+}
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index f955f3c22..960397021 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -337,6 +337,11 @@
 					"Keep administrators informed of system changes"
 				],
 				"title": "Notification channles are used to:"
+			},
+			"table": {
+				"headers": {
+					"destination": "Destination"
+				}
 			}
 		}
 	},