3 files changed, 39 insertions, 2 deletions
diff --git a/apps/web/app/admin/admin_tools/page.tsx b/apps/web/app/admin/admin_tools/page.tsx
new file mode 100644
index 00000000..e036c755
--- /dev/null
+++ b/apps/web/app/admin/admin_tools/page.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import BookmarkDebugger from "@/components/admin/BookmarkDebugger";
+import { useTranslation } from "@/lib/i18n/server";
+
+export async function generateMetadata(): Promise<Metadata> {
+  // oxlint-disable-next-line rules-of-hooks
+  const { t } = await useTranslation();
+  return {
+    title: `${t("admin.admin_tools.admin_tools")} | Karakeep`,
+  };
+}
+
+export default function AdminToolsPage() {
+  return (
+    <div className="flex flex-col gap-6">
+      <BookmarkDebugger />
+    </div>
+  );
+}
diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx
index 4b589712..03144b78 100644
--- a/apps/web/app/admin/layout.tsx
+++ b/apps/web/app/admin/layout.tsx
@@ -6,7 +6,7 @@ import Sidebar from "@/components/shared/sidebar/Sidebar";
 import SidebarLayout from "@/components/shared/sidebar/SidebarLayout";
 import { getServerAuthSession } from "@/server/auth";
 import { TFunction } from "i18next";
-import { Activity, ArrowLeft, Settings, Users } from "lucide-react";
+import { Activity, ArrowLeft, Settings, Users, Wrench } from "lucide-react";
 
 const adminSidebarItems = (
   t: TFunction,
@@ -35,6 +35,11 @@ const adminSidebarItems = (
     icon: <Settings size={18} />,
     path: "/admin/background_jobs",
   },
+  {
+    name: t("admin.admin_tools.admin_tools"),
+    icon: <Wrench size={18} />,
+    path: "/admin/admin_tools",
+  },
 ];
 
 export default async function AdminLayout({
diff --git a/apps/web/app/admin/users/page.tsx b/apps/web/app/admin/users/page.tsx
index 5af899a4..3c178e79 100644
--- a/apps/web/app/admin/users/page.tsx
+++ b/apps/web/app/admin/users/page.tsx
@@ -1,5 +1,9 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
+import InvitesList from "@/components/admin/InvitesList";
+import InvitesListSkeleton from "@/components/admin/InvitesListSkeleton";
 import UserList from "@/components/admin/UserList";
+import UserListSkeleton from "@/components/admin/UserListSkeleton";
 import { useTranslation } from "@/lib/i18n/server";
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -11,5 +15,14 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function AdminUsersPage() {
-  return <UserList />;
+  return (
+    <div className="flex flex-col gap-4">
+      <Suspense fallback={<UserListSkeleton />}>
+        <UserList />
+      </Suspense>
+      <Suspense fallback={<InvitesListSkeleton />}>
+        <InvitesList />
+      </Suspense>
+    </div>
+  );
 }