From 975ff23799b977f1ccfb7a9b28abb27b5f2befb8 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Sun, 8 Feb 2026 15:54:00 +0100
Subject: [PATCH] refactor: notifications

---
 .../routes/create-notification.tsx            | 19 ++----
 .../routes/notification-details.tsx           | 44 ++++--------
 .../notifications/routes/notifications.tsx    | 55 +++++----------
 app/routeTree.gen.ts                          | 67 +++++++++++++++++++
 .../notifications/$notificationId.tsx         | 27 ++++++++
 .../(dashboard)/notifications/create.tsx      | 19 ++++++
 .../(dashboard)/notifications/index.tsx       | 23 +++++++
 7 files changed, 169 insertions(+), 85 deletions(-)
 create mode 100644 app/routes/(dashboard)/notifications/$notificationId.tsx
 create mode 100644 app/routes/(dashboard)/notifications/create.tsx
 create mode 100644 app/routes/(dashboard)/notifications/index.tsx

diff --git a/app/client/modules/notifications/routes/create-notification.tsx b/app/client/modules/notifications/routes/create-notification.tsx
index c6db625c..b70b8281 100644
--- a/app/client/modules/notifications/routes/create-notification.tsx
+++ b/app/client/modules/notifications/routes/create-notification.tsx
@@ -1,31 +1,20 @@
 import { useMutation } from "@tanstack/react-query";
 import { Bell, Plus } from "lucide-react";
 import { useId } from "react";
-import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { createNotificationDestinationMutation } from "~/client/api-client/@tanstack/react-query.gen";
 import { Button } from "~/client/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
 import { parseError } from "~/client/lib/errors";
-import type { Route } from "./+types/create-notification";
 import { Alert, AlertDescription } from "~/client/components/ui/alert";
 import { CreateNotificationForm, type NotificationFormValues } from "../components/create-notification-form";
+import { useNavigate } from "@tanstack/react-router";
 
 export const handle = {
 	breadcrumb: () => [{ label: "Notifications", href: "/notifications" }, { label: "Create" }],
 };
 
-export function meta(_: Route.MetaArgs) {
-	return [
-		{ title: "Zerobyte - Create Notification" },
-		{
-			name: "description",
-			content: "Create a new notification destination for backup alerts.",
-		},
-	];
-}
-
-export default function CreateNotification() {
+export function CreateNotificationPage() {
 	const navigate = useNavigate();
 	const formId = useId();
 
@@ -33,7 +22,7 @@ export default function CreateNotification() {
 		...createNotificationDestinationMutation(),
 		onSuccess: () => {
 			toast.success("Notification destination created successfully");
-			void navigate(`/notifications`);
+			void navigate({ to: `/notifications` });
 		},
 	});
 
@@ -64,7 +53,7 @@ export default function CreateNotification() {
 					)}
 					<CreateNotificationForm mode="create" formId={formId} onSubmit={handleSubmit} />
 					<div className="flex justify-end gap-2 pt-4 border-t">
-						<Button type="button" variant="secondary" onClick={() => navigate("/notifications")}>
+						<Button type="button" variant="secondary" onClick={() => navigate({ to: "/notifications" })}>
 							Cancel
 						</Button>
 						<Button type="submit" form={formId} loading={createNotification.isPending}>
