lst_v3/frontend/src/routes/admin/settings.tsx

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