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