feat(notification): base notifcaiton sub and admin compelted

can now sub to a notification and user can remove them selfs plus an admin can remove,updates to add
new emails are good as well

README.md

@@ -7,7 +7,7 @@
 Quick summary of current rewrite/migration goal.
 
 - **Phase:** Backend rewrite
-- **Last updated:** 2026-04-05
+- **Last updated:** 2026-04-06
 
 ---
 
@@ -16,9 +16,9 @@ Quick summary of current rewrite/migration goal.
 | Feature | Description | Status |
 |----------|--------------|--------|
 | User Authentication | ~~Login~~, ~~Signup~~, API Key | 🟨 In Progress |
-| User Profile | Edit profile, upload avatar | 🟨 In Progress |
+| User Profile | ~~Edit profile~~, upload avatar | 🟨 In Progress |
 | User Admin | Edit user, create user, remove user, alplaprod user integration | ⏳ Not Started |
-| Notifications | Subscribe, ~~Create~~, Update, Remove, Manual Trigger | 🟨 In Progress |
+| Notifications | ~~Subscribe~~, ~~Create~~, ~~Update~~, ~~~~Remove~~, Manual Trigger | 🟨 In Progress |
 | Datamart | Create, Update, Run, Deactivate | 🔧 In Progress |
 | Frontend | Analytics and charts | ⏳ Not Started |
 | Docs | Instructions and trouble shooting | ⏳ Not Started |
