Merge branch 'dev' into auth-providers

install/config/docker-compose.yml

@@ -8,8 +8,8 @@ services:
       - ./config:/app/config
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:3001/api/v1/"]
-      interval: "3s"
+      interval: "10s"
-      timeout: "3s"
+      timeout: "10s"
       retries: 15
 {{if .InstallGerbil}}
   gerbil:

package.json

@@ -97,6 +97,7 @@
     "devDependencies": {
         "@dotenvx/dotenvx": "1.32.0",
         "@esbuild-plugins/tsconfig-paths": "0.1.2",
+        "@tailwindcss/postcss": "^4.1.3",
         "@types/better-sqlite3": "7.6.12",
         "@types/cookie-parser": "1.4.8",
         "@types/cors": "2.8.17",
@@ -105,8 +106,8 @@
         "@types/js-yaml": "4.0.9",
         "@types/node": "^22",
         "@types/nodemailer": "6.4.17",
-        "@types/react": "19.0.2",
+        "@types/react": "19.1.1",
-        "@types/react-dom": "19.0.2",
+        "@types/react-dom": "19.1.2",
         "@types/semver": "7.5.8",
         "@types/swagger-ui-express": "^4.1.8",
         "@types/ws": "8.5.13",
@@ -116,7 +117,7 @@
         "esbuild-node-externals": "1.18.0",
         "postcss": "^8",
         "react-email": "4.0.6",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.1.3",
         "tsc-alias": "1.8.10",
         "tsx": "4.19.3",
         "typescript": "^5",

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
     plugins: {
-        tailwindcss: {},
+        '@tailwindcss/postcss': {},
     },
 };
 

src/app/[orgId]/page.tsx

@@ -1,4 +1,3 @@
-import ProfileIcon from "@app/components/ProfileIcon";
 import { verifySession } from "@app/lib/auth/verifySession";
 import UserProvider from "@app/providers/UserProvider";
 import { cache } from "react";
