Updates

src/pages/admin/hosts/[host_id]/index.tsx

@@ -1,26 +1,72 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import { useContext } from "react";
 import AdminHero from "@/src/components/general/admin-hero";
 import { SiteData } from "@/src/data/site-data";
 import Button from "@/src/components/twui/layout/Button";
 import Divider from "@/src/components/twui/layout/Divider";
+import EmptyContent from "@/src/components/twui/elements/EmptyContent";
 import Stack from "@/src/components/twui/layout/Stack";
-import HostPublicIpSection from "../(sections)/host-public-ip-section";
-import { useContext } from "react";
 import { AppContext } from "@/src/pages/__root";
+import MainHostStatusSection from "../(sections)/main-host-status-section";
+import HostPublicIpSection from "../(sections)/host-public-ip-section";
+import InterfaceConfigSection from "../(sections)/interface-config-section";
 
 export default function AdminSingleHostPage() {
-    const { pageProps } = useContext(AppContext);
+    const { pageProps, query } = useContext(AppContext);
 
-    const host_id = Number(pageProps?.host?.id || 0);
+    const host_id = Number(query?.host_id || pageProps?.host?.id || 0);
+
+    const host = pageProps?.host || undefined;
+    const variables = pageProps?.variables || [];
+    const clients = pageProps?.clients || [];
+
+    const is_main_host = !host || host_id == 0;
+
+    if (!pageProps?.host && host_id != 0) {
+        return (
+            <>
+                <AdminHero
+                    title="Host"
+                    description="WireGuard server configuration and interface details"
+                />
+                <Divider className="mb-6" />
+                <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
+                    <EmptyContent title="Host not found" />
+                </Stack>
+            </>
+        );
+    }
 
     return (
         <>
             <AdminHero
-                title="Host"
+                title={is_main_host ? "Host" : `Host #${host_id}`}
                 description="WireGuard server configuration and interface details"
                 buttons={
                     <>
-                        <Button title="Add New Host" variant="outlined">
+                        <Button
+                            title="View Clients"
+                            size="small"
+                            variant="outlined"
+                            color="primary"
+                            href={`/admin/hosts/${host_id}/clients`}
+                        >
+                            View Clients
+                        </Button>
+                        <Button
+                            title="Edit Host"
+                            size="small"
+                            variant="outlined"
+                            href={`/admin/hosts/${host_id}/edit`}
+                        >
+                            Edit Host
+                        </Button>
+                        <Button
+                            title="Add New Host"
+                            size="small"
+                            variant="outlined"
+                            href="/admin/hosts/add"
+                        >
                             Add New Host
                         </Button>
                     </>
@@ -30,12 +76,26 @@ export default function AdminSingleHostPage() {
             <Divider className="mb-6" />
 
             <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                {pageProps?.host ? (
-                    <HostPublicIpSection
-                        host_id={host_id}
-                        current_ip={pageProps.host.public_ip_address || ""}
-                    />
-                ) : null}
+                <MainHostStatusSection
+                    host={host}
+                    variables={variables}
+                    clients={clients}
+                />
+                <HostPublicIpSection
+                    host_id={host_id}
+                    current_ip={
+                        host?.public_ip_address ||
+                        variables.find(
+                            (v) => v.key == "main_host_public_ip_address",
+                        )?.value ||
+                        ""
+                    }
+                />
+                <InterfaceConfigSection
+                    host={host}
+                    variables={variables}
+                    clients={clients}
+                />
             </Stack>
         </>
     );