@@ -44,7 +44,7 @@ _Status legend:_
 How to run the current version of the app.
 
 ```bash
-git clone https://github.com/youruser/yourrepo.git
+git clone https://git.tuffraid.net/cowch/lst_v3.git
-cd yourrepo
+cd lst_v3
 npm install
 npm run dev

backend/notification/notificationSub.delete.route.ts

@@ -3,12 +3,12 @@ import { type Response, Router } from "express";
 import z from "zod";
 import { db } from "../db/db.controller.js";
 import { notificationSub } from "../db/schema/notifications.sub.schema.js";
+import { auth } from "../utils/auth.utils.js";
 import { apiReturn } from "../utils/returnHelper.utils.js";
 import { tryCatch } from "../utils/trycatch.utils.js";
 import { modifiedNotification } from "./notification.controller.js";
 
 const newSubscribe = z.object({
-	emails: z.email().array().describe("An array of emails"),
 	userId: z.string().describe("User id."),
 	notificationId: z.string().describe("Notification id"),
 });
@@ -16,14 +16,29 @@ const newSubscribe = z.object({
 const r = Router();
 
 r.delete("/", async (req, res: Response) => {
+	const hasPermissions = await auth.api.userHasPermission({
+		body: {
+			//userId: req?.user?.id,
+			role: req.user?.roles as any,
+			permissions: {
+				notifications: ["readAll"], // This must match the structure in your access control
+			},
+		},
+	});
+
 	try {
 		const validated = newSubscribe.parse(req.body);
+
 		const { data, error } = await tryCatch(
 			db
 				.delete(notificationSub)
 				.where(
 					and(
-						eq(notificationSub.userId, validated.userId),
+						eq(
+							notificationSub.userId,
+							hasPermissions ? validated.userId : (req?.user?.id ?? ""),
+						), // allows the admin to delete this
+						//eq(notificationSub.userId, req?.user?.id ?? ""),
 						eq(notificationSub.notificationId, validated.notificationId),
 					),
 				)
@@ -44,6 +59,18 @@ r.delete("/", async (req, res: Response) => {
 			});
 		}
 
+		if (data.length <= 0) {
+			return apiReturn(res, {
+				success: false,
+				level: "info",
+				module: "notification",
+				subModule: "post",
+				message: `Subscription was not deleted invalid data sent over`,
+				data: data ?? [],
+				status: 200,
+			});
+		}
+
 		return apiReturn(res, {
 			success: true,
 			level: "info",

backend/notification/notificationSub.get.route.ts

@@ -21,12 +21,16 @@ r.get("/", async (req, res: Response) => {
 		},
 	});
 
+	if (userId) {
+		hasPermissions.success = false;
+	}
+
 	const { data, error } = await tryCatch(
 		db
 			.select()
 			.from(notificationSub)
 			.where(
-				userId || !hasPermissions.success
+				!hasPermissions.success
 					? eq(notificationSub.userId, `${req?.user?.id ?? ""}`)
 					: undefined,
 			),

backend/notification/notificationSub.post.route.ts

@@ -25,8 +25,25 @@ r.post("/", async (req, res: Response) => {
 	try {
 		const validated = newSubscribe.parse(req.body);
 
+		const emails = validated.emails
+			.map((e) => e.trim().toLowerCase())
+			.filter(Boolean);
+
+		const uniqueEmails = [...new Set(emails)];
+
 		const { data, error } = await tryCatch(
-			db.insert(notificationSub).values(validated).returning(),
+			db
+				.insert(notificationSub)
+				.values({
+					userId: req?.user?.id ?? "",
+					notificationId: validated.notificationId,
+					emails: uniqueEmails,
+				})
+				.onConflictDoUpdate({
+					target: [notificationSub.userId, notificationSub.notificationId],
+					set: { emails: uniqueEmails },
+				})
+				.returning(),
 		);
 
 		await modifiedNotification(validated.notificationId);

frontend/src/components/Sidebar/AdminBar.tsx

@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { Logs } from "lucide-react";
+import { Bell, Logs, Settings } from "lucide-react";
 
 import {
 	SidebarGroup,
@@ -24,10 +24,18 @@ import {
 export default function AdminSidebar({ session }: any) {
 	const { setOpen } = useSidebar();
 	const items = [
+		{
+			title: "Notifications",
+			url: "/admin/notifications",
+			icon: Bell,
+			role: ["systemAdmin", "admin"],
+			module: "admin",
+			active: true,
+		},
 		{
 			title: "Settings",
 			url: "/admin/settings",
-			icon: Logs,
+			icon: Settings,
 			role: ["systemAdmin"],
 			module: "admin",
 			active: true,

frontend/src/lib/formSutff/Select.Field.tsx

@@ -42,9 +42,7 @@ export const SelectField = ({
 					>
 						<SelectValue placeholder={placeholder} />
 					</SelectTrigger>
-					<SelectContent
+					<SelectContent position={"popper"}>
-					 position={"popper"}
-					 >
 						{options.map((option) => (
 							<SelectItem key={option.value} value={option.value}>
 								{option.label}

frontend/src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
+import { Route as AdminNotificationsRouteImport } from './routes/admin/notifications'
 import { Route as AdminLogsRouteImport } from './routes/admin/logs'
 import { Route as authLoginRouteImport } from './routes/(auth)/login'
 import { Route as authUserSignupRouteImport } from './routes/(auth)/user.signup'
@@ -33,6 +34,11 @@ const AdminSettingsRoute = AdminSettingsRouteImport.update({
   path: '/admin/settings',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminNotificationsRoute = AdminNotificationsRouteImport.update({
+  id: '/admin/notifications',
+  path: '/admin/notifications',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AdminLogsRoute = AdminLogsRouteImport.update({
   id: '/admin/logs',
   path: '/admin/logs',
@@ -64,6 +70,7 @@ export interface FileRoutesByFullPath {
   '/about': typeof AboutRoute
   '/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
+  '/admin/notifications': typeof AdminNotificationsRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/user/profile': typeof authUserProfileRoute
   '/user/resetpassword': typeof authUserResetpasswordRoute
@@ -74,6 +81,7 @@ export interface FileRoutesByTo {
   '/about': typeof AboutRoute
   '/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
+  '/admin/notifications': typeof AdminNotificationsRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/user/profile': typeof authUserProfileRoute
   '/user/resetpassword': typeof authUserResetpasswordRoute
@@ -85,6 +93,7 @@ export interface FileRoutesById {
   '/about': typeof AboutRoute
   '/(auth)/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
+  '/admin/notifications': typeof AdminNotificationsRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/(auth)/user/profile': typeof authUserProfileRoute
   '/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
@@ -97,6 +106,7 @@ export interface FileRouteTypes {
     | '/about'
     | '/login'
     | '/admin/logs'
+    | '/admin/notifications'
     | '/admin/settings'
     | '/user/profile'
     | '/user/resetpassword'
@@ -107,6 +117,7 @@ export interface FileRouteTypes {
     | '/about'
     | '/login'
     | '/admin/logs'
+    | '/admin/notifications'
     | '/admin/settings'
     | '/user/profile'
     | '/user/resetpassword'
@@ -117,6 +128,7 @@ export interface FileRouteTypes {
     | '/about'
     | '/(auth)/login'
     | '/admin/logs'
+    | '/admin/notifications'
     | '/admin/settings'
     | '/(auth)/user/profile'
     | '/(auth)/user/resetpassword'
@@ -128,6 +140,7 @@ export interface RootRouteChildren {
   AboutRoute: typeof AboutRoute
   authLoginRoute: typeof authLoginRoute
   AdminLogsRoute: typeof AdminLogsRoute
+  AdminNotificationsRoute: typeof AdminNotificationsRoute
   AdminSettingsRoute: typeof AdminSettingsRoute
   authUserProfileRoute: typeof authUserProfileRoute
   authUserResetpasswordRoute: typeof authUserResetpasswordRoute
@@ -157,6 +170,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminSettingsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/admin/notifications': {
+      id: '/admin/notifications'
+      path: '/admin/notifications'
+      fullPath: '/admin/notifications'
+      preLoaderRoute: typeof AdminNotificationsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/admin/logs': {
       id: '/admin/logs'
       path: '/admin/logs'
@@ -200,6 +220,7 @@ const rootRouteChildren: RootRouteChildren = {
   AboutRoute: AboutRoute,
   authLoginRoute: authLoginRoute,
   AdminLogsRoute: AdminLogsRoute,
+  AdminNotificationsRoute: AdminNotificationsRoute,
   AdminSettingsRoute: AdminSettingsRoute,
   authUserProfileRoute: authUserProfileRoute,
   authUserResetpasswordRoute: authUserResetpasswordRoute,

frontend/src/routes/(auth)/-components/NotificationsSubCard.tsx

@@ -1,4 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { toast } from "sonner";
 import {
 	Card,
 	CardContent,
@@ -12,15 +14,32 @@ import { notifications } from "../../../lib/queries/notifications";
 
 export default function NotificationsSubCard({ user }: any) {
 	const { data } = useSuspenseQuery(notifications());
-	const { data: ns } = useSuspenseQuery(notificationSubs(user.id));
+	const { refetch } = useSuspenseQuery(notificationSubs(user.id));
 	const form = useAppForm({
 		defaultValues: {
 			notificationId: "",
 			emails: [user.email],
 		},
 		onSubmit: async ({ value }) => {
+			if (value.notificationId === "") {
+				toast.error("Please select a notification before trying to subscribe.");
+				return;
+			}
 			const postD = { ...value, userId: user.id };
-			console.log(postD);
+
+			try {
+				const res = await axios.post("/lst/api/notification/sub", postD, {
+					withCredentials: true,
+				});
+
+				if (res.status === 200) {
+					toast.success("Notification Subbed");
+					refetch();
+					form.reset();
+				}
+			} catch (error) {
+				console.error(error);
+			}
 		},
 	});
 
@@ -32,8 +51,6 @@ export default function NotificationsSubCard({ user }: any) {
 		}));
 	}
 
-	console.log(ns);
-
 	return (
 		<div>
 			<Card className="p-3 w-lg">

frontend/src/routes/(auth)/-components/NotificationsTable.tsx

@@ -0,0 +1,114 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
+import axios from "axios";
+import { Trash } from "lucide-react";
+import { toast } from "sonner";
+import type { Notifications } from "../../../../types/notifications";
+import { Button } from "../../../components/ui/button";
+import { Card, CardContent, CardHeader } from "../../../components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "../../../components/ui/tooltip";
+import { notificationSubs } from "../../../lib/queries/notificationSubs";
+import { notifications } from "../../../lib/queries/notifications";
+import LstTable from "../../../lib/tableStuff/LstTable";
+import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
+
+export default function NotificationsTable({ userId }: any) {
+	const { data: subs, refetch } = useSuspenseQuery(notificationSubs(userId));
+	const { data: note } = useSuspenseQuery(notifications());
+	const columnHelper = createColumnHelper<Notifications>();
+
+	// filter out the current
+	const notificationMap = Object.fromEntries(note.map((n: any) => [n.id, n]));
+
+	const data = subs.map((sub: any) => ({
+		...sub,
+		name: notificationMap[sub.notificationId].name || null,
+		description: notificationMap[sub.notificationId].description || null,
+		emails: sub.emails ? sub.emails.join(",") : null,
+	}));
+
+	const removeNotification = async (ns: any) => {
+		try {
+			const res = await axios.delete(`/lst/api/notification/sub`, {
+				withCredentials: true,
+				data: {
+					userId: ns.userId,
+					notificationId: ns.notificationId,
+				},
+			});
+
+			if (res.data.success) {
+				toast.success(`Subscription removed`);
+				refetch();
+			} else {
+				console.info(res);
+				toast.error(res.data.message);
+			}
+		} catch {
+			toast.error(`There was an error removing subscription.`);
+		}
+	};
+
+	const column = [
+		columnHelper.accessor("name", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Name" searchable={true} />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("description", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Description" />
+			),
+			cell: (i) => (
+				<Tooltip>
+					<TooltipTrigger>
+						{i.getValue()?.length > 25 ? (
+							<span>{i.getValue().slice(0, 25)}...</span>
+						) : (
+							<span>{i.getValue()}</span>
+						)}
+					</TooltipTrigger>
+					<TooltipContent>{i.getValue()}</TooltipContent>
+				</Tooltip>
+			),
+		}),
+		columnHelper.accessor("emails", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Emails" searchable={true} />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("remove", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Remove" searchable={false} />
+			),
+			filterFn: "includesString",
+			cell: (i) => {
+				return (
+					<Button
+						size="icon"
+						variant={"destructive"}
+						onClick={() => removeNotification(i.row.original)}
+					>
+						<Trash />
+					</Button>
+				);
+			},
+		}),
+	];
+	return (
+		<Card>
+			<CardHeader className="text-center">Subscriptions</CardHeader>
+			<CardContent>
+				<LstTable data={data} columns={column} />
+			</CardContent>
+		</Card>
+	);
+}

frontend/src/routes/(auth)/user.profile.tsx

@@ -13,6 +13,7 @@ import { useAppForm } from "@/lib/formSutff";
 import { Spinner } from "../../components/ui/spinner";
 import ChangePassword from "./-components/ChangePassword";
 import NotificationsSubCard from "./-components/NotificationsSubCard";
+import NotificationsTable from "./-components/NotificationsTable";
 
 export const Route = createFileRoute("/(auth)/user/profile")({
 	beforeLoad: async () => {
@@ -119,11 +120,24 @@ function RouteComponent() {
 				</div>
 			</div>
 			<div className="w-fill">
-				<Card>
+				<Suspense
-					<CardHeader className="text-center">
+					fallback={
-						You are not subscribed to any notifications.
+						<Card className="p-3">
-					</CardHeader>
+							<CardHeader>
-				</Card>
+								<CardTitle className="text-center">Subscriptions</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<div className="flex justify-center m-auto">
+									<div>
+										<Spinner className="size-32" />
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					}
+				>
+					{session && <NotificationsTable userId={`${session.user.id}`} />}
+				</Suspense>
 			</div>
 		</div>
 	);

frontend/src/routes/admin/notifications.tsx

@@ -0,0 +1,316 @@
+import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createColumnHelper } from "@tanstack/react-table";
+import axios from "axios";
+import { Trash } from "lucide-react";
+import { Suspense, useState } from "react";
+import { toast } from "sonner";
+import type { Notifications } from "../../../types/notifications";
+import { Button } from "../../components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../../components/ui/card";
+import { Label } from "../../components/ui/label";
+import { Switch } from "../../components/ui/switch";
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "../../components/ui/tabs";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { authClient } from "../../lib/auth-client";
+import { notificationSubs } from "../../lib/queries/notificationSubs";
+import { notifications } from "../../lib/queries/notifications";
+import EditableCellInput from "../../lib/tableStuff/EditableCellInput";
+import LstTable from "../../lib/tableStuff/LstTable";
+import SearchableHeader from "../../lib/tableStuff/SearchableHeader";
+import SkellyTable from "../../lib/tableStuff/SkellyTable";
+
+const updateNotifications = async (
+	id: string,
+	data: Record<string, string | number | boolean | null>,
+) => {
+	//console.log(id, data);
+	try {
+		const res = await axios.patch(
+			`/lst/api/notification/${id}`,
+			{ interval: data.interval },
+			{
+				withCredentials: true,
+			},
+		);
+		toast.success(`Notification was just updated`);
+		return res;
+	} catch (err) {
+		toast.error("Error in updating the settings");
+		return err;
+	}
+};
+
+export const Route = createFileRoute("/admin/notifications")({
+	beforeLoad: async ({ location }) => {
+		const { data: session } = await authClient.getSession();
+		const allowedRole = ["systemAdmin", "admin"];
+
+		if (!session?.user) {
+			throw redirect({
+				to: "/",
+				search: {
+					redirect: location.href,
+				},
+			});
+		}
+
+		if (!allowedRole.includes(session.user.role as string)) {
+			throw redirect({
+				to: "/",
+			});
+		}
+
+		return { user: session.user };
+	},
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { data, refetch } = useSuspenseQuery(notifications());
+	const { data: subs, refetch: subRefetch } = useSuspenseQuery(
+		notificationSubs(),
+	);
+	const columnHelper = createColumnHelper<Notifications>();
+
+	const notificationMap = Object.fromEntries(data.map((n: any) => [n.id, n]));
+
+	const subData = subs.map((sub: any) => ({
+		...sub,
+		name: notificationMap[sub.notificationId].name || null,
+		description: notificationMap[sub.notificationId].description || null,
+		emails: sub.emails ? sub.emails.join(",") : null,
+	}));
+
+	const updateNotification = useMutation({
+		mutationFn: ({
+			id,
+			field,
+			value,
+		}: {
+			id: string;
+			field: string;
+			value: string | number | boolean | null;
+		}) => updateNotifications(id, { [field]: value }),
+
+		onSuccess: () => {
+			// refetch or update cache
+			refetch();
+		},
+	});
+
+	const removeNotification = async (ns: any) => {
+		try {
+			const res = await axios.delete(`/lst/api/notification/sub`, {
+				withCredentials: true,
+				data: {
+					userId: ns.userId,
+					notificationId: ns.notificationId,
+				},
+			});
+
+			if (res.data.success) {
+				toast.success(`Subscription removed`);
+				subRefetch();
+			} else {
+				console.info(res);
+				toast.error(res.data.message);
+			}
+		} catch {
+			toast.error(`There was an error removing subscription.`);
+		}
+	};
+
+	const column = [
+		columnHelper.accessor("name", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Name" searchable={true} />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("description", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Description" />
+			),
+			cell: (i) => (
+				<Tooltip>
+					<TooltipTrigger>
+						{i.getValue()?.length > 25 ? (
+							<span>{i.getValue().slice(0, 25)}...</span>
+						) : (
+							<span>{i.getValue()}</span>
+						)}
+					</TooltipTrigger>
+					<TooltipContent>{i.getValue()}</TooltipContent>
+				</Tooltip>
+			),
+		}),
+		columnHelper.accessor("active", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Active" searchable={false} />
+			),
+			filterFn: "includesString",
+			cell: (i) => {
+				// biome-ignore lint: just removing the lint for now to get this going will maybe fix later
+				const [activeToggle, setActiveToggle] = useState(i.getValue());
+
+				const onToggle = async (e: boolean) => {
+					setActiveToggle(e);
+
+					try {
+						const res = await axios.patch(
+							`/lst/api/notification/${i.row.original.id}`,
+							{
+								active: !activeToggle,
+							},
+							{ withCredentials: true },
+						);
+
+						if (res.data.success) {
+							toast.success(
+								`${i.row.original.name} was set to ${activeToggle ? "Inactive" : "Active"}`,
+							);
+							refetch();
+						}
+					} catch (error) {
+						console.error(error);
+					}
+				};
+
+				return (
+					<div className="w-48">
+						<div className="flex items-center space-x-2">
+							<Switch
+								id={i.row.original.id}
+								checked={activeToggle}
+								onCheckedChange={(e) => onToggle(e)}
+								//onBlur={field.handleBlur}
+							/>
+							<Label htmlFor={i.row.original.id}>
+								{activeToggle ? "Active" : "Deactivated"}
+							</Label>
+						</div>
+					</div>
+				);
+			},
+		}),
+		columnHelper.accessor("interval", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Interval" />
+			),
+
+			filterFn: "includesString",
+			cell: ({ row, getValue }) => {
+				return (
+					<EditableCellInput
+						value={getValue()}
+						id={row.original.id}
+						field="interval"
+						onSubmit={({ id, field, value }) => {
+							updateNotification.mutate({ id, field, value });
+						}}
+					/>
+				);
+			},
+		}),
+	];
+
+	const subsColumn = [
+		columnHelper.accessor("name", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Name" searchable={true} />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("description", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Description" />
+			),
+			cell: (i) => (
+				<Tooltip>
+					<TooltipTrigger>
+						{i.getValue()?.length > 25 ? (
+							<span>{i.getValue().slice(0, 25)}...</span>
+						) : (
+							<span>{i.getValue()}</span>
+						)}
+					</TooltipTrigger>
+					<TooltipContent>{i.getValue()}</TooltipContent>
+				</Tooltip>
+			),
+		}),
+		columnHelper.accessor("emails", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Emails" searchable={true} />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("remove", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Remove" searchable={false} />
+			),
+			filterFn: "includesString",
+			cell: (i) => {
+				return (
+					<Button
+						size="icon"
+						variant={"destructive"}
+						onClick={() => removeNotification(i.row.original)}
+					>
+						<Trash />
+					</Button>
+				);
+			},
+		}),
+	];
+
+	return (
+		<div className="space-y-6">
+			<div className="space-y-2">
+				<h1 className="text-2xl font-semibold">Settings</h1>
+				<p className="text-sm text-muted-foreground">
+					Manage you settings and related data.
+				</p>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>System Settings</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Tabs defaultValue="notifications" className="w-full">
+						<TabsList>
+							<TabsTrigger value="notifications">Notifications</TabsTrigger>
+							<TabsTrigger value="subscriptions">Subscriptions</TabsTrigger>
+						</TabsList>
+						<Suspense fallback={<SkellyTable />}>
+							<TabsContent value="notifications">
+								<LstTable data={data} columns={column} />
+							</TabsContent>
+							<TabsContent value="subscriptions">
+								<LstTable data={subData} columns={subsColumn} />
+							</TabsContent>
+						</Suspense>
+					</Tabs>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

frontend/types/notifications.ts

@@ -0,0 +1,10 @@
+export type Notifications = {
+	id: string;
+	name: string;
+	emails: string;
+	description: string;
+	remove?: unknown;
+	active?: boolean;
+	interval: number;
+	options: unknown[];
+};