Refactor main host setup

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

@@ -1,6 +1,7 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
 import { useContext } from "react";
 import AdminHero from "@/src/components/general/admin-hero";
+import DeleteHostButton from "@/src/components/general/delete-host-button";
 import { SiteData } from "@/src/data/site-data";
 import Button from "@/src/components/twui/layout/Button";
 import Divider from "@/src/components/twui/layout/Divider";
@@ -17,11 +18,8 @@ export default function AdminSingleHostPage() {
     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 (
             <>
@@ -37,13 +35,23 @@ export default function AdminSingleHostPage() {
         );
     }
 
+    const title = host_id == 0 ? "Main Host" : `Host #${host_id}`;
+
     return (
         <>
             <AdminHero
-                title={is_main_host ? "Host" : `Host #${host_id}`}
+                title={host ? title : "Host"}
                 description="WireGuard server configuration and interface details"
                 buttons={
                     <>
+                        <Button
+                            title="Edit Host"
+                            size="small"
+                            variant="outlined"
+                            href={`/admin/hosts/${host_id}/edit`}
+                        >
+                            Edit Host
+                        </Button>
                         <Button
                             title="View Clients"
                             size="small"
@@ -54,21 +62,13 @@ export default function AdminSingleHostPage() {
                             View Clients
                         </Button>
                         <Button
-                            title="Edit Host"
+                            title="Add Client"
                             size="small"
-                            variant="outlined"
-                            href={`/admin/hosts/${host_id}/edit`}
+                            href={`/admin/hosts/${host_id}/clients/add-client`}
                         >
-                            Edit Host
-                        </Button>
-                        <Button
-                            title="Add New Host"
-                            size="small"
-                            variant="outlined"
-                            href="/admin/hosts/add"
-                        >
-                            Add New Host
+                            Add Client
                         </Button>
+                        <DeleteHostButton host_id={host_id} />
                     </>
                 }
             />
@@ -76,26 +76,12 @@ export default function AdminSingleHostPage() {
             <Divider className="mb-6" />
 
             <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
-                <MainHostStatusSection
-                    host={host}
-                    variables={variables}
-                    clients={clients}
-                />
+                <MainHostStatusSection host={host} 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}
+                    current_ip={host?.public_ip_address || ""}
                 />
+                <InterfaceConfigSection host={host} clients={clients} />
             </Stack>
         </>
     );
@@ -104,4 +90,4 @@ export default function AdminSingleHostPage() {
 export const meta: BunextPageModuleMeta = {
     title: `Host | ${SiteData["SiteName"]}`,
     description: `WireGuard host page`,
-};
+};