table and query work

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

@@ -79,7 +79,9 @@ export default function ChangePassword() {
 
 						<div className="flex justify-end mt-6">
 							<form.AppForm>
-								<form.SubmitButton>Update Profile</form.SubmitButton>
+								<form.SubmitButton variant="destructive">
+									Update Password
+								</form.SubmitButton>
 							</form.AppForm>
 						</div>
 					</form>

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

@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/card";
 import { authClient } from "@/lib/auth-client";
 import { useAppForm } from "@/lib/formSutff";
+import socket from "../../../lib/socket.io";
 
 export default function LoginForm({ redirectPath }: { redirectPath: string }) {
 	const loginEmail = localStorage.getItem("loginEmail") || "";
@@ -47,8 +48,12 @@ export default function LoginForm({ redirectPath }: { redirectPath: string }) {
 					return;
 				}
 				toast.success(`Welcome back ${login.data?.user.name}`);
+				if (login.data) {
+					socket.disconnect();
+					socket.connect();
+				}
 			} catch (error) {
-				console.log(error);
+				console.error(error);
 			}
 		},
 	});

frontend/src/routes/(auth)/login.tsx

@@ -25,7 +25,7 @@ function RouteComponent() {
 	const redirectPath = search.redirect ?? "/";
 
 	return (
-		<div className="flex justify-center mt-10">
+		<div className="flex justify-center mt-2">
 			<LoginForm redirectPath={redirectPath} />
 		</div>
 	);

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

@@ -54,7 +54,7 @@ function RouteComponent() {
 		},
 	});
 	return (
-		<div className="flex justify-center mt-2 gap-2">
+		<div className="flex justify-center flex-col pt-4 gap-2 lg:flex-row">
 			<div>
 				<Card className="p-6 w-96">
 					<CardHeader>

frontend/src/routes/__root.tsx

@@ -11,12 +11,15 @@ const RootLayout = () => (
 		<ThemeProvider>
 			<SidebarProvider className="flex flex-col" defaultOpen={false}>
 				<Header />
-				<div className="flex flex-1">
+
+				<div className="relative min-h-[calc(100svh-var(--header-height))]">
 					<AppSidebar />
 
-					<SidebarInset>
-						<Outlet />
-					</SidebarInset>
+					<main className="w-full p-4">
+						<div className="mx-auto w-full max-w-7xl">
+							<Outlet />
+						</div>
+					</main>
 				</div>
 
 				<Toaster expand richColors closeButton />

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>
+	);
+}

frontend/src/routes/index.tsx

@@ -18,10 +18,42 @@ function Index() {
 	if (isPending)
 		return <div className="flex justify-center mt-10">Loading...</div>;
 	// if (!session) return <button>Sign In</button>
+	let url: string;
+	if (window.location.origin.includes("localhost")) {
+		url = `https://www.youtube.com/watch?v=dQw4w9WgXcQ`;
+	} else if (window.location.origin.includes("vms006")) {
+		url = `https://${window.location.hostname.replace("vms006", "prod.alpla.net/")}lst/app/old/ocp`;
+	} else {
+		url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+	}
 
 	return (
-		<div className="flex justify-center mt-10">
-			<h3 className="w-2xl text-3xl">Welcome Home!</h3>
+		<div className="flex justify-center m-10 flex-col">
+			<h3 className="w-2xl text-3xl">Welcome Lst - V3</h3>
+			<br></br>
+			<p>
+				This is active in your plant today due to having warehousing activated
+				and new functions needed to be introduced, you should be still using LST
+				as you were before
+			</p>
+			<br></br>
+			<p>
+				If you dont know why you are here and looking for One Click Print{" "}
+				<a href={`${url}`} target="_blank" rel="noopener">
+					<b>
+						<strong>Click</strong>
+					</b>
+				</a>
+				<a
+					href={`https://www.youtube.com/watch?v=dQw4w9WgXcQ`}
+					target="_blank"
+					rel="noopener"
+				>
+					<b>
+						<strong> Here</strong>
+					</b>
+				</a>
+			</p>
 		</div>
 	);
 }