show resources table, check org access, and handle redirects on root

src/app/[orgId]/components/Header.tsx

@@ -77,7 +77,7 @@ export default function Header({ email, orgName, name }: HeaderProps) {
                             </DropdownMenuGroup>
                         </DropdownMenuContent>
                     </DropdownMenu>
-                    <span className="truncate max-w-[150px] md:max-w-none">
+                    <span className="truncate max-w-[150px] md:max-w-none font-medium">
                         {name || email}
                     </span>
                 </div>

src/app/[orgId]/layout.tsx

@@ -5,6 +5,10 @@ import Header from "./components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { cache } from "react";
+import { internal } from "@app/api";
+import { AxiosResponse } from "axios";
+import { GetOrgResponse } from "@server/routers/org";
+import { authCookieHeader } from "@app/api/cookies";
 
 export const metadata: Metadata = {
     title: "Configuration",
@@ -15,22 +19,22 @@ const topNavItems = [
     {
         title: "Sites",
         href: "/{orgId}/sites",
-        icon: <Combine className="h-5 w-5"/>,
+        icon: <Combine className="h-5 w-5" />,
     },
     {
         title: "Resources",
         href: "/{orgId}/resources",
-        icon: <Waypoints className="h-5 w-5"/>,
+        icon: <Waypoints className="h-5 w-5" />,
     },
     {
         title: "Users",
         href: "/{orgId}/users",
-        icon: <Users className="h-5 w-5"/>,
+        icon: <Users className="h-5 w-5" />,
     },
     {
         title: "General",
         href: "/{orgId}/general",
-        icon: <Cog className="h-5 w-5"/>,
+        icon: <Cog className="h-5 w-5" />,
     },
 ];
 
@@ -43,14 +47,21 @@ export default async function ConfigurationLaytout({
     children,
     params,
 }: ConfigurationLaytoutProps) {
-    const loadUser = cache(async () => await verifySession());
-
-    const user = await loadUser();
+    const user = await verifySession();
 
     if (!user) {
         redirect("/auth/login");
     }
 
+    try {
+        await internal.get<AxiosResponse<GetOrgResponse>>(
+            `/org/${params.orgId}`,
+            authCookieHeader(),
+        );
+    } catch {
+        redirect(`/`);
+    }
+
     return (
         <>
             <div className="w-full bg-muted mb-6 select-none sm:px-0 px-3 pt-3">

src/app/[orgId]/page.tsx

@@ -1,7 +1,11 @@
-export default async function Page() {
-    return (
-        <>
-           <p>IDK what this will show...</p>
-        </>
-    );
+import { redirect } from "next/navigation";
+
+type OrgPageProps = {
+    params: { orgId: string };
+};
+
+export default async function Page({ params }: OrgPageProps) {
+    redirect(`/${params.orgId}/sites`);
+
+    return <></>;
 }

src/app/[orgId]/resources/components/ResourcesDataTable.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    SortingState,
+    getSortedRowModel,
+    ColumnFiltersState,
+    getFilteredRowModel,
+} from "@tanstack/react-table";
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    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 } from "lucide-react";
+
+interface ResourcesDataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    addResource?: () => void;
+}
+
+export function ResourcesDataTable<TData, TValue>({
+    addResource,
+    columns,
+    data,
+}: ResourcesDataTableProps<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(),
+        state: {
+            sorting,
+            columnFilters,
+        },
+    });
+
+    return (
+        <div>
+            <div className="flex items-center justify-between pb-4">
+                <Input
+                    placeholder="Search your resources"
+                    value={
+                        (table.getColumn("name")?.getFilterValue() as string) ??
+                        ""
+                    }
+                    onChange={(event) =>
+                        table
+                            .getColumn("name")
+                            ?.setFilterValue(event.target.value)
+                    }
+                    className="max-w-sm mr-2"
+                />
+                <Button
+                    onClick={() => {
+                        if (addResource) {
+                            addResource();
+                        }
+                    }}
+                >
+                    <Plus className="mr-2 h-4 w-4" /> Add Resource
+                </Button>
+            </div>
+            <div>
+                <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 resources. Create one to get started.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="mt-4">
+                <DataTablePagination table={table} />
+            </div>
+        </div>
+    );
+}

