From 6e91cded2da70483289a80759385c8ded96d847f Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Wed, 23 Apr 2025 17:35:19 +0200
Subject: [PATCH 1/8] Fix CI running twice for development

---
 .github/workflows/ci.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c0b1410..396a9cd 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,9 +1,6 @@
 name: CI
 
 on:
-  push:
-    branches:
-      - development
   pull_request:
     branches:
       - main

From 9c4b8c064f106e58524701cc435e075d9c9cba26 Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Wed, 23 Apr 2025 19:00:30 +0200
Subject: [PATCH 2/8] Add dbml schema

---
 packages/db/src/schema/index.ts |   7 +-
 schema.dbml                     | 209 ++++++++++++++++++++++++++++++++
 2 files changed, 213 insertions(+), 3 deletions(-)
 create mode 100644 schema.dbml

diff --git a/packages/db/src/schema/index.ts b/packages/db/src/schema/index.ts
index ce789dd..bfc2f3f 100644
--- a/packages/db/src/schema/index.ts
+++ b/packages/db/src/schema/index.ts
@@ -442,9 +442,10 @@ export const verificationTokens = pgTable(
     token: varchar("token", { length: 255 }).notNull(),
     expires: timestamp("expires").notNull(),
   },
-  (t) => ({
-    pk: primaryKey({ columns: [t.identifier, t.token] }),
-  })
+  (t) => [
+    primaryKey({ columns: [t.identifier, t.token] }),
+    index("verification_token_idx").on(t.identifier, t.token),
+  ]
 );
 
 // Assets table for storing uploaded files
diff --git a/schema.dbml b/schema.dbml
new file mode 100644
index 0000000..757e2f8
--- /dev/null
+++ b/schema.dbml
@@ -0,0 +1,209 @@
+// Database Markup Language for NextWiki Schema
+
+// Define PostgreSQL specific types or extensions if needed
+// Note: pg_trgm extension is used but not representable directly in standard DBML
+// Note: tsvector type is used but not representable directly in standard DBML
+
+Enum editor_type {
+  markdown
+  html
+}
+
+Table USERS {
+  id int [pk, increment]
+  name varchar(255)
+  email varchar(255) [unique, not null]
+  password varchar(255)
+  email_verified timestamp
+  image text
+  created_at timestamp [default: `now()`]
+  updated_at timestamp [default: `now()`]
+
+  indexes {
+    email_idx (email)
+  }
+}
+
+Table PERMISSIONS {
+  id int [pk, increment]
+  module varchar(50) [not null]
+  resource varchar(50) [not null]
+  action varchar(50) [not null]
+  name varchar(100) [unique, not null, note: 'Generated: module || ":" || resource || ":" || action']
+  description text
+  created_at timestamp [default: `now()`]
+}
+
+Table GROUPS {
+  id int [pk, increment]
+  name varchar(100) [unique, not null]
+  description text
+  created_at timestamp [default: `now()`]
+  updated_at timestamp [default: `now()`]
+  is_system boolean [default: false]
+  is_editable boolean [default: true]
+  allow_user_assignment boolean [default: true]
+}
+
+Table USER_GROUPS {
+  user_id int [not null, ref: > USERS.id]
+  group_id int [not null, ref: > GROUPS.id]
+  created_at timestamp [default: `now()`]
+
+  indexes {
+    (user_id, group_id) [pk]
+    user_group_idx (user_id, group_id)
+  }
+}
+
+Table GROUP_PERMISSIONS {
+  group_id int [not null, ref: > GROUPS.id]
+  permission_id int [not null, ref: > PERMISSIONS.id]
+  created_at timestamp [default: `now()`]
+
+  indexes {
+    (group_id, permission_id) [pk]
+    group_permission_idx (group_id, permission_id)
+  }
+}
+
+Table GROUP_MODULE_PERMISSIONS {
+  group_id int [not null, ref: > GROUPS.id]
+  module varchar(50) [not null]
+  created_at timestamp [default: `now()`]
+
+  indexes {
+    (group_id, module) [pk]
+    group_module_permissions_idx (group_id, module)
+  }
+}
+
+Table GROUP_ACTION_PERMISSIONS {
+  group_id int [not null, ref: > GROUPS.id]
+  action varchar(50) [not null]
+  created_at timestamp [default: `now()`]
+
+  indexes {
+    (group_id, action) [pk]
+    group_action_permissions_idx (group_id, action)
+  }
+}
+
+Table PAGE_PERMISSIONS {
+  id int [pk, increment]
+  page_id int [not null, ref: > WIKI_PAGES.id]
+  group_id int [ref: > GROUPS.id]
+  permission_id int [not null, ref: > PERMISSIONS.id]
+  permission_type varchar(10) [not null, default: 'allow'] // 'allow' or 'deny'
+  created_at timestamp [default: `now()`]
+
+  indexes {
+     // Note: Drizzle schema has index on (pageId, permissionId, groupId) which implies uniqueness
+     // DBML might require explicitly marking as unique if needed.
+    page_group_perm_idx (page_id, permission_id, group_id)
+  }
+}
+
+Table WIKI_PAGES {
+  id int [pk, increment]
+  path varchar(1000) [unique, not null]
+  title varchar(255) [not null]
+  content text
+  rendered_html text
+  editor_type editor_type
+  is_published boolean [default: false]
+  created_by_id int [not null, ref: > USERS.id]
+  created_at timestamp [default: `now()`]
+  updated_by_id int [not null, ref: > USERS.id]
+  updated_at timestamp [default: `now()`]
+  rendered_html_updated_at timestamp
+  locked_by_id int [ref: > USERS.id]
+  locked_at timestamp
+  lock_expires_at timestamp
+  search text [not null, note: "Generated tsvector: setweight(to_tsvector('english', title), 'A') || setweight(to_tsvector('english', content), 'B')"] // Representing tsvector as text
+
+  indexes {
+    idx_search (search)
+    trgm_idx_title (title)
+  }
+}
+
+Table WIKI_PAGE_REVISIONS {
+  id int [pk, increment]
+  page_id int [not null, ref: > WIKI_PAGES.id]
+  content text [not null]
+  created_by_id int [ref: > USERS.id]
+  created_at timestamp [default: `now()`]
+}
+
+Table WIKI_TAGS {
+  id int [pk, increment]
+  name varchar(100) [unique, not null]
+  description text
+  created_at timestamp [default: `now()`]
+}
+
+Table WIKI_PAGE_TO_TAG {
+  page_id int [not null, ref: > WIKI_PAGES.id]
+  tag_id int [not null, ref: > WIKI_TAGS.id]
+
+  indexes {
+    (page_id, tag_id) [pk]
+  }
+}
+
+Table ACCOUNTS {
+  id int [pk, increment]
+  user_id int [not null, ref: > USERS.id]
+  type varchar(255) [not null]
+  provider varchar(255) [not null]
+  provider_account_id varchar(255) [not null]
+  refresh_token text
+  access_token text
+  expires_at int
+  token_type varchar(255)
+  scope varchar(255)
+  id_token text
+  session_state varchar(255)
+  created_at timestamp [default: `now()`]
+  updated_at timestamp [default: `now()`]
+}
+
+Table SESSIONS {
+  id int [pk, increment]
+  session_token varchar(255) [unique, not null]
+  user_id int [not null, ref: > USERS.id]
+  expires timestamp [not null]
+}
+
+Table VERIFICATION_TOKENS {
+  identifier varchar(255) [not null]
+  token varchar(255) [not null]
+  expires timestamp [not null]
+
+  indexes {
+    (identifier, token) [pk]
+  }
+}
+
+Table ASSETS {
+  id uuid [pk, default: `random_uuid()`] // Assuming DBML understands uuid or similar
+  name varchar(255)
+  description text
+  file_name varchar(255) [not null]
+  file_type varchar(100) [not null]
+  file_size int [not null]
+  data text [not null, note: 'Base64 encoded file data']
+  uploaded_by_id int [not null, ref: > USERS.id]
+  created_at timestamp [default: `now()`]
+}
+
+Table ASSETS_TO_PAGES {
+  asset_id uuid [not null, ref: > ASSETS.id]
+  page_id int [not null, ref: > WIKI_PAGES.id]
+
+  indexes {
+    (asset_id, page_id) [pk]
+    asset_page_idx (asset_id, page_id)
+  }
+}
\ No newline at end of file

From 3c2aeaa450a3d12f0fd1e30ddcecb1f26a98f489 Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Wed, 23 Apr 2025 21:50:40 +0200
Subject: [PATCH 3/8] Refactor permissions to use exernalized action and module
 tables

---
 apps/web/src/app/admin/assets/page.tsx        |  13 +-
 apps/web/src/app/admin/dashboard/page.tsx     |   2 +-
 .../src/app/admin/groups/[id]/edit/page.tsx   |  62 ++--
 .../groups/[id]/users/add-users-modal.tsx     |  11 +-
 .../src/app/admin/groups/[id]/users/page.tsx  |  11 +-
 apps/web/src/app/admin/groups/group-form.tsx  | 245 ++++++++------
 apps/web/src/app/admin/groups/groups-list.tsx |  18 +-
 apps/web/src/app/admin/groups/page.tsx        |   4 +-
 apps/web/src/app/admin/users/page.tsx         |  12 +-
 .../web/src/components/layout/AdminLayout.tsx |   8 +-
 apps/web/src/lib/services/actions.ts          |  39 +++
 apps/web/src/lib/services/authorization.ts    | 104 ++++--
 apps/web/src/lib/services/groups.ts           |  70 ++--
 apps/web/src/lib/services/index.ts            |  16 +-
 apps/web/src/lib/services/modules.ts          |  39 +++
 apps/web/src/lib/services/permissions.ts      |  45 ++-
 apps/web/src/lib/services/users.ts            |  29 ++
 apps/web/src/server/routers/admin/groups.ts   |  48 ++-
 .../src/server/routers/admin/permissions.ts   |  23 +-
 apps/web/src/server/routers/admin/system.ts   |   2 -
 apps/web/src/server/routers/admin/users.ts    |   1 +
 apps/web/src/server/routers/auth.ts           |  50 ++-
 package.json                                  |   1 +
 ...0_light_sumo.sql => 0000_silly_iceman.sql} |  56 +++-
 packages/db/drizzle/meta/0000_snapshot.json   | 259 +++++++++++---
 packages/db/drizzle/meta/_journal.json        |   4 +-
 packages/db/src/schema/index.ts               |  92 ++++-
 packages/db/src/seeds/permissions.ts          | 315 +++++++++++++-----
 packages/tailwind-config/tailwind.config.ts   |   2 +-
 packages/ui/src/components/table.tsx          |  12 +-
 packages/ui/src/components/tabs.tsx           |   4 +-
 packages/ui/src/styles/globals.css            |   6 +-
 schema.dbml                                   |  47 ++-
 33 files changed, 1190 insertions(+), 460 deletions(-)
 create mode 100644 apps/web/src/lib/services/actions.ts
 create mode 100644 apps/web/src/lib/services/modules.ts
 rename packages/db/drizzle/{0000_light_sumo.sql => 0000_silly_iceman.sql} (85%)

diff --git a/apps/web/src/app/admin/assets/page.tsx b/apps/web/src/app/admin/assets/page.tsx
index d2dd008..e20a776 100644
--- a/apps/web/src/app/admin/assets/page.tsx
+++ b/apps/web/src/app/admin/assets/page.tsx
@@ -14,6 +14,17 @@ import {
   SelectValue,
 } from "@repo/ui";
 
