From 8b0c30f19f81de93678a9544a91fe4fbc93bb762 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Sun, 13 Apr 2025 14:21:18 -0400
Subject: [PATCH] more tweaks to layout

---
 src/app/[orgId]/page.tsx                      |   2 +-
 .../settings/access/users/[userId]/layout.tsx |  26 +----
 src/app/[orgId]/settings/layout.tsx           |  48 +--------
 .../[resourceId]/connectivity/page.tsx        |   2 +-
 .../resources/[resourceId]/rules/page.tsx     |   3 +-
 src/app/admin/layout.tsx                      |  11 +-
 src/app/globals.css                           |   1 +
 src/app/navigation.tsx                        |  52 +++++----
 src/app/page.tsx                              |   2 +-
 src/app/setup/layout.tsx                      |  26 ++---
 src/components/Breadcrumbs.tsx                |   8 +-
 src/components/Header.tsx                     |   2 +-
 src/components/HorizontalTabs.tsx             |   3 +-
 src/components/Layout.tsx                     |  29 +++--
 src/components/SidebarNav.tsx                 |  12 ++-
 src/components/TopBar.tsx                     |   2 +-
 src/components/tags/autocomplete.tsx          |   2 +-
 src/components/ui/button.tsx                  |   2 +-
 src/components/ui/data-table.tsx              |  27 +++--
 src/components/ui/form.tsx                    | 101 +++++++++---------
 src/components/ui/input-otp.tsx               |   2 +-
 src/components/ui/switch.tsx                  |   2 +-
 22 files changed, 172 insertions(+), 193 deletions(-)

