feat(frontend): added in update server page only for sysAdmin

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 <div>{JSON.stringify(error)}</div>;
+    }
+    return (
+        <LstCard className="m-2 flex place-content-center w-dvh">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Server</TableHead>
+                        <TableHead>PlantToken</TableHead>
+                        <TableHead>IP Address</TableHead>
+                        <TableHead>Date Last updated</TableHead>
+                        <TableHead>Update Server</TableHead>
+                    </TableRow>
+                </TableHeader>
+                {isLoading ? (
+                    <>
+                        <TableBody>
+                            {Array(10)
+                            .fill(0)
+                            .map((_, i) => (
+                                <TableRow key={i}>
+                                    <TableCell className="font-medium">
+                                        <Skeleton className="h-4" />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Skeleton className="h-4" />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Skeleton className="h-4" />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Skeleton className="h-4" />
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </>
+                ) : (
+                    <TableBody>
+                        {data?.map((server: Servers) => (
+                            <TableRow key={server.server_id}>
+                                <TableCell className="font-medium">{server.sName}</TableCell>
+                                <TableCell className="font-medium">{server.serverDNS}</TableCell>
+                                <TableCell className="font-medium">{server.plantToken}</TableCell>
+                                <TableCell className="font-medium">{server.idAddress}</TableCell>
+                                <TableCell className="font-medium">
+                                    {format(server.lastUpdated, "MM/dd/yyyy hh:mm")}
+                                </TableCell>
+                                <TableCell className="font-medium">
+                                    {window.location.host.split(":")[0] === "localhost" && (
+                                        <UpdateServer server={server} token={token as string} />
+                                    )}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                )}
+            </Table>
+        </LstCard>
+    );
+}

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 (
+        <div>
+            <Button variant={"outline"} size={"icon"} onClick={upgrade} disabled={server.isUpgrading}>
+                <CircleFadingArrowUp />
+            </Button>
+        </div>
+    );
+}