clients frontend demo first pass

server/routers/client/createClient.ts

@@ -104,6 +104,12 @@ export async function createClient(
             return next(createHttpError(HttpCode.NOT_FOUND, "Site not found"));
         }
 
+        if (site.type !== "newt") {
+            return next(
+                createHttpError(HttpCode.BAD_REQUEST, "Site is not a newt site")
+            );
+        }
+
         await db.transaction(async (trx) => {
             const adminRole = await trx
                 .select()

server/routers/client/listClients.ts

@@ -3,10 +3,8 @@ import {
     clients,
     orgs,
     roleClients,
-    roleSites,
     sites,
     userClients,
-    userSites
 } from "@server/db/schema";
 import logger from "@server/logger";
 import HttpCode from "@server/types/HttpCode";
@@ -41,16 +39,17 @@ const listClientsSchema = z.object({
 function queryClients(orgId: string, accessibleClientIds: number[]) {
     return db
         .select({
-            siteId: sites.siteId,
-            niceId: sites.niceId,
-            name: sites.name,
-            pubKey: sites.pubKey,
-            subnet: sites.subnet,
-            megabytesIn: sites.megabytesIn,
-            megabytesOut: sites.megabytesOut,
+            clientId: clients.clientId,
+            orgId: clients.orgId,
+            siteId: clients.siteId,
+            name: clients.name,
+            pubKey: clients.pubKey,
+            subnet: clients.subnet,
+            megabytesIn: clients.megabytesIn,
+            megabytesOut: clients.megabytesOut,
             orgName: orgs.name,
-            type: sites.type,
-            online: sites.online
+            type: clients.type,
+            online: clients.online
         })
         .from(clients)
         .leftJoin(orgs, eq(clients.orgId, orgs.orgId))
@@ -115,22 +114,22 @@ export async function listClients(
             )
             .where(
                 or(
-                    eq(userSites.userId, req.user!.userId),
-                    eq(roleSites.roleId, req.userOrgRoleId!)
+                    eq(userClients.userId, req.user!.userId),
+                    eq(roleClients.roleId, req.userOrgRoleId!)
                 )
             );
 
-        const accessibleSiteIds = accessibleClients.map(
+        const accessibleClientIds = accessibleClients.map(
             (site) => site.clientId
         );
-        const baseQuery = queryClients(orgId, accessibleSiteIds);
+        const baseQuery = queryClients(orgId, accessibleClientIds);
 
         let countQuery = db
             .select({ count: count() })
             .from(sites)
             .where(
                 and(
-                    inArray(sites.siteId, accessibleSiteIds),
+                    inArray(sites.siteId, accessibleClientIds),
                     eq(sites.orgId, orgId)
                 )
             );

server/routers/client/pickClientDefaults.ts

@@ -14,7 +14,7 @@ import { fromError } from "zod-validation-error";
 
 const getSiteSchema = z
     .object({
-        siteId: z.number().int().positive()
+        siteId: z.string().transform(Number).pipe(z.number())
     })
     .strict();
 
@@ -26,8 +26,8 @@ export type PickClientDefaultsResponse = {
     listenPort: number;
     endpoint: string;
     subnet: string;
-    clientId: string;
-    clientSecret: string;
+    olmId: string;
+    olmSecret: string;
 };
 
 export async function pickClientDefaults(
@@ -57,6 +57,15 @@ export async function pickClientDefaults(
             return next(createHttpError(HttpCode.NOT_FOUND, "Site not found"));
         }
 
+        if (site.type !== "newt") {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    "Site is not a newt site"
+                )
+            );
+        }
+
         // make sure all the required fields are present
 
         const sitesRequiredFields = z.object({
@@ -109,7 +118,7 @@ export async function pickClientDefaults(
             );
         }
 
-        const clientId = generateId(15);
+        const olmId = generateId(15);
         const secret = generateId(48);
 
         return response<PickClientDefaultsResponse>(res, {
@@ -121,8 +130,8 @@ export async function pickClientDefaults(
                 listenPort: listenPort,
                 endpoint: endpoint,
                 subnet: newSubnet,
-                clientId,
-                clientSecret: secret
+                olmId: olmId,
+                olmSecret: secret
             },
             success: true,
             error: false,

server/routers/site/createSite.ts

@@ -35,7 +35,7 @@ const createSiteSchema = z
         subnet: z.string().optional(),
         newtId: z.string().optional(),
         secret: z.string().optional(),
-        type: z.enum(["newt", "wireguard"])
+        type: z.enum(["newt", "wireguard", "local"])
     })
     .strict();
 

src/app/[orgId]/settings/clients/ClientsDataTable.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    SortingState,
+    getSortedRowModel,
+    ColumnFiltersState,
+    getFilteredRowModel
+} from "@tanstack/react-table";
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@/components/ui/table";
+import { Button } from "@app/components/ui/button";
+import { useState } from "react";
+import { Input } from "@app/components/ui/input";
+import { DataTablePagination } from "@app/components/DataTablePagination";
+import { Plus, Search } from "lucide-react";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    addClient?: () => void;
+}
+
+export function ClientsDataTable<TData, TValue>({
+    addClient,
+    columns,
+    data
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        onColumnFiltersChange: setColumnFilters,
+        getFilteredRowModel: getFilteredRowModel(),
+        initialState: {
+            pagination: {
+                pageSize: 20,
+                pageIndex: 0
+            }
+        },
+        state: {
+            sorting,
+            columnFilters
+        }
+    });
+
+    return (
+        <div>
+            <div className="flex items-center justify-between pb-4">
+                <div className="flex items-center max-w-sm mr-2 w-full relative">
+                    <Input
+                        placeholder="Search clients"
+                        value={
+                            (table
+                                .getColumn("name")
+                                ?.getFilterValue() as string) ?? ""
+                        }
+                        onChange={(event) =>
+                            table
+                                .getColumn("name")
+                                ?.setFilterValue(event.target.value)
+                        }
+                        className="w-full pl-8"
+                    />
+                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
+                </div>
+                <Button
+                    onClick={() => {
+                        if (addClient) {
+                            addClient();
+                        }
+                    }}
+                >
+                    <Plus className="mr-2 h-4 w-4" /> Add Client
+                </Button>
+            </div>
+            <TableContainer>
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={
+                                        row.getIsSelected() && "selected"
+                                    }
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No clients. Create one to get started.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <div className="mt-4">
+                <DataTablePagination table={table} />
+            </div>
+        </div>
+    );
+}

src/app/[orgId]/settings/clients/ClientsTable.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { ClientsDataTable } from "./ClientsDataTable";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import {
+    ArrowRight,
+    ArrowUpDown,
+    Check,
+    MoreHorizontal,
+    X
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import CreateClientFormModal from "./CreateClientsModal";
+
+export type ClientRow = {
+    id: number;
+    name: string;
+    mbIn: string;
+    mbOut: string;
+    orgId: string;
+    online: boolean;
+};
+
+type ClientTableProps = {
+    clients: ClientRow[];
+    orgId: string;
+};
+
+export default function ClientsTable({ clients, orgId }: ClientTableProps) {
+    const router = useRouter();
+
+    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
+        null
+    );
+    const [rows, setRows] = useState<ClientRow[]>(clients);
+
+    const api = createApiClient(useEnvContext());
+
+    const deleteSite = (clientId: number) => {
+        api.delete(`/client/${clientId}`)
+            .catch((e) => {
+                console.error("Error deleting client", e);
+                toast({
+                    variant: "destructive",
+                    title: "Error deleting client",
+                    description: formatAxiosError(e, "Error deleting client")
+                });
+            })
+            .then(() => {
+                router.refresh();
+                setIsDeleteModalOpen(false);
+
+                const newRows = rows.filter((row) => row.id !== clientId);
+
+                setRows(newRows);
+            });
+    };
+
+    const columns: ColumnDef<ClientRow>[] = [
+        {
+            id: "dots",
+            cell: ({ row }) => {
+                const clientRow = row.original;
+                const router = useRouter();
+
+                return (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">Open menu</span>
+                                <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            {/* <Link */}
+                            {/*     className="block w-full" */}
+                            {/*     href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
+                            {/* > */}
+                            {/*     <DropdownMenuItem> */}
+                            {/*         View settings */}
+                            {/*     </DropdownMenuItem> */}
+                            {/* </Link> */}
+                            <DropdownMenuItem
+                                onClick={() => {
+                                    setSelectedClient(clientRow);
+                                    setIsDeleteModalOpen(true);
+                                }}
+                            >
+                                <span className="text-red-500">Delete</span>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            }
+        },
+        {
+            accessorKey: "name",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Name
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "online",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Online
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const originalRow = row.original;
+                if (originalRow.online) {
+                    return (
+                        <span className="text-green-500 flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                            <span>Online</span>
+                        </span>
+                    );
+                } else {
+                    return (
+                        <span className="text-neutral-500 flex items-center space-x-2">
+                            <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
+                            <span>Offline</span>
+                        </span>
+                    );
+                }
+            }
+        },
+        {
+            accessorKey: "mbIn",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Data In
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "mbOut",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Data Out
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        }
+        // {
+        //     id: "actions",
+        //     cell: ({ row }) => {
+        //         const siteRow = row.original;
+        //         return (
+        //             <div className="flex items-center justify-end">
+        //                 <Link
+        //                     href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
+        //                 >
+        //                     <Button variant={"outline"} className="ml-2">
+        //                         Edit
+        //                         <ArrowRight className="ml-2 w-4 h-4" />
+        //                     </Button>
+        //                 </Link>
+        //             </div>
+        //         );
+        //     }
+        // }
+    ];
+
+    return (
+        <>
+            <CreateClientFormModal
+                open={isCreateModalOpen}
+                setOpen={setIsCreateModalOpen}
+                onCreate={(val) => {
+                    setRows([val, ...rows]);
+                }}
+                orgId={orgId}
+            />
+
+            {selectedClient && (
+                <ConfirmDeleteDialog
+                    open={isDeleteModalOpen}
+                    setOpen={(val) => {
+                        setIsDeleteModalOpen(val);
+                        setSelectedClient(null);
+                    }}
+                    dialog={
+                        <div className="space-y-4">
+                            <p>
+                                Are you sure you want to remove the client{" "}
+                                <b>
+                                    {selectedClient?.name || selectedClient?.id}
+                                </b>{" "}
+                                from the site and organization?
+                            </p>
+
+                            <p>
+                                <b>
+                                    Once removed, the client will no longer be
+                                    able to connect to the site.{" "}
+                                </b>
+                            </p>
+
+                            <p>
+                                To confirm, please type the name of the client
+                                below.
+                            </p>
+                        </div>
+                    }
+                    buttonText="Confirm Delete Client"
+                    onConfirm={async () => deleteSite(selectedClient!.id)}
+                    string={selectedClient.name}
+                    title="Delete Client"
+                />
+            )}
+
+            <ClientsDataTable
+                columns={columns}
+                data={rows}
+                addClient={() => {
+                    setIsCreateModalOpen(true);
+                }}
+            />
+        </>
+    );
+}

src/app/[orgId]/settings/clients/CreateClientsForm.tsx

@@ -0,0 +1,336 @@
+"use client";
+
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { toast } from "@app/hooks/useToast";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import CopyTextBox from "@app/components/CopyTextBox";
+import { Checkbox } from "@app/components/ui/checkbox";
+import { formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { AxiosResponse } from "axios";
+import { Collapsible } from "@app/components/ui/collapsible";
+import { ClientRow } from "./ClientsTable";
+import {
+    CreateClientResponse,
+    PickClientDefaultsResponse
+} from "@server/routers/client";
+import { ListSitesResponse } from "@server/routers/site";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { Button } from "@app/components/ui/button";
+import { cn } from "@app/lib/cn";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+
+const createClientFormSchema = z.object({
+    name: z
+        .string()
+        .min(2, {
+            message: "Name must be at least 2 characters."
+        })
+        .max(30, {
+            message: "Name must not be longer than 30 characters."
+        }),
+    siteId: z.coerce.number()
+});
+
+type CreateSiteFormValues = z.infer<typeof createClientFormSchema>;
+
+const defaultValues: Partial<CreateSiteFormValues> = {
+    name: ""
+};
+
+type CreateSiteFormProps = {
+    onCreate?: (client: ClientRow) => void;
+    setLoading?: (loading: boolean) => void;
+    setChecked?: (checked: boolean) => void;
+    orgId: string;
+};
+
+export default function CreateClientForm({
+    onCreate,
+    setLoading,
+    setChecked,
+    orgId
+}: CreateSiteFormProps) {
+    const api = createApiClient(useEnvContext());
+    const { env } = useEnvContext();
+
+    const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isChecked, setIsChecked] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [clientDefaults, setClientDefaults] =
+        useState<PickClientDefaultsResponse | null>(null);
+    const [olmCommand, setOlmCommand] = useState<string | null>(null);
+
+    const handleCheckboxChange = (checked: boolean) => {
+        setIsChecked(checked);
+    };
+
+    const form = useForm<CreateSiteFormValues>({
+        resolver: zodResolver(createClientFormSchema),
+        defaultValues
+    });
+
+    useEffect(() => {
+        if (!open) return;
+
+        // reset all values
+        setLoading?.(false);
+        setIsLoading(false);
+        form.reset();
+        setChecked?.(false);
+        setClientDefaults(null);
+
+        const fetchSites = async () => {
+            const res = await api.get<AxiosResponse<ListSitesResponse>>(
+                `/org/${orgId}/sites/`
+            );
+            setSites(res.data.data.sites);
+
+            if (res.data.data.sites.length > 0) {
+                form.setValue("siteId", res.data.data.sites[0].siteId);
+            }
+        };
+
+        fetchSites();
+    }, [open]);
+
+    useEffect(() => {
+        const siteId = form.getValues("siteId");
+
+        if (siteId === undefined || siteId === null) return;
+
+        api.get(`/site/${siteId}/pick-client-defaults`)
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: `Error fetching client defaults for site ${siteId}`,
+                    description: formatAxiosError(e)
+                });
+            })
+            .then((res) => {
+                if (res && res.status === 200) {
+                    const data = res.data.data;
+                    setClientDefaults(data);
+                    const olmConfig = `olm --id ${data?.olmId} --secret ${data?.olmSecret} --endpoint ${env.app.dashboardUrl}`;
+                    setOlmCommand(olmConfig);
+                }
+            });
+    }, [form.watch("siteId")]);
+
+    async function onSubmit(data: CreateSiteFormValues) {
+        setLoading?.(true);
+        setIsLoading(true);
+
+        if (!clientDefaults) {
+            toast({
+                variant: "destructive",
+                title: "Error creating site",
+                description: "Site defaults not found"
+            });
+            setLoading?.(false);
+            setIsLoading(false);
+            return;
+        }
+
+        const payload = {
+            name: data.name,
+            siteId: data.siteId,
+            orgId,
+            subnet: clientDefaults.subnet,
+            secret: clientDefaults.olmSecret,
+            olmId: clientDefaults.olmId
+        };
+
+        const res = await api
+            .put<
+                AxiosResponse<CreateClientResponse>
+            >(`/site/${data.siteId}/client`, payload)
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: "Error creating client",
+                    description: formatAxiosError(e)
+                });
+            });
+
+        if (res && res.status === 201) {
+            const data = res.data.data;
+
+            onCreate?.({
+                name: data.name,
+                id: data.clientId,
+                mbIn: "0 MB",
+                mbOut: "0 MB",
+                orgId: orgId as string,
+                online: false
+            });
+        }
+
+        setLoading?.(false);
+        setIsLoading(false);
+    }
+
+    return (
+        <div className="space-y-4">
+            <Form {...form}>
+                <form
+                    onSubmit={form.handleSubmit(onSubmit)}
+                    className="space-y-4"
+                    id="create-site-form"
+                >
+                    <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Name</FormLabel>
+                                <FormControl>
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="Client name"
+                                        {...field}
+                                    />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="siteId"
+                        render={({ field }) => (
+                            <FormItem className="flex flex-col">
+                                <FormLabel>Client</FormLabel>
+                                <Popover>
+                                    <PopoverTrigger asChild>
+                                        <FormControl>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className={cn(
+                                                    "justify-between",
+                                                    !field.value &&
+                                                        "text-muted-foreground"
+                                                )}
+                                            >
+                                                {field.value
+                                                    ? sites.find(
+                                                          (site) =>
+                                                              site.siteId ===
+                                                              field.value
+                                                      )?.name
+                                                    : "Select site"}
+                                                <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </FormControl>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="p-0">
+                                        <Command>
+                                            <CommandInput placeholder="Search site..." />
+                                            <CommandList>
+                                                <CommandEmpty>
+                                                    No site found.
+                                                </CommandEmpty>
+                                                <CommandGroup>
+                                                    {sites.map((site) => (
+                                                        <CommandItem
+                                                            value={`${site.siteId}:${site.name}:${site.niceId}`}
+                                                            key={site.siteId}
+                                                            onSelect={() => {
+                                                                form.setValue(
+                                                                    "siteId",
+                                                                    site.siteId
+                                                                );
+                                                            }}
+                                                        >
+                                                            <CheckIcon
+                                                                className={cn(
+                                                                    "mr-2 h-4 w-4",
+                                                                    site.siteId ===
+                                                                        field.value
+                                                                        ? "opacity-100"
+                                                                        : "opacity-0"
+                                                                )}
+                                                            />
+                                                            {site.name}
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </CommandList>
+                                        </Command>
+                                    </PopoverContent>
+                                </Popover>
+                                <FormDescription>
+                                    The client will be have connectivity to this
+                                    site.
+                                </FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <div className="w-full">
+                        <div className="mb-2">
+                            <Collapsible
+                                open={isOpen}
+                                onOpenChange={setIsOpen}
+                                className="space-y-2"
+                            >
+                                <div className="mx-auto">
+                                    <CopyTextBox
+                                        text={olmCommand || ""}
+                                        wrapText={false}
+                                    />
+                                </div>
+                            </Collapsible>
+                        </div>
+                        <span className="text-sm text-muted-foreground">
+                            You will only be able to see the configuration once.
+                        </span>
+                    </div>
+
+                    <div className="flex items-center space-x-2">
+                        <Checkbox
+                            id="terms"
+                            checked={isChecked}
+                            onCheckedChange={handleCheckboxChange}
+                        />
+                        <label
+                            htmlFor="terms"
+                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                            I have copied the config
+                        </label>
+                    </div>
+                </form>
+            </Form>
+        </div>
+    );
+}

src/app/[orgId]/settings/clients/CreateClientsModal.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import { useState } from "react";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import CreateClientForm from "./CreateClientsForm";
+import { ClientRow } from "./ClientsTable";
+
+type CreateClientFormProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onCreate?: (client: ClientRow) => void;
+    orgId: string;
+};
+
+export default function CreateClientFormModal({
+    open,
+    setOpen,
+    onCreate,
+    orgId
+}: CreateClientFormProps) {
+    const [loading, setLoading] = useState(false);
+    const [isChecked, setIsChecked] = useState(false);
+
+    return (
+        <>
+            <Credenza
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val);
+                    setLoading(false);
+                }}
+            >
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>Create Client</CredenzaTitle>
+                        <CredenzaDescription>
+                            Create a new client to connect to your sites
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <div className="max-w-md">
+                            <CreateClientForm
+                                setLoading={(val) => setLoading(val)}
+                                setChecked={(val) => setIsChecked(val)}
+                                onCreate={onCreate}
+                                orgId={orgId}
+                            />
+                        </div>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <Button
+                            type="submit"
+                            form="create-site-form"
+                            loading={loading}
+                            disabled={loading || !isChecked}
+                            onClick={() => {
+                                setOpen(false);
+                            }}
+                        >
+                            Create Client
+                        </Button>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+        </>
+    );
+}

