table and query work

frontend/src/routes/admin/-components/FeatureCard.tsx

@@ -0,0 +1,91 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import axios from "axios";
+import React from "react";
+import { toast } from "sonner";
+import { Card, CardDescription, CardHeader } from "../../../components/ui/card";
+import { useAppForm } from "../../../lib/formSutff";
+import { getSettings } from "../../../lib/queries/getSettings";
+
+type Setting = {
+	id: string;
+	name: string;
+	description?: string;
+	value: string;
+	active: boolean;
+	inputType: "text" | "boolean" | "number" | "select";
+	options?: string[];
+};
+
+export default function FeatureCard({ item }: { item: Setting }) {
+	const { refetch } = useSuspenseQuery(getSettings());
+	const form = useAppForm({
+		defaultValues: {
+			value: item.value ?? "",
+			active: item.active,
+		},
+		onSubmit: async ({ value }) => {
+			try {
+				// adding this in as my base as i need to see timers working
+				if (window.location.hostname === "localhost") {
+					await new Promise((res) => setTimeout(res, 1000));
+				}
+
+				const { data } = await axios.patch(`/lst/api/settings/${item.name}`, {
+					value: value.value,
+					active: value.active ? "true" : "false",
+				});
+
+				refetch();
+				toast.success(
+					<div>
+						<p>{data.message}</p>
+						<p>
+							This was a feature setting so{" "}
+							{value.active
+								? "processes related to this will start working on there next interval"
+								: "processes related to this will stop working on there next interval"}
+						</p>
+					</div>,
+				);
+			} catch (error) {
+				console.error(error);
+			}
+		},
+	});
+	return (
+		<Card className="p-2 w-96">
+			<CardHeader>
+				<p>{item.name}</p>
+				<CardDescription>
+					<p>{item.description}</p>
+				</CardDescription>
+			</CardHeader>
+
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					void form.handleSubmit();
+				}}
+			>
+				<div className="flex justify-end mt-2 flex-col gap-4">
+					<form.AppField name="value">
+						{(field) => (
+							<field.InputField label="Setting Value" inputType="string" />
+						)}
+					</form.AppField>
+					<div className="flex flex-row justify-between">
+						<form.AppField name="active">
+							{(field) => (
+								<field.SwitchField trueLabel="Active" falseLabel="Deactivate" />
+							)}
+						</form.AppField>
+						<form.AppForm>
+							<form.SubmitButton>Update</form.SubmitButton>
+						</form.AppForm>
+					</div>
+				</div>
+			</form>
+		</Card>
+	);
+}

frontend/src/routes/admin/-components/FeatureSettings.tsx

@@ -0,0 +1,11 @@
+import FeatureCard from "./FeatureCard";
+
+export default function FeatureSettings({ data }: any) {
+	return (
+		<div className=" flex flex-wrap gap-2">
+			{data.map((i: any) => (
+				<FeatureCard key={i.name} item={i} />
+			))}
+		</div>
+	);
+}

frontend/src/routes/admin/logs.tsx

@@ -5,6 +5,7 @@ import { authClient } from "@/lib/auth-client";
 export const Route = createFileRoute("/admin/logs")({
 	beforeLoad: async ({ location }) => {
 		const { data: session } = await authClient.getSession();
+		const allowedRole = ["admin", "systemAdmin"];
 
 		if (!session?.user) {
 			throw redirect({
@@ -15,7 +16,7 @@ export const Route = createFileRoute("/admin/logs")({
 			});
 		}
 
-		if (session.user.role !== "admin") {
+		if (!allowedRole.includes(session.user.role as string)) {
 			throw redirect({
 				to: "/",
 			});

frontend/src/routes/admin/settings.tsx

@@ -0,0 +1,209 @@
+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 { Suspense, useMemo } from "react";
+import { toast } from "sonner";
+
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../../components/ui/card";
+
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "../../components/ui/tabs";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { authClient } from "../../lib/auth-client";
+import { getSettings } from "../../lib/queries/getSettings";
+import EditableCellInput from "../../lib/tableStuff/EditableCellInput";
+import LstTable from "../../lib/tableStuff/LstTable";
+import SearchableHeader from "../../lib/tableStuff/SearchableHeader";
+import SkellyTable from "../../lib/tableStuff/SkellyTable";
+import FeatureSettings from "./-components/FeatureSettings";
+
+type Settings = {
+	settings_id: string;
+	name: string;
+	active: boolean;
+	value: string;
+	description: string;
+	moduleName: string;
+	roles: string[];
+};
+
+const updateSettings = async (
+	id: string,
+	data: Record<string, string | number | boolean | null>,
+) => {
+	console.log(id, data);
+	try {
+		const res = await axios.patch(`/lst/api/settings/${id}`, data, {
+			withCredentials: true,
+		});
+		toast.success(`Setting just updated`);
+		return res;
+	} catch (err) {
+		toast.error("Error in updating the settings");
+		return err;
+	}
+};
+
+export const Route = createFileRoute("/admin/settings")({
+	beforeLoad: async ({ location }) => {
+		const { data: session } = await authClient.getSession();
+		const allowedRole = ["systemAdmin"];
+
+		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 SettingsTableCard() {
+	const { data, refetch } = useSuspenseQuery(getSettings());
+	const columnHelper = createColumnHelper<Settings>();
+
+	const updateSetting = useMutation({
+		mutationFn: ({
+			id,
+			field,
+			value,
+		}: {
+			id: string;
+			field: string;
+			value: string | number | boolean | null;
+		}) => updateSettings(id, { [field]: value }),
+
+		onSuccess: () => {
+			// refetch or update cache
+			refetch();
+		},
+	});
+
+	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("value", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Value" />
+			),
+
+			filterFn: "includesString",
+			cell: ({ row, getValue }) => (
+				<EditableCellInput
+					value={getValue()}
+					id={row.original.name}
+					field="value"
+					onSubmit={({ id, field, value }) => {
+						updateSetting.mutate({ id, field, value });
+					}}
+				/>
+			),
+		}),
+	];
+
+	const { standardSettings, featureSettings, systemSetting } = useMemo(() => {
+		return {
+			standardSettings: data.filter(
+				(setting: any) => setting.settingType === "standard",
+			),
+			featureSettings: data.filter(
+				(setting: any) => setting.settingType === "feature",
+			),
+			systemSetting: data.filter(
+				(setting: any) => setting.settingType === "system",
+			),
+		};
+	}, [data]);
+	return (
+		<>
+			<TabsContent value="feature">
+				<FeatureSettings data={featureSettings} />
+			</TabsContent>
+			<TabsContent value="system">
+				<LstTable data={systemSetting} columns={column} />
+			</TabsContent>
+			<TabsContent value="standard">
+				<LstTable data={standardSettings} columns={column} />
+			</TabsContent>
+		</>
+	);
+}
+
+function RouteComponent() {
+	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 your settings and related data.
+				</p>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>System Settings</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Tabs defaultValue="standard" className="w-full">
+						<TabsList>
+							<TabsTrigger value="feature">Features</TabsTrigger>
+							<TabsTrigger value="system">System</TabsTrigger>
+							<TabsTrigger value="standard">Standard</TabsTrigger>
+						</TabsList>
+						<Suspense fallback={<SkellyTable />}>
+							<SettingsTableCard />
+						</Suspense>
+					</Tabs>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}