diff --git a/src/app/[orgId]/page.tsx b/src/app/[orgId]/page.tsx
index b009da1c..438ebbe4 100644
--- a/src/app/[orgId]/page.tsx
+++ b/src/app/[orgId]/page.tsx
@@ -45,7 +45,7 @@ export default async function OrgPage(props: OrgPageProps) {
 
     return (
         <UserProvider user={user}>
-            <Layout 
+            <Layout
                 orgId={orgId}
                 navItems={orgNavItems}
             >
diff --git a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
index 1419de92..342e8b7c 100644
--- a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
+++ b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
@@ -14,6 +14,7 @@ import {
 } 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;
@@ -48,28 +49,11 @@ 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">
-                    <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>
-
                 <HorizontalTabs items={navItems}>
                     {children}
                 </HorizontalTabs>
diff --git a/src/app/[orgId]/settings/layout.tsx b/src/app/[orgId]/settings/layout.tsx
index 3ec16be4..206f52f9 100644
--- a/src/app/[orgId]/settings/layout.tsx
+++ b/src/app/[orgId]/settings/layout.tsx
@@ -18,6 +18,7 @@ import { GetOrgUserResponse } from "@server/routers/user";
 import UserProvider from "@app/providers/UserProvider";
 import { Layout } from "@app/components/Layout";
 import { SidebarNavItem, SidebarNavProps } from "@app/components/SidebarNav";
+import { orgNavItems } from "@app/app/navigation";
 
 export const dynamic = "force-dynamic";
 
@@ -26,51 +27,6 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const navItems: 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",
-                children: [
-                    {
-                        title: "Invitations",
-                        href: "/{orgId}/settings/access/invitations"
-                    }
-                ]
-            },
-            {
-                title: "Roles",
-                href: "/{orgId}/settings/access/roles"
-            }
-        ]
-    },
-    {
-        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 }>;
@@ -119,7 +75,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
     return (
         <UserProvider user={user}>
-            <Layout orgId={params.orgId} orgs={orgs} navItems={navItems}>
+            <Layout orgId={params.orgId} orgs={orgs} navItems={orgNavItems}>
                 {children}
             </Layout>
         </UserProvider>
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
index 29841bf5..f0dd8978 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
+++ b/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>
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx
index e85d6f3b..2a9fa00f 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx
+++ b/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
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index a1f981d7..ddef0a05 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -9,6 +9,7 @@ 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";
 
@@ -17,14 +18,6 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const navItems = [
-    {
-        title: "All Users",
-        href: "/admin/users",
-        icon: <Users className="h-4 w-4" />
-    }
-];
-
 interface LayoutProps {
     children: React.ReactNode;
 }
@@ -51,7 +44,7 @@ export default async function AdminLayout(props: LayoutProps) {
 
     return (
         <UserProvider user={user}>
-            <Layout orgs={orgs} navItems={navItems}>
+            <Layout orgs={orgs} navItems={adminNavItems}>
                 {props.children}
             </Layout>
         </UserProvider>
diff --git a/src/app/globals.css b/src/app/globals.css
index 6d701a49..7afe6079 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,4 @@
+@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");
 @import 'tailwindcss';
 
 @custom-variant dark (&:is(.dark *));
diff --git a/src/app/navigation.tsx b/src/app/navigation.tsx
index c9824d63..91a1f52c 100644
--- a/src/app/navigation.tsx
+++ b/src/app/navigation.tsx
@@ -1,33 +1,37 @@
-import { Home, Settings, Users, Link as LinkIcon, Waypoints, Combine } from "lucide-react";
+import { SidebarNavItem } from "@app/components/SidebarNav";
+import {
+    Home,
+    Settings,
+    Users,
+    Link as LinkIcon,
+    Waypoints,
+    Combine
+} from "lucide-react";
 
-export const rootNavItems = [
+export const rootNavItems: SidebarNavItem[] = [
     {
         title: "Home",
-        href: "/",
-        icon: <Home className="h-4 w-4" />
+        href: "/"
+        // icon: <Home className="h-4 w-4" />
     }
 ];
 
-export const orgNavItems = [
-    {
-        title: "Overview",
-        href: "/{orgId}",
-        icon: <Home className="h-4 w-4" />
-    },
+export const orgNavItems: SidebarNavItem[] = [
     {
         title: "Sites",
-        href: "/{orgId}/settings/sites",
-        icon: <Combine className="h-4 w-4" />
+        href: "/{orgId}/settings/sites"
+        // icon: <Combine className="h-4 w-4" />
     },
     {
         title: "Resources",
-        href: "/{orgId}/settings/resources",
-        icon: <Waypoints className="h-4 w-4" />
+        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" />,
+        // icon: <Users className="h-4 w-4" />,
+        autoExpand: true,
         children: [
             {
                 title: "Users",
@@ -41,12 +45,20 @@ export const orgNavItems = [
     },
     {
         title: "Shareable Links",
-        href: "/{orgId}/settings/share-links",
-        icon: <LinkIcon className="h-4 w-4" />
+        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" />
+        href: "/{orgId}/settings/general"
+        // icon: <Settings className="h-4 w-4" />
     }
-]; 
\ No newline at end of file
+];
+
+export const adminNavItems: SidebarNavItem[] = [
+    {
+        title: "All Users",
+        href: "/admin/users"
+        // icon: <Users className="h-4 w-4" />
+    }
+];
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e2f06431..3535c65f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -71,7 +71,7 @@ export default async function Page(props: {
 
     return (
         <UserProvider user={user}>
-            <Layout 
+            <Layout
                 orgs={orgs}
                 navItems={rootNavItems}
                 showBreadcrumbs={false}
diff --git a/src/app/setup/layout.tsx b/src/app/setup/layout.tsx
index 0e2583f9..f274bcfc 100644
--- a/src/app/setup/layout.tsx
+++ b/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 (
-        !(!env.flags.disableUserCreateOrg || user.serverAdmin)
-    ) {
+    if (!(!env.flags.disableUserCreateOrg || user.serverAdmin)) {
         redirect("/");
     }
 
     return (
         <>
-            <div className="p-3">
-                {user && (
-                    <UserProvider user={user}>
-                        <div>
-                            <ProfileIcon />
-                        </div>
-                    </UserProvider>
-                )}
-
-                <div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
-                    {children}
-                </div>
-            </div>
+            <UserProvider user={user}>
+                <Layout navItems={rootNavItems} showBreadcrumbs={false}>
+                    <div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
+                        {children}
+                    </div>
+                </Layout>
+            </UserProvider>
         </>
     );
 }
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 02a856b7..9db2db2a 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -26,7 +26,7 @@ export function Breadcrumbs() {
         } else if (segment === "resources") {
             label = "Resources";
         } else if (segment === "access") {
-            label = "Users & Roles";
+            label = "Access Control";
         } else if (segment === "general") {
             label = "General";
         } else if (segment === "share-links") {
@@ -48,14 +48,14 @@ export function Breadcrumbs() {
 
     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">
+            <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">
+                    <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",
+                                "ml-1 hover:text-foreground whitespace-nowrap",
                                 index === breadcrumbs.length - 1 &&
                                     "text-foreground font-medium"
                             )}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 5aa392f5..943f65ed 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -21,7 +21,7 @@ export function Header({ orgId, orgs }: HeaderProps) {
                     width={34}
                     height={34}
                 />
-                <span className="font-bold text-2xl">Pangolin</span>
+                <span className="font-[Space_Grotesk] font-bold text-2xl text-neutral-500">Pangolin</span>
             </Link>
         </div>
     );
diff --git a/src/components/HorizontalTabs.tsx b/src/components/HorizontalTabs.tsx
index 2ed641c8..8517fd35 100644
--- a/src/components/HorizontalTabs.tsx
+++ b/src/components/HorizontalTabs.tsx
@@ -28,7 +28,8 @@ export function HorizontalTabs({
         return href
             .replace("{orgId}", params.orgId as string)
             .replace("{resourceId}", params.resourceId as string)
-            .replace("{niceId}", params.niceId as string);
+            .replace("{niceId}", params.niceId as string)
+            .replace("{userId}", params.userId as string);
     }
 
     return (
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index a63ec2e1..c54aca28 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -10,7 +10,7 @@ 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 { Menu, X } from "lucide-react";
+import { ExternalLink, Menu, X } from "lucide-react";
 import {
     Sheet,
     SheetContent,
@@ -20,6 +20,7 @@ import {
 } 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;
@@ -68,7 +69,10 @@ export function Layout({
                                 <Menu className="h-6 w-6" />
                             </Button>
                         </SheetTrigger>
-                        <SheetContent side="left" className="w-64 p-0 flex flex-col h-full">
+                        <SheetContent
+                            side="left"
+                            className="w-64 p-0 flex flex-col h-full"
+                        >
                             <SheetTitle className="sr-only">
                                 Navigation Menu
                             </SheetTitle>
@@ -81,7 +85,7 @@ export function Layout({
                                 </div>
                             )}
                             <div className="flex-1 overflow-y-auto p-4">
-                                <SidebarNav items={navItems} />
+                                <SidebarNav items={navItems} onItemClick={() => setIsMobileMenuOpen(false)} />
                             </div>
                             <div className="p-4 space-y-4 border-t shrink-0">
                                 <SupporterStatus />
@@ -113,7 +117,15 @@ export function Layout({
                         <OrgSelector orgId={orgId} orgs={orgs} />
                         <div className="space-y-2">
                             <div className="text-xs text-muted-foreground text-center">
-                                Open Source
+                                <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">
@@ -126,7 +138,12 @@ export function Layout({
             )}
 
             {/* Main content */}
-            <div className={cn("flex-1 flex flex-col h-full min-w-0", !showSidebar && "w-full")}>
+            <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">
@@ -135,7 +152,7 @@ export function Layout({
                     </div>
                 )}
                 {showBreadcrumbs && <Breadcrumbs />}
-                <main className="flex-1 overflow-y-auto p-6 w-full">
+                <main className="flex-1 overflow-y-auto p-3 md:p-6 w-full">
                     <div className="container mx-auto max-w-12xl">
                         {children}
                     </div>
diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index cf6876ed..39c9ac07 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -17,12 +17,14 @@ export interface SidebarNavItem {
 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();
@@ -87,13 +89,19 @@ export function SidebarNav({
                         <Link
                             href={hydratedHref}
                             className={cn(
-                                "flex items-center py-2 px-3 w-full transition-colors",
+                                "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={disabled ? (e) => e.preventDefault() : undefined}
+                            onClick={(e) => {
+                                if (disabled) {
+                                    e.preventDefault();
+                                } else if (onItemClick) {
+                                    onItemClick();
+                                }
+                            }}
                             tabIndex={disabled ? -1 : undefined}
                             aria-disabled={disabled}
                         >
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index fb2d2000..2862da43 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -21,7 +21,7 @@ export function TopBar({ orgId, orgs }: TopBarProps) {
                     Documentation
                 </Link>
                 <Link
-                    href="https://fossorial.io/support"
+                    href="mailto:support@fossorial.io"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="text-muted-foreground hover:text-foreground transition-colors"
diff --git a/src/components/tags/autocomplete.tsx b/src/components/tags/autocomplete.tsx
index db8d76c3..f2867791 100644
--- a/src/components/tags/autocomplete.tsx
+++ b/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 bg-transparent pr-3"
+                    className="relative h-full flex items-center rounded-md border border-input bg-transparent pr-3"
                     ref={triggerContainerRef}
                 >
                     {childrenWithProps}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index a915c10c..43f420d7 100644
--- a/src/components/ui/button.tsx
+++ b/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: {
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index 23bf8942..b544b751 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -24,7 +24,12 @@ 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";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle
+} from "@app/components/ui/card";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -47,6 +52,7 @@ export function DataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
 
     const table = useReactTable({
         data,
@@ -57,6 +63,7 @@ export function DataTable<TData, TValue>({
         getSortedRowModel: getSortedRowModel(),
         onColumnFiltersChange: setColumnFilters,
         getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
                 pageSize: 20,
@@ -65,7 +72,8 @@ export function DataTable<TData, TValue>({
         },
         state: {
             sorting,
-            columnFilters
+            columnFilters,
+            globalFilter
         }
     });
 
@@ -73,12 +81,12 @@ export function DataTable<TData, TValue>({
         <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">
+                    <div className="flex items-center max-w-sm w-full relative mr-2">
                         <Input
                             placeholder={searchPlaceholder}
-                            value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
-                            onChange={(event) =>
-                                table.getColumn(searchColumn)?.setFilterValue(event.target.value)
+                            value={globalFilter ?? ""}
+                            onChange={(e) =>
+                                table.setGlobalFilter(String(e.target.value))
                             }
                             className="w-full pl-8"
                         />
@@ -101,7 +109,8 @@ export function DataTable<TData, TValue>({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                      header.column.columnDef.header,
+                                                      header.column.columnDef
+                                                          .header,
                                                       header.getContext()
                                                   )}
                                         </TableHead>
@@ -114,7 +123,9 @@ export function DataTable<TData, TValue>({
                                 table.getRowModel().rows.map((row) => (
                                     <TableRow
                                         key={row.id}
-                                        data-state={row.getIsSelected() && "selected"}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
                                     >
                                         {row.getVisibleCells().map((cell) => (
                                             <TableCell key={cell.id}>
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 61796efd..963404e7 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,32 +1,32 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
     Controller,
     ControllerProps,
     FieldPath,
     FieldValues,
     FormProvider,
-    useFormContext,
-} from "react-hook-form"
+    useFormContext
+} from "react-hook-form";
 
-import { cn } from "@app/lib/cn"
-import { Label } from "@/components/ui/label"
+import { cn } from "@app/lib/cn";
+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 itemContext = React.useContext(FormItemContext)
-    const { getFieldState, formState } = useFormContext()
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    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 body = error ? String(error?.message) : children
+    const { error, formMessageId } = useFormField();
+    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
+};
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index bd0e74c6..f13ce8a6 100644
--- a/src/components/ui/input-otp.tsx
+++ b/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
       )}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 3158b6a1..18c9279c 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -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>