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

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

@@ -14,7 +14,7 @@ import { notifications } from "../../../lib/queries/notifications";
 
 export default function NotificationsSubCard({ user }: any) {
 	const { data } = useSuspenseQuery(notifications());
-	const { data: ns, refetch } = useSuspenseQuery(notificationSubs(user.id));
+	const { refetch } = useSuspenseQuery(notificationSubs(user.id));
 	const form = useAppForm({
 		defaultValues: {
 			notificationId: "",
@@ -32,8 +32,11 @@ export default function NotificationsSubCard({ user }: any) {
 					withCredentials: true,
 				});
 
-				refetch();
-				form.reset();
+				if (res.status === 200) {
+					toast.success("Notification Subbed");
+					refetch();
+					form.reset();
+				}
 			} catch (error) {
 				console.error(error);
 			}

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

@@ -3,6 +3,7 @@ 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 {
@@ -15,14 +16,6 @@ import { notifications } from "../../../lib/queries/notifications";
 import LstTable from "../../../lib/tableStuff/LstTable";
 import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
 
-type Notifications = {
-	id: string;
-	name: string;
-	emails: string;
-	description: string;
-	remove: unknown;
-};
-
 export default function NotificationsTable({ userId }: any) {
 	const { data: subs, refetch } = useSuspenseQuery(notificationSubs(userId));
 	const { data: note } = useSuspenseQuery(notifications());
@@ -101,6 +94,7 @@ export default function NotificationsTable({ userId }: any) {
 				return (
 					<Button
 						size="icon"
+						variant={"destructive"}
 						onClick={() => removeNotification(i.row.original)}
 					>
 						<Trash />

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[];
+};