I am batman

src/app/dashboard/users/page.tsx

@@ -0,0 +1,44 @@
+import PageContainer from "@/components/layout/page-container"
+import { buttonVariants } from "@/components/ui/button"
+import { Heading } from "@/components/ui/heading"
+import { Separator } from "@/components/ui/separator"
+import { DataTableSkeleton } from "@/components/ui/table/data-table-skeleton"
+import UsersDataTable from "@/features/users/components/user-data-table"
+import { searchParamsCache } from "@/lib/searchparams"
+import { cn } from "@/lib/utils"
+import { IconPlus } from "@tabler/icons-react"
+import Link from "next/link"
+import { SearchParams } from "nuqs/server"
+import { Suspense } from "react"
+
+export const metadata = {
+  title: "Dashboard: Users",
+}
+
+type pageProps = {
+  searchParams: Promise<SearchParams>
+}
+
+export default async function Page(props: pageProps) {
+  const searchParams = await props.searchParams
+  searchParamsCache.parse(searchParams)
+
+  return (
+    <PageContainer scrollable={false}>
+      <div className="flex flex-1 flex-col space-y-4">
+        <div className="flex items-start justify-between">
+          <Heading title="Users" description="Manage users" />
+          <Link href="/dashboard/users/new" className={cn(buttonVariants(), "text-xs md:text-sm")}>
+            <IconPlus className="mr-2 h-4 w-4" /> Add New
+          </Link>
+        </div>
+        <Separator />
+        <div className="flex-1 w-full overflow-auto">
+          <Suspense fallback={<DataTableSkeleton columnCount={8} rowCount={8} filterCount={2} />}>
+            <UsersDataTable />
+          </Suspense>
+        </div>
+      </div>
+    </PageContainer>
+  )
+}