@@ -8,6 +7,8 @@ import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { redirect } from "next/navigation";
+import { Layout } from "@app/components/Layout";
+import { orgNavItems } from "../navigation";
 
 type OrgPageProps = {
     params: Promise<{ orgId: string }>;
@@ -20,6 +21,10 @@ export default async function OrgPage(props: OrgPageProps) {
     const getUser = cache(verifySession);
     const user = await getUser();
 
+    if (!user) {
+        redirect("/");
+    }
+
     let redirectToSettings = false;
     let overview: GetOrgOverviewResponse | undefined;
     try {
@@ -39,14 +44,11 @@ export default async function OrgPage(props: OrgPageProps) {
     }
 
     return (
-        <>
-            <div className="p-3">
-                {user && (
         <UserProvider user={user}>
-                        <ProfileIcon />
+            <Layout
-                    </UserProvider>
+                orgId={orgId}
-                )}
+                navItems={orgNavItems}
-
+            >
                 {overview && (
                     <div className="w-full max-w-4xl mx-auto md:mt-32 mt-4">
                         <OrganizationLandingCard
@@ -65,7 +67,7 @@ export default async function OrgPage(props: OrgPageProps) {
                         />
                     </div>
                 )}
-            </div>
+            </Layout>
-        </>
+        </UserProvider>
     );
 }

src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx

@@ -1,29 +1,21 @@
 "use client";
 
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { SidebarSettings } from "@app/components/SidebarSettings";
 
-type AccessPageHeaderAndNavProps = {
+interface AccessPageHeaderAndNavProps {
     children: React.ReactNode;
     hasInvitations: boolean;
-};
+}
 
 export default function AccessPageHeaderAndNav({
     children,
     hasInvitations
 }: AccessPageHeaderAndNavProps) {
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "Users",
-            href: `/{orgId}/settings/access/users`,
+            href: `/{orgId}/settings/access/users`
-            children: hasInvitations
-                ? [
-                      {
-                          title: "Invitations",
-                          href: `/{orgId}/settings/access/invitations`
-                      }
-                  ]
-                : []
         },
         {
             title: "Roles",
@@ -31,6 +23,13 @@ export default function AccessPageHeaderAndNav({
         }
     ];
 
+    if (hasInvitations) {
+        navItems.push({
+            title: "Invitations",
+            href: `/{orgId}/settings/access/invitations`
+        });
+    }
+
     return (
         <>
             <SettingsSectionTitle
@@ -38,9 +37,9 @@ export default function AccessPageHeaderAndNav({
                 description="Invite users and add them to roles to manage access to your organization"
             />
 
-            <SidebarSettings sidebarNavItems={sidebarNavItems}>
+            <HorizontalTabs items={navItems}>
                 {children}
-            </SidebarSettings>
+            </HorizontalTabs>
         </>
     );
 }

src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx

@@ -2,21 +2,8 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel
 } from "@tanstack/react-table";
-import {
+import { DataTable } from "@app/components/ui/data-table";
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { DataTablePagination } from "@app/components/DataTablePagination";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -27,70 +14,13 @@ export function InvitationsDataTable<TData, TValue>({
     columns,
     data
 }: DataTableProps<TData, TValue>) {
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        }
-    });
-
     return (
-        <div>
+        <DataTable
-            <TableContainer>
+            columns={columns}
-                <Table>
+            data={data}
-                    <TableHeader>
+            title="Invitations"
-                        {table.getHeaderGroups().map((headerGroup) => (
+            searchPlaceholder="Search invitations..."
-                            <TableRow key={headerGroup.id}>
+            searchColumn="email"
-                                {headerGroup.headers.map((header) => (
+        />
-                                    <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}>
-                                    {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 invitations found.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
     );
 }

src/app/[orgId]/settings/access/invitations/page.tsx

@@ -8,6 +8,7 @@ import OrgProvider from "@app/providers/OrgProvider";
 import UserProvider from "@app/providers/UserProvider";
 import { verifySession } from "@app/lib/auth/verifySession";
 import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 type InvitationsPageProps = {
     params: Promise<{ orgId: string }>;
@@ -72,13 +73,15 @@ export default async function InvitationsPage(props: InvitationsPageProps) {
 
     return (
         <>
-            <AccessPageHeaderAndNav hasInvitations={hasInvitations}>
+            <SettingsSectionTitle
+                title="Open Invitations"
+                description="Manage your invitations to other users"
+            />
             <UserProvider user={user!}>
                 <OrgProvider org={org}>
                     <InvitationsTable invitations={invitationRows} />
                 </OrgProvider>
             </UserProvider>
-            </AccessPageHeaderAndNav>
         </>
     );
 }

src/app/[orgId]/settings/access/roles/RolesDataTable.tsx

@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-import {
+import { DataTable } from "@app/components/ui/data-table";
-    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 { Plus, Search } from "lucide-react";
-import { DataTablePagination } from "@app/components/DataTablePagination";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addRole?: () => void;
+    createRole?: () => void;
 }
 
 export function RolesDataTable<TData, TValue>({
-    addRole,
     columns,
-    data
-}: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
     data,
-        columns,
+    createRole
-        getCoreRowModel: getCoreRowModel(),
+}: DataTableProps<TData, TValue>) {
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
+        <DataTable
-            <div className="flex items-center justify-between pb-4">
+            columns={columns}
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
+            data={data}
-                    <Input
+            title="Roles"
-                        placeholder="Search roles"
+            searchPlaceholder="Search roles..."
-                        value={globalFilter ?? ""}
+            searchColumn="name"
-                        onChange={(e) =>
+            onAdd={createRole}
-                            table.setGlobalFilter(String(e.target.value))
+            addButtonText="Add Role"
-                        }
-                        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 (addRole) {
-                            addRole();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Role
-                </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 roles. Create a role, then add users to
-                                    the it.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
     );
 }

src/app/[orgId]/settings/access/roles/RolesTable.tsx

@@ -131,7 +131,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
             <RolesDataTable
                 columns={columns}
                 data={roles}
-                addRole={() => {
+                createRole={() => {
                     setIsCreateModalOpen(true);
                 }}
             />

src/app/[orgId]/settings/access/roles/page.tsx

@@ -8,6 +8,7 @@ import { ListRolesResponse } from "@server/routers/role";
 import RolesTable, { RoleRow } from "./RolesTable";
 import { SidebarSettings } from "@app/components/SidebarSettings";
 import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 type RolesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -64,11 +65,13 @@ export default async function RolesPage(props: RolesPageProps) {
 
     return (
         <>
-            <AccessPageHeaderAndNav hasInvitations={hasInvitations}>
+            <SettingsSectionTitle
+                title="Manage Roles"
+                description="Configure roles to manage access to your organization"
+            />
             <OrgProvider org={org}>
                 <RolesTable roles={roleRows} />
             </OrgProvider>
-            </AccessPageHeaderAndNav>
         </>
     );
 }

src/app/[orgId]/settings/access/users/UsersDataTable.tsx

@@ -2,29 +2,8 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-import {
+import { DataTable } from "@app/components/ui/data-table";
-    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>[];
@@ -33,118 +12,19 @@ interface DataTableProps<TData, TValue> {
 }
 
 export function UsersDataTable<TData, TValue>({
-    inviteUser,
     columns,
-    data
-}: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
     data,
-        columns,
+    inviteUser
-        getCoreRowModel: getCoreRowModel(),
+}: DataTableProps<TData, TValue>) {
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
+        <DataTable
-            <div className="flex items-center justify-between pb-4">
+            columns={columns}
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
+            data={data}
-                    <Input
+            title="Users"
-                        placeholder="Search users"
+            searchPlaceholder="Search users..."
-                        value={globalFilter ?? ""}
+            searchColumn="email"
-                        onChange={(e) =>
+            onAdd={inviteUser}
-                            table.setGlobalFilter(String(e.target.value))
+            addButtonText="Invite User"
-                        }
-                        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 (inviteUser) {
-                            inviteUser();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Invite User
-                </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 Users. Invite one to share access to
-                                    resources.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
     );
 }

src/app/[orgId]/settings/access/users/[userId]/layout.tsx

@@ -2,19 +2,19 @@ import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
 import { GetOrgUserResponse } from "@server/routers/user";
 import OrgUserProvider from "@app/providers/OrgUserProvider";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import {
     Breadcrumb,
     BreadcrumbItem,
-    BreadcrumbLink,
     BreadcrumbList,
     BreadcrumbPage,
     BreadcrumbSeparator
-} from "@/components/ui/breadcrumb";
+} from "@app/components/ui/breadcrumb";
 import Link from "next/link";
 import { cache } from "react";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 interface UserLayoutProps {
     children: React.ReactNode;
@@ -40,7 +40,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "Access Controls",
             href: "/{orgId}/settings/access/users/{userId}/access-controls"
@@ -49,33 +49,14 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
 
     return (
         <>
+            <SettingsSectionTitle
+                title={`${user?.email}`}
+                description="Manage the settings on this user"
+            />
             <OrgUserProvider orgUser={user}>
-                <div className="mb-4">
+                <HorizontalTabs items={navItems}>
-                    <Breadcrumb>
-                        <BreadcrumbList>
-                            <BreadcrumbItem>
-                                <Link href="../../">Users</Link>
-                            </BreadcrumbItem>
-                            <BreadcrumbSeparator />
-                            <BreadcrumbItem>
-                                <BreadcrumbPage>{user.email}</BreadcrumbPage>
-                            </BreadcrumbItem>
-                        </BreadcrumbList>
-                    </Breadcrumb>
-                </div>
-
-                <div className="space-y-0.5 mb-6">
-                    <h2 className="text-2xl font-bold tracking-tight">
-                        User {user?.email}
-                    </h2>
-                    <p className="text-muted-foreground">Manage user</p>
-                </div>
-
-                <SidebarSettings
-                    sidebarNavItems={sidebarNavItems}
-                >
                     {children}
-                </SidebarSettings>
+                </HorizontalTabs>
             </OrgUserProvider>
         </>
     );

src/app/[orgId]/settings/access/users/page.tsx

@@ -9,6 +9,7 @@ import OrgProvider from "@app/providers/OrgProvider";
 import UserProvider from "@app/providers/UserProvider";
 import { verifySession } from "@app/lib/auth/verifySession";
 import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 type UsersPageProps = {
     params: Promise<{ orgId: string }>;
@@ -78,13 +79,15 @@ export default async function UsersPage(props: UsersPageProps) {
 
     return (
         <>
-            <AccessPageHeaderAndNav hasInvitations={hasInvitations}>
+            <SettingsSectionTitle
+                title="Manage Users"
+                description="Invite users and add them to roles to manage access to your organization"
+            />
             <UserProvider user={user!}>
                 <OrgProvider org={org}>
                     <UsersTable users={userRows} />
                 </OrgProvider>
             </UserProvider>
-            </AccessPageHeaderAndNav>
         </>
     );
 }

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

@@ -1,7 +1,7 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { verifySession } from "@app/lib/auth/verifySession";
 import OrgProvider from "@app/providers/OrgProvider";
 import OrgUserProvider from "@app/providers/OrgUserProvider";
@@ -57,7 +57,7 @@ export default async function GeneralSettingsPage({
         redirect(`/${orgId}`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: `/{orgId}/settings/general`,
@@ -73,9 +73,9 @@ export default async function GeneralSettingsPage({
                         description="Configure your organization's general settings"
                     />
 
-                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                    <HorizontalTabs items={navItems}>
                         {children}
-                    </SidebarSettings>
+                    </HorizontalTabs>
                 </OrgUserProvider>
             </OrgProvider>
         </>

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

@@ -1,5 +1,4 @@
 import { Metadata } from "next";
-import { TopbarNav } from "@app/components/TopbarNav";
 import {
     Cog,
     Combine,
@@ -8,7 +7,6 @@ import {
     Users,
     Waypoints
 } from "lucide-react";
-import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { internal } from "@app/lib/api";
@@ -18,14 +16,9 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { cache } from "react";
 import { GetOrgUserResponse } from "@server/routers/user";
 import UserProvider from "@app/providers/UserProvider";
-import {
+import { Layout } from "@app/components/Layout";
-    Breadcrumb,
+import { SidebarNavItem, SidebarNavProps } from "@app/components/SidebarNav";
-    BreadcrumbItem,
+import { orgNavItems } from "@app/app/navigation";
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator
-} from "@app/components/ui/breadcrumb";
-import Link from "next/link";
 
 export const dynamic = "force-dynamic";
 
@@ -34,34 +27,6 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const topNavItems = [
-    {
-        title: "Sites",
-        href: "/{orgId}/settings/sites",
-        icon: <Combine className="h-4 w-4" />
-    },
-    {
-        title: "Resources",
-        href: "/{orgId}/settings/resources",
-        icon: <Waypoints className="h-4 w-4" />
-    },
-    {
-        title: "Users & Roles",
-        href: "/{orgId}/settings/access",
-        icon: <Users className="h-4 w-4" />
-    },
-    {
-        title: "Shareable Links",
-        href: "/{orgId}/settings/share-links",
-        icon: <LinkIcon className="h-4 w-4" />
-    },
-    {
-        title: "General",
-        href: "/{orgId}/settings/general",
-        icon: <Settings className="h-4 w-4" />
-    }
-];
-
 interface SettingsLayoutProps {
     children: React.ReactNode;
     params: Promise<{ orgId: string }>;
@@ -109,21 +74,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     } catch (e) {}
 
     return (
-        <>
-            <div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
-                <div className="container mx-auto flex flex-col content-between">
-                    <div className="my-4 px-3 md:px-0">
         <UserProvider user={user}>
-                            <Header orgId={params.orgId} orgs={orgs} />
+            <Layout orgId={params.orgId} orgs={orgs} navItems={orgNavItems}>
-                        </UserProvider>
-                    </div>
-                    <TopbarNav items={topNavItems} orgId={params.orgId} />
-                </div>
-            </div>
-
-            <div className="container mx-auto sm:px-0 px-3 pt-[155px]">
                 {children}
-            </div>
+            </Layout>
-        </>
+        </UserProvider>
     );
 }

src/app/[orgId]/settings/resources/CreateResourceForm.tsx

@@ -735,7 +735,7 @@ export default function CreateResourceForm({
                                 {showSnippets && (
                                     <div>
                                         <div className="flex items-start space-x-4 mb-6 last:mb-0">
-                                            <div className="flex-grow">
+                                            <div className="grow">
                                                 <h3 className="text-lg font-semibold mb-3">
                                                     Traefik: Add Entrypoints
                                                 </h3>
@@ -749,7 +749,7 @@ export default function CreateResourceForm({
                                         </div>
 
                                         <div className="flex items-start space-x-4 mb-6 last:mb-0">
-                                            <div className="flex-grow">
+                                            <div className="grow">
                                                 <h3 className="text-lg font-semibold mb-3">
                                                     Gerbil: Expose Ports in
                                                     Docker Compose

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

@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
+import { DataTable } from "@app/components/ui/data-table";
 
-import {
+interface DataTableProps<TData, TValue> {
-    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 ResourcesDataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addResource?: () => void;
+    createResource?: () => void;
 }
 
 export function ResourcesDataTable<TData, TValue>({
-    addResource,
     columns,
-    data
-}: ResourcesDataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
     data,
-        columns,
+    createResource
-        getCoreRowModel: getCoreRowModel(),
+}: DataTableProps<TData, TValue>) {
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
+        <DataTable
-            <div className="flex items-center justify-between pb-4">
+            columns={columns}
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
+            data={data}
-                    <Input
+            title="Resources"
-                        placeholder="Search resources"
+            searchPlaceholder="Search resources..."
-                        value={globalFilter ?? ""}
+            searchColumn="name"
-                        onChange={(e) =>
+            onAdd={createResource}
-                            table.setGlobalFilter(String(e.target.value))
+            addButtonText="Add Resource"
-                        }
-                        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 (addResource) {
-                            addResource();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Resource
-                </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 resources. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
     );
 }

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

@@ -327,7 +327,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
             <ResourcesDataTable
                 columns={columns}
                 data={resources}
-                addResource={() => {
+                createResource={() => {
                     setIsCreateModalOpen(true);
                 }}
             />

src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx

@@ -569,7 +569,7 @@ export default function ReverseProxyTargets(props: {
                                 <Button
                                     type="submit"
                                     variant="outlinePrimary"
-                                    className="mt-8"
+                                    className="mt-6"
                                 >
                                     Add Target
                                 </Button>

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

@@ -7,7 +7,7 @@ import {
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
@@ -80,48 +80,30 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         redirect(`/${params.orgId}/settings/resources`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: `/{orgId}/settings/resources/{resourceId}/general`
-            // icon: <Settings className="w-4 h-4" />,
         },
         {
             title: "Connectivity",
             href: `/{orgId}/settings/resources/{resourceId}/connectivity`
-            // icon: <Cloud className="w-4 h-4" />,
         }
     ];
 
     if (resource.http) {
-        sidebarNavItems.push({
+        navItems.push({
             title: "Authentication",
             href: `/{orgId}/settings/resources/{resourceId}/authentication`
-            // icon: <Shield className="w-4 h-4" />,
         });
-        sidebarNavItems.push({
+        navItems.push({
             title: "Rules",
             href: `/{orgId}/settings/resources/{resourceId}/rules`
-            // icon: <Shield className="w-4 h-4" />,
         });
     }
 
     return (
         <>
-            <div className="mb-4">
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <Link href="../">Resources</Link>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                        <BreadcrumbItem>
-                            <BreadcrumbPage>{resource.name}</BreadcrumbPage>
-                        </BreadcrumbItem>
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </div>
-
             <SettingsSectionTitle
                 title={`${resource?.name} Settings`}
                 description="Configure the settings on your resource"
@@ -129,10 +111,12 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
 
             <OrgProvider org={org}>
                 <ResourceProvider resource={resource} authInfo={authInfo}>
-                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                    <div className="space-y-6">
                         <ResourceInfoBox />
+                        <HorizontalTabs items={navItems}>
                             {children}
-                    </SidebarSettings>
+                        </HorizontalTabs>
+                    </div>
                 </ResourceProvider>
             </OrgProvider>
         </>

src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx

@@ -693,7 +693,7 @@ export default function ResourceRules(props: {
                                     control={addRuleForm.control}
                                     name="value"
                                     render={({ field }) => (
-                                        <FormItem>
+                                        <FormItem className="space-y-0 mb-2">
                                             <InfoPopup
                                                 text="Value"
                                                 info={
@@ -714,6 +714,7 @@ export default function ResourceRules(props: {
                                 <Button
                                     type="submit"
                                     variant="outlinePrimary"
+                                    className="mb-2"
                                     disabled={!rulesEnabled}
                                 >
                                     Add Rule

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

@@ -70,7 +70,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
 
     return (
         <>
-            <ResourcesSplashCard />
+            {/* <ResourcesSplashCard /> */}
 
             <SettingsSectionTitle
                 title="Manage Resources"

src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx

@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
+import { DataTable } from "@app/components/ui/data-table";
 
-import {
+interface DataTableProps<TData, TValue> {
-    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 ShareLinksDataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addShareLink?: () => void;
+    createShareLink?: () => void;
 }
 
 export function ShareLinksDataTable<TData, TValue>({
-    addShareLink,
     columns,
-    data
-}: ShareLinksDataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
     data,
-        columns,
+    createShareLink
-        getCoreRowModel: getCoreRowModel(),
+}: DataTableProps<TData, TValue>) {
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
+        <DataTable
-            <div className="flex items-center justify-between pb-4">
+            columns={columns}
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
+            data={data}
-                    <Input
+            title="Share Links"
-                        placeholder="Search links"
+            searchPlaceholder="Search share links..."
-                        value={globalFilter ?? ""}
+            searchColumn="name"
-                        onChange={(e) =>
+            onAdd={createShareLink}
-                            table.setGlobalFilter(String(e.target.value))
+            addButtonText="Create Share Link"
-                        }
-                        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 (addShareLink) {
-                            addShareLink();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Create Share Link
-                </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 links. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
     );
 }

src/app/[orgId]/settings/share-links/ShareLinksTable.tsx

@@ -306,7 +306,7 @@ export default function ShareLinksTable({
             <ShareLinksDataTable
                 columns={columns}
                 data={rows}
-                addShareLink={() => {
+                createShareLink={() => {
                     setIsCreateModalOpen(true);
                 }}
             />

src/app/[orgId]/settings/share-links/page.tsx

@@ -53,7 +53,7 @@ export default async function ShareLinksPage(props: ShareLinksPageProps) {
 
     return (
         <>
-            <ShareableLinksSplash />
+            {/* <ShareableLinksSplash /> */}
 
             <SettingsSectionTitle
                 title="Manage Share Links"

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

@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-
+import { DataTable } from "@app/components/ui/data-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[];
-    addSite?: () => void;
+    createSite?: () => void;
 }
 
 export function SitesDataTable<TData, TValue>({
-    addSite,
     columns,
-    data
-}: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
     data,
-        columns,
+    createSite
-        getCoreRowModel: getCoreRowModel(),
+}: DataTableProps<TData, TValue>) {
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
+        <DataTable
-            <div className="flex items-center justify-between pb-4">
+            columns={columns}
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
+            data={data}
-                    <Input
+            title="Sites"
-                        placeholder="Search sites"
+            searchPlaceholder="Search sites..."
-                        value={globalFilter ?? ""}
+            searchColumn="name"
-                        onChange={(e) =>
+            onAdd={createSite}
-                            table.setGlobalFilter(String(e.target.value))
+            addButtonText="Add Site"
-                        }
-                        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 (addSite) {
-                            addSite();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Site
-                </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 sites. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
     );
 }

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

@@ -47,7 +47,6 @@ type SitesTableProps = {
 export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const router = useRouter();
 
-    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
     const [rows, setRows] = useState<SiteRow[]>(sites);
@@ -279,29 +278,8 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         }
     ];
 
-    async function test() {
-        const res = await api
-            .post("/auth/org/home-lab/idp/1/oidc/generate-url")
-            .then((res) => {
-                if (res.data.data.redirectUrl) {
-                    window.location.href = res.data.data.redirectUrl;
-                }
-            });
-    }
-
     return (
         <>
-            <Button onClick={async () => await test()}>Test</Button>
-
-            <CreateSiteFormModal
-                open={isCreateModalOpen}
-                setOpen={setIsCreateModalOpen}
-                onCreate={(val) => {
-                    setRows([val, ...rows]);
-                }}
-                orgId={orgId}
-            />
-
             {selectedSite && (
                 <ConfirmDeleteDialog
                     open={isDeleteModalOpen}
@@ -342,9 +320,9 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
             <SitesDataTable
                 columns={columns}
                 data={rows}
-                addSite={() => {
+                createSite={() =>
-                    router.push(`/${orgId}/settings/sites/create`);
+                    router.push(`/${orgId}/settings/sites/create`)
-                }}
+                }
             />
         </>
     );

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

@@ -4,7 +4,7 @@ import { GetSiteResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
@@ -38,7 +38,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: "/{orgId}/settings/sites/{niceId}/general"
@@ -47,30 +47,16 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
     return (
         <>
-            <div className="mb-4 flex-row">
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <Link href="../">Sites</Link>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                        <BreadcrumbItem>
-                            <BreadcrumbPage>{site.name}</BreadcrumbPage>
-                        </BreadcrumbItem>
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </div>
-
             <SettingsSectionTitle
                 title={`${site?.name} Settings`}
                 description="Configure the settings on your site"
             />
 
             <SiteProvider site={site}>
-                <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                <div className="space-y-6">
                     <SiteInfoCard />
-                    {children}
+                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
-                </SidebarSettings>
+                </div>
             </SiteProvider>
         </>
     );

src/app/[orgId]/settings/sites/create/page.tsx

@@ -502,20 +502,6 @@ WantedBy=default.target`
 
     return (
         <>
-            <div className="mb-4 flex-row">
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <Link href="../">Sites</Link>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                        <BreadcrumbItem>
-                            <BreadcrumbPage>Create Site</BreadcrumbPage>
-                        </BreadcrumbItem>
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </div>
-
             <div className="flex justify-between">
                 <HeaderTitle
                     title="Create Site"

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

@@ -51,7 +51,7 @@ export default async function SitesPage(props: SitesPageProps) {
 
     return (
         <>
-            <SitesSplashCard />
+            {/* <SitesSplashCard /> */}
 
             <SettingsSectionTitle
                 title="Manage Sites"

src/app/admin/layout.tsx

@@ -1,7 +1,5 @@
 import { Metadata } from "next";
-import { TopbarNav } from "@app/components/TopbarNav";
 import { Users } from "lucide-react";
-import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { cache } from "react";
@@ -10,6 +8,8 @@ import { ListOrgsResponse } from "@server/routers/org";
 import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { authCookieHeader } from "@app/lib/api/cookies";
+import { Layout } from "@app/components/Layout";
+import { adminNavItems } from "../navigation";
 
 export const dynamic = "force-dynamic";
 
@@ -18,19 +18,11 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const topNavItems = [
-    {
-        title: "All Users",
-        href: "/admin/users",
-        icon: <Users className="h-4 w-4" />
-    }
-];
-
 interface LayoutProps {
     children: React.ReactNode;
 }
 
-export default async function SettingsLayout(props: LayoutProps) {
+export default async function AdminLayout(props: LayoutProps) {
     const getUser = cache(verifySession);
     const user = await getUser();
 
@@ -51,21 +43,10 @@ export default async function SettingsLayout(props: LayoutProps) {
     } catch (e) {}
 
     return (
-        <>
-            <div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
-                <div className="container mx-auto flex flex-col content-between">
-                    <div className="my-4 px-3 md:px-0">
         <UserProvider user={user}>
-                            <Header orgId={""} orgs={orgs} />
+            <Layout orgs={orgs} navItems={adminNavItems}>
-                        </UserProvider>
-                    </div>
-                    <TopbarNav items={topNavItems} />
-                </div>
-            </div>
-
-            <div className="container mx-auto sm:px-0 px-3 pt-[155px]">
                 {props.children}
-            </div>
+            </Layout>
-        </>
+        </UserProvider>
     );
 }

src/app/admin/users/AdminUsersDataTable.tsx

@@ -2,29 +2,8 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-
+import { DataTable } from "@app/components/ui/data-table";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Search } from "lucide-react";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -35,107 +14,13 @@ export function UsersDataTable<TData, TValue>({
     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>
+        <DataTable
-            <div className="flex items-center justify-between pb-4">
+            columns={columns}
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
+            data={data}
-                    <Input
+            title="Server Users"
-                        placeholder="Search server users"
+            searchPlaceholder="Search server users..."
-                        value={
+            searchColumn="email"
-                            (table
-                                .getColumn("email")
-                                ?.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>
-            </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"
-                                >
-                                    This server has no users.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
     );
 }

src/app/auth/layout.tsx

@@ -18,7 +18,7 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
     const user = await getUser();
 
     return (
-        <>
+        <div className="h-full flex flex-col">
             {user && (
                 <UserProvider user={user}>
                     <div className="p-3">
@@ -27,9 +27,11 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
                 </UserProvider>
             )}
 
-            <div className="w-full max-w-md mx-auto p-3 md:mt-32">
+            <div className="flex-1 flex items-center justify-center">
+                <div className="w-full max-w-md p-3">
                     {children}
                 </div>
-        </>
+            </div>
+        </div>
     );
 }

src/app/components/SupporterMessage.tsx

@@ -30,7 +30,7 @@ export default function SupporterMessage({ tier }: { tier: string }) {
                 Pangolin
             </span>
             <Star className="w-3 h-3"/>
-            <div className="absolute left-1/2 transform -translate-x-1/2 -top-10 hidden group-hover:block  text-primary text-sm rounded-md border-2 shadow-md px-4 py-2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
+            <div className="absolute left-1/2 transform -translate-x-1/2 -top-10 hidden group-hover:block  text-primary text-sm rounded-md border shadow-md px-4 py-2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
                 Thank you for supporting Pangolin as a {tier}!
             </div>
         </div>

src/app/globals.css

@@ -1,61 +1,110 @@
-@tailwind base;
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap");
-@tailwind components;
+@import 'tailwindcss';
-@tailwind utilities;
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: hsl(0 0% 98%);
+  --foreground: hsl(20 0% 10%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(20 0% 10%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(20 0% 10%);
+  --primary: hsl(24.6 95% 53.1%);
+  --primary-foreground: hsl(60 9.1% 97.8%);
+  --secondary: hsl(60 4.8% 95.9%);
+  --secondary-foreground: hsl(24 9.8% 10%);
+  --muted: hsl(60 4.8% 85%);
+  --muted-foreground: hsl(25 5.3% 44.7%);
+  --accent: hsl(60 4.8% 90%);
+  --accent-foreground: hsl(24 9.8% 10%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(60 9.1% 97.8%);
+  --border: hsl(20 5.9% 90%);
+  --input: hsl(20 5.9% 75%);
+  --ring: hsl(24.6 95% 53.1%);
+  --radius: 0.50rem;
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+}
+
+.dark {
+  --background: hsl(20 0% 8%);
+  --foreground: hsl(60 9.1% 97.8%);
+  --card: hsl(20 0% 10%);
+  --card-foreground: hsl(60 9.1% 97.8%);
+  --popover: hsl(20 0% 10%);
+  --popover-foreground: hsl(60 9.1% 97.8%);
+  --primary: hsl(20.5 90.2% 48.2%);
+  --primary-foreground: hsl(60 9.1% 97.8%);
+  --secondary: hsl(12 6.5% 15%);
+  --secondary-foreground: hsl(60 9.1% 97.8%);
+  --muted: hsl(12 6.5% 25%);
+  --muted-foreground: hsl(24 5.4% 63.9%);
+  --accent: hsl(12 2.5% 15%);
+  --accent-foreground: hsl(60 9.1% 97.8%);
+  --destructive: hsl(0 72.2% 50.6%);
+  --destructive-foreground: hsl(60 9.1% 97.8%);
+  --border: hsl(12 6.5% 15%);
+  --input: hsl(12 6.5% 35%);
+  --ring: hsl(20.5 90.2% 48.2%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
 
 @layer base {
-    :root {
+  *,
-        --background: 0 0% 100%;
+  ::after,
-        --foreground: 20 0% 10%;
+  ::before,
-        --card: 0 0% 100%;
+  ::backdrop,
-        --card-foreground: 20 0% 10%;
+  ::file-selector-button {
-        --popover: 0 0% 100%;
+    border-color: var(--color-gray-200, currentcolor);
-        --popover-foreground: 20 0% 10%;
-        --primary: 24.6 95% 53.1%;
-        --primary-foreground: 60 9.1% 97.8%;
-        --secondary: 60 4.8% 95.9%;
-        --secondary-foreground: 24 9.8% 10%;
-        --muted: 60 4.8% 85%;
-        --muted-foreground: 25 5.3% 44.7%;
-        --accent: 60 4.8% 90%;
-        --accent-foreground: 24 9.8% 10%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 60 9.1% 97.8%;
-        --border: 20 5.9% 80%;
-        --input: 20 5.9% 75%;
-        --ring: 24.6 95% 53.1%;
-        --radius: 0.75rem;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-    }
-
-    .dark {
-        --background: 20 0% 10%;
-        --foreground: 60 9.1% 97.8%;
-        --card: 20 0% 10%;
-        --card-foreground: 60 9.1% 97.8%;
-        --popover: 20 0% 10%;
-        --popover-foreground: 60 9.1% 97.8%;
-        --primary: 20.5 90.2% 48.2%;
-        --primary-foreground: 60 9.1% 97.8%;
-        --secondary: 12 6.5% 15%;
-        --secondary-foreground: 60 9.1% 97.8%;
-        --muted: 12 6.5% 25%;
-        --muted-foreground: 24 5.4% 63.9%;
-        --accent: 12 2.5% 15%;
-        --accent-foreground: 60 9.1% 97.8%;
-        --destructive: 0 72.2% 50.6%;
-        --destructive-foreground: 60 9.1% 97.8%;
-        --border: 12 6.5% 30%;
-        --input: 12 6.5% 35%;
-        --ring: 20.5 90.2% 48.2%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
   }
 }
 

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Figtree, Inter } from "next/font/google";
+import { Figtree, Inter, Red_Hat_Display, Red_Hat_Mono, Red_Hat_Text, Space_Grotesk } from "next/font/google";
 import { Toaster } from "@/components/ui/toaster";
 import { ThemeProvider } from "@app/providers/ThemeProvider";
 import EnvProvider from "@app/providers/EnvProvider";
@@ -41,11 +41,9 @@ export default async function RootLayout({
     supporterData.visible = res.data.data.visible;
     supporterData.tier = res.data.data.tier;
 
-    const version = env.app.version;
-
     return (
         <html suppressHydrationWarning>
-            <body className={`${font.className} min-h-screen flex flex-col`}>
+            <body className={`${font.className} h-screen overflow-hidden`}>
                 <ThemeProvider
                     attribute="class"
                     defaultTheme="system"
@@ -55,72 +53,11 @@ export default async function RootLayout({
                     <EnvProvider env={pullEnv()}>
                         <SupportStatusProvider supporterStatus={supporterData}>
                             {/* Main content */}
-                            <div className="flex-grow pb-3 md:pb-0">
+                            <div className="h-full flex flex-col">
+                                <div className="flex-1 overflow-auto">
                                     {children}
                                 </div>
-
-                            {/* Footer */}
-                            <footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
-                                <div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-sm text-neutral-400 dark:text-neutral-600">
-                                    {supporterData?.tier ? (
-                                        <SupporterMessage
-                                            tier={supporterData.tier}
-                                        />
-                                    ) : (
-                                        <div className="flex items-center space-x-2 whitespace-nowrap">
-                                            <span>Pangolin</span>
                             </div>
-                                    )}
-                                    <Separator orientation="vertical" />
-                                    <a
-                                        href="https://fossorial.io/"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        aria-label="Built by Fossorial"
-                                        className="flex items-center space-x-3 whitespace-nowrap"
-                                    >
-                                        <span>Fossorial</span>
-                                        <ExternalLink className="w-3 h-3" />
-                                    </a>
-                                    <Separator orientation="vertical" />
-                                    <a
-                                        href="https://github.com/fosrl/pangolin"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        aria-label="GitHub"
-                                        className="flex items-center space-x-3 whitespace-nowrap"
-                                    >
-                                        <span>Open Source</span>
-                                        <svg
-                                            xmlns="http://www.w3.org/2000/svg"
-                                            viewBox="0 0 24 24"
-                                            fill="currentColor"
-                                            className="w-3 h-3"
-                                        >
-                                            <path d="M12 0C5.37 0 0 5.373 0 12c0 5.303 3.438 9.8 8.207 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.385-1.333-1.755-1.333-1.755-1.09-.744.082-.73.082-.73 1.205.085 1.84 1.24 1.84 1.24 1.07 1.835 2.807 1.305 3.492.997.107-.775.42-1.305.763-1.605-2.665-.305-5.467-1.335-5.467-5.93 0-1.31.468-2.382 1.236-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.52 11.52 0 013.006-.403c1.02.005 2.045.137 3.006.403 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.242 2.873.12 3.176.77.838 1.235 1.91 1.235 3.22 0 4.605-2.805 5.623-5.475 5.92.43.37.814 1.1.814 2.22v3.293c0 .32.217.693.825.576C20.565 21.795 24 17.298 24 12 24 5.373 18.627 0 12 0z" />
-                                        </svg>
-                                    </a>
-                                    <Separator orientation="vertical" />
-                                    <a
-                                        href="https://docs.fossorial.io/Pangolin/overview"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        aria-label="Documentation"
-                                        className="flex items-center space-x-3 whitespace-nowrap"
-                                    >
-                                        <span>Documentation</span>
-                                        <BookOpenText className="w-3 h-3" />
-                                    </a>
-                                    {version && (
-                                        <>
-                                            <Separator orientation="vertical" />
-                                            <div className="whitespace-nowrap">
-                                                v{version}
-                                            </div>
-                                        </>
-                                    )}
-                                </div>
-                            </footer>
                         </SupportStatusProvider>
                     </EnvProvider>
                     <Toaster />

src/app/navigation.tsx

@@ -0,0 +1,64 @@
+import { SidebarNavItem } from "@app/components/SidebarNav";
+import {
+    Home,
+    Settings,
+    Users,
+    Link as LinkIcon,
+    Waypoints,
+    Combine
+} from "lucide-react";
+
+export const rootNavItems: SidebarNavItem[] = [
+    {
+        title: "Home",
+        href: "/"
+        // icon: <Home className="h-4 w-4" />
+    }
+];
+
+export const orgNavItems: SidebarNavItem[] = [
+    {
+        title: "Sites",
+        href: "/{orgId}/settings/sites"
+        // icon: <Combine className="h-4 w-4" />
+    },
+    {
+        title: "Resources",
+        href: "/{orgId}/settings/resources"
+        // icon: <Waypoints className="h-4 w-4" />
+    },
+    {
+        title: "Access Control",
+        href: "/{orgId}/settings/access",
+        // icon: <Users className="h-4 w-4" />,
+        autoExpand: true,
+        children: [
+            {
+                title: "Users",
+                href: "/{orgId}/settings/access/users"
+            },
+            {
+                title: "Roles",
+                href: "/{orgId}/settings/access/roles"
+            }
+        ]
+    },
+    {
+        title: "Shareable Links",
+        href: "/{orgId}/settings/share-links"
+        // icon: <LinkIcon className="h-4 w-4" />
+    },
+    {
+        title: "Settings",
+        href: "/{orgId}/settings/general"
+        // icon: <Settings className="h-4 w-4" />
+    }
+];
+
+export const adminNavItems: SidebarNavItem[] = [
+    {
+        title: "All Users",
+        href: "/admin/users"
+        // icon: <Users className="h-4 w-4" />
+    }
+];

src/app/page.tsx

@@ -1,17 +1,16 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import ProfileIcon from "@app/components/ProfileIcon";
 import { verifySession } from "@app/lib/auth/verifySession";
 import UserProvider from "@app/providers/UserProvider";
 import { ListOrgsResponse } from "@server/routers/org";
 import { AxiosResponse } from "axios";
-import { ArrowUpRight } from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { cache } from "react";
 import OrganizationLanding from "./components/OrganizationLanding";
 import { pullEnv } from "@app/lib/pullEnv";
 import { cleanRedirect } from "@app/lib/cleanRedirect";
+import { Layout } from "@app/components/Layout";
+import { rootNavItems } from "./navigation";
 
 export const dynamic = "force-dynamic";
 
@@ -71,16 +70,12 @@ export default async function Page(props: {
     }
 
     return (
-        <>
-            <div className="p-3">
-                {user && (
         <UserProvider user={user}>
-                        <div>
+            <Layout
-                            <ProfileIcon />
+                orgs={orgs}
-                        </div>
+                navItems={rootNavItems}
-                    </UserProvider>
+                showBreadcrumbs={false}
-                )}
+            >
-
                 <div className="w-full max-w-md mx-auto md:mt-32 mt-4">
                     <OrganizationLanding
                         disableCreateOrg={env.flags.disableUserCreateOrg && !user.serverAdmin}
@@ -90,7 +85,7 @@ export default async function Page(props: {
                         }))}
                     />
                 </div>
-            </div>
+            </Layout>
-        </>
+        </UserProvider>
     );
 }

src/app/setup/layout.tsx

@@ -1,3 +1,4 @@
+import { Layout } from "@app/components/Layout";
 import ProfileIcon from "@app/components/ProfileIcon";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { pullEnv } from "@app/lib/pullEnv";
@@ -5,6 +6,7 @@ import UserProvider from "@app/providers/UserProvider";
 import { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { cache } from "react";
+import { rootNavItems } from "../navigation";
 
 export const metadata: Metadata = {
     title: `Setup - Pangolin`,
@@ -27,27 +29,19 @@ export default async function SetupLayout({
         redirect("/?redirect=/setup");
     }
 
-    if (
+    if (!(!env.flags.disableUserCreateOrg || user.serverAdmin)) {
-        !(!env.flags.disableUserCreateOrg || user.serverAdmin)
-    ) {
         redirect("/");
     }
 
     return (
         <>
-            <div className="p-3">
-                {user && (
             <UserProvider user={user}>
-                        <div>
+                <Layout navItems={rootNavItems} showBreadcrumbs={false}>
-                            <ProfileIcon />
-                        </div>
-                    </UserProvider>
-                )}
-
                     <div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
                         {children}
                     </div>
-            </div>
+                </Layout>
+            </UserProvider>
         </>
     );
 }

src/components/Breadcrumbs.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@app/lib/cn";
+
+interface BreadcrumbItem {
+    label: string;
+    href: string;
+}
+
+export function Breadcrumbs() {
+    const pathname = usePathname();
+    const segments = pathname.split("/").filter(Boolean);
+
+    const breadcrumbs: BreadcrumbItem[] = segments.map((segment, index) => {
+        const href = `/${segments.slice(0, index + 1).join("/")}`;
+        let label = segment;
+
+        // Format labels
+        if (segment === "settings") {
+            label = "Settings";
+        } else if (segment === "sites") {
+            label = "Sites";
+        } else if (segment === "resources") {
+            label = "Resources";
+        } else if (segment === "access") {
+            label = "Access Control";
+        } else if (segment === "general") {
+            label = "General";
+        } else if (segment === "share-links") {
+            label = "Shareable Links";
+        } else if (segment === "users") {
+            label = "Users";
+        } else if (segment === "roles") {
+            label = "Roles";
+        } else if (segment === "invitations") {
+            label = "Invitations";
+        } else if (segment === "connectivity") {
+            label = "Connectivity";
+        } else if (segment === "authentication") {
+            label = "Authentication";
+        }
+
+        return { label, href };
+    });
+
+    return (
+        <div className="border-b px-4 py-2 overflow-x-auto scrollbar-hide bg-card">
+            <nav className="flex items-center space-x-1 text-sm text-muted-foreground whitespace-nowrap">
+                {breadcrumbs.map((crumb, index) => (
+                    <div key={crumb.href} className="flex items-center whitespace-nowrap">
+                        {index !== 0 && <ChevronRight className="h-4 w-4" />}
+                        <Link
+                            href={crumb.href}
+                            className={cn(
+                                "ml-1 hover:text-foreground whitespace-nowrap",
+                                index === breadcrumbs.length - 1 &&
+                                    "text-foreground font-medium"
+                            )}
+                        >
+                            {crumb.label}
+                        </Link>
+                    </div>
+                ))}
+            </nav>
+        </div>
+    );
+}

src/components/CopyTextBox.tsx

@@ -28,7 +28,7 @@ export default function CopyTextBox({
 
     return (
         <div
-            className={`relative w-full border-2 rounded-md ${!outline ? "bg-muted" : "bg-card"}`}
+            className={`relative w-full border rounded-md ${!outline ? "bg-muted" : "bg-card"}`}
         >
             <pre
                 ref={textRef}

src/components/Header.tsx

@@ -1,160 +1,29 @@
 "use client";
 
-import { Button } from "@app/components/ui/button";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator
-} from "@app/components/ui/command";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "@app/components/ui/popover";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { cn } from "@app/lib/cn";
-import { ListOrgsResponse } from "@server/routers/org";
-import { Check, ChevronsUpDown, Plus } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useState } from "react";
+import Image from "next/image";
-import { useUserContext } from "@app/hooks/useUserContext";
-import ProfileIcon from "./ProfileIcon";
-import SupporterStatus from "./SupporterStatus";
 
-type HeaderProps = {
+interface HeaderProps {
     orgId?: string;
-    orgs?: ListOrgsResponse["orgs"];
+    orgs?: any;
-};
+}
 
 export function Header({ orgId, orgs }: HeaderProps) {
-    const { user, updateUser } = useUserContext();
-
-    const [open, setOpen] = useState(false);
-
-    const router = useRouter();
-
     const { env } = useEnvContext();
 
     return (
-        <>
-            <div className="flex items-center justify-between">
-                <ProfileIcon />
-
-                <div className="flex items-center">
-                    <div className="hidden md:block">
-                        <div className="flex items-center gap-4 mr-4">
-                            <Link
-                                href="https://docs.fossorial.io/Pangolin/overview"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-muted-foreground hover:text-foreground"
-                            >
-                                Documentation
-                            </Link>
-                            <a
-                                href="mailto:support@fossorial.io"
-                                className="text-muted-foreground hover:text-foreground"
-                            >
-                                Support
-                            </a>
-                        </div>
-                    </div>
-
-                    {orgs && (
-                        <Popover open={open} onOpenChange={setOpen}>
-                            <PopoverTrigger asChild>
-                                <Button
-                                    variant="outline"
-                                    size="lg"
-                                    role="combobox"
-                                    aria-expanded={open}
-                                    className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral hover:bg-neutral"
-                                >
         <div className="flex items-center justify-between w-full">
-                                        <div className="flex flex-col items-start">
+            <Link href="/" className="flex items-center space-x-2">
-                                            <span className="font-bold text-sm">
+                <Image
-                                                Organization
+                    src="/logo/pangolin_orange.svg"
-                                            </span>
+                    alt="Pangolin Logo"
-                                            <span className="text-sm text-muted-foreground">
+                    width={34}
-                                                {orgId
+                    height={34}
-                                                    ? orgs?.find(
-                                                          (org) =>
-                                                              org.orgId ===
-                                                              orgId
-                                                      )?.name
-                                                    : "None selected"}
-                                            </span>
-                                        </div>
-                                        <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-                                    </div>
-                                </Button>
-                            </PopoverTrigger>
-                            <PopoverContent className="[100px] md:w-[180px] p-0">
-                                <Command>
-                                    <CommandInput placeholder="Search..." />
-                                    <CommandEmpty>
-                                        No organizations found.
-                                    </CommandEmpty>
-                                    {(!env.flags.disableUserCreateOrg ||
-                                        user.serverAdmin) && (
-                                        <>
-                                            <CommandGroup heading="Create">
-                                                <CommandList>
-                                                    <CommandItem
-                                                        onSelect={(
-                                                            currentValue
-                                                        ) => {
-                                                            router.push(
-                                                                "/setup"
-                                                            );
-                                                        }}
-                                                    >
-                                                        <Plus className="mr-2 h-4 w-4" />
-                                                        New Organization
-                                                    </CommandItem>
-                                                </CommandList>
-                                            </CommandGroup>
-                                            <CommandSeparator />
-                                        </>
-                                    )}
-                                    <CommandGroup heading="Organizations">
-                                        <CommandList>
-                                            {orgs.map((org) => (
-                                                <CommandItem
-                                                    key={org.orgId}
-                                                    onSelect={(
-                                                        currentValue
-                                                    ) => {
-                                                        router.push(
-                                                            `/${org.orgId}/settings`
-                                                        );
-                                                    }}
-                                                >
-                                                    <Check
-                                                        className={cn(
-                                                            "mr-2 h-4 w-4",
-                                                            orgId === org.orgId
-                                                                ? "opacity-100"
-                                                                : "opacity-0"
-                                                        )}
                 />
-                                                    {org.name}
+                <span className="font-[Space_Grotesk] font-bold text-2xl text-neutral-500">Pangolin</span>
-                                                </CommandItem>
+            </Link>
-                                            ))}
-                                        </CommandList>
-                                    </CommandGroup>
-                                </Command>
-                            </PopoverContent>
-                        </Popover>
-                    )}
         </div>
-            </div>
-        </>
     );
 }
 

src/components/HorizontalTabs.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { cn } from "@app/lib/cn";
+import { buttonVariants } from "@/components/ui/button";
+
+interface HorizontalTabsProps {
+    children: React.ReactNode;
+    items: Array<{
+        title: string;
+        href: string;
+        icon?: React.ReactNode;
+    }>;
+    disabled?: boolean;
+}
+
+export function HorizontalTabs({
+    children,
+    items,
+    disabled = false
+}: HorizontalTabsProps) {
+    const pathname = usePathname();
+    const params = useParams();
+
+    function hydrateHref(href: string) {
+        return href
+            .replace("{orgId}", params.orgId as string)
+            .replace("{resourceId}", params.resourceId as string)
+            .replace("{niceId}", params.niceId as string)
+            .replace("{userId}", params.userId as string);
+    }
+
+    return (
+        <div className="space-y-6">
+            <div className="relative">
+                <div className="overflow-x-auto scrollbar-hide">
+                    <div className="flex space-x-4 border-b min-w-max">
+                        {items.map((item) => {
+                            const hydratedHref = hydrateHref(item.href);
+                            const isActive =
+                                pathname.startsWith(hydratedHref) &&
+                                !pathname.includes("create");
+
+                            return (
+                                <Link
+                                    key={hydratedHref}
+                                    href={hydratedHref}
+                                    className={cn(
+                                        "px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
+                                        isActive
+                                            ? "border-b-2 border-primary text-primary"
+                                            : "text-muted-foreground hover:text-foreground",
+                                        disabled && "cursor-not-allowed"
+                                    )}
+                                    onClick={
+                                        disabled
+                                            ? (e) => e.preventDefault()
+                                            : undefined
+                                    }
+                                    tabIndex={disabled ? -1 : undefined}
+                                    aria-disabled={disabled}
+                                >
+                                    {item.icon ? (
+                                        <div className="flex items-center space-x-2">
+                                            {item.icon}
+                                            <span>{item.title}</span>
+                                        </div>
+                                    ) : (
+                                        item.title
+                                    )}
+                                </Link>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+            <div className="space-y-6">{children}</div>
+        </div>
+    );
+}

src/components/Layout.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import React, { useState } from "react";
+import { Header } from "@app/components/Header";
+import { SidebarNav } from "@app/components/SidebarNav";
+import { TopBar } from "@app/components/TopBar";
+import { OrgSelector } from "@app/components/OrgSelector";
+import { cn } from "@app/lib/cn";
+import { ListOrgsResponse } from "@server/routers/org";
+import SupporterStatus from "@app/components/SupporterStatus";
+import { Separator } from "@app/components/ui/separator";
+import { Button } from "@app/components/ui/button";
+import { ExternalLink, Menu, X } from "lucide-react";
+import {
+    Sheet,
+    SheetContent,
+    SheetTrigger,
+    SheetTitle,
+    SheetDescription
+} from "@app/components/ui/sheet";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { Breadcrumbs } from "@app/components/Breadcrumbs";
+import Link from "next/link";
+
+interface LayoutProps {
+    children: React.ReactNode;
+    orgId?: string;
+    orgs?: ListOrgsResponse["orgs"];
+    navItems?: Array<{
+        title: string;
+        href: string;
+        icon?: React.ReactNode;
+        children?: Array<{
+            title: string;
+            href: string;
+            icon?: React.ReactNode;
+        }>;
+    }>;
+    showSidebar?: boolean;
+    showBreadcrumbs?: boolean;
+    showHeader?: boolean;
+    showTopBar?: boolean;
+}
+
+export function Layout({
+    children,
+    orgId,
+    orgs,
+    navItems = [],
+    showSidebar = true,
+    showBreadcrumbs = true,
+    showHeader = true,
+    showTopBar = true
+}: LayoutProps) {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const { env } = useEnvContext();
+
+    return (
+        <div className="flex h-screen overflow-hidden">
+            {/* Mobile Menu Button */}
+            {showSidebar && (
+                <div className="md:hidden fixed top-4 left-4 z-50">
+                    <Sheet
+                        open={isMobileMenuOpen}
+                        onOpenChange={setIsMobileMenuOpen}
+                    >
+                        <SheetTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                                <Menu className="h-6 w-6" />
+                            </Button>
+                        </SheetTrigger>
+                        <SheetContent
+                            side="left"
+                            className="w-64 p-0 flex flex-col h-full"
+                        >
+                            <SheetTitle className="sr-only">
+                                Navigation Menu
+                            </SheetTitle>
+                            <SheetDescription className="sr-only">
+                                Main navigation menu for the application
+                            </SheetDescription>
+                            {showHeader && (
+                                <div className="flex h-16 items-center border-b px-4 shrink-0">
+                                    <Header orgId={orgId} orgs={orgs} />
+                                </div>
+                            )}
+                            <div className="flex-1 overflow-y-auto p-4">
+                                <SidebarNav items={navItems} onItemClick={() => setIsMobileMenuOpen(false)} />
+                            </div>
+                            <div className="p-4 space-y-4 border-t shrink-0">
+                                <SupporterStatus />
+                                <OrgSelector orgId={orgId} orgs={orgs} />
+                                {env?.app?.version && (
+                                    <div className="text-xs text-muted-foreground text-center">
+                                        v{env.app.version}
+                                    </div>
+                                )}
+                            </div>
+                        </SheetContent>
+                    </Sheet>
+                </div>
+            )}
+
+            {/* Desktop Sidebar */}
+            {showSidebar && (
+                <div className="hidden md:flex w-64 border-r bg-card flex-col h-full shrink-0">
+                    {showHeader && (
+                        <div className="flex h-16 items-center border-b px-4 shrink-0">
+                            <Header orgId={orgId} orgs={orgs} />
+                        </div>
+                    )}
+                    <div className="flex-1 overflow-y-auto p-4">
+                        <SidebarNav items={navItems} />
+                    </div>
+                    <div className="p-4 space-y-4 border-t shrink-0">
+                        <SupporterStatus />
+                        <OrgSelector orgId={orgId} orgs={orgs} />
+                        <div className="space-y-2">
+                            <div className="text-xs text-muted-foreground text-center">
+                                <Link
+                                    href="https://github.com/fosrl/pangolin"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="flex items-center justify-center gap-1"
+                                >
+                                    Open Source
+                                    <ExternalLink size={12}/>
+                                </Link>
+                            </div>
+                            {env?.app?.version && (
+                                <div className="text-xs text-muted-foreground text-center">
+                                    v{env.app.version}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Main content */}
+            <div
+                className={cn(
+                    "flex-1 flex flex-col h-full min-w-0",
+                    !showSidebar && "w-full"
+                )}
+            >
+                {showTopBar && (
+                    <div className="h-16 border-b shrink-0 bg-card">
+                        <div className="flex h-full items-center justify-end px-4">
+                            <TopBar orgId={orgId} orgs={orgs} />
+                        </div>
+                    </div>
+                )}
+                {showBreadcrumbs && <Breadcrumbs />}
+                <main className="flex-1 overflow-y-auto p-3 md:p-6 w-full">
+                    <div className="container mx-auto max-w-12xl">
+                        {children}
+                    </div>
+                </main>
+            </div>
+        </div>
+    );
+}

src/components/OrgSelector.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator
+} from "@app/components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { cn } from "@app/lib/cn";
+import { ListOrgsResponse } from "@server/routers/org";
+import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useUserContext } from "@app/hooks/useUserContext";
+
+interface OrgSelectorProps {
+    orgId?: string;
+    orgs?: ListOrgsResponse["orgs"];
+}
+
+export function OrgSelector({ orgId, orgs }: OrgSelectorProps) {
+    const { user } = useUserContext();
+    const [open, setOpen] = useState(false);
+    const router = useRouter();
+    const { env } = useEnvContext();
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    size="lg"
+                    role="combobox"
+                    aria-expanded={open}
+                    className="w-full h-12 px-3 py-4 bg-neutral hover:bg-neutral"
+                >
+                    <div className="flex items-center justify-between w-full">
+                        <div className="flex flex-col items-start">
+                            <span className="font-bold text-sm">
+                                Organization
+                            </span>
+                            <span className="text-sm text-muted-foreground">
+                                {orgId
+                                    ? orgs?.find(
+                                          (org) =>
+                                              org.orgId ===
+                                              orgId
+                                      )?.name
+                                    : "None selected"}
+                            </span>
+                        </div>
+                        <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                    </div>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[180px] p-0">
+                <Command>
+                    <CommandInput placeholder="Search..." />
+                    <CommandEmpty>
+                        No organizations found.
+                    </CommandEmpty>
+                    {(!env.flags.disableUserCreateOrg ||
+                        user.serverAdmin) && (
+                        <>
+                            <CommandGroup heading="Create">
+                                <CommandList>
+                                    <CommandItem
+                                        onSelect={(
+                                            currentValue
+                                        ) => {
+                                            router.push(
+                                                "/setup"
+                                            );
+                                        }}
+                                    >
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        New Organization
+                                    </CommandItem>
+                                </CommandList>
+                            </CommandGroup>
+                            <CommandSeparator />
+                        </>
+                    )}
+                    <CommandGroup heading="Organizations">
+                        <CommandList>
+                            {orgs?.map((org) => (
+                                <CommandItem
+                                    key={org.orgId}
+                                    onSelect={(
+                                        currentValue
+                                    ) => {
+                                        router.push(
+                                            `/${org.orgId}/settings`
+                                        );
+                                    }}
+                                >
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            orgId === org.orgId
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    {org.name}
+                                </CommandItem>
+                            ))}
+                        </CommandList>
+                    </CommandGroup>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+} 

src/components/ProfileIcon.tsx

@@ -66,7 +66,10 @@ export default function ProfileIcon() {
             <Enable2FaForm open={openEnable2fa} setOpen={setOpenEnable2fa} />
             <Disable2FaForm open={openDisable2fa} setOpen={setOpenDisable2fa} />
 
-            <div className="flex items-center md:gap-4 gap-2 flex-grow min-w-0">
+            <div className="flex items-center md:gap-4 grow min-w-0 gap-2 md:gap-0">
+                <span className="truncate max-w-full font-medium min-w-0">
+                    {user.email}
+                </span>
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Button
@@ -150,12 +153,6 @@ export default function ProfileIcon() {
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
-                <span className="truncate max-w-full font-medium min-w-0 mr-1">
-                    {user.email}
-                </span>
-                <div className="hidden md:block">
-                    <SupporterStatus />
-                </div>
             </div>
         </>
     );

src/components/SidebarNav.tsx

@@ -1,35 +1,30 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { cn } from "@app/lib/cn";
-import { buttonVariants } from "@/components/ui/button";
+import { ChevronDown, ChevronRight } from "lucide-react";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from "@/components/ui/select";
-import { CornerDownRight } from "lucide-react";
 
-interface SidebarNavItem {
+export interface SidebarNavItem {
     href: string;
     title: string;
     icon?: React.ReactNode;
     children?: SidebarNavItem[];
+    autoExpand?: boolean;
 }
 
-interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+export interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     items: SidebarNavItem[];
     disabled?: boolean;
+    onItemClick?: () => void;
 }
 
 export function SidebarNav({
     className,
     items,
     disabled = false,
+    onItemClick,
     ...props
 }: SidebarNavProps) {
     const pathname = usePathname();
@@ -38,43 +33,27 @@ export function SidebarNav({
     const niceId = params.niceId as string;
     const resourceId = params.resourceId as string;
     const userId = params.userId as string;
+    const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
 
-    const [selectedValue, setSelectedValue] =
+    // Initialize expanded items based on autoExpand property
-        React.useState<string>(getSelectedValue());
-
     useEffect(() => {
-        setSelectedValue(getSelectedValue());
+        const autoExpanded = new Set<string>();
-    }, [usePathname()]);
 
-    const router = useRouter();
+        function findAutoExpanded(items: SidebarNavItem[]) {
-
+            items.forEach(item => {
-    const handleSelectChange = (value: string) => {
-        if (!disabled) {
-            router.push(value);
-        }
-    };
-
-    function getSelectedValue() {
-        let foundHref = "";
-        for (const item of items) {
                 const hydratedHref = hydrateHref(item.href);
-            if (hydratedHref === pathname) {
+                if (item.autoExpand) {
-                foundHref = hydratedHref;
+                    autoExpanded.add(hydratedHref);
-                break;
                 }
                 if (item.children) {
-                for (const child of item.children) {
+                    findAutoExpanded(item.children);
-                    const hydratedChildHref = hydrateHref(child.href);
-                    if (hydratedChildHref === pathname) {
-                        foundHref = hydratedChildHref;
-                        break;
                 }
+            });
         }
-            }
+
-            if (foundHref) break;
+        findAutoExpanded(items);
-        }
+        setExpandedItems(autoExpanded);
-        return foundHref;
+    }, [items]);
-    }
 
     function hydrateHref(val: string): string {
         return val
@@ -84,143 +63,85 @@ export function SidebarNav({
             .replace("{userId}", userId);
     }
 
-    function renderItems(items: SidebarNavItem[]) {
+    function toggleItem(href: string) {
-        return items.map((item) => (
+        setExpandedItems(prev => {
-            <div key={hydrateHref(item.href)}>
+            const newSet = new Set(prev);
-                <Link
+            if (newSet.has(href)) {
-                    href={hydrateHref(item.href)}
+                newSet.delete(href);
-                    className={cn(
+            } else {
-                        "w-full",
+                newSet.add(href);
-                        buttonVariants({ variant: "ghost" }),
-                        pathname === hydrateHref(item.href) &&
-                            !pathname.includes("create")
-                            ? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border"
-                            : "hover:bg-transparent hover:underline",
-                        "justify-start",
-                        disabled && "cursor-not-allowed"
-                    )}
-                    onClick={disabled ? (e) => e.preventDefault() : undefined}
-                    tabIndex={disabled ? -1 : undefined}
-                    aria-disabled={disabled}
-                >
-                    {item.icon ? (
-                        <div className="flex items-center space-x-2">
-                            {item.icon}
-                            <span>{item.title}</span>
-                        </div>
-                    ) : (
-                        item.title
-                    )}
-                </Link>
-                {item.children && (
-                    <div className="ml-4 space-y-2">
-                        {item.children.map((child) => (
-                            <div
-                                key={hydrateHref(child.href)}
-                                className="flex items-center space-x-2"
-                            >
-                                <Link
-                                    href={hydrateHref(child.href)}
-                                    className={cn(
-                                        "w-full",
-                                        buttonVariants({ variant: "ghost" }),
-                                        pathname === hydrateHref(child.href) &&
-                                            !pathname.includes("create")
-                                            ? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border"
-                                            : "hover:bg-transparent hover:underline",
-                                        "justify-start",
-                                        disabled && "cursor-not-allowed"
-                                    )}
-                                    onClick={
-                                        disabled
-                                            ? (e) => e.preventDefault()
-                                            : undefined
             }
+            return newSet;
+        });
+    }
+
+    function renderItems(items: SidebarNavItem[], level = 0) {
+        return items.map((item) => {
+            const hydratedHref = hydrateHref(item.href);
+            const isActive = pathname.startsWith(hydratedHref);
+            const hasChildren = item.children && item.children.length > 0;
+            const isExpanded = expandedItems.has(hydratedHref);
+            const indent = level * 16; // Base indent for each level
+
+            return (
+                <div key={hydratedHref}>
+                    <div className="flex items-center group" style={{ marginLeft: `${indent}px` }}>
+                        <Link
+                            href={hydratedHref}
+                            className={cn(
+                                "flex items-center py-1 w-full transition-colors",
+                                isActive
+                                    ? "text-primary font-medium"
+                                    : "text-muted-foreground hover:text-foreground",
+                                disabled && "cursor-not-allowed opacity-60"
+                            )}
+                            onClick={(e) => {
+                                if (disabled) {
+                                    e.preventDefault();
+                                } else if (onItemClick) {
+                                    onItemClick();
+                                }
+                            }}
                             tabIndex={disabled ? -1 : undefined}
                             aria-disabled={disabled}
                         >
-                                    <CornerDownRight className="h-4 w-4 text-gray-500 mr-2" />
+                            {item.icon && <span className="mr-2">{item.icon}</span>}
-                                    {child.icon ? (
+                            {item.title}
-                                        <div className="flex items-center space-x-2">
-                                            {child.icon}
-                                            <span>{child.title}</span>
-                                        </div>
-                                    ) : (
-                                        child.title
-                                    )}
                         </Link>
+                        {hasChildren && (
+                            <button
+                                onClick={() => toggleItem(hydratedHref)}
+                                className="p-2 hover:bg-muted rounded-md ml-auto"
+                                disabled={disabled}
+                            >
+                                {isExpanded ? (
+                                    <ChevronDown className="h-4 w-4" />
+                                ) : (
+                                    <ChevronRight className="h-4 w-4" />
+                                )}
+                            </button>
+                        )}
                     </div>
-                        ))}
+                    {hasChildren && isExpanded && (
+                        <div className="space-y-1 mt-1">
+                            {renderItems(item.children || [], level + 1)}
                         </div>
                     )}
                 </div>
-        ));
+            );
+        });
     }
 
     return (
-        <div>
-            <div className="block lg:hidden">
-                <Select
-                    defaultValue={selectedValue}
-                    value={selectedValue}
-                    onValueChange={handleSelectChange}
-                    disabled={disabled}
-                >
-                    <SelectTrigger>
-                        <SelectValue placeholder="Select an option" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {items.flatMap((item) => {
-                            const topLevelItem = (
-                                <SelectItem
-                                    key={hydrateHref(item.href)}
-                                    value={hydrateHref(item.href)}
-                                >
-                                    {item.icon ? (
-                                        <div className="flex items-center space-x-2">
-                                            {item.icon}
-                                            <span>{item.title}</span>
-                                        </div>
-                                    ) : (
-                                        item.title
-                                    )}
-                                </SelectItem>
-                            );
-                            const childItems =
-                                item.children?.map((child) => (
-                                    <SelectItem
-                                        key={hydrateHref(child.href)}
-                                        value={hydrateHref(child.href)}
-                                        className="pl-8"
-                                    >
-                                        <div className="flex items-center space-x-2">
-                                            <CornerDownRight className="h-4 w-4 text-gray-500" />
-                                            {child.icon ? (
-                                                <>
-                                                    {child.icon}
-                                                    <span>{child.title}</span>
-                                                </>
-                                            ) : (
-                                                <span>{child.title}</span>
-                                            )}
-                                        </div>
-                                    </SelectItem>
-                                )) || [];
-                            return [topLevelItem, ...childItems];
-                        })}
-                    </SelectContent>
-                </Select>
-            </div>
         <nav
             className={cn(
-                    "hidden lg:flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-3 pr-8",
+                "flex flex-col space-y-1",
-                    disabled && "opacity-50 pointer-events-none",
+                disabled && "pointer-events-none opacity-60",
                 className
             )}
             {...props}
         >
             {renderItems(items)}
         </nav>
-        </div>
     );
 }

src/components/StrategySelect.tsx

@@ -44,7 +44,7 @@ export function StrategySelect<TValue extends string>({
                         selected === option.id ? "checked" : "unchecked"
                     }
                     className={cn(
-                        "relative flex rounded-lg border-2 p-4 transition-colors cursor-pointer",
+                        "relative flex rounded-lg border p-4 transition-colors cursor-pointer",
                         option.disabled
                             ? "border-input text-muted-foreground cursor-not-allowed opacity-50"
                             : selected === option.id

src/components/SupporterStatus.tsx

@@ -419,7 +419,7 @@ export default function SupporterStatus() {
                 <Button
                     variant="outlinePrimary"
                     size="sm"
-                    className="gap-2"
+                    className="gap-2 w-full"
                     onClick={() => {
                         setPurchaseOptionsOpen(true);
                     }}

src/components/TopBar.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import ProfileIcon from "@app/components/ProfileIcon";
+import Link from "next/link";
+
+interface TopBarProps {
+    orgId?: string;
+    orgs?: any;
+}
+
+export function TopBar({ orgId, orgs }: TopBarProps) {
+    return (
+        <div className="flex items-center justify-end md:justify-between w-full h-full">
+            <div className="hidden md:flex items-center space-x-4">
+                <Link
+                    href="https://docs.fossorial.io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                    Documentation
+                </Link>
+                <Link
+                    href="mailto:support@fossorial.io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                    Support
+                </Link>
+            </div>
+            <div>
+                <ProfileIcon />
+            </div>
+        </div>
+    );
+}

src/components/tags/autocomplete.tsx

@@ -221,7 +221,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                 modal={usePortal}
             >
                 <div
-                    className="relative h-full flex items-center rounded-md border-2 bg-transparent pr-3"
+                    className="relative h-full flex items-center rounded-md border border-input bg-transparent pr-3"
                     ref={triggerContainerRef}
                 >
                     {childrenWithProps}

src/components/tags/tag-input.tsx

@@ -490,7 +490,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                             <div className="w-full">
                                 <div
                                     className={cn(
-                                        `flex flex-row flex-wrap items-center gap-1.5 p-1.5 w-full rounded-md border-2 border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-transparent`,
+                                        `flex flex-row flex-wrap items-center gap-1.5 p-1.5 w-full rounded-md border border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-transparent`,
                                         styleClasses?.inlineTagsContainer
                                     )}
                                 >

src/components/ui/alert.tsx

@@ -9,11 +9,11 @@ const alertVariants = cva(
         variants: {
             variant: {
                 default: "bg-card border text-foreground",
-                neutral: "bg-card border-2 text-foreground",
+                neutral: "bg-card border text-foreground",
                 destructive:
-                    "border-destructive/50 border-2 bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
+                    "border-destructive/50 border bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
                 success:
-                    "border-green-500/50 border-2 bg-green-500/10 text-green-500 dark:border-success [&>svg]:text-green-500",
+                    "border-green-500/50 border bg-green-500/10 text-green-500 dark:border-success [&>svg]:text-green-500",
             },
         },
         defaultVariants: {

src/components/ui/button.tsx

@@ -6,7 +6,7 @@ import { cn } from "@app/lib/cn";
 import { Loader2 } from "lucide-react";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center rounded-full whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    "cursor-pointer inline-flex items-center justify-center rounded-full whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
             variant: {
@@ -15,16 +15,16 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
-                    "border-2 border-input bg-card hover:bg-accent hover:text-accent-foreground",
+                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground",
                 outlinePrimary:
-                    "border-2 border-primary bg-card hover:bg-primary/10 text-primary",
+                    "border border-primary bg-card hover:bg-primary/10 text-primary",
                 secondary:
-                    "bg-secondary border border-input border-2 text-secondary-foreground hover:bg-secondary/80",
+                    "bg-secondary border border-input border text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
                 squareOutlinePrimary:
-                    "border-2 border-primary bg-card hover:bg-primary/10 text-primary rounded-md",
+                    "border border-primary bg-card hover:bg-primary/10 text-primary rounded-md",
                 squareOutline:
-                    "border-2 border-input bg-card hover:bg-accent hover:text-accent-foreground rounded-md",
+                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground rounded-md",
                 squareDefault:
                     "bg-primary text-primary-foreground hover:bg-primary/90 rounded-md",
                 text: "",

src/components/ui/checkbox.tsx

@@ -14,13 +14,13 @@ const checkboxVariants = cva(
         variants: {
             variant: {
                 outlinePrimary:
-                    "border-2 rounded-sm border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+                    "border rounded-sm border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
                 outline:
-                    "border-2 rounded-sm border-input data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground",
+                    "border rounded-sm border-input data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground",
                 outlinePrimarySquare:
-                    "border-2 rounded-[20%] border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+                    "border rounded-[20%] border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
                 outlineSquare:
-                    "border-2 rounded-[20%] border-input data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground"
+                    "border rounded-[20%] border-input data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground"
             }
         },
         defaultVariants: {

src/components/ui/data-table.tsx

@@ -0,0 +1,159 @@
+"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, Search } from "lucide-react";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle
+} from "@app/components/ui/card";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    title?: string;
+    addButtonText?: string;
+    onAdd?: () => void;
+    searchPlaceholder?: string;
+    searchColumn?: string;
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    title,
+    addButtonText,
+    onAdd,
+    searchPlaceholder = "Search...",
+    searchColumn = "name"
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        onColumnFiltersChange: setColumnFilters,
+        getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
+        initialState: {
+            pagination: {
+                pageSize: 20,
+                pageIndex: 0
+            }
+        },
+        state: {
+            sorting,
+            columnFilters,
+            globalFilter
+        }
+    });
+
+    return (
+        <div className="container mx-auto max-w-12xl">
+            <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+                    <div className="flex items-center max-w-sm w-full relative mr-2">
+                        <Input
+                            placeholder={searchPlaceholder}
+                            value={globalFilter ?? ""}
+                            onChange={(e) =>
+                                table.setGlobalFilter(String(e.target.value))
+                            }
+                            className="w-full pl-8"
+                        />
+                        <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+                    </div>
+                    {onAdd && addButtonText && (
+                        <Button onClick={onAdd}>
+                            <Plus className="mr-2 h-4 w-4" />
+                            {addButtonText}
+                        </Button>
+                    )}
+                </CardHeader>
+                <CardContent>
+                    <Table>
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => (
+                                        <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 results found.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                    <div className="mt-4">
+                        <DataTablePagination table={table} />
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

src/components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

src/components/ui/form.tsx

@@ -1,32 +1,32 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
 import {
     Controller,
     ControllerProps,
     FieldPath,
     FieldValues,
     FormProvider,
-    useFormContext,
+    useFormContext
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@app/lib/cn"
+import { cn } from "@app/lib/cn";
-import { Label } from "@/components/ui/label"
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
     TFieldValues extends FieldValues = FieldValues,
     TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-    name: TName
+    name: TName;
-}
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
     {} as FormFieldContextValue
-)
+);
 
 const FormField = <
     TFieldValues extends FieldValues = FieldValues,
@@ -38,21 +38,21 @@ const FormField = <
         <FormFieldContext.Provider value={{ name: props.name }}>
             <Controller {...props} />
         </FormFieldContext.Provider>
-    )
+    );
-}
+};
 
 const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext)
+    const fieldContext = React.useContext(FormFieldContext);
-    const itemContext = React.useContext(FormItemContext)
+    const itemContext = React.useContext(FormItemContext);
-    const { getFieldState, formState } = useFormContext()
+    const { getFieldState, formState } = useFormContext();
 
-    const fieldState = getFieldState(fieldContext.name, formState)
+    const fieldState = getFieldState(fieldContext.name, formState);
 
     if (!fieldContext) {
-        throw new Error("useFormField should be used within <FormField>")
+        throw new Error("useFormField should be used within <FormField>");
     }
 
-    const { id } = itemContext
+    const { id } = itemContext;
 
     return {
         id,
@@ -60,37 +60,37 @@ const useFormField = () => {
         formItemId: `${id}-form-item`,
         formDescriptionId: `${id}-form-item-description`,
         formMessageId: `${id}-form-item-message`,
-        ...fieldState,
+        ...fieldState
-    }
+    };
-}
+};
 
 type FormItemContextValue = {
-    id: string
+    id: string;
-}
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
     {} as FormItemContextValue
-)
+);
 
 const FormItem = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-    const id = React.useId()
+    const id = React.useId();
 
     return (
         <FormItemContext.Provider value={{ id }}>
             <div ref={ref} className={cn("space-y-2", className)} {...props} />
         </FormItemContext.Provider>
-    )
+    );
-})
+});
-FormItem.displayName = "FormItem"
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
     React.ElementRef<typeof LabelPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-    const { error, formItemId } = useFormField()
+    const { error, formItemId } = useFormField();
 
     return (
         <Label
@@ -99,15 +99,16 @@ const FormLabel = React.forwardRef<
             htmlFor={formItemId}
             {...props}
         />
-    )
+    );
-})
+});
-FormLabel.displayName = "FormLabel"
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
     React.ElementRef<typeof Slot>,
     React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+    const { error, formItemId, formDescriptionId, formMessageId } =
+        useFormField();
 
     return (
         <Slot
@@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
             aria-invalid={!!error}
             {...props}
         />
-    )
+    );
-})
+});
-FormControl.displayName = "FormControl"
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
     HTMLParagraphElement,
     React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField()
+    const { formDescriptionId } = useFormField();
 
     return (
         <p
@@ -138,19 +139,19 @@ const FormDescription = React.forwardRef<
             className={cn("text-sm text-muted-foreground", className)}
             {...props}
         />
-    )
+    );
-})
+});
-FormDescription.displayName = "FormDescription"
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
     HTMLParagraphElement,
     React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField()
+    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children
+    const body = error ? String(error?.message) : children;
 
     if (!body) {
-        return null
+        return null;
     }
 
     return (
@@ -162,9 +163,9 @@ const FormMessage = React.forwardRef<
         >
             {body}
         </p>
-    )
+    );
-})
+});
-FormMessage.displayName = "FormMessage"
+FormMessage.displayName = "FormMessage";
 
 export {
     useFormField,
@@ -174,5 +175,5 @@ export {
     FormControl,
     FormDescription,
     FormMessage,
-    FormField,
+    FormField
-}
+};

src/components/ui/input-otp.tsx

@@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y-2 border-r-2 border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l-2 last:rounded-r-md",
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
         isActive && "z-10 ring-2 ring-ring ring-offset-background",
         className
       )}

src/components/ui/input.tsx

@@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 <input
                     type={showPassword ? "text" : "password"}
                     className={cn(
-                        "flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        "flex h-9 w-full rounded-md border border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                         className
                     )}
                     ref={ref}
@@ -39,7 +39,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <input
                 type={type}
                 className={cn(
-                    "flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    "flex h-9 w-full rounded-md border border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                     className
                 )}
                 ref={ref}

src/components/ui/popover.tsx

@@ -28,7 +28,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border-2 bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

src/components/ui/radio-group.tsx

@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border-2 border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}

src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between border border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       "rounded-md",
       className
     )}
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className

src/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5"
       )}
     />
   </SwitchPrimitives.Root>

tailwind.config.ts

@@ -1,63 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-    darkMode: ["class"],
-    content: [
-        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-        "./src/app/**/*.{js,ts,jsx,tsx,mdx}"
-    ],
-    theme: {
-        extend: {
-            colors: {
-                background: "hsl(var(--background))",
-                foreground: "hsl(var(--foreground))",
-                card: {
-                    DEFAULT: "hsl(var(--card))",
-                    foreground: "hsl(var(--card-foreground))"
-                },
-                popover: {
-                    DEFAULT: "hsl(var(--popover))",
-                    foreground: "hsl(var(--popover-foreground))"
-                },
-                primary: {
-                    DEFAULT: "hsl(var(--primary))",
-                    foreground: "hsl(var(--primary-foreground))"
-                },
-                secondary: {
-                    DEFAULT: "hsl(var(--secondary))",
-                    foreground: "hsl(var(--secondary-foreground))"
-                },
-                muted: {
-                    DEFAULT: "hsl(var(--muted))",
-                    foreground: "hsl(var(--muted-foreground))"
-                },
-                accent: {
-                    DEFAULT: "hsl(var(--accent))",
-                    foreground: "hsl(var(--accent-foreground))"
-                },
-                destructive: {
-                    DEFAULT: "hsl(var(--destructive))",
-                    foreground: "hsl(var(--destructive-foreground))"
-                },
-                border: "hsl(var(--border))",
-                input: "hsl(var(--input))",
-                ring: "hsl(var(--ring))",
-                chart: {
-                    "1": "hsl(var(--chart-1))",
-                    "2": "hsl(var(--chart-2))",
-                    "3": "hsl(var(--chart-3))",
-                    "4": "hsl(var(--chart-4))",
-                    "5": "hsl(var(--chart-5))"
-                }
-            },
-            borderRadius: {
-                lg: "var(--radius)",
-                md: "calc(var(--radius) - 2px)",
-                sm: "calc(var(--radius) - 4px)"
-            }
-        }
-    },
-    plugins: [require("tailwindcss-animate")]
-};
-export default config;