diff --git a/frontend/src/components/admin/servers/ServerPage.tsx b/frontend/src/components/admin/servers/ServerPage.tsx
new file mode 100644
index 0000000..091a84f
--- /dev/null
+++ b/frontend/src/components/admin/servers/ServerPage.tsx
@@ -0,0 +1,99 @@
+import {LstCard} from "@/components/extendedUI/LstCard";
+
+import {Skeleton} from "@/components/ui/skeleton";
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
+import {useSessionStore} from "@/lib/store/sessionStore";
+import {useModuleStore} from "@/lib/store/useModuleStore";
+import {getServers} from "@/utils/querys/servers";
+import {useQuery} from "@tanstack/react-query";
+import {useRouter} from "@tanstack/react-router";
+import {format} from "date-fns";
+import UpdateServer from "./UpdateServer";
+
+export type Servers = {
+ server_id?: string;
+ sName?: string;
+ serverDNS?: string;
+ plantToken?: string;
+ idAddress: string;
+ lastUpdated: string;
+ isUpgrading: boolean;
+};
+
+export default function ServerPage() {
+ const {user, token} = useSessionStore();
+ const {modules} = useModuleStore();
+ const router = useRouter();
+
+ const {data, isError, error, isLoading} = useQuery(getServers(token ?? ""));
+
+ const adminModule = modules.filter((n) => n.name === "admin");
+ const userLevel = user?.roles?.filter((r) => r.module_id === adminModule[0].module_id) || [];
+
+ if (!adminModule[0]?.roles?.includes(userLevel[0]?.role)) {
+ router.navigate({to: "/"});
+ }
+
+ if (isError) {
+ return {JSON.stringify(error)}
;
+ }
+ return (
+
+
+
+
+ Name
+ Server
+ PlantToken
+ IP Address
+ Date Last updated
+ Update Server
+
+
+ {isLoading ? (
+ <>
+
+ {Array(10)
+ .fill(0)
+ .map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ ) : (
+
+ {data?.map((server: Servers) => (
+
+ {server.sName}
+ {server.serverDNS}
+ {server.plantToken}
+ {server.idAddress}
+
+ {format(server.lastUpdated, "MM/dd/yyyy hh:mm")}
+
+
+ {window.location.host.split(":")[0] === "localhost" && (
+
+ )}
+
+
+ ))}
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/components/admin/servers/UpdateServer.tsx b/frontend/src/components/admin/servers/UpdateServer.tsx
new file mode 100644
index 0000000..6d1a3aa
--- /dev/null
+++ b/frontend/src/components/admin/servers/UpdateServer.tsx
@@ -0,0 +1,41 @@
+import {Button} from "@/components/ui/button";
+import {CircleFadingArrowUp} from "lucide-react";
+import {toast} from "sonner";
+import {Servers} from "./ServerPage";
+import {useQuery} from "@tanstack/react-query";
+import {getSettings} from "@/utils/querys/settings";
+import axios from "axios";
+
+export default function UpdateServer({server, token}: {server: Servers; token: string}) {
+ const {data} = useQuery(getSettings(token ?? ""));
+ const upgrade = async () => {
+ let devDir = data.filter((n: any) => n.name === "devDir");
+ toast.success("Server being upgraded in the background please wait.");
+ try {
+ const result = await axios.post(
+ `/api/server/update/${server.plantToken}`,
+ {devDir: devDir[0].value},
+ {
+ headers: {Authorization: `Bearer ${token}`},
+ }
+ );
+
+ if (result.data.success) {
+ toast.success(result.data.message);
+ }
+
+ if (!result.data.success) {
+ toast.success(result.data.message);
+ }
+ } catch (error: any) {
+ toast.error(`There was an error updating the server: ${error.data.message}`);
+ }
+ };
+ return (
+
+
+
+ );
+}