feat(start of server): added the start of server data

app/main.ts

@@ -118,6 +118,7 @@ const main = async () => {
 		"http://localhost:3001",
 		"http://localhost:4000",
 		"http://localhost:4001",
+		"http://localhost:5500",
 		env.BETTER_AUTH_URL, // prod
 	];
 

app/src/internal/system/routes/stats.ts

@@ -23,6 +23,7 @@ router.get("/", async (req, res) => {
 
 	const statData = data as ServerStats[];
 	const used = process.memoryUsage();
+
 	res.json({
 		status: "ok",
 		uptime: process.uptime(),

frontend/src/lib/querys/admin/getServers.ts

@@ -0,0 +1,17 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getServers() {
+	return queryOptions({
+		queryKey: ["getModules"],
+		queryFn: () => fetchSession(),
+		staleTime: 5000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSession = async () => {
+	const { data } = await axios.get("/lst/api/admin/server");
+
+	return data.data;
+};

frontend/src/lib/querys/serverStats.ts

@@ -0,0 +1,17 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getServerStats() {
+	return queryOptions({
+		queryKey: ["getServerStats"],
+		queryFn: () => fetchSession(),
+		staleTime: 5000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSession = async () => {
+	const { data } = await axios.get(`/lst/api/system/stats`);
+
+	return data;
+};

frontend/src/routes/_app/_adminLayout/admin/servers.tsx

@@ -1,9 +1,299 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+	createColumnHelper,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import axios from "axios";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { getServers } from "@/lib/querys/admin/getServers";
 
-export const Route = createFileRoute('/_app/_adminLayout/admin/servers')({
+type ServerData = {
-  component: RouteComponent,
+	name: string;
-})
+	serverDNS: string;
+	plantToken: string;
+	ipAddress: string;
+	uptime: string;
+	build: string;
+	pendingUpdateFile: string;
+	lastUpdate: Date;
+};
+
+const updateServerItem = async (
+	token: string,
+	data: Record<string, string | number | boolean | null>,
+) => {
+	try {
+		const res = axios.patch(`/lst/api/admin/server/${token}`, data, {
+			withCredentials: true,
+		});
+
+		toast.success(`Updated: ${data.field} set to ${data.value}`);
+		return res;
+	} catch (err) {
+		toast.error(`Error updating: ${data.field} being set to ${data.value}`);
+		return err;
+	}
+};
+export const Route = createFileRoute("/_app/_adminLayout/admin/servers")({
+	component: RouteComponent,
+});
 
 function RouteComponent() {
-  return <div>Hello "/_adminLayout/admin/servers"!</div>
+	const { data, isLoading, refetch } = useQuery(getServers());
+	// const {
+	// 	data: stats,
+	// 	isLoading: loadingStats,
+	// 	refetch: statsRefetch,
+	// } = useQuery(getServerStats());
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const columnHelper = createColumnHelper<ServerData>();
+
+	const updateServer = useMutation({
+		mutationFn: ({
+			token,
+			field,
+			value,
+		}: {
+			token: string;
+			field: string;
+			value: string | number | boolean | null;
+		}) => updateServerItem(token, { [field]: value }),
+
+		onSuccess: () => {
+			// refetch or update cache
+
+			refetch();
+		},
+	});
+
+	const columns = [
+		columnHelper.accessor("name", {
+			cell: (i) => i.getValue(),
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="ghost"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						<span className="flex flex-row gap-2">Name</span>
+						{column.getIsSorted() === "asc" ? (
+							<ArrowUp className="ml-2 h-4 w-4" />
+						) : (
+							<ArrowDown className="ml-2 h-4 w-4" />
+						)}
+					</Button>
+				);
+			},
+		}),
+
+		columnHelper.accessor("serverDNS", {
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="ghost"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						<span className="flex flex-row gap-2">Server</span>
+						{column.getIsSorted() === "asc" ? (
+							<ArrowUp className="ml-2 h-4 w-4" />
+						) : (
+							<ArrowDown className="ml-2 h-4 w-4" />
+						)}
+					</Button>
+				);
+			},
+			cell: ({ row, getValue }) => {
+				const initialValue = String(getValue() ?? "");
+				const [localValue, setLocalValue] = React.useState(initialValue);
+				const token = row.original.plantToken;
+				const field = "serverDNS";
+
+				useEffect(() => setLocalValue(initialValue), [initialValue]);
+
+				const handleSubmit = (newValue: string) => {
+					if (newValue !== initialValue) {
+						setLocalValue(newValue); // keep new value locally immediately
+						updateServer.mutate({ token, field, value: newValue });
+					}
+				};
+				return (
+					<Input
+						value={localValue}
+						onChange={(e) => setLocalValue(e.currentTarget.value)}
+						onBlur={(e) => handleSubmit(e.currentTarget.value.trim())}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								handleSubmit(e.currentTarget.value.trim());
+								e.currentTarget.blur(); // exit edit mode
+							}
+						}}
+					/>
+				);
+			},
+		}),
+		columnHelper.accessor("ipAddress", {
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="ghost"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						<span className="flex flex-row gap-2">IP Address</span>
+						{column.getIsSorted() === "asc" ? (
+							<ArrowUp className="ml-2 h-4 w-4" />
+						) : (
+							<ArrowDown className="ml-2 h-4 w-4" />
+						)}
+					</Button>
+				);
+			},
+			cell: ({ row, getValue }) => {
+				const initialValue = String(getValue() ?? "");
+				const [localValue, setLocalValue] = React.useState(initialValue);
+				const token = row.original.plantToken;
+				const field = "ipAddress";
+
+				useEffect(() => setLocalValue(initialValue), [initialValue]);
+
+				const handleSubmit = (newValue: string) => {
+					if (newValue !== initialValue) {
+						setLocalValue(newValue); // keep new value locally immediately
+						updateServer.mutate({ token, field, value: newValue });
+					}
+				};
+				return (
+					<Input
+						value={localValue}
+						onChange={(e) => setLocalValue(e.currentTarget.value)}
+						onBlur={(e) => handleSubmit(e.currentTarget.value.trim())}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								handleSubmit(e.currentTarget.value.trim());
+								e.currentTarget.blur(); // exit edit mode
+							}
+						}}
+					/>
+				);
+			},
+		}),
+
+		// columnHelper.accessor("uptime", {
+		// 	header: () => {
+		// 		return <span className="flex flex-row gap-2">UpTime</span>;
+		// 	},
+		// 	cell: ({ row }) => {
+		// 		//console.log(data);
+		// 		return <span>{data?.uptime ?? "--"}</span>;
+		// 	},
+		// }),
+	];
+
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		//renderSubComponent: ({ row }: { row: any }) => <ExpandedRow row={row} />,
+		//getRowCanExpand: () => true,
+		state: {
+			sorting,
+		},
+	});
+
+	if (isLoading) {
+		return <div className="m-auto">Loading user data</div>;
+	}
+	return (
+		<div className="p-4">
+			<div className="w-fit">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id}>
+											{header.isPlaceholder
+												? null
+												: flexRender(
+														header.column.columnDef.header,
+														header.getContext(),
+													)}
+										</TableHead>
+									);
+								})}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows.map((row) => (
+							<React.Fragment key={row.id}>
+								<TableRow
+									key={row.id}
+									data-state={row.getIsSelected() && "selected"}
+								>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>
+											{flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext(),
+											)}
+										</TableCell>
+									))}
+								</TableRow>
+
+								{/* {row.getIsExpanded() && (
+									<TableRow>
+										<TableCell colSpan={row.getVisibleCells().length}>
+											{renderSubComponent({ row })}
+										</TableCell>
+									</TableRow>
+								)} */}
+							</React.Fragment>
+						))}
+					</TableBody>
+				</Table>
+				<div className="flex items-center justify-end space-x-2 py-4">
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						Previous
+					</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+					>
+						Next
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
 }

frontend/src/routes/_old/old/-components/ocp/Lots.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from "@tanstack/react-query";
-
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -66,6 +65,7 @@ let lotColumns = [
 ];
 export default function Lots() {
 	const { data, isError, isLoading } = useQuery(getlots());
+
 	const { session } = useAuth();
 	const { settings } = useSettingStore();