diff --git a/app/client/modules/notifications/routes/notification-details.tsx b/app/client/modules/notifications/routes/notification-details.tsx
index 3aae456b..3be93971 100644
--- a/app/client/modules/notifications/routes/notification-details.tsx
+++ b/app/client/modules/notifications/routes/notification-details.tsx
@@ -1,5 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { redirect, useNavigate } from "react-router";
+import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { useState, useId } from "react";
 import {
@@ -20,53 +19,34 @@ import {
 	AlertDialogTitle,
 } from "~/client/components/ui/alert-dialog";
 import { parseError } from "~/client/lib/errors";
-import { getNotificationDestination } from "~/client/api-client/sdk.gen";
-import type { Route } from "./+types/notification-details";
 import { cn } from "~/client/lib/utils";
 import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
 import { Bell, Save, TestTube2, Trash2 } from "lucide-react";
 import { Alert, AlertDescription } from "~/client/components/ui/alert";
 import { CreateNotificationForm, type NotificationFormValues } from "../components/create-notification-form";
+import { useNavigate } from "@tanstack/react-router";
 
-export const handle = {
-	breadcrumb: (match: Route.MetaArgs) => [
-		{ label: "Notifications", href: "/notifications" },
-		{ label: match.params.id },
-	],
-};
+// export const handle = {
+// 	breadcrumb: (match: Route.MetaArgs) => [
+// 		{ label: "Notifications", href: "/notifications" },
+// 		{ label: match.params.id },
+// 	],
+// };
 
-export function meta({ params }: Route.MetaArgs) {
-	return [
-		{ title: `Zerobyte - Notification ${params.id}` },
-		{
-			name: "description",
-			content: "View and edit notification destination settings.",
-		},
-	];
-}
-
-export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const destination = await getNotificationDestination({ path: { id: params.id ?? "" } });
-	if (destination.data) return destination.data;
-
-	return redirect("/notifications");
-};
-
-export default function NotificationDetailsPage({ loaderData }: Route.ComponentProps) {
+export function NotificationDetailsPage({ notificationId }: { notificationId: string }) {
 	const navigate = useNavigate();
 	const formId = useId();
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
-	const { data } = useQuery({
-		...getNotificationDestinationOptions({ path: { id: String(loaderData.id) } }),
-		initialData: loaderData,
+	const { data } = useSuspenseQuery({
+		...getNotificationDestinationOptions({ path: { id: notificationId } }),
 	});
 
 	const deleteDestination = useMutation({
 		...deleteNotificationDestinationMutation(),
 		onSuccess: () => {
 			toast.success("Notification destination deleted successfully");
-			void navigate("/notifications");
+			void navigate({ to: "/notifications" });
 		},
 		onError: (error) => {
 			toast.error("Failed to delete notification destination", {
diff --git a/app/client/modules/notifications/routes/notifications.tsx b/app/client/modules/notifications/routes/notifications.tsx
index 995ca0be..94824195 100644
--- a/app/client/modules/notifications/routes/notifications.tsx
+++ b/app/client/modules/notifications/routes/notifications.tsx
@@ -1,7 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { Bell, Plus, RotateCcw } from "lucide-react";
 import { useState } from "react";
-import { useNavigate } from "react-router";
 import { EmptyState } from "~/client/components/empty-state";
 import { StatusDot } from "~/client/components/status-dot";
 import { Button } from "~/client/components/ui/button";
@@ -9,31 +8,14 @@ import { Card } from "~/client/components/ui/card";
 import { Input } from "~/client/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
-import type { Route } from "./+types/notifications";
-import { listNotificationDestinations } from "~/client/api-client";
 import { listNotificationDestinationsOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { useNavigate } from "@tanstack/react-router";
 
 export const handle = {
 	breadcrumb: () => [{ label: "Notifications" }],
 };
 
-export function meta(_: Route.MetaArgs) {
-	return [
-		{ title: "Zerobyte - Notifications" },
-		{
-			name: "description",
-			content: "Manage notification destinations for backup alerts.",
-		},
-	];
-}
-
-export const clientLoader = async () => {
-	const result = await listNotificationDestinations();
-	if (result.data) return result.data;
-	return [];
-};
-
-export default function Notifications({ loaderData }: Route.ComponentProps) {
+export function NotificationsPage() {
 	const [searchQuery, setSearchQuery] = useState("");
 	const [typeFilter, setTypeFilter] = useState("");
 	const [statusFilter, setStatusFilter] = useState("");
@@ -46,19 +28,16 @@ export default function Notifications({ loaderData }: Route.ComponentProps) {
 
 	const navigate = useNavigate();
 
-	const { data } = useQuery({
+	const { data } = useSuspenseQuery({
 		...listNotificationDestinationsOptions(),
-		initialData: loaderData,
 	});
 
-	const filteredNotifications =
-		data?.filter((notification) => {
-			const matchesSearch = notification.name.toLowerCase().includes(searchQuery.toLowerCase());
-			const matchesType = !typeFilter || notification.type === typeFilter;
-			const matchesStatus =
-				!statusFilter || (statusFilter === "enabled" ? notification.enabled : !notification.enabled);
-			return matchesSearch && matchesType && matchesStatus;
-		}) || [];
+	const filteredNotifications = data.filter((notification) => {
+		const matchesSearch = notification.name.toLowerCase().includes(searchQuery.toLowerCase());
+		const matchesType = !typeFilter || notification.type === typeFilter;
+		const matchesStatus = !statusFilter || (statusFilter === "enabled" ? notification.enabled : !notification.enabled);
+		return matchesSearch && matchesType && matchesStatus;
+	});
 
 	const hasNoNotifications = data.length === 0;
 	const hasNoFilteredNotifications = filteredNotifications.length === 0 && !hasNoNotifications;
@@ -70,7 +49,7 @@ export default function Notifications({ loaderData }: Route.ComponentProps) {
 				title="No notification destinations"
 				description="Set up notification channels to receive alerts when your backups complete or fail."
 				button={
-					<Button onClick={() => navigate("/notifications/create")}>
+					<Button onClick={() => navigate({ to: "/notifications/create" })}>
 						<Plus size={16} className="mr-2" />
 						Create Destination
 					</Button>
@@ -84,13 +63,13 @@ export default function Notifications({ loaderData }: Route.ComponentProps) {
 			<div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-2 md:justify-between p-4 bg-card-header py-4">
 				<span className="flex flex-col sm:flex-row items-stretch md:items-center gap-0 flex-wrap ">
 					<Input
-						className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px"
+						className="w-full lg:w-45 min-w-45 -mr-px -mt-px"
 						placeholder="Search destinations…"
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
 					/>
 					<Select value={typeFilter} onValueChange={setTypeFilter}>
-						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mr-px -mt-px">
+						<SelectTrigger className="w-full lg:w-45 min-w-45 -mr-px -mt-px">
 							<SelectValue placeholder="All types" />
 						</SelectTrigger>
 						<SelectContent>
@@ -105,7 +84,7 @@ export default function Notifications({ loaderData }: Route.ComponentProps) {
 						</SelectContent>
 					</Select>
 					<Select value={statusFilter} onValueChange={setStatusFilter}>
-						<SelectTrigger className="w-full lg:w-[180px] min-w-[180px] -mt-px">
+						<SelectTrigger className="w-full lg:w-45 min-w-45 -mt-px">
 							<SelectValue placeholder="All status" />
 						</SelectTrigger>
 						<SelectContent>
@@ -120,7 +99,7 @@ export default function Notifications({ loaderData }: Route.ComponentProps) {
 						</Button>
 					)}
 				</span>
-				<Button onClick={() => navigate("/notifications/create")}>
+				<Button onClick={() => navigate({ to: "/notifications/create" })}>
 					<Plus size={16} className="mr-2" />
 					Create Destination
 				</Button>
@@ -129,7 +108,7 @@ export default function Notifications({ loaderData }: Route.ComponentProps) {
 				<Table className="border-t">
 					<TableHeader className="bg-card-header">
 						<TableRow>
-							<TableHead className="w-[100px] uppercase">Name</TableHead>
+							<TableHead className="w-25 uppercase">Name</TableHead>
 							<TableHead className="uppercase text-left">Type</TableHead>
 							<TableHead className="uppercase text-center">Status</TableHead>
 						</TableRow>
@@ -152,7 +131,7 @@ export default function Notifications({ loaderData }: Route.ComponentProps) {
 								<TableRow
 									key={notification.id}
 									className="hover:bg-accent/50 hover:cursor-pointer"
-									onClick={() => navigate(`/notifications/${notification.id}`)}
+									onClick={() => navigate({ to: `/notifications/${notification.id}` })}
 								>
 									<TableCell className="font-medium text-strong-accent">{notification.name}</TableCell>
 									<TableCell className="capitalize">{notification.type}</TableCell>
diff --git a/app/routeTree.gen.ts b/app/routeTree.gen.ts
index 9d7e27ab..5bf4e5a5 100644
--- a/app/routeTree.gen.ts
+++ b/app/routeTree.gen.ts
@@ -16,11 +16,14 @@ import { Route as authLoginRouteImport } from './routes/(auth)/login'
 import { Route as authDownloadRecoveryKeyRouteImport } from './routes/(auth)/download-recovery-key'
 import { Route as dashboardVolumesIndexRouteImport } from './routes/(dashboard)/volumes/index'
 import { Route as dashboardRepositoriesIndexRouteImport } from './routes/(dashboard)/repositories/index'
+import { Route as dashboardNotificationsIndexRouteImport } from './routes/(dashboard)/notifications/index'
 import { Route as dashboardBackupsIndexRouteImport } from './routes/(dashboard)/backups/index'
 import { Route as dashboardVolumesCreateRouteImport } from './routes/(dashboard)/volumes/create'
 import { Route as dashboardVolumesVolumeIdRouteImport } from './routes/(dashboard)/volumes/$volumeId'
 import { Route as dashboardRepositoriesCreateRouteImport } from './routes/(dashboard)/repositories/create'
 import { Route as dashboardRepositoriesRepositoryIdRouteImport } from './routes/(dashboard)/repositories/$repositoryId'
+import { Route as dashboardNotificationsCreateRouteImport } from './routes/(dashboard)/notifications/create'
+import { Route as dashboardNotificationsNotificationIdRouteImport } from './routes/(dashboard)/notifications/$notificationId'
 import { Route as dashboardBackupsCreateRouteImport } from './routes/(dashboard)/backups/create'
 import { Route as dashboardBackupsScheduleIdRouteImport } from './routes/(dashboard)/backups/$scheduleId'
 import { Route as dashboardRepositoriesRepoIdSnapshotIdRouteImport } from './routes/(dashboard)/repositories/$repoId.$snapshotId'
@@ -62,6 +65,12 @@ const dashboardRepositoriesIndexRoute =
     path: '/repositories/',
     getParentRoute: () => dashboardRouteRoute,
   } as any)
+const dashboardNotificationsIndexRoute =
+  dashboardNotificationsIndexRouteImport.update({
+    id: '/notifications/',
+    path: '/notifications/',
+    getParentRoute: () => dashboardRouteRoute,
+  } as any)
 const dashboardBackupsIndexRoute = dashboardBackupsIndexRouteImport.update({
   id: '/backups/',
   path: '/backups/',
@@ -90,6 +99,18 @@ const dashboardRepositoriesRepositoryIdRoute =
     path: '/repositories/$repositoryId',
     getParentRoute: () => dashboardRouteRoute,
   } as any)
+const dashboardNotificationsCreateRoute =
+  dashboardNotificationsCreateRouteImport.update({
+    id: '/notifications/create',
+    path: '/notifications/create',
+    getParentRoute: () => dashboardRouteRoute,
+  } as any)
+const dashboardNotificationsNotificationIdRoute =
+  dashboardNotificationsNotificationIdRouteImport.update({
+    id: '/notifications/$notificationId',
+    path: '/notifications/$notificationId',
+    getParentRoute: () => dashboardRouteRoute,
+  } as any)
 const dashboardBackupsCreateRoute = dashboardBackupsCreateRouteImport.update({
   id: '/backups/create',
   path: '/backups/create',
@@ -127,11 +148,14 @@ export interface FileRoutesByFullPath {
   '/onboarding': typeof authOnboardingRoute
   '/backups/$scheduleId': typeof dashboardBackupsScheduleIdRoute
   '/backups/create': typeof dashboardBackupsCreateRoute
+  '/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
+  '/notifications/create': typeof dashboardNotificationsCreateRoute
   '/repositories/$repositoryId': typeof dashboardRepositoriesRepositoryIdRoute
   '/repositories/create': typeof dashboardRepositoriesCreateRoute
   '/volumes/$volumeId': typeof dashboardVolumesVolumeIdRoute
   '/volumes/create': typeof dashboardVolumesCreateRoute
   '/backups/': typeof dashboardBackupsIndexRoute
+  '/notifications/': typeof dashboardNotificationsIndexRoute
   '/repositories/': typeof dashboardRepositoriesIndexRoute
   '/volumes/': typeof dashboardVolumesIndexRoute
   '/repositories/$repoId/$snapshotId': typeof dashboardRepositoriesRepoIdSnapshotIdRoute
@@ -145,11 +169,14 @@ export interface FileRoutesByTo {
   '/onboarding': typeof authOnboardingRoute
   '/backups/$scheduleId': typeof dashboardBackupsScheduleIdRoute
   '/backups/create': typeof dashboardBackupsCreateRoute
+  '/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
+  '/notifications/create': typeof dashboardNotificationsCreateRoute
   '/repositories/$repositoryId': typeof dashboardRepositoriesRepositoryIdRoute
   '/repositories/create': typeof dashboardRepositoriesCreateRoute
   '/volumes/$volumeId': typeof dashboardVolumesVolumeIdRoute
   '/volumes/create': typeof dashboardVolumesCreateRoute
   '/backups': typeof dashboardBackupsIndexRoute
+  '/notifications': typeof dashboardNotificationsIndexRoute
   '/repositories': typeof dashboardRepositoriesIndexRoute
   '/volumes': typeof dashboardVolumesIndexRoute
   '/repositories/$repoId/$snapshotId': typeof dashboardRepositoriesRepoIdSnapshotIdRoute
@@ -165,11 +192,14 @@ export interface FileRoutesById {
   '/(auth)/onboarding': typeof authOnboardingRoute
   '/(dashboard)/backups/$scheduleId': typeof dashboardBackupsScheduleIdRoute
   '/(dashboard)/backups/create': typeof dashboardBackupsCreateRoute
+  '/(dashboard)/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
+  '/(dashboard)/notifications/create': typeof dashboardNotificationsCreateRoute
   '/(dashboard)/repositories/$repositoryId': typeof dashboardRepositoriesRepositoryIdRoute
   '/(dashboard)/repositories/create': typeof dashboardRepositoriesCreateRoute
   '/(dashboard)/volumes/$volumeId': typeof dashboardVolumesVolumeIdRoute
   '/(dashboard)/volumes/create': typeof dashboardVolumesCreateRoute
   '/(dashboard)/backups/': typeof dashboardBackupsIndexRoute
+  '/(dashboard)/notifications/': typeof dashboardNotificationsIndexRoute
   '/(dashboard)/repositories/': typeof dashboardRepositoriesIndexRoute
   '/(dashboard)/volumes/': typeof dashboardVolumesIndexRoute
   '/(dashboard)/repositories/$repoId/$snapshotId': typeof dashboardRepositoriesRepoIdSnapshotIdRoute
@@ -185,11 +215,14 @@ export interface FileRouteTypes {
     | '/onboarding'
     | '/backups/$scheduleId'
     | '/backups/create'
+    | '/notifications/$notificationId'
+    | '/notifications/create'
     | '/repositories/$repositoryId'
     | '/repositories/create'
     | '/volumes/$volumeId'
     | '/volumes/create'
     | '/backups/'
+    | '/notifications/'
     | '/repositories/'
     | '/volumes/'
     | '/repositories/$repoId/$snapshotId'
@@ -203,11 +236,14 @@ export interface FileRouteTypes {
     | '/onboarding'
     | '/backups/$scheduleId'
     | '/backups/create'
+    | '/notifications/$notificationId'
+    | '/notifications/create'
     | '/repositories/$repositoryId'
     | '/repositories/create'
     | '/volumes/$volumeId'
     | '/volumes/create'
     | '/backups'
+    | '/notifications'
     | '/repositories'
     | '/volumes'
     | '/repositories/$repoId/$snapshotId'
@@ -222,11 +258,14 @@ export interface FileRouteTypes {
     | '/(auth)/onboarding'
     | '/(dashboard)/backups/$scheduleId'
     | '/(dashboard)/backups/create'
+    | '/(dashboard)/notifications/$notificationId'
+    | '/(dashboard)/notifications/create'
     | '/(dashboard)/repositories/$repositoryId'
     | '/(dashboard)/repositories/create'
     | '/(dashboard)/volumes/$volumeId'
     | '/(dashboard)/volumes/create'
     | '/(dashboard)/backups/'
+    | '/(dashboard)/notifications/'
     | '/(dashboard)/repositories/'
     | '/(dashboard)/volumes/'
     | '/(dashboard)/repositories/$repoId/$snapshotId'
@@ -293,6 +332,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof dashboardRepositoriesIndexRouteImport
       parentRoute: typeof dashboardRouteRoute
     }
+    '/(dashboard)/notifications/': {
+      id: '/(dashboard)/notifications/'
+      path: '/notifications'
+      fullPath: '/notifications/'
+      preLoaderRoute: typeof dashboardNotificationsIndexRouteImport
+      parentRoute: typeof dashboardRouteRoute
+    }
     '/(dashboard)/backups/': {
       id: '/(dashboard)/backups/'
       path: '/backups'
@@ -328,6 +374,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof dashboardRepositoriesRepositoryIdRouteImport
       parentRoute: typeof dashboardRouteRoute
     }
+    '/(dashboard)/notifications/create': {
+      id: '/(dashboard)/notifications/create'
+      path: '/notifications/create'
+      fullPath: '/notifications/create'
+      preLoaderRoute: typeof dashboardNotificationsCreateRouteImport
+      parentRoute: typeof dashboardRouteRoute
+    }
+    '/(dashboard)/notifications/$notificationId': {
+      id: '/(dashboard)/notifications/$notificationId'
+      path: '/notifications/$notificationId'
+      fullPath: '/notifications/$notificationId'
+      preLoaderRoute: typeof dashboardNotificationsNotificationIdRouteImport
+      parentRoute: typeof dashboardRouteRoute
+    }
     '/(dashboard)/backups/create': {
       id: '/(dashboard)/backups/create'
       path: '/backups/create'
@@ -369,11 +429,14 @@ declare module '@tanstack/react-router' {
 interface dashboardRouteRouteChildren {
   dashboardBackupsScheduleIdRoute: typeof dashboardBackupsScheduleIdRoute
   dashboardBackupsCreateRoute: typeof dashboardBackupsCreateRoute
+  dashboardNotificationsNotificationIdRoute: typeof dashboardNotificationsNotificationIdRoute
+  dashboardNotificationsCreateRoute: typeof dashboardNotificationsCreateRoute
   dashboardRepositoriesRepositoryIdRoute: typeof dashboardRepositoriesRepositoryIdRoute
   dashboardRepositoriesCreateRoute: typeof dashboardRepositoriesCreateRoute
   dashboardVolumesVolumeIdRoute: typeof dashboardVolumesVolumeIdRoute
   dashboardVolumesCreateRoute: typeof dashboardVolumesCreateRoute
   dashboardBackupsIndexRoute: typeof dashboardBackupsIndexRoute
+  dashboardNotificationsIndexRoute: typeof dashboardNotificationsIndexRoute
   dashboardRepositoriesIndexRoute: typeof dashboardRepositoriesIndexRoute
   dashboardVolumesIndexRoute: typeof dashboardVolumesIndexRoute
   dashboardRepositoriesRepoIdSnapshotIdRoute: typeof dashboardRepositoriesRepoIdSnapshotIdRoute
@@ -384,12 +447,16 @@ interface dashboardRouteRouteChildren {
 const dashboardRouteRouteChildren: dashboardRouteRouteChildren = {
   dashboardBackupsScheduleIdRoute: dashboardBackupsScheduleIdRoute,
   dashboardBackupsCreateRoute: dashboardBackupsCreateRoute,
+  dashboardNotificationsNotificationIdRoute:
+    dashboardNotificationsNotificationIdRoute,
+  dashboardNotificationsCreateRoute: dashboardNotificationsCreateRoute,
   dashboardRepositoriesRepositoryIdRoute:
     dashboardRepositoriesRepositoryIdRoute,
   dashboardRepositoriesCreateRoute: dashboardRepositoriesCreateRoute,
   dashboardVolumesVolumeIdRoute: dashboardVolumesVolumeIdRoute,
   dashboardVolumesCreateRoute: dashboardVolumesCreateRoute,
   dashboardBackupsIndexRoute: dashboardBackupsIndexRoute,
+  dashboardNotificationsIndexRoute: dashboardNotificationsIndexRoute,
   dashboardRepositoriesIndexRoute: dashboardRepositoriesIndexRoute,
   dashboardVolumesIndexRoute: dashboardVolumesIndexRoute,
   dashboardRepositoriesRepoIdSnapshotIdRoute:
diff --git a/app/routes/(dashboard)/notifications/$notificationId.tsx b/app/routes/(dashboard)/notifications/$notificationId.tsx
new file mode 100644
index 00000000..f1d5c685
--- /dev/null
+++ b/app/routes/(dashboard)/notifications/$notificationId.tsx
@@ -0,0 +1,27 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getNotificationDestinationOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { NotificationDetailsPage } from "~/client/modules/notifications/routes/notification-details";
+
+export const Route = createFileRoute("/(dashboard)/notifications/$notificationId")({
+	component: RouteComponent,
+	loader: async ({ params, context }) => {
+		const res = await context.queryClient.ensureQueryData({
+			...getNotificationDestinationOptions({ path: { id: params.notificationId } }),
+		});
+
+		return res;
+	},
+	head: ({ loaderData }) => ({
+		meta: [
+			{ title: `Zerobyte - ${loaderData?.name}` },
+			{
+				name: "description",
+				content: "View and edit notification destination settings.",
+			},
+		],
+	}),
+});
+
+function RouteComponent() {
+	return <NotificationDetailsPage notificationId={Route.useParams().notificationId} />;
+}
diff --git a/app/routes/(dashboard)/notifications/create.tsx b/app/routes/(dashboard)/notifications/create.tsx
new file mode 100644
index 00000000..d7169551
--- /dev/null
+++ b/app/routes/(dashboard)/notifications/create.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { CreateNotificationPage } from "~/client/modules/notifications/routes/create-notification";
+
+export const Route = createFileRoute("/(dashboard)/notifications/create")({
+	component: RouteComponent,
+	head: () => ({
+		meta: [
+			{ title: "Zerobyte - Create Notification" },
+			{
+				name: "description",
+				content: "Create a new notification destination for backup alerts.",
+			},
+		],
+	}),
+});
+
+function RouteComponent() {
+	return <CreateNotificationPage />;
+}
diff --git a/app/routes/(dashboard)/notifications/index.tsx b/app/routes/(dashboard)/notifications/index.tsx
new file mode 100644
index 00000000..b4e20c08
--- /dev/null
+++ b/app/routes/(dashboard)/notifications/index.tsx
@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { listNotificationDestinationsOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { NotificationsPage } from "~/client/modules/notifications/routes/notifications";
+
+export const Route = createFileRoute("/(dashboard)/notifications/")({
+	component: RouteComponent,
+	loader: async ({ context }) => {
+		await context.queryClient.ensureQueryData({ ...listNotificationDestinationsOptions() });
+	},
+	head: () => ({
+		meta: [
+			{ title: "Zerobyte - Notifications" },
+			{
+				name: "description",
+				content: "Manage notification destinations for backup alerts.",
+			},
+		],
+	}),
+});
+
+function RouteComponent() {
+	return <NotificationsPage />;
+}