Update clients fetch function

src/components/general/client-row.tsx

@@ -10,9 +10,10 @@ import type {
     BUN_SQLITE_WGUI_CLIENT_RULES,
 } from "@/db/types/db";
 import deriveClientAccessLabel from "@/src/functions/frontend/derive-client-access-label";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
-    client: BUN_SQLITE_WGUI_CLIENTS;
+    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
     rules?: BUN_SQLITE_WGUI_CLIENT_RULES[];
 };
 
@@ -21,6 +22,8 @@ export default function ClientRow({ client, rules }: Props) {
 
     const host_id = Number(client.host_id || 0);
     const access = deriveClientAccessLabel({ rules });
+    const host_name =
+        host_id == 0 ? "Main" : client.host_name || `Host #${host_id}`;
 
     async function handleDelete() {
         if (
@@ -64,7 +67,7 @@ export default function ClientRow({ client, rules }: Props) {
                         href={`/admin/hosts/${host_id}`}
                         className="tabular text-[13px] text-foreground-light/60 dark:text-foreground-dark/60 hover:text-secondary dark:hover:text-secondary whitespace-nowrap"
                     >
-                        {host_id == 0 ? "Main" : `Host #${host_id}`}
+                        {host_name}
                     </Link>
                 ) : (
                     <Span className="tabular text-[13px] text-foreground-light/40 dark:text-foreground-dark/40 whitespace-nowrap">

src/components/general/clients-table.tsx

@@ -1,11 +1,9 @@
 import ClientRow from "@/src/components/general/client-row";
-import type {
+import type { BUN_SQLITE_WGUI_CLIENT_RULES } from "@/db/types/db";
-    BUN_SQLITE_WGUI_CLIENTS,
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-    BUN_SQLITE_WGUI_CLIENT_RULES,
-} from "@/db/types/db";
 
 type Props = {
-    clients: BUN_SQLITE_WGUI_CLIENTS[];
+    clients: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
     rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
     accessLabel?: string;
     minWidthClass?: string;

src/functions/backend/db/clients/grab-clients.ts

@@ -0,0 +1,134 @@
+import { AppData } from "@/src/data/app-data";
+import type { ApiReqParams, SQLInsertGenValueType } from "@/src/types";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
+import type { ServerQueryParamOrder } from "@moduletrace/bun-sqlite/dist/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+type Params = {
+    query?: ApiReqParams;
+    /**
+     * For search terms (ie `search_term_*`) parameters.
+     * This forces all searches to `=` instead of `LIKE`
+     */
+    exact_match?: boolean;
+    host_id?: string | number;
+    user_id?: string | number;
+    client_id?: string | number;
+};
+
+const ORDERABLE_FIELDS = [
+    "id",
+    "created_at",
+    "updated_at",
+    "user_id",
+    "host_id",
+    "name",
+    "wg_ip_address",
+    "public_ip_address",
+    "public_key",
+    "allowed_ips",
+    "allow_all_ips",
+    "notes",
+    "host_name",
+] as const;
+
+export default async function grabClients(
+    params?: Params,
+): Promise<APIResponseObject<BUN_SQLITE_WGUI_CLIENTS_JOIN>> {
+    const { query } = params || {};
+    const sql_query = query?.sql_query;
+
+    try {
+        const LIMIT = AppData["DefaultQueryLimit"];
+
+        let sql = ``;
+        let values: SQLInsertGenValueType[] = [];
+
+        sql += `SELECT\n`;
+        sql += `    c.*,\n`;
+        sql += `    h.name AS host_name\n`;
+        sql += `FROM clients c\n`;
+        sql += `LEFT JOIN hosts h ON c.host_id = h.id\n`;
+        sql += `WHERE 1=1\n`;
+
+        const target_host_id = params?.host_id || query?.host_id;
+        const target_user_id = params?.user_id || query?.user_id;
+        const target_client_id = params?.client_id || query?.client_id || query?.id;
+
+        if (target_host_id) {
+            sql += `    AND c.host_id=?\n`;
+            values.push(target_host_id);
+        }
+
+        if (target_user_id) {
+            sql += `    AND c.user_id=?\n`;
+            values.push(target_user_id);
+        }
+
+        if (target_client_id) {
+            sql += `    AND c.id=?\n`;
+            values.push(target_client_id);
+        }
+
+        let search_terms = [
+            { field: "name", value: query?.name },
+            { field: "wg_ip_address", value: query?.wg_ip_address },
+        ] as const;
+
+        for (const term of search_terms) {
+            if (term.value) {
+                const match_value = params?.exact_match ? "=" : "LIKE";
+                const match_value_param = params?.exact_match
+                    ? term.value
+                    : `%${term.value.replace(/ /g, "%")}%`;
+                sql += `    AND c.${term.field} ${match_value} ?\n`;
+                values.push(match_value_param);
+            }
+        }
+
+        const order = sql_query?.order as
+            | ServerQueryParamOrder<any>
+            | ServerQueryParamOrder<any>[]
+            | undefined;
+
+        const order_terms = (Array.isArray(order) ? order : order ? [order] : [])
+            .filter((o) => ORDERABLE_FIELDS.includes(o?.field as any))
+            .map((o) => {
+                const is_host_field = o.field === "host_name";
+                return `${is_host_field ? "h" : "c"}.${String(o.field)} ${o.strategy === "DESC" ? "DESC" : "ASC"}`;
+            });
+
+        let sql_order = ``;
+        if (order_terms[0]) {
+            sql_order += `ORDER BY ${order_terms.join(", ")}\n`;
+        }
+
+        let sql_limit = ``;
+        const target_limit = sql_query?.limit || LIMIT;
+        const target_page = sql_query?.page || query?.page;
+        sql_limit += `LIMIT ${target_limit}\n`;
+        if (target_page) {
+            const offset = target_limit * (target_page - 1);
+            sql_limit += `OFFSET ${offset}\n`;
+        }
+
+        const res = await BunSQLite.sql<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
+            sql: `${sql}\n${sql_order}\n${sql_limit}`,
+            values,
+        });
+
+        if (query?.count) {
+            const count_sql = `SELECT COUNT(*) AS count FROM (${sql})`;
+            const count_res = await BunSQLite.sql({ sql: count_sql, values });
+            res.count = count_res.singleRes?.count;
+        }
+
+        return res;
+    } catch (error: any) {
+        return {
+            success: false,
+            msg: error.message,
+        };
+    }
+}

src/pages/admin/(hooks)/use-dashboard-data.ts

@@ -1,8 +1,9 @@
 import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
-import type { BUN_SQLITE_WGUI_CLIENTS, BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 export default function useDashboardData() {
-    const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
+    const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
         table: "clients",
         sql_query: {
             order: { field: "created_at", strategy: "DESC" },

src/pages/admin/(sections)/peers-table-section.tsx

@@ -7,10 +7,10 @@ import Span from "@/src/components/twui/layout/Span";
 import AdminCard from "@/src/components/general/admin-card";
 import ClientsTable from "@/src/components/general/clients-table";
 import useClientRulesMap from "@/src/hooks/use-client-rules-map";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
-    clients?: BUN_SQLITE_WGUI_CLIENTS[];
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
 };
 
 const RECENT_LIMIT = 8;

src/pages/admin/clients/(sections)/clients-table-section.tsx

@@ -10,7 +10,7 @@ import Stack from "@/src/components/twui/layout/Stack";
 import ClientFormModal from "../(partials)/client-form-modal";
 import useClientRulesMap from "@/src/hooks/use-client-rules-map";
 import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
     addOpen: boolean;
@@ -20,7 +20,7 @@ type Props = {
 export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
     const [query, setQuery] = useState("");
 
-    const { res } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
+    const { res } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
         table: "clients",
         sql_query: {
             order: { field: "created_at", strategy: "DESC" },

src/pages/admin/hosts/(functions)/derive-host-config.ts

@@ -1,11 +1,10 @@
 import { AppData } from "@/src/data/app-data";
 import deriveWireguardInterfaceName from "@/src/utils/derive-wireguard-interface-name";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_HOSTS_JOIN, BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
 
 type Params = {
     host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
-    clients?: BUN_SQLITE_WGUI_CLIENTS[];
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
 };
 
 export default function deriveHostConfig({ host, clients }: Params) {

src/pages/admin/hosts/(hooks)/use-host-data.ts

@@ -1,8 +1,6 @@
 import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
-import type {
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-    BUN_SQLITE_WGUI_CLIENTS,
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
-    BUN_SQLITE_WGUI_HOSTS,
-} from "@/db/types/db";
 import { useContext } from "react";
 import { AppContext } from "@/src/pages/__root";
 
@@ -15,7 +13,7 @@ export default function useHostData() {
         initial_res: pageProps?.hosts || undefined,
     });
 
-    const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
+    const clients_res = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
         table: "clients",
         limit: 100,
         initial_res: pageProps?.clients || undefined,

src/pages/admin/hosts/(partials)/host-card.tsx

@@ -1,4 +1,4 @@
-import { GlobeCheck, Server } from "lucide-react";
+import { Edit2, Eye, GlobeCheck, Server } from "lucide-react";
 import AdminCard from "@/src/components/general/admin-card";
 import DeleteHostButton from "@/src/components/general/delete-host-button";
 import Button from "@/src/components/twui/layout/Button";
@@ -8,6 +8,7 @@ import Stack from "@/src/components/twui/layout/Stack";
 import Tag from "@/src/components/twui/elements/Tag";
 import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
 import { AppData } from "@/src/data/app-data";
+import Link from "@/src/components/twui/layout/Link";
 
 type Props = {
     host: BUN_SQLITE_WGUI_HOSTS;
@@ -17,47 +18,54 @@ type Props = {
 export default function HostCard({ host, client_count }: Props) {
     const host_id = host.id || 0;
 
-    const title = host_id == 0 ? "Main Host" : ` Host #${host_id}`;
+    const host_url = `/admin/hosts/${host_id}`;
+    const edit_url = `/admin/hosts/${host_id}/edit`;
+    const clients_url = `/admin/hosts/${host_id}/clients`;
+
+    const title = host_id == 0 ? "Main Host" : host.name || `Host #${host_id}`;
 
     return (
         <AdminCard className="w-full p-5 flex flex-col gap-4">
             <Row className="justify-between items-center gap-3 flex-wrap">
-                <Stack className="gap-2">
+                <Link href={host_url}>
-                    <Row className="gap-2 items-center">
+                    <Stack className="gap-2">
-                        <GlobeCheck size={15} className="opacity-50" />
+                        <Row className="gap-2 items-center">
-                        <Span className="text-[14px] font-semibold leading-none">
+                            <GlobeCheck size={15} className="opacity-50" />
-                            {title}
+                            <Span className="text-[14px] font-semibold leading-none">
+                                {title}
+                            </Span>
+                        </Row>
+                        <Span className="font-mono text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
+                            {host.wg_ip_address || "Not configured"}
                         </Span>
-                    </Row>
+                    </Stack>
-                    <Span className="font-mono text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45">
+                </Link>
-                        {host.wg_ip_address || "Not configured"}
-                    </Span>
-                </Stack>
                 <Row className="gap-2">
-                    <Button
-                        title="View Host"
-                        size="small"
-                        variant="outlined"
-                        href={`/admin/hosts/${host_id}`}
-                    >
-                        View
-                    </Button>
-                    <Button
-                        title="Edit Host"
-                        size="small"
-                        variant="outlined"
-                        href={`/admin/hosts/${host_id}/edit`}
-                    >
-                        Edit
-                    </Button>
                     <Button
                         title="Host Clients"
                         size="small"
                         variant="outlined"
-                        href={`/admin/hosts/${host_id}/clients`}
+                        href={clients_url}
                     >
                         Clients
                     </Button>
+
+                    <Button
+                        title="View Host"
+                        size="small"
+                        variant="ghost"
+                        href={host_url}
+                    >
+                        <Eye size={17} />
+                    </Button>
+                    <Button
+                        title="Edit Host"
+                        size="small"
+                        variant="ghost"
+                        href={edit_url}
+                    >
+                        <Edit2 size={17} />
+                    </Button>
                     <DeleteHostButton host_id={host_id} />
                 </Row>
             </Row>

src/pages/admin/hosts/(partials)/host-stat-cell.tsx

@@ -3,7 +3,7 @@ import Stack from "@/src/components/twui/layout/Stack";
 
 type Props = {
     label: string;
-    value: string;
+    value: string | number;
 };
 
 export default function HostStatCell({ label, value }: Props) {
@@ -17,4 +17,4 @@ export default function HostStatCell({ label, value }: Props) {
             </Span>
         </Stack>
     );
-}
+}

src/pages/admin/hosts/(sections)/interface-config-section.tsx

@@ -8,22 +8,19 @@ import Row from "@/src/components/twui/layout/Row";
 import Span from "@/src/components/twui/layout/Span";
 import Stack from "@/src/components/twui/layout/Stack";
 import deriveHostConfig from "../(functions)/derive-host-config";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
 import Divider from "@/src/components/twui/layout/Divider";
 import H3 from "@/src/components/twui/layout/H3";
 import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 import { useContext } from "react";
 import { AppContext } from "@/src/pages/__root";
 
 type Props = {
     host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
-    clients?: BUN_SQLITE_WGUI_CLIENTS[];
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
 };
 
-export default function InterfaceConfigSection({
+export default function InterfaceConfigSection({ host, clients }: Props) {
-    host,
-    clients,
-}: Props) {
     const { pageProps } = useContext(AppContext);
 
     const final_host: BUN_SQLITE_WGUI_HOSTS_JOIN = host
@@ -96,14 +93,14 @@ export default function InterfaceConfigSection({
                         />
                     );
                 })}
-                <Row className="justify-between gap-4 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
+                {/* <Row className="justify-between gap-4 px-5 py-2.5 border-t border-slate-200/60 dark:border-white/5">
                     <Span className="font-mono text-[12px] text-foreground-light/35 dark:text-foreground-dark/35">
                         # Public key ·{" "}
                         {config.public_key
                             ? `${config.public_key.slice(0, 24)}…`
                             : "Not generated"}
                     </Span>
-                </Row>
+                </Row> */}
             </Stack>
         </AdminCard>
     );

src/pages/admin/hosts/(sections)/main-host-status-section.tsx

@@ -5,12 +5,12 @@ import Span from "@/src/components/twui/layout/Span";
 import Stack from "@/src/components/twui/layout/Stack";
 import deriveHostConfig from "../(functions)/derive-host-config";
 import { twMerge } from "tailwind-merge";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
 import type { BUN_SQLITE_WGUI_HOSTS_JOIN } from "@/src/types/sql-joins";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
     host?: BUN_SQLITE_WGUI_HOSTS_JOIN;
-    clients?: BUN_SQLITE_WGUI_CLIENTS[];
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[];
 };
 
 export default function MainHostStatusSection({ host, clients }: Props) {
@@ -30,10 +30,12 @@ export default function MainHostStatusSection({ host, clients }: Props) {
             value: String(config.client_count),
         },
         {
-            label: "Public key",
+            label: "Public IP",
-            value: config.public_key
+            value: host?.public_ip_address || "Not generated",
-                ? `${config.public_key.slice(0, 20)}…`
+        },
-                : "Not generated",
+        {
+            label: "Listen Port",
+            value: host?.listen_port || "No Listen Port",
         },
     ];
 
@@ -64,7 +66,7 @@ export default function MainHostStatusSection({ host, clients }: Props) {
                     {config.config_path}
                 </Span>
             </Row>
-            <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-5 pt-4 border-t border-slate-200 dark:border-white/10">
+            <div className="grid grid-cols-2 lg:grid-cols-5 gap-x-4 gap-y-5 pt-4 border-t border-slate-200 dark:border-white/10">
                 {stats.map((stat) => (
                     <HostStatCell
                         key={stat.label}

src/pages/admin/hosts/[host_id]/clients/(partials)/clients-list.tsx

@@ -7,7 +7,7 @@ import useClientRulesMap from "@/src/hooks/use-client-rules-map";
 import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
 import { AppContext } from "@/src/pages/__root";
 import { useContext } from "react";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
     host_id: string | number;
@@ -16,7 +16,7 @@ type Props = {
 export default function ClientsList({ host_id }: Props) {
     const { pageProps } = useContext(AppContext);
 
-    const { res: clients } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
+    const { res: clients } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS_JOIN>({
         table: "clients",
         sql_query: {
             query: {

src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/add-client-rule-form.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Plus } from "lucide-react";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 import Button from "@/src/components/twui/layout/Button";
 import Stack from "@/src/components/twui/layout/Stack";
 import Tag from "@/src/components/twui/elements/Tag";
@@ -13,7 +13,7 @@ import {
 } from "../../(partials)/client-rules/client-rule-draft";
 
 type Props = {
-    client: BUN_SQLITE_WGUI_CLIENTS;
+    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
 };
 
 export default function AddClientRuleForm({ client }: Props) {

src/pages/admin/hosts/[host_id]/clients/[client_id]/(partials)/client-detail-actions.tsx

@@ -2,10 +2,10 @@ import { useState } from "react";
 import { Pencil, Trash2 } from "lucide-react";
 import Button from "@/src/components/twui/layout/Button";
 import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_CLIENTS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
-    client: BUN_SQLITE_WGUI_CLIENTS;
+    client: BUN_SQLITE_WGUI_CLIENTS_JOIN;
 };
 
 export default function ClientDetailActions({ client }: Props) {

src/pages/admin/hosts/[host_id]/clients/[client_id]/edit/index.server.ts

@@ -1,7 +1,6 @@
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import grabClients from "@/src/functions/backend/db/clients/grab-clients";
 import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
-import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
+import type { PagePropsType, PageQueryObject } from "@/src/types";
-import BunSQLite from "@moduletrace/bun-sqlite";
 import type { BunextPageServerFn } from "@moduletrace/bunext/types";
 
 type ClientEditPageQuery = PageQueryObject & {
@@ -11,12 +10,8 @@ type ClientEditPageQuery = PageQueryObject & {
 const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
     const page_query = query as ClientEditPageQuery;
 
-    const client_res = await BunSQLite.select<
+    const client_res = await grabClients({
-        BUN_SQLITE_WGUI_CLIENTS,
+        client_id: page_query.client_id,
-        TableType
-    >({
-        table: "clients",
-        targetId: page_query.client_id,
     });
 
     const client = client_res.singleRes || null;

src/pages/admin/hosts/[host_id]/clients/[client_id]/index.server.ts

@@ -1,8 +1,6 @@
-import type {
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-    BUN_SQLITE_WGUI_CLIENTS,
-    BUN_SQLITE_WGUI_HOSTS,
-} from "@/db/types/db";
 import { AppData } from "@/src/data/app-data";
+import grabClients from "@/src/functions/backend/db/clients/grab-clients";
 import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
 import generateWireguardClientQR from "@/src/functions/backend/setup/generate-wireguard-client-qr";
 import readWireguardClientConfig from "@/src/functions/backend/setup/read-wireguard-client-config";
@@ -17,12 +15,8 @@ type ClientPageQuery = PageQueryObject & {
 const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
     const page_query = query as ClientPageQuery;
 
-    const client_res = await BunSQLite.select<
+    const client_res = await grabClients({
-        BUN_SQLITE_WGUI_CLIENTS,
+        client_id: page_query.client_id,
-        TableType
-    >({
-        table: "clients",
-        targetId: page_query.client_id,
     });
 
     const client = client_res.singleRes || null;

src/pages/admin/hosts/[host_id]/clients/index.server.ts

@@ -1,7 +1,5 @@
-import type {
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-    BUN_SQLITE_WGUI_CLIENTS,
+import grabClients from "@/src/functions/backend/db/clients/grab-clients";
-    BUN_SQLITE_WGUI_HOSTS,
-} from "@/db/types/db";
 import grabClientRules from "@/src/functions/backend/db/client-rules/grab-client-rules";
 import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
 import BunSQLite from "@moduletrace/bun-sqlite";
@@ -19,18 +17,8 @@ const server: BunextPageServerFn<PagePropsType> = async ({
         TableType
     >({ table: "hosts", targetId: page_query.host_id });
 
-    const host_clients = await BunSQLite.select<
+    const host_clients = await grabClients({
-        BUN_SQLITE_WGUI_CLIENTS,
+        host_id: page_query.host_id,
-        TableType
-    >({
-        table: "clients",
-        query: {
-            query: {
-                host_id: {
-                    value: page_query.host_id,
-                },
-            },
-        },
     });
 
     const clients = host_clients.payload || null;

src/pages/admin/hosts/[host_id]/index.server.ts

@@ -1,7 +1,5 @@
-import type {
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-    BUN_SQLITE_WGUI_CLIENTS,
+import grabClients from "@/src/functions/backend/db/clients/grab-clients";
-    BUN_SQLITE_WGUI_HOSTS,
-} from "@/db/types/db";
 import grabHostDirnames from "@/src/functions/backend/setup/grab-host-dir-names";
 import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
 import BunSQLite from "@moduletrace/bun-sqlite";
@@ -24,18 +22,8 @@ const server: BunextPageServerFn<PagePropsType> = async ({ query }) => {
           }
         : null;
 
-    const host_clients = await BunSQLite.select<
+    const host_clients = await grabClients({
-        BUN_SQLITE_WGUI_CLIENTS,
+        host_id: page_query.host_id,
-        TableType
-    >({
-        table: "clients",
-        query: {
-            query: {
-                host_id: {
-                    value: page_query.host_id,
-                },
-            },
-        },
     });
 
     return {

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

@@ -35,13 +35,16 @@ export default function AdminSingleHostPage() {
         );
     }
 
-    const title = host_id == 0 ? "Main Host" : `Host #${host_id}`;
+    const title = host_id == 0 ? "Main Host" : host?.name || `Host #${host_id}`;
 
     return (
         <>
             <AdminHero
                 title={host ? title : "Host"}
-                description="WireGuard server configuration and interface details"
+                description={
+                    host?.short_description ||
+                    "WireGuard server configuration and interface details"
+                }
                 buttons={
                     <>
                         <Button
@@ -50,7 +53,7 @@ export default function AdminSingleHostPage() {
                             variant="outlined"
                             href={`/admin/hosts/${host_id}/edit`}
                         >
-                            Edit Host
+                            Edit
                         </Button>
                         <Button
                             title="View Clients"
@@ -77,10 +80,10 @@ export default function AdminSingleHostPage() {
 
             <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
                 <MainHostStatusSection host={host} clients={clients} />
-                <HostPublicIpSection
+                {/* <HostPublicIpSection
                     host_id={host_id}
                     current_ip={host?.public_ip_address || ""}
-                />
+                /> */}
                 <InterfaceConfigSection host={host} clients={clients} />
             </Stack>
         </>

src/pages/admin/hosts/index.server.ts

@@ -1,8 +1,6 @@
-import type {
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
-    BUN_SQLITE_WGUI_CLIENTS,
+import grabClients from "@/src/functions/backend/db/clients/grab-clients";
-    BUN_SQLITE_WGUI_HOSTS,
+import type { PagePropsType, TableType } from "@/src/types";
-} from "@/db/types/db";
-import type { PagePropsType, PageQueryObject, TableType } from "@/src/types";
 import BunSQLite from "@moduletrace/bun-sqlite";
 import type { BunextPageServerFn } from "@moduletrace/bunext/types";
 
@@ -22,12 +20,7 @@ const server: BunextPageServerFn<PagePropsType> = async (ctx) => {
         table: "hosts",
     });
 
-    const clients_res = await BunSQLite.select<
+    const clients_res = await grabClients();
-        BUN_SQLITE_WGUI_CLIENTS,
-        TableType
-    >({
-        table: "clients",
-    });
 
     return {
         props: {

src/pages/api/admin/crud/(tables)/clients/get.ts

@@ -1,7 +1,8 @@
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { BUN_SQLITE_WGUI_ALL_TYPEDEFS } from "@/db/types/db";
 import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
-import type { AdminCrudAPIParams, TableType } from "@/src/types";
+import checkAllowedJoins from "@/src/functions/backend/db/check-allowed-joins";
-import BunSQLite from "@moduletrace/bun-sqlite";
+import grabClients from "@/src/functions/backend/db/clients/grab-clients";
+import type { AdminCrudAPIParams, ApiReqParams, TableType } from "@/src/types";
 import type { APIResponseObject } from "@moduletrace/bunext/types";
 import _ from "lodash";
 
@@ -11,8 +12,22 @@ export default async function (
     const { table, user_types, body, id, query, user } = params;
 
     let final_sql_query = _.merge(query?.sql_query, body?.sql_query) || {};
+    let final_query =
+        _.merge<
+            ApiReqParams<BUN_SQLITE_WGUI_ALL_TYPEDEFS>,
+            ApiReqParams<BUN_SQLITE_WGUI_ALL_TYPEDEFS>
+        >(query || {}, { sql_query: final_sql_query }) || {};
 
-    delete final_sql_query.join;
+    const allowed_joins: TableType[] = ["hosts"];
+
+    const check_allowed_joins = checkAllowedJoins({
+        joins: allowed_joins,
+        query: final_sql_query,
+    });
+
+    if (!check_allowed_joins.success) {
+        return check_allowed_joins;
+    }
 
     const can_user_see_all_clients = checkUserAccess({
         user_types,
@@ -28,11 +43,18 @@ export default async function (
         };
     }
 
-    const GET = await BunSQLite.select<BUN_SQLITE_WGUI_CLIENTS, TableType>({
+    const GET = await grabClients({
-        table,
+        query: final_query,
-        query: final_sql_query,
+        client_id: id,
-        targetId: id,
+        host_id: final_sql_query.query?.host_id?.value as
+            | string
+            | number
+            | undefined,
+        user_id: final_sql_query.query?.user_id?.value as
+            | string
+            | number
+            | undefined,
     });
 
     return GET;
-}
+}

src/types/index.ts

@@ -20,6 +20,7 @@ import type { BunextPageModuleServerReturnURLObject } from "@moduletrace/bunext/
 import type {
     BUN_SQLITE_WGUI_USERS_JOIN,
     BUN_SQLITE_WGUI_HOSTS_JOIN,
+    BUN_SQLITE_WGUI_CLIENTS_JOIN,
 } from "./sql-joins";
 import type { ImageInputToBase64FunctionReturn } from "../components/twui/utils/form/imageInputToBase64";
 import type { ServerQueryParam } from "@moduletrace/bun-sqlite/dist/types";
@@ -53,8 +54,8 @@ export type PagePropsType = {
     single_user?: BUN_SQLITE_WGUI_USERS_JOIN | null;
     single_users?: BUN_SQLITE_WGUI_USERS_JOIN[] | null;
     variables?: BUN_SQLITE_WGUI_VARIABLES[] | null;
-    client?: BUN_SQLITE_WGUI_CLIENTS | null;
+    client?: BUN_SQLITE_WGUI_CLIENTS_JOIN | null;
-    clients?: BUN_SQLITE_WGUI_CLIENTS[] | null;
+    clients?: BUN_SQLITE_WGUI_CLIENTS_JOIN[] | null;
     client_rules?: BUN_SQLITE_WGUI_CLIENT_RULES[] | null;
     client_config?: string | null;
     client_config_path?: string | null;

src/types/sql-joins.ts

@@ -1,4 +1,5 @@
 import type {
+    BUN_SQLITE_WGUI_CLIENTS,
     BUN_SQLITE_WGUI_HOSTS,
     BUN_SQLITE_WGUI_MEDIA,
     BUN_SQLITE_WGUI_MEDIA_PARADIGMS,
@@ -26,3 +27,7 @@ export type BUN_SQLITE_WGUI_MEDIA_JOIN = BUN_SQLITE_WGUI_MEDIA & {
 export type BUN_SQLITE_WGUI_HOSTS_JOIN = BUN_SQLITE_WGUI_HOSTS & {
     dir_names?: ReturnType<typeof grabHostDirnames>;
 };
+
+export type BUN_SQLITE_WGUI_CLIENTS_JOIN = BUN_SQLITE_WGUI_CLIENTS & {
+    host_name?: string;
+};