+/* TODO: A lot to be done here and for assets in general
+ * - Add pagination URGENT
+ * - Add search
+ * - Add filter by file type
+ * - Add filter by uploaded by
+ * - Add filter by page
+ * - Add filter by date
+ * - Implement preview for images
+ * - Implement download
+ */
+
 export default function AssetsAdminPage() {
   const notification = useNotification();
   const [searchTerm, setSearchTerm] = useState("");
@@ -69,7 +80,7 @@ export default function AssetsAdminPage() {
     : [];
 
   return (
-    <div className="container mx-auto px-6">
+    <div className="container mx-auto px-6 py-3">
       <h1 className="mb-6 text-3xl font-bold">Asset Management</h1>
 
       {/* Search and filter controls */}
diff --git a/apps/web/src/app/admin/dashboard/page.tsx b/apps/web/src/app/admin/dashboard/page.tsx
index 634c36c..6946277 100644
--- a/apps/web/src/app/admin/dashboard/page.tsx
+++ b/apps/web/src/app/admin/dashboard/page.tsx
@@ -139,7 +139,7 @@ export default function AdminDashboardPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-4">
       <div>
         <h1 className="text-2xl font-bold">Admin Dashboard</h1>
         <p className="text-text-secondary">Overview of your NextWiki system</p>
diff --git a/apps/web/src/app/admin/groups/[id]/edit/page.tsx b/apps/web/src/app/admin/groups/[id]/edit/page.tsx
index d7a3e22..9ec6c1e 100644
--- a/apps/web/src/app/admin/groups/[id]/edit/page.tsx
+++ b/apps/web/src/app/admin/groups/[id]/edit/page.tsx
@@ -4,6 +4,9 @@ import { redirect } from "next/navigation";
 import { dbService } from "~/lib/services";
 import GroupForm from "../../group-form";
 import { notFound } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@repo/ui";
+import Link from "next/link";
 
 interface EditGroupPageProps {
   params: {
@@ -14,17 +17,23 @@ interface EditGroupPageProps {
 export async function generateMetadata({
   params,
 }: EditGroupPageProps): Promise<Metadata> {
-  const group = await dbService.groups.getById(parseInt(params.id));
+  const groupId = parseInt((await params).id);
+  if (isNaN(groupId)) {
+    return { title: "Invalid Group | NextWiki" };
+  }
+  const group = await dbService.groups.getById(groupId);
   return {
     title: `Edit ${group?.name ?? "Group"} | NextWiki`,
     description: "Edit user group settings and permissions",
   };
 }
 
-export default async function EditGroupPage(
-  propsPromise: Promise<EditGroupPageProps>
-) {
-  const { params } = await propsPromise;
+export default async function EditGroupPage({ params }: EditGroupPageProps) {
+  const groupId = parseInt((await params).id);
+  if (isNaN(groupId)) {
+    notFound();
+  }
+
   const session = await getServerAuthSession();
 
   // Redirect if not logged in
@@ -37,33 +46,44 @@ export default async function EditGroupPage(
     redirect("/");
   }
 
-  const group = await dbService.groups.getById(parseInt(params.id));
+  const group = await dbService.groups.getById(groupId);
   if (!group) {
     notFound();
   }
 
-  // Get all permissions
-  const permissions = await dbService.permissions.getAll();
+  // Get all permissions (already includes module and action names)
+  const fetchedPermissions = await dbService.permissions.getAll();
+
+  // Transform permissions to include the synthesized 'name' expected by GroupForm
+  const permissionsForForm = fetchedPermissions.map((p) => ({
+    ...p,
+    name: `${p.module.name}:${p.resource}:${p.action.name}`, // Synthesize the name
+  }));
 
   // Get group permissions
-  const groupPermissions = await dbService.groups.getGroupPermissions(group.id);
+  const groupPermissions = await dbService.groups.getGroupPermissions(groupId);
   const groupPermissionIds = groupPermissions.map((p) => p.id);
 
   // Get module permissions
-  const modulePermissions = await dbService.groups.getModulePermissions(
-    group.id
-  );
-  const modulePermissionModules = modulePermissions.map((p) => p.module);
+  const modulePermissions =
+    await dbService.groups.getModulePermissions(groupId);
+  const initialSelectedModuleIds = modulePermissions.map((p) => p.moduleId);
 
   // Get action permissions
-  const actionPermissions = await dbService.groups.getActionPermissions(
-    group.id
-  );
-  const actionPermissionActions = actionPermissions.map((p) => p.action);
+  const actionPermissions =
+    await dbService.groups.getActionPermissions(groupId);
+  const initialSelectedActionIds = actionPermissions.map((p) => p.actionId);
 
   return (
     <div className="container mx-auto p-6">
-      <h1 className="mb-6 text-3xl font-bold">Edit Group</h1>
+      <div className="mb-6 flex items-center">
+        <Link href="/admin/groups">
+          <Button variant="ghost" size="icon" className="mr-2">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        </Link>
+        <h1 className="text-3xl font-bold">Edit Group: {group.name}</h1>
+      </div>
 
       <div className="bg-card rounded-lg p-6 shadow-sm">
         <p className="text-muted-foreground mb-6">
@@ -82,10 +102,10 @@ export default async function EditGroupPage(
                 ? undefined
                 : group.allowUserAssignment,
           }}
-          permissions={permissions}
+          permissions={permissionsForForm}
           groupPermissions={groupPermissionIds}
-          groupModulePermissions={modulePermissionModules}
-          groupActionPermissions={actionPermissionActions}
+          initialSelectedModuleIds={initialSelectedModuleIds}
+          initialSelectedActionIds={initialSelectedActionIds}
         />
       </div>
     </div>
diff --git a/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx b/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx
index d8b0701..38b732a 100644
--- a/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx
+++ b/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx
@@ -131,7 +131,7 @@ export default function AddUsersModal({
             </h3>
 
             <div className="relative mb-6">
-              <Search className="text-text-secondary absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+              <Search className="text-text-tertiary absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
               <Input
                 className="pl-10"
                 placeholder="Search users by name or email"
@@ -148,10 +148,10 @@ export default function AddUsersModal({
                   <Loader2 className="text-primary h-6 w-6 animate-spin" />
                 </div>
               ) : filteredUsers && filteredUsers.length > 0 ? (
-                <div className="max-h-[50vh] overflow-auto rounded-md border">
+                <div className="border-border-default max-h-[50vh] overflow-auto rounded-md border">
                   <table className="w-full">
                     <thead className="bg-background-paper sticky top-0 z-10">
-                      <tr className="border-b">
+                      <tr className="border-border-default border-b">
                         <th className="p-3"></th>
                         <th className="p-3 text-left">Name</th>
                         <th className="p-3 text-left">Email</th>
@@ -159,7 +159,10 @@ export default function AddUsersModal({
                     </thead>
                     <tbody>
                       {filteredUsers.map((user) => (
-                        <tr key={user.id} className="border-b">
+                        <tr
+                          key={user.id}
+                          className="hover:bg-background-level2"
+                        >
                           <td className="p-3 text-center">
                             <Checkbox
                               checked={selectedUsers.includes(user.id)}
diff --git a/apps/web/src/app/admin/groups/[id]/users/page.tsx b/apps/web/src/app/admin/groups/[id]/users/page.tsx
index 9a64cda..3f7a056 100644
--- a/apps/web/src/app/admin/groups/[id]/users/page.tsx
+++ b/apps/web/src/app/admin/groups/[id]/users/page.tsx
@@ -16,8 +16,9 @@ export const metadata: Metadata = {
 export default async function GroupUsersPage({
   params,
 }: {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }) {
+  const { id } = await params;
   const session = await getServerAuthSession();
 
   // Redirect if not logged in
@@ -30,7 +31,7 @@ export default async function GroupUsersPage({
     redirect("/");
   }
 
-  const groupId = parseInt(params.id);
+  const groupId = parseInt(id);
   const group = await dbService.groups.getById(groupId);
 
   if (!group) {
@@ -61,10 +62,10 @@ export default async function GroupUsersPage({
         </p>
 
         {users.length > 0 ? (
-          <div className="rounded-md border">
+          <div className="border-border-default rounded-md border">
             <table className="w-full">
               <thead>
-                <tr className="border-b">
+                <tr className="border-border-default border-b">
                   <th className="px-4 py-3 text-left">Name</th>
                   <th className="px-4 py-3 text-left">Email</th>
                   <th className="px-4 py-3 text-right">Actions</th>
@@ -72,7 +73,7 @@ export default async function GroupUsersPage({
               </thead>
               <tbody>
                 {users.map((user) => (
-                  <tr key={user.id} className="border-b">
+                  <tr key={user.id} className="hover:bg-background-level2">
                     <td className="px-4 py-3 font-medium">{user.name}</td>
                     <td className="px-4 py-3">{user.email}</td>
                     <td className="px-4 py-3 text-right">
diff --git a/apps/web/src/app/admin/groups/group-form.tsx b/apps/web/src/app/admin/groups/group-form.tsx
index 9d4888d..a6864fb 100644
--- a/apps/web/src/app/admin/groups/group-form.tsx
+++ b/apps/web/src/app/admin/groups/group-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import {
   Button,
@@ -31,32 +31,38 @@ interface GroupFormProps {
     id: number;
     name: string;
     description: string | null;
-    module: string;
+    moduleId: number;
     resource: string;
-    action: string;
+    actionId: number;
+    module?: { name: string };
+    action?: { name: string };
   }[];
   groupPermissions?: number[];
-  groupModulePermissions?: string[];
-  groupActionPermissions?: string[];
+  initialSelectedModuleIds?: number[];
+  initialSelectedActionIds?: number[];
+  initialSelectedModuleNames?: string[];
+  initialSelectedActionNames?: string[];
 }
 
 export default function GroupForm({
   group,
   permissions,
   groupPermissions = [],
-  groupModulePermissions = [],
-  groupActionPermissions = [],
+  initialSelectedModuleIds,
+  initialSelectedActionIds,
+  initialSelectedModuleNames = [],
+  initialSelectedActionNames = [],
 }: GroupFormProps) {
   const router = useRouter();
   const [name, setName] = useState(group?.name ?? "");
   const [description, setDescription] = useState(group?.description ?? "");
   const [selectedPermissions, setSelectedPermissions] =
     useState<number[]>(groupPermissions);
-  const [selectedModules, setSelectedModules] = useState<string[]>(
-    groupModulePermissions
+  const [selectedModules, setSelectedModules] = useState<number[]>(
+    initialSelectedModuleIds ?? []
   );
-  const [selectedActions, setSelectedActions] = useState<string[]>(
-    groupActionPermissions
+  const [selectedActions, setSelectedActions] = useState<number[]>(
+    initialSelectedActionIds ?? []
   );
 
   const isSystem = group?.isSystem ?? false;
@@ -66,13 +72,60 @@ export default function GroupForm({
   const trpc = useTRPC();
 
   // Fetch available modules and actions
-  const { data: availableModules = [] } = useQuery(
+  const { data: availableModules = [], isLoading: modulesLoading } = useQuery(
     trpc.admin.permissions.getModules.queryOptions()
   );
-  const { data: availableActions = [] } = useQuery(
+  const { data: availableActions = [], isLoading: actionsLoading } = useQuery(
     trpc.admin.permissions.getActions.queryOptions()
   );
 
+  // Effect to initialize selected IDs from names once data is loaded
+  useEffect(() => {
+    if (
+      !modulesLoading &&
+      Array.isArray(availableModules) &&
+      initialSelectedModuleNames.length > 0 &&
+      availableModules.length > 0 &&
+      selectedModules.length === 0
+    ) {
+      const moduleNameToIdMap = new Map(
+        availableModules.map((m) => [m.name, m.id])
+      );
+      const ids = initialSelectedModuleNames
+        .map((name) => moduleNameToIdMap.get(name))
+        .filter((id): id is number => id !== undefined);
+      setSelectedModules(ids);
+    }
+  }, [
+    modulesLoading,
+    availableModules,
+    initialSelectedModuleNames,
+    selectedModules,
+  ]);
+
+  useEffect(() => {
+    if (
+      !actionsLoading &&
+      Array.isArray(availableActions) &&
+      initialSelectedActionNames.length > 0 &&
+      availableActions.length > 0 &&
+      selectedActions.length === 0
+    ) {
+      const actionNameToIdMap = new Map(
+        availableActions.map((a) => [a.name, a.id])
+      );
+      const ids = initialSelectedActionNames
+        .map((name) => actionNameToIdMap.get(name))
+        .filter((id): id is number => id !== undefined);
+      setSelectedActions(ids);
+    }
+  }, [
+    actionsLoading,
+    availableActions,
+    initialSelectedActionNames,
+    selectedActions,
+  ]);
+
   const createGroup = useMutation(
     trpc.admin.groups.create.mutationOptions({
       onSuccess: () => {
@@ -162,19 +215,13 @@ export default function GroupForm({
         // Update module permissions
         await addModulePermissions.mutateAsync({
           groupId: updatedGroup.id,
-          permissions: selectedModules.map((module) => ({
-            module,
-            isAllowed: true,
-          })),
+          moduleIds: selectedModules,
         });
 
         // Update action permissions
         await addActionPermissions.mutateAsync({
           groupId: updatedGroup.id,
-          permissions: selectedActions.map((action) => ({
-            action,
-            isAllowed: true,
-          })),
+          actionIds: selectedActions,
         });
       } else {
         // Create new group
@@ -196,19 +243,13 @@ export default function GroupForm({
         // Add module permissions
         await addModulePermissions.mutateAsync({
           groupId: newGroup.id,
-          permissions: selectedModules.map((module) => ({
-            module,
-            isAllowed: true,
-          })),
+          moduleIds: selectedModules,
         });
 
         // Add action permissions
         await addActionPermissions.mutateAsync({
           groupId: newGroup.id,
-          permissions: selectedActions.map((action) => ({
-            action,
-            isAllowed: true,
-          })),
+          actionIds: selectedActions,
         });
       }
     } catch (error) {
@@ -219,10 +260,17 @@ export default function GroupForm({
   // Group permissions by module
   const permissionsByModule = permissions.reduce(
     (acc, permission) => {
-      if (!acc[permission.module]) {
-        acc[permission.module] = [];
+      if (!permission.module) {
+        return acc;
+      }
+      if (!acc[permission.module.name]) {
+        acc[permission.module.name] = [];
       }
-      acc[permission.module]?.push(permission);
+      const moduleKey = permission.module.name;
+      if (!acc[moduleKey]) {
+        acc[moduleKey] = [];
+      }
+      acc[moduleKey]?.push(permission);
       return acc;
     },
     {} as Record<string, typeof permissions>
@@ -235,14 +283,14 @@ export default function GroupForm({
       // If no actions are selected, all actions are allowed
       if (selectedActions.length === 0) return true;
       // Otherwise, check if the action is allowed
-      return selectedActions.includes(permission.action);
+      return selectedActions.includes(permission.actionId);
     }
     // If modules are selected, check if the module is allowed
-    if (!selectedModules.includes(permission.module)) return false;
+    if (!selectedModules.includes(permission.moduleId)) return false;
     // If actions are selected, check if the action is allowed
     if (
       selectedActions.length > 0 &&
-      !selectedActions.includes(permission.action)
+      !selectedActions.includes(permission.actionId)
     )
       return false;
     return true;
@@ -275,7 +323,7 @@ export default function GroupForm({
           />
         </div>
         {isSystem && (
-          <div className="bg-muted rounded-lg border p-4 text-sm">
+          <div className="dark:bg-warning-800/80 bg-background-level1 border-primary rounded-lg border p-4 text-sm shadow-md">
             <p className="font-medium">This is a system group</p>
             <p>
               You can manage permissions for this group, but the name and
@@ -284,7 +332,7 @@ export default function GroupForm({
           </div>
         )}
         {name === "Administrators" && (
-          <div className="bg-muted rounded-lg border border-amber-200 p-4 text-sm">
+          <div className="bg-background-level1 border-warning rounded-lg border p-4 text-sm shadow-md">
             <p className="font-medium">Administrator Group</p>
             <p>
               The Administrators group has full access to all system features by
@@ -297,7 +345,7 @@ export default function GroupForm({
       <div className="grid grid-cols-12 gap-6">
         {/* Main permissions area */}
         <div className="col-span-8">
-          <div className="bg-card rounded-lg border p-4">
+          <div className="bg-background-level1 border-border-default rounded-lg border p-4">
             <h2 className="mb-4 text-lg font-semibold">Permissions</h2>
             <div className="space-y-6">
               {Object.entries(permissionsByModule).map(
@@ -342,7 +390,7 @@ export default function GroupForm({
                                   <label
                                     htmlFor={`permission-${permission.id}`}
                                     className={`text-sm ${
-                                      !isAllowed ? "text-muted-foreground" : ""
+                                      !isAllowed ? "text-text-tertiary" : ""
                                     }`}
                                   >
                                     {permission.description}
@@ -353,18 +401,23 @@ export default function GroupForm({
                                 <TooltipContent>
                                   <p>
                                     This permission is not available because:
-                                    {!selectedModules.includes(module) && (
+                                    {!selectedModules.includes(
+                                      permission.moduleId
+                                    ) && (
                                       <span className="block">
-                                        • The {module} module is not selected
+                                        • The{" "}
+                                        {permission.module?.name ?? "module"}{" "}
+                                        module is not selected
                                       </span>
                                     )}
                                     {selectedActions.length > 0 &&
                                       !selectedActions.includes(
-                                        permission.action
+                                        permission.actionId
                                       ) && (
                                         <span className="block">
-                                          • The {permission.action} action is
-                                          not allowed
+                                          • The{" "}
+                                          {permission.action?.name ?? "action"}{" "}
+                                          action is not allowed
                                         </span>
                                       )}
                                   </p>
@@ -385,80 +438,64 @@ export default function GroupForm({
         {/* Permissions sidebar */}
         <div className="col-span-4 space-y-6">
           {/* Modules */}
-          <div className="bg-card rounded-lg border p-4">
+          <div className="bg-background-level1 border-border-default rounded-lg border p-4">
             <h2 className="mb-4 text-lg font-semibold">Module Permissions</h2>
-            <p className="text-muted-foreground mb-4 text-sm">
+            <p className="text-text-tertiary mb-4 text-sm">
               Select which modules this group can access. If no modules are
               selected, all modules are allowed.
             </p>
             <div className="grid gap-2">
-              {availableModules.map((module: string) => (
-                <div key={module} className="flex items-center space-x-2">
-                  <Checkbox
-                    id={`module-${module}`}
-                    checked={selectedModules.includes(module)}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      if (e.target.checked) {
-                        setSelectedModules([...selectedModules, module]);
-                      } else {
-                        setSelectedModules(
-                          selectedModules.filter((m) => m !== module)
-                        );
-                        // Remove permissions for this module when it's unselected
-                        setSelectedPermissions(
-                          selectedPermissions.filter(
-                            (id) =>
-                              !permissions.find(
-                                (p) => p.id === id && p.module === module
-                              )
-                          )
-                        );
-                      }
-                    }}
-                    disabled={name === "Administrators"}
-                  />
-                  <Label htmlFor={`module-${module}`}>{module}</Label>
-                </div>
-              ))}
+              {Array.isArray(availableModules) &&
+                availableModules.map((module) => (
+                  <div key={module.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`module-${module.id}`}
+                      checked={selectedModules.includes(module.id)}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        if (e.target.checked) {
+                          setSelectedModules([...selectedModules, module.id]);
+                        } else {
+                          setSelectedModules(
+                            selectedModules.filter((id) => id !== module.id)
+                          );
+                        }
+                      }}
+                      disabled={name === "Administrators"}
+                    />
+                    <Label htmlFor={`module-${module.id}`}>{module.name}</Label>
+                  </div>
+                ))}
             </div>
           </div>
 
           {/* Actions */}
-          <div className="bg-card rounded-lg border p-4">
+          <div className="bg-background-level1 border-border-default rounded-lg border p-4">
             <h2 className="mb-4 text-lg font-semibold">Action Permissions</h2>
-            <p className="text-muted-foreground mb-4 text-sm">
+            <p className="text-text-tertiary mb-4 text-sm">
               Select which actions this group can perform. If no actions are
               selected, all actions are allowed.
             </p>
             <div className="grid gap-2">
-              {availableActions.map((action: string) => (
-                <div key={action} className="flex items-center space-x-2">
-                  <Checkbox
-                    id={`action-${action}`}
-                    checked={selectedActions.includes(action)}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      if (e.target.checked) {
-                        setSelectedActions([...selectedActions, action]);
-                      } else {
-                        setSelectedActions(
-                          selectedActions.filter((a) => a !== action)
-                        );
-                        // Remove permissions for this action when it's unselected
-                        setSelectedPermissions(
-                          selectedPermissions.filter(
-                            (id) =>
-                              !permissions.find(
-                                (p) => p.id === id && p.action === action
-                              )
-                          )
-                        );
-                      }
-                    }}
-                    disabled={name === "Administrators"}
-                  />
-                  <Label htmlFor={`action-${action}`}>{action}</Label>
-                </div>
-              ))}
+              {Array.isArray(availableActions) &&
+                availableActions.map((action) => (
+                  <div key={action.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`action-${action.id}`}
+                      checked={selectedActions.includes(action.id)}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        if (e.target.checked) {
+                          setSelectedActions([...selectedActions, action.id]);
+                        } else {
+                          setSelectedActions(
+                            selectedActions.filter((id) => id !== action.id)
+                          );
+                        }
+                      }}
+                      disabled={name === "Administrators"}
+                    />
+                    <Label htmlFor={`action-${action.id}`}>{action.name}</Label>
+                  </div>
+                ))}
             </div>
           </div>
         </div>
diff --git a/apps/web/src/app/admin/groups/groups-list.tsx b/apps/web/src/app/admin/groups/groups-list.tsx
index 0483ec3..fd14b1b 100644
--- a/apps/web/src/app/admin/groups/groups-list.tsx
+++ b/apps/web/src/app/admin/groups/groups-list.tsx
@@ -48,7 +48,7 @@ export default function GroupsList({ groups: initialGroups }: GroupsListProps) {
   };
 
   return (
-    <div className="rounded-md border">
+    <div className="border-border rounded-md border">
       <Table>
         <TableHeader>
           <TableRow>
@@ -83,11 +83,17 @@ export default function GroupsList({ groups: initialGroups }: GroupsListProps) {
               <TableCell className="text-right">
                 <div className="flex justify-end gap-2">
                   <ClientRequirePermission permission="system:groups:update">
-                    <Link href={`/admin/groups/${group.id}/users`}>
-                      <Button variant="ghost" size="icon" title="Manage Users">
-                        <Users className="h-4 w-4" />
-                      </Button>
-                    </Link>
+                    {group.allowUserAssignment && (
+                      <Link href={`/admin/groups/${group.id}/users`}>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          title="Manage Users"
+                        >
+                          <Users className="h-4 w-4" />
+                        </Button>
+                      </Link>
+                    )}
                   </ClientRequirePermission>
                   <ClientRequirePermission permission="system:groups:update">
                     <Link href={`/admin/groups/${group.id}/edit`}>
diff --git a/apps/web/src/app/admin/groups/page.tsx b/apps/web/src/app/admin/groups/page.tsx
index 8f92e67..d951c7b 100644
--- a/apps/web/src/app/admin/groups/page.tsx
+++ b/apps/web/src/app/admin/groups/page.tsx
@@ -43,7 +43,7 @@ export default async function GroupsPage() {
     <div className="container mx-auto p-6">
       <h1 className="mb-6 text-3xl font-bold">Groups Management</h1>
 
-      <div className="bg-card rounded-lg p-6 shadow-sm">
+      <div className="bg-background-level1 rounded-lg p-6 shadow-sm">
         <div className="mb-4 flex items-center justify-between">
           <h2 className="text-xl font-semibold">User Groups</h2>
           {canCreateGroups && (
@@ -52,7 +52,7 @@ export default async function GroupsPage() {
             </Button>
           )}
         </div>
-        <p className="text-muted-foreground mb-6">
+        <p className="text-text-tertiary mb-6">
           User groups allow you to organize users and assign permissions to them
           collectively. Each group can have multiple permissions, and users can
           belong to multiple groups.
diff --git a/apps/web/src/app/admin/users/page.tsx b/apps/web/src/app/admin/users/page.tsx
index 937cbb9..4eb4923 100644
--- a/apps/web/src/app/admin/users/page.tsx
+++ b/apps/web/src/app/admin/users/page.tsx
@@ -11,7 +11,7 @@ import {
   TabsTrigger,
 } from "@repo/ui";
 import { useTRPC } from "~/server/client";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {
   usePermissions,
@@ -26,10 +26,14 @@ export default function AdminUsersPage() {
 
   // Fetch users
   const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
   const { data: users, isLoading: usersLoading } = useQuery(
     trpc.admin.users.getAll.queryOptions()
   );
 
+  const usersQueryKey = trpc.admin.users.getAll.queryKey();
+
   // Infer user type from the fetched data
   type FetchedUser = NonNullable<typeof users>[number];
 
@@ -131,8 +135,9 @@ export default function AdminUsersPage() {
           )
         );
       }
+
       // Optional: Refetch user data after successful save
-      // await utils.users.getAll.invalidate(); // Or invalidate specific user
+      queryClient.invalidateQueries({ queryKey: usersQueryKey });
       // handleUserSelect(updatedUserData); // Update selectedUser if data structure changes significantly post-save
     } catch (error) {
       // Errors are handled by individual mutation's onError, but you could add general handling here
@@ -141,7 +146,7 @@ export default function AdminUsersPage() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-4">
       <div>
         <div className="mb-2 flex items-center justify-between">
           <h1 className="text-2xl font-bold">User Management</h1>
@@ -244,7 +249,6 @@ export default function AdminUsersPage() {
                 <TabsList className="grid w-full grid-cols-2">
                   <TabsTrigger value="details">Details</TabsTrigger>
                   <TabsTrigger value="groups">Groups</TabsTrigger>
-                  {/* <TabsTrigger value="permissions">Permissions</TabsTrigger> */}
                 </TabsList>
 
                 <TabsContent value="details" className="mt-4 space-y-4">
diff --git a/apps/web/src/components/layout/AdminLayout.tsx b/apps/web/src/components/layout/AdminLayout.tsx
index f433400..d9c9268 100644
--- a/apps/web/src/components/layout/AdminLayout.tsx
+++ b/apps/web/src/components/layout/AdminLayout.tsx
@@ -4,6 +4,7 @@ import { ReactNode, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { env } from "~/env";
+import { cn, ScrollArea } from "@repo/ui";
 
 interface AdminLayoutProps {
   children: ReactNode;
@@ -301,9 +302,10 @@ export function AdminLayout({ children }: AdminLayoutProps) {
 
       {/* Main content */}
       <div
-        className={`flex flex-1 flex-col transition-all duration-300 ${
+        className={cn(
+          "flex h-screen flex-1 flex-col transition-all duration-300",
           collapsed ? "ml-16" : "ml-64"
-        }`}
+        )}
       >
         {/* Top bar */}
         <header className="bg-background-paper border-border-default sticky top-0 z-10 flex h-16 items-center border-b px-6">
@@ -318,7 +320,7 @@ export function AdminLayout({ children }: AdminLayoutProps) {
         </header>
 
         {/* Content */}
-        <main className="flex-1 overflow-y-auto p-6">{children}</main>
+        <ScrollArea className="flex-1 overflow-y-auto">{children}</ScrollArea>
       </div>
     </div>
   );
diff --git a/apps/web/src/lib/services/actions.ts b/apps/web/src/lib/services/actions.ts
new file mode 100644
index 0000000..dfc6b49
--- /dev/null
+++ b/apps/web/src/lib/services/actions.ts
@@ -0,0 +1,39 @@
+import { db } from "@repo/db";
+import { actions } from "@repo/db";
+import { eq } from "drizzle-orm";
+
+/**
+ * Action Service
+ *
+ * Handles operations related to permission actions
+ */
+export const actionService = {
+  /**
+   * Get all actions in the system
+   */
+  async getAll() {
+    return db.query.actions.findMany({
+      orderBy: (actions, { asc }) => [asc(actions.name)],
+    });
+  },
+
+  /**
+   * Get an action by ID
+   */
+  async getById(id: number) {
+    return db.query.actions.findFirst({
+      where: eq(actions.id, id),
+    });
+  },
+
+  /**
+   * Get an action by Name
+   */
+  async getByName(name: string) {
+    return db.query.actions.findFirst({
+      where: eq(actions.name, name),
+    });
+  },
+
+  // Add create, update, delete methods if needed later
+};
diff --git a/apps/web/src/lib/services/authorization.ts b/apps/web/src/lib/services/authorization.ts
index 7685f43..c14f279 100644
--- a/apps/web/src/lib/services/authorization.ts
+++ b/apps/web/src/lib/services/authorization.ts
@@ -5,6 +5,8 @@ import {
   permissions,
   pagePermissions,
   groups,
+  modules,
+  actions,
 } from "@repo/db";
 import { eq, and, inArray, or, isNull } from "drizzle-orm";
 import { PermissionIdentifier, validatePermissionId } from "@repo/db";
@@ -128,9 +130,13 @@ export const authorizationService = {
       return [];
     }
 
-    // Get permission details
+    // Get permission details, including related module and action names
     return db.query.permissions.findMany({
       where: inArray(permissions.id, permissionIds),
+      with: {
+        module: { columns: { name: true } }, // Include module name
+        action: { columns: { name: true } }, // Include action name
+      },
     });
   },
 
@@ -153,24 +159,48 @@ export const authorizationService = {
       return false;
     }
 
-    // 1. Parse permission name and find the corresponding permission ID
-    const [module, resource, action] = permissionName.split(":");
-    if (!module || !resource || !action) {
+    // 1. Parse permission name and find the corresponding Module, Action, and Permission IDs
+    const [moduleName, resource, actionName] = permissionName.split(":");
+    if (!moduleName || !resource || !actionName) {
       logger.error(`Invalid permission format: ${permissionName}`);
       return false; // Invalid format
     }
 
+    // Fetch Module and Action IDs first
+    const [moduleRecord, actionRecord] = await Promise.all([
+      db.query.modules.findFirst({
+        where: eq(modules.name, moduleName),
+        columns: { id: true },
+      }),
+      db.query.actions.findFirst({
+        where: eq(actions.name, actionName),
+        columns: { id: true },
+      }),
+    ]);
+
+    if (!moduleRecord || !actionRecord) {
+      logger.warn(
+        `Module ('${moduleName}') or Action ('${actionName}') not found for permission: ${permissionName}`
+      );
+      return false; // Module or Action doesn't exist
+    }
+    const moduleId = moduleRecord.id;
+    const actionId = actionRecord.id;
+
+    // Now find the permission using IDs and resource
     const permission = await db.query.permissions.findFirst({
       where: and(
-        eq(permissions.module, module),
+        eq(permissions.moduleId, moduleId),
         eq(permissions.resource, resource),
-        eq(permissions.action, action)
+        eq(permissions.actionId, actionId)
       ),
       columns: { id: true }, // Only need the ID
     });
 
     if (!permission) {
-      // logger.warn(`Permission not found: ${permissionName}`);
+      logger.warn(
+        `Permission not found in DB for components: module=${moduleId}, resource=${resource}, action=${actionId}`
+      );
       return false; // Permission doesn't exist in the system
     }
     const permissionId = permission.id;
@@ -190,10 +220,10 @@ export const authorizationService = {
             columns: { permissionId: true },
           },
           groupModulePermissions: {
-            columns: { module: true },
+            columns: { moduleId: true },
           },
           groupActionPermissions: {
-            columns: { action: true },
+            columns: { actionId: true },
           },
         },
       });
@@ -213,7 +243,7 @@ export const authorizationService = {
 
       // Check module permissions
       const hasModulePermission = guestGroup.groupModulePermissions.some(
-        (mp) => mp.module === module
+        (mp) => mp.moduleId === moduleId
       );
       if (
         !hasModulePermission &&
@@ -224,7 +254,7 @@ export const authorizationService = {
 
       // Check action permissions
       const hasActionPermission = guestGroup.groupActionPermissions.some(
-        (ap) => ap.action === action
+        (ap) => ap.actionId === actionId
       );
       if (
         !hasActionPermission &&
@@ -237,7 +267,7 @@ export const authorizationService = {
       return true;
     }
 
-    // 2. Get all groups the user belongs to, including their permissions and permissions
+    // 2. Get all groups the user belongs to, including their relevant permissions
     const userGroupsData = await db.query.userGroups.findMany({
       where: eq(userGroups.userId, userId),
       with: {
@@ -246,18 +276,12 @@ export const authorizationService = {
             // Eagerly load necessary related data for checking
             groupPermissions: {
               columns: { permissionId: true }, // Only need permissionId
-              // Optimization: Could filter here if DB supports it well
-              // where: eq(groupPermissions.permissionId, permissionId)
             },
             groupModulePermissions: {
-              columns: { module: true }, // Only need module name
-              // Optimization: Could filter here
-              // where: eq(groupModulePermissions.module, module)
+              columns: { moduleId: true },
             },
             groupActionPermissions: {
-              columns: { action: true }, // Only need action name
-              // Optimization: Could filter here
-              // where: eq(groupActionPermissions.action, action)
+              columns: { actionId: true },
             },
           },
         },
@@ -286,7 +310,7 @@ export const authorizationService = {
       // Is this group restricted for the required module?
       // If the group has no module permissions, it is unrestricted
       const hasModulePermission = group.groupModulePermissions.some(
-        (mp) => mp.module === module
+        (mp) => mp.moduleId === moduleId
       );
       if (!hasModulePermission && group.groupModulePermissions.length > 0) {
         continue; // Module restricted for this group, try next group
@@ -295,7 +319,7 @@ export const authorizationService = {
       // Is this group restricted for the required action?
       // If the group has no action permissions, it is unrestricted
       const hasActionPermission = group.groupActionPermissions.some(
-        (ap) => ap.action === action
+        (ap) => ap.actionId === actionId
       );
       if (!hasActionPermission && group.groupActionPermissions.length > 0) {
         continue; // Action restricted for this group, try next group
@@ -347,30 +371,54 @@ export const authorizationService = {
     pageId: number,
     permissionName: PermissionIdentifier
   ) {
-    // Validate permission format
+    // Input validation remains the same
     if (!validatePermissionId(permissionName)) {
       logger.error(`Invalid permission format: ${permissionName}`);
       return false;
     }
 
     // Parse the permission name to get module, resource, and action
-    const [module, resource, action] = permissionName.split(":");
+    const [moduleName, resource, actionName] = permissionName.split(":");
 
-    if (!module || !resource || !action) {
+    if (!moduleName || !resource || !actionName) {
       return false;
     }
 
-    // Get the permission ID using the specific components
+    // Fetch Module and Action IDs first
+    const [moduleRecord, actionRecord] = await Promise.all([
+      db.query.modules.findFirst({
+        where: eq(modules.name, moduleName),
+        columns: { id: true },
+      }),
+      db.query.actions.findFirst({
+        where: eq(actions.name, actionName),
+        columns: { id: true },
+      }),
+    ]);
+
+    if (!moduleRecord || !actionRecord) {
+      logger.warn(
+        `Module ('${moduleName}') or Action ('${actionName}') not found for permission: ${permissionName}`
+      );
+      return false; // Module or Action doesn't exist
+    }
+    const moduleId = moduleRecord.id;
+    const actionId = actionRecord.id;
+
+    // Find the permission ID using fetched IDs and resource
     const permission = await db.query.permissions.findFirst({
       where: and(
-        eq(permissions.module, module),
+        eq(permissions.moduleId, moduleId),
         eq(permissions.resource, resource),
-        eq(permissions.action, action)
+        eq(permissions.actionId, actionId)
       ),
       columns: { id: true }, // Only need the ID
     });
 
     if (!permission) {
+      logger.warn(
+        `Permission not found in DB for components: module=${moduleId}, resource=${resource}, action=${actionId}`
+      );
       return false;
     }
     const permissionId = permission.id;
diff --git a/apps/web/src/lib/services/groups.ts b/apps/web/src/lib/services/groups.ts
index b847b2f..1268b11 100644
--- a/apps/web/src/lib/services/groups.ts
+++ b/apps/web/src/lib/services/groups.ts
@@ -9,6 +9,7 @@ import {
 import { eq, and, inArray } from "drizzle-orm";
 import type { groups as groupsTable } from "@repo/db";
 import { logger } from "../utils/logger";
+import { TRPCError } from "@trpc/server";
 
 type Group = typeof groupsTable.$inferSelect;
 
@@ -125,7 +126,18 @@ export const groupService = {
     // Ensure the group exists
     const group = await this.getById(groupId);
     if (!group) {
-      throw new Error(`Group with id ${groupId} not found`);
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: `Group with id ${groupId} not found`,
+      });
+    }
+
+    // Check if users can be assigned to this group
+    if (!group.allowUserAssignment) {
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: `Users cannot be assigned to the group "${group.name}".`,
+      });
     }
 
     // Get existing user-group associations
@@ -311,8 +323,10 @@ export const groupService = {
 
   /**
    * Add module permissions to a group
+   * @param groupId The group ID
+   * @param moduleIds An array of module IDs to assign
    */
-  async addModulePermissions(groupId: number, modules: string[]) {
+  async addModulePermissions(groupId: number, moduleIds: number[]) {
     // Ensure the group exists
     const group = await this.getById(groupId);
     if (!group) {
@@ -321,19 +335,19 @@ export const groupService = {
 
     // Get existing module permissions
     const existingModulePermissions = await this.getModulePermissions(groupId);
-    const existingModules = existingModulePermissions.map((p) => p.module);
+    const existingModuleIds = existingModulePermissions.map((p) => p.moduleId);
 
     // Remove modules that are not in the new list
-    const modulesToRemove = existingModules.filter(
-      (module) => !modules.includes(module)
+    const modulesToRemove = existingModuleIds.filter(
+      (id) => !moduleIds.includes(id)
     );
     if (modulesToRemove.length > 0) {
       await this.removeModulePermissions(groupId, modulesToRemove);
     }
 
     // Find modules that need to be added (not already existing)
-    const modulesToAdd = modules.filter(
-      (module) => !existingModules.includes(module)
+    const modulesToAdd = moduleIds.filter(
+      (id) => !existingModuleIds.includes(id)
     );
 
     if (modulesToAdd.length === 0) {
@@ -342,9 +356,9 @@ export const groupService = {
 
     // Add new module permissions
     await db.insert(groupModulePermissions).values(
-      modulesToAdd.map((module) => ({
+      modulesToAdd.map((moduleId) => ({
         groupId,
-        module,
+        moduleId,
       }))
     );
 
@@ -353,8 +367,10 @@ export const groupService = {
 
   /**
    * Add action permissions to a group
+   * @param groupId The group ID
+   * @param actionIds An array of action IDs to assign
    */
-  async addActionPermissions(groupId: number, actions: string[]) {
+  async addActionPermissions(groupId: number, actionIds: number[]) {
     // Ensure the group exists
     const group = await this.getById(groupId);
     if (!group) {
@@ -363,19 +379,19 @@ export const groupService = {
 
     // Get existing action permissions
     const existingActionPermissions = await this.getActionPermissions(groupId);
-    const existingActions = existingActionPermissions.map((p) => p.action);
+    const existingActionIds = existingActionPermissions.map((p) => p.actionId);
 
     // Remove actions that are not in the new list
-    const actionsToRemove = existingActions.filter(
-      (action) => !actions.includes(action)
+    const actionsToRemove = existingActionIds.filter(
+      (id) => !actionIds.includes(id)
     );
     if (actionsToRemove.length > 0) {
       await this.removeActionPermissions(groupId, actionsToRemove);
     }
 
     // Find actions that need to be added (not already existing)
-    const actionsToAdd = actions.filter(
-      (action) => !existingActions.includes(action)
+    const actionsToAdd = actionIds.filter(
+      (id) => !existingActionIds.includes(id)
     );
 
     if (actionsToAdd.length === 0) {
@@ -384,9 +400,9 @@ export const groupService = {
 
     // Add new action permissions
     await db.insert(groupActionPermissions).values(
-      actionsToAdd.map((action) => ({
+      actionsToAdd.map((actionId) => ({
         groupId,
-        action,
+        actionId,
       }))
     );
 
@@ -394,7 +410,7 @@ export const groupService = {
   },
 
   /**
-   * Get module permissions for a group
+   * Get module permissions for a group (returns the full relation objects)
    */
   async getModulePermissions(groupId: number) {
     return db.query.groupModulePermissions.findMany({
@@ -403,7 +419,7 @@ export const groupService = {
   },
 
   /**
-   * Get action permissions for a group
+   * Get action permissions for a group (returns the full relation objects)
    */
   async getActionPermissions(groupId: number) {
     return db.query.groupActionPermissions.findMany({
@@ -413,33 +429,37 @@ export const groupService = {
 
   /**
    * Remove module permissions from a group
+   * @param groupId The group ID
+   * @param moduleIds An array of module IDs to remove
    */
-  async removeModulePermissions(groupId: number, modules: string[]) {
+  async removeModulePermissions(groupId: number, moduleIds: number[]) {
     await db
       .delete(groupModulePermissions)
       .where(
         and(
           eq(groupModulePermissions.groupId, groupId),
-          inArray(groupModulePermissions.module, modules)
+          inArray(groupModulePermissions.moduleId, moduleIds)
         )
       );
 
-    return { removed: modules.length };
+    return { removed: moduleIds.length };
   },
 
   /**
    * Remove action permissions from a group
+   * @param groupId The group ID
+   * @param actionIds An array of action IDs to remove
    */
-  async removeActionPermissions(groupId: number, actions: string[]) {
+  async removeActionPermissions(groupId: number, actionIds: number[]) {
     await db
       .delete(groupActionPermissions)
       .where(
         and(
           eq(groupActionPermissions.groupId, groupId),
-          inArray(groupActionPermissions.action, actions)
+          inArray(groupActionPermissions.actionId, actionIds)
         )
       );
 
-    return { removed: actions.length };
+    return { removed: actionIds.length };
   },
 };
diff --git a/apps/web/src/lib/services/index.ts b/apps/web/src/lib/services/index.ts
index 38af301..6c900a1 100644
--- a/apps/web/src/lib/services/index.ts
+++ b/apps/web/src/lib/services/index.ts
@@ -9,6 +9,8 @@ import { groupService } from "./groups";
 import { authorizationService } from "./authorization";
 import { markdownService } from "./markdown";
 import { systemService } from "./system";
+import { moduleService } from "./modules";
+import { actionService } from "./actions";
 
 /**
  * Database Services
@@ -20,7 +22,7 @@ import { systemService } from "./system";
  * ```
  * import { dbService } from '~/lib/services';
  *
- * // In a server component:
+ * // In a server component
  * const userCount = await dbService.users.count();
  * const recentPages = await dbService.wiki.getRecentPages(5);
  * ```
@@ -80,6 +82,16 @@ export const dbService = {
    * System operations
    */
   system: systemService,
+
+  /**
+   * Module management operations
+   */
+  modules: moduleService,
+
+  /**
+   * Action management operations
+   */
+  actions: actionService,
 };
 
 // Export individual services for direct use
@@ -94,4 +106,6 @@ export {
   groupService,
   authorizationService,
   markdownService,
+  moduleService,
+  actionService,
 };
diff --git a/apps/web/src/lib/services/modules.ts b/apps/web/src/lib/services/modules.ts
new file mode 100644
index 0000000..0d09525
--- /dev/null
+++ b/apps/web/src/lib/services/modules.ts
@@ -0,0 +1,39 @@
+import { db } from "@repo/db";
+import { modules } from "@repo/db";
+import { eq } from "drizzle-orm";
+
+/**
+ * Module Service
+ *
+ * Handles operations related to permission modules
+ */
+export const moduleService = {
+  /**
+   * Get all modules in the system
+   */
+  async getAll() {
+    return db.query.modules.findMany({
+      orderBy: (modules, { asc }) => [asc(modules.name)],
+    });
+  },
+
+  /**
+   * Get a module by ID
+   */
+  async getById(id: number) {
+    return db.query.modules.findFirst({
+      where: eq(modules.id, id),
+    });
+  },
+
+  /**
+   * Get a module by Name
+   */
+  async getByName(name: string) {
+    return db.query.modules.findFirst({
+      where: eq(modules.name, name),
+    });
+  },
+
+  // Add create, update, delete methods if needed later
+};
diff --git a/apps/web/src/lib/services/permissions.ts b/apps/web/src/lib/services/permissions.ts
index c54b117..45c1cfe 100644
--- a/apps/web/src/lib/services/permissions.ts
+++ b/apps/web/src/lib/services/permissions.ts
@@ -9,14 +9,27 @@ import { eq } from "drizzle-orm";
  */
 export const permissionService = {
   /**
-   * Get all permissions in the system
+   * Get all permissions in the system including related module and action names
    */
   async getAll() {
     return db.query.permissions.findMany({
       orderBy: (permissions, { asc }) => [
-        asc(permissions.module),
-        asc(permissions.action),
+        asc(permissions.moduleId),
+        asc(permissions.resource),
+        asc(permissions.actionId),
       ],
+      with: {
+        module: {
+          columns: {
+            name: true,
+          },
+        },
+        action: {
+          columns: {
+            name: true,
+          },
+        },
+      },
     });
   },
 
@@ -31,25 +44,26 @@ export const permissionService = {
 
   /**
    * Create a new permission
+   * Note: Expects IDs for module and action
    */
   async create({
     description,
-    module,
+    moduleId,
     resource,
-    action,
+    actionId,
   }: {
     description?: string;
-    module: string;
+    moduleId: number;
     resource: string;
-    action: string;
+    actionId: number;
   }) {
     const result = await db
       .insert(permissions)
       .values({
         description,
-        module,
+        moduleId,
         resource,
-        action,
+        actionId,
       })
       .returning();
 
@@ -58,28 +72,29 @@ export const permissionService = {
 
   /**
    * Update an existing permission
+   * Note: Expects IDs for module and action if provided
    */
   async update(
     id: number,
     {
       description,
-      module,
+      moduleId,
       resource,
-      action,
+      actionId,
     }: {
       description?: string;
-      module?: string;
+      moduleId?: number;
       resource?: string;
-      action?: string;
+      actionId?: number;
     }
   ) {
     const result = await db
       .update(permissions)
       .set({
         description,
-        module,
+        moduleId,
         resource,
-        action,
+        actionId,
       })
       .where(eq(permissions.id, id))
       .returning();
diff --git a/apps/web/src/lib/services/users.ts b/apps/web/src/lib/services/users.ts
index de65c0c..4d57896 100644
--- a/apps/web/src/lib/services/users.ts
+++ b/apps/web/src/lib/services/users.ts
@@ -1,6 +1,9 @@
 import { db } from "@repo/db";
 import { users } from "@repo/db";
 import { sql, eq } from "drizzle-orm";
+import { logger } from "../utils/logger";
+import { TRPCError } from "@trpc/server";
+import { getPaginationParams, PaginationInput } from "../utils/pagination";
 
 /**
  * User service - handles all user-related database operations
@@ -28,8 +31,12 @@ export const userService = {
 
   /**
    * Get a list of all users
+   * @deprecated Implement pagination and search
    */
   async getAll() {
+    logger.warn(
+      "Deprecated procedure getAll called. Use getPaginated instead."
+    );
     return db.query.users.findMany({
       with: {
         userGroups: {
@@ -41,6 +48,28 @@ export const userService = {
     });
   },
 
+  /**
+   * Get a paginated list of users
+   * @param page - The page number to fetch
+   * @param pageSize - The number of users per page
+   * @param search - Optional search query
+   * @returns A paginated list of users
+   */
+  async getPaginated(
+    pagination: PaginationInput,
+    options?: { search?: string }
+  ) {
+    const { take, skip } = getPaginationParams(pagination);
+    void take;
+    void skip;
+    void options;
+
+    throw new TRPCError({
+      code: "NOT_IMPLEMENTED",
+      message: "getPaginated is not implemented",
+    });
+  },
+
   /**
    * Get user groups by ID
    */
diff --git a/apps/web/src/server/routers/admin/groups.ts b/apps/web/src/server/routers/admin/groups.ts
index 37e4be0..d8cf99f 100644
--- a/apps/web/src/server/routers/admin/groups.ts
+++ b/apps/web/src/server/routers/admin/groups.ts
@@ -219,18 +219,13 @@ export const groupsRouter = router({
     .input(
       z.object({
         groupId: z.number(),
-        permissions: z.array(
-          z.object({
-            module: z.string(),
-            isAllowed: z.boolean(),
-          })
-        ),
+        moduleIds: z.array(z.number()),
       })
     )
     .mutation(async ({ input }) => {
       const result = await dbService.groups.addModulePermissions(
         input.groupId,
-        input.permissions.map((p) => p.module)
+        input.moduleIds
       );
       return result;
     }),
@@ -243,18 +238,13 @@ export const groupsRouter = router({
     .input(
       z.object({
         groupId: z.number(),
-        permissions: z.array(
-          z.object({
-            action: z.string(),
-            isAllowed: z.boolean(),
-          })
-        ),
+        actionIds: z.array(z.number()),
       })
     )
     .mutation(async ({ input }) => {
       const result = await dbService.groups.addActionPermissions(
         input.groupId,
-        input.permissions.map((p) => p.action)
+        input.actionIds
       );
       return result;
     }),
@@ -297,9 +287,22 @@ export const groupsRouter = router({
       })
     )
     .mutation(async ({ input }) => {
+      const allModules = await dbService.modules.getAll();
+      const moduleNameToIdMap = new Map(allModules.map((m) => [m.name, m.id]));
+
+      const moduleIdsToRemove = input.modules
+        .map((name) => moduleNameToIdMap.get(name))
+        .filter((id): id is number => id !== undefined);
+
+      if (moduleIdsToRemove.length === 0 && input.modules.length > 0) {
+        logger.warn(
+          `Could not find any module IDs for names: ${input.modules.join(", ")}`
+        );
+      }
+
       const result = await dbService.groups.removeModulePermissions(
         input.groupId,
-        input.modules
+        moduleIdsToRemove
       );
       return result;
     }),
@@ -316,9 +319,22 @@ export const groupsRouter = router({
       })
     )
     .mutation(async ({ input }) => {
+      const allActions = await dbService.actions.getAll();
+      const actionNameToIdMap = new Map(allActions.map((a) => [a.name, a.id]));
+
+      const actionIdsToRemove = input.actions
+        .map((name) => actionNameToIdMap.get(name))
+        .filter((id): id is number => id !== undefined);
+
+      if (actionIdsToRemove.length === 0 && input.actions.length > 0) {
+        logger.warn(
+          `Could not find any action IDs for names: ${input.actions.join(", ")}`
+        );
+      }
+
       const result = await dbService.groups.removeActionPermissions(
         input.groupId,
-        input.actions
+        actionIdsToRemove
       );
       return result;
     }),
diff --git a/apps/web/src/server/routers/admin/permissions.ts b/apps/web/src/server/routers/admin/permissions.ts
index 68d7e23..d1be8d8 100644
--- a/apps/web/src/server/routers/admin/permissions.ts
+++ b/apps/web/src/server/routers/admin/permissions.ts
@@ -19,8 +19,7 @@ export const permissionsRouter = router({
    */
   getModules: permissionProtectedProcedure("system:permissions:read").query(
     async () => {
-      const permissions = await dbService.permissions.getAll();
-      const modules = [...new Set(permissions.map((p) => p.module))];
+      const modules = await dbService.modules.getAll();
       return modules;
     }
   ),
@@ -30,8 +29,7 @@ export const permissionsRouter = router({
    */
   getActions: permissionProtectedProcedure("system:permissions:read").query(
     async () => {
-      const permissions = await dbService.permissions.getAll();
-      const actions = [...new Set(permissions.map((p) => p.action))];
+      const actions = await dbService.actions.getAll();
       return actions;
     }
   ),
@@ -58,17 +56,14 @@ export const permissionsRouter = router({
   create: permissionProtectedProcedure("system:settings:update")
     .input(
       z.object({
-        name: z.string().min(3).max(100),
+        moduleId: z.number(),
+        resource: z.string().min(1).max(50),
+        actionId: z.number(),
         description: z.string().optional(),
-        module: z.string().min(2).max(50),
-        action: z.string().min(2).max(50),
       })
     )
     .mutation(async ({ input }) => {
-      const newPermission = await dbService.permissions.create({
-        ...input,
-        resource: input.name,
-      });
+      const newPermission = await dbService.permissions.create(input);
       return newPermission;
     }),
 
@@ -79,10 +74,10 @@ export const permissionsRouter = router({
     .input(
       z.object({
         id: z.number(),
-        name: z.string().min(3).max(100).optional(),
+        moduleId: z.number().optional(),
+        resource: z.string().min(1).max(50).optional(),
+        actionId: z.number().optional(),
         description: z.string().optional(),
-        module: z.string().min(2).max(50).optional(),
-        action: z.string().min(2).max(50).optional(),
       })
     )
     .mutation(async ({ input }) => {
diff --git a/apps/web/src/server/routers/admin/system.ts b/apps/web/src/server/routers/admin/system.ts
index 2b19d96..c26238c 100644
--- a/apps/web/src/server/routers/admin/system.ts
+++ b/apps/web/src/server/routers/admin/system.ts
@@ -1,5 +1,3 @@
-import { z } from "zod";
-import { TRPCError } from "@trpc/server";
 import { router, permissionProtectedProcedure } from "~/server";
 import { dbService } from "~/lib/services";
 
diff --git a/apps/web/src/server/routers/admin/users.ts b/apps/web/src/server/routers/admin/users.ts
index c2715c4..0846574 100644
--- a/apps/web/src/server/routers/admin/users.ts
+++ b/apps/web/src/server/routers/admin/users.ts
@@ -7,6 +7,7 @@ export const usersRouter = router({
   /**
    * Get all users
    * @requires system:users:read
+   * @deprecated Implement pagination and search
    */
   getAll: permissionProtectedProcedure("system:users:read").query(async () => {
     const users = await dbService.users.getAll();
diff --git a/apps/web/src/server/routers/auth.ts b/apps/web/src/server/routers/auth.ts
index dcda8ec..1178bd7 100644
--- a/apps/web/src/server/routers/auth.ts
+++ b/apps/web/src/server/routers/auth.ts
@@ -26,21 +26,32 @@ export const authRouter = router({
     }
 
     // Get all permissions for the current user
-    const permissions = await authorizationService.getUserPermissions(userId);
+    const permissionsWithRelations =
+      await authorizationService.getUserPermissions(userId);
 
     // Return permissions in a convenient format for the frontend
     return {
-      // Return the full permission objects
-      permissions,
+      // Return the full permission objects (including relations if needed by client)
+      permissions: permissionsWithRelations,
 
       // Return an array of permission names (e.g. ["wiki:page:read", "wiki:page:create"])
-      permissionNames: permissions.map((p) => p.name as PermissionIdentifier),
+      permissionNames: permissionsWithRelations.map((p) => {
+        // Construct name from relations. Handle potential nulls defensively.
+        const moduleName = p.module?.name ?? "unknown-module";
+        const actionName = p.action?.name ?? "unknown-action";
+        return `${moduleName}:${p.resource}:${actionName}` as PermissionIdentifier;
+      }),
 
       // Return a map of permissions for easy checking (e.g. {"wiki:page:read": true})
-      permissionMap: permissions.reduce(
+      permissionMap: permissionsWithRelations.reduce(
         (acc, p) => {
-          if (validatePermissionId(p.name)) {
-            acc[p.name] = true;
+          const moduleName = p.module?.name;
+          const actionName = p.action?.name;
+          if (moduleName && actionName) {
+            const name = `${moduleName}:${p.resource}:${actionName}`;
+            if (validatePermissionId(name)) {
+              acc[name as PermissionIdentifier] = true;
+            }
           }
           return acc;
         },
@@ -113,27 +124,34 @@ export const authRouter = router({
       }
 
       // Guest users have userId undefined
-      const permissions =
+      const permissionsWithRelations =
         await authorizationService.getUserPermissions(undefined);
 
       // Collect permission names
-      const permissionNames = permissions.map(
-        (p) => `${p.module}:${p.resource}:${p.action}` as PermissionIdentifier
-      );
+      const permissionNames = permissionsWithRelations.map((p) => {
+        const moduleName = p.module?.name ?? "unknown-module";
+        const actionName = p.action?.name ?? "unknown-action";
+        return `${moduleName}:${p.resource}:${actionName}` as PermissionIdentifier;
+      });
 
       // Create a map for easy lookup
-      const permissionMap = permissions.reduce(
+      const permissionMap = permissionsWithRelations.reduce(
         (acc, permission) => {
-          const id =
-            `${permission.module}:${permission.resource}:${permission.action}` as PermissionIdentifier;
-          acc[id] = true;
+          const moduleName = permission.module?.name;
+          const actionName = permission.action?.name;
+          if (moduleName && actionName) {
+            const name = `${moduleName}:${permission.resource}:${actionName}`;
+            if (validatePermissionId(name)) {
+              acc[name as PermissionIdentifier] = true;
+            }
+          }
           return acc;
         },
         {} as Record<PermissionIdentifier, boolean>
       );
 
       return {
-        permissions,
+        permissions: permissionsWithRelations,
         permissionNames,
         permissionMap,
       };
diff --git a/package.json b/package.json
index 085a935..7474d47 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "db:seed": "turbo run db:seed",
     "db:setup": "turbo run db:setup",
     "db:create": "SKIP_DEVELOPER_SEEDS=true turbo run db:setup",
+    "db:studio": "pnpm run -F @repo/db db:studio",
     "clean": "turbo run clean",
     "fullclean": "turbo run fullclean && rm -rf node_modules .turbo && rm -f pnpm-lock.yaml"
   },
diff --git a/packages/db/drizzle/0000_light_sumo.sql b/packages/db/drizzle/0000_silly_iceman.sql
similarity index 85%
rename from packages/db/drizzle/0000_light_sumo.sql
rename to packages/db/drizzle/0000_silly_iceman.sql
index d3d56d8..d8438a8 100644
--- a/packages/db/drizzle/0000_light_sumo.sql
+++ b/packages/db/drizzle/0000_silly_iceman.sql
@@ -17,6 +17,14 @@ CREATE TABLE "accounts" (
 	"updated_at" timestamp DEFAULT now()
 );
 --> statement-breakpoint
+CREATE TABLE "actions" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(50) NOT NULL,
+	"description" text,
+	"created_at" timestamp DEFAULT now(),
+	CONSTRAINT "actions_name_unique" UNIQUE("name")
+);
+--> statement-breakpoint
 CREATE TABLE "assets" (
 	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
 	"name" varchar(255),
@@ -37,16 +45,16 @@ CREATE TABLE "assets_to_pages" (
 --> statement-breakpoint
 CREATE TABLE "group_action_permissions" (
 	"group_id" integer NOT NULL,
-	"action" varchar(50) NOT NULL,
+	"action_id" integer NOT NULL,
 	"created_at" timestamp DEFAULT now(),
-	CONSTRAINT "group_action_permissions_group_id_action_pk" PRIMARY KEY("group_id", "action")
+	CONSTRAINT "group_action_permissions_group_id_action_id_pk" PRIMARY KEY("group_id", "action_id")
 );
 --> statement-breakpoint
 CREATE TABLE "group_module_permissions" (
 	"group_id" integer NOT NULL,
-	"module" varchar(50) NOT NULL,
+	"module_id" integer NOT NULL,
 	"created_at" timestamp DEFAULT now(),
-	CONSTRAINT "group_module_permissions_group_id_module_pk" PRIMARY KEY("group_id", "module")
+	CONSTRAINT "group_module_permissions_group_id_module_id_pk" PRIMARY KEY("group_id", "module_id")
 );
 --> statement-breakpoint
 CREATE TABLE "group_permissions" (
@@ -68,6 +76,14 @@ CREATE TABLE "groups" (
 	CONSTRAINT "groups_name_unique" UNIQUE("name")
 );
 --> statement-breakpoint
+CREATE TABLE "modules" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"name" varchar(50) NOT NULL,
+	"description" text,
+	"created_at" timestamp DEFAULT now(),
+	CONSTRAINT "modules_name_unique" UNIQUE("name")
+);
+--> statement-breakpoint
 CREATE TABLE "page_permissions" (
 	"id" serial PRIMARY KEY NOT NULL,
 	"page_id" integer NOT NULL,
@@ -79,13 +95,11 @@ CREATE TABLE "page_permissions" (
 --> statement-breakpoint
 CREATE TABLE "permissions" (
 	"id" serial PRIMARY KEY NOT NULL,
-	"module" varchar(50) NOT NULL,
+	"module_id" integer NOT NULL,
 	"resource" varchar(50) NOT NULL,
-	"action" varchar(50) NOT NULL,
-	"name" varchar(100) GENERATED ALWAYS AS ("module" || ':' || "resource" || ':' || "action") STORED NOT NULL,
+	"action_id" integer NOT NULL,
 	"description" text,
-	"created_at" timestamp DEFAULT now(),
-	CONSTRAINT "permissions_name_unique" UNIQUE("name")
+	"created_at" timestamp DEFAULT now()
 );
 --> statement-breakpoint
 CREATE TABLE "sessions" (
@@ -187,9 +201,15 @@ ADD CONSTRAINT "assets_to_pages_page_id_wiki_pages_id_fk" FOREIGN KEY ("page_id"
 ALTER TABLE "group_action_permissions"
 ADD CONSTRAINT "group_action_permissions_group_id_groups_id_fk" FOREIGN KEY ("group_id") REFERENCES "public"."groups"("id") ON DELETE no action ON UPDATE no action;
 --> statement-breakpoint
+ALTER TABLE "group_action_permissions"
+ADD CONSTRAINT "group_action_permissions_action_id_actions_id_fk" FOREIGN KEY ("action_id") REFERENCES "public"."actions"("id") ON DELETE no action ON UPDATE no action;
+--> statement-breakpoint
 ALTER TABLE "group_module_permissions"
 ADD CONSTRAINT "group_module_permissions_group_id_groups_id_fk" FOREIGN KEY ("group_id") REFERENCES "public"."groups"("id") ON DELETE no action ON UPDATE no action;
 --> statement-breakpoint
+ALTER TABLE "group_module_permissions"
+ADD CONSTRAINT "group_module_permissions_module_id_modules_id_fk" FOREIGN KEY ("module_id") REFERENCES "public"."modules"("id") ON DELETE no action ON UPDATE no action;
+--> statement-breakpoint
 ALTER TABLE "group_permissions"
 ADD CONSTRAINT "group_permissions_group_id_groups_id_fk" FOREIGN KEY ("group_id") REFERENCES "public"."groups"("id") ON DELETE no action ON UPDATE no action;
 --> statement-breakpoint
@@ -205,6 +225,12 @@ ADD CONSTRAINT "page_permissions_group_id_groups_id_fk" FOREIGN KEY ("group_id")
 ALTER TABLE "page_permissions"
 ADD CONSTRAINT "page_permissions_permission_id_permissions_id_fk" FOREIGN KEY ("permission_id") REFERENCES "public"."permissions"("id") ON DELETE no action ON UPDATE no action;
 --> statement-breakpoint
+ALTER TABLE "permissions"
+ADD CONSTRAINT "permissions_module_id_modules_id_fk" FOREIGN KEY ("module_id") REFERENCES "public"."modules"("id") ON DELETE no action ON UPDATE no action;
+--> statement-breakpoint
+ALTER TABLE "permissions"
+ADD CONSTRAINT "permissions_action_id_actions_id_fk" FOREIGN KEY ("action_id") REFERENCES "public"."actions"("id") ON DELETE no action ON UPDATE no action;
+--> statement-breakpoint
 ALTER TABLE "sessions"
 ADD CONSTRAINT "sessions_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE no action ON UPDATE no action;
 --> statement-breakpoint
@@ -237,33 +263,33 @@ ADD CONSTRAINT "wiki_pages_locked_by_id_users_id_fk" FOREIGN KEY ("locked_by_id"
 --> statement-breakpoint
 CREATE INDEX "asset_page_idx" ON "assets_to_pages" USING btree ("asset_id", "page_id");
 --> statement-breakpoint
-CREATE INDEX "group_action_permissions_idx" ON "group_action_permissions" USING btree ("group_id", "action");
+CREATE INDEX "group_action_permissions_idx" ON "group_action_permissions" USING btree ("group_id", "action_id");
 --> statement-breakpoint
-CREATE INDEX "group_module_permissions_idx" ON "group_module_permissions" USING btree ("group_id", "module");
+CREATE INDEX "group_module_permissions_idx" ON "group_module_permissions" USING btree ("group_id", "module_id");
 --> statement-breakpoint
 CREATE INDEX "group_permission_idx" ON "group_permissions" USING btree ("group_id", "permission_id");
 --> statement-breakpoint
 CREATE INDEX "page_group_perm_idx" ON "page_permissions" USING btree ("page_id", "permission_id", "group_id");
 --> statement-breakpoint
+CREATE UNIQUE INDEX "permission_uniq_idx" ON "permissions" USING btree ("module_id", "resource", "action_id");
+--> statement-breakpoint
 CREATE INDEX "user_group_idx" ON "user_groups" USING btree ("user_id", "group_id");
 --> statement-breakpoint
 CREATE INDEX "email_idx" ON "users" USING btree ("email");
 --> statement-breakpoint
+CREATE INDEX "verification_token_idx" ON "verification_tokens" USING btree ("identifier", "token");
+--> statement-breakpoint
 CREATE INDEX "idx_search" ON "wiki_pages" USING gin ("search");
 --> statement-breakpoint
 CREATE INDEX "trgm_idx_title" ON "wiki_pages" USING btree ("title");
---> statement-breakpoint
 -- Enable the pg_trgm extension for fuzzy text matching
 CREATE EXTENSION IF NOT EXISTS pg_trgm;
---> statement-breakpoint
 -- Create trigram GIN indexes for fast similarity searches
 CREATE INDEX IF NOT EXISTS trgm_idx_title ON wiki_pages USING GIN (title gin_trgm_ops);
 CREATE INDEX IF NOT EXISTS trgm_idx_content ON wiki_pages USING GIN (content gin_trgm_ops);
---> statement-breakpoint
 -- Add comment to explain what these indexes are for
 COMMENT ON INDEX trgm_idx_title IS 'Trigram index on wiki page titles for fuzzy search';
 COMMENT ON INDEX trgm_idx_content IS 'Trigram index on wiki page content for fuzzy search';
---> statement-breakpoint
 -- Display information about the created indexes
 SELECT indexname,
 	indexdef
diff --git a/packages/db/drizzle/meta/0000_snapshot.json b/packages/db/drizzle/meta/0000_snapshot.json
index 22d892f..4f23fce 100644
--- a/packages/db/drizzle/meta/0000_snapshot.json
+++ b/packages/db/drizzle/meta/0000_snapshot.json
@@ -1,5 +1,5 @@
 {
-  "id": "beef51f4-c3ed-43a3-a992-7f4409b557d6",
+  "id": "3039bfc9-5805-4f39-b1de-8325ca9a2637",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "7",
   "dialect": "postgresql",
@@ -117,6 +117,52 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
+    "public.actions": {
+      "name": "actions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "actions_name_unique": {
+          "name": "actions_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
     "public.assets": {
       "name": "assets",
       "schema": "",
@@ -292,9 +338,9 @@
           "primaryKey": false,
           "notNull": true
         },
-        "action": {
-          "name": "action",
-          "type": "varchar(50)",
+        "action_id": {
+          "name": "action_id",
+          "type": "integer",
           "primaryKey": false,
           "notNull": true
         },
@@ -317,7 +363,7 @@
               "nulls": "last"
             },
             {
-              "expression": "action",
+              "expression": "action_id",
               "isExpression": false,
               "asc": true,
               "nulls": "last"
@@ -342,14 +388,27 @@
           ],
           "onDelete": "no action",
           "onUpdate": "no action"
+        },
+        "group_action_permissions_action_id_actions_id_fk": {
+          "name": "group_action_permissions_action_id_actions_id_fk",
+          "tableFrom": "group_action_permissions",
+          "tableTo": "actions",
+          "columnsFrom": [
+            "action_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
-        "group_action_permissions_group_id_action_pk": {
-          "name": "group_action_permissions_group_id_action_pk",
+        "group_action_permissions_group_id_action_id_pk": {
+          "name": "group_action_permissions_group_id_action_id_pk",
           "columns": [
             "group_id",
-            "action"
+            "action_id"
           ]
         }
       },
@@ -368,9 +427,9 @@
           "primaryKey": false,
           "notNull": true
         },
-        "module": {
-          "name": "module",
-          "type": "varchar(50)",
+        "module_id": {
+          "name": "module_id",
+          "type": "integer",
           "primaryKey": false,
           "notNull": true
         },
@@ -393,7 +452,7 @@
               "nulls": "last"
             },
             {
-              "expression": "module",
+              "expression": "module_id",
               "isExpression": false,
               "asc": true,
               "nulls": "last"
@@ -418,14 +477,27 @@
           ],
           "onDelete": "no action",
           "onUpdate": "no action"
+        },
+        "group_module_permissions_module_id_modules_id_fk": {
+          "name": "group_module_permissions_module_id_modules_id_fk",
+          "tableFrom": "group_module_permissions",
+          "tableTo": "modules",
+          "columnsFrom": [
+            "module_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
-        "group_module_permissions_group_id_module_pk": {
-          "name": "group_module_permissions_group_id_module_pk",
+        "group_module_permissions_group_id_module_id_pk": {
+          "name": "group_module_permissions_group_id_module_id_pk",
           "columns": [
             "group_id",
-            "module"
+            "module_id"
           ]
         }
       },
@@ -597,6 +669,52 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
+    "public.modules": {
+      "name": "modules",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "modules_name_unique": {
+          "name": "modules_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
     "public.page_permissions": {
       "name": "page_permissions",
       "schema": "",
@@ -726,9 +844,9 @@
           "primaryKey": true,
           "notNull": true
         },
-        "module": {
-          "name": "module",
-          "type": "varchar(50)",
+        "module_id": {
+          "name": "module_id",
+          "type": "integer",
           "primaryKey": false,
           "notNull": true
         },
@@ -738,22 +856,12 @@
           "primaryKey": false,
           "notNull": true
         },
-        "action": {
-          "name": "action",
-          "type": "varchar(50)",
+        "action_id": {
+          "name": "action_id",
+          "type": "integer",
           "primaryKey": false,
           "notNull": true
         },
-        "name": {
-          "name": "name",
-          "type": "varchar(100)",
-          "primaryKey": false,
-          "notNull": true,
-          "generated": {
-            "as": "\"module\" || ':' || \"resource\" || ':' || \"action\"",
-            "type": "stored"
-          }
-        },
         "description": {
           "name": "description",
           "type": "text",
@@ -768,18 +876,65 @@
           "default": "now()"
         }
       },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "permissions_name_unique": {
-          "name": "permissions_name_unique",
-          "nullsNotDistinct": false,
+      "indexes": {
+        "permission_uniq_idx": {
+          "name": "permission_uniq_idx",
           "columns": [
-            "name"
-          ]
+            {
+              "expression": "module_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "resource",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "action_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "permissions_module_id_modules_id_fk": {
+          "name": "permissions_module_id_modules_id_fk",
+          "tableFrom": "permissions",
+          "tableTo": "modules",
+          "columnsFrom": [
+            "module_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "permissions_action_id_actions_id_fk": {
+          "name": "permissions_action_id_actions_id_fk",
+          "tableFrom": "permissions",
+          "tableTo": "actions",
+          "columnsFrom": [
+            "action_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
         }
       },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
       "policies": {},
       "checkConstraints": {},
       "isRLSEnabled": false
@@ -1042,7 +1197,29 @@
           "notNull": true
         }
       },
-      "indexes": {},
+      "indexes": {
+        "verification_token_idx": {
+          "name": "verification_token_idx",
+          "columns": [
+            {
+              "expression": "identifier",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "token",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "verification_tokens_identifier_token_pk": {
diff --git a/packages/db/drizzle/meta/_journal.json b/packages/db/drizzle/meta/_journal.json
index 8f50c52..d932f53 100644
--- a/packages/db/drizzle/meta/_journal.json
+++ b/packages/db/drizzle/meta/_journal.json
@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "7",
-      "when": 1745364296469,
-      "tag": "0000_light_sumo",
+      "when": 1745433510377,
+      "tag": "0000_silly_iceman",
       "breakpoints": true
     }
   ]
diff --git a/packages/db/src/schema/index.ts b/packages/db/src/schema/index.ts
index bfc2f3f..92a57ab 100644
--- a/packages/db/src/schema/index.ts
+++ b/packages/db/src/schema/index.ts
@@ -11,6 +11,7 @@ import {
   index,
   pgEnum,
   uuid,
+  uniqueIndex,
 } from "drizzle-orm/pg-core";
 import { relations, SQL, sql } from "drizzle-orm";
 
@@ -43,22 +44,43 @@ export const users = pgTable(
   (t) => [index("email_idx").on(t.email)]
 );
 
-// Permissions table - defines available permissions in the system
-export const permissions = pgTable("permissions", {
+// Modules table
+export const modules = pgTable("modules", {
+  id: serial("id").primaryKey(),
+  name: varchar("name", { length: 50 }).notNull().unique(),
+  description: text("description"),
+  createdAt: timestamp("created_at").defaultNow(),
+});
+
+// Actions table
+export const actions = pgTable("actions", {
   id: serial("id").primaryKey(),
-  module: varchar("module", { length: 50 }).notNull(), // e.g., 'wiki', 'system', 'assets'
-  resource: varchar("resource", { length: 50 }).notNull(), // e.g., 'page', 'asset', 'user'
-  action: varchar("action", { length: 50 }).notNull(), // e.g., 'create', 'read', 'update', 'delete'
-  name: varchar("name", { length: 100 })
-    .notNull()
-    .generatedAlwaysAs(
-      (): SQL => sql`"module" || ':' || "resource" || ':' || "action"`
-    )
-    .unique(),
+  name: varchar("name", { length: 50 }).notNull().unique(),
   description: text("description"),
   createdAt: timestamp("created_at").defaultNow(),
 });
 
+// Permissions table - defines available permissions in the system
+export const permissions = pgTable(
+  "permissions",
+  {
+    id: serial("id").primaryKey(),
+    moduleId: integer("module_id")
+      .notNull()
+      .references(() => modules.id),
+    resource: varchar("resource", { length: 50 }).notNull(),
+    actionId: integer("action_id")
+      .notNull()
+      .references(() => actions.id),
+    description: text("description"),
+    createdAt: timestamp("created_at").defaultNow(),
+  },
+  (t) => [
+    // Ensure logical uniqueness for a permission
+    uniqueIndex("permission_uniq_idx").on(t.moduleId, t.resource, t.actionId),
+  ]
+);
+
 // Groups table - custom user groups
 export const groups = pgTable("groups", {
   id: serial("id").primaryKey(),
@@ -114,12 +136,14 @@ export const groupModulePermissions = pgTable(
     groupId: integer("group_id")
       .references(() => groups.id)
       .notNull(),
-    module: varchar("module", { length: 50 }).notNull(),
+    moduleId: integer("module_id") // Changed from varchar("module")
+      .references(() => modules.id)
+      .notNull(),
     createdAt: timestamp("created_at").defaultNow(),
   },
   (t) => [
-    primaryKey({ columns: [t.groupId, t.module] }),
-    index("group_module_permissions_idx").on(t.groupId, t.module),
+    primaryKey({ columns: [t.groupId, t.moduleId] }), // Updated primary key column
+    index("group_module_permissions_idx").on(t.groupId, t.moduleId), // Updated index column
   ]
 );
 
@@ -130,12 +154,14 @@ export const groupActionPermissions = pgTable(
     groupId: integer("group_id")
       .references(() => groups.id)
       .notNull(),
-    action: varchar("action", { length: 50 }).notNull(),
+    actionId: integer("action_id") // Changed from varchar("action")
+      .references(() => actions.id)
+      .notNull(),
     createdAt: timestamp("created_at").defaultNow(),
   },
   (t) => [
-    primaryKey({ columns: [t.groupId, t.action] }),
-    index("group_action_permissions_idx").on(t.groupId, t.action),
+    primaryKey({ columns: [t.groupId, t.actionId] }), // Updated primary key column
+    index("group_action_permissions_idx").on(t.groupId, t.actionId), // Updated index column
   ]
 );
 
@@ -185,7 +211,15 @@ export const groupsRelations = relations(groups, ({ many }) => ({
 }));
 
 // Permission relations
-export const permissionsRelations = relations(permissions, ({ many }) => ({
+export const permissionsRelations = relations(permissions, ({ one, many }) => ({
+  module: one(modules, {
+    fields: [permissions.moduleId],
+    references: [modules.id],
+  }),
+  action: one(actions, {
+    fields: [permissions.actionId],
+    references: [actions.id],
+  }),
   groupPermissions: many(groupPermissions),
   pagePermissions: many(pagePermissions),
 }));
@@ -243,6 +277,11 @@ export const groupModulePermissionsRelations = relations(
       fields: [groupModulePermissions.groupId],
       references: [groups.id],
     }),
+    module: one(modules, {
+      // Added relation to modules
+      fields: [groupModulePermissions.moduleId],
+      references: [modules.id],
+    }),
   })
 );
 
@@ -253,9 +292,26 @@ export const groupActionPermissionsRelations = relations(
       fields: [groupActionPermissions.groupId],
       references: [groups.id],
     }),
+    action: one(actions, {
+      // Added relation to actions
+      fields: [groupActionPermissions.actionId],
+      references: [actions.id],
+    }),
   })
 );
 
+// Module relations
+export const modulesRelations = relations(modules, ({ many }) => ({
+  permissions: many(permissions),
+  groupModulePermissions: many(groupModulePermissions),
+}));
+
+// Action relations
+export const actionsRelations = relations(actions, ({ many }) => ({
+  permissions: many(permissions),
+  groupActionPermissions: many(groupActionPermissions),
+}));
+
 export const wikiPageEditorTypeEnum = pgEnum("editor_type", [
   "markdown",
   "html",
diff --git a/packages/db/src/seeds/permissions.ts b/packages/db/src/seeds/permissions.ts
index 3a8034d..aa4cf73 100644
--- a/packages/db/src/seeds/permissions.ts
+++ b/packages/db/src/seeds/permissions.ts
@@ -1,12 +1,60 @@
 import { db } from "../index.js";
 import * as schema from "../schema/index.js";
+import { getAllPermissions } from "../registry/permissions.js";
 import {
-  getAllPermissions,
-  createPermissionId,
-} from "../registry/permissions.js";
-import { Permission } from "../registry/types.js";
+  Permission,
+  PermissionModule,
+  PermissionAction,
+  PermissionResource,
+} from "../registry/types.js";
 import { sql } from "drizzle-orm";
 
+/**
+ * Seed Modules and Actions from the registry
+ */
+async function seedModulesAndActions(registryPermissions: Permission[]) {
+  console.log(`Seeding modules and actions...`);
+
+  const uniqueModules = [
+    ...new Map(
+      registryPermissions.map((p) => [p.module, { name: p.module }])
+    ).values(),
+  ];
+  const uniqueActions = [
+    ...new Map(
+      registryPermissions.map((p) => [p.action, { name: p.action }])
+    ).values(),
+  ];
+
+  const modulePromise = db
+    .insert(schema.modules)
+    .values(uniqueModules)
+    .onConflictDoNothing()
+    .returning();
+
+  const actionPromise = db
+    .insert(schema.actions)
+    .values(uniqueActions)
+    .onConflictDoNothing()
+    .returning();
+
+  await Promise.all([modulePromise, actionPromise]);
+
+  // Fetch all modules and actions (including existing ones) to get IDs
+  const [allModules, allActions] = await Promise.all([
+    db.query.modules.findMany(),
+    db.query.actions.findMany(),
+  ]);
+
+  const moduleNameToIdMap = new Map(allModules.map((m) => [m.name, m.id]));
+  const actionNameToIdMap = new Map(allActions.map((a) => [a.name, a.id]));
+
+  console.log(
+    `Modules and actions seeding finished. Found ${allModules.length} modules, ${allActions.length} actions.`
+  );
+  return { moduleNameToIdMap, actionNameToIdMap };
+}
+
 /**
  * Seed all permissions from the central registry
  */
@@ -14,36 +62,62 @@ export async function seedPermissions() {
   console.log(`Seeding permissions from registry...`);
 
   const registryPermissions = getAllPermissions();
+  if (registryPermissions.length === 0) {
+    console.warn("No permissions found in the registry to seed.");
+    return;
+  }
+
+  const { moduleNameToIdMap, actionNameToIdMap } =
+    await seedModulesAndActions(registryPermissions);
 
-  // Prepare permissions for insertion, generating the unique name
-  const permissionsToInsert = registryPermissions.map((p: Permission) => ({
-    module: p.module,
-    resource: p.resource,
-    action: p.action,
-    description: p.description,
-    name: createPermissionId(p), // Use the function to generate the name
-  }));
+  // Fetch existing permissions to avoid duplicates
+  const existingPermissions = await db.query.permissions.findMany({
+    columns: {
+      moduleId: true,
+      resource: true,
+      actionId: true,
+    },
+  });
+  const existingSet = new Set(
+    existingPermissions.map((p) => `${p.moduleId}:${p.resource}:${p.actionId}`)
+  );
 
-  console.log(`Found ${permissionsToInsert.length} permissions to seed.`);
+  // Prepare permissions for insertion, filtering out existing ones
+  const permissionsToInsert = registryPermissions
+    .map((p: Permission) => {
+      const moduleId = moduleNameToIdMap.get(p.module);
+      const actionId = actionNameToIdMap.get(p.action);
+      if (moduleId === undefined || actionId === undefined) {
+        console.warn(
+          `Skipping permission: Could not find ID for module '${p.module}' or action '${p.action}'.`
+        );
+        return null;
+      }
+      return {
+        moduleId: moduleId,
+        resource: p.resource,
+        actionId: actionId,
+        description: p.description,
+      };
+    })
+    .filter((p): p is NonNullable<typeof p> => p !== null) // Type guard to remove nulls
+    .filter(
+      (p) => !existingSet.has(`${p.moduleId}:${p.resource}:${p.actionId}`)
+    );
+
+  console.log(`Found ${permissionsToInsert.length} new permissions to seed.`);
 
   if (permissionsToInsert.length === 0) {
-    console.warn("No permissions found in the registry to seed.");
+    console.log("No new permissions to insert.");
+    console.log("Permissions seeding finished.");
     return;
   }
 
   try {
-    // Use insert with onConflictDoUpdate to handle existing permissions
-    await db
-      .insert(schema.permissions)
-      .values(permissionsToInsert)
-      .onConflictDoUpdate({
-        target: schema.permissions.name, // Target the unique name column
-        set: {
-          // Use sql`excluded.column_name` syntax
-          description: sql`excluded.description`,
-        },
-      });
+    // Insert only the new permissions
+    await db.insert(schema.permissions).values(permissionsToInsert);
 
+    console.log(`${permissionsToInsert.length} new permissions inserted.`);
     console.log("Permissions seeding finished.");
   } catch (error) {
     console.error(`Error during permissions seeding:`, error);
@@ -90,13 +164,14 @@ export async function createDefaultGroups() {
       },
     ];
 
+    // Use Promise.all for potentially parallelizable inserts if DB supports it well,
+    // but sequential insertReturning is safer for getting IDs back reliably.
     const createdGroups = await db
       .insert(schema.groups)
       .values(groupsToCreate)
       .onConflictDoUpdate({
         target: schema.groups.name,
         set: {
-          // Use sql`excluded.column_name` syntax
           description: sql`excluded.description`,
           isEditable: sql`excluded.is_editable`,
           allowUserAssignment: sql`excluded.allow_user_assignment`,
@@ -110,8 +185,13 @@ export async function createDefaultGroups() {
     const viewerGroup = createdGroups.find((g) => g.name === "Viewers");
     const guestGroup = createdGroups.find((g) => g.name === "Guests");
 
-    // --- Assign Permissions ---
-    const allDbPermissions = await db.query.permissions.findMany();
+    // --- Fetch Data Needed for Assignments ---
+    const [allDbPermissions, allModules, allActions] = await Promise.all([
+      db.query.permissions.findMany(),
+      db.query.modules.findMany(),
+      db.query.actions.findMany(),
+    ]);
+
     if (!allDbPermissions || allDbPermissions.length === 0) {
       console.error(
         "No permissions found in the database. Cannot assign permissions to groups. Ensure seedPermissions ran successfully."
@@ -119,24 +199,49 @@ export async function createDefaultGroups() {
       return;
     }
 
-    const findPermission = (id: string) =>
-      allDbPermissions.find((p) => p.name === id);
+    const moduleNameToIdMap = new Map(allModules.map((m) => [m.name, m.id]));
+    const actionNameToIdMap = new Map(allActions.map((a) => [a.name, a.id]));
+
+    // Helper to find a permission ID based on its logical components
+    const findPermissionId = (
+      moduleName: PermissionModule,
+      resource: PermissionResource,
+      actionName: PermissionAction
+    ): number | undefined => {
+      const moduleId = moduleNameToIdMap.get(moduleName);
+      const actionId = actionNameToIdMap.get(actionName);
+      if (moduleId === undefined || actionId === undefined) return undefined;
+      const permission = allDbPermissions.find(
+        (p) =>
+          p.moduleId === moduleId &&
+          p.resource === resource &&
+          p.actionId === actionId
+      );
+      return permission?.id;
+    };
+
+    // --- Assign Permissions --- //
+    const assignmentPromises: Promise<void>[] = [];
 
     // Administrator: All permissions
     if (adminGroup) {
       const allPermissionIds = allDbPermissions.map((p) => p.id);
       if (allPermissionIds.length > 0) {
-        await db
-          .insert(schema.groupPermissions)
-          .values(
-            allPermissionIds.map((permissionId) => ({
-              groupId: adminGroup.id,
-              permissionId,
-            }))
-          )
-          .onConflictDoNothing();
-        console.log(
-          `Assigned ${allPermissionIds.length} permissions to Administrators.`
+        assignmentPromises.push(
+          db
+            .insert(schema.groupPermissions)
+            .values(
+              allPermissionIds.map((permissionId) => ({
+                groupId: adminGroup.id,
+                permissionId,
+              }))
+            )
+            .onConflictDoNothing()
+            .then(() =>
+              console.log(
+                `Assigned ${allPermissionIds.length} permissions to Administrators.`
+              )
+            )
         );
       } else {
         console.warn("No permissions available to assign to Administrators.");
@@ -145,24 +250,30 @@ export async function createDefaultGroups() {
 
     // Editors: Wiki create, read, update + Asset read
     if (editorGroup) {
-      const editorPerms = [
-        findPermission("wiki:page:create"),
-        findPermission("wiki:page:read"),
-        findPermission("wiki:page:update"),
-        findPermission("assets:asset:read"), // Editors likely need to see assets too
-      ].filter((p) => p !== undefined) as typeof allDbPermissions;
-
-      if (editorPerms.length > 0) {
-        await db
-          .insert(schema.groupPermissions)
-          .values(
-            editorPerms.map((p) => ({
-              groupId: editorGroup.id,
-              permissionId: p.id,
-            }))
-          )
-          .onConflictDoNothing();
-        console.log(`Assigned ${editorPerms.length} permissions to Editors.`);
+      const editorPermIds = [
+        findPermissionId("wiki", "page", "create"),
+        findPermissionId("wiki", "page", "read"),
+        findPermissionId("wiki", "page", "update"),
+        findPermissionId("assets", "asset", "read"), // Editors likely need to see assets too
+      ].filter((id): id is number => id !== undefined);
+
+      if (editorPermIds.length > 0) {
+        assignmentPromises.push(
+          db
+            .insert(schema.groupPermissions)
+            .values(
+              editorPermIds.map((permissionId) => ({
+                groupId: editorGroup.id,
+                permissionId,
+              }))
+            )
+            .onConflictDoNothing()
+            .then(() =>
+              console.log(
+                `Assigned ${editorPermIds.length} permissions to Editors.`
+              )
+            )
+        );
       } else {
         console.warn("Could not find necessary permissions for Editors.");
       }
@@ -170,27 +281,31 @@ export async function createDefaultGroups() {
 
     // Viewers & Guests: Wiki read, Asset read
     const readPermIds = [
-      findPermission("wiki:page:read")?.id,
-      findPermission("assets:asset:read")?.id,
-    ].filter((id) => id !== undefined) as number[];
+      findPermissionId("wiki", "page", "read"),
+      findPermissionId("assets", "asset", "read"),
+    ].filter((id): id is number => id !== undefined);
 
     const viewerGuestGroups = [viewerGroup, guestGroup].filter(
-      (g) => g !== undefined
-    ) as typeof createdGroups;
+      (g): g is NonNullable<typeof g> => g !== undefined
+    );
 
     if (readPermIds.length > 0) {
       for (const group of viewerGuestGroups) {
-        await db
-          .insert(schema.groupPermissions)
-          .values(
-            readPermIds.map((permissionId) => ({
-              groupId: group.id,
-              permissionId,
-            }))
-          )
-          .onConflictDoNothing();
-        console.log(
-          `Assigned ${readPermIds.length} read permissions to ${group.name}.`
+        assignmentPromises.push(
+          db
+            .insert(schema.groupPermissions)
+            .values(
+              readPermIds.map((permissionId) => ({
+                groupId: group.id,
+                permissionId,
+              }))
+            )
+            .onConflictDoNothing()
+            .then(() =>
+              console.log(
+                `Assigned ${readPermIds.length} read permissions to ${group.name}.`
+              )
+            )
         );
       }
     } else {
@@ -198,23 +313,43 @@ export async function createDefaultGroups() {
     }
 
     // -- Assign Module/Action Permissions (Simplified Example) --
-    // You might need more granular control here based on your specific needs
-    // Example: Assign 'wiki' and 'assets' module access and 'read' action to Viewers/Guests
-    for (const group of viewerGuestGroups) {
-      await db
-        .insert(schema.groupModulePermissions)
-        .values([
-          { groupId: group.id, module: "wiki" },
-          { groupId: group.id, module: "assets" },
-        ])
-        .onConflictDoNothing();
-      await db
-        .insert(schema.groupActionPermissions)
-        .values({ groupId: group.id, action: "read" })
-        .onConflictDoNothing();
-      console.log(`Assigned basic module/action permissions to ${group.name}.`);
+    const wikiModuleId = moduleNameToIdMap.get("wiki");
+    const assetsModuleId = moduleNameToIdMap.get("assets");
+    const readActionId = actionNameToIdMap.get("read");
+
+    if (wikiModuleId && assetsModuleId && readActionId) {
+      for (const group of viewerGuestGroups) {
+        assignmentPromises.push(
+          db
+            .insert(schema.groupModulePermissions)
+            .values([
+              { groupId: group.id, moduleId: wikiModuleId },
+              { groupId: group.id, moduleId: assetsModuleId },
+            ])
+            .onConflictDoNothing()
+            .then(() =>
+              console.log(`Assigned module permissions to ${group.name}.`)
+            )
+        );
+        assignmentPromises.push(
+          db
+            .insert(schema.groupActionPermissions)
+            .values({ groupId: group.id, actionId: readActionId })
+            .onConflictDoNothing()
+            .then(() =>
+              console.log(`Assigned action permissions to ${group.name}.`)
+            )
+        );
+      }
+    } else {
+      console.warn(
+        "Could not find IDs for basic module/action permissions (wiki, assets, read)."
+      );
     }
 
+    // Wait for all assignments to complete
+    await Promise.all(assignmentPromises);
+
     console.log("Default groups and permissions assigned successfully!");
   } catch (error) {
     console.error(
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
index eb734a1..67ede15 100644
--- a/packages/tailwind-config/tailwind.config.ts
+++ b/packages/tailwind-config/tailwind.config.ts
@@ -24,7 +24,7 @@ const sharedConfig: Omit<Config, "content"> = {
           accent: "var(--color-text-accent)",
         },
         border: {
-          DEFAULT: "var(--color-border)",
+          DEFAULT: "var(--color-border-default)",
           light: "var(--color-border-light)",
           dark: "var(--color-border-dark)",
           accent: "var(--color-border-accent)",
diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
index dd54738..4cbc540 100644
--- a/packages/ui/src/components/table.tsx
+++ b/packages/ui/src/components/table.tsx
@@ -20,7 +20,11 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn("border-border [&_tr]:border-b", className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -43,7 +47,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      "border-border-default border-t font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
@@ -58,7 +62,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+      "hover:bg-background-level2 data-[state=selected]:bg-background-level2 border-border-default border-b transition-colors",
       className
     )}
     {...props}
@@ -102,7 +106,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("text-muted-foreground mt-4 text-sm", className)}
+    className={cn("text-text-tertiary mt-4 text-sm", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index d67a30c..2077325 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "bg-card text-text-primary inline-flex h-9 items-center justify-center rounded-lg p-1",
+      "bg-background-level1 text-text-primary inline-flex h-9 items-center justify-center rounded-lg p-1",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-card-hover data-[state=active]:text-text-primary inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
+      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background-level2 data-[state=active]:text-text-primary hover:bg-background-level3 hover:text-text-primary inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
       className
     )}
     {...props}
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 202da33..dfed49e 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -55,9 +55,9 @@
   --color-dark-text-secondary: #e0e0e0;
   --color-dark-text-tertiary: #a0a7ae;
   --color-dark-text-accent: var(--color-accent-300);
-  --color-dark-border-default: #303030;
-  --color-dark-border-light: #4a4a4a;
-  --color-dark-border-dark: #202020;
+  --color-dark-border-default: #404040;
+  --color-dark-border-light: #5a5a5a;
+  --color-dark-border-dark: #303030;
   --color-dark-border-accent: var(--color-accent-300);
   --color-dark-scrollbar-track: #1f1f1f;
   --color-dark-scrollbar-thumb: #4a4a4a;
diff --git a/schema.dbml b/schema.dbml
index 757e2f8..4564dbf 100644
--- a/schema.dbml
+++ b/schema.dbml
@@ -24,12 +24,25 @@ Table USERS {
   }
 }
 
+Table MODULES {
+  id int [pk, increment]
+  name varchar(50) [unique, not null]
+  description text
+  created_at timestamp [default: `now()`]
+}
+
+Table ACTIONS {
+  id int [pk, increment]
+  name varchar(50) [unique, not null]
+  description text
+  created_at timestamp [default: `now()`]
+}
+
 Table PERMISSIONS {
   id int [pk, increment]
-  module varchar(50) [not null]
+  module_id int [not null, ref: > MODULES.id]
   resource varchar(50) [not null]
-  action varchar(50) [not null]
-  name varchar(100) [unique, not null, note: 'Generated: module || ":" || resource || ":" || action']
+  action_id int [not null, ref: > ACTIONS.id]
   description text
   created_at timestamp [default: `now()`]
 }
@@ -69,38 +82,40 @@ Table GROUP_PERMISSIONS {
 
 Table GROUP_MODULE_PERMISSIONS {
   group_id int [not null, ref: > GROUPS.id]
-  module varchar(50) [not null]
+  module_id int [not null, ref: > MODULES.id]
   created_at timestamp [default: `now()`]
 
   indexes {
-    (group_id, module) [pk]
-    group_module_permissions_idx (group_id, module)
+    (group_id, module_id) [pk]
+    group_module_permissions_idx (group_id, module_id)
   }
 }
 
 Table GROUP_ACTION_PERMISSIONS {
   group_id int [not null, ref: > GROUPS.id]
-  action varchar(50) [not null]
+  action_id int [not null, ref: > ACTIONS.id]
   created_at timestamp [default: `now()`]
 
   indexes {
-    (group_id, action) [pk]
-    group_action_permissions_idx (group_id, action)
+    (group_id, action_id) [pk]
+    group_action_permissions_idx (group_id, action_id)
   }
 }
 
-Table PAGE_PERMISSIONS {
+Table PATH_PERMISSIONS {
   id int [pk, increment]
-  page_id int [not null, ref: > WIKI_PAGES.id]
-  group_id int [ref: > GROUPS.id]
+  path_pattern varchar(1000) [not null, note: 'Path pattern using SQL LIKE syntax (e.g., /admin/%, /wiki/page, /docs/_%)']
+  group_id int [not null, ref: > GROUPS.id]
   permission_id int [not null, ref: > PERMISSIONS.id]
-  permission_type varchar(10) [not null, default: 'allow'] // 'allow' or 'deny'
+  permission_type varchar(10) [not null, default: 'allow', note: "'allow' or 'deny'"]
+  precedence int [not null, default: 0, note: 'Higher value takes precedence in case of conflicting patterns']
   created_at timestamp [default: `now()`]
 
   indexes {
-     // Note: Drizzle schema has index on (pageId, permissionId, groupId) which implies uniqueness
-     // DBML might require explicitly marking as unique if needed.
-    page_group_perm_idx (page_id, permission_id, group_id)
+    // Index for efficient lookup based on group and potentially path prefix
+    path_perm_group_idx (group_id)
+    // Potentially add unique constraint depending on desired logic:
+    // unique_path_perm (group_id, permission_id, path_pattern, permission_type)
   }
 }
 

From 99ac2eea59eeaabdca393799d6a4e79ecee06bc3 Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Wed, 23 Apr 2025 23:18:27 +0200
Subject: [PATCH 4/8] Improve admin pages

---
 apps/web/package.json                         |   2 +
 apps/web/src/app/admin/dashboard/page.tsx     | 227 +++++++--
 apps/web/src/app/admin/groups/group-form.tsx  |   1 -
 apps/web/src/app/admin/not-found.tsx          |   6 +-
 apps/web/src/app/admin/permissions/page.tsx   |   5 +
 .../admin/permissions/permissions-actions.tsx | 270 ++++++++++
 .../admin/permissions/permissions-table.tsx   |  37 +-
 apps/web/src/app/admin/wiki/page.tsx          | 466 ++++++++++++++++++
 .../web/src/components/layout/AdminLayout.tsx | 303 +++---------
 apps/web/src/lib/hooks/useDebounce.ts         |  31 ++
 apps/web/src/lib/permissions/validation.ts    | 216 ++++++--
 apps/web/src/lib/services/system.ts           |  81 ++-
 apps/web/src/server/routers/admin/index.ts    |   3 +
 .../src/server/routers/admin/permissions.ts   |  78 ++-
 apps/web/src/server/routers/admin/wiki.ts     | 150 ++++++
 apps/web/src/server/routers/index.ts          |  12 +-
 packages/db/src/registry/permissions.ts       |  20 +
 packages/db/src/registry/types.ts             |   6 +-
 packages/ui/package.json                      |   9 +-
 packages/ui/src/components/button.tsx         |  67 ++-
 packages/ui/src/components/dropdown.tsx       | 201 ++++++++
 packages/ui/src/components/index.ts           |   1 +
 pnpm-lock.yaml                                | 110 +++++
 23 files changed, 1909 insertions(+), 393 deletions(-)
 create mode 100644 apps/web/src/app/admin/permissions/permissions-actions.tsx
 create mode 100644 apps/web/src/app/admin/wiki/page.tsx
 create mode 100644 apps/web/src/lib/hooks/useDebounce.ts
 create mode 100644 apps/web/src/server/routers/admin/wiki.ts
 create mode 100644 packages/ui/src/components/dropdown.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index b6a5ebe..b31952d 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -34,6 +34,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-query-devtools": "^5.74.4",
+    "@tanstack/react-table": "^8.21.3",
     "@trpc/client": "^11.1.0",
     "@trpc/next": "^11.1.0",
     "@trpc/react-query": "^11.1.0",
@@ -58,6 +59,7 @@
     "pg": "^8.14.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-intersection-observer": "^9.16.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-highlight": "^7.0.2",
diff --git a/apps/web/src/app/admin/dashboard/page.tsx b/apps/web/src/app/admin/dashboard/page.tsx
index 6946277..68ab192 100644
--- a/apps/web/src/app/admin/dashboard/page.tsx
+++ b/apps/web/src/app/admin/dashboard/page.tsx
@@ -1,19 +1,23 @@
 "use client";
 
-import { Card } from "@repo/ui";
+import { Card, Skeleton, Button } from "@repo/ui";
 import { useTRPC } from "~/server/client";
 import { useQuery } from "@tanstack/react-query";
 import type { AppRouter } from "~/server/routers";
+import Link from "next/link";
 
 // Define type for the stats object returned by the API
 type SystemStatsQueryProcedure = AppRouter["admin"]["system"]["getStats"];
 type SystemStats = Awaited<ReturnType<SystemStatsQueryProcedure>>;
+// Note: SystemStats type is now automatically inferred to include dbStatus and dbError
 
 // Define type for the static part, adding a key to link to API data
 interface StaticStatData {
   title: string;
   icon: React.ReactNode;
-  key: keyof SystemStats; // Key to match the field in SystemStats
+  // Ensure key is part of SystemStats, excluding dbStatus and dbError which aren't displayed as cards
+  key: keyof Omit<SystemStats, "dbStatus" | "dbError">;
+  link?: string; // Optional link for the card
 }
 
 // TODO: Make stats clickable and redirect to the respective page
@@ -23,6 +27,7 @@ const staticStatsData: StaticStatData[] = [
   {
     title: "Total Pages",
     key: "pageCount",
+    link: "/admin/wiki",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -43,6 +48,7 @@ const staticStatsData: StaticStatData[] = [
   {
     title: "Total Tags",
     key: "tagCount",
+    link: "/tags",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -63,6 +69,7 @@ const staticStatsData: StaticStatData[] = [
   {
     title: "Total Assets",
     key: "assetCount",
+    link: "/admin/assets",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -83,6 +90,7 @@ const staticStatsData: StaticStatData[] = [
   {
     title: "Total Users",
     key: "userCount",
+    link: "/admin/users",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -103,6 +111,7 @@ const staticStatsData: StaticStatData[] = [
   {
     title: "User Groups",
     key: "groupCount",
+    link: "/admin/groups",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -122,21 +131,103 @@ const staticStatsData: StaticStatData[] = [
   },
 ];
 
+// New HealthCheckItem component
+function HealthCheckItem({
+  label,
+  status,
+  isLoading,
+  error,
+  onRefresh,
+}: {
+  label: string;
+  // Update status type to match systemService
+  status?: "healthy" | "unhealthy" | "pending" | "not-implemented" | "error";
+  isLoading: boolean;
+  error?: string | null;
+  onRefresh?: () => void;
+}) {
+  const getStatusIndicator = () => {
+    if (isLoading) {
+      return <span className="text-text-secondary">Checking...</span>;
+    }
+    // Use the error prop directly
+    if (error) {
+      // Display the error message if available
+      return (
+        <span className="text-destructive-500" title={error}>
+          Error
+        </span>
+      );
+    }
+    switch (status) {
+      case "healthy":
+        return <span className="text-success-500">Healthy</span>;
+      case "unhealthy":
+      case "error": // Treat 'error' status similar to 'unhealthy'
+        return <span className="text-destructive-500">Unhealthy</span>;
+      case "not-implemented":
+        return <span className="text-warning-500">Not Implemented</span>;
+      case "pending": // Handle 'pending' status explicitly
+      default:
+        return <span className="text-text-secondary">Pending...</span>;
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <span>{label}</span>
+      <div className="flex items-center gap-2">
+        {getStatusIndicator()}
+        {onRefresh && (
+          <Button
+            variant="outlined_simple"
+            size="sm"
+            onClick={onRefresh}
+            disabled={isLoading}
+          >
+            Ping
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export default function AdminDashboardPage() {
   // Fetch system stats using tRPC and TanStack Query
   const trpc = useTRPC();
+
   const {
     data: statsData,
-    isLoading,
-    error,
-  } = useQuery(trpc.admin.system.getStats.queryOptions());
+    isLoading: isLoadingStats,
+    error: statsError,
+    refetch: refetchStats,
+  } = useQuery(trpc.admin.system.getStats.queryOptions(undefined, {}));
+
+  // Fetch recent pages
+  const recentPagesQueryOptions = trpc.admin.wiki.list.queryOptions(
+    { limit: 5, sortBy: "updatedAt", sortOrder: "desc" },
+    { select: (data) => data.items } // Select only the items array
+  );
+  const {
+    data: recentPages,
+    isLoading: isLoadingPages,
+    error: pagesError,
+  } = useQuery(recentPagesQueryOptions);
 
-  // Handle error state
-  if (error) {
+  // Handle error state for stats
+  if (statsError) {
     return (
-      <div>Error loading system stats: {error.message}. Check permissions.</div>
+      <div>
+        Error loading system stats: {statsError.message}. Check permissions.
+      </div>
     );
   }
+  // Handle error state for pages
+  if (pagesError) {
+    // Log or display the error, but allow the rest of the dashboard to render
+    console.error("Error loading recent pages:", pagesError.message);
+  }
 
   return (
     <div className="space-y-6 p-4">
@@ -147,74 +238,102 @@ export default function AdminDashboardPage() {
 
       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
         {staticStatsData.map((statDef) => (
-          <Card key={statDef.key} className="p-6">
-            <div className="flex items-center">
-              <div className="bg-background-level1 rounded-full p-3">
-                {statDef.icon}
-              </div>
-              <div className="ml-4">
-                <p className="text-text-secondary text-sm font-medium">
-                  {statDef.title}
-                </p>
-                <p className="text-2xl font-semibold">
-                  {isLoading || !statsData ? (
-                    <span className="bg-background-level1 inline-block h-8 w-16 animate-pulse rounded"></span>
-                  ) : (
-                    statsData[statDef.key]
-                  )}
-                </p>
+          <Link key={statDef.key} href={statDef.link || "#"} passHref>
+            <Card className="hover:bg-background-level1 h-full p-6 transition-colors">
+              <div className="flex items-center">
+                <div className="bg-background-level1 rounded-full p-3">
+                  {statDef.icon}
+                </div>
+                <div className="ml-4">
+                  <p className="text-text-secondary text-sm font-medium">
+                    {statDef.title}
+                  </p>
+                  <p className="text-2xl font-semibold">
+                    {isLoadingStats || !statsData ? (
+                      <span className="bg-background-level1 inline-block h-8 w-16 animate-pulse rounded"></span>
+                    ) : (
+                      statsData[statDef.key]
+                    )}
+                  </p>
+                </div>
               </div>
-            </div>
-          </Card>
+            </Card>
+          </Link>
         ))}
       </div>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         <Card className="p-6">
           <h2 className="mb-4 text-lg font-medium">Recent Pages</h2>
-          {isLoading ? (
+          {isLoadingPages ? (
             <div className="space-y-4">
-              {[...Array(3)].map((_, i) => (
-                <div
-                  key={i}
-                  className="bg-background-level1 h-12 animate-pulse rounded"
-                ></div>
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="flex items-center justify-between">
+                  <Skeleton className="h-4 w-3/5" />
+                  <Skeleton className="h-4 w-1/5" />
+                </div>
               ))}
             </div>
+          ) : pagesError ? (
+            <p className="text-destructive text-sm">
+              Failed to load recent pages.
+            </p>
+          ) : recentPages && recentPages.length > 0 ? (
+            <ul className="space-y-2">
+              {recentPages.map((page) => (
+                <li
+                  key={page.id}
+                  className="flex items-center justify-between text-sm"
+                >
+                  <Link
+                    href={`/${page.path}`}
+                    className="text-primary hover:underline"
+                  >
+                    {page.title}
+                  </Link>
+                  <span className="text-text-secondary whitespace-nowrap">
+                    {page.updatedAtRelative}
+                  </span>
+                </li>
+              ))}
+            </ul>
           ) : (
-            <div className="space-y-4">
-              <p className="text-text-secondary">
-                Recent page activity will be shown here
-              </p>
-            </div>
+            <p className="text-text-secondary text-sm">No pages found.</p>
           )}
         </Card>
 
         <Card className="p-6">
           <h2 className="mb-4 text-lg font-medium">System Health</h2>
-          {isLoading ? (
+          {isLoadingStats ? (
             <div className="space-y-4">
               {[...Array(3)].map((_, i) => (
-                <div
-                  key={i}
-                  className="bg-background-level1 h-12 animate-pulse rounded"
-                ></div>
+                <div key={i} className="flex items-center justify-between">
+                  <Skeleton className="h-4 w-1/4" />
+                  <Skeleton className="h-4 w-1/4" />
+                </div>
               ))}
             </div>
           ) : (
             <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <span>Database</span>
-                <span className="text-success-500">Healthy</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span>Storage</span>
-                <span className="text-success-500">Healthy</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span>Cache</span>
-                <span className="text-success-500">Healthy</span>
-              </div>
+              <HealthCheckItem
+                label="Database"
+                status={statsData?.dbStatus ?? "pending"}
+                isLoading={isLoadingStats}
+                error={statsData?.dbError}
+                onRefresh={() => {
+                  refetchStats();
+                }}
+              />
+              <HealthCheckItem
+                label="Storage"
+                status="not-implemented"
+                isLoading={false}
+              />
+              <HealthCheckItem
+                label="Cache"
+                status="not-implemented"
+                isLoading={false}
+              />
             </div>
           )}
         </Card>
diff --git a/apps/web/src/app/admin/groups/group-form.tsx b/apps/web/src/app/admin/groups/group-form.tsx
index a6864fb..050eb79 100644
--- a/apps/web/src/app/admin/groups/group-form.tsx
+++ b/apps/web/src/app/admin/groups/group-form.tsx
@@ -29,7 +29,6 @@ interface GroupFormProps {
   };
   permissions: {
     id: number;
-    name: string;
     description: string | null;
     moduleId: number;
     resource: string;
diff --git a/apps/web/src/app/admin/not-found.tsx b/apps/web/src/app/admin/not-found.tsx
index 96ebf9d..231a2bc 100644
--- a/apps/web/src/app/admin/not-found.tsx
+++ b/apps/web/src/app/admin/not-found.tsx
@@ -7,9 +7,11 @@ export default function NotFound() {
   const router = useRouter();
 
   return (
-    <div className="flex h-full flex-col items-center justify-center gap-4">
+    <div className="flex h-[calc(100vh-5rem)] flex-col items-center justify-center gap-4">
       <h1 className="text-4xl font-bold">Admin Page Not Found</h1>
-      <Button onClick={() => router.back()}>Go back</Button>
+      <Button variant="outlined" onClick={() => router.back()}>
+        Go back
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/src/app/admin/permissions/page.tsx b/apps/web/src/app/admin/permissions/page.tsx
index d632140..f164f9f 100644
--- a/apps/web/src/app/admin/permissions/page.tsx
+++ b/apps/web/src/app/admin/permissions/page.tsx
@@ -3,6 +3,7 @@ import { getServerAuthSession } from "~/lib/auth";
 import { redirect } from "next/navigation";
 import { dbService } from "~/lib/services";
 import PermissionsTable from "./permissions-table";
+import { PermissionsActions } from "./permissions-actions";
 
 export const metadata: Metadata = {
   title: "Admin - Permissions | NextWiki",
@@ -28,6 +29,10 @@ export default async function PermissionsPage() {
     <div className="container mx-auto p-6">
       <h1 className="mb-6 text-3xl font-bold">Permissions Management</h1>
 
+      <PermissionsActions />
+
+      <br />
+
       <div className="bg-background-level1 rounded-lg p-6 shadow-sm">
         <h2 className="mb-4 text-xl font-semibold">System Permissions</h2>
         <p className="text-text-secondary mb-6 text-sm">
diff --git a/apps/web/src/app/admin/permissions/permissions-actions.tsx b/apps/web/src/app/admin/permissions/permissions-actions.tsx
new file mode 100644
index 0000000..2f35482
--- /dev/null
+++ b/apps/web/src/app/admin/permissions/permissions-actions.tsx
@@ -0,0 +1,270 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Modal } from "@repo/ui";
+import { toast } from "sonner";
+import { useTRPC } from "~/server/client";
+import { logger } from "@repo/logger";
+import { useMutation } from "@tanstack/react-query";
+import { AlertTriangle, CheckCircle, XCircle } from "lucide-react";
+
+// Define a type for the validation status
+type ValidationStatus =
+  | {
+      isValid: true;
+      missingCount: number;
+      extrasCount: number;
+      mismatchedCount: number;
+      error?: false; // Explicitly indicate no error
+    }
+  | {
+      isValid: false;
+      missingCount: number;
+      extrasCount: number;
+      mismatchedCount: number;
+      error?: false; // Explicitly indicate no error
+    }
+  | {
+      isValid: false;
+      error: true; // Indicate validation failed due to an error
+      message?: string;
+    }
+  | undefined; // Initial state
+
+export function PermissionsActions() {
+  const trpc = useTRPC();
+  const [validationStatus, setValidationStatus] =
+    useState<ValidationStatus>(undefined);
+  const [showFixModal, setShowFixModal] = useState<boolean | null>(null); // true for removeExtras, false otherwise, null if closed
+
+  const validateMutation = useMutation(
+    trpc.admin.permissions.validate.mutationOptions({
+      onSuccess: (data) => {
+        // Explicitly create the correct ValidationStatus variant
+        const newStatus: ValidationStatus = data.isValid
+          ? {
+              isValid: true,
+              missingCount: data.missingCount,
+              extrasCount: data.extrasCount,
+              mismatchedCount: data.mismatchedCount,
+              error: false, // Ensure error is explicitly false
+            }
+          : {
+              isValid: false,
+              missingCount: data.missingCount,
+              extrasCount: data.extrasCount,
+              mismatchedCount: data.mismatchedCount,
+              error: false, // Ensure error is explicitly false
+            };
+        setValidationStatus(newStatus); // Store the validation result
+
+        if (newStatus.isValid) {
+          toast.success("Permissions Validation Successful", {
+            description: "Registry and database permissions match.",
+          });
+        } else {
+          toast.warning("Permissions Validation Issues Found", {
+            description: `Missing: ${newStatus.missingCount}, Extras: ${newStatus.extrasCount}, Mismatched: ${newStatus.mismatchedCount}. Use 'Fix Permissions' to resolve.`,
+          });
+        }
+        logger.log("Validation Result:", data);
+      },
+      onError: (error) => {
+        setValidationStatus({
+          isValid: false,
+          error: true,
+          message: error.message,
+        }); // Store error state
+        toast.error("Permissions Validation Failed", {
+          description: error.message,
+        });
+        logger.error("Validation Error:", error);
+      },
+    })
+  );
+
+  const fixMutation = useMutation(
+    trpc.admin.permissions.fix.mutationOptions({
+      // onMutate is handled by modal state now
+      onSuccess: (data) => {
+        toast.success("Permissions Fix Successful", {
+          description: `Added: ${data.added}, Updated: ${data.updated}, Removed: ${data.removed}. Re-validating...`,
+        });
+        logger.log("Fix Result:", data);
+      },
+      onError: (error) => {
+        toast.error("Permissions Fix Failed", {
+          description: error.message,
+        });
+        logger.error("Fix Error:", error);
+      },
+      onSettled: () => {
+        setShowFixModal(null); // Close modal on settle
+        // Re-run validation after fix attempt
+        validateMutation.mutate();
+      },
+    })
+  );
+
+  const handleValidate = () => {
+    setValidationStatus(undefined); // Reset status before validating
+    validateMutation.mutate();
+  };
+
+  // This function now opens the modal
+  const handleInitiateFix = (removeExtras = false) => {
+    setShowFixModal(removeExtras);
+  };
+
+  // This function confirms the fix from the modal
+  const handleConfirmFix = () => {
+    if (showFixModal === null) return; // Should not happen, but safeguard
+    fixMutation.mutate({ removeExtras: showFixModal });
+  };
+
+  const handleCloseModal = () => {
+    if (!fixMutation.isPending) {
+      setShowFixModal(null);
+    }
+  };
+
+  // Determine if fix actions should be enabled
+  const canFix =
+    validationStatus !== undefined &&
+    !validationStatus.isValid &&
+    !validationStatus.error;
+
+  return (
+    <>
+      <div className="bg-background-level1 mt-6 flex flex-wrap items-center gap-4 rounded-md p-4">
+        <Button
+          onClick={handleValidate}
+          loading={validateMutation.isPending}
+          disabled={validateMutation.isPending || fixMutation.isPending}
+          variant="outlined"
+        >
+          {validateMutation.isPending
+            ? "Validating..."
+            : "Validate Permissions"}
+        </Button>
+
+        {/* Conditionally render validation status */}
+        {validationStatus && !validateMutation.isPending && (
+          <div className="flex items-center gap-2 text-sm">
+            {validationStatus.isValid ? (
+              <>
+                <CheckCircle className="h-5 w-5 text-green-500" />
+                <span className="text-text-secondary">
+                  Permissions are valid.
+                </span>
+              </>
+            ) : validationStatus.error ? (
+              <>
+                <XCircle className="h-5 w-5 text-red-500" />
+                <span className="text-text-error">
+                  Validation failed. Check logs.
+                </span>
+              </>
+            ) : (
+              <>
+                <AlertTriangle className="h-5 w-5 text-yellow-500" />
+                <span className="text-text-warning">
+                  Issues found: {validationStatus.missingCount} Missing,{" "}
+                  {validationStatus.extrasCount} Extras,{" "}
+                  {validationStatus.mismatchedCount} Mismatched.
+                </span>
+              </>
+            )}
+          </div>
+        )}
+
+        <div className="flex flex-grow justify-end gap-4">
+          <Button
+            onClick={() => handleInitiateFix(false)}
+            disabled={
+              !canFix || fixMutation.isPending || validateMutation.isPending
+            }
+            variant="outlined"
+            color="warning"
+          >
+            Fix Permissions (Keep Extras)
+          </Button>
+          <Button
+            onClick={() => handleInitiateFix(true)}
+            disabled={
+              !canFix || fixMutation.isPending || validateMutation.isPending
+            }
+            variant="outlined"
+            color="error"
+          >
+            Fix Permissions (Remove Extras)
+          </Button>
+        </div>
+        <p className="text-text-tertiary mt-2 w-full text-sm">
+          Validate checks registry against DB. Fix actions are only available if
+          validation fails. 'Remove Extras' deletes DB permissions not in the
+          code registry (potentially impactful).
+        </p>
+      </div>
+
+      {/* Confirmation Modal */}
+      {showFixModal !== null && (
+        <Modal
+          onClose={handleCloseModal}
+          size="md"
+          position="center"
+          animation="fade"
+          closeOnEscape={!fixMutation.isPending}
+          showCloseButton={!fixMutation.isPending}
+        >
+          <div className="p-6">
+            <div className="flex items-center gap-3">
+              <AlertTriangle
+                className={`h-8 w-8 ${showFixModal ? "text-red-500" : "text-yellow-500"}`}
+              />
+              <h3 className="text-xl font-semibold">Confirm Permission Fix</h3>
+            </div>
+            <p className="text-text-secondary my-4">
+              You are about to modify the permissions stored in the database
+              based on the code registry.
+              {showFixModal && (
+                <span className="font-semibold text-red-600">
+                  {" "}
+                  This includes removing extra permissions found in the database
+                  but not defined in the code.
+                </span>
+              )}
+              {!showFixModal && (
+                <span className="font-semibold text-yellow-600">
+                  {" "}
+                  This will add missing permissions and update mismatched ones,
+                  but keep any extra permissions found in the database.
+                </span>
+              )}
+              <br />
+              This action can impact user access if not done carefully. Are you
+              sure you want to proceed?
+            </p>
+            <div className="flex justify-end gap-3 pt-4">
+              <Button
+                variant="ghost"
+                onClick={handleCloseModal}
+                disabled={fixMutation.isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant={showFixModal ? "destructive" : "default"} // Use destructive variant for removing extras
+                onClick={handleConfirmFix}
+                loading={fixMutation.isPending}
+                disabled={fixMutation.isPending}
+              >
+                {fixMutation.isPending ? "Fixing..." : "Confirm Fix"}
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/src/app/admin/permissions/permissions-table.tsx b/apps/web/src/app/admin/permissions/permissions-table.tsx
index 3a01be6..72296ab 100644
--- a/apps/web/src/app/admin/permissions/permissions-table.tsx
+++ b/apps/web/src/app/admin/permissions/permissions-table.tsx
@@ -4,21 +4,36 @@ import { useState } from "react";
 
 interface Permission {
   id: number;
-  name: string;
   description: string | null;
   module: string;
   action: string;
+  resource: string;
 }
 
 interface PermissionsTableProps {
-  permissions: Permission[];
+  permissions: {
+    id: number;
+    description: string | null;
+    resource: string;
+    action: { name: string };
+    module: { name: string };
+  }[];
 }
 
 export default function PermissionsTable({
-  permissions,
+  permissions: rawPermissions,
 }: PermissionsTableProps) {
   const [filter, setFilter] = useState("");
 
+  // Map rawPermissions to the local Permission structure
+  const permissions: Permission[] = rawPermissions.map((p) => ({
+    id: p.id,
+    description: p.description,
+    module: p.module.name,
+    action: p.action.name,
+    resource: p.resource,
+  }));
+
   // Group permissions by module
   const groupedPermissions = permissions.reduce(
     (acc, permission) => {
@@ -41,11 +56,9 @@ export default function PermissionsTable({
       module.toLowerCase().includes(lowerCaseFilter) ||
       modulePermissions?.some(
         (p) =>
-          p.name.toLowerCase().includes(lowerCaseFilter) ||
+          p.resource.toLowerCase().includes(lowerCaseFilter) ||
           (p.description?.toLowerCase() || "").includes(lowerCaseFilter) ||
-          p.name.toLowerCase().includes(filter.toLowerCase()) ||
-          (p.description?.toLowerCase() || "").includes(filter.toLowerCase()) ||
-          p.action.toLowerCase().includes(filter.toLowerCase())
+          p.action.toLowerCase().includes(lowerCaseFilter)
       )
     );
   });
@@ -55,7 +68,7 @@ export default function PermissionsTable({
       <div className="mb-4">
         <input
           type="text"
-          placeholder="Search permissions..."
+          placeholder="Search permissions by module, resource, action, or description..."
           className="w-full rounded border p-2"
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
@@ -74,7 +87,7 @@ export default function PermissionsTable({
               <table className="w-full border-collapse">
                 <thead>
                   <tr className="bg-background-level3">
-                    <th className="p-2 text-left">Name</th>
+                    <th className="p-2 text-left">Resource</th>
                     <th className="p-2 text-left">Action</th>
                     <th className="p-2 text-left">Description</th>
                   </tr>
@@ -84,7 +97,9 @@ export default function PermissionsTable({
                     ?.filter(
                       (p) =>
                         !filter ||
-                        p.name.toLowerCase().includes(filter.toLowerCase()) ||
+                        p.resource
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
                         (p.description?.toLowerCase() || "").includes(
                           filter.toLowerCase()
                         ) ||
@@ -96,7 +111,7 @@ export default function PermissionsTable({
                         className="border-background-level2 border-b"
                       >
                         <td className="p-2 font-mono text-sm">
-                          {permission.name}
+                          {permission.resource}
                         </td>
                         <td className="p-2 capitalize">{permission.action}</td>
                         <td className="text-text-secondary p-2 text-sm">
diff --git a/apps/web/src/app/admin/wiki/page.tsx b/apps/web/src/app/admin/wiki/page.tsx
new file mode 100644
index 0000000..06daa41
--- /dev/null
+++ b/apps/web/src/app/admin/wiki/page.tsx
@@ -0,0 +1,466 @@
+"use client";
+
+import React, { useState, useMemo, useCallback } from "react";
+import Link from "next/link";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Card,
+  Badge,
+  Input,
+  Skeleton,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Modal,
+} from "@repo/ui";
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  ColumnDef,
+  SortingState,
+  getSortedRowModel,
+} from "@tanstack/react-table";
+import { useTRPC } from "~/server/client";
+import type { AppRouter } from "~/server/routers";
+import type { inferProcedureOutput, inferProcedureInput } from "@trpc/server";
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { useInView } from "react-intersection-observer";
+import { toast } from "sonner";
+import {
+  PencilIcon,
+  TrashIcon,
+  EyeIcon,
+  EllipsisVerticalIcon,
+} from "@heroicons/react/24/outline";
+import { useDebounce } from "~/lib/hooks/useDebounce";
+
+// Infer types from procedures
+type AdminWikiListOutput = inferProcedureOutput<
+  AppRouter["admin"]["wiki"]["list"]
+>;
+// Base type reflecting server output (Dates)
+type PageItemServer = AdminWikiListOutput["items"][number];
+type AdminWikiDeleteInput = inferProcedureInput<AppRouter["wiki"]["delete"]>;
+
+// Client-Side Type reflecting serialized dates
+type PageItemClient = Omit<
+  PageItemServer,
+  "createdAt" | "updatedAt" | "lockExpiresAt"
+> & {
+  createdAt: string | null;
+  updatedAt: string | null;
+  lockExpiresAt: string | null; // Assuming lockExpiresAt is also a Date serialized to string
+};
+
+export default function AdminWikiPage() {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  // Use Client type for state
+  const [pageToDelete, setPageToDelete] = useState<PageItemClient | null>(null);
+
+  // Define query inputs based on state
+  const queryInput = useMemo(
+    () => ({
+      limit: 20,
+      sortBy: sorting[0]?.id as "title" | "path" | "updatedAt" | "createdAt",
+      sortOrder: (sorting[0]
+        ? sorting[0].desc
+          ? "desc"
+          : "asc"
+        : undefined) as "asc" | "desc" | undefined,
+      search: debouncedSearchTerm,
+    }),
+    [sorting, debouncedSearchTerm]
+  );
+
+  // Define infinite query options using the helper
+  const listQueryOptions = trpc.admin.wiki.list.infiniteQueryOptions(
+    queryInput,
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    }
+  );
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+  } = useInfiniteQuery(listQueryOptions);
+
+  // Flatten the pages data
+  const flatData = useMemo(
+    // flatData will have string dates due to serialization
+    () => data?.pages?.flatMap((page) => page.items) ?? [],
+    [data]
+  );
+
+  const { ref, inView } = useInView({ threshold: 0.5 });
+
+  React.useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, fetchNextPage, hasNextPage, isFetchingNextPage]);
+
+  // Define mutation options using the helper
+  const deleteMutationOptions = trpc.wiki.delete.mutationOptions({
+    onSuccess: (data, variables: AdminWikiDeleteInput) => {
+      const deletedTitle =
+        flatData.find((p) => p.id === variables.id)?.title ||
+        `ID: ${variables.id}`;
+      toast.success(`Page "${deletedTitle}" deleted successfully.`);
+      queryClient.invalidateQueries({
+        queryKey: trpc.admin.wiki.list.queryKey(),
+      });
+      setPageToDelete(null);
+    },
+    // Use 'any' or import TRPCClientErrorLike if preferred
+    onError: (error) => {
+      toast.error(`Failed to delete page: ${error.message}`);
+      console.error("Delete page error:", error);
+    },
+    onSettled: () => {
+      setShowDeleteDialog(false);
+    },
+  });
+
+  const deletePageMutation = useMutation(deleteMutationOptions);
+
+  // Use Client type for callback parameter
+  const handleDeleteClick = useCallback((page: PageItemClient) => {
+    setPageToDelete(page);
+    setShowDeleteDialog(true);
+  }, []);
+
+  const confirmDelete = () => {
+    if (pageToDelete) {
+      // pageToDelete is PageItemClient, pass its ID
+      deletePageMutation.mutate({ id: pageToDelete.id });
+    }
+  };
+
+  // Use PageItemClient for Column Definitions
+  const columns = useMemo<ColumnDef<PageItemClient>[]>(
+    () => [
+      {
+        accessorKey: "title",
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Title
+          </Button>
+        ),
+        // row.original is now PageItemClient
+        cell: ({ row }) => (
+          <div className="font-medium">{row.original.title}</div>
+        ),
+      },
+      {
+        accessorKey: "path",
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Path
+          </Button>
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground break-all text-sm">
+            {row.original.path}
+          </span>
+        ),
+      },
+      {
+        accessorKey: "isPublished",
+        header: "Status",
+        cell: ({ row }) => (
+          <Badge variant={row.original.isPublished ? "success" : "secondary"}>
+            {row.original.isPublished ? "Published" : "Draft"}
+          </Badge>
+        ),
+        enableSorting: false,
+      },
+      {
+        accessorKey: "updatedAt",
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Updated
+          </Button>
+        ),
+        // Display string date or relative date
+        cell: ({ row }) => (
+          <div
+            className="text-muted-foreground whitespace-nowrap text-sm"
+            title={row.original.updatedAt?.toString() /* Display original string date in title */}
+          >
+            {row.original.updatedAtRelative} by{" "}
+            {row.original.updatedBy?.name || "N/A"}
+          </div>
+        ),
+      },
+      {
+        id: "actions",
+        header: () => <div className="text-right">Actions</div>,
+        cell: ({ row }) => {
+          // row.original is PageItemClient
+          const page = row.original;
+          const deleteHandler = useCallback(
+            () => handleDeleteClick(page),
+            [page]
+          );
+
+          return (
+            <div className="text-right">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="h-8 w-8 p-0">
+                    <span className="sr-only">Open menu</span>
+                    <EllipsisVerticalIcon className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="end"
+                  className="border-border bg-background-default dark:bg-background-paper border"
+                >
+                  <DropdownMenuItem asChild>
+                    <Link
+                      href={`/${page.path}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center"
+                    >
+                      <EyeIcon className="mr-2 h-4 w-4" /> View
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link
+                      href={`/${page.path}?edit=true`}
+                      className="flex items-center"
+                    >
+                      <PencilIcon className="mr-2 h-4 w-4" /> Edit
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={deleteHandler}
+                    className="text-destructive focus:text-destructive focus:bg-destructive/10 flex items-center"
+                  >
+                    <TrashIcon className="mr-2 h-4 w-4" /> Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          );
+        },
+        enableSorting: false,
+      },
+    ],
+    [handleDeleteClick]
+  );
+
+  // Initialize the table instance
+  const table = useReactTable({
+    // Assert flatData type here for safety
+    data: flatData as PageItemClient[],
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+  });
+
+  if (error) {
+    return (
+      <div className="text-destructive p-4">
+        Error loading pages: {error.message}
+      </div>
+    );
+  }
+
+  // JSX Rendering remains largely the same
+  return (
+    <div className="space-y-6 p-4">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold">Manage Wiki Pages</h1>
+          <p className="text-text-secondary">
+            View, edit, and manage all wiki pages.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Input
+            placeholder="Search by title or path..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="max-w-xs"
+          />
+          <Link href="/create" passHref>
+            <Button>Create Page</Button>
+          </Link>
+        </div>
+      </div>
+
+      <Card>
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead
+                      key={header.id}
+                      style={{
+                        width:
+                          header.getSize() !== 150
+                            ? header.getSize()
+                            : undefined,
+                      }}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {isLoading && !data ? (
+                [...Array(5)].map((_, i) => (
+                  <TableRow key={`skeleton-${i}`}>
+                    {columns.map((col, colIndex) => (
+                      <TableCell key={`${col.id || colIndex}-skeleton-${i}`}>
+                        <Skeleton className="h-5 w-full" />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : 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 pages found{" "}
+                    {debouncedSearchTerm ? `for "${debouncedSearchTerm}"` : ""}.
+                  </TableCell>
+                </TableRow>
+              )}
+              {isFetchingNextPage && (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="py-2 text-center"
+                  >
+                    <span className="text-muted-foreground animate-pulse text-sm">
+                      Loading more...
+                    </span>
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <div ref={ref} style={{ height: "1px" }} />
+        {!isLoading && !hasNextPage && flatData.length > 0 && (
+          <div className="text-muted-foreground p-4 text-center text-sm">
+            End of list.
+          </div>
+        )}
+        {!isLoading &&
+          !hasNextPage &&
+          flatData.length === 0 &&
+          !debouncedSearchTerm && (
+            <div className="text-muted-foreground p-4 text-center text-sm">
+              No pages exist yet. Create one!
+            </div>
+          )}
+      </Card>
+
+      {showDeleteDialog && pageToDelete && (
+        <Modal
+          onClose={() => setShowDeleteDialog(false)}
+          size="sm"
+          showCloseButton={true}
+          className="p-6"
+        >
+          <div className="space-y-4">
+            <h2 className="text-lg font-semibold">Confirm Deletion</h2>
+            <p className="text-muted-foreground text-sm">
+              Are you sure you want to delete the page
+              <span className="font-semibold">
+                {" "}
+                &quot;{pageToDelete.title}&quot;
+              </span>{" "}
+              ({pageToDelete.path})? This action is permanent and cannot be
+              undone.
+            </p>
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="outlined"
+                onClick={() => setShowDeleteDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={confirmDelete}
+                disabled={deletePageMutation.isPending}
+              >
+                {deletePageMutation.isPending ? "Deleting..." : "Delete"}
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/layout/AdminLayout.tsx b/apps/web/src/components/layout/AdminLayout.tsx
index d9c9268..0441959 100644
--- a/apps/web/src/components/layout/AdminLayout.tsx
+++ b/apps/web/src/components/layout/AdminLayout.tsx
@@ -5,6 +5,42 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { env } from "~/env";
 import { cn, ScrollArea } from "@repo/ui";
+import {
+  HomeIcon,
+  BookOpenIcon,
+  UsersIcon,
+  ShieldCheckIcon,
+  UserGroupIcon,
+  PhotoIcon,
+  CogIcon,
+  BeakerIcon,
+  ArrowLeftOnRectangleIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+} from "@heroicons/react/24/outline";
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  condition?: boolean;
+}
+
+const navigationItems: NavItem[] = [
+  { href: "/admin/dashboard", label: "Dashboard", icon: HomeIcon },
+  { href: "/admin/wiki", label: "Wiki Pages", icon: BookOpenIcon },
+  { href: "/admin/users", label: "Users", icon: UsersIcon },
+  { href: "/admin/permissions", label: "Permissions", icon: ShieldCheckIcon },
+  { href: "/admin/groups", label: "Groups", icon: UserGroupIcon },
+  { href: "/admin/assets", label: "Assets", icon: PhotoIcon },
+  {
+    href: "/admin/example",
+    label: "Permission Example",
+    icon: BeakerIcon,
+    condition: env.NEXT_PUBLIC_NODE_ENV === "development",
+  },
+  { href: "/admin/settings", label: "Settings", icon: CogIcon },
+];
 
 interface AdminLayoutProps {
   children: ReactNode;
@@ -42,258 +78,53 @@ export function AdminLayout({ children }: AdminLayoutProps) {
               className="hover:bg-background-level2 text-text-secondary rounded-md p-1"
             >
               {collapsed ? (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                    clipRule="evenodd"
-                  />
-                </svg>
+                <ChevronDoubleRightIcon className="h-5 w-5" />
               ) : (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                    clipRule="evenodd"
-                  />
-                </svg>
+                <ChevronDoubleLeftIcon className="h-5 w-5" />
               )}
             </button>
           </div>
 
           <div className="flex-1 overflow-y-auto py-5">
             <nav className="space-y-1 px-2">
-              {/* Dashboard */}
-              <Link
-                href="/admin/dashboard"
-                className={`flex items-center rounded-md px-3 py-2 transition-colors ${
-                  isActive("/admin/dashboard")
-                    ? "bg-primary/10 text-primary"
-                    : "text-text-primary hover:bg-background-level2"
-                } ${collapsed ? "justify-center" : ""}`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className={`h-5 w-5 flex-shrink-0 ${collapsed ? "" : "mr-3"}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-                  />
-                </svg>
-                {!collapsed && <span>Dashboard</span>}
-              </Link>
-
-              {/* Wiki Pages */}
-              <Link
-                href="/admin/wiki"
-                className={`flex items-center rounded-md px-3 py-2 transition-colors ${
-                  isActive("/admin/wiki")
-                    ? "bg-primary/10 text-primary"
-                    : "text-text-primary hover:bg-background-level2"
-                } ${collapsed ? "justify-center" : ""}`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className={`h-5 w-5 flex-shrink-0 ${collapsed ? "" : "mr-3"}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
-                  />
-                </svg>
-                {!collapsed && <span>Wiki Pages</span>}
-              </Link>
-
-              {/* Users */}
-              <Link
-                href="/admin/users"
-                className={`flex items-center rounded-md px-3 py-2 transition-colors ${
-                  isActive("/admin/users")
-                    ? "bg-primary/10 text-primary"
-                    : "text-text-primary hover:bg-background-level2"
-                } ${collapsed ? "justify-center" : ""}`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className={`h-5 w-5 flex-shrink-0 ${collapsed ? "" : "mr-3"}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-                  />
-                </svg>
-                {!collapsed && <span>Users</span>}
-              </Link>
-
-              {/* Groups */}
-              <Link
-                href="/admin/groups"
-                className={`flex items-center rounded-md px-3 py-2 transition-colors ${
-                  isActive("/admin/groups")
-                    ? "bg-primary/10 text-primary"
-                    : "text-text-primary hover:bg-background-level2"
-                } ${collapsed ? "justify-center" : ""}`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className={`h-5 w-5 flex-shrink-0 ${collapsed ? "" : "mr-3"}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                  />
-                </svg>
-                {!collapsed && <span>Groups</span>}
-              </Link>
-
-              {/* Assets */}
-              <Link
-                href="/admin/assets"
-                className={`flex items-center rounded-md px-3 py-2 transition-colors ${
-                  isActive("/admin/assets")
-                    ? "bg-primary/10 text-primary"
-                    : "text-text-primary hover:bg-background-level2"
-                } ${collapsed ? "justify-center" : ""}`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className={`h-5 w-5 flex-shrink-0 ${collapsed ? "" : "mr-3"}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                {!collapsed && <span>Assets</span>}
-              </Link>
-
-              {/* Permission Example */}
-              {env.NEXT_PUBLIC_NODE_ENV === "development" && (
-                <Link
-                  href="/admin/example"
-                  className={`flex items-center rounded-md px-3 py-2 transition-colors ${
-                    isActive("/admin/example")
-                      ? "bg-primary/10 text-primary"
-                      : "text-text-primary hover:bg-background-level2"
-                  } ${collapsed ? "justify-center" : ""}`}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className={`h-5 w-5 flex-shrink-0 ${
-                      collapsed ? "" : "mr-3"
-                    }`}
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
-                  {!collapsed && <span>Permission Example</span>}
-                </Link>
+              {navigationItems.map(
+                (item) =>
+                  (item.condition === undefined || item.condition) && (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className={cn(
+                        "flex items-center rounded-md px-3 py-2 transition-colors",
+                        isActive(item.href)
+                          ? "bg-primary/10 text-primary"
+                          : "text-text-primary hover:bg-background-level2",
+                        collapsed ? "justify-center" : ""
+                      )}
+                    >
+                      <item.icon
+                        className={cn(
+                          "h-5 w-5 flex-shrink-0",
+                          collapsed ? "" : "mr-3"
+                        )}
+                      />
+                      {!collapsed && <span>{item.label}</span>}
+                    </Link>
+                  )
               )}
-
-              {/* Settings */}
-              <Link
-                href="/admin/settings"
-                className={`flex items-center rounded-md px-3 py-2 transition-colors ${
-                  isActive("/admin/settings")
-                    ? "bg-primary/10 text-primary"
-                    : "text-text-primary hover:bg-background-level2"
-                } ${collapsed ? "justify-center" : ""}`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className={`h-5 w-5 flex-shrink-0 ${collapsed ? "" : "mr-3"}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                </svg>
-                {!collapsed && <span>Settings</span>}
-              </Link>
             </nav>
           </div>
 
           <div className="border-border-default border-t p-4">
             <Link
               href="/"
-              className={`text-text-secondary hover:bg-background-level2 flex items-center rounded-md px-3 py-2 ${
+              className={cn(
+                "text-text-secondary hover:bg-background-level2 flex items-center rounded-md px-3 py-2",
                 collapsed ? "justify-center" : ""
-              }`}
+              )}
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className={`h-5 w-5 flex-shrink-0 ${collapsed ? "" : "mr-3"}`}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M11 17l-5-5m0 0l5-5m-5 5h12"
-                />
-              </svg>
+              <ArrowLeftOnRectangleIcon
+                className={cn("h-5 w-5 flex-shrink-0", collapsed ? "" : "mr-3")}
+              />
               {!collapsed && <span>Back to Wiki</span>}
             </Link>
           </div>
diff --git a/apps/web/src/lib/hooks/useDebounce.ts b/apps/web/src/lib/hooks/useDebounce.ts
new file mode 100644
index 0000000..6296377
--- /dev/null
+++ b/apps/web/src/lib/hooks/useDebounce.ts
@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Custom hook to debounce a value.
+ * @param value The value to debounce.
+ * @param delay The debounce delay in milliseconds.
+ * @returns The debounced value.
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
diff --git a/apps/web/src/lib/permissions/validation.ts b/apps/web/src/lib/permissions/validation.ts
index b887278..eb60257 100644
--- a/apps/web/src/lib/permissions/validation.ts
+++ b/apps/web/src/lib/permissions/validation.ts
@@ -4,9 +4,15 @@
  * Only import from server components or API routes
  */
 import { db } from "@repo/db";
-import { permissions } from "@repo/db";
+import {
+  permissions as permissionsTable,
+  type Permission as DbPermissionType, // Type for DB permission rows
+} from "@repo/db";
 import { eq } from "drizzle-orm";
-import { getAllPermissions, createPermissionId } from "@repo/db";
+import {
+  getAllPermissions as getRegistryPermissions, // Rename for clarity
+  type Permission as RegistryPermissionType, // Type for registry permission objects
+} from "@repo/db";
 import { logger } from "@repo/logger";
 
 /**
@@ -14,40 +20,95 @@ import { logger } from "@repo/logger";
  * Returns an object containing the validation results
  */
 export async function validatePermissionsDatabase() {
-  // Get all permissions from the database
+  // Get registry and DB data
+  const registryPermissions = getRegistryPermissions();
   const dbPermissions = await db.query.permissions.findMany();
-  const registryPermissions = getAllPermissions();
+  const dbModules = await db.query.modules.findMany();
+  const dbActions = await db.query.actions.findMany();
+
+  // Create lookups for faster comparison
+  const moduleNameToId = new Map(dbModules.map((m) => [m.name, m.id]));
+  const actionNameToId = new Map(dbActions.map((a) => [a.name, a.id]));
+  const moduleIdToName = new Map(dbModules.map((m) => [m.id, m.name]));
+  const actionIdToName = new Map(dbActions.map((a) => [a.id, a.name]));
 
   // Find permissions that are in the registry but missing from the database
-  const missing = registryPermissions.filter((expected) => {
-    const name = createPermissionId(expected);
-    return !dbPermissions.some((p) => p.name === name);
+  const missing = registryPermissions.filter((regPerm) => {
+    const expectedModuleId = moduleNameToId.get(regPerm.module);
+    const expectedActionId = actionNameToId.get(regPerm.action);
+
+    // Skip if module/action name from registry doesn't exist in DB (separate issue?)
+    if (expectedModuleId === undefined || expectedActionId === undefined) {
+      logger.error(
+        `Registry permission '${regPerm.module}:${regPerm.resource}:${regPerm.action}' refers to unknown module or action.`
+      );
+      return false; // Treat as invalid registry entry for this validation
+    }
+
+    return !dbPermissions.some(
+      (dbPerm) =>
+        dbPerm.moduleId === expectedModuleId &&
+        dbPerm.resource === regPerm.resource &&
+        dbPerm.actionId === expectedActionId
+    );
   });
 
   // Find permissions that are in the database but not in the registry
   const extras = dbPermissions.filter((dbPerm) => {
-    // Check if the permission name exists in the registry
+    const moduleName = moduleIdToName.get(dbPerm.moduleId);
+    const actionName = actionIdToName.get(dbPerm.actionId);
+
+    // Skip if module/action ID from DB doesn't exist in lookup (data integrity issue?)
+    if (moduleName === undefined || actionName === undefined) {
+      logger.error(
+        `DB permission ID ${dbPerm.id} refers to unknown module ID ${dbPerm.moduleId} or action ID ${dbPerm.actionId}.`
+      );
+      return false; // Treat as invalid DB entry for this validation
+    }
+
     return !registryPermissions.some(
-      (regPerm) => createPermissionId(regPerm) === dbPerm.name
+      (regPerm) =>
+        regPerm.module === moduleName &&
+        regPerm.resource === dbPerm.resource &&
+        regPerm.action === actionName
     );
   });
 
   // Find permissions that have different descriptions
   const mismatched = dbPermissions.filter((dbPerm) => {
+    const moduleName = moduleIdToName.get(dbPerm.moduleId);
+    const actionName = actionIdToName.get(dbPerm.actionId);
+
+    if (moduleName === undefined || actionName === undefined) {
+      // Already logged as error above if it's an extra, avoid double logging
+      return false;
+    }
+
     const regPerm = registryPermissions.find(
-      (p) => createPermissionId(p) === dbPerm.name
+      (p) =>
+        p.module === moduleName &&
+        p.resource === dbPerm.resource &&
+        p.action === actionName
+    );
+    // Ensure description is compared correctly (handle null/undefined)
+    return (
+      regPerm && (regPerm.description ?? null) !== (dbPerm.description ?? null)
     );
-    return regPerm && regPerm.description !== dbPerm.description;
   });
 
   return {
     isValid:
       missing.length === 0 && extras.length === 0 && mismatched.length === 0,
-    missing,
-    extras,
-    mismatched,
-    dbPermissions,
-    registryPermissions,
+    missing, // Registry items not in DB
+    extras, // DB items not in Registry
+    mismatched, // DB items with different description than Registry
+    dbPermissions, // Raw DB data
+    registryPermissions, // Raw Registry data
+    // Include maps for potential use in logging/fixing if needed
+    moduleIdToName,
+    actionIdToName,
+    moduleNameToId,
+    actionNameToId,
   };
 }
 
@@ -56,7 +117,9 @@ export async function validatePermissionsDatabase() {
  * Adds missing permissions, updates mismatched descriptions, and optionally removes extras
  */
 export async function fixPermissionsDatabase(removeExtras = false) {
+  // Pass lookups to avoid re-fetching
   const validation = await validatePermissionsDatabase();
+
   const results = {
     added: 0,
     updated: 0,
@@ -64,35 +127,56 @@ export async function fixPermissionsDatabase(removeExtras = false) {
   };
 
   // Add missing permissions
-  for (const permission of validation.missing) {
-    await db.insert(permissions).values({
-      module: permission.module,
-      resource: permission.resource,
-      action: permission.action,
-      description: permission.description,
-    });
-    results.added++;
+  for (const regPerm of validation.missing) {
+    const moduleId = validation.moduleNameToId.get(regPerm.module);
+    const actionId = validation.actionNameToId.get(regPerm.action);
+
+    // Ensure we have valid IDs before inserting
+    if (moduleId !== undefined && actionId !== undefined) {
+      await db.insert(permissionsTable).values({
+        moduleId: moduleId,
+        resource: regPerm.resource,
+        actionId: actionId,
+        description: regPerm.description,
+      });
+      results.added++;
+    } else {
+      logger.error(
+        `Could not add missing permission '${regPerm.module}:${regPerm.resource}:${regPerm.action}' because module or action name not found in DB.`
+      );
+    }
   }
 
   // Update mismatched descriptions
   for (const dbPerm of validation.mismatched) {
-    const regPerm = validation.registryPermissions.find(
-      (p) => createPermissionId(p) === dbPerm.name
-    );
+    const moduleName = validation.moduleIdToName.get(dbPerm.moduleId);
+    const actionName = validation.actionIdToName.get(dbPerm.actionId);
 
-    if (regPerm) {
-      await db
-        .update(permissions)
-        .set({ description: regPerm.description })
-        .where(eq(permissions.id, dbPerm.id));
-      results.updated++;
+    // Should always be findable based on mismatch logic, but check anyway
+    if (moduleName && actionName) {
+      const regPerm = validation.registryPermissions.find(
+        (p) =>
+          p.module === moduleName &&
+          p.resource === dbPerm.resource &&
+          p.action === actionName
+      );
+
+      if (regPerm) {
+        await db
+          .update(permissionsTable)
+          .set({ description: regPerm.description ?? null })
+          .where(eq(permissionsTable.id, dbPerm.id));
+        results.updated++;
+      }
     }
   }
 
   // Remove extras if requested
   if (removeExtras) {
     for (const extra of validation.extras) {
-      await db.delete(permissions).where(eq(permissions.id, extra.id));
+      await db
+        .delete(permissionsTable)
+        .where(eq(permissionsTable.id, extra.id));
       results.removed++;
     }
   }
@@ -104,6 +188,7 @@ export async function fixPermissionsDatabase(removeExtras = false) {
  * Logs the result of a permissions database validation
  */
 export function logValidationResults(
+  // Infer the type correctly from the return value
   validation: Awaited<ReturnType<typeof validatePermissionsDatabase>>
 ) {
   if (validation.isValid) {
@@ -111,10 +196,33 @@ export function logValidationResults(
     return;
   }
 
+  // Helper to format permission identifier from Registry type
+  const formatRegPermId = (p: RegistryPermissionType) =>
+    `${p.module}:${p.resource}:${p.action}`;
+
+  // Helper to format permission identifier from DB type using lookups
+  const formatDbPermId = (p: {
+    moduleId: number;
+    actionId: number;
+    resource: string;
+  }) => {
+    // Use the maps passed within the validation object
+    const moduleName =
+      validation.moduleIdToName.get(p.moduleId) ?? `ModID ${p.moduleId}`;
+    const actionName =
+      validation.actionIdToName.get(p.actionId) ?? `ActID ${p.actionId}`;
+    return `${moduleName}:${p.resource}:${actionName}`;
+  };
+
   if (validation.missing.length > 0) {
-    logger.warn(`⚠️ Found ${validation.missing.length} missing permissions:`);
-    validation.missing.forEach((p) => {
-      logger.warn(`  - ${createPermissionId(p)}: ${p.description}`);
+    logger.warn(
+      `⚠️ Found ${validation.missing.length} missing permissions (Registry -> DB):`
+    );
+    // Explicitly type 'p' as RegistryPermissionType - This is correct as validation.missing contains Registry types
+    validation.missing.forEach((p: RegistryPermissionType) => {
+      logger.warn(
+        `  - ${formatRegPermId(p)}: ${p.description ?? "(no description)"}`
+      );
     });
   }
 
@@ -122,24 +230,40 @@ export function logValidationResults(
     logger.warn(
       `⚠️ Found ${validation.mismatched.length} permissions with mismatched descriptions:`
     );
+    // Remove explicit type ': DbPermissionType'. Let TS infer from validation.mismatched array.
     validation.mismatched.forEach((dbPerm) => {
-      const regPerm = validation.registryPermissions.find(
-        (p) => createPermissionId(p) === dbPerm.name
+      // Find corresponding registry permission (logic seems okay)
+      const regPerm = validation.registryPermissions.find((p) => {
+        const modId = validation.moduleNameToId.get(p.module);
+        const actId = validation.actionNameToId.get(p.action);
+        // Now dbPerm correctly has moduleId and actionId from inference
+        return (
+          modId === dbPerm.moduleId &&
+          p.resource === dbPerm.resource &&
+          actId === dbPerm.actionId
+        );
+      });
+      // Pass the inferred dbPerm to the formatter.
+      // Need to adjust formatDbPermId signature or cast dbPerm if necessary.
+      // Let's adjust formatDbPermId to accept the inferred type.
+      logger.warn(`  - ${formatDbPermId(dbPerm)}:`);
+      logger.warn(`    DB: ${dbPerm.description ?? "(null)"}`);
+      logger.warn(
+        `    Registry: ${regPerm?.description ?? "(Not found in registry?)"}`
       );
-      if (regPerm) {
-        logger.warn(`  - ${dbPerm.name}:`);
-        logger.warn(`    DB: ${dbPerm.description}`);
-        logger.warn(`    Registry: ${regPerm.description}`);
-      }
     });
   }
 
   if (validation.extras.length > 0) {
     logger.warn(
-      `⚠️ Found ${validation.extras.length} extra permissions in the database:`
+      `⚠️ Found ${validation.extras.length} extra permissions in the database (DB only):`
     );
+    // Remove explicit type ': DbPermissionType'. Let TS infer from validation.extras array.
     validation.extras.forEach((p) => {
-      logger.warn(`  - ${p.name}: ${p.description}`);
+      // Pass the inferred p to the formatter
+      logger.warn(
+        `  - ${formatDbPermId(p)}: ${p.description ?? "(no description)"}`
+      );
     });
   }
 }
diff --git a/apps/web/src/lib/services/system.ts b/apps/web/src/lib/services/system.ts
index e85720d..9a9346d 100644
--- a/apps/web/src/lib/services/system.ts
+++ b/apps/web/src/lib/services/system.ts
@@ -2,33 +2,70 @@ import { db, users, wikiTags, wikiPages, assets, groups } from "@repo/db";
 import { sql } from "drizzle-orm";
 
 /**
- * Tag service - handles all tag-related database operations
+ * System service - handles system-related operations
  */
 export const systemService = {
   getStats: async () => {
-    const [userCount, pageCount, tagCount, assetCount, groupCount] =
-      await Promise.all([
-        db.select({ count: sql<number>`COUNT(*)`.mapWith(Number) }).from(users),
-        db
-          .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
-          .from(wikiPages),
-        db
-          .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
-          .from(wikiTags),
-        db
-          .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
-          .from(assets),
-        db
-          .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
-          .from(groups),
-      ]);
+    let dbStatus: "healthy" | "unhealthy" | "error" | "pending" = "pending";
+    let dbError: string | null = null;
+
+    try {
+      // Simple query to check DB connection
+      await db.execute(sql`SELECT 1`);
+      dbStatus = "healthy";
+    } catch (error) {
+      console.error("Database health check failed:", error);
+      dbStatus = "unhealthy";
+      dbError =
+        error instanceof Error ? error.message : "Unknown database error";
+    }
+
+    const results = await Promise.allSettled([
+      db.select({ count: sql<number>`COUNT(*)`.mapWith(Number) }).from(users),
+      db
+        .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
+        .from(wikiPages),
+      db
+        .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
+        .from(wikiTags),
+      db.select({ count: sql<number>`COUNT(*)`.mapWith(Number) }).from(assets),
+      db.select({ count: sql<number>`COUNT(*)`.mapWith(Number) }).from(groups),
+    ]);
+
+    // Simplified helper to extract count directly from the result array
+    const getCountFromResult = (
+      result: PromiseSettledResult<{ count: number }[]>
+    ) => {
+      if (
+        result.status === "fulfilled" &&
+        result.value &&
+        result.value.length > 0 &&
+        result.value[0]
+      ) {
+        return result.value[0].count ?? 0;
+      }
+      if (result.status === "rejected") {
+        console.error("Failed to fetch count:", result.reason);
+      }
+      return 0;
+    };
+
+    const [
+      userCountResult,
+      pageCountResult,
+      tagCountResult,
+      assetCountResult,
+      groupCountResult,
+    ] = results;
 
     const stats = {
-      userCount: userCount[0]?.count ?? 0,
-      pageCount: pageCount[0]?.count ?? 0,
-      tagCount: tagCount[0]?.count ?? 0,
-      assetCount: assetCount[0]?.count ?? 0,
-      groupCount: groupCount[0]?.count ?? 0,
+      dbStatus,
+      dbError,
+      userCount: getCountFromResult(userCountResult),
+      pageCount: getCountFromResult(pageCountResult),
+      tagCount: getCountFromResult(tagCountResult),
+      assetCount: getCountFromResult(assetCountResult),
+      groupCount: getCountFromResult(groupCountResult),
     };
     return stats;
   },
diff --git a/apps/web/src/server/routers/admin/index.ts b/apps/web/src/server/routers/admin/index.ts
index 79abe3f..70a510a 100644
--- a/apps/web/src/server/routers/admin/index.ts
+++ b/apps/web/src/server/routers/admin/index.ts
@@ -3,6 +3,8 @@ import { groupsRouter } from "./groups";
 import { permissionsRouter } from "./permissions";
 import { usersRouter } from "./users";
 import { systemRouter } from "./system";
+import { adminWikiRouter } from "./wiki";
+
 /**
  * Main router for admin-specific procedures.
  * Sub-routers for different admin areas (e.g., users, groups) should be merged here.
@@ -12,6 +14,7 @@ export const adminRouter = router({
   permissions: permissionsRouter,
   users: usersRouter,
   system: systemRouter,
+  wiki: adminWikiRouter,
 });
 
 export type AdminRouter = typeof adminRouter;
diff --git a/apps/web/src/server/routers/admin/permissions.ts b/apps/web/src/server/routers/admin/permissions.ts
index d1be8d8..9ddc821 100644
--- a/apps/web/src/server/routers/admin/permissions.ts
+++ b/apps/web/src/server/routers/admin/permissions.ts
@@ -2,6 +2,13 @@ import { z } from "zod";
 import { TRPCError } from "@trpc/server";
 import { router, permissionProtectedProcedure } from "~/server";
 import { dbService } from "~/lib/services";
+// Import validation functions
+import {
+  validatePermissionsDatabase,
+  fixPermissionsDatabase,
+  logValidationResults,
+} from "~/lib/permissions/validation";
+import { logger } from "@repo/logger";
 
 export const permissionsRouter = router({
   /**
@@ -68,7 +75,7 @@ export const permissionsRouter = router({
     }),
 
   /**
-   * Update a permission
+   * Update a permission (very restricted operation)
    */
   update: permissionProtectedProcedure("system:settings:update")
     .input(
@@ -77,34 +84,81 @@ export const permissionsRouter = router({
         moduleId: z.number().optional(),
         resource: z.string().min(1).max(50).optional(),
         actionId: z.number().optional(),
-        description: z.string().optional(),
+        description: z.string().nullish(), // Allow null or undefined from client
       })
     )
     .mutation(async ({ input }) => {
-      const { id, ...data } = input;
-      const permission = await dbService.permissions.update(id, data);
-      if (!permission) {
+      const { id, ...updateData } = input;
+      // Convert null description to undefined for the service call
+      const serviceUpdateData = {
+        ...updateData,
+        description:
+          updateData.description === null ? undefined : updateData.description,
+      };
+      const updatedPermission = await dbService.permissions.update(
+        id,
+        serviceUpdateData // Pass the corrected data
+      );
+      if (!updatedPermission) {
         throw new TRPCError({
           code: "NOT_FOUND",
-          message: "Permission not found",
+          message: "Permission not found for update",
         });
       }
-      return permission;
+      return updatedPermission;
     }),
 
   /**
-   * Delete a permission
+   * Delete a permission (very restricted operation)
    */
   delete: permissionProtectedProcedure("system:settings:update")
     .input(z.object({ id: z.number() }))
     .mutation(async ({ input }) => {
-      const permission = await dbService.permissions.delete(input.id);
-      if (!permission) {
+      const deletedPermission = await dbService.permissions.delete(input.id);
+      if (!deletedPermission) {
         throw new TRPCError({
           code: "NOT_FOUND",
-          message: "Permission not found",
+          message: "Permission not found for deletion",
         });
       }
-      return { success: true };
+      return deletedPermission;
+    }),
+
+  /**
+   * Validate permissions registry against database
+   */
+  validate: permissionProtectedProcedure("system:settings:read").mutation(
+    async () => {
+      logger.info("Running permissions validation...");
+      const validationResult = await validatePermissionsDatabase();
+      logValidationResults(validationResult); // Log details on the server
+      // Return a summary to the client
+      return {
+        isValid: validationResult.isValid,
+        missingCount: validationResult.missing.length,
+        extrasCount: validationResult.extras.length,
+        mismatchedCount: validationResult.mismatched.length,
+      };
+    }
+  ),
+
+  /**
+   * Fix permissions in the database based on the registry
+   */
+  fix: permissionProtectedProcedure("system:settings:update")
+    .input(
+      z.object({
+        removeExtras: z.boolean().default(false),
+      })
+    )
+    .mutation(async ({ input }) => {
+      logger.info(
+        `Running permissions fix (removeExtras: ${input.removeExtras})...`
+      );
+      const fixResult = await fixPermissionsDatabase(input.removeExtras);
+      logger.info(
+        `Permissions fix completed: ${fixResult.added} added, ${fixResult.updated} updated, ${fixResult.removed} removed.`
+      );
+      return fixResult; // Return counts to the client
     }),
 });
diff --git a/apps/web/src/server/routers/admin/wiki.ts b/apps/web/src/server/routers/admin/wiki.ts
new file mode 100644
index 0000000..83ce197
--- /dev/null
+++ b/apps/web/src/server/routers/admin/wiki.ts
@@ -0,0 +1,150 @@
+import { z } from "zod";
+import { permissionProtectedProcedure, router } from "~/server";
+import { db, wikiPages } from "@repo/db"; // Import db and table
+import { dbService, wikiService } from "~/lib/services";
+import { logger } from "@repo/logger";
+import { formatDistanceToNow } from "date-fns";
+import { TRPCError } from "@trpc/server";
+import { desc, eq, gt, sql, ilike, or, and } from "drizzle-orm"; // Import necessary Drizzle functions
+
+export const adminWikiRouter = router({
+  /**
+   * Get recently updated wiki pages for the admin dashboard.
+   */
+  getRecent: permissionProtectedProcedure("admin:wiki:read")
+    .input(
+      z.object({
+        limit: z.number().min(1).max(20).default(5),
+      })
+    )
+    .query(async ({ input }) => {
+      try {
+        const recentPages = await dbService.wiki.getRecentPages(input.limit);
+        const formattedPages = recentPages.map((page) => ({
+          ...page,
+          updatedAtRelative: page.updatedAt
+            ? formatDistanceToNow(page.updatedAt, { addSuffix: true })
+            : "Never",
+        }));
+        return formattedPages;
+      } catch (error) {
+        logger.error("Failed to fetch recent wiki pages for admin:", error);
+        return [];
+      }
+    }),
+
+  /**
+   * List wiki pages for the admin management table.
+   */
+  list: permissionProtectedProcedure("admin:wiki:read")
+    .input(
+      z.object({
+        limit: z.number().min(1).max(100).default(20),
+        cursor: z.number().nullish(), // page ID cursor for pagination
+        search: z.string().optional(),
+        sortBy: z
+          .enum(["title", "path", "updatedAt", "createdAt"])
+          .optional()
+          .default("updatedAt"),
+        sortOrder: z.enum(["asc", "desc"]).optional().default("desc"),
+      })
+    )
+    .query(async ({ input }) => {
+      const { limit, cursor, search, sortBy, sortOrder } = input;
+
+      // Determine the sort column and order
+      let orderByColumn;
+      switch (sortBy) {
+        case "title":
+          orderByColumn = wikiPages.title;
+          break;
+        case "path":
+          orderByColumn = wikiPages.path;
+          break;
+        case "createdAt":
+          orderByColumn = wikiPages.createdAt;
+          break;
+        case "updatedAt":
+        default:
+          orderByColumn = wikiPages.updatedAt;
+          break;
+      }
+      const orderBy = sortOrder === "asc" ? orderByColumn : desc(orderByColumn);
+
+      // Build conditions: cursor-based pagination
+      let whereConditions = cursor ? gt(wikiPages.id, cursor) : undefined;
+
+      // Add search condition if provided
+      if (search) {
+        const searchCondition = or(
+          ilike(wikiPages.title, `%${search}%`),
+          ilike(wikiPages.path, `%${search}%`)
+          // Add more fields to search if needed (e.g., content, tags)
+        );
+        whereConditions = whereConditions
+          ? and(whereConditions, searchCondition)
+          : searchCondition;
+      }
+
+      try {
+        const items = await db.query.wikiPages.findMany({
+          columns: {
+            id: true,
+            path: true,
+            title: true,
+            isPublished: true,
+            createdAt: true,
+            updatedAt: true,
+            lockedById: true, // Include to check lock status
+            lockExpiresAt: true,
+            // Exclude large fields unless specifically needed
+            content: false,
+            renderedHtml: false,
+            search: false,
+          },
+          where: whereConditions,
+          orderBy: [orderBy, desc(wikiPages.id)], // Secondary sort by ID for stable pagination
+          limit: limit + 1, // Fetch one extra to determine if there's a next page
+          with: {
+            createdBy: {
+              columns: { id: true, name: true },
+            },
+            updatedBy: {
+              columns: { id: true, name: true },
+            },
+            lockedBy: {
+              columns: { id: true, name: true }, // Include lock owner info
+            },
+          },
+        });
+
+        let nextCursor: typeof cursor | undefined = undefined;
+        if (items.length > limit) {
+          const nextItem = items.pop(); // Remove the extra item
+          nextCursor = nextItem!.id; // Use its ID as the next cursor
+        }
+
+        // Format dates and add relative time
+        const formattedItems = items.map((item) => ({
+          ...item,
+          createdAtRelative: item.createdAt
+            ? formatDistanceToNow(item.createdAt, { addSuffix: true })
+            : "Unknown",
+          updatedAtRelative: item.updatedAt
+            ? formatDistanceToNow(item.updatedAt, { addSuffix: true })
+            : "Never",
+        }));
+
+        return {
+          items: formattedItems,
+          nextCursor,
+        };
+      } catch (error) {
+        logger.error("Failed to list wiki pages for admin:", error);
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to fetch wiki pages",
+        });
+      }
+    }),
+});
diff --git a/apps/web/src/server/routers/index.ts b/apps/web/src/server/routers/index.ts
index f0e9b61..0a7326b 100644
--- a/apps/web/src/server/routers/index.ts
+++ b/apps/web/src/server/routers/index.ts
@@ -1,4 +1,4 @@
-import { router } from "..";
+import { publicProcedure, router } from "..";
 import { wikiRouter } from "./wiki";
 import { usersRouter } from "./users";
 import { searchRouter } from "./search";
@@ -6,8 +6,18 @@ import { assetsRouter } from "./assets";
 import { authRouter } from "./auth";
 import { tagsRouter } from "./tags";
 import { adminRouter } from "./admin";
+import { TRPCError } from "@trpc/server";
 
 export const appRouter = router({
+  ping: publicProcedure.query(() => {
+    // throw new TRPCError({
+    //   code: "NOT_IMPLEMENTED",
+    //   message: "Not implemented",
+    // });
+
+    return "pong";
+  }),
+
   admin: adminRouter,
   wiki: wikiRouter,
   users: usersRouter,
diff --git a/packages/db/src/registry/permissions.ts b/packages/db/src/registry/permissions.ts
index 5d91a8d..ce8233e 100644
--- a/packages/db/src/registry/permissions.ts
+++ b/packages/db/src/registry/permissions.ts
@@ -42,6 +42,26 @@ const PERMISSION_LIST: Permission[] = [
     description: "Move or rename wiki pages",
   },
 
+  // Admin module permissions
+  {
+    module: "admin",
+    resource: "dashboard",
+    action: "read",
+    description: "Access the admin dashboard",
+  },
+  {
+    module: "admin",
+    resource: "wiki",
+    action: "read",
+    description: "Read wiki pages in the admin panel (list view)",
+  },
+  {
+    module: "admin",
+    resource: "wiki",
+    action: "delete",
+    description: "Delete wiki pages from the admin panel",
+  },
+
   // System module permissions
   {
     module: "system",
diff --git a/packages/db/src/registry/types.ts b/packages/db/src/registry/types.ts
index 03a54a7..b34bae3 100644
--- a/packages/db/src/registry/types.ts
+++ b/packages/db/src/registry/types.ts
@@ -5,7 +5,7 @@
 /**
  * Valid permission modules in the system
  */
-export type PermissionModule = "wiki" | "system" | "assets";
+export type PermissionModule = "wiki" | "system" | "assets" | "admin";
 
 /**
  * Valid permission actions in the system
@@ -22,7 +22,9 @@ export type PermissionResource =
   | "users"
   | "groups"
   | "asset"
-  | "general";
+  | "general"
+  | "dashboard"
+  | "wiki";
 
 /**
  * Unified permission structure
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 189bb2e..ecc4039 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "@radix-ui/react-avatar": "^1.1.6",
     "@radix-ui/react-checkbox": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.12",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-popover": "^1.1.10",
@@ -55,8 +56,10 @@
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
     "@repo/tailwind-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@tailwindcss/cli": "^4.1.4",
+    "@tailwindcss/typography": "^0.5.16",
     "@turbo/gen": "^2.5.0",
     "@types/node": "^22.14.1",
     "@types/react": "^19.1.2",
@@ -69,8 +72,6 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.4",
-    "@tailwindcss/cli": "^4.1.4",
-    "typescript": "5.8.3",
-    "@tailwindcss/typography": "^0.5.16"
+    "typescript": "5.8.3"
   }
 }
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index 2d30128..661bbdf 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -4,8 +4,32 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../utils";
 
+// Simple SVG Spinner
+const Spinner = ({ className }: { className?: string }) => (
+  <svg
+    className={cn("animate-spin", className)}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+);
+
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap text-sm font-bold 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",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-bold 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 relative",
   {
     variants: {
       variant: {
@@ -84,6 +108,7 @@ export interface ButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">,
     Omit<VariantProps<typeof buttonVariants>, "color"> {
   asChild?: boolean;
+  loading?: boolean;
   color?:
     | "info"
     | "error"
@@ -110,6 +135,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       asChild = false,
       rounded,
       elevation,
+      loading = false,
       ...props
     },
     ref
@@ -128,6 +154,39 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         } as React.CSSProperties)
       : undefined;
 
+    const spinnerSizeClass =
+      size === "sm" ? "h-3 w-3" : size === "icon" ? "h-5 w-5" : "h-4 w-4";
+
+    // If loading, always render a button element with the spinner, ignore asChild and children
+    if (loading) {
+      return (
+        <button
+          className={cn(
+            buttonVariants({
+              variant,
+              size,
+              rounded,
+              color: customColor ? undefined : color,
+              elevation,
+              className,
+            }),
+            "relative" // Ensure relative positioning for the spinner container
+          )}
+          ref={ref}
+          style={customColorStyle}
+          disabled={true} // Explicitly disabled
+          {...props} // Spread other props like aria-label, etc.
+        >
+          <div className="absolute inset-0 flex items-center justify-center">
+            <Spinner className={spinnerSizeClass} />
+          </div>
+          {/* Render original children invisibly to maintain layout spacing if needed, but ensure only one child */}
+          <span className="invisible">{props.children}</span>
+        </button>
+      );
+    }
+
+    // Original rendering logic when not loading
     return (
       <Comp
         className={cn(
@@ -142,8 +201,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         ref={ref}
         style={customColorStyle}
+        disabled={props.disabled} // Use original disabled prop
         {...props}
-      />
+      >
+        {/* Render children directly when not loading */}
+        {props.children}
+      </Comp>
     );
   }
 );
diff --git a/packages/ui/src/components/dropdown.tsx b/packages/ui/src/components/dropdown.tsx
new file mode 100644
index 0000000..4ae1bd9
--- /dev/null
+++ b/packages/ui/src/components/dropdown.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "../utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "focus:bg-accent/50 data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "bg-popover text-text-primary 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] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-lg",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-text-primary z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "focus:bg-accent/50 focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("bg-border -mx-1 my-1 h-px", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 2866b23..a27ef82 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -20,3 +20,4 @@ export * from "./table";
 export * from "./tabs";
 export * from "./textarea";
 export * from "./tooltip";
+export * from "./dropdown";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a18b265..00d4d15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -195,6 +195,9 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.74.4
         version: 5.74.6(@tanstack/react-query@5.74.4(react@19.1.0))(react@19.1.0)
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@trpc/client':
         specifier: ^11.1.0
         version: 11.1.0(@trpc/server@11.1.0(typescript@5.8.3))(typescript@5.8.3)
@@ -267,6 +270,9 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-intersection-observer:
+        specifier: ^9.16.0
+        version: 9.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-markdown:
         specifier: ^10.1.0
         version: 10.1.0(@types/react@19.1.2)(react@19.1.0)
@@ -617,6 +623,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.1.10
         version: 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.12
+        version: 2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-icons':
         specifier: ^1.3.2
         version: 1.3.2(react@19.1.0)
@@ -2480,6 +2489,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.12':
+    resolution: {integrity: sha512-VJoMs+BWWE7YhzEQyVwvF9n22Eiyr83HotCVrMQzla/OwRovXCgah7AcaEr4hMNj4gJxSdtIbcHGvmJXOoJVHA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.2':
     resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
     peerDependencies:
@@ -2529,6 +2551,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menu@2.1.12':
+    resolution: {integrity: sha512-+qYq6LfbiGo97Zz9fioX83HCiIYYFNs8zAsVCMQrIakoNYylIzWuoD/anAD3UzvvR6cnswmfRFJFq/zYYq/k7Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.11':
     resolution: {integrity: sha512-yFMfZkVA5G3GJnBgb2PxrrcLKm1ZLWXrbYVgdyTl//0TYEIHS9LJbnyz7WWcZ0qCq7hIlJZpRtxeSeIG5T5oJw==}
     peerDependencies:
@@ -3155,6 +3190,17 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@textea/json-viewer@3.5.0':
     resolution: {integrity: sha512-codh4YXkWPtMjucpn1krGxyJLQA2QhpfM0y3Sur7D/mONOnESoI5ZLmX3ZFo9heXPndDQgzCHsjpErvkN5+hxw==}
     peerDependencies:
@@ -7132,6 +7178,15 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
+  react-intersection-observer@9.16.0:
+    resolution: {integrity: sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -10408,6 +10463,21 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
+  '@radix-ui/react-dropdown-menu@2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
   '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -10445,6 +10515,32 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
+  '@radix-ui/react-menu@2.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      aria-hidden: 1.2.4
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.6.3(@types/react@19.1.2)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
   '@radix-ui/react-popover@1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -11001,6 +11097,14 @@ snapshots:
       '@tanstack/query-core': 5.74.4
       react: 19.1.0
 
+  '@tanstack/react-table@8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@tanstack/table-core@8.21.3': {}
+
   '@textea/json-viewer@3.5.0(@emotion/react@11.14.0(@types/react@19.1.2)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.2)(react@19.1.0))(@types/react@19.1.2)(react@19.1.0))(@mui/material@5.17.1(@emotion/react@11.14.0(@types/react@19.1.2)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.2)(react@19.1.0))(@types/react@19.1.2)(react@19.1.0))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@emotion/react': 11.14.0(@types/react@19.1.2)(react@19.1.0)
@@ -15711,6 +15815,12 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-intersection-observer@9.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      react-dom: 19.1.0(react@19.1.0)
+
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}

From eb9d337d78a2da9d22cfdb52e684a56ff9d5257b Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Wed, 23 Apr 2025 23:50:20 +0200
Subject: [PATCH 5/8] Add more stats to admin dashboard

---
 apps/web/src/app/admin/dashboard/page.tsx | 110 ++++++++++++++++++++--
 apps/web/src/lib/services/system.ts       |  24 ++++-
 apps/web/src/server/routers/admin/wiki.ts |  53 ++++++++++-
 3 files changed, 172 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/app/admin/dashboard/page.tsx b/apps/web/src/app/admin/dashboard/page.tsx
index 68ab192..fa04c0e 100644
--- a/apps/web/src/app/admin/dashboard/page.tsx
+++ b/apps/web/src/app/admin/dashboard/page.tsx
@@ -5,17 +5,18 @@ import { useTRPC } from "~/server/client";
 import { useQuery } from "@tanstack/react-query";
 import type { AppRouter } from "~/server/routers";
 import Link from "next/link";
+import { formatDistanceToNow } from "date-fns";
 
 // Define type for the stats object returned by the API
 type SystemStatsQueryProcedure = AppRouter["admin"]["system"]["getStats"];
 type SystemStats = Awaited<ReturnType<SystemStatsQueryProcedure>>;
-// Note: SystemStats type is now automatically inferred to include dbStatus and dbError
+// SystemStats type is now automatically inferred to include lockedPagesCount and activeSessionCount
 
 // Define type for the static part, adding a key to link to API data
 interface StaticStatData {
   title: string;
   icon: React.ReactNode;
-  // Ensure key is part of SystemStats, excluding dbStatus and dbError which aren't displayed as cards
+  // Key type now includes activeSessionCount
   key: keyof Omit<SystemStats, "dbStatus" | "dbError">;
   link?: string; // Optional link for the card
 }
@@ -94,7 +95,7 @@ const staticStatsData: StaticStatData[] = [
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="text-secondary-400 h-6 w-6"
+        className="text-info-400 h-6 w-6" // Changed color for variety
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -129,6 +130,33 @@ const staticStatsData: StaticStatData[] = [
       </svg>
     ),
   },
+  // Add new stat for active sessions
+  {
+    title: "Active Sessions",
+    key: "activeSessionCount",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="text-success-400 h-6 w-6" // New color
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+        />
+      </svg>
+    ),
+  },
 ];
 
 // New HealthCheckItem component
@@ -194,17 +222,17 @@ function HealthCheckItem({
 }
 
 export default function AdminDashboardPage() {
-  // Fetch system stats using tRPC and TanStack Query
   const trpc = useTRPC();
 
+  // Query for System Stats
   const {
     data: statsData,
     isLoading: isLoadingStats,
     error: statsError,
     refetch: refetchStats,
-  } = useQuery(trpc.admin.system.getStats.queryOptions(undefined, {}));
+  } = useQuery(trpc.admin.system.getStats.queryOptions());
 
-  // Fetch recent pages
+  // Query for Recent Pages
   const recentPagesQueryOptions = trpc.admin.wiki.list.queryOptions(
     { limit: 5, sortBy: "updatedAt", sortOrder: "desc" },
     { select: (data) => data.items } // Select only the items array
@@ -215,6 +243,20 @@ export default function AdminDashboardPage() {
     error: pagesError,
   } = useQuery(recentPagesQueryOptions);
 
+  // NEW: Query for Locked Pages
+  const lockedPagesQueryOptions = trpc.admin.wiki.listLocked.queryOptions(
+    { limit: 5 }, // Fetch top 5 locked pages for the dashboard
+    {
+      // Optional: configure refetch behavior if needed
+      // refetchOnWindowFocus: false,
+    }
+  );
+  const {
+    data: lockedPages,
+    isLoading: isLoadingLockedPages,
+    error: lockedPagesError,
+  } = useQuery(lockedPagesQueryOptions);
+
   // Handle error state for stats
   if (statsError) {
     return (
@@ -229,6 +271,12 @@ export default function AdminDashboardPage() {
     console.error("Error loading recent pages:", pagesError.message);
   }
 
+  // Handle error state for locked pages (log it, maybe show message in card)
+  if (lockedPagesError) {
+    console.error("Error loading locked pages:", lockedPagesError.message);
+    // Decide if you want to stop rendering or show an error in the card
+  }
+
   return (
     <div className="space-y-6 p-4">
       <div>
@@ -236,7 +284,7 @@ export default function AdminDashboardPage() {
         <p className="text-text-secondary">Overview of your NextWiki system</p>
       </div>
 
-      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6">
         {staticStatsData.map((statDef) => (
           <Link key={statDef.key} href={statDef.link || "#"} passHref>
             <Card className="hover:bg-background-level1 h-full p-6 transition-colors">
@@ -262,7 +310,7 @@ export default function AdminDashboardPage() {
         ))}
       </div>
 
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         <Card className="p-6">
           <h2 className="mb-4 text-lg font-medium">Recent Pages</h2>
           {isLoadingPages ? (
@@ -275,7 +323,7 @@ export default function AdminDashboardPage() {
               ))}
             </div>
           ) : pagesError ? (
-            <p className="text-destructive text-sm">
+            <p className="text-destructive-500 text-sm">
               Failed to load recent pages.
             </p>
           ) : recentPages && recentPages.length > 0 ? (
@@ -287,7 +335,7 @@ export default function AdminDashboardPage() {
                 >
                   <Link
                     href={`/${page.path}`}
-                    className="text-primary hover:underline"
+                    className="text-primary-500 hover:underline"
                   >
                     {page.title}
                   </Link>
@@ -302,6 +350,48 @@ export default function AdminDashboardPage() {
           )}
         </Card>
 
+        <Card className="p-6">
+          <h2 className="mb-4 text-lg font-medium">Pages Being Edited</h2>
+          {isLoadingLockedPages ? (
+            <div className="space-y-4">
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="flex items-center justify-between">
+                  <Skeleton className="h-4 w-3/5" />
+                  <Skeleton className="h-4 w-1/5" />
+                </div>
+              ))}
+            </div>
+          ) : lockedPagesError ? (
+            <p className="text-destructive-500 text-sm">
+              Failed to load locked pages.
+            </p>
+          ) : lockedPages && lockedPages.length > 0 ? (
+            <ul className="space-y-2">
+              {lockedPages.map((page) => (
+                <li
+                  key={page.id}
+                  className="flex flex-col justify-start text-sm"
+                >
+                  <Link
+                    href={`/${page.path}`}
+                    className="text-primary-500 hover:underline"
+                  >
+                    {page.title}
+                  </Link>
+                  <span className="text-text-secondary whitespace-nowrap text-xs">
+                    Locked by {page.lockedBy?.name || "Unknown User"}{" "}
+                    {page.lockedAtRelative}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-text-secondary text-sm">
+              No pages are currently being edited.
+            </p>
+          )}
+        </Card>
+
         <Card className="p-6">
           <h2 className="mb-4 text-lg font-medium">System Health</h2>
           {isLoadingStats ? (
diff --git a/apps/web/src/lib/services/system.ts b/apps/web/src/lib/services/system.ts
index 9a9346d..ebae259 100644
--- a/apps/web/src/lib/services/system.ts
+++ b/apps/web/src/lib/services/system.ts
@@ -1,5 +1,13 @@
-import { db, users, wikiTags, wikiPages, assets, groups } from "@repo/db";
-import { sql } from "drizzle-orm";
+import {
+  db,
+  users,
+  wikiTags,
+  wikiPages,
+  assets,
+  groups,
+  sessions,
+} from "@repo/db";
+import { sql, isNotNull, gt } from "drizzle-orm";
 
 /**
  * System service - handles system-related operations
@@ -30,6 +38,14 @@ export const systemService = {
         .from(wikiTags),
       db.select({ count: sql<number>`COUNT(*)`.mapWith(Number) }).from(assets),
       db.select({ count: sql<number>`COUNT(*)`.mapWith(Number) }).from(groups),
+      db
+        .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
+        .from(wikiPages)
+        .where(isNotNull(wikiPages.lockedById)),
+      db
+        .select({ count: sql<number>`COUNT(*)`.mapWith(Number) })
+        .from(sessions)
+        .where(gt(sessions.expires, new Date())),
     ]);
 
     // Simplified helper to extract count directly from the result array
@@ -56,6 +72,8 @@ export const systemService = {
       tagCountResult,
       assetCountResult,
       groupCountResult,
+      lockedPagesCountResult,
+      activeSessionCountResult,
     ] = results;
 
     const stats = {
@@ -66,6 +84,8 @@ export const systemService = {
       tagCount: getCountFromResult(tagCountResult),
       assetCount: getCountFromResult(assetCountResult),
       groupCount: getCountFromResult(groupCountResult),
+      lockedPagesCount: getCountFromResult(lockedPagesCountResult),
+      activeSessionCount: getCountFromResult(activeSessionCountResult),
     };
     return stats;
   },
diff --git a/apps/web/src/server/routers/admin/wiki.ts b/apps/web/src/server/routers/admin/wiki.ts
index 83ce197..0bf6bb4 100644
--- a/apps/web/src/server/routers/admin/wiki.ts
+++ b/apps/web/src/server/routers/admin/wiki.ts
@@ -1,11 +1,11 @@
 import { z } from "zod";
 import { permissionProtectedProcedure, router } from "~/server";
-import { db, wikiPages } from "@repo/db"; // Import db and table
-import { dbService, wikiService } from "~/lib/services";
+import { db, wikiPages } from "@repo/db";
+import { dbService } from "~/lib/services";
 import { logger } from "@repo/logger";
 import { formatDistanceToNow } from "date-fns";
 import { TRPCError } from "@trpc/server";
-import { desc, eq, gt, sql, ilike, or, and } from "drizzle-orm"; // Import necessary Drizzle functions
+import { desc, gt, ilike, or, and, isNotNull } from "drizzle-orm";
 
 export const adminWikiRouter = router({
   /**
@@ -147,4 +147,51 @@ export const adminWikiRouter = router({
         });
       }
     }),
+
+  /**
+   * Get currently locked wiki pages for the admin dashboard.
+   */
+  listLocked: permissionProtectedProcedure("admin:wiki:read")
+    .input(
+      z.object({
+        limit: z.number().min(1).max(20).default(5),
+      })
+    )
+    .query(async ({ input }) => {
+      const { limit } = input;
+      try {
+        const lockedPages = await db.query.wikiPages.findMany({
+          columns: {
+            id: true,
+            path: true,
+            title: true,
+            lockedAt: true, // Include lock timestamp
+          },
+          where: isNotNull(wikiPages.lockedById), // Filter for locked pages
+          orderBy: [desc(wikiPages.lockedAt)], // Order by most recently locked
+          limit: limit,
+          with: {
+            lockedBy: {
+              // Eager load the user who locked the page
+              columns: { id: true, name: true },
+            },
+          },
+        });
+
+        // Format dates and add relative time
+        const formattedPages = lockedPages.map((page) => ({
+          ...page,
+          // Ensure lockedAt is not null before formatting
+          lockedAtRelative: page.lockedAt
+            ? formatDistanceToNow(page.lockedAt, { addSuffix: true })
+            : "Unknown",
+        }));
+
+        return formattedPages;
+      } catch (error) {
+        logger.error("Failed to fetch locked wiki pages for admin:", error);
+        // Return empty array on error for dashboard resilience
+        return [];
+      }
+    }),
 });

From 580859c214a3287e6853d1f1b5d2749a25f652ed Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Thu, 24 Apr 2025 00:43:22 +0200
Subject: [PATCH 6/8] Prepare backend for centralized settings

---
 apps/web/package.json                         |    1 +
 apps/web/src/lib/auth.ts                      |    2 +
 apps/web/src/lib/services/settings.ts         |  238 +++
 apps/web/src/server/routers/admin/index.ts    |    3 +-
 apps/web/src/server/routers/admin/settings.ts |  184 ++
 packages/db/drizzle/0001_colorful_orphan.sql  |   23 +
 packages/db/drizzle/meta/0001_snapshot.json   | 1816 +++++++++++++++++
 packages/db/drizzle/meta/_journal.json        |    7 +
 packages/db/package.json                      |    1 +
 packages/db/src/schema/index.ts               |   55 +
 packages/db/src/seeds/run.ts                  |    8 +-
 packages/db/src/seeds/settings.ts             |   53 +
 packages/types/package.json                   |   11 +-
 packages/types/src/index.ts                   |    2 +-
 packages/types/src/settings.ts                |  319 +++
 pnpm-lock.yaml                                |   22 +-
 schema.dbml                                   |   27 +
 17 files changed, 2758 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/lib/services/settings.ts
 create mode 100644 apps/web/src/server/routers/admin/settings.ts
 create mode 100644 packages/db/drizzle/0001_colorful_orphan.sql
 create mode 100644 packages/db/drizzle/meta/0001_snapshot.json
 create mode 100644 packages/db/src/seeds/settings.ts
 create mode 100644 packages/types/src/settings.ts

diff --git a/apps/web/package.json b/apps/web/package.json
index b31952d..c79f20f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,6 +16,7 @@
     "fullclean": "rm -rf dist .next .turbo node_modules"
   },
   "dependencies": {
+    "@repo/types": "workspace:*",
     "@auth/drizzle-adapter": "^1.8.0",
     "@codemirror/collab": "^6.1.1",
     "@codemirror/lang-markdown": "^6.3.2",
diff --git a/apps/web/src/lib/auth.ts b/apps/web/src/lib/auth.ts
index 5ad3749..6dafc28 100644
--- a/apps/web/src/lib/auth.ts
+++ b/apps/web/src/lib/auth.ts
@@ -10,6 +10,8 @@ import { compare } from "bcryptjs";
 import { DrizzleAdapter } from "@auth/drizzle-adapter";
 import { env } from "~/env";
 
+// FIXME: Migrate to v5 and use session tokens
+
 // Helper function to handle provider import differences between environments
 // Ignore any type errors here, we know the providers are valid
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/apps/web/src/lib/services/settings.ts b/apps/web/src/lib/services/settings.ts
new file mode 100644
index 0000000..a4507d4
--- /dev/null
+++ b/apps/web/src/lib/services/settings.ts
@@ -0,0 +1,238 @@
+/**
+ * Settings service for managing application settings
+ */
+import { db } from "@repo/db";
+import { settings, settingsHistory } from "@repo/db";
+import type {
+  SettingKey,
+  SettingValue,
+  SettingHistoryEntry,
+} from "@repo/types";
+import { eq, desc } from "drizzle-orm";
+import { cache } from "react";
+
+/**
+ * Get a single setting by key
+ * @param key The setting key
+ * @returns The setting value or the default value if not found
+ */
+export async function getSetting<K extends SettingKey>(
+  key: K
+): Promise<SettingValue<K>> {
+  const result = await db.query.settings.findFirst({
+    where: eq(settings.key, key),
+    columns: { value: true },
+  });
+
+  // If the setting doesn't exist in the database, return the default value
+  if (!result) {
+    // Note: We're doing a dynamic import here to avoid circular dependencies
+    const { getDefaultSetting } = await import("@repo/types");
+    return getDefaultSetting(key);
+  }
+
+  return result.value as SettingValue<K>;
+}
+
+/**
+ * Get multiple settings by their keys
+ * @param keys The setting keys
+ * @returns Object with requested settings
+ */
+export async function getSettings<K extends SettingKey>(
+  keys: K[]
+): Promise<Record<K, SettingValue<K>>> {
+  const results = await Promise.all(keys.map((key) => getSetting(key)));
+
+  return keys.reduce(
+    (acc, key, index) => {
+      // Ensure the result exists (it should due to getSetting defaults)
+      const result = results[index];
+      if (result !== undefined) {
+        acc[key] = result;
+      }
+      return acc;
+    },
+    {} as Record<K, SettingValue<K>>
+  );
+}
+
+/**
+ * Get all settings from the database
+ * @returns All settings
+ */
+export async function getAllSettings(): Promise<
+  Partial<{ [K in SettingKey]: SettingValue<K> }>
+> {
+  const results = await db.query.settings.findMany();
+  const settingsMap: Partial<{ [K in SettingKey]: SettingValue<K> }> = {};
+
+  for (const setting of results) {
+    const key = setting.key as SettingKey;
+    (settingsMap as any)[key] = setting.value as SettingValue<typeof key>;
+  }
+
+  return settingsMap;
+}
+
+/**
+ * Update a setting value with history tracking
+ * @param key The setting key
+ * @param value The new value
+ * @param userId The ID of the user making the change
+ * @param reason Optional reason for the change
+ */
+export async function updateSetting<K extends SettingKey>(
+  key: K,
+  value: SettingValue<K>,
+  userId: number,
+  reason?: string
+): Promise<void> {
+  await db.transaction(async (tx) => {
+    // 1. Get current value to store as previous
+    const currentSetting = await tx.query.settings.findFirst({
+      where: eq(settings.key, key),
+      columns: { value: true },
+    });
+    const previousValue = currentSetting?.value ?? null;
+
+    // 2. Insert into history if the value exists and is changing
+    if (previousValue !== null) {
+      await tx.insert(settingsHistory).values({
+        settingKey: key,
+        previousValue: previousValue,
+        changedById: userId,
+        changeReason: reason ?? null,
+        // changedAt will default to now()
+      });
+    }
+
+    // 3. Update or insert the setting
+    await tx
+      .insert(settings)
+      .values({
+        key: key,
+        value: value,
+        description: (await import("@repo/types")).DEFAULT_SETTINGS[key]
+          .description,
+        updatedAt: new Date(),
+      })
+      .onConflictDoUpdate({
+        target: settings.key,
+        set: {
+          value: value,
+          updatedAt: new Date(),
+        },
+      });
+  });
+}
+
+/**
+ * Delete a setting (restores to default value)
+ * @param key The setting key
+ * @param userId The ID of the user making the change
+ * @param reason Optional reason for the change
+ */
+export async function deleteSetting<K extends SettingKey>(
+  key: K,
+  userId: number,
+  reason?: string
+): Promise<void> {
+  await db.transaction(async (tx) => {
+    // 1. Get current value to store as history
+    const currentSetting = await tx.query.settings.findFirst({
+      where: eq(settings.key, key),
+      columns: { value: true },
+    });
+
+    if (currentSetting) {
+      // 2. Add to history
+      await tx.insert(settingsHistory).values({
+        settingKey: key,
+        previousValue: currentSetting.value,
+        changedById: userId,
+        changeReason: reason ?? "Restored to default",
+      });
+
+      // 3. Delete the setting
+      await tx.delete(settings).where(eq(settings.key, key));
+    }
+  });
+}
+
+/**
+ * Get setting history for a specific setting
+ * @param key The setting key
+ * @returns Array of history entries
+ */
+export async function getSettingHistory<K extends SettingKey>(
+  key: K
+): Promise<SettingHistoryEntry<K>[]> {
+  const history = await db.query.settingsHistory.findMany({
+    where: eq(settingsHistory.settingKey, key),
+    orderBy: [desc(settingsHistory.changedAt)],
+    with: {
+      changedBy: {
+        columns: {
+          id: true,
+          name: true,
+          email: true,
+        },
+      },
+    },
+  });
+
+  return history.map((entry) => ({
+    id: entry.id,
+    settingKey: entry.settingKey as K,
+    previousValue: entry.previousValue as SettingValue<K>,
+    changedById: entry.changedById,
+    changedAt: entry.changedAt,
+    changeReason: entry.changeReason,
+  }));
+}
+
+/**
+ * Initialize default settings if they don't exist
+ */
+export async function initializeDefaultSettings(): Promise<void> {
+  const { DEFAULT_SETTINGS } = await import("@repo/types");
+
+  // Get all defined setting keys
+  const allKeys = Object.keys(DEFAULT_SETTINGS) as SettingKey[];
+
+  // Check which settings already exist in the database
+  const existingSettings = await db.query.settings.findMany({
+    columns: { key: true },
+  });
+  const existingKeys = new Set(existingSettings.map((s) => s.key));
+
+  // Filter out keys that already exist
+  const keysToCreate = allKeys.filter((key) => !existingKeys.has(key));
+
+  // Create missing settings with default values
+  if (keysToCreate.length > 0) {
+    await db.transaction(async (tx) => {
+      for (const key of keysToCreate) {
+        const setting = DEFAULT_SETTINGS[key];
+        await tx.insert(settings).values({
+          key,
+          value: setting.value,
+          description: setting.description,
+        });
+      }
+    });
+
+    console.log(`Initialized ${keysToCreate.length} default settings`);
+  }
+}
+
+/**
+ * Cached version of getSetting for use in React Server Components
+ */
+export const getCachedSetting = cache(getSetting);
+
+/**
+ * Cached version of getAllSettings for use in React Server Components
+ */
+export const getCachedAllSettings = cache(getAllSettings);
diff --git a/apps/web/src/server/routers/admin/index.ts b/apps/web/src/server/routers/admin/index.ts
index 70a510a..62aa43a 100644
--- a/apps/web/src/server/routers/admin/index.ts
+++ b/apps/web/src/server/routers/admin/index.ts
@@ -4,7 +4,7 @@ import { permissionsRouter } from "./permissions";
 import { usersRouter } from "./users";
 import { systemRouter } from "./system";
 import { adminWikiRouter } from "./wiki";
-
+import { settingsRouter } from "./settings";
 /**
  * Main router for admin-specific procedures.
  * Sub-routers for different admin areas (e.g., users, groups) should be merged here.
@@ -15,6 +15,7 @@ export const adminRouter = router({
   users: usersRouter,
   system: systemRouter,
   wiki: adminWikiRouter,
+  settings: settingsRouter,
 });
 
 export type AdminRouter = typeof adminRouter;
diff --git a/apps/web/src/server/routers/admin/settings.ts b/apps/web/src/server/routers/admin/settings.ts
new file mode 100644
index 0000000..ddb1bfd
--- /dev/null
+++ b/apps/web/src/server/routers/admin/settings.ts
@@ -0,0 +1,184 @@
+import { z } from "zod";
+import { router, permissionProtectedProcedure } from "~/server";
+import {
+  getAllSettings,
+  getSetting,
+  getSettingHistory,
+  updateSetting,
+  deleteSetting,
+} from "~/lib/services/settings";
+import { DEFAULT_SETTINGS, type SettingKey } from "@repo/types";
+
+// Create a Zod schema for setting keys
+const SettingKeySchema = z.enum(
+  Object.keys(DEFAULT_SETTINGS) as [string, ...string[]]
+);
+
+/**
+ * tRPC router for settings management in the admin section
+ */
+export const settingsRouter = router({
+  /**
+   * Get all settings
+   */
+  getAll: permissionProtectedProcedure("system:settings:read").query(
+    async () => {
+      const settings = await getAllSettings();
+      return settings;
+    }
+  ),
+
+  /**
+   * Get a specific setting by key
+   */
+  get: permissionProtectedProcedure("system:settings:read")
+    .input(
+      z.object({
+        key: SettingKeySchema,
+      })
+    )
+    .query(async ({ input }) => {
+      const value = await getSetting(input.key as SettingKey);
+      return {
+        key: input.key,
+        value,
+        meta: DEFAULT_SETTINGS[input.key as SettingKey],
+      };
+    }),
+
+  /**
+   * Update a setting
+   */
+  update: permissionProtectedProcedure("system:settings:update")
+    .input(
+      z.object({
+        key: SettingKeySchema,
+        value: z.any(), // We'll validate the value type in the resolver
+        reason: z.string().optional(),
+      })
+    )
+    .mutation(async ({ input, ctx }) => {
+      const { key, value, reason } = input;
+      const typedKey = key as SettingKey;
+
+      // Validate the value matches the expected type
+      const settingDefinition = DEFAULT_SETTINGS[typedKey];
+      const expectedType = settingDefinition.type;
+
+      // Simple type validation
+      const valueType = typeof value;
+      if (
+        (expectedType === "string" && valueType !== "string") ||
+        (expectedType === "number" && valueType !== "number") ||
+        (expectedType === "boolean" && valueType !== "boolean") ||
+        // For select, check type and use includes with any cast
+        (expectedType === "select" &&
+          !(
+            valueType === "string" &&
+            settingDefinition.type === "select" &&
+            settingDefinition.options.includes(value as never)
+          )) ||
+        // For JSON, we need to check if it's an object
+        (expectedType === "json" && (valueType !== "object" || value === null))
+      ) {
+        throw new Error(
+          `Invalid value type for setting ${key}. Expected ${expectedType}, got ${valueType}`
+        );
+      }
+
+      await updateSetting(
+        typedKey,
+        value,
+        parseInt(ctx.session.user.id),
+        reason
+      );
+
+      return { success: true };
+    }),
+
+  /**
+   * Reset a setting to its default value
+   */
+  reset: permissionProtectedProcedure("system:settings:update")
+    .input(
+      z.object({
+        key: SettingKeySchema,
+        reason: z.string().optional(),
+      })
+    )
+    .mutation(async ({ input, ctx }) => {
+      const { key, reason } = input;
+      const typedKey = key as SettingKey;
+
+      // First delete the current setting
+      await deleteSetting(
+        typedKey,
+        parseInt(ctx.session.user.id),
+        reason || "Reset to default"
+      );
+
+      return { success: true };
+    }),
+
+  /**
+   * Get the history of changes for a setting
+   */
+  getHistory: permissionProtectedProcedure("system:settings:read")
+    .input(
+      z.object({
+        key: SettingKeySchema,
+      })
+    )
+    .query(async ({ input }) => {
+      const history = await getSettingHistory(input.key as SettingKey);
+      return history;
+    }),
+
+  /**
+   * Get settings by category
+   */
+  getByCategory: permissionProtectedProcedure("system:settings:read")
+    .input(
+      z.object({
+        category: z.enum([
+          "general",
+          "auth",
+          "appearance",
+          "editor",
+          "search",
+          "advanced",
+        ]),
+      })
+    )
+    .query(async ({ input }) => {
+      // Get all settings
+      const allSettings = await getAllSettings();
+
+      // Filter settings by category and add metadata
+      const categorySettings = Object.entries(DEFAULT_SETTINGS)
+        .filter(([_, setting]) => {
+          void _;
+          // Type assertion to access category property
+          const typedSetting = setting;
+          return typedSetting.category === input.category;
+        })
+        .map(([key]) => {
+          const typedKey = key as SettingKey;
+
+          // Use getSetting to get the value with proper defaults if not in database
+          const defaultValue = DEFAULT_SETTINGS[typedKey].value;
+          const value =
+            typedKey in allSettings
+              ? allSettings[typedKey as keyof typeof allSettings]
+              : defaultValue;
+
+          return {
+            key: typedKey,
+            value,
+            meta: DEFAULT_SETTINGS[typedKey],
+          };
+        });
+
+      return categorySettings;
+    }),
+});
diff --git a/packages/db/drizzle/0001_colorful_orphan.sql b/packages/db/drizzle/0001_colorful_orphan.sql
new file mode 100644
index 0000000..bb6665d
--- /dev/null
+++ b/packages/db/drizzle/0001_colorful_orphan.sql
@@ -0,0 +1,23 @@
+CREATE TABLE "settings" (
+	"key" varchar(100) PRIMARY KEY NOT NULL,
+	"value" jsonb NOT NULL,
+	"description" text,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "settings_history" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"setting_key" varchar(100) NOT NULL,
+	"previous_value" jsonb,
+	"changed_by_id" integer,
+	"changed_at" timestamp DEFAULT now() NOT NULL,
+	"change_reason" text
+);
+--> statement-breakpoint
+ALTER TABLE "settings_history" ADD CONSTRAINT "settings_history_setting_key_settings_key_fk" FOREIGN KEY ("setting_key") REFERENCES "public"."settings"("key") ON DELETE no action ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "settings_history" ADD CONSTRAINT "settings_history_changed_by_id_users_id_fk" FOREIGN KEY ("changed_by_id") REFERENCES "public"."users"("id") ON DELETE no action ON UPDATE no action;--> statement-breakpoint
+CREATE UNIQUE INDEX "settings_key_idx" ON "settings" USING btree ("key");--> statement-breakpoint
+CREATE INDEX "settings_history_key_idx" ON "settings_history" USING btree ("setting_key");--> statement-breakpoint
+CREATE INDEX "settings_history_user_idx" ON "settings_history" USING btree ("changed_by_id");--> statement-breakpoint
+CREATE INDEX "settings_history_time_idx" ON "settings_history" USING btree ("changed_at");
\ No newline at end of file
diff --git a/packages/db/drizzle/meta/0001_snapshot.json b/packages/db/drizzle/meta/0001_snapshot.json
new file mode 100644
index 0000000..39b86dc
--- /dev/null
+++ b/packages/db/drizzle/meta/0001_snapshot.json
@@ -0,0 +1,1816 @@
+{
+  "id": "020c9cda-3bbe-4e72-a57a-1b2fdb432d9f",
+  "prevId": "3039bfc9-5805-4f39-b1de-8325ca9a2637",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.accounts": {
+      "name": "accounts",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_account_id": {
+          "name": "provider_account_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "accounts_user_id_users_id_fk": {
+          "name": "accounts_user_id_users_id_fk",
+          "tableFrom": "accounts",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.actions": {
+      "name": "actions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "actions_name_unique": {
+          "name": "actions_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.assets": {
+      "name": "assets",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "file_name": {
+          "name": "file_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "file_type": {
+          "name": "file_type",
+          "type": "varchar(100)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "file_size": {
+          "name": "file_size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "data": {
+          "name": "data",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "uploaded_by_id": {
+          "name": "uploaded_by_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "assets_uploaded_by_id_users_id_fk": {
+          "name": "assets_uploaded_by_id_users_id_fk",
+          "tableFrom": "assets",
+          "tableTo": "users",
+          "columnsFrom": [
+            "uploaded_by_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.assets_to_pages": {
+      "name": "assets_to_pages",
+      "schema": "",
+      "columns": {
+        "asset_id": {
+          "name": "asset_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "page_id": {
+          "name": "page_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "asset_page_idx": {
+          "name": "asset_page_idx",
+          "columns": [
+            {
+              "expression": "asset_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "page_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "assets_to_pages_asset_id_assets_id_fk": {
+          "name": "assets_to_pages_asset_id_assets_id_fk",
+          "tableFrom": "assets_to_pages",
+          "tableTo": "assets",
+          "columnsFrom": [
+            "asset_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "assets_to_pages_page_id_wiki_pages_id_fk": {
+          "name": "assets_to_pages_page_id_wiki_pages_id_fk",
+          "tableFrom": "assets_to_pages",
+          "tableTo": "wiki_pages",
+          "columnsFrom": [
+            "page_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "assets_to_pages_asset_id_page_id_pk": {
+          "name": "assets_to_pages_asset_id_page_id_pk",
+          "columns": [
+            "asset_id",
+            "page_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.group_action_permissions": {
+      "name": "group_action_permissions",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "action_id": {
+          "name": "action_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "group_action_permissions_idx": {
+          "name": "group_action_permissions_idx",
+          "columns": [
+            {
+              "expression": "group_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "action_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "group_action_permissions_group_id_groups_id_fk": {
+          "name": "group_action_permissions_group_id_groups_id_fk",
+          "tableFrom": "group_action_permissions",
+          "tableTo": "groups",
+          "columnsFrom": [
+            "group_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "group_action_permissions_action_id_actions_id_fk": {
+          "name": "group_action_permissions_action_id_actions_id_fk",
+          "tableFrom": "group_action_permissions",
+          "tableTo": "actions",
+          "columnsFrom": [
+            "action_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_action_permissions_group_id_action_id_pk": {
+          "name": "group_action_permissions_group_id_action_id_pk",
+          "columns": [
+            "group_id",
+            "action_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.group_module_permissions": {
+      "name": "group_module_permissions",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "module_id": {
+          "name": "module_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "group_module_permissions_idx": {
+          "name": "group_module_permissions_idx",
+          "columns": [
+            {
+              "expression": "group_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "module_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "group_module_permissions_group_id_groups_id_fk": {
+          "name": "group_module_permissions_group_id_groups_id_fk",
+          "tableFrom": "group_module_permissions",
+          "tableTo": "groups",
+          "columnsFrom": [
+            "group_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "group_module_permissions_module_id_modules_id_fk": {
+          "name": "group_module_permissions_module_id_modules_id_fk",
+          "tableFrom": "group_module_permissions",
+          "tableTo": "modules",
+          "columnsFrom": [
+            "module_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_module_permissions_group_id_module_id_pk": {
+          "name": "group_module_permissions_group_id_module_id_pk",
+          "columns": [
+            "group_id",
+            "module_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.group_permissions": {
+      "name": "group_permissions",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission_id": {
+          "name": "permission_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "group_permission_idx": {
+          "name": "group_permission_idx",
+          "columns": [
+            {
+              "expression": "group_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "permission_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "group_permissions_group_id_groups_id_fk": {
+          "name": "group_permissions_group_id_groups_id_fk",
+          "tableFrom": "group_permissions",
+          "tableTo": "groups",
+          "columnsFrom": [
+            "group_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "group_permissions_permission_id_permissions_id_fk": {
+          "name": "group_permissions_permission_id_permissions_id_fk",
+          "tableFrom": "group_permissions",
+          "tableTo": "permissions",
+          "columnsFrom": [
+            "permission_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_permissions_group_id_permission_id_pk": {
+          "name": "group_permissions_group_id_permission_id_pk",
+          "columns": [
+            "group_id",
+            "permission_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groups": {
+      "name": "groups",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(100)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "is_system": {
+          "name": "is_system",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "is_editable": {
+          "name": "is_editable",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": true
+        },
+        "allow_user_assignment": {
+          "name": "allow_user_assignment",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "groups_name_unique": {
+          "name": "groups_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.modules": {
+      "name": "modules",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "modules_name_unique": {
+          "name": "modules_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.page_permissions": {
+      "name": "page_permissions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "page_id": {
+          "name": "page_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "permission_id": {
+          "name": "permission_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission_type": {
+          "name": "permission_type",
+          "type": "varchar(10)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'allow'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "page_group_perm_idx": {
+          "name": "page_group_perm_idx",
+          "columns": [
+            {
+              "expression": "page_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "permission_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "group_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "page_permissions_page_id_wiki_pages_id_fk": {
+          "name": "page_permissions_page_id_wiki_pages_id_fk",
+          "tableFrom": "page_permissions",
+          "tableTo": "wiki_pages",
+          "columnsFrom": [
+            "page_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "page_permissions_group_id_groups_id_fk": {
+          "name": "page_permissions_group_id_groups_id_fk",
+          "tableFrom": "page_permissions",
+          "tableTo": "groups",
+          "columnsFrom": [
+            "group_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "page_permissions_permission_id_permissions_id_fk": {
+          "name": "page_permissions_permission_id_permissions_id_fk",
+          "tableFrom": "page_permissions",
+          "tableTo": "permissions",
+          "columnsFrom": [
+            "permission_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.permissions": {
+      "name": "permissions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "module_id": {
+          "name": "module_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "resource": {
+          "name": "resource",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "action_id": {
+          "name": "action_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "permission_uniq_idx": {
+          "name": "permission_uniq_idx",
+          "columns": [
+            {
+              "expression": "module_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "resource",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "action_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "permissions_module_id_modules_id_fk": {
+          "name": "permissions_module_id_modules_id_fk",
+          "tableFrom": "permissions",
+          "tableTo": "modules",
+          "columnsFrom": [
+            "module_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "permissions_action_id_actions_id_fk": {
+          "name": "permissions_action_id_actions_id_fk",
+          "tableFrom": "permissions",
+          "tableTo": "actions",
+          "columnsFrom": [
+            "action_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.sessions": {
+      "name": "sessions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "session_token": {
+          "name": "session_token",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "sessions_session_token_unique": {
+          "name": "sessions_session_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "session_token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.settings": {
+      "name": "settings",
+      "schema": "",
+      "columns": {
+        "key": {
+          "name": "key",
+          "type": "varchar(100)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "settings_key_idx": {
+          "name": "settings_key_idx",
+          "columns": [
+            {
+              "expression": "key",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.settings_history": {
+      "name": "settings_history",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "setting_key": {
+          "name": "setting_key",
+          "type": "varchar(100)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "previous_value": {
+          "name": "previous_value",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "changed_by_id": {
+          "name": "changed_by_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "changed_at": {
+          "name": "changed_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "change_reason": {
+          "name": "change_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "settings_history_key_idx": {
+          "name": "settings_history_key_idx",
+          "columns": [
+            {
+              "expression": "setting_key",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "settings_history_user_idx": {
+          "name": "settings_history_user_idx",
+          "columns": [
+            {
+              "expression": "changed_by_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "settings_history_time_idx": {
+          "name": "settings_history_time_idx",
+          "columns": [
+            {
+              "expression": "changed_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "settings_history_setting_key_settings_key_fk": {
+          "name": "settings_history_setting_key_settings_key_fk",
+          "tableFrom": "settings_history",
+          "tableTo": "settings",
+          "columnsFrom": [
+            "setting_key"
+          ],
+          "columnsTo": [
+            "key"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "settings_history_changed_by_id_users_id_fk": {
+          "name": "settings_history_changed_by_id_users_id_fk",
+          "tableFrom": "settings_history",
+          "tableTo": "users",
+          "columnsFrom": [
+            "changed_by_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user_groups": {
+      "name": "user_groups",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "user_group_idx": {
+          "name": "user_group_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "group_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "user_groups_user_id_users_id_fk": {
+          "name": "user_groups_user_id_users_id_fk",
+          "tableFrom": "user_groups",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "user_groups_group_id_groups_id_fk": {
+          "name": "user_groups_group_id_groups_id_fk",
+          "tableFrom": "user_groups",
+          "tableTo": "groups",
+          "columnsFrom": [
+            "group_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_groups_user_id_group_id_pk": {
+          "name": "user_groups_user_id_group_id_pk",
+          "columns": [
+            "user_id",
+            "group_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "password": {
+          "name": "password",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "email_idx": {
+          "name": "email_idx",
+          "columns": [
+            {
+              "expression": "email",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verification_tokens": {
+      "name": "verification_tokens",
+      "schema": "",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "verification_token_idx": {
+          "name": "verification_token_idx",
+          "columns": [
+            {
+              "expression": "identifier",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "token",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verification_tokens_identifier_token_pk": {
+          "name": "verification_tokens_identifier_token_pk",
+          "columns": [
+            "identifier",
+            "token"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.wiki_page_revisions": {
+      "name": "wiki_page_revisions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "page_id": {
+          "name": "page_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_by_id": {
+          "name": "created_by_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "wiki_page_revisions_page_id_wiki_pages_id_fk": {
+          "name": "wiki_page_revisions_page_id_wiki_pages_id_fk",
+          "tableFrom": "wiki_page_revisions",
+          "tableTo": "wiki_pages",
+          "columnsFrom": [
+            "page_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "wiki_page_revisions_created_by_id_users_id_fk": {
+          "name": "wiki_page_revisions_created_by_id_users_id_fk",
+          "tableFrom": "wiki_page_revisions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "created_by_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.wiki_page_to_tag": {
+      "name": "wiki_page_to_tag",
+      "schema": "",
+      "columns": {
+        "page_id": {
+          "name": "page_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tag_id": {
+          "name": "tag_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "wiki_page_to_tag_page_id_wiki_pages_id_fk": {
+          "name": "wiki_page_to_tag_page_id_wiki_pages_id_fk",
+          "tableFrom": "wiki_page_to_tag",
+          "tableTo": "wiki_pages",
+          "columnsFrom": [
+            "page_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "wiki_page_to_tag_tag_id_wiki_tags_id_fk": {
+          "name": "wiki_page_to_tag_tag_id_wiki_tags_id_fk",
+          "tableFrom": "wiki_page_to_tag",
+          "tableTo": "wiki_tags",
+          "columnsFrom": [
+            "tag_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "wiki_page_to_tag_page_id_tag_id_pk": {
+          "name": "wiki_page_to_tag_page_id_tag_id_pk",
+          "columns": [
+            "page_id",
+            "tag_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.wiki_pages": {
+      "name": "wiki_pages",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "path": {
+          "name": "path",
+          "type": "varchar(1000)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "rendered_html": {
+          "name": "rendered_html",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "editor_type": {
+          "name": "editor_type",
+          "type": "editor_type",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_published": {
+          "name": "is_published",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "created_by_id": {
+          "name": "created_by_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_by_id": {
+          "name": "updated_by_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "rendered_html_updated_at": {
+          "name": "rendered_html_updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "locked_by_id": {
+          "name": "locked_by_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "locked_at": {
+          "name": "locked_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "lock_expires_at": {
+          "name": "lock_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "search": {
+          "name": "search",
+          "type": "tsvector",
+          "primaryKey": false,
+          "notNull": true,
+          "generated": {
+            "as": "setweight(to_tsvector('english', \"wiki_pages\".\"title\"), 'A')\n        ||\n        setweight(to_tsvector('english', \"wiki_pages\".\"content\"), 'B')",
+            "type": "stored"
+          }
+        }
+      },
+      "indexes": {
+        "idx_search": {
+          "name": "idx_search",
+          "columns": [
+            {
+              "expression": "search",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "gin",
+          "with": {}
+        },
+        "trgm_idx_title": {
+          "name": "trgm_idx_title",
+          "columns": [
+            {
+              "expression": "title",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "wiki_pages_created_by_id_users_id_fk": {
+          "name": "wiki_pages_created_by_id_users_id_fk",
+          "tableFrom": "wiki_pages",
+          "tableTo": "users",
+          "columnsFrom": [
+            "created_by_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "wiki_pages_updated_by_id_users_id_fk": {
+          "name": "wiki_pages_updated_by_id_users_id_fk",
+          "tableFrom": "wiki_pages",
+          "tableTo": "users",
+          "columnsFrom": [
+            "updated_by_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "wiki_pages_locked_by_id_users_id_fk": {
+          "name": "wiki_pages_locked_by_id_users_id_fk",
+          "tableFrom": "wiki_pages",
+          "tableTo": "users",
+          "columnsFrom": [
+            "locked_by_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "wiki_pages_path_unique": {
+          "name": "wiki_pages_path_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "path"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.wiki_tags": {
+      "name": "wiki_tags",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(100)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "wiki_tags_name_unique": {
+          "name": "wiki_tags_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {
+    "public.editor_type": {
+      "name": "editor_type",
+      "schema": "public",
+      "values": [
+        "markdown",
+        "html"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/packages/db/drizzle/meta/_journal.json b/packages/db/drizzle/meta/_journal.json
index d932f53..f02a08a 100644
--- a/packages/db/drizzle/meta/_journal.json
+++ b/packages/db/drizzle/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1745433510377,
       "tag": "0000_silly_iceman",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1745447221512,
+      "tag": "0001_colorful_orphan",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/db/package.json b/packages/db/package.json
index e1ddd50..23a3dc7 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -35,6 +35,7 @@
     "_db:seed:custom": "tsx src/seeds/custom-seeds.ts"
   },
   "dependencies": {
+    "@repo/types": "workspace:*",
     "@neondatabase/serverless": "^1.0.0",
     "@repo/logger": "workspace:*",
     "bcryptjs": "^3.0.2",
diff --git a/packages/db/src/schema/index.ts b/packages/db/src/schema/index.ts
index 92a57ab..ac469e8 100644
--- a/packages/db/src/schema/index.ts
+++ b/packages/db/src/schema/index.ts
@@ -12,8 +12,10 @@ import {
   pgEnum,
   uuid,
   uniqueIndex,
+  jsonb,
 } from "drizzle-orm/pg-core";
 import { relations, SQL, sql } from "drizzle-orm";
+import { SettingKey } from "@repo/types";
 
 // Define custom PostgreSQL extension for trigrams
 export const pgExtensions = sql`
@@ -563,3 +565,56 @@ export const assetsToPagesRelations = relations(assetsToPages, ({ one }) => ({
     references: [wikiPages.id],
   }),
 }));
+
+// Settings table - stores application settings
+export const settings = pgTable(
+  "settings",
+  {
+    key: varchar("key", { length: 100 }).primaryKey().$type<SettingKey>(),
+    value: jsonb("value").notNull(), // Store setting value as JSONB
+    description: text("description"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at").defaultNow().notNull(),
+  },
+  (t) => [uniqueIndex("settings_key_idx").on(t.key)]
+);
+
+// Settings history table - tracks changes to settings
+export const settingsHistory = pgTable(
+  "settings_history",
+  {
+    id: serial("id").primaryKey(),
+    settingKey: varchar("setting_key", { length: 100 })
+      .notNull()
+      .$type<SettingKey>()
+      .references(() => settings.key),
+    previousValue: jsonb("previous_value"), // Previous value as JSONB
+    changedById: integer("changed_by_id").references(() => users.id),
+    changedAt: timestamp("changed_at").defaultNow().notNull(),
+    changeReason: text("change_reason"),
+  },
+  (t) => [
+    index("settings_history_key_idx").on(t.settingKey),
+    index("settings_history_user_idx").on(t.changedById),
+    index("settings_history_time_idx").on(t.changedAt),
+  ]
+);
+
+// Add relations for settings
+export const settingsRelations = relations(settings, ({ many }) => ({
+  history: many(settingsHistory),
+}));
+
+export const settingsHistoryRelations = relations(
+  settingsHistory,
+  ({ one }) => ({
+    setting: one(settings, {
+      fields: [settingsHistory.settingKey],
+      references: [settings.key],
+    }),
+    changedBy: one(users, {
+      fields: [settingsHistory.changedById],
+      references: [users.id],
+    }),
+  })
+);
diff --git a/packages/db/src/seeds/run.ts b/packages/db/src/seeds/run.ts
index bf0c416..de27f0a 100644
--- a/packages/db/src/seeds/run.ts
+++ b/packages/db/src/seeds/run.ts
@@ -1,5 +1,6 @@
 import { createDefaultGroups, seedPermissions } from "./permissions.js";
 import { runDeveloperSeeds } from "./developer-seeds.js";
+import { seedSettings } from "./settings.js";
 
 /**
  * Main function to run all seed operations.
@@ -14,11 +15,14 @@ async function seed() {
     // 2. Create Default Groups and assign base permissions
     await createDefaultGroups();
 
+    // 3. Seed Default Settings
+    await seedSettings();
+
     if (!process.env.SKIP_DEVELOPER_SEEDS) {
-      // 3. Run Developer Seeds (admin user, example pages, etc.)
+      // 4. Run Developer Seeds (admin user, example pages, etc.)
       await runDeveloperSeeds();
 
-      // 4. Run Custom Seeds - uncomment when custom seeds are defined
+      // 5. Run Custom Seeds - uncomment when custom seeds are defined
       // try {
       //   const customSeeds = await import("./custom-seeds.js");
       //   await customSeeds.runCustomSeeds();
diff --git a/packages/db/src/seeds/settings.ts b/packages/db/src/seeds/settings.ts
new file mode 100644
index 0000000..da1388f
--- /dev/null
+++ b/packages/db/src/seeds/settings.ts
@@ -0,0 +1,53 @@
+import { db } from "../index.js";
+import { settings } from "../schema/index.js";
+import type { SettingKey } from "@repo/types";
+
+/**
+ * Seeds the default settings into the database.
+ * Only initializes settings that don't already exist.
+ */
+export async function seedSettings() {
+  console.log("\nSeeding default settings...");
+
+  try {
+    // Dynamically import to avoid circular dependencies
+    const settingsModule = await import("@repo/types");
+    const DEFAULT_SETTINGS = settingsModule.DEFAULT_SETTINGS;
+
+    // Get all defined setting keys
+    const allKeys = Object.keys(DEFAULT_SETTINGS) as SettingKey[];
+
+    // Check which settings already exist in the database
+    const existingSettings = await db.query.settings.findMany({
+      columns: { key: true },
+    });
+    const existingKeys = new Set(existingSettings.map((s) => s.key));
+
+    // Filter out keys that already exist
+    const keysToCreate = allKeys.filter((key) => !existingKeys.has(key));
+
+    // Create missing settings with default values
+    if (keysToCreate.length > 0) {
+      for (const key of keysToCreate) {
+        const setting = DEFAULT_SETTINGS[key];
+
+        await db.insert(settings).values({
+          key: key as SettingKey,
+          value: setting.value,
+          description: setting.description,
+        });
+
+        console.log(`  ✓ Initialized setting: ${key}`);
+      }
+
+      console.log(`  ✅ Created ${keysToCreate.length} default settings`);
+    } else {
+      console.log("  ✓ All settings already exist, nothing to seed");
+    }
+
+    return true;
+  } catch (error) {
+    console.error("  ❌ Error seeding settings:", error);
+    return false;
+  }
+}
diff --git a/packages/types/package.json b/packages/types/package.json
index 9369233..f1840df 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -4,9 +4,16 @@
   "type": "module",
   "private": true,
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./settings": {
+      "types": "./dist/settings.d.ts",
+      "import": "./dist/settings.js"
+    }
   },
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "clean": "rm -rf dist .next",
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 23d4a2c..4fb1364 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1,2 +1,2 @@
 // Export your package components here
-export const name = "types";
+export * from "./settings.js";
diff --git a/packages/types/src/settings.ts b/packages/types/src/settings.ts
new file mode 100644
index 0000000..e470ed5
--- /dev/null
+++ b/packages/types/src/settings.ts
@@ -0,0 +1,319 @@
+/**
+ * Type definitions for NextWiki settings system
+ * All application settings are stored in the database and accessed through this type system
+ */
+
+/**
+ * Setting value types
+ */
+export type StringSetting = { type: "string"; value: string };
+export type NumberSetting = { type: "number"; value: number };
+export type BooleanSetting = { type: "boolean"; value: boolean };
+export type SelectSetting<T extends string> = {
+  type: "select";
+  value: T;
+  options: T[];
+};
+export type JsonSetting = { type: "json"; value: Record<string, unknown> };
+
+/**
+ * Setting metadata
+ */
+export interface SettingMeta {
+  description: string;
+  category: SettingCategory;
+  defaultValue: unknown;
+  isSecret?: boolean;
+  requiresRestart?: boolean;
+}
+
+/**
+ * Setting categories for UI organization
+ */
+export type SettingCategory =
+  | "general"
+  | "auth"
+  | "appearance"
+  | "editor"
+  | "search"
+  | "advanced";
+
+/**
+ * Combined setting definition with value and metadata
+ */
+export type SettingDefinition<T extends SettingValueType> = T & SettingMeta;
+
+/**
+ * Any valid setting value type
+ */
+export type SettingValueType =
+  | StringSetting
+  | NumberSetting
+  | BooleanSetting
+  | SelectSetting<string>
+  | JsonSetting;
+
+/**
+ * All application settings with their types and metadata
+ */
+export interface SettingsDefinitions {
+  // General settings
+  "site.title": SettingDefinition<StringSetting>;
+  "site.description": SettingDefinition<StringSetting>;
+  "site.url": SettingDefinition<StringSetting>;
+  "site.logo": SettingDefinition<StringSetting>;
+
+  // Authentication settings
+  "auth.allowRegistration": SettingDefinition<BooleanSetting>;
+  "auth.requireEmailVerification": SettingDefinition<BooleanSetting>;
+  "auth.defaultUserGroup": SettingDefinition<StringSetting>;
+  "auth.minPasswordLength": SettingDefinition<NumberSetting>;
+
+  // Appearance settings
+  "appearance.defaultTheme": SettingDefinition<
+    SelectSetting<"light" | "dark" | "system">
+  >;
+  "appearance.accentColor": SettingDefinition<StringSetting>;
+  "appearance.showSidebar": SettingDefinition<BooleanSetting>;
+
+  // Editor settings
+  "editor.defaultType": SettingDefinition<SelectSetting<"markdown" | "html">>;
+  "editor.spellcheck": SettingDefinition<BooleanSetting>;
+  "editor.autosaveInterval": SettingDefinition<NumberSetting>;
+
+  // Search settings
+  "search.fuzzyMatching": SettingDefinition<BooleanSetting>;
+  "search.maxResults": SettingDefinition<NumberSetting>;
+  "search.minScore": SettingDefinition<NumberSetting>;
+
+  // Advanced settings
+  "advanced.assetStorageProvider": SettingDefinition<
+    SelectSetting<"local" | "s3" | "azure">
+  >;
+  "advanced.storageConfig": SettingDefinition<JsonSetting>;
+  "advanced.maxUploadSize": SettingDefinition<NumberSetting>;
+}
+
+/**
+ * Type for a setting key
+ */
+export type SettingKey = keyof SettingsDefinitions;
+
+/**
+ * Type for getting a setting value based on its key
+ */
+export type SettingValue<K extends SettingKey> =
+  SettingsDefinitions[K]["value"];
+
+/**
+ * Type for settings stored in the database
+ */
+export interface DbSetting<K extends SettingKey = SettingKey> {
+  key: K;
+  value: SettingValue<K>;
+  description: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+/**
+ * Type for settings history entry
+ */
+export interface SettingHistoryEntry<K extends SettingKey = SettingKey> {
+  id: number;
+  settingKey: K;
+  previousValue: SettingValue<K>;
+  changedById: number | null;
+  changedAt: Date;
+  changeReason: string | null;
+}
+
+/**
+ * Default values for all settings
+ */
+export const DEFAULT_SETTINGS: {
+  [K in SettingKey]: SettingsDefinitions[K];
+} = {
+  // General settings
+  "site.title": {
+    type: "string",
+    value: "NextWiki",
+    description: "The title of your wiki site",
+    category: "general",
+    defaultValue: "NextWiki",
+  },
+  "site.description": {
+    type: "string",
+    value: "A modern wiki built with Next.js",
+    description: "A short description of your wiki site",
+    category: "general",
+    defaultValue: "A modern wiki built with Next.js",
+  },
+  "site.url": {
+    type: "string",
+    value: "http://localhost:3000",
+    description: "The full URL of your wiki site (without trailing slash)",
+    category: "general",
+    defaultValue: "http://localhost:3000",
+  },
+  "site.logo": {
+    type: "string",
+    value: "/assets/images/logo.svg",
+    description: "Path to the logo image file",
+    category: "general",
+    defaultValue: "/assets/images/logo.svg",
+  },
+
+  // Authentication settings
+  "auth.allowRegistration": {
+    type: "boolean",
+    value: true,
+    description: "Allow new user registrations",
+    category: "auth",
+    defaultValue: true,
+  },
+  "auth.requireEmailVerification": {
+    type: "boolean",
+    value: false,
+    description: "Require email verification before allowing login",
+    category: "auth",
+    defaultValue: false,
+  },
+  "auth.defaultUserGroup": {
+    type: "string",
+    value: "users",
+    description: "Default group for new users",
+    category: "auth",
+    defaultValue: "users",
+  },
+  "auth.minPasswordLength": {
+    type: "number",
+    value: 8,
+    description: "Minimum password length for new accounts",
+    category: "auth",
+    defaultValue: 8,
+  },
+
+  // Appearance settings
+  "appearance.defaultTheme": {
+    type: "select",
+    value: "system",
+    options: ["light", "dark", "system"],
+    description: "Default theme for new users",
+    category: "appearance",
+    defaultValue: "system",
+  },
+  "appearance.accentColor": {
+    type: "string",
+    value: "#0070f3",
+    description: "Accent color for UI elements (hex code)",
+    category: "appearance",
+    defaultValue: "#0070f3",
+  },
+  "appearance.showSidebar": {
+    type: "boolean",
+    value: true,
+    description: "Show sidebar navigation by default",
+    category: "appearance",
+    defaultValue: true,
+  },
+
+  // Editor settings
+  "editor.defaultType": {
+    type: "select",
+    value: "markdown",
+    options: ["markdown", "html"],
+    description: "Default editor type for new pages",
+    category: "editor",
+    defaultValue: "markdown",
+  },
+  "editor.spellcheck": {
+    type: "boolean",
+    value: true,
+    description: "Enable spellchecking in the editor",
+    category: "editor",
+    defaultValue: true,
+  },
+  "editor.autosaveInterval": {
+    type: "number",
+    value: 30,
+    description: "Autosave interval in seconds (0 to disable)",
+    category: "editor",
+    defaultValue: 30,
+  },
+
+  // Search settings
+  "search.fuzzyMatching": {
+    type: "boolean",
+    value: true,
+    description: "Enable fuzzy matching in search results",
+    category: "search",
+    defaultValue: true,
+  },
+  "search.maxResults": {
+    type: "number",
+    value: 20,
+    description: "Maximum number of search results to display",
+    category: "search",
+    defaultValue: 20,
+  },
+  "search.minScore": {
+    type: "number",
+    value: 0.3,
+    description: "Minimum relevance score for search results (0-1)",
+    category: "search",
+    defaultValue: 0.3,
+  },
+
+  // Advanced settings
+  "advanced.assetStorageProvider": {
+    type: "select",
+    value: "local",
+    options: ["local", "s3", "azure"],
+    description: "Provider for storing uploaded assets",
+    category: "advanced",
+    defaultValue: "local",
+    requiresRestart: true,
+  },
+  "advanced.storageConfig": {
+    type: "json",
+    value: {},
+    description: "Configuration for the selected storage provider",
+    category: "advanced",
+    defaultValue: {},
+    isSecret: true,
+  },
+  "advanced.maxUploadSize": {
+    type: "number",
+    value: 5242880, // 5MB in bytes
+    description: "Maximum file upload size in bytes",
+    category: "advanced",
+    defaultValue: 5242880,
+  },
+};
+
+/**
+ * Type-safe helper to get setting default value
+ */
+export function getDefaultSetting<K extends SettingKey>(
+  key: K
+): SettingValue<K> {
+  return DEFAULT_SETTINGS[key].value;
+}
+
+/**
+ * Type-safe helper to get setting metadata
+ */
+export function getSettingMeta<K extends SettingKey>(
+  key: K
+): Omit<SettingDefinition<SettingValueType>, "type" | "value" | "options"> {
+  // Extract just the metadata fields
+  const { description, category, defaultValue, isSecret, requiresRestart } =
+    DEFAULT_SETTINGS[key];
+  return { description, category, defaultValue, isSecret, requiresRestart };
+}
+
+/**
+ * Export default settings as index
+ */
+export default DEFAULT_SETTINGS;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00d4d15..e64d2f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -177,6 +177,9 @@ importers:
       '@repo/logger':
         specifier: workspace:*
         version: link:../../packages/logger
+      '@repo/types':
+        specifier: workspace:*
+        version: link:../../packages/types
       '@repo/ui':
         specifier: workspace:*
         version: link:../../packages/ui
@@ -451,6 +454,9 @@ importers:
       '@repo/logger':
         specifier: workspace:*
         version: link:../logger
+      '@repo/types':
+        specifier: workspace:*
+        version: link:../types
       bcryptjs:
         specifier: ^3.0.2
         version: 3.0.2
@@ -12868,8 +12874,8 @@ snapshots:
       '@typescript-eslint/parser': 8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.25.1(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.25.1(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.25.1(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.25.1(jiti@2.4.2))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.25.1(jiti@2.4.2))
@@ -12892,7 +12898,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -12903,22 +12909,22 @@ snapshots:
       tinyglobby: 0.2.13
       unrs-resolver: 1.6.4
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.25.1(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.25.1(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.25.1(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.25.1(jiti@2.4.2)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -12929,7 +12935,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.25.1(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.25.1(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.31.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
diff --git a/schema.dbml b/schema.dbml
index 4564dbf..e54d920 100644
--- a/schema.dbml
+++ b/schema.dbml
@@ -221,4 +221,31 @@ Table ASSETS_TO_PAGES {
     (asset_id, page_id) [pk]
     asset_page_idx (asset_id, page_id)
   }
+}
+
+Table SETTINGS {
+  key varchar(100) [pk, not null, note: 'Unique key for the setting']
+  value jsonb [note: 'Value of the setting, stored as JSONB'] // Note: Using jsonb type
+  description text [note: 'Description of what the setting controls']
+  created_at timestamp [default: `now()`]
+  updated_at timestamp [default: `now()`]
+
+  indexes {
+    settings_key_idx (key) [unique]
+  }
+}
+
+Table SETTINGS_HISTORY {
+  id int [pk, increment]
+  setting_key varchar(100) [not null, note: 'The key of the setting that was changed']
+  previous_value jsonb [note: 'Value of the setting *before* this change (JSONB)']
+  changed_by_id int [ref: > USERS.id, note: 'User who made the change']
+  changed_at timestamp [default: `now()`, note: 'Timestamp of the change']
+  change_reason text [note: 'Optional reason for the change']
+
+  indexes {
+    settings_history_key_idx (setting_key)
+    settings_history_user_idx (changed_by_id)
+    settings_history_time_idx (changed_at)
+  }
 }
\ No newline at end of file

From 31680747821dc73204be86e2a55959a59dfd6a25 Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Thu, 24 Apr 2025 01:45:05 +0200
Subject: [PATCH 7/8] Simple central config

---
 apps/web/src/app/(auth)/login/login-page.tsx  |  54 +++
 apps/web/src/app/(auth)/register/page.tsx     |  45 +-
 .../src/app/(auth)/register/register-page.tsx |  38 ++
 .../settings/components/category-settings.tsx | 448 ++++++++++++++++++
 .../settings/components/settings-page.tsx     | 157 ++++++
 apps/web/src/app/admin/settings/page.tsx      |  15 +
 apps/web/src/components/auth/LoginForm.tsx    |  20 +-
 apps/web/src/components/layout/Header.tsx     |  12 +-
 .../web/src/components/layout/page-header.tsx |  23 +
 apps/web/src/lib/hooks/use-settings.ts        | 101 ++++
 apps/web/src/lib/services/settings.ts         |  14 +-
 apps/web/src/lib/utils/settings.ts            |  83 ++++
 apps/web/src/server/routers/admin/settings.ts |  21 +-
 packages/ui/src/components/dialog.tsx         |   4 +-
 packages/ui/src/components/dropdown.tsx       |   2 +-
 15 files changed, 983 insertions(+), 54 deletions(-)
 create mode 100644 apps/web/src/app/(auth)/login/login-page.tsx
 create mode 100644 apps/web/src/app/(auth)/register/register-page.tsx
 create mode 100644 apps/web/src/app/admin/settings/components/category-settings.tsx
 create mode 100644 apps/web/src/app/admin/settings/components/settings-page.tsx
 create mode 100644 apps/web/src/app/admin/settings/page.tsx
 create mode 100644 apps/web/src/components/layout/page-header.tsx
 create mode 100644 apps/web/src/lib/hooks/use-settings.ts
 create mode 100644 apps/web/src/lib/utils/settings.ts

diff --git a/apps/web/src/app/(auth)/login/login-page.tsx b/apps/web/src/app/(auth)/login/login-page.tsx
new file mode 100644
index 0000000..afe9c2b
--- /dev/null
+++ b/apps/web/src/app/(auth)/login/login-page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { LoginForm } from "~/components/auth/LoginForm";
+import { Suspense, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { usePermissions } from "~/components/auth/permission/client";
+import { Button } from "@repo/ui";
+import { ArrowLeftIcon } from "lucide-react";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { isAuthenticated, hasPermission } = usePermissions();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push("/");
+    }
+  }, [isAuthenticated, router]);
+
+  const hasWikiReadPermission = hasPermission("wiki:page:read");
+
+  return (
+    <div className="bg-background-paper flex min-h-screen flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight">
+            Sign in to NextWiki
+          </h2>
+          {!hasWikiReadPermission && (
+            <p className="text-text-secondary mt-2 text-center text-sm">
+              This is a private wiki. You need to be logged in to access it.
+            </p>
+          )}
+        </div>
+
+        <Suspense fallback={<div>Loading login form...</div>}>
+          <LoginForm />
+        </Suspense>
+      </div>
+
+      {/* Show the back to home button if the user has the wiki:page:read permission, otherwise they will be redirected back here so no need to show it */}
+      {hasWikiReadPermission && (
+        <Button
+          className="fixed bottom-16 left-16 rounded-full"
+          variant="outlined"
+          onClick={() => router.push("/")}
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
+          Back to home
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(auth)/register/page.tsx b/apps/web/src/app/(auth)/register/page.tsx
index ecb7a1a..f856c11 100644
--- a/apps/web/src/app/(auth)/register/page.tsx
+++ b/apps/web/src/app/(auth)/register/page.tsx
@@ -1,25 +1,26 @@
-"use client";
+import RegisterClientPage from "./register-page";
+import { getSettingValue } from "~/lib/utils/settings";
 
-import { ArrowLeftIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { RegisterForm } from "~/components/auth/RegisterForm";
-import { usePermissions } from "~/components/auth/permission/client";
-import { Button } from "@repo/ui";
-
-export default function RegisterPage({
+export default async function RegisterPage({
   isFirstUser = false,
 }: {
   isFirstUser?: boolean;
 }) {
-  const router = useRouter();
-  const { isAuthenticated } = usePermissions();
+  const allowRegistration = await getSettingValue("auth.allowRegistration");
 
-  useEffect(() => {
-    if (isAuthenticated) {
-      router.push("/");
-    }
-  }, [isAuthenticated, router]);
+  if (!allowRegistration) {
+    return (
+      <div className="bg-background-paper flex h-screen flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          <div>
+            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight">
+              Registration is not allowed
+            </h2>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="bg-background-paper flex h-screen flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
@@ -34,18 +35,8 @@ export default function RegisterPage({
             </p>
           )}
         </div>
-
-        <RegisterForm isFirstUser={isFirstUser} />
-
-        <Button
-          className="fixed bottom-16 left-16 rounded-full"
-          variant="outlined"
-          onClick={() => router.push("/")}
-        >
-          <ArrowLeftIcon className="h-4 w-4" />
-          Back to home
-        </Button>
       </div>
+      <RegisterClientPage isFirstUser={isFirstUser} />
     </div>
   );
 }
diff --git a/apps/web/src/app/(auth)/register/register-page.tsx b/apps/web/src/app/(auth)/register/register-page.tsx
new file mode 100644
index 0000000..4ec589a
--- /dev/null
+++ b/apps/web/src/app/(auth)/register/register-page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { ArrowLeftIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { RegisterForm } from "~/components/auth/RegisterForm";
+import { usePermissions } from "~/components/auth/permission/client";
+import { Button } from "@repo/ui";
+
+export default function RegisterClientPage({
+  isFirstUser = false,
+}: {
+  isFirstUser?: boolean;
+}) {
+  const router = useRouter();
+  const { isAuthenticated } = usePermissions();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push("/");
+    }
+  }, [isAuthenticated, router]);
+
+  return (
+    <>
+      <RegisterForm isFirstUser={isFirstUser} />
+
+      <Button
+        className="fixed bottom-16 left-16 rounded-full"
+        variant="outlined"
+        onClick={() => router.push("/")}
+      >
+        <ArrowLeftIcon className="h-4 w-4" />
+        Back to home
+      </Button>
+    </>
+  );
+}
diff --git a/apps/web/src/app/admin/settings/components/category-settings.tsx b/apps/web/src/app/admin/settings/components/category-settings.tsx
new file mode 100644
index 0000000..4a19e5a
--- /dev/null
+++ b/apps/web/src/app/admin/settings/components/category-settings.tsx
@@ -0,0 +1,448 @@
+"use client";
+
+import { useState } from "react";
+import { useTRPC } from "~/server/client";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Input,
+  Checkbox,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Button,
+  Badge,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@repo/ui";
+import { format } from "date-fns";
+import type { SettingCategory } from "@repo/types";
+import {
+  Clock,
+  History,
+  HelpCircle,
+  RotateCw,
+  Save,
+  EyeOff,
+} from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+interface CategorySettingsProps {
+  category: SettingCategory;
+  isLoading: boolean;
+}
+
+export function CategorySettings({
+  category,
+  isLoading,
+}: CategorySettingsProps) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { data: settings, isLoading: isLoadingSettings } = useQuery(
+    trpc.admin.settings.getByCategory.queryOptions(
+      { category },
+      { enabled: !isLoading }
+    )
+  );
+
+  // State for edited values
+  const [editedValues, setEditedValues] = useState<Record<string, any>>({});
+  const [historyKey, setHistoryKey] = useState<string | null>(null);
+
+  const byCategoryQueryKey = trpc.admin.settings.getByCategory.queryKey();
+  const getAllQueryKey = trpc.admin.settings.getAll.queryKey();
+
+  // Update setting mutation
+  const updateSetting = useMutation(
+    trpc.admin.settings.update.mutationOptions({
+      onSuccess: () => {
+        // Clear the edited value and refetch
+        setEditedValues((prev) => {
+          const updated = { ...prev };
+          delete updated[updateSetting.variables?.key ?? ""];
+          return updated;
+        });
+
+        // Invalidate queries to refresh data
+        queryClient.invalidateQueries({ queryKey: byCategoryQueryKey });
+        queryClient.invalidateQueries({ queryKey: getAllQueryKey });
+      },
+    })
+  );
+
+  // Reset setting mutation
+  const resetSetting = useMutation(
+    trpc.admin.settings.reset.mutationOptions({
+      onSuccess: () => {
+        // Invalidate queries to refresh data
+        queryClient.invalidateQueries({ queryKey: byCategoryQueryKey });
+        queryClient.invalidateQueries({ queryKey: getAllQueryKey });
+      },
+    })
+  );
+
+  // Get setting history
+  const { data: history, isLoading: isLoadingHistory } = useQuery(
+    trpc.admin.settings.getHistory.queryOptions(
+      { key: historyKey! },
+      { enabled: !!historyKey }
+    )
+  );
+
+  const handleValueChange = (key: string, value: any) => {
+    setEditedValues((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const handleSave = (key: string) => {
+    const value = editedValues[key];
+    updateSetting.mutate({
+      key,
+      value,
+      reason: `Updated from admin settings page`,
+    });
+  };
+
+  const handleReset = (key: string) => {
+    resetSetting.mutate({
+      key,
+      reason: `Reset to default from admin settings page`,
+    });
+  };
+
+  const renderSettingInput = (setting: any) => {
+    const key = setting.key;
+    const value = key in editedValues ? editedValues[key] : setting.value;
+    const type = setting.meta.type;
+    const isEdited = key in editedValues;
+    const isSecret = setting.meta.isSecret;
+
+    switch (type) {
+      case "string":
+        return (
+          <div className="flex items-center gap-2">
+            <Input
+              value={value}
+              type={isSecret ? "password" : "text"}
+              onChange={(e) => handleValueChange(key, e.target.value)}
+              className="max-w-sm"
+            />
+            {isSecret && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button size="icon" variant="ghost">
+                    <EyeOff className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>This is a sensitive setting</p>
+                </TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+        );
+
+      case "number":
+        return (
+          <Input
+            value={value}
+            type="number"
+            onChange={(e) => handleValueChange(key, Number(e.target.value))}
+            className="max-w-xs"
+          />
+        );
+
+      case "boolean":
+        return (
+          <Checkbox
+            checked={value}
+            onChange={(e) => handleValueChange(key, e.target.checked)}
+          />
+        );
+
+      case "select":
+        return (
+          <Select
+            value={value}
+            onValueChange={(value) => handleValueChange(key, value)}
+          >
+            <SelectTrigger className="max-w-xs">
+              <SelectValue placeholder="Select option" />
+            </SelectTrigger>
+            <SelectContent className="bg-background-level1">
+              {setting.meta.options.map((option: string) => (
+                <SelectItem key={option} value={option}>
+                  {option}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+
+      case "json":
+        // Display JSON as a string in a textarea
+        return (
+          <div className="max-w-lg">
+            <textarea
+              value={JSON.stringify(value, null, 2)}
+              onChange={(e) => {
+                try {
+                  const parsed = JSON.parse(e.target.value);
+                  handleValueChange(key, parsed);
+                } catch (error) {
+                  // Don't update if invalid JSON
+                }
+              }}
+              className="border-input bg-background-paper min-h-[100px] w-full rounded-md border px-3 py-2 text-sm"
+            />
+          </div>
+        );
+
+      default:
+        return <div>Unsupported type: {type}</div>;
+    }
+  };
+
+  if (isLoading || isLoadingSettings) {
+    return (
+      <div className="space-y-4">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center space-x-4">
+            <Skeleton className="h-4 w-40" />
+            <Skeleton className="h-10 w-60" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (!settings || settings.length === 0) {
+    return <p>No settings found for this category.</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[250px]">Setting</TableHead>
+            <TableHead>Value</TableHead>
+            <TableHead className="w-[200px]">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {settings.map((setting) => {
+            const key = setting.key;
+            const isEdited = key in editedValues;
+            const isUpdating =
+              updateSetting.isPending && updateSetting.variables?.key === key;
+            const isResetting =
+              resetSetting.isPending && resetSetting.variables?.key === key;
+            const requiresRestart = setting.meta.requiresRestart;
+
+            return (
+              <TableRow key={key}>
+                <TableCell>
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2 font-medium">
+                      {key}
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              size="icon"
+                              variant="ghost"
+                              className="h-5 w-5"
+                            >
+                              <HelpCircle className="h-3 w-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{setting.meta.description}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                      {requiresRestart && (
+                        <Badge variant="outline" className="ml-2 text-xs">
+                          Requires restart
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="text-text-secondary text-xs">
+                      {setting.meta.description}
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  {renderSettingInput(setting)}
+                  {isEdited && (
+                    <p className="text-text-secondary mt-1 text-xs">
+                      Modified - Save to apply changes
+                    </p>
+                  )}
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="soft"
+                      size="sm"
+                      onClick={() => handleSave(key)}
+                      disabled={!isEdited || isUpdating || isResetting}
+                      className="h-8"
+                    >
+                      {isUpdating ? (
+                        <>
+                          <Skeleton className="mr-2 h-4 w-4 animate-spin rounded-full" />
+                          Saving...
+                        </>
+                      ) : (
+                        <>
+                          <Save className="mr-1 h-3.5 w-3.5" />
+                          Save
+                        </>
+                      )}
+                    </Button>
+
+                    <Button
+                      variant="outlined"
+                      size="sm"
+                      onClick={() => handleReset(key)}
+                      disabled={isUpdating || isResetting}
+                      className="h-8"
+                    >
+                      {isResetting ? (
+                        <>
+                          <Skeleton className="mr-2 h-4 w-4 animate-spin rounded-full" />
+                          Resetting...
+                        </>
+                      ) : (
+                        <>
+                          <RotateCw className="mr-1 h-3.5 w-3.5" />
+                          Reset
+                        </>
+                      )}
+                    </Button>
+
+                    <Dialog
+                      open={historyKey === key}
+                      onOpenChange={(open) => !open && setHistoryKey(null)}
+                    >
+                      <DialogTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => setHistoryKey(key)}
+                        >
+                          <History className="h-4 w-4" />
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent>
+                        <DialogHeader>
+                          <DialogTitle>Setting History</DialogTitle>
+                          <DialogDescription>
+                            History of changes for setting: {key}
+                          </DialogDescription>
+                        </DialogHeader>
+
+                        {isLoadingHistory ? (
+                          <div className="space-y-2">
+                            {Array.from({ length: 3 }).map((_, i) => (
+                              <Skeleton key={i} className="h-16 w-full" />
+                            ))}
+                          </div>
+                        ) : history && history.length > 0 ? (
+                          <div className="max-h-[400px] overflow-y-auto">
+                            {history.map((entry) => (
+                              <div
+                                key={entry.id}
+                                className="space-y-1 border-b py-3 last:border-b-0"
+                              >
+                                <div className="flex justify-between">
+                                  <div className="flex items-center gap-1 font-medium">
+                                    <Clock className="text-text-secondary h-4 w-4" />
+                                    <span>
+                                      {format(
+                                        new Date(entry.changedAt),
+                                        "MMM d, yyyy h:mm a"
+                                      )}
+                                    </span>
+                                  </div>
+                                  <div>
+                                    {entry.changedById ? (
+                                      <span className="text-text-secondary text-sm">
+                                        User ID: {entry.changedById}
+                                      </span>
+                                    ) : (
+                                      <span className="text-text-secondary text-sm">
+                                        System
+                                      </span>
+                                    )}
+                                  </div>
+                                </div>
+
+                                {entry.changeReason && (
+                                  <div className="text-sm">
+                                    Reason: {entry.changeReason}
+                                  </div>
+                                )}
+
+                                <div className="mt-1 text-sm font-medium">
+                                  Previous value:
+                                </div>
+                                <div className="bg-background-paper overflow-auto rounded-md p-2 text-sm">
+                                  {typeof entry.previousValue === "object"
+                                    ? JSON.stringify(
+                                        entry.previousValue,
+                                        null,
+                                        2
+                                      )
+                                    : String(entry.previousValue)}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <p className="text-muted-foreground py-4 text-center">
+                            No history available for this setting
+                          </p>
+                        )}
+
+                        <DialogFooter>
+                          <Button
+                            variant="outlined"
+                            onClick={() => setHistoryKey(null)}
+                          >
+                            Close
+                          </Button>
+                        </DialogFooter>
+                      </DialogContent>
+                    </Dialog>
+                  </div>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/admin/settings/components/settings-page.tsx b/apps/web/src/app/admin/settings/components/settings-page.tsx
new file mode 100644
index 0000000..6459219
--- /dev/null
+++ b/apps/web/src/app/admin/settings/components/settings-page.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import { useTRPC } from "~/server/client";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Button,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+} from "@repo/ui";
+import { CategorySettings } from "./category-settings";
+import { Loader2 } from "lucide-react";
+import type { SettingCategory } from "@repo/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { PageHeader } from "~/components/layout/page-header";
+
+// Array of all setting categories
+const CATEGORIES: SettingCategory[] = [
+  "general",
+  "auth",
+  "appearance",
+  "editor",
+  "search",
+  "advanced",
+];
+
+// Map of category names to display names
+const CATEGORY_NAMES: Record<SettingCategory, string> = {
+  general: "General",
+  auth: "Authentication",
+  appearance: "Appearance",
+  editor: "Editor",
+  search: "Search",
+  advanced: "Advanced",
+};
+
+// Map of category names to descriptions
+const CATEGORY_DESCRIPTIONS: Record<SettingCategory, string> = {
+  general: "Basic wiki settings like site name and description",
+  auth: "User authentication and registration settings",
+  appearance: "Visual appearance and theme settings",
+  editor: "Content editor behavior and defaults",
+  search: "Search functionality and performance",
+  advanced: "Advanced configuration and storage settings",
+};
+
+export function SettingsPage() {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
+  const [activeCategory, setActiveCategory] =
+    useState<SettingCategory>("general");
+  const { data: allSettings, isLoading: isLoadingAll } = useQuery(
+    trpc.admin.settings.getAll.queryOptions()
+  );
+
+  const getAllQueryKey = trpc.admin.settings.getAll.queryKey();
+
+  // Initialize settings when first loaded
+  const initializeSettings = useMutation(
+    trpc.admin.settings.initialize.mutationOptions({
+      onSuccess: () => {
+        // Refetch settings after initialization
+        queryClient.invalidateQueries({ queryKey: getAllQueryKey });
+      },
+    })
+  );
+
+  // Test if we have no settings yet
+  const noSettings =
+    !isLoadingAll && (!allSettings || Object.keys(allSettings).length === 0);
+
+  return (
+    <div className="container mx-auto space-y-6 py-6">
+      <PageHeader
+        title="Settings"
+        description="Manage system settings for your wiki"
+        action={
+          <Button
+            variant="outlined"
+            onClick={() => initializeSettings.mutate()}
+            disabled={initializeSettings.isPending || !noSettings}
+          >
+            {initializeSettings.isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Initializing...
+              </>
+            ) : (
+              "Initialize Default Settings"
+            )}
+          </Button>
+        }
+      />
+
+      {noSettings && (
+        <Alert variant="warning">
+          <AlertTitle>No settings found</AlertTitle>
+          <AlertDescription>
+            No settings have been initialized yet. Click the button above to
+            create the default settings.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader className="border-b pb-3">
+          <CardTitle>System Settings</CardTitle>
+          <CardDescription>Configure your wiki system settings</CardDescription>
+        </CardHeader>
+        <CardContent className="pt-6">
+          <Tabs
+            value={activeCategory}
+            onValueChange={(value) =>
+              setActiveCategory(value as SettingCategory)
+            }
+          >
+            <TabsList className="mb-6 grid grid-cols-3 gap-2 md:grid-cols-6">
+              {CATEGORIES.map((category) => (
+                <TabsTrigger key={category} value={category}>
+                  {CATEGORY_NAMES[category]}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+
+            {CATEGORIES.map((category) => (
+              <TabsContent key={category} value={category} className="pt-2">
+                <div className="mb-4">
+                  <h3 className="text-lg font-medium">
+                    {CATEGORY_NAMES[category]} Settings
+                  </h3>
+                  <p className="text-muted-foreground">
+                    {CATEGORY_DESCRIPTIONS[category]}
+                  </p>
+                </div>
+
+                <CategorySettings
+                  category={category}
+                  isLoading={isLoadingAll || noSettings}
+                />
+              </TabsContent>
+            ))}
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/admin/settings/page.tsx b/apps/web/src/app/admin/settings/page.tsx
new file mode 100644
index 0000000..dd2f946
--- /dev/null
+++ b/apps/web/src/app/admin/settings/page.tsx
@@ -0,0 +1,15 @@
+import { Metadata } from "next";
+import { SettingsPage } from "./components/settings-page";
+
+export const metadata: Metadata = {
+  title: "Settings | Admin | NextWiki",
+  description: "Manage system settings for NextWiki",
+};
+
+export default function AdminSettingsPage() {
+  return (
+    <div className="p-4">
+      <SettingsPage />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/auth/LoginForm.tsx b/apps/web/src/components/auth/LoginForm.tsx
index a06d778..9154bbf 100644
--- a/apps/web/src/components/auth/LoginForm.tsx
+++ b/apps/web/src/components/auth/LoginForm.tsx
@@ -7,6 +7,7 @@ import { signIn } from "next-auth/react";
 import { Alert, AlertDescription } from "@repo/ui";
 import { Button } from "@repo/ui";
 import { Input } from "@repo/ui";
+import { useSetting } from "~/lib/hooks/use-settings";
 
 // Create a separate component to read searchParams to work with Suspense
 function RegistrationSuccessMessage() {
@@ -32,6 +33,7 @@ export function LoginForm() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const { value: allowRegistration } = useSetting("auth.allowRegistration");
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -127,14 +129,16 @@ export function LoginForm() {
             Forgot your password?
           </Link>
         </div>
-        <div className="text-sm">
-          <Link
-            href="/register"
-            className="text-primary hover:text-primary/90 font-medium"
-          >
-            Create an account
-          </Link>
-        </div>
+        {allowRegistration && (
+          <div className="text-sm">
+            <Link
+              href="/register"
+              className="text-primary hover:text-primary/90 font-medium"
+            >
+              Create an account
+            </Link>
+          </div>
+        )}
       </div>
 
       <div className="mt-6">
diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index 91c41cb..b746aeb 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/apps/web/src/components/layout/Header.tsx
@@ -9,10 +9,18 @@ import Link from "next/link";
 import { WikiLockInfo } from "~/components/wiki/WikiLockInfo";
 import { MoveIcon, PencilIcon } from "lucide-react";
 import { ClientRequirePermission } from "~/components/auth/permission/client";
+import { getSettingValue } from "~/lib/utils/settings";
 
-export function Header({ pageMetadata }: { pageMetadata?: PageMetadata }) {
+export async function Header({
+  pageMetadata,
+}: {
+  pageMetadata?: PageMetadata;
+}) {
   const isHomePage = pageMetadata?.path === "index";
 
+  // Get site title from settings
+  const siteTitle = await getSettingValue("site.title");
+
   return (
     <header
       className={
@@ -45,7 +53,7 @@ export function Header({ pageMetadata }: { pageMetadata?: PageMetadata }) {
             <h1
               className={`font-medium ${isHomePage ? "text-text-primary text-xl" : "text-text-primary text-lg"}`}
             >
-              {pageMetadata.title}
+              {siteTitle}
             </h1>
           </div>
         )}
diff --git a/apps/web/src/components/layout/page-header.tsx b/apps/web/src/components/layout/page-header.tsx
new file mode 100644
index 0000000..dfa55b5
--- /dev/null
+++ b/apps/web/src/components/layout/page-header.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function PageHeader({ title, description, action }: PageHeaderProps) {
+  return (
+    <div className="mb-6 flex flex-wrap items-center justify-between gap-2">
+      <div>
+        <h1 className="text-text-primary text-2xl font-bold tracking-tight">
+          {title}
+        </h1>
+        {description && (
+          <p className="text-text-secondary mt-1">{description}</p>
+        )}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  );
+}
diff --git a/apps/web/src/lib/hooks/use-settings.ts b/apps/web/src/lib/hooks/use-settings.ts
new file mode 100644
index 0000000..46c6500
--- /dev/null
+++ b/apps/web/src/lib/hooks/use-settings.ts
@@ -0,0 +1,101 @@
+import { useTRPC } from "~/server/client";
+import type { SettingCategory, SettingKey, SettingValue } from "@repo/types";
+import { useQuery } from "@tanstack/react-query";
+
+/**
+ * Hook for accessing a single application setting
+ * @param key The setting key to retrieve
+ * @param options.fallback Optional fallback value if setting can't be loaded
+ * @returns The setting value, loading state, and error state
+ */
+export function useSetting<K extends SettingKey>(
+  key: K,
+  options: {
+    fallback?: SettingValue<K>;
+  } = {}
+) {
+  const trpc = useTRPC();
+  const { data, isLoading, error } = useQuery(
+    trpc.admin.settings.get.queryOptions(
+      { key },
+      {
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        refetchOnWindowFocus: false,
+      }
+    )
+  );
+
+  // Get either the loaded value, fallback, or null
+  const value = data
+    ? data.value
+    : options.fallback !== undefined
+      ? options.fallback
+      : null;
+
+  return {
+    value: value as SettingValue<K> | null,
+    isLoading,
+    error,
+  };
+}
+
+/**
+ * Hook for accessing multiple application settings
+ * @param keys Array of setting keys to retrieve
+ * @returns Object with all settings, loading state, and a method to refetch
+ */
+export function useSettings<K extends SettingKey>(keys: K[]) {
+  const trpc = useTRPC();
+  const {
+    data: allSettings,
+    isLoading,
+    refetch,
+  } = useQuery(
+    trpc.admin.settings.getAll.queryOptions(undefined, {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      refetchOnWindowFocus: false,
+    })
+  );
+
+  // Extract requested settings
+  const settings =
+    !isLoading && allSettings
+      ? keys.reduce(
+          (acc, key) => {
+            acc[key] = allSettings[key] as SettingValue<K>;
+            return acc;
+          },
+          {} as Record<K, SettingValue<K>>
+        )
+      : null;
+
+  return {
+    settings,
+    isLoading,
+    refetch,
+  };
+}
+
+/**
+ * Hook for getting settings within a specific category
+ * @param category The settings category to retrieve
+ * @returns Array of settings in the category, loading state, and error state
+ */
+export function useSettingsByCategory(category: string) {
+  const trpc = useTRPC();
+  const { data, isLoading, error } = useQuery(
+    trpc.admin.settings.getByCategory.queryOptions(
+      { category: category as SettingCategory },
+      {
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        refetchOnWindowFocus: false,
+      }
+    )
+  );
+
+  return {
+    settings: data || [],
+    isLoading,
+    error,
+  };
+}
diff --git a/apps/web/src/lib/services/settings.ts b/apps/web/src/lib/services/settings.ts
index a4507d4..01fd135 100644
--- a/apps/web/src/lib/services/settings.ts
+++ b/apps/web/src/lib/services/settings.ts
@@ -46,11 +46,7 @@ export async function getSettings<K extends SettingKey>(
 
   return keys.reduce(
     (acc, key, index) => {
-      // Ensure the result exists (it should due to getSetting defaults)
-      const result = results[index];
-      if (result !== undefined) {
-        acc[key] = result;
-      }
+      acc[key] = results[index] as SettingValue<K>;
       return acc;
     },
     {} as Record<K, SettingValue<K>>
@@ -69,7 +65,9 @@ export async function getAllSettings(): Promise<
 
   for (const setting of results) {
     const key = setting.key as SettingKey;
-    (settingsMap as any)[key] = setting.value as SettingValue<typeof key>;
+    // Type assertion still needed for the value from DB
+    // @ts-expect-error - TODO: fix this
+    settingsMap[key] = setting.value as SettingValue<typeof key>;
   }
 
   return settingsMap;
@@ -112,7 +110,7 @@ export async function updateSetting<K extends SettingKey>(
       .insert(settings)
       .values({
         key: key,
-        value: value,
+        value: value as any, // Type cast needed due to DB Jsonb vs specific types
         description: (await import("@repo/types")).DEFAULT_SETTINGS[key]
           .description,
         updatedAt: new Date(),
@@ -120,7 +118,7 @@ export async function updateSetting<K extends SettingKey>(
       .onConflictDoUpdate({
         target: settings.key,
         set: {
-          value: value,
+          value: value as any, // Type cast needed
           updatedAt: new Date(),
         },
       });
diff --git a/apps/web/src/lib/utils/settings.ts b/apps/web/src/lib/utils/settings.ts
new file mode 100644
index 0000000..2419b59
--- /dev/null
+++ b/apps/web/src/lib/utils/settings.ts
@@ -0,0 +1,83 @@
+import {
+  type SettingKey,
+  type SettingValue,
+  getDefaultSetting,
+} from "@repo/types";
+import { getSetting, getAllSettings } from "../services/settings";
+import { cache } from "react";
+
+/**
+ * Get a single setting value with caching for server components
+ * Falls back to default value if setting doesn't exist in database
+ *
+ * @param key The setting key to retrieve
+ * @returns The setting value
+ */
+export const getSettingValue = cache(
+  async <K extends SettingKey>(key: K): Promise<SettingValue<K>> => {
+    try {
+      return await getSetting(key);
+    } catch (error) {
+      console.error(`Error fetching setting "${key}":`, error);
+      return getDefaultSetting(key);
+    }
+  }
+);
+
+/**
+ * Get multiple setting values with caching for server components
+ * Falls back to default values for any settings that don't exist in database
+ *
+ * @param keys Array of setting keys to retrieve
+ * @returns Object with requested settings
+ */
+export const getSettingValues = cache(
+  async <K extends SettingKey>(
+    keys: K[]
+  ): Promise<Record<K, SettingValue<K>>> => {
+    try {
+      // Get all settings for efficiency
+      const allSettings = await getAllSettings();
+
+      // Create result object with values from database or defaults
+      return keys.reduce(
+        (acc, key) => {
+          // Use database value if available, otherwise use default
+          if (key in allSettings) {
+            acc[key] = allSettings[
+              key as keyof typeof allSettings
+            ] as SettingValue<K>;
+          } else {
+            acc[key] = getDefaultSetting(key);
+          }
+          return acc;
+        },
+        {} as Record<K, SettingValue<K>>
+      );
+    } catch (error) {
+      console.error(`Error fetching settings:`, error);
+
+      // Fall back to all defaults
+      return keys.reduce(
+        (acc, key) => {
+          acc[key] = getDefaultSetting(key);
+          return acc;
+        },
+        {} as Record<K, SettingValue<K>>
+      );
+    }
+  }
+);
+
+/**
+ * Example usage in a server component:
+ *
+ * export default async function Page() {
+ *   const siteTitle = await getSettingValue('site.title');
+ *   // or get multiple settings at once
+ *   const { 'site.title': title, 'site.description': description } =
+ *     await getSettingValues(['site.title', 'site.description']);
+ *
+ *   return <h1>{title}</h1>;
+ * }
+ */
diff --git a/apps/web/src/server/routers/admin/settings.ts b/apps/web/src/server/routers/admin/settings.ts
index ddb1bfd..63f574f 100644
--- a/apps/web/src/server/routers/admin/settings.ts
+++ b/apps/web/src/server/routers/admin/settings.ts
@@ -6,6 +6,7 @@ import {
   getSettingHistory,
   updateSetting,
   deleteSetting,
+  initializeDefaultSettings,
 } from "~/lib/services/settings";
 import { DEFAULT_SETTINGS, type SettingKey } from "@repo/types";
 
@@ -62,8 +63,7 @@ export const settingsRouter = router({
       const typedKey = key as SettingKey;
 
       // Validate the value matches the expected type
-      const settingDefinition = DEFAULT_SETTINGS[typedKey];
-      const expectedType = settingDefinition.type;
+      const expectedType = DEFAULT_SETTINGS[typedKey].type;
 
       // Simple type validation
       const valueType = typeof value;
@@ -71,12 +71,11 @@ export const settingsRouter = router({
         (expectedType === "string" && valueType !== "string") ||
         (expectedType === "number" && valueType !== "number") ||
         (expectedType === "boolean" && valueType !== "boolean") ||
-        // For select, check type and use includes with any cast
+        // For select, we need to check if the value is in the options
         (expectedType === "select" &&
           !(
-            valueType === "string" &&
-            settingDefinition.type === "select" &&
-            settingDefinition.options.includes(value as never)
+            "options" in DEFAULT_SETTINGS[typedKey] &&
+            (DEFAULT_SETTINGS[typedKey].options as string[]).includes(value)
           )) ||
         // For JSON, we need to check if it's an object
         (expectedType === "json" && (valueType !== "object" || value === null))
@@ -181,4 +180,14 @@ export const settingsRouter = router({
 
       return categorySettings;
     }),
+
+  /**
+   * Initialize default settings
+   */
+  initialize: permissionProtectedProcedure("system:settings:update").mutation(
+    async ({ ctx }) => {
+      await initializeDefaultSettings();
+      return { success: true };
+    }
+  ),
 });
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 4796fa8..ca760ad 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "bg-background-paper 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] border-border-default fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/dropdown.tsx b/packages/ui/src/components/dropdown.tsx
index 4ae1bd9..fa758d9 100644
--- a/packages/ui/src/components/dropdown.tsx
+++ b/packages/ui/src/components/dropdown.tsx
@@ -163,7 +163,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("bg-border -mx-1 my-1 h-px", className)}
+    className={cn("bg-border-default -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));

From 586b4e80ce05b922e4a0e63de9937f9126ad7a25 Mon Sep 17 00:00:00 2001
From: barisgit <baristovnik@gmail.com>
Date: Thu, 24 Apr 2025 01:51:19 +0200
Subject: [PATCH 8/8] Add build to types

---
 packages/types/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/types/package.json b/packages/types/package.json
index f1840df..f8d4790 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -15,6 +15,7 @@
   },
   "types": "./dist/index.d.ts",
   "scripts": {
+    "build": "tsc",
     "lint": "eslint . --max-warnings 0",
     "clean": "rm -rf dist .next",
     "fullclean": "rm -rf dist .next .turbo node_modules"