src/app/[orgId]/resources/components/ResourcesTable.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { ResourcesDataTable } from "./ResourcesDataTable";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export type ResourceRow = {
+    id: string;
+    name: string;
+    orgId: string;
+};
+
+export const columns: ColumnDef<ResourceRow>[] = [
+    {
+        accessorKey: "name",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === "asc")
+                    }
+                >
+                    Name
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            );
+        },
+    },
+    {
+        id: "actions",
+        cell: ({ row }) => {
+            const resourceRow = row.original;
+
+            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">
+                        <DropdownMenuItem>
+                            <Link
+                                href={`/${resourceRow.orgId}/resources/${resourceRow.id}`}
+                            >
+                                View settings
+                            </Link>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            );
+        },
+    },
+];
+
+type ResourcesTableProps = {
+    resources: ResourceRow[];
+    orgId: string;
+};
+
+export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
+    const router = useRouter();
+
+    return (
+        <ResourcesDataTable
+            columns={columns}
+            data={resources}
+            addResource={() => {
+                router.push(`/${orgId}/resources/create`);
+            }}
+        />
+    );
+}

src/app/[orgId]/resources/page.tsx

@@ -1,14 +1,45 @@
-export default async function Page() {
+import { internal } from "@app/api";
+import { authCookieHeader } from "@app/api/cookies";
+import ResourcesTable, { ResourceRow } from "./components/ResourcesTable";
+import { AxiosResponse } from "axios";
+import { ListResourcesResponse } from "@server/routers/resource";
+
+type ResourcesPageProps = {
+    params: { orgId: string };
+};
+
+export default async function Page({ params }: ResourcesPageProps) {
+    let resources: ListResourcesResponse["resources"] = [];
+    try {
+        const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
+            `/org/${params.orgId}/resources`,
+            authCookieHeader(),
+        );
+        resources = res.data.data.resources;
+    } catch (e) {
+        console.error("Error fetching resources", e);
+    }
+
+    const resourceRows: ResourceRow[] = resources.map((resource) => {
+        return {
+            id: resource.resourceId.toString(),
+            name: resource.name,
+            orgId: params.orgId,
+        };
+    });
+
     return (
         <>
-            <div className="space-y-0.5 select-none">
+            <div className="space-y-0.5 select-none mb-6">
                 <h2 className="text-2xl font-bold tracking-tight">
                     Manage Resources
                 </h2>
                 <p className="text-muted-foreground">
-                    Create secure proxies to your private resources.
+                    Create secure proxies to your private applications.
                 </p>
             </div>
+
+            <ResourcesTable resources={resourceRows} orgId={params.orgId} />
         </>
     );
 }

src/app/[orgId]/sites/[niceId]/components/create-site.tsx

@@ -177,13 +177,13 @@ sh get-docker.sh`;
                     />
                     {form.watch("method") === "wg" && !isLoading ? (
                         <pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto">
-                            <code className="text-white whitespace-pre-wrap font-mono">{wgConfig}</code>
+                            <code className="whitespace-pre-wrap font-mono">{wgConfig}</code>
                         </pre>
                     ) : form.watch("method") === "wg" && isLoading ? (
                         <p>Loading WireGuard configuration...</p>
                     ) : (
                         <pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto">
-                            <code className="text-white whitespace-pre-wrap">{newtConfig}</code>
+                            <code className="whitespace-pre-wrap">{newtConfig}</code>
                         </pre>
                     )}
                     <div className="flex items-center space-x-2">

src/app/[orgId]/sites/components/SitesDataTable.tsx

@@ -23,7 +23,7 @@ import {
 import { Button } from "@app/components/ui/button";
 import { useState } from "react";
 import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "./DataTablePagination";
+import { DataTablePagination } from "../../../../components/DataTablePagination";
 import { Plus } from "lucide-react";
 
 interface DataTableProps<TData, TValue> {
@@ -32,7 +32,7 @@ interface DataTableProps<TData, TValue> {
     addSite?: () => void;
 }
 
-export function DataTable<TData, TValue>({
+export function SitesDataTable<TData, TValue>({
     addSite,
     columns,
     data,
@@ -59,7 +59,7 @@ export function DataTable<TData, TValue>({
         <div>
             <div className="flex items-center justify-between pb-4">
                 <Input
-                    placeholder="Search sites"
+                    placeholder="Search your sites"
                     value={
                         (table.getColumn("name")?.getFilterValue() as string) ??
                         ""
@@ -71,11 +71,13 @@ export function DataTable<TData, TValue>({
                     }
                     className="max-w-sm mr-2"
                 />
-                <Button onClick={() => {
-                    if (addSite) {
-                        addSite();
-                    }
-                }}>
+                <Button
+                    onClick={() => {
+                        if (addSite) {
+                            addSite();
+                        }
+                    }}
+                >
                     <Plus className="mr-2 h-4 w-4" /> Add Site
                 </Button>
             </div>

src/app/[orgId]/sites/components/SitesTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { DataTable } from "./DataTable";
+import { SitesDataTable } from "./SitesDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -99,7 +99,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const router = useRouter();
 
     return (
-        <DataTable
+        <SitesDataTable
             columns={columns}
             data={sites}
             addSite={() => {