src/app/[orgId]/settings/clients/page.tsx

@@ -0,0 +1,57 @@
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { AxiosResponse } from "axios";
+import { ClientRow } from "./ClientsTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { ListClientsResponse } from "@server/routers/client";
+import ClientsTable from "./ClientsTable";
+
+type ClientsPageProps = {
+    params: Promise<{ orgId: string }>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function ClientsPage(props: ClientsPageProps) {
+    const params = await props.params;
+    let clients: ListClientsResponse["clients"] = [];
+    try {
+        const res = await internal.get<AxiosResponse<ListClientsResponse>>(
+            `/org/${params.orgId}/clients`,
+            await authCookieHeader()
+        );
+        clients = res.data.data.clients;
+    } catch (e) {}
+
+    function formatSize(mb: number): string {
+        if (mb >= 1024 * 1024) {
+            return `${(mb / (1024 * 1024)).toFixed(2)} TB`;
+        } else if (mb >= 1024) {
+            return `${(mb / 1024).toFixed(2)} GB`;
+        } else {
+            return `${mb.toFixed(2)} MB`;
+        }
+    }
+
+    const clientRows: ClientRow[] = clients.map((client) => {
+        return {
+            name: client.name,
+            id: client.clientId,
+            mbIn: formatSize(client.megabytesIn || 0),
+            mbOut: formatSize(client.megabytesOut || 0),
+            orgId: params.orgId,
+            online: client.online
+        };
+    });
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title="Manage Clients"
+                description="Clients are devices that can connect to your sites"
+            />
+
+            <ClientsTable clients={clientRows} orgId={params.orgId} />
+        </>
+    );
+}

src/app/[orgId]/settings/layout.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import { TopbarNav } from "@app/components/TopbarNav";
-import { Cog, Combine, Link, Settings, Users, Waypoints } from "lucide-react";
+import { Cog, Combine, Laptop, Link, Settings, Users, Waypoints, Workflow } from "lucide-react";
 import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
@@ -30,6 +30,11 @@ const topNavItems = [
         href: "/{orgId}/settings/resources",
         icon: <Waypoints className="h-4 w-4" />
     },
+    {
+        title: "Clients",
+        href: "/{orgId}/settings/clients",
+        icon: <Workflow className="h-4 w-4" />
+    },
     {
         title: "Users & Roles",
         href: "/{orgId}/settings/access",