danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: notifications

Browse source
This commit is contained in:
Nicolas Meienberger 2026-02-08 15:54:00 +01:00
parent e424009dd3
commit 975ff23799
7 changed files with 169 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/client/modules/notifications/routes/create-notification.tsx
View file

@ -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}>

44
app/client/modules/notifications/routes/notification-details.tsx
View file

@ -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", {

55
app/client/modules/notifications/routes/notifications.tsx
View file

@ -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>

67
app/routeTree.gen.ts
View file

@ -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:

27
app/routes/(dashboard)/notifications/$notificationId.tsx Normal file
View file

@ -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} />;
}

19
app/routes/(dashboard)/notifications/create.tsx Normal file
View file

@ -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 />;
}

23
app/routes/(dashboard)/notifications/index.tsx Normal file
View file

@ -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 />;
}