Moduletrace/wireguard-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add host setup functions and client components

Browse Source
This commit is contained in:
tben
2026-09-13 10:52:30 +01:00
parent 76679aabe7
commit 86eb3a0b05
53 changed files with 1284 additions and 1325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/admin/clients/(sections)/clients-table-section.tsx
+52 -27
View File
@@ -1,9 +1,15 @@
import { useMemo, useState, type Dispatch, type SetStateAction } from "react";
import Search from "@/src/components/twui/elements/Search";
import Loading from "@/src/components/twui/elements/Loading";
import AdminCard from "@/src/components/general/admin-card";
import ClientRow from "../(partials)/client-row";
import ClientRow from "@/src/components/general/client-row";
import H2 from "@/src/components/twui/layout/H2";
import Span from "@/src/components/twui/layout/Span";
import Row from "@/src/components/twui/layout/Row";
import Stack from "@/src/components/twui/layout/Stack";
import ClientFormModal from "../(partials)/client-form-modal";
import { CLIENTS } from "../(data)/clients-mock-data";
import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
type Props = {
addOpen: boolean;
@@ -19,25 +25,36 @@ const thRightClass = `${thClass} text-right`;
export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
const [query, setQuery] = useState("");
const { res, setRes } = useAdminCrudGet<BUN_SQLITE_WGUI_CLIENTS>({
table: "clients",
sql_query: {
order: { field: "created_at", strategy: "DESC" },
limit: 100,
},
});
const filtered = useMemo(() => {
const clients = res || [];
const q = query.trim().toLowerCase();
if (!q) return CLIENTS;
return CLIENTS.filter((client) =>
[client.name, client.tunnelIp, client.allowedIps].some((value) =>
value.toLowerCase().includes(q),
if (!q) {
return clients;
}
return clients.filter((client) =>
[client.name, client.wg_ip_address, client.allowed_ips].some(
(value) => (value || "").toLowerCase().includes(q),
),
);
}, [query]);
}, [res, query]);
return (
<AdminCard className="w-full overflow-hidden">
<div className="flex items-center justify-between gap-3 px-5 h-12 flex-wrap">
<h2 className="text-[13.5px] font-medium text-foreground-light/60 dark:text-foreground-dark/60">
<Row className="justify-between gap-3 px-5 h-12 flex-wrap">
<H2 className="text-[13.5px] font-medium text-foreground-light/60 dark:text-foreground-dark/60 mb-0!">
Clients
<span className="tabular text-foreground-light/40 dark:text-foreground-dark/40 ml-2">
{filtered.length}
</span>
</h2>
<Span className="tabular text-foreground-light/40 dark:text-foreground-dark/40 ml-2">
{String(filtered.length)}
</Span>
</H2>
<Search
no_search_button
placeholder="Search clients…"
@@ -50,8 +67,12 @@ export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
},
}}
/>
</div>
{filtered.length ? (
</Row>
{res === undefined ? (
<Stack center className="w-full py-10">
<Loading />
</Stack>
) : filtered.length ? (
<div className="overflow-x-auto">
<table className="w-full min-w-[860px]">
<thead>
@@ -60,8 +81,6 @@ export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
<th className={thClass}>Tunnel IP</th>
<th className={thClass}>Allowed IPs</th>
<th className={thClass}>Public key</th>
<th className={thRightClass}>Traffic</th>
<th className={thRightClass}>Last handshake</th>
<th className={thRightClass}>Created</th>
</tr>
</thead>
@@ -73,16 +92,22 @@ export default function ClientsTableSection({ addOpen, setAddOpen }: Props) {
</table>
</div>
) : (
<div className="flex flex-col items-center justify-center gap-1 py-14 px-6 text-center">
<span className="text-[13.5px] font-medium text-foreground-light/50 dark:text-foreground-dark/50">
No clients found
</span>
<span className="text-[12.5px] text-foreground-light/35 dark:text-foreground-dark/35">
Try adjusting your search terms
</span>
</div>
<Stack center className="w-full justify-center py-14 px-6 text-center gap-1">
<Span className="text-[13.5px] font-medium text-foreground-light/50 dark:text-foreground-dark/50">
{query ? "No clients found" : "No clients yet"}
</Span>
<Span className="text-[12.5px] text-foreground-light/35 dark:text-foreground-dark/35">
{query
? "Try adjusting your search terms"
: "Add a client to get started"}
</Span>
</Stack>
)}
<ClientFormModal open={addOpen} setOpen={setAddOpen} />
<ClientFormModal
open={addOpen}
setOpen={setAddOpen}
onCreated={() => setRes(undefined)}
/>
</AdminCard>
);
}
}