From cd9b89b69e39bf6721cdb7e0ee0b0d1c8b556ad5 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Thu, 24 Sep 2026 22:40:00 +0600
Subject: [PATCH] feat(admin): migrate panel to TSX and unify dashboard chrome

- Migrate admin pages from Vue SFCs to TypeScript TSX components and redesign.

- New resources/js/components/admin/ui.tsx: AdminPageHeader, SegmentedTabs, AdminSelect, sub-nav, buttons, lists, table shell; all 18 admin pages migrated.

- Fix invisible segmented active state in dark mode (gray-700 pill, no ring/glow); hover rows use spaced lists instead of divide+hover-pill outline clash.

- Dark-safe native selects (color-scheme + themed options); Bulk Rename into node header; boxed moderation table; mobile header-action wrapping.

- app.blade.php resolves the Inertia page entry by existing extension (.vue vs .tsx) so migrated pages load in production builds.
---
 resources/js/app.ts                           |   19 +
 .../js/components/admin/BulkImageModal.vue    |    6 +-
 .../js/components/admin/BulkRenameModal.vue   |    4 +-
 .../js/components/admin/BulkVideoModal.vue    |    2 +-
 .../js/components/admin/CreateNodeModal.vue   |    2 +-
 .../components/admin/CreateResourceModal.vue  |    2 +-
 .../components/admin/CreateSubjectModal.vue   |    4 +-
 resources/js/components/admin/NodeHeader.vue  |   42 +-
 resources/js/components/admin/NodeRow.vue     |    2 +-
 .../js/components/admin/NodeTabsHeader.vue    |   55 +-
 .../components/admin/PendingSubmissionRow.vue |   14 +-
 resources/js/components/admin/ResourceRow.vue |   16 +-
 .../components/admin/ReviewResourceModal.vue  |   12 +-
 resources/js/components/admin/SubjectCard.vue |    2 +-
 resources/js/components/admin/UserRow.vue     |   19 +-
 resources/js/components/admin/ui.tsx          |  423 ++++++
 .../js/components/navigation/Navigation.tsx   |   13 +-
 resources/js/layouts/AdminLayout.vue          |   22 +-
 resources/js/lib/adminFormGuard.ts            |   60 +
 resources/js/pages/admin/ChatSettings.tsx     | 1191 +++++++++++++++++
 resources/js/pages/admin/ChatSettings.vue     | 1069 ---------------
 resources/js/pages/admin/Dashboard.tsx        |  445 ++++++
 resources/js/pages/admin/Dashboard.vue        |  417 ------
 resources/js/pages/admin/EmailSend.tsx        | 1183 ++++++++++++++++
 resources/js/pages/admin/EmailSend.vue        | 1166 ----------------
 resources/js/pages/admin/Index.tsx            |  212 +++
 resources/js/pages/admin/Index.vue            |  155 ---
 resources/js/pages/admin/Node.tsx             |  485 +++++++
 resources/js/pages/admin/Node.vue             |  424 ------
 resources/js/pages/admin/NoticeEdit.tsx       |  479 +++++++
 resources/js/pages/admin/NoticeEdit.vue       |  376 ------
 resources/js/pages/admin/PeerSettings.tsx     |  303 +++++
 resources/js/pages/admin/PeerSettings.vue     |  356 -----
 resources/js/pages/admin/Tickets.tsx          |  633 +++++++++
 resources/js/pages/admin/Tickets.vue          |  633 ---------
 resources/js/pages/admin/chat/Reports.tsx     |  448 +++++++
 resources/js/pages/admin/chat/Reports.vue     |  548 --------
 resources/js/pages/admin/forums/Index.tsx     |  529 ++++++++
 resources/js/pages/admin/forums/Index.vue     |  482 -------
 resources/js/pages/admin/forums/Reports.tsx   |  486 +++++++
 resources/js/pages/admin/forums/Reports.vue   |  474 -------
 resources/js/pages/admin/forums/Settings.tsx  |  433 ++++++
 resources/js/pages/admin/forums/Settings.vue  |  330 -----
 .../js/pages/admin/moderation/Resources.vue   |    8 +-
 .../js/pages/admin/users/CreateOrEdit.tsx     |  759 +++++++++++
 .../js/pages/admin/users/CreateOrEdit.vue     |  651 ---------
 resources/js/pages/admin/users/Index.tsx      |  288 ++++
 resources/js/pages/admin/users/Index.vue      |  279 ----
 resources/views/app.blade.php                 |   12 +-
 49 files changed, 8510 insertions(+), 7463 deletions(-)
 create mode 100644 resources/js/components/admin/ui.tsx
 create mode 100644 resources/js/lib/adminFormGuard.ts
 create mode 100644 resources/js/pages/admin/ChatSettings.tsx
 delete mode 100644 resources/js/pages/admin/ChatSettings.vue
 create mode 100644 resources/js/pages/admin/Dashboard.tsx
 delete mode 100644 resources/js/pages/admin/Dashboard.vue
 create mode 100644 resources/js/pages/admin/EmailSend.tsx
 delete mode 100644 resources/js/pages/admin/EmailSend.vue
 create mode 100644 resources/js/pages/admin/Index.tsx
 delete mode 100644 resources/js/pages/admin/Index.vue
 create mode 100644 resources/js/pages/admin/Node.tsx
 delete mode 100644 resources/js/pages/admin/Node.vue
 create mode 100644 resources/js/pages/admin/NoticeEdit.tsx
 delete mode 100644 resources/js/pages/admin/NoticeEdit.vue
 create mode 100644 resources/js/pages/admin/PeerSettings.tsx
 delete mode 100644 resources/js/pages/admin/PeerSettings.vue
 create mode 100644 resources/js/pages/admin/Tickets.tsx
 delete mode 100644 resources/js/pages/admin/Tickets.vue
 create mode 100644 resources/js/pages/admin/chat/Reports.tsx
 delete mode 100644 resources/js/pages/admin/chat/Reports.vue
 create mode 100644 resources/js/pages/admin/forums/Index.tsx
 delete mode 100644 resources/js/pages/admin/forums/Index.vue
 create mode 100644 resources/js/pages/admin/forums/Reports.tsx
 delete mode 100644 resources/js/pages/admin/forums/Reports.vue
 create mode 100644 resources/js/pages/admin/forums/Settings.tsx
 delete mode 100644 resources/js/pages/admin/forums/Settings.vue
 create mode 100644 resources/js/pages/admin/users/CreateOrEdit.tsx
 delete mode 100644 resources/js/pages/admin/users/CreateOrEdit.vue
 create mode 100644 resources/js/pages/admin/users/Index.tsx
 delete mode 100644 resources/js/pages/admin/users/Index.vue

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 1bd2831f..12a20506 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -20,6 +20,25 @@ router.on('navigate', () => {
 
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
+    /**
+     * Loads a page by its path relative to pages/, preferring .vue over .tsx.
+     * Resolves to the default export, or the module if that export is nullish.
+     * Throws if neither entry exists; import failures reject the promise.
+     */
+    resolve: (name) => {
+        const pages = import.meta.glob('./pages/**/*.{vue,tsx}') as Record<
+            string,
+            () => Promise<{ default: unknown }>
+        >;
+        const loader =
+            pages[`./pages/${name}.vue`] ?? pages[`./pages/${name}.tsx`];
+
+        if (!loader) {
+            throw new Error(`Page not found: ${name}`);
+        }
+
+        return loader().then((module) => module.default ?? module);
+    },
     layout: (name) => {
         switch (true) {
             case name.startsWith('admin/'):
diff --git a/resources/js/components/admin/BulkImageModal.vue b/resources/js/components/admin/BulkImageModal.vue
index 07903f34..884fd95c 100644
--- a/resources/js/components/admin/BulkImageModal.vue
+++ b/resources/js/components/admin/BulkImageModal.vue
@@ -569,7 +569,7 @@ const submitForm = async () => {
             <!-- Compression Status Bar -->
             <div
                 v-if="isCompressing"
-                class="border-t border-slate-100 bg-indigo-50/70 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-indigo-950/30"
+                class="border-t border-slate-200/60 bg-indigo-50/70 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-indigo-950/30"
             >
                 <div
                     class="flex items-center gap-2 text-xs font-medium text-indigo-600 dark:text-indigo-400"
@@ -582,7 +582,7 @@ const submitForm = async () => {
             <!-- Upload Progress Bar -->
             <div
                 v-if="!isCompressing && isSaving && uploadProgress !== null"
-                class="border-t border-slate-100 bg-slate-50/80 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/80"
+                class="border-t border-slate-200/60 bg-slate-50/80 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-gray-900/80"
             >
                 <div class="mb-1.5 flex items-center justify-between text-xs">
                     <span
@@ -623,7 +623,7 @@ const submitForm = async () => {
 
             <!-- Footer -->
             <div
-                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                class="flex items-center justify-end gap-2 border-t border-slate-200/60 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-gray-900/60"
             >
                 <button
                     type="button"
diff --git a/resources/js/components/admin/BulkRenameModal.vue b/resources/js/components/admin/BulkRenameModal.vue
index 6bc4aa0b..51c4ea09 100644
--- a/resources/js/components/admin/BulkRenameModal.vue
+++ b/resources/js/components/admin/BulkRenameModal.vue
@@ -167,7 +167,7 @@ const handleSubmit = () => {
 
                 <!-- Before & After Preview Card -->
                 <div
-                    class="rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 dark:border-gray-800 dark:bg-gray-800/40"
+                    class="rounded-xl border border-slate-200 bg-slate-50/70 p-3.5 dark:border-slate-800/60 dark:bg-gray-800/40"
                 >
                     <div
                         class="mb-2.5 flex items-center justify-between text-[11px] font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
@@ -222,7 +222,7 @@ const handleSubmit = () => {
 
             <!-- Footer -->
             <div
-                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                class="flex items-center justify-end gap-2 border-t border-slate-200/60 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-gray-900/60"
             >
                 <button
                     type="button"
diff --git a/resources/js/components/admin/BulkVideoModal.vue b/resources/js/components/admin/BulkVideoModal.vue
index cba8cd3c..e1895f93 100644
--- a/resources/js/components/admin/BulkVideoModal.vue
+++ b/resources/js/components/admin/BulkVideoModal.vue
@@ -317,7 +317,7 @@ const submitForm = () => {
 
             <!-- Footer -->
             <div
-                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                class="flex items-center justify-end gap-2 border-t border-slate-200/60 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-gray-900/60"
             >
                 <button
                     type="button"
diff --git a/resources/js/components/admin/CreateNodeModal.vue b/resources/js/components/admin/CreateNodeModal.vue
index c287552e..e3775cd7 100644
--- a/resources/js/components/admin/CreateNodeModal.vue
+++ b/resources/js/components/admin/CreateNodeModal.vue
@@ -321,7 +321,7 @@ const submitForm = () => {
 
             <!-- Footer -->
             <div
-                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                class="flex items-center justify-end gap-2 border-t border-slate-200/60 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-gray-900/60"
             >
                 <button
                     type="button"
diff --git a/resources/js/components/admin/CreateResourceModal.vue b/resources/js/components/admin/CreateResourceModal.vue
index f37cbc84..2ef15d14 100644
--- a/resources/js/components/admin/CreateResourceModal.vue
+++ b/resources/js/components/admin/CreateResourceModal.vue
@@ -446,7 +446,7 @@ const submitForm = () => {
 
             <!-- Footer -->
             <div
-                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                class="flex items-center justify-end gap-2 border-t border-slate-200/60 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-gray-900/60"
             >
                 <button
                     type="button"
diff --git a/resources/js/components/admin/CreateSubjectModal.vue b/resources/js/components/admin/CreateSubjectModal.vue
index a26433dd..0b84e88d 100644
--- a/resources/js/components/admin/CreateSubjectModal.vue
+++ b/resources/js/components/admin/CreateSubjectModal.vue
@@ -351,7 +351,7 @@ const submitForm = () => {
                                 {{ name || 'Subject Name' }}
                             </h4>
                             <span
-                                class="py-0.2 inline-flex rounded px-1 text-[9px] font-bold uppercase"
+                                class="inline-flex rounded px-1 py-0.5 text-[9px] font-bold uppercase"
                                 :class="
                                     course === 'ssc'
                                         ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/60 dark:text-amber-300'
@@ -510,7 +510,7 @@ const submitForm = () => {
 
             <!-- Footer -->
             <div
-                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/60"
+                class="flex items-center justify-end gap-2 border-t border-slate-200/60 bg-slate-50/60 px-4 py-3 sm:px-6 dark:border-slate-800/60 dark:bg-gray-900/60"
             >
                 <button
                     type="button"
diff --git a/resources/js/components/admin/NodeHeader.vue b/resources/js/components/admin/NodeHeader.vue
index 67d4c991..6b6e1ebf 100644
--- a/resources/js/components/admin/NodeHeader.vue
+++ b/resources/js/components/admin/NodeHeader.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
 import {
-    ArrowLeft,
     ChevronDown,
     ChevronRight,
     FolderPlus,
@@ -16,7 +15,6 @@ defineProps<{
     subject: any;
     parent?: any | null;
     breadcrumbs: Array<{ name: string; link: string }>;
-    backUrl: string;
     isFrozen: boolean;
     isDirectlyFrozen: boolean;
     isInheritedFrozen: boolean;
@@ -55,7 +53,7 @@ onUnmounted(() => document.removeEventListener('click', closeDropdowns));
         <!-- Dedicated Breadcrumb Navigation Bar (Separate Row) -->
         <div
             v-if="breadcrumbs.length > 0"
-            class="mb-3.5 flex items-center rounded-xl bg-slate-50/80 px-3 py-2 text-xs font-medium text-slate-500 sm:text-sm dark:bg-gray-800/40 dark:text-gray-400"
+            class="mb-3.5 flex items-center rounded-xl bg-white/70 px-3 py-2 text-xs font-medium text-slate-500 ring-1 ring-slate-200/60 backdrop-blur-xl sm:text-sm dark:bg-slate-900/60 dark:text-gray-400 dark:ring-slate-800/60"
         >
             <nav
                 class="no-scrollbar flex min-w-0 flex-wrap items-center gap-1.5"
@@ -87,11 +85,11 @@ onUnmounted(() => document.removeEventListener('click', closeDropdowns));
         <!-- Freeze Notice Banner -->
         <div
             v-if="isFrozen"
-            class="mb-3.5 flex items-center gap-2.5 rounded-xl border px-3.5 py-2.5 text-xs font-medium"
+            class="mb-3.5 flex items-center gap-2.5 rounded-xl px-3.5 py-2.5 text-xs font-medium ring-1"
             :class="
                 isDirectlyFrozen
-                    ? 'border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-800/60 dark:bg-sky-950/40 dark:text-sky-300'
-                    : 'border-amber-200 bg-amber-50/80 text-amber-800 dark:border-amber-800/60 dark:bg-amber-950/40 dark:text-amber-300'
+                    ? 'bg-sky-50/80 text-sky-800 ring-sky-200/70 dark:bg-sky-500/10 dark:text-sky-300 dark:ring-sky-500/25'
+                    : 'bg-amber-50/80 text-amber-800 ring-amber-200/70 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-500/25'
             "
         >
             <Lock
@@ -114,38 +112,30 @@ onUnmounted(() => document.removeEventListener('click', closeDropdowns));
 
         <!-- Compact Page Title Bar -->
         <div
-            class="mb-3.5 flex shrink-0 items-center justify-between gap-2 border-b border-slate-100 pb-3 sm:gap-3 dark:border-gray-800"
+            class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200/60 pb-4 sm:gap-3 dark:border-slate-800/60"
         >
-            <div class="flex min-w-0 flex-1 items-center gap-2 sm:gap-2.5">
-                <Link
-                    :href="backUrl"
-                    class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-2xs transition-colors hover:bg-slate-50 hover:text-slate-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-                    title="Go back"
-                >
-                    <ArrowLeft class="h-4 w-4" :stroke-width="2.2" />
-                </Link>
-
-                <h3
-                    class="truncate text-sm font-bold tracking-tight text-slate-900 sm:text-base dark:text-gray-100"
+            <div class="flex min-w-0 flex-1 items-center sm:gap-2.5">
+                <h1
+                    class="truncate text-base font-bold tracking-tight text-slate-900 sm:text-lg dark:text-gray-100"
                 >
                     {{ parent?.name ? parent.name : subject.name }}
-                </h3>
+                </h1>
             </div>
 
-            <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
+            <div class="ms-auto flex items-center gap-1.5 sm:gap-2">
                 <!-- Toggle Freeze Button -->
                 <button
                     v-if="parent?.id && can('freeze nodes')"
                     type="button"
                     :disabled="isTogglingFreeze"
                     @click="emit('toggle-freeze')"
-                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-semibold shadow-2xs transition-colors disabled:opacity-50 sm:px-3"
+                    class="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-[10px] px-2.5 text-xs font-semibold ring-1 transition-colors duration-150 disabled:opacity-50 sm:px-3"
                     :class="
                         isDirectlyFrozen
-                            ? 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300 dark:hover:bg-emerald-900/50'
+                            ? 'bg-emerald-50/80 text-emerald-700 ring-emerald-300/60 hover:bg-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/20 dark:hover:bg-emerald-500/15'
                             : isInheritedFrozen
-                              ? 'border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950/50 dark:text-amber-300 dark:hover:bg-amber-900/50'
-                              : 'border-sky-200 bg-sky-50 text-sky-700 hover:bg-sky-100 dark:border-sky-800 dark:bg-sky-950/50 dark:text-sky-300 dark:hover:bg-sky-900/50'
+                              ? 'bg-amber-50/80 text-amber-700 ring-amber-300/60 hover:bg-amber-100 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-500/20 dark:hover:bg-amber-500/15'
+                              : 'bg-sky-50/80 text-sky-700 ring-sky-300/60 hover:bg-sky-100 dark:bg-sky-500/10 dark:text-sky-300 dark:ring-sky-500/20 dark:hover:bg-sky-500/15'
                     "
                     :title="
                         isDirectlyFrozen
@@ -179,7 +169,7 @@ onUnmounted(() => document.removeEventListener('click', closeDropdowns));
                     <button
                         type="button"
                         @click="isFolderDropdownOpen = !isFolderDropdownOpen"
-                        class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs transition-colors hover:bg-slate-50 sm:gap-1.5 sm:px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                        class="inline-flex h-8 cursor-pointer items-center gap-1 rounded-[10px] bg-white/70 px-2.5 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 sm:gap-1.5 sm:px-3 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85 dark:hover:text-gray-100"
                     >
                         <FolderPlus
                             class="h-3.5 w-3.5 text-slate-500 dark:text-gray-400"
@@ -194,7 +184,7 @@ onUnmounted(() => document.removeEventListener('click', closeDropdowns));
 
                     <div
                         v-if="isFolderDropdownOpen"
-                        class="absolute right-0 z-10 mt-1.5 w-44 rounded-xl border border-slate-100 bg-white p-1 shadow-lg dark:border-gray-800 dark:bg-gray-900"
+                        class="absolute right-0 z-10 mt-1.5 w-44 rounded-xl bg-white/90 p-1 shadow-lg ring-1 ring-slate-200/70 backdrop-blur-xl dark:bg-slate-900/90 dark:ring-slate-800/70"
                     >
                         <button
                             type="button"
diff --git a/resources/js/components/admin/NodeRow.vue b/resources/js/components/admin/NodeRow.vue
index 7a6406f5..60bdf50d 100644
--- a/resources/js/components/admin/NodeRow.vue
+++ b/resources/js/components/admin/NodeRow.vue
@@ -29,7 +29,7 @@ const handleDelete = () => {
 <template>
     <div
         @click="router.visit(`${$page.url}/${node?.slug}`)"
-        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-slate-100 bg-white p-3 transition-colors duration-150 hover:border-indigo-200 hover:bg-slate-50/50 sm:p-3.5 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/30 dark:hover:bg-gray-800/40"
+        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl bg-white/70 p-3 ring-1 ring-slate-200/60 backdrop-blur-xl transition-colors duration-150 hover:bg-white/85 hover:ring-indigo-300/70 sm:p-3.5 dark:bg-slate-900/60 dark:ring-slate-800/60 dark:hover:bg-slate-900/75 dark:hover:ring-indigo-500/40"
     >
         <!-- Left: Icon + Full Title -->
         <div class="flex min-w-0 flex-1 items-center gap-3">
diff --git a/resources/js/components/admin/NodeTabsHeader.vue b/resources/js/components/admin/NodeTabsHeader.vue
index 89349e27..09ed5eba 100644
--- a/resources/js/components/admin/NodeTabsHeader.vue
+++ b/resources/js/components/admin/NodeTabsHeader.vue
@@ -17,7 +17,7 @@ const emit = defineEmits<{
 
 <template>
     <div
-        class="flex flex-col gap-2 border-b border-slate-200 pb-2.5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
+        class="flex flex-col gap-2 border-b border-slate-200/60 pb-2.5 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800/60"
     >
         <!-- Horizontal Scrollable Tabs on Mobile -->
         <div
@@ -25,21 +25,22 @@ const emit = defineEmits<{
         >
             <button
                 type="button"
+                :aria-pressed="activeTab === 'live'"
                 @click="emit('change-tab', 'live')"
                 :class="[
                     activeTab === 'live'
-                        ? 'bg-slate-900 text-white shadow-2xs dark:bg-white dark:text-slate-900'
-                        : 'border border-slate-200 bg-white text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200',
+                        ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
+                        : 'text-slate-600 hover:bg-white/70 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
                 ]"
-                class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-semibold transition"
+                class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-xs font-semibold tracking-tight transition-colors duration-150"
             >
                 <span>Live</span>
                 <span
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-md px-1.5 py-0.5 text-[10px] font-bold"
                     :class="
                         activeTab === 'live'
-                            ? 'bg-white/20 text-white dark:bg-black/15 dark:text-slate-900'
-                            : 'bg-slate-100 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
+                            ? 'bg-indigo-100/80 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-200'
+                            : 'bg-slate-200/70 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
                     "
                 >
                     {{ liveCount }}
@@ -48,33 +49,34 @@ const emit = defineEmits<{
 
             <button
                 type="button"
+                :aria-pressed="activeTab === 'pending'"
                 @click="emit('change-tab', 'pending')"
                 :class="[
                     activeTab === 'pending'
-                        ? 'bg-amber-500 text-white shadow-2xs dark:bg-amber-500 dark:text-white'
-                        : 'border border-slate-200 bg-white text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200',
+                        ? 'bg-amber-50 text-amber-700 ring-1 ring-amber-300/60 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-500/20'
+                        : 'text-slate-600 hover:bg-white/70 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
                 ]"
-                class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-semibold transition"
+                class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-xs font-semibold tracking-tight transition-colors duration-150"
             >
                 <span>Pending</span>
                 <span
                     v-if="totalPendingCount > 0"
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-md px-1.5 py-0.5 text-[10px] font-bold"
                     :class="
                         activeTab === 'pending'
-                            ? 'bg-white/25 text-white'
-                            : 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300'
+                            ? 'bg-amber-100/80 text-amber-800 dark:bg-amber-500/20 dark:text-amber-200'
+                            : 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-400'
                     "
                 >
                     {{ totalPendingCount }}
                 </span>
                 <span
                     v-else
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-md px-1.5 py-0.5 text-[10px] font-bold"
                     :class="
                         activeTab === 'pending'
-                            ? 'bg-white/25 text-white'
-                            : 'bg-slate-100 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
+                            ? 'bg-amber-100/80 text-amber-800 dark:bg-amber-500/20 dark:text-amber-200'
+                            : 'bg-slate-200/70 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
                     "
                 >
                     0
@@ -83,33 +85,34 @@ const emit = defineEmits<{
 
             <button
                 type="button"
+                :aria-pressed="activeTab === 'rejected'"
                 @click="emit('change-tab', 'rejected')"
                 :class="[
                     activeTab === 'rejected'
-                        ? 'bg-rose-600 text-white shadow-2xs dark:bg-rose-600 dark:text-white'
-                        : 'border border-slate-200 bg-white text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200',
+                        ? 'bg-rose-50 text-rose-700 ring-1 ring-rose-200/60 dark:bg-rose-500/10 dark:text-rose-300 dark:ring-rose-500/20'
+                        : 'text-slate-600 hover:bg-white/70 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
                 ]"
-                class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-semibold transition"
+                class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-xs font-semibold tracking-tight transition-colors duration-150"
             >
                 <span>Rejected</span>
                 <span
                     v-if="totalRejectedCount > 0"
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-md px-1.5 py-0.5 text-[10px] font-bold"
                     :class="
                         activeTab === 'rejected'
-                            ? 'bg-white/25 text-white'
-                            : 'bg-rose-100 text-rose-800 dark:bg-rose-950/60 dark:text-rose-300'
+                            ? 'bg-rose-100/80 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200'
+                            : 'bg-rose-100 text-rose-800 dark:bg-rose-950/60 dark:text-rose-400'
                     "
                 >
                     {{ totalRejectedCount }}
                 </span>
                 <span
                     v-else
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-md px-1.5 py-0.5 text-[10px] font-bold"
                     :class="
                         activeTab === 'rejected'
-                            ? 'bg-white/25 text-white'
-                            : 'bg-slate-100 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
+                            ? 'bg-rose-100/80 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200'
+                            : 'bg-slate-200/70 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
                     "
                 >
                     0
@@ -125,7 +128,7 @@ const emit = defineEmits<{
             <button
                 type="button"
                 @click="emit('bulk-rename')"
-                class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-indigo-600 shadow-2xs transition hover:bg-indigo-50 hover:text-indigo-700 dark:border-gray-700 dark:bg-gray-800 dark:text-indigo-400 dark:hover:bg-indigo-950/40"
+                class="inline-flex h-8 cursor-pointer items-center gap-1 rounded-[10px] bg-white/70 px-2.5 text-xs font-semibold text-indigo-600 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-indigo-700 dark:bg-slate-900/60 dark:text-indigo-400 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
             >
                 <PencilLine class="h-3.5 w-3.5" />
                 <span>Bulk Rename</span>
diff --git a/resources/js/components/admin/PendingSubmissionRow.vue b/resources/js/components/admin/PendingSubmissionRow.vue
index def45031..7eda80c2 100644
--- a/resources/js/components/admin/PendingSubmissionRow.vue
+++ b/resources/js/components/admin/PendingSubmissionRow.vue
@@ -20,7 +20,7 @@ const { can } = usePermissions();
     <div
         v-if="status === 'pending'"
         @click="emit('preview', submission)"
-        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-amber-200/80 bg-amber-50/50 p-3 transition hover:border-amber-300 hover:bg-amber-50 sm:p-3.5 dark:border-amber-900/40 dark:bg-amber-950/20 dark:hover:border-amber-800/80"
+        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl bg-amber-50/60 p-3 ring-1 ring-amber-200/70 backdrop-blur-xl transition-colors duration-150 hover:bg-amber-50 sm:p-3.5 dark:bg-amber-500/10 dark:ring-amber-500/20 dark:hover:bg-amber-500/15 dark:hover:ring-amber-500/30"
     >
         <div class="flex min-w-0 flex-1 items-center gap-3">
             <div
@@ -37,7 +37,7 @@ const { can } = usePermissions();
                 </h3>
 
                 <span
-                    class="inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-800 dark:bg-amber-500/20 dark:text-amber-300"
+                    class="inline-flex items-center gap-1 rounded-md bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-800 dark:bg-amber-500/20 dark:text-amber-300"
                 >
                     New Upload Pending
                 </span>
@@ -55,7 +55,7 @@ const { can } = usePermissions();
             <button
                 type="button"
                 @click.stop="emit('preview', submission)"
-                class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700 shadow-2xs hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                class="inline-flex h-7 cursor-pointer items-center gap-1 rounded-[10px] bg-white/70 px-2.5 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
             >
                 <Eye class="h-3.5 w-3.5 text-slate-500" />
                 <span>Preview</span>
@@ -65,7 +65,7 @@ const { can } = usePermissions();
                 v-if="can('moderate resources')"
                 href="/admin/moderation/resources"
                 @click.stop
-                class="inline-flex cursor-pointer items-center rounded-lg border border-amber-300 bg-white px-2.5 py-1 text-xs font-semibold text-amber-800 shadow-2xs hover:bg-amber-50 dark:border-amber-800 dark:bg-gray-900 dark:text-amber-300 dark:hover:bg-gray-800"
+                class="inline-flex h-7 cursor-pointer items-center gap-1 rounded-[10px] bg-amber-50/80 px-2.5 text-xs font-semibold text-amber-800 ring-1 ring-amber-300/60 backdrop-blur transition-colors hover:bg-amber-100/80 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-500/25 dark:hover:bg-amber-500/15"
             >
                 Review in Queue
             </Link>
@@ -76,7 +76,7 @@ const { can } = usePermissions();
     <div
         v-else-if="status === 'rejected'"
         @click="emit('preview', submission)"
-        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-rose-200/80 bg-rose-50/50 p-3 transition hover:border-rose-300 hover:bg-rose-50 sm:p-3.5 dark:border-rose-900/40 dark:bg-rose-950/20 dark:hover:border-rose-800/80"
+        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl bg-rose-50/60 p-3 ring-1 ring-rose-200/70 backdrop-blur-xl transition-colors duration-150 hover:bg-rose-50 sm:p-3.5 dark:bg-rose-500/10 dark:ring-rose-500/20 dark:hover:bg-rose-500/15 dark:hover:ring-rose-500/30"
     >
         <div class="flex min-w-0 flex-1 items-center gap-3">
             <div
@@ -95,7 +95,7 @@ const { can } = usePermissions();
                 </h3>
 
                 <span
-                    class="inline-flex items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 dark:bg-rose-500/20 dark:text-rose-300"
+                    class="inline-flex items-center gap-1 rounded-md bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 dark:bg-rose-500/20 dark:text-rose-300"
                 >
                     Upload Rejected
                 </span>
@@ -113,7 +113,7 @@ const { can } = usePermissions();
             <button
                 type="button"
                 @click.stop="emit('preview', submission)"
-                class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700 shadow-2xs hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                class="inline-flex h-7 cursor-pointer items-center gap-1 rounded-[10px] bg-white/70 px-2.5 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
             >
                 <Eye class="h-3.5 w-3.5 text-slate-500" />
                 <span>Feedback</span>
diff --git a/resources/js/components/admin/ResourceRow.vue b/resources/js/components/admin/ResourceRow.vue
index 2fc654ee..a21522f8 100644
--- a/resources/js/components/admin/ResourceRow.vue
+++ b/resources/js/components/admin/ResourceRow.vue
@@ -75,7 +75,7 @@ const handleDelete = () => {
 <template>
     <div
         @click="router.visit(`/resources/${resource?.id}`)"
-        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-slate-100 bg-white p-3 transition-colors duration-150 hover:border-amber-200 hover:bg-slate-50/50 sm:p-3.5 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-amber-500/30 dark:hover:bg-gray-800/40"
+        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl bg-white/70 p-3 ring-1 ring-slate-200/60 backdrop-blur-xl transition-colors duration-150 hover:bg-white/85 hover:ring-amber-300/70 sm:p-3.5 dark:bg-slate-900/60 dark:ring-slate-800/60 dark:hover:bg-slate-900/75 dark:hover:ring-amber-500/40"
     >
         <!-- Left: Resource Icon + Full Title -->
         <div class="flex min-w-0 flex-1 items-center gap-3">
@@ -110,7 +110,7 @@ const handleDelete = () => {
 
                 <!-- Resource Type Badge -->
                 <span
-                    class="inline-flex items-center rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold text-amber-700 uppercase ring-1 ring-amber-600/20 ring-inset dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30"
+                    class="inline-flex items-center rounded-md bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold text-amber-700 uppercase ring-1 ring-amber-600/20 ring-inset dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30"
                 >
                     {{ resource?.resource_type }}
                 </span>
@@ -126,7 +126,7 @@ const handleDelete = () => {
                             resource,
                         )
                     "
-                    class="inline-flex cursor-pointer items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-800 transition hover:bg-amber-200 dark:bg-amber-500/20 dark:text-amber-300 dark:hover:bg-amber-500/30"
+                    class="inline-flex cursor-pointer items-center gap-1 rounded-md bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-800 transition hover:bg-amber-200 dark:bg-amber-500/20 dark:text-amber-300 dark:hover:bg-amber-500/30"
                     title="View proposed changes"
                 >
                     <Eye class="h-3 w-3" />
@@ -142,7 +142,7 @@ const handleDelete = () => {
                             resource,
                         )
                     "
-                    class="inline-flex cursor-pointer items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 transition hover:bg-rose-200 dark:bg-rose-500/20 dark:text-rose-300 dark:hover:bg-rose-500/30"
+                    class="inline-flex cursor-pointer items-center gap-1 rounded-md bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 transition hover:bg-rose-200 dark:bg-rose-500/20 dark:text-rose-300 dark:hover:bg-rose-500/30"
                     title="View deletion request"
                 >
                     <Eye class="h-3 w-3" />
@@ -160,7 +160,7 @@ const handleDelete = () => {
                             resource,
                         )
                     "
-                    class="inline-flex cursor-pointer items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 transition hover:bg-rose-200 dark:bg-rose-500/20 dark:text-rose-300 dark:hover:bg-rose-500/30"
+                    class="inline-flex cursor-pointer items-center gap-1 rounded-md bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 transition hover:bg-rose-200 dark:bg-rose-500/20 dark:text-rose-300 dark:hover:bg-rose-500/30"
                     title="View rejected edit feedback"
                 >
                     <AlertCircle
@@ -178,7 +178,7 @@ const handleDelete = () => {
                             resource,
                         )
                     "
-                    class="inline-flex cursor-pointer items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 transition hover:bg-rose-200 dark:bg-rose-500/20 dark:text-rose-300 dark:hover:bg-rose-500/30"
+                    class="inline-flex cursor-pointer items-center gap-1 rounded-md bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-800 transition hover:bg-rose-200 dark:bg-rose-500/20 dark:text-rose-300 dark:hover:bg-rose-500/30"
                     title="View rejected deletion feedback"
                 >
                     <AlertCircle
@@ -205,7 +205,7 @@ const handleDelete = () => {
                         resource,
                     )
                 "
-                class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                class="inline-flex h-7 cursor-pointer items-center gap-1 rounded-[10px] bg-white/70 px-2.5 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
             >
                 <Eye class="h-3.5 w-3.5 text-slate-500 dark:text-gray-400" />
                 <span>Preview</span>
@@ -221,7 +221,7 @@ const handleDelete = () => {
                         resource,
                     )
                 "
-                class="inline-flex cursor-pointer items-center gap-1 rounded-lg border border-rose-200 bg-rose-50/60 px-2.5 py-1 text-xs font-semibold text-rose-700 shadow-2xs transition hover:bg-rose-100/80 dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-300 dark:hover:bg-rose-900/60"
+                class="inline-flex h-7 cursor-pointer items-center gap-1 rounded-[10px] bg-rose-50/80 px-2.5 text-xs font-semibold text-rose-700 ring-1 ring-rose-200/70 backdrop-blur transition-colors hover:bg-rose-100/80 dark:bg-rose-500/10 dark:text-rose-300 dark:ring-rose-500/25 dark:hover:bg-rose-500/15"
             >
                 <AlertCircle
                     class="h-3.5 w-3.5 text-rose-600 dark:text-rose-400"
diff --git a/resources/js/components/admin/ReviewResourceModal.vue b/resources/js/components/admin/ReviewResourceModal.vue
index 116e5fef..35b5f3df 100644
--- a/resources/js/components/admin/ReviewResourceModal.vue
+++ b/resources/js/components/admin/ReviewResourceModal.vue
@@ -250,7 +250,7 @@ const getChangedFields = (req: ChangeRequest): ChangedField[] => {
         <div v-if="request" class="space-y-4 p-4 sm:p-6">
             <!-- Modal Header Meta (Location, Submitter, Live Link) -->
             <div
-                class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-3 text-xs text-slate-500 dark:border-gray-800 dark:text-gray-400"
+                class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200/60 pb-3 text-xs text-slate-500 dark:border-slate-800/60 dark:text-gray-400"
             >
                 <div
                     v-if="getNodeBreadcrumbs(request.node).length > 0"
@@ -351,7 +351,7 @@ const getChangedFields = (req: ChangeRequest): ChangedField[] => {
                 <!-- External URL -->
                 <div
                     v-if="request.payload?.external_url"
-                    class="flex items-center gap-2 rounded-xl border border-slate-200/80 bg-slate-50/50 px-3.5 py-2.5 text-xs text-slate-600 dark:border-gray-800 dark:bg-gray-800/40 dark:text-gray-300"
+                    class="flex items-center gap-2 rounded-xl border border-slate-200/80 bg-slate-50/50 px-3.5 py-2.5 text-xs text-slate-600 dark:border-slate-800/60 dark:bg-gray-800/40 dark:text-gray-300"
                 >
                     <ExternalLink
                         class="h-3.5 w-3.5 shrink-0 text-slate-400 dark:text-gray-500"
@@ -371,7 +371,7 @@ const getChangedFields = (req: ChangeRequest): ChangedField[] => {
                 <!-- Staged Uploaded File -->
                 <div
                     v-if="request.staged_file_url"
-                    class="rounded-xl border border-slate-200/80 bg-slate-50/50 p-2.5 dark:border-gray-800 dark:bg-gray-800/30"
+                    class="rounded-xl border border-slate-200/80 bg-slate-50/50 p-2.5 dark:border-slate-800/60 dark:bg-gray-800/30"
                 >
                     <img
                         v-if="request.payload?.resource_type === 'image'"
@@ -423,16 +423,16 @@ const getChangedFields = (req: ChangeRequest): ChangedField[] => {
                     <div
                         v-for="change in getChangedFields(request)"
                         :key="`modal-diff-${change.key}`"
-                        class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900"
+                        class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xs dark:border-slate-800/60 dark:bg-gray-900"
                     >
                         <div
-                            class="border-b border-slate-100 bg-slate-50 px-3.5 py-1.5 text-[11px] font-bold text-slate-700 dark:border-gray-800 dark:bg-gray-800/60 dark:text-gray-300"
+                            class="border-b border-slate-200/60 bg-slate-50 px-3.5 py-1.5 text-[11px] font-bold text-slate-700 dark:border-slate-800/60 dark:bg-gray-800/60 dark:text-gray-300"
                         >
                             {{ change.label }}
                         </div>
 
                         <div
-                            class="grid grid-cols-1 divide-y divide-slate-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0 dark:divide-gray-800"
+                            class="grid grid-cols-1 divide-y divide-slate-200/60 sm:grid-cols-2 sm:divide-x sm:divide-y-0 dark:divide-gray-800"
                         >
                             <!-- Before -->
                             <div class="bg-slate-50/40 p-3 dark:bg-gray-900/30">
diff --git a/resources/js/components/admin/SubjectCard.vue b/resources/js/components/admin/SubjectCard.vue
index 87646bdf..2e28560a 100644
--- a/resources/js/components/admin/SubjectCard.vue
+++ b/resources/js/components/admin/SubjectCard.vue
@@ -24,7 +24,7 @@ const handleDelete = () => {
 <template>
     <div
         @click="router.visit(`/admin/subjects/${subject.slug}/nodes`)"
-        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-slate-100 bg-white p-3 transition-colors duration-150 hover:border-indigo-200 hover:bg-slate-50/50 sm:p-3.5 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/30 dark:hover:bg-gray-800/40"
+        class="group relative flex cursor-pointer items-center justify-between gap-3 rounded-xl bg-white/70 p-3 ring-1 ring-slate-200/60 backdrop-blur-xl transition-colors duration-150 hover:bg-white/85 hover:ring-indigo-300/70 sm:p-3.5 dark:bg-slate-900/60 dark:ring-slate-800/60 dark:hover:bg-slate-900/75 dark:hover:ring-indigo-500/40"
     >
         <!-- Left: Icon + Subject Details (Full title, no ellipsis) -->
         <div class="flex min-w-0 flex-1 items-center gap-3">
diff --git a/resources/js/components/admin/UserRow.vue b/resources/js/components/admin/UserRow.vue
index 37f7c3e3..55b67417 100644
--- a/resources/js/components/admin/UserRow.vue
+++ b/resources/js/components/admin/UserRow.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, router, usePage } from '@inertiajs/vue3';
-import { LogIn, Pencil, Trash2, Ban, Mail } from 'lucide-vue-next';
+import { LogIn, Mail, Pencil, Trash2, Ban } from 'lucide-vue-next';
 import { ref } from 'vue';
 import BaseModal from '@/components/BaseModal.vue';
 import ChatBanModal from '@/components/ChatBanModal.vue';
@@ -48,6 +48,10 @@ const openDeleteModal = () => {
     isDeleteModalOpen.value = true;
 };
 
+/**
+ * Wipes the account and all associated data immediately; a farewell
+ * notification email is sent when the user has an address on file.
+ */
 const handleHardDelete = (id: number) => {
     if (
         confirm(
@@ -59,6 +63,11 @@ const handleHardDelete = (id: number) => {
     }
 };
 
+/**
+ * Emails the user a 7-day signed authorization link; the user confirms and
+ * deletes the account themselves. `onFinish` closes the modal even when the
+ * request fails so the choice modal never blocks retrying.
+ */
 const handleSendDeleteLink = (id: number) => {
     if (
         !confirm(
@@ -84,10 +93,10 @@ const handleSendDeleteLink = (id: number) => {
 
 <template>
     <div
-        class="group relative flex items-center justify-between gap-3 rounded-xl border border-slate-100 bg-white p-3 transition-colors duration-150 hover:border-indigo-200 hover:bg-slate-50/50 sm:p-3.5 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/30 dark:hover:bg-gray-800/40"
+        class="group relative flex items-center justify-between gap-3 rounded-xl bg-white/70 p-3 ring-1 ring-slate-200/60 backdrop-blur-xl transition-colors duration-150 hover:bg-white/85 hover:ring-indigo-300/70 sm:p-3.5 dark:bg-slate-900/60 dark:ring-slate-800/60 dark:hover:bg-slate-900/75 dark:hover:ring-indigo-500/40"
         :class="[
             user.id === userId
-                ? 'ring-1 ring-indigo-500/20 dark:ring-indigo-500/30'
+                ? '!ring-indigo-500/25 dark:!ring-indigo-500/35'
                 : '',
         ]"
     >
@@ -120,7 +129,7 @@ const handleSendDeleteLink = (id: number) => {
 
                     <span
                         v-if="user.id === userId"
-                        class="inline-flex items-center rounded bg-indigo-50 px-1.5 py-0.5 text-[10px] font-bold text-indigo-700 uppercase dark:bg-indigo-500/10 dark:text-indigo-400"
+                        class="inline-flex items-center rounded-md bg-indigo-50 px-1.5 py-0.5 text-[10px] font-bold text-indigo-700 uppercase dark:bg-indigo-500/10 dark:text-indigo-400"
                     >
                         You
                     </span>
@@ -228,7 +237,7 @@ const handleSendDeleteLink = (id: number) => {
             @close="isBanModalOpen = false"
         />
 
-        <!-- Account Deletion Action Modal -->
+        <!-- Account Deletion Choice Modal -->
         <BaseModal
             :is-open="isDeleteModalOpen"
             title="Delete User Account"
diff --git a/resources/js/components/admin/ui.tsx b/resources/js/components/admin/ui.tsx
new file mode 100644
index 00000000..4e60903b
--- /dev/null
+++ b/resources/js/components/admin/ui.tsx
@@ -0,0 +1,423 @@
+/**
+ * Shared admin UI primitives.
+ *
+ * Single source of truth for the admin dashboard's repeated chrome:
+ * page shell, headers, buttons, icon buttons, segmented filter tabs,
+ * dark-safe native selects, list rows and badges. Pages should compose
+ * these instead of re-declaring the same 200-char class strings so a
+ * visual fix (e.g. dark-mode contrast) lands everywhere at once.
+ */
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+
+/* ------------------------------------------------------------------ */
+/* Page shell + header                                                 */
+/* ------------------------------------------------------------------ */
+
+/** Root container every admin page renders. One content width, one
+ * vertical rhythm: every page centers at max-w-7xl and stacks its
+ * sections with the same space-y-6 gap. */
+export const adminPageClass =
+    'mx-auto flex w-full max-w-7xl flex-col space-y-6';
+
+/**
+ * Shared glass surface tokens, taken from the site's unified SideRail:
+ * translucent white over a blur, hairline rings instead of opaque
+ * borders, and content that floats on the atmospheric background.
+ * Every admin surface composes these instead of re-inventing them.
+ */
+export const adminSurfaceClass =
+    'rounded-2xl bg-white/70 ring-1 ring-slate-200/60 backdrop-blur-xl dark:bg-slate-900/60 dark:ring-slate-800/60';
+
+export const adminSurfaceHoverClass =
+    'hover:bg-white/85 dark:hover:bg-slate-900/75';
+
+export const adminHairlineClass =
+    'border-slate-200/60 dark:border-slate-800/60';
+
+/**
+ * Standard page header row: title block left, actions right, hairline
+ * below. Keeps header height/rhythm identical across pages so client
+ * navigation doesn't shift layout.
+ */
+export const adminPageHeaderClass =
+    'flex flex-col gap-3 border-b border-slate-200/60 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800/60';
+
+export const adminPageTitleClass =
+    'truncate text-base font-bold tracking-tight text-slate-900 sm:text-lg dark:text-gray-100';
+
+export const adminPageDescriptionClass =
+    'mt-0.5 text-xs text-slate-500 dark:text-gray-400';
+
+/**
+ * Uppercase section kicker (h2 "Recipients", "Access", ...). Every page
+ * uses this token so label size/color never drift between pages.
+ */
+export const adminSectionTitleClass =
+    'text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400';
+
+/**
+ * The one glass panel for form-style pages (EmailSend, NoticeEdit,
+ * settings, user form): a page renders its form inside a single panel;
+ * interior grouping uses hairlines + whitespace, never nested cards.
+ */
+export const adminPanelClass =
+    'rounded-2xl bg-white/70 p-5 ring-1 ring-slate-200/60 backdrop-blur-xl sm:p-7 dark:bg-slate-900/60 dark:ring-slate-800/60';
+
+/**
+ * Single-line form field (text/select). Solid background on purpose —
+ * fields sit on a glass panel and stay readable. One radius, height,
+ * text size and focus treatment for every admin form.
+ */
+export const adminInputClass =
+    'h-9 w-full rounded-[10px] border border-slate-200 bg-white px-3 text-xs text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 disabled:bg-slate-50 disabled:text-slate-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:disabled:bg-gray-800 dark:disabled:text-gray-400 dark:[color-scheme:dark]';
+
+/**
+ * Multi-line form field (textarea). Same vocabulary as inputs, but
+ * natural height with `py-2` and relaxed leading for long content.
+ * Width/extra classes are appended by callers (`w-16`, `pl-8`, ...);
+ * don't strip the base classes — strip the string and re-declare with
+ * the same colors instead.
+ */
+export const adminTextareaClass =
+    'w-full rounded-[10px] border border-slate-200 bg-white px-3 py-2 text-xs leading-relaxed text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 disabled:bg-slate-50 disabled:text-slate-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:disabled:bg-gray-800 dark:disabled:text-gray-400 dark:[color-scheme:dark]';
+
+export const AdminPageHeader = defineComponent({
+    name: 'AdminPageHeader',
+    props: {
+        title: { type: String, required: true },
+        /** Number/count badge shown next to the title. */
+        count: {
+            type: [Number, String] as PropType<number | string>,
+            default: undefined,
+        },
+        /** Small badge variant. */
+        countTone: {
+            type: String as PropType<'indigo' | 'amber' | 'rose'>,
+            default: 'indigo',
+        },
+        description: { type: String, default: '' },
+    },
+    setup(props, { slots }) {
+        const badgeClass =
+            props.countTone === 'amber'
+                ? 'bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 ring-inset dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30'
+                : props.countTone === 'rose'
+                  ? 'bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 ring-inset dark:bg-rose-500/10 dark:text-rose-400 dark:ring-rose-500/30'
+                  : 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/20 ring-inset dark:bg-indigo-500/10 dark:text-indigo-400 dark:ring-indigo-500/30';
+
+        return () => (
+            <div class={adminPageHeaderClass}>
+                <div class="min-w-0">
+                    <div class="flex items-center gap-2">
+                        <h1 class={adminPageTitleClass}>{props.title}</h1>
+                        {props.count !== undefined && (
+                            <span
+                                class={[
+                                    'inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-bold',
+                                    badgeClass,
+                                ]}
+                            >
+                                {props.count}
+                            </span>
+                        )}
+                    </div>
+                    {props.description && (
+                        <p class={adminPageDescriptionClass}>
+                            {props.description}
+                        </p>
+                    )}
+                </div>
+                {slots.actions && (
+                    <div class="flex shrink-0 flex-wrap items-center gap-2">
+                        {slots.actions()}
+                    </div>
+                )}
+            </div>
+        );
+    },
+});
+
+/* ------------------------------------------------------------------ */
+/* Buttons                                                             */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Buttons match the site language: solid indigo CTAs, glass secondary
+ * chips (`rounded-[10px]`, translucent, hairline ring) like the nav.
+ */
+
+/** Primary action (solid indigo chip). */
+export const adminPrimaryBtnClass =
+    'inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-[10px] bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-xs transition-colors hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600';
+
+/** Secondary action (glass chip). */
+export const adminSecondaryBtnClass =
+    'inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-[10px] bg-white/70 px-2.5 py-1.5 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur-xl transition-colors hover:bg-white/90 hover:text-slate-900 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85 dark:hover:text-gray-100';
+
+/** Ghost icon-only action (neutral). */
+export const adminIconBtnClass =
+    'flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300';
+
+/** Ghost icon-only action (danger). */
+export const adminDangerIconBtnClass =
+    'flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-gray-500 dark:hover:bg-rose-500/10 dark:hover:text-rose-400';
+
+/* ------------------------------------------------------------------ */
+/* Small text buttons (row-level actions like Resolve / Dismiss)       */
+/* ------------------------------------------------------------------ */
+
+const adminTextBtnBase =
+    'inline-flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs font-semibold transition focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95';
+
+/** Small danger text button (Suspend, Clear all). */
+export const adminDangerTextBtnClass = `${adminTextBtnBase} text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/10`;
+
+/** Small success text button (Resolve). */
+export const adminSuccessTextBtnClass = `${adminTextBtnBase} text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-500/10`;
+
+/** Small muted text button (Dismiss). */
+export const adminMutedTextBtnClass = `${adminTextBtnBase} text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200`;
+
+/* ------------------------------------------------------------------ */
+/* Sub-navigation (Discussions / Reports / Settings switcher)          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Horizontal sub-nav container used under forum/chat headers. Glass
+ * chips using the rail's indigo-wash active state.
+ */
+export const adminSubNavClass =
+    'no-scrollbar flex max-w-full items-center gap-1.5 overflow-x-auto';
+
+/** Returns base sub-navigation link classes plus active or idle styling. */
+export function adminSubNavLinkClass(isActive: boolean): string[] {
+    return [
+        'flex shrink-0 cursor-pointer items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-xs font-semibold tracking-tight transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95',
+        isActive
+            ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
+            : 'text-slate-600 hover:bg-white/70 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
+    ];
+}
+
+/**
+ * Count badge inside a sub-nav chip or pill surface.
+ */
+export const adminSubNavBadgeClass =
+    'rounded-full bg-rose-500 px-1.5 py-0.5 text-[10px] leading-none font-bold text-white shadow-xs';
+
+/* ------------------------------------------------------------------ */
+/* Segmented filter tabs                                               */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Chip container behind a segmented filter control. Plain flex row —
+ * glass chips don't need a recessed track.
+ */
+export const adminSegmentedClass =
+    'flex max-w-full flex-wrap items-center gap-1.5';
+
+/**
+ * One segmented tab (glass chip). Active = the SideRail's indigo wash
+ * (`bg-indigo-50` + hairline indigo ring); idle = translucent hover,
+ * identical to the rail's expanded nav items.
+ */
+export const adminSegmentedActiveClass =
+    'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20';
+
+export const adminSegmentedIdleClass =
+    'text-slate-600 hover:bg-white/70 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100';
+
+/** Returns base segmented-tab classes plus active or idle styling. */
+export function adminSegmentedTabClass(isActive: boolean): string[] {
+    return [
+        'inline-flex cursor-pointer items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-xs font-semibold tracking-tight transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95',
+        isActive ? adminSegmentedActiveClass : adminSegmentedIdleClass,
+    ];
+}
+
+export interface AdminTabOption {
+    value: string;
+    label: string;
+    icon?: unknown;
+    /** Small count pill rendered after the label. */
+    badge?: string | number;
+}
+
+export const SegmentedTabs = defineComponent({
+    name: 'SegmentedTabs',
+    props: {
+        tabs: { type: Array as PropType<AdminTabOption[]>, required: true },
+        active: { type: String, required: true },
+    },
+    emits: ['select'],
+    setup(props, { emit }) {
+        return () => (
+            <div class={adminSegmentedClass}>
+                {props.tabs.map((tab) => {
+                    const Icon = tab.icon as
+                        | (new (...args: unknown[]) => unknown)
+                        | undefined;
+                    const isActive = props.active === tab.value;
+
+                    return (
+                        <button
+                            key={tab.value}
+                            type="button"
+                            aria-pressed={isActive}
+                            onClick={() => emit('select', tab.value)}
+                            class={[
+                                ...adminSegmentedTabClass(isActive),
+                                Icon || tab.badge !== undefined
+                                    ? 'inline-flex items-center gap-1.5'
+                                    : '',
+                            ]}
+                        >
+                            {Icon && (
+                                <Icon class="h-3.5 w-3.5" aria-hidden="true" />
+                            )}
+                            <span>{tab.label}</span>
+                            {tab.badge !== undefined && (
+                                <span
+                                    class={[
+                                        'rounded-md px-1.5 py-0.5 text-[10px] font-bold',
+                                        isActive
+                                            ? 'bg-indigo-100/80 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-200'
+                                            : 'bg-slate-200/70 text-slate-600 dark:bg-gray-800 dark:text-gray-400',
+                                    ]}
+                                >
+                                    {tab.badge}
+                                </span>
+                            )}
+                        </button>
+                    );
+                })}
+            </div>
+        );
+    },
+});
+
+/* ------------------------------------------------------------------ */
+/* Native select (dark-safe)                                           */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Base classes for native `<select>` elements — glass chips matching
+ * the rail's translucent surfaces. `dark:[color-scheme:dark]`
+ * is what makes the OS-rendered dropdown list dark; option elements get
+ * explicit light/dark colors via `adminOptionClass` since browsers
+ * otherwise inherit the page's (light) default for the popup.
+ */
+export const adminSelectClass =
+    'h-8 cursor-pointer rounded-[10px] bg-white/70 px-2.5 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur-xl transition-colors outline-none hover:bg-white/90 focus:ring-2 focus:ring-indigo-500/30 active:scale-95 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85 dark:[color-scheme:dark]';
+
+export const adminOptionClass =
+    'bg-white text-slate-900 dark:bg-gray-900 dark:text-gray-100';
+
+/**
+ * Add to any other native `<select>` (e.g. full-width form selects that
+ * keep their own input styling) so the OS-rendered dropdown list follows
+ * the dark theme. Pair with `adminOptionClass` on each `<option>`.
+ */
+export const adminNativePopupClass = 'dark:[color-scheme:dark]';
+
+export const AdminSelect = defineComponent({
+    name: 'AdminSelect',
+    inheritAttrs: false,
+    props: {
+        /** Extra classes merged after the base (e.g. status tinting). */
+        toneClass: {
+            type: [String, Array, Object] as PropType<
+                string | string[] | Record<string, boolean>
+            >,
+            default: '',
+        },
+    },
+    emits: ['change'],
+    setup(props, { slots, attrs, emit }) {
+        return () => {
+            // `class` merges separately below so it lands after the base.
+            const { class: callerClass, ...rest } = attrs;
+
+            return (
+                <select
+                    {...rest}
+                    onChange={(e: Event) => emit('change', e)}
+                    class={[adminSelectClass, props.toneClass, callerClass]}
+                >
+                    {slots.default?.()}
+                </select>
+            );
+        };
+    },
+});
+
+/* ------------------------------------------------------------------ */
+/* Lists                                                               */
+/* ------------------------------------------------------------------ */
+
+/** Hairline-separated vertical list container (static rows, no hover). */
+export const adminListClass =
+    'divide-y divide-slate-200/60 dark:divide-slate-800/60';
+
+/**
+ * Spaced list container for rows with a hover state. Rows are floating
+ * glass cards, spaced like the node browser: gap-2.5 on mobile,
+ * gap-3 on sm.
+ */
+export const adminHoverListClass = 'flex flex-col gap-2.5 sm:gap-3';
+
+/**
+ * Glass list card — the standard row treatment inside glass lists:
+ * translucent fill, hairline ring, and on hover the surface brightens
+ * with a tinted ring (indigo), mirroring the SideRail's active/hover.
+ * `tone` selects the hover ring color so amber-toned surfaces (e.g.
+ * resource moderation rows) keep their semantic signal.
+ */
+/**
+ * Glass list card — the standard row treatment inside glass lists:
+ * translucent fill, hairline ring, and on hover the surface brightens
+ * with a tinted ring (indigo), mirroring the SideRail's active/hover.
+ * `tone` selects the hover ring color so amber-toned surfaces (e.g.
+ * resource moderation rows) keep their semantic signal. Alignment is
+ * left to callers so top-aligned rows can override `items-center`
+ * without two conflicting alignment classes in one list.
+ */
+export function adminCardRowClass(
+    tone: 'indigo' | 'amber' = 'indigo',
+): string[] {
+    return [
+        // No `cursor-pointer` here: callers are Links/buttons that supply
+        // their own cursor; non-interactive rows (e.g. reports) shouldn't
+        // advertise clickability.
+        'group flex gap-3 rounded-xl bg-white/70 p-3 ring-1 ring-slate-200/60 backdrop-blur-xl transition-all duration-150 hover:bg-white/85 sm:p-3.5 dark:bg-slate-900/60 dark:ring-slate-800/60 dark:hover:bg-slate-900/75',
+        tone === 'amber'
+            ? 'hover:ring-amber-300/70 dark:hover:ring-amber-500/40'
+            : 'hover:ring-indigo-300/70 dark:hover:ring-indigo-500/40',
+    ];
+}
+
+/** Default indigo tone kept as a constant for one-off rows. */
+export const adminRowClass = [
+    ...adminCardRowClass('indigo'),
+    'items-center',
+].join(' ');
+
+/* ------------------------------------------------------------------ */
+/* Misc                                                                */
+/* ------------------------------------------------------------------ */
+
+/** Search input with leading icon slot space (pl-8) — glass field. */
+export const adminSearchInputClass =
+    'h-9 w-full rounded-[10px] bg-white/70 pr-3 pl-8 text-xs text-slate-900 ring-1 ring-slate-200/60 backdrop-blur-xl transition outline-none placeholder:text-slate-400 hover:bg-white/90 focus:ring-2 focus:ring-indigo-500/30 dark:bg-slate-900/60 dark:text-gray-100 dark:ring-slate-800/60 dark:placeholder:text-gray-500 dark:hover:bg-slate-900/85 dark:[color-scheme:dark]';
+
+/** Table head shared by admin data tables — faint glass tint strip. */
+export const adminTableHeadClass =
+    'border-b border-slate-200/60 bg-white/50 text-[11px] font-bold text-slate-500 uppercase dark:border-slate-800/60 dark:bg-white/[0.03] dark:text-gray-400';
+
+/**
+ * Glass box wrapping an admin data table: translucent surface + hairline
+ * ring so the table reads as one floating unit. Corner rounding on the
+ * edge cells keeps the header/row tint inside the radius.
+ */
+export const adminTableWrapClass = `${adminSurfaceClass} overflow-x-auto`;
diff --git a/resources/js/components/navigation/Navigation.tsx b/resources/js/components/navigation/Navigation.tsx
index e52efc1a..5c66c7bc 100644
--- a/resources/js/components/navigation/Navigation.tsx
+++ b/resources/js/components/navigation/Navigation.tsx
@@ -80,9 +80,20 @@ function preferredHomeHref(currentUrl: string): string {
     return currentUrl.startsWith('/ssc') ? '/ssc' : '/';
 }
 
+/**
+ * Matches /admin against the dashboard, its query string, and all subpages.
+ * Other destinations use a plain URL prefix match.
+ */
 function isActiveAdminRoute(to: string, currentUrl: string): boolean {
     if (to === '/admin') {
-        return currentUrl === '/admin' || currentUrl.startsWith('/admin?');
+        // Highlight the admin rail entry for every admin surface
+        // (e.g. /admin/users, /admin/tickets?status=open) so users on a
+        // deep admin page still see which section they're in.
+        return (
+            currentUrl === '/admin' ||
+            currentUrl.startsWith('/admin/') ||
+            currentUrl.startsWith('/admin?')
+        );
     }
 
     return currentUrl.startsWith(to);
diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index 57ad218a..9f2a8b4b 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
 import { ArrowLeft } from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import AtmosphericBackground from '@/components/AtmosphericBackground.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
@@ -11,9 +11,12 @@ import {
     SiteRail as SideRail,
 } from '@/components/navigation/Navigation';
 import ToastNotification from '@/components/ToastNotification.vue';
+import { installAdminFormGuard } from '@/lib/adminFormGuard';
 import { useBreakpoint } from '@/lib/useBreakpoint';
 import { useOrientation } from '@/lib/useOrientation';
 
+onMounted(() => installAdminFormGuard());
+
 const page = usePage();
 const isDashboard = computed(() => {
     const url = String(page.url);
@@ -93,19 +96,24 @@ const drawerOpen = ref(false);
                     ]"
                 >
                     <!-- Top back button on admin sub-pages -->
-                    <div v-if="!isDashboard" class="mb-3.5">
+                    <div v-if="!isDashboard" class="mb-5">
                         <Link
                             href="/admin"
-                            class="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
+                            class="inline-flex items-center gap-1.5 rounded-full bg-white/60 px-3 py-1.5 text-xs font-semibold text-slate-500 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-indigo-600 dark:bg-slate-900/50 dark:text-gray-400 dark:ring-slate-800/60 dark:hover:bg-slate-900/80 dark:hover:text-indigo-400"
                         >
-                            <ArrowLeft class="h-4 w-4" />
+                            <ArrowLeft class="h-3.5 w-3.5" />
                             <span>Back to Dashboard</span>
                         </Link>
                     </div>
 
-                    <div
-                        class="flex w-full flex-1 flex-col rounded-2xl border border-slate-200/90 bg-white p-4.5 shadow-2xs sm:p-7 md:p-8 dark:border-gray-800 dark:bg-gray-900"
-                    >
+                    <!--
+                        Pages render directly on the atmospheric background.
+                        There is deliberately no wrapper card here: surfaces
+                        are provided by each page's own glass sections, one
+                        level deep, so the admin floats like the rest of the
+                        site instead of sitting in an opaque box.
+                    -->
+                    <div class="flex w-full flex-1 flex-col">
                         <slot />
                     </div>
                 </main>
diff --git a/resources/js/lib/adminFormGuard.ts b/resources/js/lib/adminFormGuard.ts
new file mode 100644
index 00000000..be7b1ac6
--- /dev/null
+++ b/resources/js/lib/adminFormGuard.ts
@@ -0,0 +1,60 @@
+import { router } from '@inertiajs/vue3';
+
+/**
+ * Layout-level unsaved-changes guard for admin form pages.
+ *
+ * AdminLayout installs the Inertia listeners once; form pages only report
+ * their dirty state via `markAdminFormDirty` (and call it again with `false`
+ * on unmount so browser Back leaves no stale flag behind).
+ *
+ * - GET visits (links, pagination, sub-nav) are prompted while dirty; a
+ *   declined confirm cancels the visit but keeps the flag. The flag is only
+ *   cleared on a *successful* navigation (`navigate`) or unmount — so a
+ *   failed visit never leaves editable unsaved data unprotected.
+ * - Non-GET visits (form `post`/`patch` submits, row `delete`s) pass
+ *   through: saving the form you just filled must not require consent to
+ *   "discard" it.
+ */
+let isDirty = false;
+let installed = false;
+
+/** Replaces the shared dirty flag the admin navigation guard reads. */
+export function markAdminFormDirty(value: boolean): void {
+    isDirty = value;
+}
+
+/**
+ * Installs the Inertia listeners once; repeated calls have no effect.
+ * While dirty, GET visits (links, sub-nav, pagination) require confirmation;
+ * declining cancels the visit and keeps the flag, so the form stays
+ * protected. Non-GET visits (form posts/deletes) always pass through. The
+ * flag clears on a successful navigation, never at confirm time. Direct
+ * browser back/hard reloads are not guarded.
+ */
+export function installAdminFormGuard(): void {
+    if (installed) {
+        return;
+    }
+
+    installed = true;
+
+    router.on('before', (visit) => {
+        if (
+            !isDirty ||
+            !visit ||
+            String(visit.method).toLowerCase() !== 'get'
+        ) {
+            return true;
+        }
+
+        return window.confirm(
+            'You have unsaved changes. Leave this page without saving?',
+        );
+    });
+
+    // Successful departure (including browser-back visits Inertia handles):
+    // whatever page is mounted now is a fresh one.
+    router.on('navigate', () => {
+        isDirty = false;
+    });
+}
diff --git a/resources/js/pages/admin/ChatSettings.tsx b/resources/js/pages/admin/ChatSettings.tsx
new file mode 100644
index 00000000..51e5c4fa
--- /dev/null
+++ b/resources/js/pages/admin/ChatSettings.tsx
@@ -0,0 +1,1191 @@
+/**
+ * AdminChatSettings — TSX port of the former `ChatSettings.vue`.
+ *
+ * Same UI/behavior as the SFC (flat, decardified), rewritten as
+ * a `.tsx` `defineComponent` render function. Resolved via the explicit
+ * dual-extension (`*.vue` + `*.tsx`) page resolver in `resources/js/app.ts`.
+ */
+import { Head, Link, router, useForm } from '@inertiajs/vue3';
+import {
+    Activity,
+    Bot,
+    Clock,
+    Flag,
+    Gavel,
+    Loader2,
+    MessageCircle,
+    Plus,
+    RotateCcw,
+    Save,
+    ShieldAlert,
+    SlidersHorizontal,
+    Smile,
+    Trash2,
+    Users,
+    X,
+} from 'lucide-vue-next';
+import { defineComponent, onUnmounted, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminListClass,
+    adminPanelClass,
+    adminPageClass,
+    adminSectionTitleClass,
+    adminSegmentedActiveClass,
+    adminSegmentedIdleClass,
+    adminSubNavBadgeClass,
+    adminSubNavClass,
+    adminSubNavLinkClass,
+} from '@/components/admin/ui';
+import { markAdminFormDirty } from '@/lib/adminFormGuard';
+
+type ChatAudience = 'verified_members' | 'all' | 'disabled';
+
+interface ChatSettings {
+    enabled: boolean;
+    audience: ChatAudience;
+    disabled_reason?: string;
+    cooldown_seconds: number;
+    max_messages: number;
+    max_length: number;
+    profanity_filter_enabled: boolean;
+    banned_words: string;
+    allowed_emojis?: string[];
+    bot_username?: string;
+    auto_ban_enabled: boolean;
+    auto_ban_threshold: number;
+    auto_ban_duration_minutes: number;
+}
+
+interface PresetOption {
+    label: string;
+    value: number;
+}
+
+interface AudienceOption {
+    label: string;
+    value: ChatAudience;
+    description: string;
+}
+
+export default defineComponent({
+    name: 'AdminChatSettings',
+    props: {
+        settings: { type: Object as PropType<ChatSettings>, required: true },
+        totalMessages: { type: Number as PropType<number>, required: true },
+        recentMessagesCount: {
+            type: Number as PropType<number>,
+            required: true,
+        },
+        pendingReportsCount: {
+            type: Number as PropType<number>,
+            default: undefined,
+        },
+    },
+    setup(props) {
+        const defaultReactionEmojis: string[] = [
+            '👍',
+            '❤️',
+            '🔥',
+            '😂',
+            '🎉',
+            '😮',
+            '😢',
+            '👏',
+        ];
+        const popularReactionEmojis: string[] = [
+            '👍',
+            '❤️',
+            '🔥',
+            '😂',
+            '🎉',
+            '😮',
+            '😢',
+            '👏',
+            '🚀',
+            '💯',
+            '👀',
+            '🙏',
+            '💡',
+            '✨',
+            '🤝',
+            '🥳',
+        ];
+
+        const newEmojiInput = ref<string>('');
+
+        const form = useForm({
+            enabled: props.settings.enabled,
+            audience: props.settings.audience as ChatAudience,
+            disabled_reason: props.settings.disabled_reason ?? '',
+            cooldown_seconds: props.settings.cooldown_seconds,
+            max_messages: props.settings.max_messages ?? 200,
+            max_length: props.settings.max_length ?? 280,
+            profanity_filter_enabled:
+                props.settings.profanity_filter_enabled ?? true,
+            banned_words: props.settings.banned_words ?? '',
+            allowed_emojis:
+                props.settings.allowed_emojis &&
+                props.settings.allowed_emojis.length > 0
+                    ? [...props.settings.allowed_emojis]
+                    : [...defaultReactionEmojis],
+            bot_username: props.settings.bot_username ?? 'hscstack',
+            auto_ban_enabled: props.settings.auto_ban_enabled ?? true,
+            auto_ban_threshold: props.settings.auto_ban_threshold ?? 5,
+            auto_ban_duration_minutes:
+                props.settings.auto_ban_duration_minutes ?? 1440,
+        });
+
+        watch(
+            () => form.isDirty,
+            (v) => markAdminFormDirty(v),
+        );
+
+        onUnmounted(() => markAdminFormDirty(false));
+
+        /**
+         * Adds a trimmed, nonempty reaction unless it is already allowed.
+         * A missing or empty argument uses the input. A nonempty trimmed
+         * value clears the input, including when it is a duplicate.
+         */
+        const addEmoji = (emojiToAdd?: string): void => {
+            const emoji = (emojiToAdd || newEmojiInput.value).trim();
+
+            if (!emoji) {
+                return;
+            }
+
+            if (!form.allowed_emojis.includes(emoji)) {
+                form.allowed_emojis.push(emoji);
+            }
+
+            newEmojiInput.value = '';
+        };
+
+        const removeEmoji = (index: number): void => {
+            form.allowed_emojis.splice(index, 1);
+        };
+
+        const resetDefaultEmojis = (): void => {
+            form.allowed_emojis = [...defaultReactionEmojis];
+        };
+
+        const submitSettings = (): void => {
+            form.post('/admin/chat/settings', {
+                preserveScroll: true,
+            });
+        };
+
+        const handleClearMessages = (): void => {
+            if (
+                confirm(
+                    'Are you sure you want to permanently clear all global chat messages? This action cannot be undone.',
+                )
+            ) {
+                router.post('/admin/chat/clear', {}, { preserveScroll: true });
+            }
+        };
+
+        const cooldownPresets: PresetOption[] = [
+            { label: 'No Delay (0s)', value: 0 },
+            { label: '15 Seconds', value: 15 },
+            { label: '30 Seconds (Default)', value: 30 },
+            { label: '1 Minute (60s)', value: 60 },
+            { label: '2 Minutes (120s)', value: 120 },
+            { label: '5 Minutes (300s)', value: 300 },
+        ];
+
+        const messageLimitPresets: PresetOption[] = [
+            { label: '50 Messages', value: 50 },
+            { label: '100 Messages', value: 100 },
+            { label: '200 Messages (Default)', value: 200 },
+            { label: '500 Messages', value: 500 },
+            { label: '1000 Messages', value: 1000 },
+        ];
+
+        const lengthPresets: PresetOption[] = [
+            { label: '140 Characters', value: 140 },
+            { label: '280 Characters (Default)', value: 280 },
+            { label: '500 Characters', value: 500 },
+            { label: '1000 Characters', value: 1000 },
+        ];
+
+        const reportThresholdPresets: PresetOption[] = [
+            { label: '3 Reports', value: 3 },
+            { label: '5 Reports (Default)', value: 5 },
+            { label: '10 Reports', value: 10 },
+            { label: '15 Reports', value: 15 },
+        ];
+
+        const banDurationPresets: PresetOption[] = [
+            { label: '5 Mins', value: 5 },
+            { label: '15 Mins', value: 15 },
+            { label: '1 Hour', value: 60 },
+            { label: '24 Hours (Default)', value: 1440 },
+            { label: '3 Days', value: 4320 },
+            { label: '7 Days', value: 10080 },
+        ];
+
+        const audienceOptions: AudienceOption[] = [
+            {
+                label: 'Verified Members',
+                value: 'verified_members',
+                description:
+                    'Only contributors, editors, and verified students can post. (Default Beta)',
+            },
+            {
+                label: 'Everyone',
+                value: 'all',
+                description:
+                    'Any authenticated student can send messages. (All Students)',
+            },
+            {
+                label: 'Disabled',
+                value: 'disabled',
+                description:
+                    'Posting is locked for everyone during maintenance or exams. (Read-Only)',
+            },
+        ];
+
+        /**
+         * Formats minutes as whole days or hours when evenly divisible,
+         * otherwise as minutes. Nonpositive or falsy values yield "0 minutes".
+         */
+        const formatDurationText = (minutes: number): string => {
+            if (!minutes || minutes <= 0) {
+                return '0 minutes';
+            }
+
+            if (minutes >= 1440 && minutes % 1440 === 0) {
+                const days = minutes / 1440;
+
+                return `${days} day${days > 1 ? 's' : ''}`;
+            }
+
+            if (minutes >= 60 && minutes % 60 === 0) {
+                const hours = minutes / 60;
+
+                return `${hours} hour${hours > 1 ? 's' : ''}`;
+            }
+
+            return `${minutes} minute${minutes > 1 ? 's' : ''}`;
+        };
+
+        // One consistent pill style shared by every numeric preset group.
+        const presetButtonClass = (isActive: boolean): string =>
+            isActive
+                ? 'inline-flex h-8 cursor-pointer items-center rounded-[10px] bg-indigo-50 px-3 text-[11px] font-semibold text-indigo-700 ring-1 ring-indigo-200/60 transition-colors hover:bg-indigo-100/80 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:bg-indigo-500/15 dark:text-indigo-300 dark:ring-indigo-500/30 dark:hover:bg-indigo-500/25'
+                : 'inline-flex h-8 cursor-pointer items-center rounded-[10px] bg-white/70 px-3 text-[11px] font-semibold text-slate-600 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85';
+
+        const customNumberInputClass =
+            'h-9 w-24 rounded-[10px] border border-slate-200 bg-white px-3 text-center text-xs font-semibold text-slate-900 transition-colors [appearance:textfield] outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-indigo-400 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none';
+
+        return () => (
+            <>
+                <Head title="Global Chat Settings - Staff Panel" />
+
+                <div class={adminPageClass}>
+                    {/* Header */}
+                    <AdminPageHeader
+                        title="Global Chat Management"
+                        description="Manage realtime student lounge access, rate limits, cooldown intervals, and moderation."
+                    >
+                        {{
+                            actions: () => (
+                                /* Chat Live Indicator Badge */
+                                <span
+                                    class={[
+                                        'inline-flex items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-xs font-semibold',
+                                        form.audience !== 'disabled'
+                                            ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300'
+                                            : 'bg-rose-50 text-rose-700 dark:bg-rose-950/60 dark:text-rose-300',
+                                    ]}
+                                >
+                                    <span
+                                        class={[
+                                            'h-2 w-2 rounded-full',
+                                            form.audience !== 'disabled'
+                                                ? 'animate-pulse bg-emerald-500'
+                                                : 'bg-rose-500',
+                                        ]}
+                                    ></span>
+                                    {form.audience !== 'disabled'
+                                        ? 'Chat Live'
+                                        : 'Chat Inactive'}
+                                </span>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Global Chat Management Route Tabs */}
+                    <nav class={adminSubNavClass}>
+                        <Link
+                            href="/admin/chat"
+                            class={adminSubNavLinkClass(true)}
+                        >
+                            <MessageCircle class="h-4 w-4" />
+                            <span>Chat Configuration</span>
+                        </Link>
+
+                        <Link
+                            href="/admin/chat/reports"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            <Flag class="h-4 w-4 text-rose-500" />
+                            <span>Reported Messages</span>
+                            {(props.pendingReportsCount ?? 0) > 0 && (
+                                <span class={adminSubNavBadgeClass}>
+                                    {props.pendingReportsCount}
+                                </span>
+                            )}
+                        </Link>
+                    </nav>
+
+                    {/* Metric Statistics */}
+                    <div class="mx-auto max-w-4xl overflow-hidden rounded-2xl bg-white/70 ring-1 ring-slate-200/60 backdrop-blur-xl dark:bg-slate-900/60 dark:ring-slate-800/60">
+                        <div class={adminListClass}>
+                            <div class="flex items-center justify-between gap-3 px-3 py-2.5">
+                                <div class="flex items-center gap-2.5">
+                                    <MessageCircle class="h-4 w-4 shrink-0 text-indigo-500" />
+                                    <div>
+                                        <p class="text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                            Stored Messages
+                                        </p>
+                                        <span class="text-[11px] text-slate-500 dark:text-gray-400">
+                                            Auto-pruning maintains max{' '}
+                                            {form.max_messages}
+                                        </span>
+                                    </div>
+                                </div>
+                                <p class="text-xl font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                    {props.totalMessages}
+                                </p>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-3 px-3 py-2.5">
+                                <div class="flex items-center gap-2.5">
+                                    <Activity class="h-4 w-4 shrink-0 text-emerald-500" />
+                                    <div>
+                                        <p class="text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                            Activity (Last 24h)
+                                        </p>
+                                        <span class="text-[11px] text-slate-500 dark:text-gray-400">
+                                            Messages sent today
+                                        </span>
+                                    </div>
+                                </div>
+                                <p class="text-xl font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                    {props.recentMessagesCount}
+                                </p>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-3 px-3 py-2.5">
+                                <div class="flex items-center gap-2.5">
+                                    <Clock class="h-4 w-4 shrink-0 text-amber-500" />
+                                    <div>
+                                        <p class="text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                            Current Cooldown
+                                        </p>
+                                        <span class="text-[11px] text-slate-500 dark:text-gray-400">
+                                            Interval per student
+                                        </span>
+                                    </div>
+                                </div>
+                                <p class="text-xl font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                    {form.cooldown_seconds}s
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Settings Form */}
+                    <form
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            submitSettings();
+                        }}
+                        class={[adminPanelClass, 'mx-auto max-w-4xl space-y-8']}
+                    >
+                        {/* Group 1 — Access */}
+                        <section aria-label="Access">
+                            <h2
+                                class={[
+                                    adminSectionTitleClass,
+                                    'flex items-center gap-2',
+                                ]}
+                            >
+                                <Users class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400" />
+                                Access
+                            </h2>
+                            <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                Choose who is permitted to send messages in the
+                                student lounge, or pause posting.
+                            </p>
+
+                            {/* Audience segmented control */}
+                            <div
+                                role="group"
+                                aria-label="Chat audience"
+                                class="mt-3 inline-flex flex-wrap items-center gap-1.5"
+                            >
+                                {audienceOptions.map((option) => {
+                                    const isActive =
+                                        form.audience === option.value;
+                                    const isDisabledOption =
+                                        option.value === 'disabled';
+
+                                    return (
+                                        <button
+                                            key={option.value}
+                                            type="button"
+                                            aria-pressed={isActive}
+                                            onClick={() => {
+                                                form.audience = option.value;
+                                            }}
+                                            class={[
+                                                'inline-flex cursor-pointer items-center justify-center rounded-[10px] px-3 py-1.5 text-[11px] leading-tight font-semibold tracking-tight transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 sm:text-xs',
+                                                isActive
+                                                    ? isDisabledOption
+                                                        ? 'bg-rose-50 text-rose-700 ring-1 ring-rose-200/60 dark:bg-rose-500/10 dark:text-rose-300 dark:ring-rose-500/20'
+                                                        : adminSegmentedActiveClass
+                                                    : adminSegmentedIdleClass,
+                                            ]}
+                                        >
+                                            {option.label}
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                            <p class="mt-2 text-[11px] text-slate-500 dark:text-gray-400">
+                                {
+                                    audienceOptions.find(
+                                        (option) =>
+                                            option.value === form.audience,
+                                    )?.description
+                                }
+                            </p>
+
+                            {/* Custom Disabled / Maintenance Notice Input */}
+                            {form.audience === 'disabled' && (
+                                <div class="mt-3 border-t border-slate-200/60 pt-3 dark:border-slate-800/60">
+                                    <label class="block text-[11px] font-semibold text-rose-700 dark:text-rose-300">
+                                        Custom Notice Message for Students
+                                        (Optional):
+                                    </label>
+                                    <input
+                                        value={form.disabled_reason}
+                                        onInput={(e) => {
+                                            form.disabled_reason = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        type="text"
+                                        placeholder="e.g. Chat is temporarily paused during HSC ICT exam. Will resume at 4:00 PM."
+                                        class="mt-1.5 w-full rounded-[10px] border border-rose-200 bg-white px-3 py-2 text-xs text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/30 dark:border-rose-800/80 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-rose-400"
+                                    />
+                                    <p class="mt-1 text-[11px] text-rose-700/80 dark:text-rose-400/80">
+                                        Leave blank to show the default notice:{' '}
+                                        <em>
+                                            "Global chat is currently disabled
+                                            for maintenance."
+                                        </em>
+                                    </p>
+                                </div>
+                            )}
+                        </section>
+
+                        {/* Group 2 — Limits & Safety */}
+                        <section aria-label="Limits and safety">
+                            <h2
+                                class={[
+                                    adminSectionTitleClass,
+                                    'flex items-center gap-2',
+                                ]}
+                            >
+                                <SlidersHorizontal class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400" />
+                                Limits & Safety
+                            </h2>
+                            <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                Rate limits, content filters, and automated
+                                moderation.
+                            </p>
+
+                            <div class={adminListClass}>
+                                {/* Cooldown Interval / Rate Limit Configuration */}
+                                <div class="px-3 py-4">
+                                    <label class="flex items-center gap-2 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                        <Clock class="h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                                        Message Cooldown Interval (Anti-Spam)
+                                    </label>
+                                    <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                        Specify how many seconds a student must
+                                        wait before they can send another
+                                        message.
+                                    </p>
+
+                                    {/* Quick Preset Buttons */}
+                                    <div class="mt-2.5 flex flex-wrap gap-1.5">
+                                        {cooldownPresets.map((preset) => (
+                                            <button
+                                                key={preset.value}
+                                                type="button"
+                                                onClick={() => {
+                                                    form.cooldown_seconds =
+                                                        preset.value;
+                                                }}
+                                                class={presetButtonClass(
+                                                    form.cooldown_seconds ===
+                                                        preset.value,
+                                                )}
+                                            >
+                                                {preset.label}
+                                            </button>
+                                        ))}
+                                    </div>
+
+                                    {/* Custom Interval Input */}
+                                    <div class="mt-2.5 flex flex-wrap items-center gap-2">
+                                        <label class="text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                            Custom Interval (Seconds):
+                                        </label>
+                                        <input
+                                            value={form.cooldown_seconds}
+                                            onInput={(e) => {
+                                                form.cooldown_seconds = Number(
+                                                    (
+                                                        e.target as HTMLInputElement
+                                                    ).value,
+                                                );
+                                            }}
+                                            type="number"
+                                            min="0"
+                                            max="3600"
+                                            class={customNumberInputClass}
+                                        />
+                                        <span class="text-[11px] text-slate-400 dark:text-gray-500">
+                                            seconds
+                                        </span>
+                                    </div>
+                                </div>
+
+                                {/* Message Retention Buffer (Rolling Limit) */}
+                                <div class="px-3 py-4">
+                                    <label class="flex items-center gap-2 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                        <MessageCircle class="h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                                        Rolling Message Buffer (Max Stored
+                                        Messages)
+                                    </label>
+                                    <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                        Specify how many recent messages to keep
+                                        in storage. Older messages beyond this
+                                        limit are automatically pruned.
+                                    </p>
+
+                                    {/* Quick Preset Buttons */}
+                                    <div class="mt-2.5 flex flex-wrap gap-1.5">
+                                        {messageLimitPresets.map((preset) => (
+                                            <button
+                                                key={preset.value}
+                                                type="button"
+                                                onClick={() => {
+                                                    form.max_messages =
+                                                        preset.value;
+                                                }}
+                                                class={presetButtonClass(
+                                                    form.max_messages ===
+                                                        preset.value,
+                                                )}
+                                            >
+                                                {preset.label}
+                                            </button>
+                                        ))}
+                                    </div>
+
+                                    {/* Custom Limit Input */}
+                                    <div class="mt-2.5 flex flex-wrap items-center gap-2">
+                                        <label class="text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                            Custom Retention Limit (20 - 1000
+                                            messages):
+                                        </label>
+                                        <input
+                                            value={form.max_messages}
+                                            onInput={(e) => {
+                                                form.max_messages = Number(
+                                                    (
+                                                        e.target as HTMLInputElement
+                                                    ).value,
+                                                );
+                                            }}
+                                            type="number"
+                                            min="20"
+                                            max="1000"
+                                            class={customNumberInputClass}
+                                        />
+                                        <span class="text-[11px] text-slate-400 dark:text-gray-500">
+                                            messages
+                                        </span>
+                                    </div>
+                                </div>
+
+                                {/* Maximum Message Character Limit */}
+                                <div class="px-3 py-4">
+                                    <label class="flex items-center gap-2 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                        <MessageCircle class="h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                                        Per-Message Character Length Limit
+                                    </label>
+                                    <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                        Control the maximum length allowed for
+                                        any single student message.
+                                    </p>
+
+                                    {/* Quick Preset Buttons */}
+                                    <div class="mt-2.5 flex flex-wrap gap-1.5">
+                                        {lengthPresets.map((preset) => (
+                                            <button
+                                                key={preset.value}
+                                                type="button"
+                                                onClick={() => {
+                                                    form.max_length =
+                                                        preset.value;
+                                                }}
+                                                class={presetButtonClass(
+                                                    form.max_length ===
+                                                        preset.value,
+                                                )}
+                                            >
+                                                {preset.label}
+                                            </button>
+                                        ))}
+                                    </div>
+
+                                    {/* Custom Length Input */}
+                                    <div class="mt-2.5 flex flex-wrap items-center gap-2">
+                                        <label class="text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                            Custom Length Limit (50 - 1000
+                                            characters):
+                                        </label>
+                                        <input
+                                            value={form.max_length}
+                                            onInput={(e) => {
+                                                form.max_length = Number(
+                                                    (
+                                                        e.target as HTMLInputElement
+                                                    ).value,
+                                                );
+                                            }}
+                                            type="number"
+                                            min="50"
+                                            max="1000"
+                                            class={customNumberInputClass}
+                                        />
+                                        <span class="text-[11px] text-slate-400 dark:text-gray-500">
+                                            chars
+                                        </span>
+                                    </div>
+                                </div>
+
+                                {/* Profanity & Abusive Language Filter */}
+                                <div class="px-3 py-4">
+                                    <div class="flex items-center justify-between gap-3">
+                                        <div>
+                                            <label class="flex items-center gap-2 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                                <ShieldAlert class="h-4 w-4 shrink-0 text-rose-500" />
+                                                Profanity & Abusive Language
+                                                Filter
+                                            </label>
+                                            <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                                Automatically detects and blocks
+                                                vulgar, abusive, and
+                                                inappropriate words before they
+                                                can be sent.
+                                            </p>
+                                        </div>
+
+                                        {/* Toggle Switch */}
+                                        <button
+                                            type="button"
+                                            role="switch"
+                                            aria-checked={
+                                                form.profanity_filter_enabled
+                                            }
+                                            aria-label="Profanity filter"
+                                            onClick={() => {
+                                                form.profanity_filter_enabled =
+                                                    !form.profanity_filter_enabled;
+                                            }}
+                                            class={[
+                                                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500',
+                                                form.profanity_filter_enabled
+                                                    ? 'bg-indigo-600 dark:bg-indigo-500'
+                                                    : 'bg-slate-200 dark:bg-gray-700',
+                                            ]}
+                                        >
+                                            <span
+                                                class={[
+                                                    'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out',
+                                                    form.profanity_filter_enabled
+                                                        ? 'translate-x-5'
+                                                        : 'translate-x-0',
+                                                ]}
+                                            />
+                                        </button>
+                                    </div>
+
+                                    {/* Banned Words List (Textarea) */}
+                                    {form.profanity_filter_enabled && (
+                                        <div class="mt-2.5 space-y-1.5">
+                                            <label class="block text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                                Banned Words & Offensive Roots
+                                                (separated by commas or
+                                                newlines):
+                                            </label>
+                                            <textarea
+                                                value={form.banned_words}
+                                                onInput={(e) => {
+                                                    form.banned_words = (
+                                                        e.target as HTMLTextAreaElement
+                                                    ).value;
+                                                }}
+                                                rows={4}
+                                                placeholder="Enter offensive words or roots separated by commas or new lines..."
+                                                class="w-full rounded-[10px] border border-slate-200 bg-white p-3 font-mono text-xs text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-indigo-400"
+                                            />
+                                            <p class="text-[11px] text-slate-400 dark:text-gray-500">
+                                                The filter automatically
+                                                collapses repeated letters and
+                                                replaces common leet-speak
+                                                substitutions (e.g. @ &rarr; a,
+                                                $ &rarr; s, 0 &rarr; o).
+                                            </p>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Auto-Ban on Community Reports Moderation */}
+                                <div class="px-3 py-4">
+                                    <div class="flex items-center justify-between gap-3">
+                                        <div>
+                                            <label class="flex items-center gap-2 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                                <Gavel class="h-4 w-4 shrink-0 text-rose-500" />
+                                                Auto-Ban on Community Reports
+                                            </label>
+                                            <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                                Automatically suspend abusive
+                                                non-staff users from global chat
+                                                when a specific message receives
+                                                a threshold of community
+                                                reports.
+                                            </p>
+                                        </div>
+
+                                        {/* Toggle Switch */}
+                                        <button
+                                            type="button"
+                                            role="switch"
+                                            aria-checked={form.auto_ban_enabled}
+                                            aria-label="Auto-ban on community reports"
+                                            onClick={() => {
+                                                form.auto_ban_enabled =
+                                                    !form.auto_ban_enabled;
+                                            }}
+                                            class={[
+                                                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500',
+                                                form.auto_ban_enabled
+                                                    ? 'bg-indigo-600 dark:bg-indigo-500'
+                                                    : 'bg-slate-200 dark:bg-gray-700',
+                                            ]}
+                                        >
+                                            <span
+                                                class={[
+                                                    'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out',
+                                                    form.auto_ban_enabled
+                                                        ? 'translate-x-5'
+                                                        : 'translate-x-0',
+                                                ]}
+                                            />
+                                        </button>
+                                    </div>
+
+                                    {form.auto_ban_enabled && (
+                                        <div class="mt-2.5 space-y-3">
+                                            {/* Report Threshold */}
+                                            <div>
+                                                <label class="block text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                                    Report Threshold (Trigger
+                                                    auto-ban when a message
+                                                    reaches X distinct reports):
+                                                </label>
+
+                                                <div class="mt-2 flex flex-wrap gap-1.5">
+                                                    {reportThresholdPresets.map(
+                                                        (preset) => (
+                                                            <button
+                                                                key={
+                                                                    preset.value
+                                                                }
+                                                                type="button"
+                                                                onClick={() => {
+                                                                    form.auto_ban_threshold =
+                                                                        preset.value;
+                                                                }}
+                                                                class={presetButtonClass(
+                                                                    form.auto_ban_threshold ===
+                                                                        preset.value,
+                                                                )}
+                                                            >
+                                                                {preset.label}
+                                                            </button>
+                                                        ),
+                                                    )}
+                                                </div>
+
+                                                <div class="mt-2 flex flex-wrap items-center gap-2">
+                                                    <input
+                                                        value={
+                                                            form.auto_ban_threshold
+                                                        }
+                                                        onInput={(e) => {
+                                                            form.auto_ban_threshold =
+                                                                Number(
+                                                                    (
+                                                                        e.target as HTMLInputElement
+                                                                    ).value,
+                                                                );
+                                                        }}
+                                                        type="number"
+                                                        min="1"
+                                                        max="50"
+                                                        aria-label="Custom report threshold"
+                                                        class={
+                                                            customNumberInputClass
+                                                        }
+                                                    />
+                                                    <span class="text-[11px] text-slate-400 dark:text-gray-500">
+                                                        reports
+                                                    </span>
+                                                </div>
+                                            </div>
+
+                                            {/* Ban Duration */}
+                                            <div>
+                                                <label class="block text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                                    Auto-Ban Suspension Duration
+                                                    (Minutes):
+                                                </label>
+
+                                                <div class="mt-2 flex flex-wrap gap-1.5">
+                                                    {banDurationPresets.map(
+                                                        (preset) => (
+                                                            <button
+                                                                key={
+                                                                    preset.value
+                                                                }
+                                                                type="button"
+                                                                onClick={() => {
+                                                                    form.auto_ban_duration_minutes =
+                                                                        preset.value;
+                                                                }}
+                                                                class={presetButtonClass(
+                                                                    form.auto_ban_duration_minutes ===
+                                                                        preset.value,
+                                                                )}
+                                                            >
+                                                                {preset.label}
+                                                            </button>
+                                                        ),
+                                                    )}
+                                                </div>
+
+                                                <div class="mt-2 flex flex-wrap items-center gap-2">
+                                                    <input
+                                                        value={
+                                                            form.auto_ban_duration_minutes
+                                                        }
+                                                        onInput={(e) => {
+                                                            form.auto_ban_duration_minutes =
+                                                                Number(
+                                                                    (
+                                                                        e.target as HTMLInputElement
+                                                                    ).value,
+                                                                );
+                                                        }}
+                                                        type="number"
+                                                        min="1"
+                                                        max="43200"
+                                                        aria-label="Custom auto-ban duration in minutes"
+                                                        class={
+                                                            customNumberInputClass
+                                                        }
+                                                    />
+                                                    <span class="text-[11px] text-slate-400 dark:text-gray-500">
+                                                        minutes
+                                                    </span>
+                                                </div>
+                                            </div>
+
+                                            <p class="text-[11px] text-slate-500 dark:text-gray-400">
+                                                When a non-staff student's
+                                                message accumulates{' '}
+                                                <strong>
+                                                    {form.auto_ban_threshold}
+                                                </strong>{' '}
+                                                distinct reports, the system
+                                                automatically bans them for{' '}
+                                                <strong>
+                                                    {formatDurationText(
+                                                        form.auto_ban_duration_minutes,
+                                                    )}
+                                                </strong>{' '}
+                                                and broadcasts an automated
+                                                moderation notice in the chat.
+                                            </p>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Allowed Reaction Emojis */}
+                                <div class="px-3 py-4">
+                                    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                                        <div>
+                                            <label class="flex items-center gap-2 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                                <Smile class="h-4 w-4 shrink-0 text-amber-500" />
+                                                Allowed Message Reaction Emojis
+                                            </label>
+                                            <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                                Configure the emojis students
+                                                and members can use to react to
+                                                chat messages.
+                                            </p>
+                                        </div>
+
+                                        <button
+                                            type="button"
+                                            onClick={resetDefaultEmojis}
+                                            class="inline-flex h-8 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[10px] bg-white/70 px-3 text-xs font-semibold text-slate-600 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 active:scale-95 max-sm:w-full dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
+                                        >
+                                            <RotateCcw class="h-3.5 w-3.5" />
+                                            <span class="max-sm:sr-only">
+                                                Reset Defaults
+                                            </span>
+                                            <span class="sm:hidden">Reset</span>
+                                        </button>
+                                    </div>
+
+                                    {/* Current Active Emojis List (Pills) */}
+                                    <p class="mt-2.5 text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                        Active Reaction Emojis (
+                                        {form.allowed_emojis.length} enabled):
+                                    </p>
+                                    <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
+                                        {form.allowed_emojis.map(
+                                            (emoji, idx) => (
+                                                <span
+                                                    key={`${emoji}-${idx}`}
+                                                    class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white py-1 pr-1.5 pl-2.5 text-sm dark:border-gray-700 dark:bg-gray-800"
+                                                >
+                                                    <span class="text-base leading-none">
+                                                        {emoji}
+                                                    </span>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            removeEmoji(idx)
+                                                        }
+                                                        class="cursor-pointer rounded-full p-1 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
+                                                        title="Remove emoji"
+                                                        aria-label={`Remove ${emoji} emoji`}
+                                                    >
+                                                        <X class="h-3 w-3" />
+                                                    </button>
+                                                </span>
+                                            ),
+                                        )}
+
+                                        {form.allowed_emojis.length === 0 && (
+                                            <span class="text-xs text-amber-600 italic dark:text-amber-400">
+                                                No emojis active. Reactions will
+                                                be disabled until emojis are
+                                                added.
+                                            </span>
+                                        )}
+                                    </div>
+
+                                    {/* Add Custom Emoji Input */}
+                                    <div class="mt-2.5 flex flex-wrap items-center gap-2">
+                                        <input
+                                            value={newEmojiInput.value}
+                                            onInput={(e) => {
+                                                newEmojiInput.value = (
+                                                    e.target as HTMLInputElement
+                                                ).value;
+                                            }}
+                                            type="text"
+                                            placeholder="Type or paste emoji..."
+                                            maxLength={32}
+                                            onKeydown={(e) => {
+                                                if (e.key === 'Enter') {
+                                                    e.preventDefault();
+                                                    addEmoji();
+                                                }
+                                            }}
+                                            class="h-9 w-48 rounded-[10px] border border-slate-200 bg-white px-3.5 text-xs text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400"
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => addEmoji()}
+                                            class="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-[10px] bg-indigo-50/80 px-3 text-xs font-semibold text-indigo-700 ring-1 ring-indigo-200/60 backdrop-blur transition-colors hover:bg-indigo-100 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20 dark:hover:bg-indigo-500/15"
+                                        >
+                                            <Plus class="h-3.5 w-3.5" />
+                                            <span>Add Emoji</span>
+                                        </button>
+                                    </div>
+
+                                    {/* Quick Presets Picker */}
+                                    <p class="mt-2.5 text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                        Quick Add Popular Emojis:
+                                    </p>
+                                    <div class="mt-1.5 flex flex-wrap gap-1.5">
+                                        {popularReactionEmojis.map((emoji) => (
+                                            <button
+                                                key={emoji}
+                                                type="button"
+                                                onClick={() => addEmoji(emoji)}
+                                                disabled={form.allowed_emojis.includes(
+                                                    emoji,
+                                                )}
+                                                class={[
+                                                    'inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border text-sm transition hover:scale-110 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100',
+                                                    form.allowed_emojis.includes(
+                                                        emoji,
+                                                    )
+                                                        ? 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-950/60 dark:text-indigo-300'
+                                                        : 'border-slate-200 bg-white hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700',
+                                                ]}
+                                                title={
+                                                    form.allowed_emojis.includes(
+                                                        emoji,
+                                                    )
+                                                        ? 'Already added'
+                                                        : `Add ${emoji}`
+                                                }
+                                            >
+                                                {emoji}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+
+                        {/* Group 3 — Bot & Danger Zone */}
+                        <section aria-label="Bot and danger zone">
+                            <h2
+                                class={[
+                                    adminSectionTitleClass,
+                                    'flex items-center gap-2',
+                                ]}
+                            >
+                                <Bot class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400" />
+                                Bot & Danger Zone
+                            </h2>
+                            <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                Automated posting identity and irreversible
+                                actions.
+                            </p>
+
+                            <div class={adminListClass}>
+                                {/* System Chat Bot Account */}
+                                <div class="px-3 py-4">
+                                    <label class="flex items-center gap-2 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                        <Bot class="h-4 w-4 shrink-0 text-purple-600 dark:text-purple-400" />
+                                        System Chat Bot Account
+                                    </label>
+                                    <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                        Specify the username of the account that
+                                        will post automated system
+                                        announcements, ban notices, and
+                                        moderation alerts.
+                                    </p>
+
+                                    <div class="mt-2.5 max-w-xs">
+                                        <label class="block text-[11px] font-semibold text-slate-500 dark:text-gray-400">
+                                            Bot Account Username:
+                                        </label>
+                                        <div class="relative mt-1">
+                                            <span class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-xs font-bold text-slate-400">
+                                                @
+                                            </span>
+                                            <input
+                                                value={form.bot_username}
+                                                onInput={(e) => {
+                                                    form.bot_username = (
+                                                        e.target as HTMLInputElement
+                                                    ).value;
+                                                }}
+                                                type="text"
+                                                placeholder="hscstack"
+                                                class="h-9 w-full rounded-[10px] border border-slate-200 bg-white pr-3 pl-8 text-xs font-semibold text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-indigo-400"
+                                            />
+                                        </div>
+                                        <p class="mt-1 text-[11px] text-slate-400 dark:text-gray-500">
+                                            Enter the username of an existing
+                                            user account to post automated
+                                            moderation notices and ban
+                                            announcements.
+                                        </p>
+                                        {form.errors.bot_username && (
+                                            <p class="mt-1 text-xs font-medium text-rose-500">
+                                                {form.errors.bot_username}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Danger Zone: Purge Chat */}
+                                <div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
+                                    <div>
+                                        <p class="flex items-center gap-2 text-xs font-bold text-rose-600 dark:text-rose-400">
+                                            <Trash2 class="h-4 w-4 shrink-0" />
+                                            Clear all messages
+                                        </p>
+                                        <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                            Permanently deletes every stored
+                                            global chat message. This cannot be
+                                            undone.
+                                        </p>
+                                    </div>
+                                    <button
+                                        type="button"
+                                        onClick={handleClearMessages}
+                                        class="inline-flex h-8 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[10px] bg-rose-50/80 px-3 text-xs font-semibold text-rose-700 ring-1 ring-rose-200/70 backdrop-blur transition-colors hover:bg-rose-100 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 max-sm:w-full dark:bg-rose-500/10 dark:text-rose-300 dark:ring-rose-500/25"
+                                    >
+                                        <Trash2 class="h-3.5 w-3.5" />
+                                        <span>Clear All Messages</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </section>
+
+                        {/* Submit Button */}
+                        <div class="flex flex-col gap-2 border-t border-slate-200/60 pt-4 sm:flex-row sm:items-center dark:border-slate-800/60">
+                            <button
+                                type="submit"
+                                disabled={form.processing}
+                                class="inline-flex h-8 cursor-pointer items-center justify-center gap-2 rounded-[10px] bg-indigo-600 px-3 text-xs font-semibold text-white shadow-xs transition-colors hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 max-sm:w-full dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                            >
+                                {form.processing ? (
+                                    <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                                ) : (
+                                    <Save class="h-3.5 w-3.5" />
+                                )}
+                                <span>Save Chat Configuration</span>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
deleted file mode 100644
index 81d07572..00000000
--- a/resources/js/pages/admin/ChatSettings.vue
+++ /dev/null
@@ -1,1069 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, useForm, router } from '@inertiajs/vue3';
-import {
-    MessageCircle,
-    Save,
-    Clock,
-    Users,
-    Trash2,
-    Loader2,
-    Activity,
-    Flag,
-    ShieldAlert,
-    Smile,
-    Plus,
-    X,
-    RotateCcw,
-    Bot,
-    Gavel,
-} from 'lucide-vue-next';
-import { ref } from 'vue';
-
-interface ChatSettingsProps {
-    settings: {
-        enabled: boolean;
-        audience: string;
-        disabled_reason?: string;
-        cooldown_seconds: number;
-        max_messages: number;
-        max_length: number;
-        profanity_filter_enabled: boolean;
-        banned_words: string;
-        allowed_emojis?: string[];
-        bot_username?: string;
-        auto_ban_enabled: boolean;
-        auto_ban_threshold: number;
-        auto_ban_duration_minutes: number;
-    };
-    totalMessages: number;
-    recentMessagesCount: number;
-    pendingReportsCount?: number;
-}
-
-const props = defineProps<ChatSettingsProps>();
-
-const defaultReactionEmojis = ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏'];
-const popularReactionEmojis = [
-    '👍',
-    '❤️',
-    '🔥',
-    '😂',
-    '🎉',
-    '😮',
-    '😢',
-    '👏',
-    '🚀',
-    '💯',
-    '👀',
-    '🙏',
-    '💡',
-    '✨',
-    '🤝',
-    '🥳',
-];
-
-const newEmojiInput = ref('');
-
-const form = useForm({
-    enabled: props.settings.enabled,
-    audience: props.settings.audience,
-    disabled_reason: props.settings.disabled_reason ?? '',
-    cooldown_seconds: props.settings.cooldown_seconds,
-    max_messages: props.settings.max_messages ?? 200,
-    max_length: props.settings.max_length ?? 280,
-    profanity_filter_enabled: props.settings.profanity_filter_enabled ?? true,
-    banned_words: props.settings.banned_words ?? '',
-    allowed_emojis:
-        props.settings.allowed_emojis &&
-        props.settings.allowed_emojis.length > 0
-            ? [...props.settings.allowed_emojis]
-            : [...defaultReactionEmojis],
-    bot_username: props.settings.bot_username ?? 'hscstack',
-    auto_ban_enabled: props.settings.auto_ban_enabled ?? true,
-    auto_ban_threshold: props.settings.auto_ban_threshold ?? 5,
-    auto_ban_duration_minutes: props.settings.auto_ban_duration_minutes ?? 1440,
-});
-
-const addEmoji = (emojiToAdd?: string) => {
-    const emoji = (emojiToAdd || newEmojiInput.value).trim();
-
-    if (!emoji) {
-        return;
-    }
-
-    if (!form.allowed_emojis.includes(emoji)) {
-        form.allowed_emojis.push(emoji);
-    }
-
-    newEmojiInput.value = '';
-};
-
-const removeEmoji = (index: number) => {
-    form.allowed_emojis.splice(index, 1);
-};
-
-const resetDefaultEmojis = () => {
-    form.allowed_emojis = [...defaultReactionEmojis];
-};
-
-const submitSettings = () => {
-    form.post('/admin/chat/settings', {
-        preserveScroll: true,
-    });
-};
-
-const handleClearMessages = () => {
-    if (
-        confirm(
-            'Are you sure you want to permanently clear all global chat messages? This action cannot be undone.',
-        )
-    ) {
-        router.post('/admin/chat/clear', {}, { preserveScroll: true });
-    }
-};
-
-const cooldownPresets = [
-    { label: 'No Delay (0s)', value: 0 },
-    { label: '15 Seconds', value: 15 },
-    { label: '30 Seconds (Default)', value: 30 },
-    { label: '1 Minute (60s)', value: 60 },
-    { label: '2 Minutes (120s)', value: 120 },
-    { label: '5 Minutes (300s)', value: 300 },
-];
-
-const messageLimitPresets = [
-    { label: '50 Messages', value: 50 },
-    { label: '100 Messages', value: 100 },
-    { label: '200 Messages (Default)', value: 200 },
-    { label: '500 Messages', value: 500 },
-    { label: '1000 Messages', value: 1000 },
-];
-
-const lengthPresets = [
-    { label: '140 Characters', value: 140 },
-    { label: '280 Characters (Default)', value: 280 },
-    { label: '500 Characters', value: 500 },
-    { label: '1000 Characters', value: 1000 },
-];
-
-const reportThresholdPresets = [
-    { label: '3 Reports', value: 3 },
-    { label: '5 Reports (Default)', value: 5 },
-    { label: '10 Reports', value: 10 },
-    { label: '15 Reports', value: 15 },
-];
-
-const banDurationPresets = [
-    { label: '5 Mins', value: 5 },
-    { label: '15 Mins', value: 15 },
-    { label: '1 Hour', value: 60 },
-    { label: '24 Hours (Default)', value: 1440 },
-    { label: '3 Days', value: 4320 },
-    { label: '7 Days', value: 10080 },
-];
-
-const formatDurationText = (minutes: number) => {
-    if (!minutes || minutes <= 0) {
-        return '0 minutes';
-    }
-
-    if (minutes >= 1440 && minutes % 1440 === 0) {
-        const days = minutes / 1440;
-
-        return `${days} day${days > 1 ? 's' : ''}`;
-    }
-
-    if (minutes >= 60 && minutes % 60 === 0) {
-        const hours = minutes / 60;
-
-        return `${hours} hour${hours > 1 ? 's' : ''}`;
-    }
-
-    return `${minutes} minute${minutes > 1 ? 's' : ''}`;
-};
-</script>
-
-<template>
-    <Head title="Global Chat Settings - Staff Panel" />
-
-    <div class="space-y-6">
-        <!-- Header -->
-        <div
-            class="flex flex-col gap-3 border-b border-slate-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-        >
-            <div class="flex items-center gap-3">
-                <div
-                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                >
-                    <MessageCircle class="h-5 w-5" />
-                </div>
-                <div>
-                    <h1
-                        class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                    >
-                        Global Chat Management
-                    </h1>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Manage realtime student lounge access, rate limits,
-                        cooldown intervals, and moderation.
-                    </p>
-                </div>
-            </div>
-
-            <!-- Chat Live Indicator Badge -->
-            <div class="flex items-center gap-2">
-                <span
-                    class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-bold"
-                    :class="
-                        form.audience !== 'disabled'
-                            ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300'
-                            : 'bg-rose-50 text-rose-700 dark:bg-rose-950/60 dark:text-rose-300'
-                    "
-                >
-                    <span
-                        class="h-2 w-2 rounded-full"
-                        :class="
-                            form.audience !== 'disabled'
-                                ? 'animate-pulse bg-emerald-500'
-                                : 'bg-rose-500'
-                        "
-                    ></span>
-                    {{
-                        form.audience !== 'disabled'
-                            ? 'Chat Live'
-                            : 'Chat Inactive'
-                    }}
-                </span>
-            </div>
-        </div>
-
-        <!-- Global Chat Management Route Tabs -->
-        <div
-            class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800"
-        >
-            <Link
-                href="/admin/chat"
-                class="flex items-center gap-2 border-b-2 border-indigo-600 px-4 py-2.5 text-xs font-bold text-indigo-600 transition-all dark:border-indigo-400 dark:text-indigo-400"
-            >
-                <MessageCircle class="h-4 w-4" />
-                <span>Chat Configuration</span>
-            </Link>
-
-            <Link
-                href="/admin/chat/reports"
-                class="flex items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-xs font-bold text-slate-500 transition-all hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
-            >
-                <Flag class="h-4 w-4 text-rose-500" />
-                <span>Reported Messages</span>
-                <span
-                    v-if="pendingReportsCount && pendingReportsCount > 0"
-                    class="py-0.2 rounded-full bg-rose-500 px-1.5 text-[10px] font-bold text-white"
-                >
-                    {{ pendingReportsCount }}
-                </span>
-            </Link>
-        </div>
-
-        <!-- Metric Statistics Cards -->
-        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            <div
-                class="rounded-2xl border border-slate-100 bg-slate-50/60 p-4 dark:border-gray-800 dark:bg-gray-800/40"
-            >
-                <div class="flex items-center justify-between">
-                    <span
-                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                        >Stored Messages</span
-                    >
-                    <MessageCircle class="h-4 w-4 text-indigo-500" />
-                </div>
-                <p
-                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
-                >
-                    {{ totalMessages }}
-                </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Auto-pruning maintains max {{ form.max_messages }}</span
-                >
-            </div>
-
-            <div
-                class="rounded-2xl border border-slate-100 bg-slate-50/60 p-4 dark:border-gray-800 dark:bg-gray-800/40"
-            >
-                <div class="flex items-center justify-between">
-                    <span
-                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                        >Activity (Last 24h)</span
-                    >
-                    <Activity class="h-4 w-4 text-emerald-500" />
-                </div>
-                <p
-                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
-                >
-                    {{ recentMessagesCount }}
-                </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Messages sent today</span
-                >
-            </div>
-
-            <div
-                class="rounded-2xl border border-slate-100 bg-slate-50/60 p-4 sm:col-span-2 lg:col-span-1 dark:border-gray-800 dark:bg-gray-800/40"
-            >
-                <div class="flex items-center justify-between">
-                    <span
-                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                        >Current Cooldown</span
-                    >
-                    <Clock class="h-4 w-4 text-amber-500" />
-                </div>
-                <p
-                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
-                >
-                    {{ form.cooldown_seconds }}s
-                </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Interval per student</span
-                >
-            </div>
-        </div>
-
-        <!-- Settings Form -->
-        <form
-            @submit.prevent="submitSettings"
-            class="space-y-6 rounded-3xl border border-slate-200/80 bg-white p-6 shadow-xs sm:p-8 dark:border-gray-800 dark:bg-gray-900"
-        >
-            <!-- 1. Audience Eligibility & Status -->
-            <div
-                class="space-y-3 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div>
-                    <label
-                        class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        <Users class="h-4 w-4 text-indigo-500" />
-                        Target Audience & Chat Status
-                    </label>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Choose who is permitted to send messages in the student
-                        lounge, or pause posting.
-                    </p>
-                </div>
-
-                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
-                    <!-- Option: Verified Members Only -->
-                    <label
-                        class="flex cursor-pointer flex-col rounded-2xl border p-4 transition-all"
-                        :class="
-                            form.audience === 'verified_members'
-                                ? 'border-indigo-500 bg-indigo-50/40 ring-2 ring-indigo-500/20 dark:border-indigo-400 dark:bg-indigo-950/30'
-                                : 'border-slate-200 hover:border-slate-300 dark:border-gray-700 dark:hover:border-gray-600'
-                        "
-                    >
-                        <div class="mb-1.5 flex items-center justify-between">
-                            <span
-                                class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                                >Verified Members</span
-                            >
-                            <input
-                                type="radio"
-                                v-model="form.audience"
-                                value="verified_members"
-                                class="text-indigo-600 focus:ring-indigo-500"
-                            />
-                        </div>
-                        <p
-                            class="text-[11px] leading-relaxed text-slate-500 dark:text-gray-400"
-                        >
-                            Only contributors, editors, and verified students
-                            can post. (Default Beta)
-                        </p>
-                    </label>
-
-                    <!-- Option: Everyone -->
-                    <label
-                        class="flex cursor-pointer flex-col rounded-2xl border p-4 transition-all"
-                        :class="
-                            form.audience === 'all'
-                                ? 'border-indigo-500 bg-indigo-50/40 ring-2 ring-indigo-500/20 dark:border-indigo-400 dark:bg-indigo-950/30'
-                                : 'border-slate-200 hover:border-slate-300 dark:border-gray-700 dark:hover:border-gray-600'
-                        "
-                    >
-                        <div class="mb-1.5 flex items-center justify-between">
-                            <span
-                                class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                                >Everyone (All Students)</span
-                            >
-                            <input
-                                type="radio"
-                                v-model="form.audience"
-                                value="all"
-                                class="text-indigo-600 focus:ring-indigo-500"
-                            />
-                        </div>
-                        <p
-                            class="text-[11px] leading-relaxed text-slate-400 dark:text-gray-500"
-                        >
-                            Any authenticated student can send messages.
-                        </p>
-                    </label>
-
-                    <!-- Option: Disabled / Read-only -->
-                    <label
-                        class="flex cursor-pointer flex-col rounded-2xl border p-4 transition-all"
-                        :class="
-                            form.audience === 'disabled'
-                                ? 'border-rose-500 bg-rose-50/40 ring-2 ring-rose-500/20 dark:border-rose-400 dark:bg-rose-950/30'
-                                : 'border-slate-200 hover:border-slate-300 dark:border-gray-700 dark:hover:border-gray-600'
-                        "
-                    >
-                        <div class="mb-1.5 flex items-center justify-between">
-                            <span
-                                class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                                >Disabled (Read-Only)</span
-                            >
-                            <input
-                                type="radio"
-                                v-model="form.audience"
-                                value="disabled"
-                                class="text-rose-600 focus:ring-rose-500"
-                            />
-                        </div>
-                        <p
-                            class="text-[11px] leading-relaxed text-slate-500 dark:text-gray-400"
-                        >
-                            Posting is locked for everyone during maintenance or
-                            exams.
-                        </p>
-                    </label>
-                </div>
-
-                <!-- Custom Disabled / Maintenance Notice Input -->
-                <div
-                    v-if="form.audience === 'disabled'"
-                    class="mt-3 rounded-2xl border border-rose-200/80 bg-rose-50/40 p-4 dark:border-rose-900/40 dark:bg-rose-950/20"
-                >
-                    <label
-                        class="block text-xs font-semibold text-rose-900 dark:text-rose-300"
-                    >
-                        Custom Notice Message for Students (Optional):
-                    </label>
-                    <input
-                        v-model="form.disabled_reason"
-                        type="text"
-                        placeholder="e.g. Chat is temporarily paused during HSC ICT exam. Will resume at 4:00 PM."
-                        class="mt-1.5 w-full rounded-xl border border-rose-200 bg-white px-3.5 py-2 text-xs text-slate-800 focus:border-rose-500 focus:outline-none dark:border-rose-800/80 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-rose-400"
-                    />
-                    <p
-                        class="mt-1 text-[11px] text-rose-700/80 dark:text-rose-400/80"
-                    >
-                        Leave blank to show the default notice:
-                        <em
-                            >"Global chat is currently disabled for
-                            maintenance."</em
-                        >
-                    </p>
-                </div>
-            </div>
-
-            <!-- 3. Cooldown Interval / Rate Limit Configuration -->
-            <div
-                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div>
-                    <label
-                        class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        <Clock class="h-4 w-4 text-indigo-500" />
-                        Message Cooldown Interval (Anti-Spam)
-                    </label>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Specify how many seconds a student must wait before they
-                        can send another message.
-                    </p>
-                </div>
-
-                <!-- Quick Preset Buttons -->
-                <div class="flex flex-wrap gap-2">
-                    <button
-                        v-for="preset in cooldownPresets"
-                        :key="preset.value"
-                        type="button"
-                        @click="form.cooldown_seconds = preset.value"
-                        class="cursor-pointer rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95"
-                        :class="
-                            form.cooldown_seconds === preset.value
-                                ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                        "
-                    >
-                        {{ preset.label }}
-                    </button>
-                </div>
-
-                <!-- Custom Interval Input -->
-                <div class="max-w-xs">
-                    <label
-                        class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                    >
-                        Custom Interval (Seconds):
-                    </label>
-                    <div class="relative">
-                        <input
-                            v-model.number="form.cooldown_seconds"
-                            type="number"
-                            min="0"
-                            max="3600"
-                            class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-20 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                        />
-                        <span
-                            class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
-                        >
-                            seconds
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 4. Message Retention Buffer (Rolling Limit) -->
-            <div
-                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div>
-                    <label
-                        class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        <MessageCircle class="h-4 w-4 text-indigo-500" />
-                        Rolling Message Buffer (Max Stored Messages)
-                    </label>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Specify how many recent messages to keep in storage.
-                        Older messages beyond this limit are automatically
-                        pruned.
-                    </p>
-                </div>
-
-                <!-- Quick Preset Buttons -->
-                <div class="flex flex-wrap gap-2">
-                    <button
-                        v-for="preset in messageLimitPresets"
-                        :key="preset.value"
-                        type="button"
-                        @click="form.max_messages = preset.value"
-                        class="cursor-pointer rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95"
-                        :class="
-                            form.max_messages === preset.value
-                                ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                        "
-                    >
-                        {{ preset.label }}
-                    </button>
-                </div>
-
-                <!-- Custom Limit Input -->
-                <div class="max-w-xs">
-                    <label
-                        class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                    >
-                        Custom Retention Limit (20 - 1000 messages):
-                    </label>
-                    <div class="relative">
-                        <input
-                            v-model.number="form.max_messages"
-                            type="number"
-                            min="20"
-                            max="1000"
-                            class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-20 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                        />
-                        <span
-                            class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
-                        >
-                            messages
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 5. Maximum Message Character Limit -->
-            <div
-                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div>
-                    <label
-                        class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        <MessageCircle class="h-4 w-4 text-indigo-500" />
-                        Per-Message Character Length Limit
-                    </label>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Control the maximum length allowed for any single
-                        student message.
-                    </p>
-                </div>
-
-                <!-- Quick Preset Buttons -->
-                <div class="flex flex-wrap gap-2">
-                    <button
-                        v-for="preset in lengthPresets"
-                        :key="preset.value"
-                        type="button"
-                        @click="form.max_length = preset.value"
-                        class="cursor-pointer rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95"
-                        :class="
-                            form.max_length === preset.value
-                                ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                        "
-                    >
-                        {{ preset.label }}
-                    </button>
-                </div>
-
-                <!-- Custom Length Input -->
-                <div class="max-w-xs">
-                    <label
-                        class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                    >
-                        Custom Length Limit (50 - 1000 characters):
-                    </label>
-                    <div class="relative">
-                        <input
-                            v-model.number="form.max_length"
-                            type="number"
-                            min="50"
-                            max="1000"
-                            class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-14 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                        />
-                        <span
-                            class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
-                        >
-                            chars
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 6. Profanity & Abusive Language Filter -->
-            <div
-                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div class="flex items-center justify-between">
-                    <div>
-                        <label
-                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            <ShieldAlert class="h-4 w-4 text-rose-500" />
-                            Profanity & Abusive Language Filter
-                        </label>
-                        <p
-                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            Automatically detects and blocks vulgar, abusive,
-                            and inappropriate words before they can be sent.
-                        </p>
-                    </div>
-
-                    <!-- Toggle Switch -->
-                    <button
-                        type="button"
-                        @click="
-                            form.profanity_filter_enabled =
-                                !form.profanity_filter_enabled
-                        "
-                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
-                        :class="
-                            form.profanity_filter_enabled
-                                ? 'bg-indigo-600 dark:bg-indigo-500'
-                                : 'bg-slate-200 dark:bg-gray-700'
-                        "
-                    >
-                        <span
-                            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
-                            :class="
-                                form.profanity_filter_enabled
-                                    ? 'translate-x-5'
-                                    : 'translate-x-0'
-                            "
-                        />
-                    </button>
-                </div>
-
-                <!-- Banned Words List (Textarea) -->
-                <div v-if="form.profanity_filter_enabled" class="space-y-2">
-                    <label
-                        class="block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                    >
-                        Banned Words & Offensive Roots (separated by commas or
-                        newlines):
-                    </label>
-                    <textarea
-                        v-model="form.banned_words"
-                        rows="4"
-                        placeholder="Enter offensive words or roots separated by commas or new lines..."
-                        class="w-full rounded-xl border border-slate-200 bg-slate-50 p-3 font-mono text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
-                    ></textarea>
-                    <p class="text-[11px] text-slate-400 dark:text-gray-500">
-                        The filter automatically collapses repeated letters and
-                        replaces common leet-speak substitutions (e.g. @ &rarr;
-                        a, $ &rarr; s, 0 &rarr; o).
-                    </p>
-                </div>
-            </div>
-
-            <!-- 7. Auto-Ban on Community Reports Moderation -->
-            <div
-                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div class="flex items-center justify-between">
-                    <div>
-                        <label
-                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            <Gavel class="h-4 w-4 text-rose-500" />
-                            Auto-Ban on Community Reports
-                        </label>
-                        <p
-                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            Automatically suspend abusive non-staff users from
-                            global chat when a specific message receives a
-                            threshold of community reports.
-                        </p>
-                    </div>
-
-                    <!-- Toggle Switch -->
-                    <button
-                        type="button"
-                        @click="form.auto_ban_enabled = !form.auto_ban_enabled"
-                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
-                        :class="
-                            form.auto_ban_enabled
-                                ? 'bg-indigo-600 dark:bg-indigo-500'
-                                : 'bg-slate-200 dark:bg-gray-700'
-                        "
-                    >
-                        <span
-                            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
-                            :class="
-                                form.auto_ban_enabled
-                                    ? 'translate-x-5'
-                                    : 'translate-x-0'
-                            "
-                        />
-                    </button>
-                </div>
-
-                <div v-if="form.auto_ban_enabled" class="space-y-4 pt-1">
-                    <!-- Report Threshold -->
-                    <div class="space-y-2">
-                        <label
-                            class="block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                        >
-                            Report Threshold (Trigger auto-ban when a message
-                            reaches X distinct reports):
-                        </label>
-
-                        <div class="flex flex-wrap gap-2">
-                            <button
-                                v-for="preset in reportThresholdPresets"
-                                :key="preset.value"
-                                type="button"
-                                @click="form.auto_ban_threshold = preset.value"
-                                class="cursor-pointer rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95"
-                                :class="
-                                    form.auto_ban_threshold === preset.value
-                                        ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                        : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                                "
-                            >
-                                {{ preset.label }}
-                            </button>
-                        </div>
-
-                        <div class="max-w-xs pt-1">
-                            <div class="relative">
-                                <input
-                                    v-model.number="form.auto_ban_threshold"
-                                    type="number"
-                                    min="1"
-                                    max="50"
-                                    class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-20 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                                />
-                                <span
-                                    class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
-                                >
-                                    reports
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Ban Duration -->
-                    <div class="space-y-2">
-                        <label
-                            class="block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                        >
-                            Auto-Ban Suspension Duration (Minutes):
-                        </label>
-
-                        <div class="flex flex-wrap gap-2">
-                            <button
-                                v-for="preset in banDurationPresets"
-                                :key="preset.value"
-                                type="button"
-                                @click="
-                                    form.auto_ban_duration_minutes =
-                                        preset.value
-                                "
-                                class="cursor-pointer rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95"
-                                :class="
-                                    form.auto_ban_duration_minutes ===
-                                    preset.value
-                                        ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                        : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                                "
-                            >
-                                {{ preset.label }}
-                            </button>
-                        </div>
-
-                        <div class="max-w-xs pt-1">
-                            <div class="relative">
-                                <input
-                                    v-model.number="
-                                        form.auto_ban_duration_minutes
-                                    "
-                                    type="number"
-                                    min="1"
-                                    max="43200"
-                                    class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-18 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                                />
-                                <span
-                                    class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
-                                >
-                                    minutes
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        class="rounded-xl border border-slate-200 bg-slate-50/70 p-3 text-xs text-slate-500 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-400"
-                    >
-                        When a non-staff student's message accumulates
-                        <strong>{{ form.auto_ban_threshold }}</strong> distinct
-                        reports, the system automatically bans them for
-                        <strong>{{
-                            formatDurationText(form.auto_ban_duration_minutes)
-                        }}</strong>
-                        and broadcasts an automated moderation notice in the
-                        chat.
-                    </div>
-                </div>
-            </div>
-
-            <!-- 8. Allowed Reaction Emojis -->
-            <div
-                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div
-                    class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
-                >
-                    <div>
-                        <label
-                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            <Smile class="h-4 w-4 text-amber-500" />
-                            Allowed Message Reaction Emojis
-                        </label>
-                        <p
-                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            Configure the emojis students and members can use to
-                            react to chat messages.
-                        </p>
-                    </div>
-
-                    <button
-                        type="button"
-                        @click="resetDefaultEmojis"
-                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-100 active:scale-95 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                    >
-                        <RotateCcw class="h-3.5 w-3.5" />
-                        <span>Reset Defaults</span>
-                    </button>
-                </div>
-
-                <!-- Current Active Emojis List (Pills) -->
-                <div>
-                    <span
-                        class="mb-2 block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                    >
-                        Active Reaction Emojis ({{ form.allowed_emojis.length }}
-                        enabled):
-                    </span>
-                    <div class="flex flex-wrap items-center gap-2">
-                        <div
-                            v-for="(emoji, idx) in form.allowed_emojis"
-                            :key="emoji"
-                            class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-sm shadow-2xs dark:border-gray-700 dark:bg-gray-800"
-                        >
-                            <span class="text-base">{{ emoji }}</span>
-                            <button
-                                type="button"
-                                @click="removeEmoji(idx)"
-                                class="cursor-pointer rounded-full p-0.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
-                                title="Remove emoji"
-                            >
-                                <X class="h-3 w-3" />
-                            </button>
-                        </div>
-
-                        <span
-                            v-if="form.allowed_emojis.length === 0"
-                            class="text-xs text-amber-600 italic dark:text-amber-400"
-                        >
-                            No emojis active. Reactions will be disabled until
-                            emojis are added.
-                        </span>
-                    </div>
-                </div>
-
-                <!-- Add Custom Emoji Input -->
-                <div class="flex flex-wrap items-center gap-2 pt-1">
-                    <div class="relative w-48">
-                        <input
-                            v-model="newEmojiInput"
-                            type="text"
-                            placeholder="Type or paste emoji..."
-                            maxlength="32"
-                            @keydown.enter.prevent="addEmoji()"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
-                        />
-                    </div>
-                    <button
-                        type="button"
-                        @click="addEmoji()"
-                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-50 px-3.5 py-2 text-xs font-bold text-indigo-700 transition hover:bg-indigo-100 active:scale-95 dark:bg-indigo-950/70 dark:text-indigo-300 dark:hover:bg-indigo-900"
-                    >
-                        <Plus class="h-3.5 w-3.5" />
-                        <span>Add Emoji</span>
-                    </button>
-                </div>
-
-                <!-- Quick Presets Picker -->
-                <div class="space-y-1.5 pt-1">
-                    <span
-                        class="block text-[11px] font-semibold text-slate-500 dark:text-gray-400"
-                    >
-                        Quick Add Popular Emojis:
-                    </span>
-                    <div class="flex flex-wrap gap-1.5">
-                        <button
-                            v-for="emoji in popularReactionEmojis"
-                            :key="emoji"
-                            type="button"
-                            @click="addEmoji(emoji)"
-                            :disabled="form.allowed_emojis.includes(emoji)"
-                            class="cursor-pointer rounded-lg border px-2 py-1 text-sm transition hover:scale-110 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
-                            :class="
-                                form.allowed_emojis.includes(emoji)
-                                    ? 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-950/60 dark:text-indigo-300'
-                                    : 'border-slate-200 bg-slate-50 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700'
-                            "
-                            :title="
-                                form.allowed_emojis.includes(emoji)
-                                    ? 'Already added'
-                                    : `Add ${emoji}`
-                            "
-                        >
-                            {{ emoji }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 8. System Chat Bot Account -->
-            <div
-                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
-            >
-                <div class="flex items-center justify-between">
-                    <div>
-                        <label
-                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            <Bot
-                                class="h-4 w-4 text-purple-600 dark:text-purple-400"
-                            />
-                            System Chat Bot Account
-                        </label>
-                        <p
-                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            Specify the username of the account that will post
-                            automated system announcements, ban notices, and
-                            moderation alerts.
-                        </p>
-                    </div>
-                </div>
-
-                <div class="max-w-xs space-y-1.5">
-                    <label
-                        class="block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                    >
-                        Bot Account Username:
-                    </label>
-                    <div class="relative">
-                        <span
-                            class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-xs font-bold text-slate-400"
-                        >
-                            @
-                        </span>
-                        <input
-                            v-model="form.bot_username"
-                            type="text"
-                            placeholder="hscstack"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 py-2 pr-3 pl-8 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
-                        />
-                    </div>
-                    <p class="text-[11px] text-slate-400 dark:text-gray-500">
-                        Enter the username of an existing user account to post
-                        automated moderation notices and ban announcements.
-                    </p>
-                    <p
-                        v-if="form.errors.bot_username"
-                        class="text-xs font-medium text-rose-500"
-                    >
-                        {{ form.errors.bot_username }}
-                    </p>
-                </div>
-            </div>
-
-            <!-- Submit Button -->
-            <div class="flex items-center justify-between pt-2">
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-xs font-bold text-white shadow-xs transition-all hover:bg-indigo-700 active:scale-95 disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
-                >
-                    <Loader2
-                        v-if="form.processing"
-                        class="h-4 w-4 animate-spin"
-                    />
-                    <Save v-else class="h-4 w-4" />
-                    <span>Save Chat Configuration</span>
-                </button>
-
-                <!-- Danger Zone: Purge Chat -->
-                <button
-                    type="button"
-                    @click="handleClearMessages"
-                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-rose-200 bg-rose-50/60 px-3.5 py-2 text-xs font-bold text-rose-600 transition hover:bg-rose-100 active:scale-95 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-400 dark:hover:bg-rose-950/80"
-                >
-                    <Trash2 class="h-3.5 w-3.5" />
-                    <span>Clear All Messages</span>
-                </button>
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/Dashboard.tsx b/resources/js/pages/admin/Dashboard.tsx
new file mode 100644
index 00000000..48d6eb99
--- /dev/null
+++ b/resources/js/pages/admin/Dashboard.tsx
@@ -0,0 +1,445 @@
+/**
+ * AdminDashboard — TSX port of `Dashboard.vue`.
+ *
+ * Management tools grid + on-demand analytics, rewritten as a `.tsx`
+ * `defineComponent` render function. Resolved via the explicit
+ * dual-extension (`*.vue` + `*.tsx`) page resolver in `resources/js/app.ts`.
+ *
+ * Ported 1:1 from the SFC (parity is the reviewable contract); shared
+ * admin chrome (headers/buttons) comes from `@/components/admin/ui`.
+ */
+import { Head, Link } from '@inertiajs/vue3';
+import {
+    BarChart3,
+    Bell,
+    BookOpen,
+    CheckSquare,
+    Eye,
+    LayoutGrid,
+    LifeBuoy,
+    Mail,
+    MessageCircle,
+    MessageSquare,
+    Radio,
+    RefreshCw,
+    Share2,
+    UserCheck,
+    Users,
+} from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { Component } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    adminListClass,
+    adminPageClass,
+    adminSectionTitleClass,
+    adminPageDescriptionClass,
+    adminPageHeaderClass,
+    adminPageTitleClass,
+    adminPrimaryBtnClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+import EmptyState from '@/components/EmptyState.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface AnalyticsSource {
+    source: string;
+    visits: number;
+}
+
+interface DashboardAnalytics {
+    total_accounts?: number;
+    realtime_users?: number;
+    total_visits?: number;
+    total_users?: number;
+    top_sources?: AnalyticsSource[];
+}
+
+interface AdminTool {
+    name: string;
+    href: string;
+    icon: Component;
+    color: string;
+    permission?: string;
+}
+
+const adminTools: AdminTool[] = [
+    {
+        name: 'Resource Moderation',
+        href: '/admin/moderation/resources',
+        icon: CheckSquare,
+        color: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-500/10 dark:text-emerald-400',
+        permission: 'moderate resources',
+    },
+    {
+        name: 'Manage Contents',
+        href: '/admin/subjects',
+        icon: BookOpen,
+        color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-500/10 dark:text-indigo-400',
+    },
+    {
+        name: 'Manage Forum',
+        href: '/admin/forums',
+        icon: MessageSquare,
+        color: 'text-blue-600 bg-blue-50 dark:bg-blue-500/10 dark:text-blue-400',
+        permission: 'manage forums',
+    },
+    {
+        name: 'Support Tickets',
+        href: '/admin/tickets',
+        icon: LifeBuoy,
+        color: 'text-amber-600 bg-amber-50 dark:bg-amber-500/10 dark:text-amber-400',
+        permission: 'manage tickets',
+    },
+    {
+        name: 'Site Notice',
+        href: '/admin/notice',
+        icon: Bell,
+        color: 'text-purple-600 bg-purple-50 dark:bg-purple-500/10 dark:text-purple-400',
+        permission: 'edit notice',
+    },
+    {
+        name: 'Global Chat',
+        href: '/admin/chat',
+        icon: MessageCircle,
+        color: 'text-teal-600 bg-teal-50 dark:bg-teal-500/10 dark:text-teal-400',
+        permission: 'manage chat',
+    },
+    {
+        name: 'Users & Roles',
+        href: '/admin/users',
+        icon: UserCheck,
+        color: 'text-sky-600 bg-sky-50 dark:bg-sky-500/10 dark:text-sky-400',
+        permission: 'view users',
+    },
+    {
+        name: 'Peer & Pokes',
+        href: '/admin/peers/settings',
+        icon: Radio,
+        color: 'text-rose-600 bg-rose-50 dark:bg-rose-500/10 dark:text-rose-400',
+        permission: 'manage peers',
+    },
+    {
+        name: 'Send Emails',
+        href: '/admin/emails/send',
+        icon: Mail,
+        color: 'text-orange-600 bg-orange-50 dark:bg-orange-500/10 dark:text-orange-400',
+        permission: 'send email',
+    },
+];
+
+export default defineComponent({
+    name: 'AdminDashboard',
+    props: {
+        totalAccounts: { type: Number as PropType<number>, default: undefined },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+
+        const stats = ref<DashboardAnalytics | null>(null);
+        const isLoading = ref<boolean>(false);
+        const hasFetched = ref<boolean>(false);
+        const errorMsg = ref<string | null>(null);
+
+        const visibleTools = computed(() =>
+            adminTools.filter(
+                (tool) => !tool.permission || can(tool.permission),
+            ),
+        );
+
+        const fetchAnalytics = async (
+            refresh: boolean = false,
+        ): Promise<void> => {
+            isLoading.value = true;
+            errorMsg.value = null;
+
+            try {
+                const res = await fetch(
+                    `/admin/analytics${refresh ? '?refresh=1' : ''}`,
+                );
+
+                if (!res.ok) {
+                    throw new Error('Analytics could not be loaded');
+                }
+
+                const data: unknown = await res.json();
+                stats.value = data as DashboardAnalytics;
+                hasFetched.value = true;
+            } catch (e: unknown) {
+                if (e instanceof Error) {
+                    errorMsg.value = e.message || 'Failed to load analytics';
+                } else {
+                    errorMsg.value = 'Failed to load analytics';
+                }
+            } finally {
+                isLoading.value = false;
+            }
+        };
+
+        return () => {
+            const totalAccounts =
+                stats.value?.total_accounts ?? props.totalAccounts ?? 0;
+
+            return (
+                <>
+                    <Head title="Staff Dashboard" />
+
+                    <div class={[adminPageClass, 'animate-fade-in']}>
+                        {/* Header — description carries the account counter */}
+                        <div class={adminPageHeaderClass}>
+                            <div>
+                                <h1 class={adminPageTitleClass}>Dashboard</h1>
+                                <p class={adminPageDescriptionClass}>
+                                    Staff workspace &bull;{' '}
+                                    <span class="font-medium text-slate-700 dark:text-gray-300">
+                                        {totalAccounts.toLocaleString()} Total
+                                        Accounts
+                                    </span>
+                                </p>
+                            </div>
+
+                            {/* Reload affordance lives here AFTER the first
+                                fetch; before that the single loader is the
+                                in-context button in the empty state below
+                                (never two load buttons on one screen). */}
+                            {hasFetched.value && (
+                                <button
+                                    type="button"
+                                    onClick={() => fetchAnalytics(true)}
+                                    disabled={isLoading.value}
+                                    class={[
+                                        adminSecondaryBtnClass,
+                                        'w-fit max-sm:justify-center',
+                                    ]}
+                                >
+                                    <RefreshCw
+                                        class={[
+                                            'h-3.5 w-3.5',
+                                            isLoading.value
+                                                ? 'animate-spin'
+                                                : '',
+                                        ]}
+                                    />
+                                    <span>
+                                        {isLoading.value
+                                            ? 'Refreshing...'
+                                            : 'Reload Analytics'}
+                                    </span>
+                                </button>
+                            )}
+                        </div>
+
+                        {/* Management Tools Grid */}
+                        <div>
+                            <h2 class={adminSectionTitleClass}>
+                                Management Tools
+                            </h2>
+
+                            <div class="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-3 sm:gap-3 lg:grid-cols-3">
+                                {visibleTools.value.map((tool) => {
+                                    const Icon = tool.icon;
+
+                                    return (
+                                        <Link
+                                            key={tool.href}
+                                            href={tool.href}
+                                            class="group flex items-center gap-2.5 rounded-xl bg-white/70 p-2.5 ring-1 ring-slate-200/60 backdrop-blur-xl transition-all duration-150 hover:bg-white/85 hover:ring-indigo-300/70 sm:p-3 dark:bg-slate-900/60 dark:ring-slate-800/60 dark:hover:bg-slate-900/75 dark:hover:ring-indigo-500/40"
+                                        >
+                                            <div
+                                                class={[
+                                                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors',
+                                                    tool.color,
+                                                ]}
+                                            >
+                                                <Icon class="h-4 w-4 stroke-[2]" />
+                                            </div>
+                                            <span class="text-xs leading-tight font-semibold text-slate-800 transition-colors group-hover:text-indigo-600 sm:text-sm dark:text-gray-200 dark:group-hover:text-indigo-400">
+                                                {tool.name}
+                                            </span>
+                                        </Link>
+                                    );
+                                })}
+                            </div>
+                        </div>
+
+                        {/* Analytics Section */}
+                        <div class="space-y-4">
+                            <div class="flex items-center justify-between">
+                                <h2 class={adminSectionTitleClass}>
+                                    Live Traffic & Analytics
+                                </h2>
+                                {hasFetched.value && (
+                                    <span class="text-xs text-slate-400 dark:text-gray-500">
+                                        Last 30 days
+                                    </span>
+                                )}
+                            </div>
+
+                            {/* Load errors render above every branch so a
+                                failed fetch is never silent. */}
+                            {errorMsg.value && (
+                                <p class="text-center text-xs font-medium text-rose-600 dark:text-rose-400">
+                                    {errorMsg.value}
+                                </p>
+                            )}
+
+                            {/* Unloaded State Placeholder */}
+                            {!hasFetched.value && !isLoading.value ? (
+                                <EmptyState
+                                    icon={BarChart3}
+                                    variant="dashed"
+                                    title="Live analytics ready on demand"
+                                    description="Metrics are fetched on demand to keep page load instantaneous. Click below to load."
+                                >
+                                    <button
+                                        type="button"
+                                        onClick={() => fetchAnalytics(false)}
+                                        class={[
+                                            adminPrimaryBtnClass,
+                                            'cursor-pointer',
+                                        ]}
+                                    >
+                                        <RefreshCw class="h-3.5 w-3.5" />
+                                        <span>Load Analytics</span>
+                                    </button>
+                                </EmptyState>
+                            ) : isLoading.value && !hasFetched.value ? (
+                                <div class="mt-3 flex flex-col items-center justify-center rounded-2xl bg-white/70 py-14 text-center ring-1 ring-slate-200/60 backdrop-blur-xl dark:bg-slate-900/60 dark:ring-slate-800/60">
+                                    <RefreshCw class="h-7 w-7 animate-spin text-indigo-600 dark:text-indigo-400" />
+                                    <p class="mt-2.5 text-xs font-medium text-slate-500 dark:text-gray-400">
+                                        Loading metrics...
+                                    </p>
+                                </div>
+                            ) : (
+                                <div class="mt-3 grid gap-4 md:grid-cols-2">
+                                    <div class="space-y-3">
+                                        {/* Realtime Active */}
+                                        <div class="rounded-xl bg-emerald-50/60 p-4 ring-1 ring-emerald-200/70 backdrop-blur-xl dark:bg-emerald-500/10 dark:ring-emerald-500/20">
+                                            <div class="flex items-center justify-between">
+                                                <div class="flex items-center gap-2">
+                                                    <span class="relative flex h-2 w-2">
+                                                        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
+                                                        <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
+                                                    </span>
+                                                    <p class="text-xs font-semibold tracking-wider text-emerald-900 uppercase dark:text-emerald-300">
+                                                        Active Now
+                                                    </p>
+                                                </div>
+                                                <span class="text-xs text-slate-500 dark:text-gray-400">
+                                                    Past 5 mins
+                                                </span>
+                                            </div>
+                                            <div class="mt-2">
+                                                <h3 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100">
+                                                    {stats.value
+                                                        ?.realtime_users ?? 0}
+                                                </h3>
+                                            </div>
+                                        </div>
+
+                                        {/* Total Visits */}
+                                        <div class="rounded-xl bg-white/70 p-4 ring-1 ring-slate-200/60 backdrop-blur-xl dark:bg-slate-900/60 dark:ring-slate-800/60">
+                                            <div class="flex items-center justify-between">
+                                                <p
+                                                    class={
+                                                        adminSectionTitleClass
+                                                    }
+                                                >
+                                                    Total Visits
+                                                </p>
+                                                <Eye class="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
+                                            </div>
+                                            <div class="mt-2">
+                                                <h3 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100">
+                                                    {stats.value?.total_visits?.toLocaleString() ??
+                                                        0}
+                                                </h3>
+                                                <p class="mt-0.5 text-xs text-slate-400 dark:text-gray-500">
+                                                    Pageviews recorded
+                                                </p>
+                                            </div>
+                                        </div>
+
+                                        {/* Unique Visitors */}
+                                        <div class="rounded-xl bg-white/70 p-4 ring-1 ring-slate-200/60 backdrop-blur-xl dark:bg-slate-900/60 dark:ring-slate-800/60">
+                                            <div class="flex items-center justify-between">
+                                                <p
+                                                    class={
+                                                        adminSectionTitleClass
+                                                    }
+                                                >
+                                                    Unique Visitors
+                                                </p>
+                                                <Users class="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                                            </div>
+                                            <div class="mt-2">
+                                                <h3 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100">
+                                                    {stats.value?.total_users?.toLocaleString() ??
+                                                        0}
+                                                </h3>
+                                                <p class="mt-0.5 text-xs text-slate-400 dark:text-gray-500">
+                                                    Distinct visitors
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {/* Top Traffic Sources */}
+                                    <div class="flex flex-col rounded-xl bg-white/70 p-4 ring-1 ring-slate-200/60 backdrop-blur-xl dark:bg-slate-900/60 dark:ring-slate-800/60">
+                                        <div class="flex items-center gap-2 border-b border-slate-200/60 pb-3 dark:border-slate-800/60">
+                                            <Share2 class="h-4 w-4 text-slate-500 dark:text-gray-400" />
+                                            <h3 class={adminSectionTitleClass}>
+                                                Top Traffic Sources
+                                            </h3>
+                                        </div>
+
+                                        <div class="mt-3 flex-1">
+                                            {stats.value?.top_sources
+                                                ?.length ? (
+                                                <div class={adminListClass}>
+                                                    {stats.value.top_sources.map(
+                                                        (
+                                                            source,
+                                                            index: number,
+                                                        ) => (
+                                                            <div
+                                                                key={index}
+                                                                class="flex items-center justify-between py-2 text-xs"
+                                                            >
+                                                                <span
+                                                                    class="truncate font-medium text-slate-700 dark:text-gray-300"
+                                                                    title={
+                                                                        source.source
+                                                                    }
+                                                                >
+                                                                    {source.source ||
+                                                                        'Direct / Unknown'}
+                                                                </span>
+                                                                <span class="ml-2 shrink-0 rounded-md bg-slate-100 px-2 py-0.5 font-semibold text-slate-700 dark:bg-gray-800 dark:text-gray-300">
+                                                                    {source.visits?.toLocaleString()}
+                                                                </span>
+                                                            </div>
+                                                        ),
+                                                    )}
+                                                </div>
+                                            ) : (
+                                                <div class="flex h-full flex-col items-center justify-center py-10 text-center">
+                                                    <LayoutGrid class="h-6 w-6 text-slate-300 dark:text-gray-600" />
+                                                    <p class="mt-1.5 text-xs text-slate-400 dark:text-gray-500">
+                                                        No source data available
+                                                        yet.
+                                                    </p>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </>
+            );
+        };
+    },
+});
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
deleted file mode 100644
index d49d5792..00000000
--- a/resources/js/pages/admin/Dashboard.vue
+++ /dev/null
@@ -1,417 +0,0 @@
-<script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
-import {
-    LayoutGrid,
-    Users,
-    Eye,
-    Share2,
-    RefreshCw,
-    BarChart3,
-    CheckSquare,
-    BookOpen,
-    MessageSquare,
-    LifeBuoy,
-    Bell,
-    MessageCircle,
-    UserCheck,
-    Radio,
-    Mail,
-} from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import EmptyState from '@/components/EmptyState.vue';
-import { usePermissions } from '@/lib/usePermissions';
-
-const { can } = usePermissions();
-
-const props = defineProps<{
-    totalAccounts?: number;
-}>();
-
-const stats = ref<any>(null);
-const isLoading = ref(false);
-const hasFetched = ref(false);
-const errorMsg = ref<string | null>(null);
-
-const adminTools = [
-    {
-        name: 'Resource Moderation',
-        href: '/admin/moderation/resources',
-        icon: CheckSquare,
-        color: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-500/10 dark:text-emerald-400',
-        permission: 'moderate resources',
-    },
-    {
-        name: 'Manage Contents',
-        href: '/admin/subjects',
-        icon: BookOpen,
-        color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-500/10 dark:text-indigo-400',
-    },
-    {
-        name: 'Manage Forum',
-        href: '/admin/forums',
-        icon: MessageSquare,
-        color: 'text-blue-600 bg-blue-50 dark:bg-blue-500/10 dark:text-blue-400',
-        permission: 'manage forums',
-    },
-    {
-        name: 'Support Tickets',
-        href: '/admin/tickets',
-        icon: LifeBuoy,
-        color: 'text-amber-600 bg-amber-50 dark:bg-amber-500/10 dark:text-amber-400',
-        permission: 'manage tickets',
-    },
-    {
-        name: 'Site Notice',
-        href: '/admin/notice',
-        icon: Bell,
-        color: 'text-purple-600 bg-purple-50 dark:bg-purple-500/10 dark:text-purple-400',
-        permission: 'edit notice',
-    },
-    {
-        name: 'Global Chat',
-        href: '/admin/chat',
-        icon: MessageCircle,
-        color: 'text-teal-600 bg-teal-50 dark:bg-teal-500/10 dark:text-teal-400',
-        permission: 'manage chat',
-    },
-    {
-        name: 'Users & Roles',
-        href: '/admin/users',
-        icon: UserCheck,
-        color: 'text-sky-600 bg-sky-50 dark:bg-sky-500/10 dark:text-sky-400',
-        permission: 'view users',
-    },
-    {
-        name: 'Peer & Pokes',
-        href: '/admin/peers/settings',
-        icon: Radio,
-        color: 'text-rose-600 bg-rose-50 dark:bg-rose-500/10 dark:text-rose-400',
-        permission: 'manage peers',
-    },
-    {
-        name: 'Send Emails',
-        href: '/admin/emails/send',
-        icon: Mail,
-        color: 'text-orange-600 bg-orange-50 dark:bg-orange-500/10 dark:text-orange-400',
-        permission: 'send email',
-    },
-];
-
-const visibleTools = computed(() =>
-    adminTools.filter((tool) => !tool.permission || can(tool.permission)),
-);
-
-const fetchAnalytics = async (refresh = false) => {
-    isLoading.value = true;
-    errorMsg.value = null;
-
-    try {
-        const res = await fetch(
-            `/admin/analytics${refresh ? '?refresh=1' : ''}`,
-        );
-
-        if (!res.ok) {
-            throw new Error('Analytics could not be loaded');
-        }
-
-        stats.value = await res.json();
-        hasFetched.value = true;
-    } catch (e: any) {
-        errorMsg.value = e.message || 'Failed to load analytics';
-    } finally {
-        isLoading.value = false;
-    }
-};
-</script>
-
-<template>
-    <Head title="Staff Dashboard" />
-
-    <div class="animate-fade-in mx-auto max-w-7xl space-y-6">
-        <!-- Header -->
-        <div
-            class="flex flex-col gap-3 border-b border-slate-100 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-        >
-            <div>
-                <h1
-                    class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                >
-                    Dashboard
-                </h1>
-                <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                    Staff workspace &bull;
-                    <span class="font-medium text-slate-700 dark:text-gray-300">
-                        {{
-                            (
-                                stats?.total_accounts ??
-                                props.totalAccounts ??
-                                0
-                            ).toLocaleString()
-                        }}
-                        Total Accounts
-                    </span>
-                </p>
-            </div>
-
-            <!-- On-Demand Load / Reload Button -->
-            <button
-                type="button"
-                @click="fetchAnalytics(hasFetched)"
-                :disabled="isLoading"
-                class="inline-flex w-fit items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-700 shadow-2xs transition-colors hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-600 active:scale-95 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
-            >
-                <RefreshCw
-                    class="h-3.5 w-3.5"
-                    :class="{ 'animate-spin': isLoading }"
-                />
-                <span>{{
-                    hasFetched
-                        ? isLoading
-                            ? 'Refreshing...'
-                            : 'Reload Analytics'
-                        : isLoading
-                          ? 'Loading...'
-                          : 'Load Analytics'
-                }}</span>
-            </button>
-        </div>
-
-        <!-- Management Tools Grid -->
-        <div>
-            <div class="mb-3">
-                <h2
-                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                >
-                    Management Tools
-                </h2>
-            </div>
-
-            <div
-                class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 sm:gap-3 lg:grid-cols-3"
-            >
-                <Link
-                    v-for="tool in visibleTools"
-                    :key="tool.href"
-                    :href="tool.href"
-                    class="group flex items-center gap-2.5 rounded-xl border border-slate-200/80 bg-white p-2.5 shadow-2xs transition-all hover:border-indigo-300 hover:shadow-xs sm:p-3 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/40"
-                >
-                    <div
-                        :class="[
-                            'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors',
-                            tool.color,
-                        ]"
-                    >
-                        <component :is="tool.icon" class="h-4 w-4 stroke-[2]" />
-                    </div>
-                    <span
-                        class="text-xs leading-tight font-semibold text-slate-800 transition-colors group-hover:text-indigo-600 sm:text-sm dark:text-gray-200 dark:group-hover:text-indigo-400"
-                    >
-                        {{ tool.name }}
-                    </span>
-                </Link>
-            </div>
-        </div>
-
-        <!-- Analytics Section -->
-        <div class="space-y-4">
-            <div class="flex items-center justify-between">
-                <h2
-                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                >
-                    Live Traffic & Analytics
-                </h2>
-                <span
-                    v-if="hasFetched"
-                    class="text-xs text-slate-400 dark:text-gray-500"
-                >
-                    Last 30 days
-                </span>
-            </div>
-
-            <!-- Unloaded State Placeholder -->
-            <EmptyState
-                v-if="!hasFetched && !isLoading"
-                :icon="BarChart3"
-                variant="dashed"
-                title="Live analytics ready on demand"
-                description="Metrics are fetched on demand to keep page load instantaneous. Click below to load."
-            >
-                <button
-                    type="button"
-                    @click="fetchAnalytics(false)"
-                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition-colors hover:bg-indigo-700 active:scale-95"
-                >
-                    <RefreshCw class="h-3.5 w-3.5" />
-                    <span>Fetch Analytics</span>
-                </button>
-            </EmptyState>
-
-            <!-- Loading Spinner -->
-            <div
-                v-else-if="isLoading && !hasFetched"
-                class="flex flex-col items-center justify-center rounded-2xl border border-slate-200 bg-white py-14 text-center shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <RefreshCw
-                    class="h-7 w-7 animate-spin text-indigo-600 dark:text-indigo-400"
-                />
-                <p
-                    class="mt-2.5 text-xs font-medium text-slate-500 dark:text-gray-400"
-                >
-                    Loading metrics...
-                </p>
-            </div>
-
-            <!-- Metrics (Once loaded) -->
-            <div v-else class="grid gap-4 md:grid-cols-2">
-                <div class="space-y-3">
-                    <!-- Realtime Active -->
-                    <div
-                        class="rounded-xl border border-emerald-200/80 bg-emerald-50/40 p-4 shadow-2xs dark:border-emerald-500/30 dark:bg-emerald-950/20"
-                    >
-                        <div class="flex items-center justify-between">
-                            <div class="flex items-center gap-2">
-                                <span class="relative flex h-2 w-2">
-                                    <span
-                                        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"
-                                    />
-                                    <span
-                                        class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"
-                                    />
-                                </span>
-                                <p
-                                    class="text-xs font-bold tracking-wider text-emerald-900 uppercase dark:text-emerald-300"
-                                >
-                                    Active Now
-                                </p>
-                            </div>
-                            <span
-                                class="text-xs text-slate-500 dark:text-gray-400"
-                                >Past 5 mins</span
-                            >
-                        </div>
-                        <div class="mt-2">
-                            <h3
-                                class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
-                            >
-                                {{ stats?.realtime_users ?? 0 }}
-                            </h3>
-                        </div>
-                    </div>
-
-                    <!-- Total Visits -->
-                    <div
-                        class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-                    >
-                        <div class="flex items-center justify-between">
-                            <p
-                                class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                            >
-                                Total Visits
-                            </p>
-                            <Eye
-                                class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
-                            />
-                        </div>
-                        <div class="mt-2">
-                            <h3
-                                class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
-                            >
-                                {{ stats?.total_visits?.toLocaleString() ?? 0 }}
-                            </h3>
-                            <p
-                                class="mt-0.5 text-xs text-slate-400 dark:text-gray-500"
-                            >
-                                Pageviews recorded
-                            </p>
-                        </div>
-                    </div>
-
-                    <!-- Unique Visitors -->
-                    <div
-                        class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-                    >
-                        <div class="flex items-center justify-between">
-                            <p
-                                class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                            >
-                                Unique Visitors
-                            </p>
-                            <Users
-                                class="h-4 w-4 text-blue-600 dark:text-blue-400"
-                            />
-                        </div>
-                        <div class="mt-2">
-                            <h3
-                                class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
-                            >
-                                {{ stats?.total_users?.toLocaleString() ?? 0 }}
-                            </h3>
-                            <p
-                                class="mt-0.5 text-xs text-slate-400 dark:text-gray-500"
-                            >
-                                Distinct visitors
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Top Traffic Sources -->
-                <div
-                    class="flex flex-col rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <div
-                        class="flex items-center gap-2 border-b border-slate-100 pb-3 dark:border-gray-800"
-                    >
-                        <Share2
-                            class="h-4 w-4 text-slate-500 dark:text-gray-400"
-                        />
-                        <h3
-                            class="text-xs font-bold tracking-wider text-slate-900 uppercase dark:text-gray-100"
-                        >
-                            Top Traffic Sources
-                        </h3>
-                    </div>
-
-                    <div class="mt-3 flex-1">
-                        <div
-                            v-if="stats?.top_sources?.length"
-                            class="divide-y divide-slate-100 dark:divide-gray-800"
-                        >
-                            <div
-                                v-for="(source, index) in stats.top_sources"
-                                :key="index"
-                                class="flex items-center justify-between py-2 text-xs"
-                            >
-                                <span
-                                    class="truncate font-medium text-slate-700 dark:text-gray-300"
-                                    :title="source.source"
-                                >
-                                    {{ source.source || 'Direct / Unknown' }}
-                                </span>
-                                <span
-                                    class="ml-2 shrink-0 rounded-md bg-slate-100 px-2 py-0.5 font-semibold text-slate-700 dark:bg-gray-800 dark:text-gray-300"
-                                >
-                                    {{ source.visits?.toLocaleString() }}
-                                </span>
-                            </div>
-                        </div>
-
-                        <div
-                            v-else
-                            class="flex h-full flex-col items-center justify-center py-10 text-center"
-                        >
-                            <LayoutGrid
-                                class="h-6 w-6 text-slate-300 dark:text-gray-600"
-                            />
-                            <p
-                                class="mt-1.5 text-xs text-slate-400 dark:text-gray-500"
-                            >
-                                No source data available yet.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/EmailSend.tsx b/resources/js/pages/admin/EmailSend.tsx
new file mode 100644
index 00000000..47fcfdc2
--- /dev/null
+++ b/resources/js/pages/admin/EmailSend.tsx
@@ -0,0 +1,1183 @@
+import { Head, useForm, usePage } from '@inertiajs/vue3';
+import {
+    Loader2,
+    Mail,
+    Bell,
+    Send,
+    Users,
+    GraduationCap,
+    ShieldCheck,
+    AlertCircle,
+    CheckCircle2,
+    Eye,
+    X,
+    Upload,
+    Trash2,
+    Download,
+    ChevronDown,
+} from 'lucide-vue-next';
+import {
+    Teleport,
+    computed,
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    onUnmounted,
+    ref,
+    watch,
+} from 'vue';
+
+import {
+    AdminPageHeader,
+    adminDangerIconBtnClass,
+    adminInputClass,
+    adminPanelClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSectionTitleClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+import HTMLEditor from '@/components/HTMLEditor.vue';
+import { markAdminFormDirty } from '@/lib/adminFormGuard';
+
+interface EmailFormFields {
+    recipients: string;
+    subject: string;
+    body: string;
+    image: File | null;
+    send_email: boolean;
+    send_in_app: boolean;
+    action_url: string;
+}
+
+interface RecipientsResponse {
+    emails?: unknown;
+}
+
+export default defineComponent({
+    name: 'AdminEmailSend',
+    props: {
+        allUsersCount: { type: Number, default: 0 },
+        recipientCount: { type: Number, default: 0 },
+        studentsCount: { type: Number, default: 0 },
+        staffCount: { type: Number, default: 0 },
+    },
+    setup(props) {
+        const page = usePage();
+        const appName = computed(() => {
+            const propsRecord = page.props as Record<string, unknown>;
+
+            return typeof propsRecord.appName === 'string'
+                ? propsRecord.appName
+                : 'HSCStack';
+        });
+
+        const showConfirmModal = ref(false);
+        const showPreviewModal = ref(false);
+        const isImportDropdownOpen = ref(false);
+        const isImporting = ref(false);
+
+        const importDropdownRef = ref<HTMLDivElement | null>(null);
+        const imagePreview = ref<string | null>(null);
+        const fileInput = ref<HTMLInputElement | null>(null);
+
+        const form = useForm<EmailFormFields>({
+            recipients: '',
+            subject: '',
+            body: '',
+            image: null as File | null,
+            send_email: true,
+            send_in_app: false,
+            action_url: '',
+        });
+
+        watch(
+            () => form.isDirty,
+            (v) => markAdminFormDirty(v),
+        );
+
+        onUnmounted(() => markAdminFormDirty(false));
+
+        const formattedCurrentDate = computed(() => {
+            return new Date().toLocaleDateString('en-US', {
+                weekday: 'short',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            });
+        });
+
+        // Click outside handler for import dropdown
+        const handleClickOutside = (event: MouseEvent): void => {
+            if (
+                importDropdownRef.value &&
+                !importDropdownRef.value.contains(event.target as Node)
+            ) {
+                isImportDropdownOpen.value = false;
+            }
+        };
+
+        onMounted(() => {
+            document.addEventListener('click', handleClickOutside);
+        });
+
+        onBeforeUnmount(() => {
+            document.removeEventListener('click', handleClickOutside);
+        });
+
+        // Parse and analyze recipient emails in real-time
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+        const recipientStats = computed(() => {
+            const raw = form.recipients.trim();
+
+            if (!raw) {
+                return {
+                    validEmails: [] as string[],
+                    invalidItems: [] as string[],
+                    totalLines: 0,
+                    duplicateCount: 0,
+                };
+            }
+
+            const tokens = raw
+                .split(/[\r\n,;]+/)
+                .map((t) => t.trim())
+                .filter(Boolean);
+            const seen = new Set<string>();
+            const validEmails: string[] = [];
+            const invalidItems: string[] = [];
+            let duplicateCount = 0;
+
+            for (const token of tokens) {
+                const lower = token.toLowerCase();
+
+                if (emailRegex.test(lower)) {
+                    if (seen.has(lower)) {
+                        duplicateCount++;
+                    } else {
+                        seen.add(lower);
+                        validEmails.push(lower);
+                    }
+                } else {
+                    invalidItems.push(token);
+                }
+            }
+
+            return {
+                validEmails,
+                invalidItems,
+                totalLines: tokens.length,
+                duplicateCount,
+            };
+        });
+
+        const handleImageSelect = (event: Event): void => {
+            const target = event.target as HTMLInputElement;
+
+            if (target.files && target.files[0]) {
+                const file = target.files[0];
+                form.image = file;
+                imagePreview.value = URL.createObjectURL(file);
+            }
+        };
+
+        const handleRemoveImage = (): void => {
+            form.image = null;
+            imagePreview.value = null;
+
+            if (fileInput.value) {
+                fileInput.value.value = '';
+            }
+        };
+
+        /**
+         * Merges subscriber strings for the selected audience into the list.
+         * Existing entries are trimmed and lowercased; exact duplicates are
+         * removed across both lists. Concurrent calls are ignored. HTTP,
+         * network, or JSON parsing failures leave recipients unchanged and
+         * do not reject the returned promise.
+         */
+        const importSubscribers = async (
+            type: 'subscribers' | 'all' | 'students' | 'staff',
+        ): Promise<void> => {
+            if (isImporting.value) {
+                return;
+            }
+
+            isImporting.value = true;
+            isImportDropdownOpen.value = false;
+
+            try {
+                const response = await fetch(
+                    `/admin/emails/recipients?type=${type}`,
+                    {
+                        headers: {
+                            Accept: 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest',
+                        },
+                    },
+                );
+
+                if (response.ok) {
+                    const data = (await response.json()) as RecipientsResponse;
+                    const rawEmails: unknown = data.emails;
+                    const importedList: string[] = Array.isArray(rawEmails)
+                        ? rawEmails.filter(
+                              (e): e is string => typeof e === 'string',
+                          )
+                        : [];
+
+                    // Merge with existing emails avoiding duplicates
+                    const currentTokens = form.recipients
+                        .split(/[\r\n,;]+/)
+                        .map((t) => t.trim().toLowerCase())
+                        .filter(Boolean);
+
+                    const mergedSet = new Set([
+                        ...currentTokens,
+                        ...importedList,
+                    ]);
+                    form.recipients = Array.from(mergedSet).join('\n');
+                }
+            } catch (e) {
+                console.error('Failed to import recipients:', e);
+            } finally {
+                isImporting.value = false;
+            }
+        };
+
+        /**
+         * Replaces the list with lowercase, unique valid addresses, one per
+         * line, discarding invalid entries separated by newlines, commas, or
+         * semicolons. Validity uses the page's basic email pattern.
+         */
+        const cleanAndFormatRecipients = (): void => {
+            const valid = recipientStats.value.validEmails;
+            form.recipients = valid.join('\n');
+        };
+
+        /**
+         * Clears prior errors and opens confirmation when at least one valid
+         * recipient and a nonblank subject and body exist. Otherwise sets
+         * field errors; this does not clean the recipient list or send mail.
+         */
+        const handleSendClick = (): void => {
+            // Client-side validation is idempotent here; without clearing,
+            // errors from a previous failed attempt stick around until the
+            // server response replaces them.
+            form.clearErrors();
+
+            // Guard also covers Enter-key implicit submission, which fires
+            // the form handler without touching the disabled submit button.
+            if (!form.send_email && !form.send_in_app) {
+                return;
+            }
+
+            if (recipientStats.value.validEmails.length === 0) {
+                form.setError(
+                    'recipients',
+                    'Please provide at least one valid recipient email.',
+                );
+
+                return;
+            }
+
+            if (!form.subject.trim() || !form.body.trim()) {
+                if (!form.subject.trim()) {
+                    form.setError('subject', 'Subject is required.');
+                }
+
+                if (!form.body.trim()) {
+                    form.setError('body', 'Body is required.');
+                }
+
+                return;
+            }
+
+            showConfirmModal.value = true;
+        };
+
+        /** Closes confirmation and posts the current fields as multipart data. */
+        const submitForm = (): void => {
+            showConfirmModal.value = false;
+            form.post('/admin/emails/send', {
+                preserveScroll: true,
+                forceFormData: true,
+            });
+        };
+
+        const onRecipientsInput = (e: Event) => {
+            form.recipients = (e.target as HTMLTextAreaElement).value;
+        };
+
+        const onSubjectInput = (e: Event) => {
+            form.subject = (e.target as HTMLInputElement).value;
+        };
+
+        return () => (
+            <>
+                <Head title="Send Email" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Send Email"
+                        description="Compose and dispatch email announcements to custom recipient lists or imported platform subscribers."
+                    >
+                        {{
+                            actions: () => (
+                                <>
+                                    <span class="inline-flex items-center gap-1.5 text-[11px] text-slate-500 sm:mr-1 dark:text-gray-400">
+                                        <Users class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400" />
+                                        <span>
+                                            <span class="font-bold text-slate-700 dark:text-gray-200">
+                                                {props.recipientCount}
+                                            </span>{' '}
+                                            total subscribers
+                                        </span>
+                                    </span>
+                                    <button
+                                        type="button"
+                                        onClick={() => {
+                                            showPreviewModal.value = true;
+                                        }}
+                                        class={adminSecondaryBtnClass}
+                                    >
+                                        <Eye class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400" />
+                                        <span>Preview</span>
+                                    </button>
+                                </>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    <form
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            handleSendClick();
+                        }}
+                        class={[adminPanelClass, 'mx-auto max-w-4xl space-y-8']}
+                    >
+                        {/* 1. Delivery Channels */}
+                        <section class="space-y-3">
+                            <div class="flex items-center gap-2">
+                                <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-[11px] font-bold text-white dark:bg-indigo-500">
+                                    1
+                                </span>
+                                <h2 class={adminSectionTitleClass}>
+                                    Delivery Channels
+                                </h2>
+                            </div>
+
+                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                                <button
+                                    type="button"
+                                    role="switch"
+                                    aria-checked={form.send_email}
+                                    onClick={() => {
+                                        form.send_email = !form.send_email;
+                                    }}
+                                    class={[
+                                        'flex cursor-pointer items-start gap-3 rounded-xl p-3.5 text-left ring-1 transition-colors focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-[0.99]',
+                                        form.send_email
+                                            ? 'bg-indigo-50/40 ring-indigo-300/70 dark:bg-indigo-500/10 dark:ring-indigo-500/40'
+                                            : 'bg-white/40 ring-slate-200/60 hover:bg-white/70 dark:bg-slate-900/40 dark:ring-slate-800/60 dark:hover:bg-slate-900/70',
+                                    ]}
+                                >
+                                    <span
+                                        class={[
+                                            'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors',
+                                            form.send_email
+                                                ? 'bg-indigo-600 text-white dark:bg-indigo-500'
+                                                : 'bg-slate-100 text-slate-400 dark:bg-slate-800 dark:text-gray-500',
+                                        ]}
+                                    >
+                                        <Mail class="h-4 w-4" />
+                                    </span>
+                                    <span class="min-w-0">
+                                        <span class="block text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                            Email Broadcast
+                                        </span>
+                                        <span class="mt-0.5 block text-[11px] leading-relaxed text-slate-500 dark:text-gray-400">
+                                            Rich HTML announcement delivered to
+                                            recipients&apos; inboxes.
+                                        </span>
+                                    </span>
+                                </button>
+
+                                <button
+                                    type="button"
+                                    role="switch"
+                                    aria-checked={form.send_in_app}
+                                    onClick={() => {
+                                        form.send_in_app = !form.send_in_app;
+                                    }}
+                                    class={[
+                                        'flex cursor-pointer items-start gap-3 rounded-xl p-3.5 text-left ring-1 transition-colors focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-[0.99]',
+                                        form.send_in_app
+                                            ? 'bg-indigo-50/40 ring-indigo-300/70 dark:bg-indigo-500/10 dark:ring-indigo-500/40'
+                                            : 'bg-white/40 ring-slate-200/60 hover:bg-white/70 dark:bg-slate-900/40 dark:ring-slate-800/60 dark:hover:bg-slate-900/70',
+                                    ]}
+                                >
+                                    <span
+                                        class={[
+                                            'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors',
+                                            form.send_in_app
+                                                ? 'bg-indigo-600 text-white dark:bg-indigo-500'
+                                                : 'bg-slate-100 text-slate-400 dark:bg-slate-800 dark:text-gray-500',
+                                        ]}
+                                    >
+                                        <Bell class="h-4 w-4" />
+                                    </span>
+                                    <span class="min-w-0">
+                                        <span class="block text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                            In-App Notification
+                                        </span>
+                                        <span class="mt-0.5 block text-[11px] leading-relaxed text-slate-500 dark:text-gray-400">
+                                            Push to notification bells with an
+                                            interactive details modal.
+                                        </span>
+                                    </span>
+                                </button>
+                            </div>
+
+                            {form.send_in_app && (
+                                <div class="space-y-1.5">
+                                    <label
+                                        for="action_url"
+                                        class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                    >
+                                        Action Link{' '}
+                                        <span class="font-normal text-slate-400 dark:text-gray-500">
+                                            (optional)
+                                        </span>
+                                    </label>
+                                    <input
+                                        id="action_url"
+                                        type="url"
+                                        value={form.action_url}
+                                        onInput={(e) => {
+                                            form.action_url = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        placeholder="/blogs or https://example.com/campaign"
+                                        maxlength={255}
+                                        class={adminInputClass}
+                                    />
+                                    <p class="text-[11px] text-slate-500 dark:text-gray-400">
+                                        Leave blank to open the full
+                                        announcement details in the notification
+                                        modal instead.
+                                    </p>
+                                </div>
+                            )}
+                        </section>
+
+                        {/* 2. Recipients */}
+                        <section class="space-y-3">
+                            <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                                <div class="flex items-center gap-2">
+                                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-[11px] font-bold text-white dark:bg-indigo-500">
+                                        2
+                                    </span>
+                                    <h2 class={adminSectionTitleClass}>
+                                        Recipients
+                                    </h2>
+                                </div>
+
+                                <div class="flex items-center gap-1.5">
+                                    <div
+                                        ref={importDropdownRef}
+                                        class="relative"
+                                    >
+                                        <button
+                                            type="button"
+                                            disabled={isImporting.value}
+                                            onClick={() => {
+                                                isImportDropdownOpen.value =
+                                                    !isImportDropdownOpen.value;
+                                            }}
+                                            class="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-[10px] bg-white/70 px-3 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-900/60 dark:text-gray-200 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
+                                        >
+                                            {isImporting.value ? (
+                                                <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                                            ) : (
+                                                <Download class="h-3.5 w-3.5" />
+                                            )}
+                                            <span>Import Subscribers</span>
+                                            <ChevronDown
+                                                class={[
+                                                    'h-3.5 w-3.5 text-slate-400 transition-transform duration-200 dark:text-gray-500',
+                                                    isImportDropdownOpen.value
+                                                        ? 'rotate-180'
+                                                        : '',
+                                                ]}
+                                            />
+                                        </button>
+
+                                        {isImportDropdownOpen.value && (
+                                            <div class="absolute right-0 z-30 mt-1.5 w-52 rounded-xl bg-white/90 p-1 shadow-lg ring-1 ring-slate-200/70 backdrop-blur-xl dark:bg-slate-900/90 dark:ring-slate-800/70">
+                                                <button
+                                                    type="button"
+                                                    disabled={
+                                                        props.recipientCount ===
+                                                        0
+                                                    }
+                                                    onClick={() =>
+                                                        importSubscribers(
+                                                            'subscribers',
+                                                        )
+                                                    }
+                                                    class="flex w-full cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
+                                                >
+                                                    <span class="flex items-center gap-2">
+                                                        <Mail class="h-3.5 w-3.5 text-indigo-500 dark:text-indigo-400" />
+                                                        <span>
+                                                            All Subscribers
+                                                        </span>
+                                                    </span>
+                                                    <span class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[11px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400">
+                                                        {props.recipientCount}
+                                                    </span>
+                                                </button>
+
+                                                <button
+                                                    type="button"
+                                                    disabled={
+                                                        props.allUsersCount ===
+                                                        0
+                                                    }
+                                                    onClick={() =>
+                                                        importSubscribers('all')
+                                                    }
+                                                    class="flex w-full cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
+                                                >
+                                                    <span class="flex items-center gap-2">
+                                                        <Users class="h-3.5 w-3.5 text-indigo-500 dark:text-indigo-400" />
+                                                        <span>
+                                                            All Registered Users
+                                                        </span>
+                                                    </span>
+                                                    <span class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[11px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400">
+                                                        {props.allUsersCount}
+                                                    </span>
+                                                </button>
+
+                                                <button
+                                                    type="button"
+                                                    disabled={
+                                                        props.studentsCount ===
+                                                        0
+                                                    }
+                                                    onClick={() =>
+                                                        importSubscribers(
+                                                            'students',
+                                                        )
+                                                    }
+                                                    class="flex w-full cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
+                                                >
+                                                    <span class="flex items-center gap-2">
+                                                        <GraduationCap class="h-3.5 w-3.5 text-indigo-500 dark:text-indigo-400" />
+                                                        <span>
+                                                            All Students
+                                                        </span>
+                                                    </span>
+                                                    <span class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[11px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400">
+                                                        {props.studentsCount}
+                                                    </span>
+                                                </button>
+
+                                                <button
+                                                    type="button"
+                                                    disabled={
+                                                        props.staffCount === 0
+                                                    }
+                                                    onClick={() =>
+                                                        importSubscribers(
+                                                            'staff',
+                                                        )
+                                                    }
+                                                    class="flex w-full cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
+                                                >
+                                                    <span class="flex items-center gap-2">
+                                                        <ShieldCheck class="h-3.5 w-3.5 text-indigo-500 dark:text-indigo-400" />
+                                                        <span>All Staff</span>
+                                                    </span>
+                                                    <span class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[11px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400">
+                                                        {props.staffCount}
+                                                    </span>
+                                                </button>
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    {form.recipients.trim() && (
+                                        <button
+                                            type="button"
+                                            onClick={() => {
+                                                form.recipients = '';
+                                            }}
+                                            title="Clear all recipients"
+                                            class={adminDangerIconBtnClass}
+                                        >
+                                            <Trash2 class="h-3 w-3" />
+                                        </button>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div>
+                                <label
+                                    for="recipients"
+                                    class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                >
+                                    Recipients (One email per line)
+                                </label>
+                                <textarea
+                                    id="recipients"
+                                    value={form.recipients}
+                                    onInput={onRecipientsInput}
+                                    rows={6}
+                                    placeholder={
+                                        'user1@example.com\nuser2@gmail.com\ncustom-lead@domain.com'
+                                    }
+                                    disabled={
+                                        form.processing || isImporting.value
+                                    }
+                                    class={[
+                                        'w-full rounded-[10px] border border-slate-200 bg-white px-3 py-2 font-mono text-xs leading-relaxed text-slate-900 transition placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400',
+                                        form.errors.recipients
+                                            ? 'border-rose-300 focus:border-rose-500 dark:border-rose-500/40'
+                                            : 'border-slate-200 focus:border-indigo-500 dark:border-gray-700',
+                                    ]}
+                                ></textarea>
+
+                                {form.errors.recipients && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.recipients}
+                                    </p>
+                                )}
+
+                                <div class="mt-2 flex flex-wrap items-center justify-between gap-2">
+                                    <div class="flex flex-wrap items-center gap-1.5">
+                                        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
+                                            <CheckCircle2 class="h-3 w-3" />
+                                            <span>
+                                                {
+                                                    recipientStats.value
+                                                        .validEmails.length
+                                                }{' '}
+                                                valid unique
+                                            </span>
+                                        </span>
+
+                                        {recipientStats.value.duplicateCount >
+                                            0 && (
+                                            <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-600 dark:bg-gray-800 dark:text-gray-400">
+                                                <span>
+                                                    {
+                                                        recipientStats.value
+                                                            .duplicateCount
+                                                    }{' '}
+                                                    duplicate
+                                                    {recipientStats.value
+                                                        .duplicateCount > 1
+                                                        ? 's'
+                                                        : ''}{' '}
+                                                    auto-merged
+                                                </span>
+                                            </span>
+                                        )}
+
+                                        {recipientStats.value.invalidItems
+                                            .length > 0 && (
+                                            <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">
+                                                <AlertCircle class="h-3 w-3" />
+                                                <span>
+                                                    {
+                                                        recipientStats.value
+                                                            .invalidItems.length
+                                                    }{' '}
+                                                    invalid ignored
+                                                </span>
+                                            </span>
+                                        )}
+                                    </div>
+
+                                    {(recipientStats.value.duplicateCount > 0 ||
+                                        recipientStats.value.invalidItems
+                                            .length > 0) && (
+                                        <button
+                                            type="button"
+                                            onClick={cleanAndFormatRecipients}
+                                            class="cursor-pointer text-[11px] font-semibold text-indigo-600 underline-offset-2 transition hover:text-indigo-700 hover:underline focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-indigo-400 dark:hover:text-indigo-300"
+                                        >
+                                            Format & Clean List
+                                        </button>
+                                    )}
+                                </div>
+
+                                <p class="mt-1.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Paste any third-party list, single email, or
+                                    import registered platform subscribers.
+                                </p>
+                            </div>
+                        </section>
+
+                        {/* 3. Content */}
+                        <section class="space-y-4">
+                            <div class="flex items-center gap-2">
+                                <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-[11px] font-bold text-white dark:bg-indigo-500">
+                                    2
+                                </span>
+                                <h2 class={adminSectionTitleClass}>Content</h2>
+                            </div>
+
+                            <div>
+                                <label
+                                    for="subject"
+                                    class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                >
+                                    Email Subject
+                                </label>
+                                <input
+                                    value={form.subject}
+                                    onInput={onSubjectInput}
+                                    type="text"
+                                    id="subject"
+                                    required
+                                    placeholder="e.g. Important Announcement: New Resources & Learning Updates"
+                                    disabled={form.processing}
+                                    class={[
+                                        'w-full rounded-[10px] border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400',
+                                        form.errors.subject
+                                            ? 'border-rose-300 focus:border-rose-500 dark:border-rose-500/40'
+                                            : 'border-slate-200 focus:border-indigo-500 dark:border-gray-700',
+                                    ]}
+                                />
+                                {form.errors.subject && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.subject}
+                                    </p>
+                                )}
+                            </div>
+
+                            <div>
+                                <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                    Cover / Banner Image (Optional)
+                                </label>
+
+                                <input
+                                    ref={fileInput}
+                                    type="file"
+                                    id="email_image_upload"
+                                    class="hidden"
+                                    accept="image/png,image/jpeg,image/jpg,image/webp"
+                                    disabled={form.processing}
+                                    onChange={handleImageSelect}
+                                />
+
+                                {imagePreview.value ? (
+                                    <div class="space-y-2">
+                                        <img
+                                            src={imagePreview.value}
+                                            alt="Banner preview"
+                                            class="max-h-56 w-full rounded-xl border border-slate-200 object-cover dark:border-gray-700"
+                                        />
+                                        <div class="flex items-center justify-between gap-2">
+                                            <span class="min-w-0 truncate text-[11px] text-slate-500 dark:text-gray-400">
+                                                {form.image?.name}
+                                            </span>
+                                            <div class="flex shrink-0 items-center gap-1.5">
+                                                <label
+                                                    for="email_image_upload"
+                                                    class="inline-flex h-8 cursor-pointer items-center rounded-[10px] bg-white/70 px-2.5 text-[11px] font-semibold text-slate-600 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 active:scale-95 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
+                                                >
+                                                    Change
+                                                </label>
+                                                <button
+                                                    type="button"
+                                                    onClick={handleRemoveImage}
+                                                    class="inline-flex h-8 cursor-pointer items-center gap-1 rounded-[10px] px-2.5 text-[11px] font-semibold text-rose-600 transition-colors hover:bg-rose-500/10 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-rose-400"
+                                                >
+                                                    <Trash2 class="h-3 w-3" />
+                                                    Remove
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div
+                                        class={[
+                                            'rounded-xl border border-dashed p-5 text-center transition dark:bg-gray-900',
+                                            form.errors.image
+                                                ? 'border-rose-300 dark:border-rose-500/40'
+                                                : 'border-slate-200 dark:border-gray-700',
+                                        ]}
+                                    >
+                                        <label
+                                            for="email_image_upload"
+                                            class="flex cursor-pointer flex-col items-center justify-center"
+                                        >
+                                            <Upload class="mb-1.5 h-4 w-4 text-slate-400 dark:text-gray-500" />
+                                            <span class="text-xs font-semibold text-slate-700 dark:text-gray-200">
+                                                Click to upload header banner
+                                                image
+                                            </span>
+                                            <span class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                                PNG, JPG or WEBP (Max 5MB)
+                                            </span>
+                                        </label>
+                                    </div>
+                                )}
+
+                                {form.errors.image && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.image}
+                                    </p>
+                                )}
+                            </div>
+
+                            <div>
+                                <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                    Email Body (HTML)
+                                </label>
+
+                                <HTMLEditor
+                                    modelValue={form.body}
+                                    onUpdate:modelValue={(v: string) => {
+                                        form.body = v;
+                                    }}
+                                    error={form.errors.body}
+                                    placeholder="Write your email content here... (supports links, quotes, and lists)"
+                                />
+
+                                {form.errors.body && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.body}
+                                    </p>
+                                )}
+                            </div>
+                        </section>
+
+                        {/* 4. Review & Send */}
+                        <div class="sticky bottom-0 flex flex-col gap-3 border-t border-slate-200/60 bg-white/90 py-3 backdrop-blur sm:flex-row sm:items-center sm:justify-between dark:border-slate-800/60 dark:bg-slate-900/90">
+                            <div>
+                                <p class="text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                    Send to{' '}
+                                    {recipientStats.value.validEmails.length}{' '}
+                                    {recipientStats.value.validEmails.length ===
+                                    1
+                                        ? 'Recipient'
+                                        : 'Recipients'}
+                                </p>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Broadcasts are queued and delivered
+                                    asynchronously. Duplicates and invalid
+                                    addresses are automatically handled.
+                                </p>
+                            </div>
+
+                            <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+                                <button
+                                    type="button"
+                                    onClick={() => {
+                                        showPreviewModal.value = true;
+                                    }}
+                                    class={[
+                                        adminSecondaryBtnClass,
+                                        'w-full sm:w-auto',
+                                    ]}
+                                >
+                                    <Eye class="h-3.5 w-3.5" />
+                                    <span>Preview</span>
+                                </button>
+
+                                <button
+                                    type="submit"
+                                    disabled={
+                                        form.processing ||
+                                        (!form.send_email &&
+                                            !form.send_in_app) ||
+                                        recipientStats.value.validEmails
+                                            .length === 0
+                                    }
+                                    class={[
+                                        adminPrimaryBtnClass,
+                                        'w-full sm:w-auto',
+                                    ]}
+                                >
+                                    {form.processing ? (
+                                        <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                                    ) : (
+                                        <Send class="h-3.5 w-3.5" />
+                                    )}
+                                    <span>
+                                        Send to{' '}
+                                        {
+                                            recipientStats.value.validEmails
+                                                .length
+                                        }{' '}
+                                        {recipientStats.value.validEmails
+                                            .length === 1
+                                            ? 'Recipient'
+                                            : 'Recipients'}
+                                    </span>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
+                {/* Live PC / Desktop Email Client Preview Modal */}
+                <Teleport to="body">
+                    {showPreviewModal.value && (
+                        <div class="fixed inset-0 z-[100] flex items-center justify-center overflow-y-auto bg-slate-900/60 p-3 backdrop-blur-xs sm:p-6 dark:bg-black/70">
+                            <div class="relative my-auto w-full max-w-2xl overflow-hidden rounded-xl border border-slate-200 bg-slate-100 shadow-2xl dark:border-gray-700 dark:bg-gray-900">
+                                {/* Desktop Window Titlebar */}
+                                <div class="flex items-center justify-between border-b border-slate-200 bg-white/80 px-4 py-2.5 backdrop-blur-md dark:border-gray-700 dark:bg-gray-950/80">
+                                    <div class="flex items-center gap-2">
+                                        <span class="inline-block h-3 w-3 rounded-full bg-rose-500/80"></span>
+                                        <span class="inline-block h-3 w-3 rounded-full bg-amber-500/80"></span>
+                                        <span class="inline-block h-3 w-3 rounded-full bg-emerald-500/80"></span>
+                                        <div class="ml-2 flex items-center gap-1.5 text-xs font-semibold text-slate-600 dark:text-gray-300">
+                                            <Mail class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400" />
+                                            <span>Email Preview</span>
+                                        </div>
+                                    </div>
+
+                                    <button
+                                        type="button"
+                                        onClick={() => {
+                                            showPreviewModal.value = false;
+                                        }}
+                                        title="Close preview"
+                                        aria-label="Close preview"
+                                        class="cursor-pointer rounded-lg p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                                    >
+                                        <X class="h-4 w-4" />
+                                    </button>
+                                </div>
+
+                                {/* Email Client Header Info */}
+                                <div class="border-b border-slate-200 bg-white px-5 py-3 dark:border-gray-700 dark:bg-gray-950">
+                                    <h2 class="text-sm font-bold text-slate-900 dark:text-gray-100">
+                                        {form.subject.trim() ||
+                                            '(No subject specified)'}
+                                    </h2>
+
+                                    <div class="mt-1.5 space-y-1 text-xs text-slate-500 dark:text-gray-400">
+                                        <div class="flex items-center gap-2">
+                                            <span class="w-12 font-semibold text-slate-500 dark:text-gray-400">
+                                                From:
+                                            </span>
+                                            <span class="font-medium text-slate-800 dark:text-gray-200">
+                                                {appName.value}{' '}
+                                                {'<team@example.com>'}
+                                            </span>
+                                        </div>
+                                        <div class="flex items-center gap-2">
+                                            <span class="w-12 font-semibold text-slate-500 dark:text-gray-400">
+                                                To:
+                                            </span>
+                                            <span class="font-medium text-slate-800 dark:text-gray-200">
+                                                {
+                                                    recipientStats.value
+                                                        .validEmails.length
+                                                }{' '}
+                                                unique recipient
+                                                {recipientStats.value
+                                                    .validEmails.length === 1
+                                                    ? ''
+                                                    : 's'}
+                                            </span>
+                                        </div>
+                                        <div class="flex items-center gap-2">
+                                            <span class="w-12 font-semibold text-slate-500 dark:text-gray-400">
+                                                Date:
+                                            </span>
+                                            <span>
+                                                {formattedCurrentDate.value}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Email Body Container (Exact 600px Template Rendering) */}
+                                <div class="max-h-[65vh] overflow-y-auto bg-slate-100 p-4 dark:bg-gray-900">
+                                    <div class="mx-auto max-w-[580px] overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs dark:border-gray-700 dark:bg-gray-950">
+                                        {/* Template Header with Logo */}
+                                        <div class="border-b border-slate-200/60 bg-white py-4 text-center dark:border-slate-800/60 dark:bg-gray-950">
+                                            <div class="inline-flex items-center gap-2.5">
+                                                <img
+                                                    src="/favicon.svg"
+                                                    alt="HSCStack"
+                                                    class="h-8 w-8 rounded-lg shadow-xs"
+                                                />
+                                                <span class="text-lg font-extrabold tracking-tight text-slate-900 dark:text-gray-100">
+                                                    HSC
+                                                    <span class="text-indigo-600 dark:text-indigo-400">
+                                                        Stack
+                                                    </span>
+                                                </span>
+                                            </div>
+                                        </div>
+
+                                        {/* Template Content */}
+                                        <div class="p-6 text-sm leading-relaxed text-slate-700 dark:text-gray-300">
+                                            <p class="mb-4 font-semibold text-slate-900 dark:text-gray-100">
+                                                Hello{' '}
+                                                {recipientStats.value
+                                                    .validEmails.length === 1
+                                                    ? recipientStats.value
+                                                          .validEmails[0]
+                                                    : '[Recipient Name]'}
+                                                ,
+                                            </p>
+
+                                            {/* Banner Image in Preview */}
+                                            {imagePreview.value && (
+                                                <div class="mb-5 text-center">
+                                                    <img
+                                                        src={imagePreview.value}
+                                                        alt="Announcement preview"
+                                                        class="max-h-64 w-full rounded-xl border border-slate-200 object-cover dark:border-gray-700"
+                                                    />
+                                                </div>
+                                            )}
+
+                                            {/* Rendered HTML Content */}
+                                            {form.body.trim() ? (
+                                                <div
+                                                    class="email-rendered-preview space-y-3"
+                                                    innerHTML={form.body}
+                                                ></div>
+                                            ) : (
+                                                <div class="py-8 text-center text-xs text-slate-500 italic dark:text-gray-400">
+                                                    Your composed email content
+                                                    will appear here...
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        {/* Template Footer */}
+                                        <div class="border-t border-slate-200/60 bg-slate-50 px-6 py-5 text-center text-xs text-slate-500 dark:border-slate-800/60 dark:bg-gray-900 dark:text-gray-400">
+                                            <p class="mb-2 font-semibold text-slate-700 dark:text-gray-200">
+                                                HSCStack — The Open Learning
+                                                Platform
+                                            </p>
+
+                                            <div class="my-2 flex items-center justify-center gap-3 text-xs font-medium text-indigo-600 dark:text-indigo-400">
+                                                <span>Visit Platform</span>
+                                                <span>•</span>
+                                                <span>Read Blogs</span>
+                                                <span>•</span>
+                                                <span>Support Us</span>
+                                            </div>
+
+                                            <p class="mt-3 text-[11px] text-slate-500 dark:text-gray-400">
+                                                Manage email preferences in your{' '}
+                                                <span class="text-indigo-600 underline dark:text-indigo-400">
+                                                    Account Settings
+                                                </span>
+                                                , or visit our{' '}
+                                                <span class="text-indigo-600 underline dark:text-indigo-400">
+                                                    Support Center
+                                                </span>{' '}
+                                                if you need assistance or
+                                                don&apos;t have an account.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Preview Footer Modal Action */}
+                                <div class="flex items-center justify-end border-t border-slate-200 bg-white/80 px-4 py-2.5 dark:border-gray-700 dark:bg-gray-950/80">
+                                    <button
+                                        type="button"
+                                        onClick={() => {
+                                            showPreviewModal.value = false;
+                                        }}
+                                        class="inline-flex h-8 cursor-pointer items-center rounded-[10px] bg-indigo-600 px-3.5 text-xs font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                                    >
+                                        Done Previewing
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </Teleport>
+
+                {/* Send Confirmation Modal */}
+                <Teleport to="body">
+                    {showConfirmModal.value && (
+                        <div class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/50 p-4 backdrop-blur-xs dark:bg-black/60">
+                            <div class="relative w-full max-w-md rounded-xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-700 dark:bg-gray-900">
+                                <div class="mb-3 flex items-center gap-3">
+                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400">
+                                        <Send class="h-5 w-5" />
+                                    </div>
+                                    <div>
+                                        <h3 class="text-sm font-bold text-slate-900 dark:text-gray-100">
+                                            Confirm Broadcast Queue
+                                        </h3>
+                                        <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                            {form.send_email && form.send_in_app
+                                                ? 'Email & In-App Notification'
+                                                : form.send_email
+                                                  ? `Email Only (${recipientStats.value.validEmails.length} recipient${recipientStats.value.validEmails.length === 1 ? '' : 's'})`
+                                                  : 'In-App Bell Notification Only'}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <p class="mb-4 text-xs leading-relaxed text-slate-600 dark:text-gray-300">
+                                    Are you sure you want to send this
+                                    broadcast? The broadcast will be queued and
+                                    delivered asynchronously.
+                                    {form.send_email &&
+                                        recipientStats.value.duplicateCount >
+                                            0 && (
+                                            <span class="mt-1 block font-medium text-slate-500 dark:text-gray-400">
+                                                (
+                                                {
+                                                    recipientStats.value
+                                                        .duplicateCount
+                                                }{' '}
+                                                duplicates were detected and
+                                                will only receive 1 email).
+                                            </span>
+                                        )}
+                                </p>
+
+                                <div class="flex items-center justify-end gap-2">
+                                    <button
+                                        type="button"
+                                        onClick={() => {
+                                            showConfirmModal.value = false;
+                                        }}
+                                        class="inline-flex h-8 cursor-pointer items-center rounded-[10px] bg-white/70 px-3.5 text-xs font-semibold text-slate-700 ring-1 ring-slate-200/60 backdrop-blur transition-colors hover:bg-white/90 hover:text-slate-900 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:bg-slate-900/60 dark:text-gray-200 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
+                                    >
+                                        Cancel
+                                    </button>
+
+                                    <button
+                                        type="button"
+                                        onClick={submitForm}
+                                        class="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-[10px] bg-indigo-600 px-3.5 text-xs font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                                    >
+                                        <Send class="h-3.5 w-3.5" />
+                                        <span>Confirm & Send</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </Teleport>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/EmailSend.vue b/resources/js/pages/admin/EmailSend.vue
deleted file mode 100644
index 3d4ace42..00000000
--- a/resources/js/pages/admin/EmailSend.vue
+++ /dev/null
@@ -1,1166 +0,0 @@
-<script setup lang="ts">
-import { Head, useForm, usePage } from '@inertiajs/vue3';
-import {
-    Loader2,
-    Mail,
-    Send,
-    Users,
-    GraduationCap,
-    ShieldCheck,
-    AlertCircle,
-    CheckCircle2,
-    Eye,
-    X,
-    Upload,
-    Trash2,
-    Download,
-    ChevronDown,
-    Bell,
-    Megaphone,
-} from 'lucide-vue-next';
-
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import HTMLEditor from '@/components/HTMLEditor.vue';
-
-defineProps({
-    allUsersCount: {
-        type: Number,
-        default: 0,
-    },
-    recipientCount: {
-        type: Number,
-        default: 0,
-    },
-    studentsCount: {
-        type: Number,
-        default: 0,
-    },
-    staffCount: {
-        type: Number,
-        default: 0,
-    },
-});
-
-const page = usePage();
-const appName = computed(() => (page.props as any).appName || 'HSCStack');
-
-const showConfirmModal = ref(false);
-const showPreviewModal = ref(false);
-const isImportDropdownOpen = ref(false);
-const isImporting = ref(false);
-
-const importDropdownRef = ref<HTMLElement | null>(null);
-const imagePreview = ref<string | null>(null);
-const fileInput = ref<HTMLInputElement | null>(null);
-
-const form = useForm({
-    recipients: '',
-    subject: '',
-    body: '',
-    image: null as File | null,
-    send_email: true,
-    send_in_app: false,
-    action_url: '',
-});
-
-const formattedCurrentDate = computed(() => {
-    return new Date().toLocaleDateString('en-US', {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-});
-
-// Click outside handler for import dropdown
-const handleClickOutside = (event: MouseEvent) => {
-    if (
-        importDropdownRef.value &&
-        !importDropdownRef.value.contains(event.target as Node)
-    ) {
-        isImportDropdownOpen.value = false;
-    }
-};
-
-onMounted(() => {
-    document.addEventListener('click', handleClickOutside);
-});
-
-onBeforeUnmount(() => {
-    document.removeEventListener('click', handleClickOutside);
-});
-
-// Parse and analyze recipient emails in real-time
-const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-const recipientStats = computed(() => {
-    const raw = form.recipients.trim();
-
-    if (!raw) {
-        return {
-            validEmails: [] as string[],
-            invalidItems: [] as string[],
-            totalLines: 0,
-            duplicateCount: 0,
-        };
-    }
-
-    const tokens = raw
-        .split(/[\r\n,;]+/)
-        .map((t) => t.trim())
-        .filter(Boolean);
-    const seen = new Set<string>();
-    const validEmails: string[] = [];
-    const invalidItems: string[] = [];
-    let duplicateCount = 0;
-
-    for (const token of tokens) {
-        const lower = token.toLowerCase();
-
-        if (emailRegex.test(lower)) {
-            if (seen.has(lower)) {
-                duplicateCount++;
-            } else {
-                seen.add(lower);
-                validEmails.push(lower);
-            }
-        } else {
-            invalidItems.push(token);
-        }
-    }
-
-    return {
-        validEmails,
-        invalidItems,
-        totalLines: tokens.length,
-        duplicateCount,
-    };
-});
-
-const handleImageSelect = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-
-    if (target.files && target.files[0]) {
-        const file = target.files[0];
-        form.image = file;
-        imagePreview.value = URL.createObjectURL(file);
-    }
-};
-
-const handleRemoveImage = () => {
-    form.image = null;
-    imagePreview.value = null;
-
-    if (fileInput.value) {
-        fileInput.value.value = '';
-    }
-};
-
-// Import helper
-const importSubscribers = async (
-    type: 'subscribers' | 'all' | 'students' | 'staff',
-) => {
-    if (isImporting.value) {
-        return;
-    }
-
-    isImporting.value = true;
-    isImportDropdownOpen.value = false;
-
-    try {
-        const response = await fetch(`/admin/emails/recipients?type=${type}`, {
-            headers: {
-                Accept: 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-            },
-        });
-
-        if (response.ok) {
-            const data = await response.json();
-            const importedList: string[] = data.emails || [];
-
-            // Merge with existing emails avoiding duplicates
-            const currentTokens = form.recipients
-                .split(/[\r\n,;]+/)
-                .map((t) => t.trim().toLowerCase())
-                .filter(Boolean);
-
-            const mergedSet = new Set([...currentTokens, ...importedList]);
-            form.recipients = Array.from(mergedSet).join('\n');
-        }
-    } catch (e) {
-        console.error('Failed to import recipients:', e);
-    } finally {
-        isImporting.value = false;
-    }
-};
-
-const cleanAndFormatRecipients = () => {
-    const valid = recipientStats.value.validEmails;
-    form.recipients = valid.join('\n');
-};
-
-const handleSendClick = () => {
-    if (!form.send_email && !form.send_in_app) {
-        alert(
-            'Please select at least one delivery channel (Email or In-App Notification).',
-        );
-
-        return;
-    }
-
-    if (recipientStats.value.validEmails.length === 0) {
-        form.setError(
-            'recipients',
-            'Please provide at least one valid recipient email.',
-        );
-
-        return;
-    }
-
-    if (!form.subject.trim() || !form.body.trim()) {
-        form.validate();
-
-        return;
-    }
-
-    showConfirmModal.value = true;
-};
-
-const submitForm = () => {
-    showConfirmModal.value = false;
-    form.post('/admin/emails/send', {
-        preserveScroll: true,
-        forceFormData: true,
-    });
-};
-</script>
-
-<template>
-    <Head title="Send Email" />
-
-    <div class="flex w-full flex-1 flex-col">
-        <!-- Header -->
-        <div
-            class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-200 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
-        >
-            <div>
-                <div class="flex items-center gap-3">
-                    <div
-                        class="flex h-10 w-10 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
-                    >
-                        <Mail class="h-5 w-5" />
-                    </div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Send Email
-                    </h1>
-                </div>
-                <p class="mt-2 text-sm text-slate-500 dark:text-gray-400">
-                    Compose and dispatch email announcements to custom recipient
-                    lists or imported platform subscribers.
-                </p>
-            </div>
-
-            <div class="flex items-center gap-3">
-                <!-- Preview Trigger Button -->
-                <button
-                    type="button"
-                    @click="showPreviewModal = true"
-                    class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-semibold text-slate-700 shadow-xs transition hover:bg-slate-50 hover:text-slate-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
-                >
-                    <Eye class="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
-                    <span>Preview</span>
-                </button>
-
-                <!-- Recipient Count Badge -->
-                <div
-                    class="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-2.5 dark:border-gray-800 dark:bg-gray-950"
-                >
-                    <Users
-                        class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
-                    />
-                    <div class="text-xs">
-                        <span
-                            class="font-semibold text-slate-500 dark:text-gray-400"
-                        >
-                            Total Subscribers:
-                        </span>
-                        <span
-                            class="ml-1 font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            {{ recipientCount }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <form @submit.prevent="handleSendClick" class="space-y-6">
-            <!-- Delivery Channels Selection Card -->
-            <div
-                class="rounded-3xl border border-slate-200/90 bg-white p-5 shadow-xs sm:p-6 dark:border-gray-800 dark:bg-gray-950"
-            >
-                <div class="mb-4">
-                    <label
-                        class="block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
-                    >
-                        Delivery Channels
-                    </label>
-                    <p class="mt-0.5 text-xs text-slate-400 dark:text-gray-500">
-                        Choose whether to broadcast this message via Email,
-                        In-App Notification (Bell icon), or both.
-                    </p>
-                </div>
-
-                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                    <!-- Send Email Option -->
-                    <label
-                        class="relative flex cursor-pointer items-start gap-3 rounded-2xl border p-4 transition"
-                        :class="
-                            form.send_email
-                                ? 'border-indigo-600 bg-indigo-50/30 dark:border-indigo-500 dark:bg-indigo-950/20'
-                                : 'border-slate-200 bg-slate-50/50 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900/40'
-                        "
-                    >
-                        <input
-                            type="checkbox"
-                            v-model="form.send_email"
-                            class="mt-1 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900"
-                        />
-                        <div class="space-y-1">
-                            <div class="flex items-center gap-2">
-                                <Mail
-                                    class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
-                                />
-                                <span
-                                    class="text-sm font-semibold text-slate-900 dark:text-gray-100"
-                                >
-                                    Email Broadcast
-                                </span>
-                            </div>
-                            <p
-                                class="text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Send rich HTML announcement directly to
-                                recipients' email inboxes.
-                            </p>
-                        </div>
-                    </label>
-
-                    <!-- Send In-App Bell Notification Option -->
-                    <label
-                        class="relative flex cursor-pointer items-start gap-3 rounded-2xl border p-4 transition"
-                        :class="
-                            form.send_in_app
-                                ? 'border-indigo-600 bg-indigo-50/30 dark:border-indigo-500 dark:bg-indigo-950/20'
-                                : 'border-slate-200 bg-slate-50/50 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900/40'
-                        "
-                    >
-                        <input
-                            type="checkbox"
-                            v-model="form.send_in_app"
-                            class="mt-1 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900"
-                        />
-                        <div class="space-y-1">
-                            <div class="flex items-center gap-2">
-                                <Bell
-                                    class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
-                                />
-                                <span
-                                    class="text-sm font-semibold text-slate-900 dark:text-gray-100"
-                                >
-                                    In-App Notification
-                                </span>
-                            </div>
-                            <p
-                                class="text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Push announcement to users' notification bells
-                                with an interactive modal details view.
-                            </p>
-                        </div>
-                    </label>
-                </div>
-
-                <!-- In-App Specific Optional Configurations -->
-                <div
-                    v-if="form.send_in_app"
-                    class="mt-4 rounded-2xl border border-indigo-100 bg-indigo-50/30 p-3.5 dark:border-indigo-950 dark:bg-indigo-950/10"
-                >
-                    <div
-                        class="mb-2 flex items-center gap-2 text-xs font-bold text-indigo-700 dark:text-indigo-300"
-                    >
-                        <Megaphone class="h-3.5 w-3.5" />
-                        <span>Optional In-App Action Link</span>
-                    </div>
-
-                    <div>
-                        <input
-                            v-model="form.action_url"
-                            type="url"
-                            id="action_url"
-                            placeholder="https://example.com/campaign or /blogs (Optional)"
-                            maxlength="255"
-                            class="w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs text-slate-900 transition placeholder:text-slate-400 focus:border-indigo-600 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                        />
-                        <p
-                            class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
-                        >
-                            If left blank, clicking the bell notification opens
-                            the full announcement details in an interactive
-                            modal.
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Recipients Box with Import Dropdown Toolbar -->
-            <div
-                class="rounded-3xl border border-slate-200/90 bg-white p-5 shadow-xs sm:p-6 dark:border-gray-800 dark:bg-gray-950"
-            >
-                <div
-                    class="mb-3 flex flex-col justify-between gap-3 sm:flex-row sm:items-center"
-                >
-                    <div>
-                        <label
-                            for="recipients"
-                            class="block text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-gray-300"
-                        >
-                            Recipients (One email per line)
-                        </label>
-                        <p
-                            class="mt-0.5 text-xs text-slate-400 dark:text-gray-500"
-                        >
-                            Paste any third-party list, single email, or import
-                            registered platform subscribers.
-                        </p>
-                    </div>
-
-                    <!-- Actions Toolbar: Import Dropdown & Clear -->
-                    <div class="flex items-center gap-2">
-                        <!-- Import Dropdown -->
-                        <div ref="importDropdownRef" class="relative">
-                            <button
-                                type="button"
-                                :disabled="isImporting"
-                                @click="
-                                    isImportDropdownOpen = !isImportDropdownOpen
-                                "
-                                class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-semibold text-slate-700 shadow-xs transition hover:bg-slate-100 hover:text-slate-900 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
-                            >
-                                <Loader2
-                                    v-if="isImporting"
-                                    class="h-3.5 w-3.5 animate-spin"
-                                />
-                                <Download v-else class="h-3.5 w-3.5" />
-                                <span>Import Subscribers</span>
-                                <ChevronDown
-                                    class="h-3.5 w-3.5 text-slate-400 transition-transform duration-200"
-                                    :class="{
-                                        'rotate-180': isImportDropdownOpen,
-                                    }"
-                                />
-                            </button>
-
-                            <!-- Dropdown Menu -->
-                            <div
-                                v-if="isImportDropdownOpen"
-                                class="absolute right-0 z-30 mt-1.5 w-60 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-gray-800 dark:bg-gray-900"
-                            >
-                                <!-- Option 1: All Subscribed -->
-                                <button
-                                    type="button"
-                                    :disabled="recipientCount === 0"
-                                    @click="importSubscribers('subscribers')"
-                                    class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
-                                >
-                                    <div class="flex items-center gap-2">
-                                        <Mail class="h-4 w-4 text-indigo-500" />
-                                        <span>All Subscribers</span>
-                                    </div>
-                                    <span
-                                        class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400"
-                                    >
-                                        {{ recipientCount }}
-                                    </span>
-                                </button>
-
-                                <!-- Option 2: All Registered Users -->
-                                <button
-                                    type="button"
-                                    :disabled="allUsersCount === 0"
-                                    @click="importSubscribers('all')"
-                                    class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
-                                >
-                                    <div class="flex items-center gap-2">
-                                        <Users
-                                            class="h-4 w-4 text-indigo-500"
-                                        />
-                                        <span>All Registered Users</span>
-                                    </div>
-                                    <span
-                                        class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400"
-                                    >
-                                        {{ allUsersCount }}
-                                    </span>
-                                </button>
-
-                                <!-- Option 3: All Students -->
-                                <button
-                                    type="button"
-                                    :disabled="studentsCount === 0"
-                                    @click="importSubscribers('students')"
-                                    class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
-                                >
-                                    <div class="flex items-center gap-2">
-                                        <GraduationCap
-                                            class="h-4 w-4 text-indigo-500"
-                                        />
-                                        <span>All Students</span>
-                                    </div>
-                                    <span
-                                        class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400"
-                                    >
-                                        {{ studentsCount }}
-                                    </span>
-                                </button>
-
-                                <!-- Option 4: All Staff -->
-                                <button
-                                    type="button"
-                                    :disabled="staffCount === 0"
-                                    @click="importSubscribers('staff')"
-                                    class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-xs font-semibold text-slate-700 transition hover:bg-indigo-50 hover:text-indigo-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
-                                >
-                                    <div class="flex items-center gap-2">
-                                        <ShieldCheck
-                                            class="h-4 w-4 text-indigo-500"
-                                        />
-                                        <span>All Staff</span>
-                                    </div>
-                                    <span
-                                        class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400"
-                                    >
-                                        {{ staffCount }}
-                                    </span>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Clear Button -->
-                        <button
-                            v-if="form.recipients.trim()"
-                            type="button"
-                            @click="form.recipients = ''"
-                            class="inline-flex items-center gap-1 rounded-xl p-2 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40"
-                            title="Clear all recipients"
-                        >
-                            <Trash2 class="h-4 w-4" />
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Textarea for raw emails -->
-                <textarea
-                    id="recipients"
-                    v-model="form.recipients"
-                    rows="6"
-                    placeholder="user1@example.com&#10;user2@gmail.com&#10;custom-lead@domain.com"
-                    :disabled="form.processing || isImporting"
-                    class="w-full rounded-2xl border bg-slate-50/70 p-4 font-mono text-xs leading-relaxed text-slate-900 transition outline-none placeholder:text-slate-400 focus:bg-white focus:ring-4 dark:bg-gray-900/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:bg-gray-950"
-                    :class="
-                        form.errors.recipients
-                            ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                            : 'border-slate-200 focus:border-indigo-600 focus:ring-indigo-600/10 dark:border-gray-700'
-                    "
-                ></textarea>
-
-                <p
-                    v-if="form.errors.recipients"
-                    class="mt-1.5 text-xs font-medium text-rose-600"
-                >
-                    {{ form.errors.recipients }}
-                </p>
-
-                <!-- Live Parsing Status Bar -->
-                <div
-                    class="mt-3 flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-3 text-xs dark:border-gray-800"
-                >
-                    <div class="flex flex-wrap items-center gap-2">
-                        <span
-                            class="inline-flex items-center gap-1 rounded-lg bg-emerald-50 px-2.5 py-1 font-semibold text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400"
-                        >
-                            <CheckCircle2 class="h-3.5 w-3.5" />
-                            <span
-                                >{{ recipientStats.validEmails.length }} valid
-                                unique</span
-                            >
-                        </span>
-
-                        <span
-                            v-if="recipientStats.duplicateCount > 0"
-                            class="inline-flex items-center gap-1 rounded-lg bg-slate-100 px-2.5 py-1 font-semibold text-slate-600 dark:bg-gray-800 dark:text-gray-400"
-                        >
-                            {{ recipientStats.duplicateCount }} duplicate{{
-                                recipientStats.duplicateCount > 1 ? 's' : ''
-                            }}
-                            auto-merged
-                        </span>
-
-                        <span
-                            v-if="recipientStats.invalidItems.length > 0"
-                            class="inline-flex items-center gap-1 rounded-lg bg-amber-50 px-2.5 py-1 font-semibold text-amber-700 dark:bg-amber-950/40 dark:text-amber-400"
-                        >
-                            <AlertCircle class="h-3.5 w-3.5" />
-                            <span
-                                >{{
-                                    recipientStats.invalidItems.length
-                                }}
-                                invalid ignored</span
-                            >
-                        </span>
-                    </div>
-
-                    <button
-                        v-if="
-                            recipientStats.duplicateCount > 0 ||
-                            recipientStats.invalidItems.length > 0
-                        "
-                        type="button"
-                        @click="cleanAndFormatRecipients"
-                        class="text-xs font-bold text-indigo-600 underline hover:text-indigo-700 dark:text-indigo-400"
-                    >
-                        Format & Clean List
-                    </button>
-                </div>
-            </div>
-
-            <!-- Subject -->
-            <div>
-                <label
-                    for="subject"
-                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                >
-                    Email Subject
-                </label>
-                <input
-                    v-model="form.subject"
-                    type="text"
-                    id="subject"
-                    required
-                    placeholder="e.g. Important Announcement: New Resources & Learning Updates"
-                    :disabled="form.processing"
-                    class="w-full rounded-2xl border bg-white px-4 py-3 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:ring-4 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-500"
-                    :class="
-                        form.errors.subject
-                            ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                            : 'border-slate-200 focus:border-indigo-600 focus:ring-indigo-600/10 dark:border-gray-700'
-                    "
-                />
-                <p
-                    v-if="form.errors.subject"
-                    class="mt-1.5 text-xs font-medium text-rose-600"
-                >
-                    {{ form.errors.subject }}
-                </p>
-            </div>
-
-            <!-- Banner/Cover Image Upload -->
-            <div>
-                <label
-                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                >
-                    Cover / Banner Image (Optional)
-                </label>
-
-                <input
-                    ref="fileInput"
-                    type="file"
-                    id="email_image_upload"
-                    class="hidden"
-                    accept="image/png,image/jpeg,image/jpg,image/webp"
-                    :disabled="form.processing"
-                    @change="handleImageSelect"
-                />
-
-                <!-- Image Preview -->
-                <div
-                    v-if="imagePreview"
-                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 p-2 dark:border-gray-700 dark:bg-gray-950"
-                >
-                    <img
-                        :src="imagePreview"
-                        alt="Banner preview"
-                        class="max-h-56 w-full rounded-xl object-cover"
-                    />
-                    <div
-                        class="mt-2 flex items-center justify-between px-2 py-1"
-                    >
-                        <span
-                            class="max-w-xs truncate text-xs font-medium text-slate-600 dark:text-gray-300"
-                        >
-                            {{ form.image?.name }}
-                        </span>
-                        <div class="flex items-center gap-2">
-                            <label
-                                for="email_image_upload"
-                                class="cursor-pointer rounded-lg bg-slate-200 px-2.5 py-1 text-xs font-semibold text-slate-700 transition hover:bg-slate-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
-                            >
-                                Change
-                            </label>
-                            <button
-                                type="button"
-                                @click="handleRemoveImage"
-                                class="inline-flex items-center gap-1 rounded-lg bg-rose-600 px-2.5 py-1 text-xs font-semibold text-white transition hover:bg-rose-700"
-                            >
-                                <Trash2 class="h-3.5 w-3.5" />
-                                Remove
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Dropzone when no image -->
-                <div
-                    v-else
-                    class="rounded-2xl border-2 border-dashed bg-slate-50/50 p-6 text-center transition dark:bg-gray-950/50"
-                    :class="
-                        form.errors.image
-                            ? 'border-rose-300 bg-rose-50/20 dark:border-rose-500/30 dark:bg-rose-500/10'
-                            : 'border-slate-200 dark:border-gray-700 dark:hover:bg-gray-900'
-                    "
-                >
-                    <label
-                        for="email_image_upload"
-                        class="flex cursor-pointer flex-col items-center justify-center"
-                    >
-                        <div
-                            class="mb-2 rounded-full border border-slate-100 bg-white p-3 text-slate-400 shadow-xs dark:border-gray-800 dark:bg-gray-900 dark:text-gray-500"
-                        >
-                            <Upload class="h-5 w-5" />
-                        </div>
-                        <span
-                            class="text-center text-sm font-medium text-slate-700 dark:text-gray-300"
-                        >
-                            Click to upload header banner image
-                        </span>
-                        <span
-                            class="mt-1 text-xs text-slate-400 dark:text-gray-500"
-                        >
-                            PNG, JPG or WEBP (Max 5MB)
-                        </span>
-                    </label>
-                </div>
-
-                <p
-                    v-if="form.errors.image"
-                    class="mt-1.5 text-xs font-medium text-rose-600"
-                >
-                    {{ form.errors.image }}
-                </p>
-            </div>
-
-            <!-- Rich Email Body (HTMLEditor) -->
-            <div>
-                <label
-                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                >
-                    Email Body (HTML)
-                </label>
-
-                <HTMLEditor
-                    v-model="form.body"
-                    :error="form.errors.body"
-                    placeholder="Write your email content here... (supports links, quotes, and lists)"
-                />
-
-                <p
-                    v-if="form.errors.body"
-                    class="mt-1.5 text-xs font-medium text-rose-600"
-                >
-                    {{ form.errors.body }}
-                </p>
-            </div>
-
-            <!-- Action Footer -->
-            <div
-                class="flex flex-col gap-4 border-t border-slate-100 pt-6 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-            >
-                <p class="text-xs text-slate-400 dark:text-gray-500">
-                    Broadcasts are queued and delivered asynchronously.
-                    Duplicates and invalid addresses are automatically handled.
-                </p>
-
-                <div class="flex items-center gap-3">
-                    <button
-                        type="button"
-                        @click="showPreviewModal = true"
-                        class="inline-flex items-center gap-2 rounded-xl border border-slate-200 px-4 py-2.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        <Eye class="h-3.5 w-3.5" />
-                        <span>Preview</span>
-                    </button>
-
-                    <button
-                        type="submit"
-                        :disabled="
-                            form.processing ||
-                            (!form.send_email && !form.send_in_app) ||
-                            recipientStats.validEmails.length === 0
-                        "
-                        class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white shadow-xs transition hover:bg-indigo-700 focus:ring-4 focus:ring-indigo-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
-                    >
-                        <Loader2
-                            v-if="form.processing"
-                            class="h-4 w-4 animate-spin"
-                        />
-                        <Send v-else class="h-4 w-4" />
-                        <span>
-                            Send to {{ recipientStats.validEmails.length }}
-                            {{
-                                recipientStats.validEmails.length === 1
-                                    ? 'Recipient'
-                                    : 'Recipients'
-                            }}
-                        </span>
-                    </button>
-                </div>
-            </div>
-        </form>
-    </div>
-
-    <!-- Live PC / Desktop Email Client Preview Modal -->
-    <Teleport to="body">
-        <div
-            v-if="showPreviewModal"
-            class="fixed inset-0 z-[100] flex items-center justify-center overflow-y-auto bg-slate-900/60 p-3 backdrop-blur-xs sm:p-6 dark:bg-black/70"
-        >
-            <div
-                class="relative my-auto w-full max-w-2xl overflow-hidden rounded-3xl border border-slate-200/90 bg-slate-100 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
-            >
-                <!-- Desktop Window Titlebar -->
-                <div
-                    class="flex items-center justify-between border-b border-slate-200/80 bg-white/80 px-4 py-3 backdrop-blur-md dark:border-gray-800 dark:bg-gray-950/80"
-                >
-                    <div class="flex items-center gap-2">
-                        <span
-                            class="inline-block h-3 w-3 rounded-full bg-rose-500/80"
-                        ></span>
-                        <span
-                            class="inline-block h-3 w-3 rounded-full bg-amber-500/80"
-                        ></span>
-                        <span
-                            class="inline-block h-3 w-3 rounded-full bg-emerald-500/80"
-                        ></span>
-                        <div
-                            class="ml-2 flex items-center gap-1.5 text-xs font-semibold text-slate-600 dark:text-gray-300"
-                        >
-                            <Mail
-                                class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400"
-                            />
-                            <span>Email Preview</span>
-                        </div>
-                    </div>
-
-                    <button
-                        type="button"
-                        @click="showPreviewModal = false"
-                        class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
-                    >
-                        <X class="h-4 w-4" />
-                    </button>
-                </div>
-
-                <!-- Email Client Header Info -->
-                <div
-                    class="border-b border-slate-200 bg-white px-6 py-4 dark:border-gray-800 dark:bg-gray-950"
-                >
-                    <h2
-                        class="text-base font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        {{ form.subject.trim() || '(No subject specified)' }}
-                    </h2>
-
-                    <div
-                        class="mt-2 space-y-1 text-xs text-slate-500 dark:text-gray-400"
-                    >
-                        <div class="flex items-center gap-2">
-                            <span class="w-12 font-semibold text-slate-400"
-                                >From:</span
-                            >
-                            <span
-                                class="font-medium text-slate-800 dark:text-gray-200"
-                            >
-                                {{ appName }} &lt;team@example.com&gt;
-                            </span>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <span class="w-12 font-semibold text-slate-400"
-                                >To:</span
-                            >
-                            <span
-                                class="font-medium text-slate-800 dark:text-gray-200"
-                            >
-                                {{ recipientStats.validEmails.length }} unique
-                                recipient{{
-                                    recipientStats.validEmails.length === 1
-                                        ? ''
-                                        : 's'
-                                }}
-                            </span>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <span class="w-12 font-semibold text-slate-400"
-                                >Date:</span
-                            >
-                            <span>{{ formattedCurrentDate }}</span>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Email Body Container (Exact 600px Template Rendering) -->
-                <div
-                    class="max-h-[65vh] overflow-y-auto bg-slate-100/90 p-4 sm:p-6 dark:bg-gray-900"
-                >
-                    <div
-                        class="mx-auto max-w-[580px] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xs dark:border-gray-800 dark:bg-gray-950"
-                    >
-                        <!-- Template Header with Logo -->
-                        <div
-                            class="border-b border-slate-100 bg-white py-5 text-center dark:border-gray-800 dark:bg-gray-950"
-                        >
-                            <div class="inline-flex items-center gap-2.5">
-                                <img
-                                    src="/favicon.svg"
-                                    alt="HSCStack"
-                                    class="h-8 w-8 rounded-lg shadow-xs"
-                                />
-                                <span
-                                    class="text-lg font-extrabold tracking-tight text-slate-900 dark:text-gray-100"
-                                >
-                                    HSC<span
-                                        class="text-indigo-600 dark:text-indigo-400"
-                                        >Stack</span
-                                    >
-                                </span>
-                            </div>
-                        </div>
-
-                        <!-- Template Content -->
-                        <div
-                            class="p-7 text-sm leading-relaxed text-slate-700 dark:text-gray-300"
-                        >
-                            <p
-                                class="mb-4 font-semibold text-slate-900 dark:text-gray-100"
-                            >
-                                Hello
-                                {{
-                                    recipientStats.validEmails.length === 1
-                                        ? recipientStats.validEmails[0]
-                                        : '[Recipient Name]'
-                                }},
-                            </p>
-
-                            <!-- Banner Image in Preview -->
-                            <div v-if="imagePreview" class="mb-6 text-center">
-                                <img
-                                    :src="imagePreview"
-                                    alt="Announcement preview"
-                                    class="max-h-64 w-full rounded-2xl border border-slate-200 object-cover dark:border-gray-800"
-                                />
-                            </div>
-
-                            <!-- Rendered HTML Content -->
-                            <div
-                                v-if="form.body.trim()"
-                                class="email-rendered-preview space-y-3"
-                                v-html="form.body"
-                            ></div>
-                            <div
-                                v-else
-                                class="py-8 text-center text-xs text-slate-400 italic dark:text-gray-500"
-                            >
-                                Your composed email content will appear here...
-                            </div>
-                        </div>
-
-                        <!-- Template Footer -->
-                        <div
-                            class="border-t border-slate-100 bg-slate-50/90 px-6 py-6 text-center text-xs text-slate-500 dark:border-gray-800 dark:bg-gray-900/90 dark:text-gray-400"
-                        >
-                            <p
-                                class="mb-2 font-semibold text-slate-700 dark:text-gray-200"
-                            >
-                                HSCStack &mdash; The Open Learning Platform
-                            </p>
-
-                            <div
-                                class="my-2 flex items-center justify-center gap-3 text-xs font-medium text-indigo-600 dark:text-indigo-400"
-                            >
-                                <span>Visit Platform</span>
-                                <span>&bull;</span>
-                                <span>Read Blogs</span>
-                                <span>&bull;</span>
-                                <span>Support Us</span>
-                            </div>
-
-                            <p
-                                class="mt-3 text-[11px] text-slate-400 dark:text-gray-500"
-                            >
-                                Manage email preferences in your
-                                <span
-                                    class="text-indigo-600 underline dark:text-indigo-400"
-                                    >Account Settings</span
-                                >, or visit our
-                                <span
-                                    class="text-indigo-600 underline dark:text-indigo-400"
-                                    >Support Center</span
-                                >
-                                if you need assistance or don't have an account.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Preview Footer Modal Action -->
-                <div
-                    class="flex items-center justify-end border-t border-slate-200/80 bg-white/80 px-5 py-3 dark:border-gray-800 dark:bg-gray-950/80"
-                >
-                    <button
-                        type="button"
-                        @click="showPreviewModal = false"
-                        class="rounded-xl bg-slate-900 px-5 py-2 text-xs font-bold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                    >
-                        Done Previewing
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Teleport>
-
-    <!-- Send Confirmation Modal -->
-    <Teleport to="body">
-        <div
-            v-if="showConfirmModal"
-            class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/50 p-4 backdrop-blur-xs dark:bg-black/60"
-        >
-            <div
-                class="relative w-full max-w-md rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div class="mb-4 flex items-center gap-3.5">
-                    <div
-                        class="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
-                    >
-                        <Send class="h-6 w-6" />
-                    </div>
-                    <div>
-                        <h3
-                            class="text-base font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            Confirm Broadcast Queue
-                        </h3>
-                        <p class="text-xs text-slate-500 dark:text-gray-400">
-                            <span v-if="form.send_email && form.send_in_app">
-                                Email & In-App Notification
-                            </span>
-                            <span v-else-if="form.send_email">
-                                Email Only ({{
-                                    recipientStats.validEmails.length
-                                }}
-                                recipient{{
-                                    recipientStats.validEmails.length === 1
-                                        ? ''
-                                        : 's'
-                                }})
-                            </span>
-                            <span v-else> In-App Bell Notification Only </span>
-                        </p>
-                    </div>
-                </div>
-
-                <p
-                    class="mb-5 text-xs leading-relaxed text-slate-600 dark:text-gray-300"
-                >
-                    Are you sure you want to send this broadcast? The broadcast
-                    will be queued and delivered asynchronously.
-                    <span
-                        v-if="
-                            form.send_email && recipientStats.duplicateCount > 0
-                        "
-                        class="mt-1 block font-medium text-slate-400"
-                    >
-                        ({{ recipientStats.duplicateCount }} duplicates were
-                        detected and will only receive 1 email).
-                    </span>
-                </p>
-
-                <div class="flex items-center justify-end gap-3">
-                    <button
-                        type="button"
-                        @click="showConfirmModal = false"
-                        class="rounded-xl border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
-                    >
-                        Cancel
-                    </button>
-
-                    <button
-                        type="button"
-                        @click="submitForm"
-                        class="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-5 py-2 text-xs font-bold text-white shadow-xs transition hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600"
-                    >
-                        <Send class="h-3.5 w-3.5" />
-                        <span>Confirm & Send</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Teleport>
-</template>
-
-<style scoped>
-:deep(.email-rendered-preview h1) {
-    font-size: 1.35rem;
-    font-weight: 700;
-    margin: 1rem 0 0.5rem;
-}
-
-:deep(.email-rendered-preview h2) {
-    font-size: 1.15rem;
-    font-weight: 600;
-    margin: 0.85rem 0 0.4rem;
-}
-
-:deep(.email-rendered-preview h3) {
-    font-size: 1rem;
-    font-weight: 600;
-    margin: 0.75rem 0 0.35rem;
-}
-
-:deep(.email-rendered-preview ul) {
-    list-style-type: disc;
-    padding-left: 1.25rem;
-    margin-bottom: 0.75rem;
-}
-
-:deep(.email-rendered-preview ol) {
-    list-style-type: decimal;
-    padding-left: 1.25rem;
-    margin-bottom: 0.75rem;
-}
-
-:deep(.email-rendered-preview blockquote) {
-    border-left: 3px solid #cbd5e1;
-    padding-left: 1rem;
-    color: #64748b;
-    font-style: italic;
-    margin: 0.75rem 0;
-}
-
-:deep(.email-rendered-preview a) {
-    color: #4f46e5;
-    text-decoration: underline;
-}
-</style>
diff --git a/resources/js/pages/admin/Index.tsx b/resources/js/pages/admin/Index.tsx
new file mode 100644
index 00000000..40e85191
--- /dev/null
+++ b/resources/js/pages/admin/Index.tsx
@@ -0,0 +1,212 @@
+/**
+ * AdminIndex — TSX port of `Index.vue`.
+ *
+ * Server-query-driven course/group filters + subject list + create/edit
+ * modal, rewritten as a `.tsx` `defineComponent` render function.
+ * Resolved via the explicit dual-extension (`*.vue` + `*.tsx`) page
+ * resolver in `resources/js/app.ts`.
+ *
+ * Ported 1:1 from the SFC; shared admin chrome (header/buttons) comes
+ * from `@/components/admin/ui`.
+ */
+import { Head, Link } from '@inertiajs/vue3';
+import { Plus } from 'lucide-vue-next';
+import { defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import CreateSubjectModal from '@/components/admin/CreateSubjectModal.vue';
+import SubjectCard from '@/components/admin/SubjectCard.vue';
+import {
+    AdminPageHeader,
+    adminPageClass,
+    adminPrimaryBtnClass,
+} from '@/components/admin/ui';
+import EmptyState from '@/components/EmptyState.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface Subject {
+    id?: number | null;
+    name: string;
+    slug?: string | null;
+    course?: string | null;
+    [key: string]: unknown;
+}
+
+/* Filter option data shared by both pill groups. */
+const CURRICULUM_PILLS = [
+    { key: 'hsc', label: 'HSC' },
+    { key: 'ssc', label: 'SSC' },
+];
+
+const GROUP_PILLS = [
+    { key: 'science', label: 'বিজ্ঞান' },
+    { key: 'humanities', label: 'মানবিক' },
+    { key: 'commerce', label: 'ব্যবসায় শিক্ষা' },
+];
+
+/** One server-query-driven filter pill (active = the rail's indigo wash). */
+const FilterPill = defineComponent({
+    name: 'AdminFilterPill',
+    props: {
+        href: { type: String, required: true },
+        label: { type: String, required: true },
+        active: { type: Boolean, default: false },
+    },
+    setup(props) {
+        return () => (
+            <Link
+                href={props.href}
+                preserve-scroll
+                class={[
+                    'inline-flex cursor-pointer items-center rounded-[10px] px-3 py-1.5 text-xs transition-colors duration-150 select-none',
+                    props.active
+                        ? 'bg-indigo-50 font-semibold text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
+                        : 'text-slate-500 hover:bg-white/70 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
+                ]}
+            >
+                <span>{props.label}</span>
+            </Link>
+        );
+    },
+});
+
+export default defineComponent({
+    name: 'AdminIndex',
+    props: {
+        subjects: { type: Array as PropType<Subject[]>, required: true },
+        currentCourse: {
+            type: String as PropType<string | null>,
+            default: null,
+        },
+        currentGroup: {
+            type: String as PropType<string | null>,
+            default: null,
+        },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+
+        const isCreateModalOpen = ref(false);
+        const editingSubject = ref<Subject | null>(null);
+
+        const openCreateModal = () => {
+            editingSubject.value = null;
+            isCreateModalOpen.value = true;
+        };
+
+        const openEditModal = (subject: Subject) => {
+            editingSubject.value = subject;
+            isCreateModalOpen.value = true;
+        };
+
+        const handleModalClose = () => {
+            isCreateModalOpen.value = false;
+            editingSubject.value = null;
+        };
+
+        const getFilterUrl = (course: string, group: string) => {
+            return `/admin/subjects?course=${course}&group=${group}`;
+        };
+
+        return () => (
+            <>
+                <Head title="Manage Contents" />
+
+                <div class={adminPageClass}>
+                    {/* Compact Page Title Bar */}
+                    <AdminPageHeader title="Manage Subjects">
+                        {{
+                            actions: () =>
+                                can('create subjects') && (
+                                    <button
+                                        type="button"
+                                        onClick={openCreateModal}
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        <Plus
+                                            class="h-3.5 w-3.5"
+                                            strokeWidth={2.2}
+                                        />
+                                        <span>Create Subject</span>
+                                    </button>
+                                ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Create/Edit Subject Modal */}
+                    <CreateSubjectModal
+                        isOpen={isCreateModalOpen.value}
+                        subject={editingSubject.value}
+                        defaultCourse={props.currentCourse || 'hsc'}
+                        defaultGroup={props.currentGroup || 'science'}
+                        onClose={handleModalClose}
+                    />
+
+                    {/* Filter Pills Bar (Server Query Driven, Defaults to HSC & Science) */}
+                    <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+                        {/* Curriculum Filter Pills */}
+                        <div class="flex flex-wrap items-center gap-1.5">
+                            <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                                কারিকুলাম:
+                            </span>
+                            {CURRICULUM_PILLS.map((c) => (
+                                <FilterPill
+                                    key={c.key}
+                                    href={getFilterUrl(
+                                        c.key,
+                                        props.currentGroup || 'science',
+                                    )}
+                                    label={c.label}
+                                    active={
+                                        (props.currentCourse || 'hsc') === c.key
+                                    }
+                                />
+                            ))}
+                        </div>
+
+                        {/* Group Filter Pills */}
+                        <div class="flex flex-wrap items-center gap-1.5">
+                            <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                                বিভাগ:
+                            </span>
+                            {GROUP_PILLS.map((g) => (
+                                <FilterPill
+                                    key={g.key}
+                                    href={getFilterUrl(
+                                        props.currentCourse || 'hsc',
+                                        g.key,
+                                    )}
+                                    label={g.label}
+                                    active={
+                                        (props.currentGroup || 'science') ===
+                                        g.key
+                                    }
+                                />
+                            ))}
+                        </div>
+                    </div>
+
+                    <div class="flex flex-1 flex-col">
+                        {props.subjects && props.subjects.length > 0 ? (
+                            <div class="flex flex-col gap-2.5 sm:gap-3">
+                                {props.subjects.map((subject) => (
+                                    <SubjectCard
+                                        key={subject.id || subject.name}
+                                        admin={true}
+                                        subject={subject}
+                                        onEdit={openEditModal}
+                                    />
+                                ))}
+                            </div>
+                        ) : (
+                            <EmptyState
+                                title="No subjects found"
+                                description="No subjects have been created in this category yet."
+                            />
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/Index.vue b/resources/js/pages/admin/Index.vue
deleted file mode 100644
index 921c532e..00000000
--- a/resources/js/pages/admin/Index.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
-import { Plus } from 'lucide-vue-next';
-import { ref } from 'vue';
-import CreateSubjectModal from '@/components/admin/CreateSubjectModal.vue';
-import SubjectCard from '@/components/admin/SubjectCard.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import { usePermissions } from '@/lib/usePermissions';
-
-const { can } = usePermissions();
-
-defineProps<{
-    subjects?: any[];
-    current_course?: string | null;
-    current_group?: string | null;
-}>();
-
-const isCreateModalOpen = ref(false);
-const editingSubject = ref<any | null>(null);
-
-const openCreateModal = () => {
-    editingSubject.value = null;
-    isCreateModalOpen.value = true;
-};
-
-const openEditModal = (subject: any) => {
-    editingSubject.value = subject;
-    isCreateModalOpen.value = true;
-};
-
-const handleModalClose = () => {
-    isCreateModalOpen.value = false;
-    editingSubject.value = null;
-};
-
-const getFilterUrl = (course: string, group: string) => {
-    return `/admin/subjects?course=${course}&group=${group}`;
-};
-</script>
-
-<template>
-    <Head title="Manage Contents" />
-
-    <div class="flex w-full flex-1 flex-col">
-        <!-- Compact Page Title Bar -->
-        <div
-            class="mb-3.5 flex shrink-0 items-center justify-between gap-3 border-b border-slate-100 pb-3 dark:border-gray-800"
-        >
-            <div class="flex min-w-0 items-center gap-2.5">
-                <h3
-                    class="truncate text-base font-bold tracking-tight text-slate-900 dark:text-gray-100"
-                >
-                    Manage Subjects
-                </h3>
-            </div>
-
-            <div v-if="can('create subjects')" class="flex items-center gap-2">
-                <button
-                    type="button"
-                    @click="openCreateModal"
-                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-2xs transition-colors duration-150 hover:bg-indigo-700"
-                >
-                    <Plus class="h-3.5 w-3.5" :stroke-width="2.2" />
-                    <span>Create Subject</span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Create/Edit Subject Modal -->
-        <CreateSubjectModal
-            :is-open="isCreateModalOpen"
-            :subject="editingSubject"
-            :default-course="current_course || 'hsc'"
-            :default-group="current_group || 'science'"
-            @close="handleModalClose"
-        />
-
-        <!-- Filter Pills Bar (Server Query Driven, Defaults to HSC & Science) -->
-        <div class="mb-4 flex flex-wrap items-center gap-x-4 gap-y-2">
-            <!-- Curriculum Filter Pills -->
-            <div class="flex flex-wrap items-center gap-1.5">
-                <span
-                    class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                >
-                    কারিকুলাম:
-                </span>
-                <Link
-                    v-for="c in [
-                        { key: 'hsc', label: 'HSC' },
-                        { key: 'ssc', label: 'SSC' },
-                    ]"
-                    :key="c.key"
-                    :href="getFilterUrl(c.key, current_group || 'science')"
-                    preserve-scroll
-                    class="inline-flex cursor-pointer items-center rounded-xl px-3 py-1 text-xs transition select-none"
-                    :class="[
-                        (current_course || 'hsc') === c.key
-                            ? 'bg-indigo-600 font-bold text-white shadow-2xs'
-                            : 'border border-slate-200/80 bg-white font-medium text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
-                    ]"
-                >
-                    <span>{{ c.label }}</span>
-                </Link>
-            </div>
-
-            <!-- Group Filter Pills -->
-            <div class="flex flex-wrap items-center gap-1.5">
-                <span
-                    class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                >
-                    বিভাগ:
-                </span>
-                <Link
-                    v-for="g in [
-                        { key: 'science', label: 'বিজ্ঞান' },
-                        { key: 'humanities', label: 'মানবিক' },
-                        { key: 'commerce', label: 'ব্যবসায় শিক্ষা' },
-                    ]"
-                    :key="g.key"
-                    :href="getFilterUrl(current_course || 'hsc', g.key)"
-                    preserve-scroll
-                    class="inline-flex cursor-pointer items-center rounded-xl px-3 py-1 text-xs transition select-none"
-                    :class="[
-                        (current_group || 'science') === g.key
-                            ? 'bg-indigo-600 font-bold text-white shadow-2xs'
-                            : 'border border-slate-200/80 bg-white font-medium text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
-                    ]"
-                >
-                    <span>{{ g.label }}</span>
-                </Link>
-            </div>
-        </div>
-
-        <div class="flex flex-1 flex-col">
-            <div
-                v-if="subjects && subjects.length > 0"
-                class="flex flex-col gap-2.5 sm:gap-3"
-            >
-                <SubjectCard
-                    v-for="subject in subjects"
-                    :key="subject.id || subject.name"
-                    :admin="true"
-                    :subject="subject"
-                    @edit="openEditModal"
-                />
-            </div>
-
-            <EmptyState
-                v-else
-                title="No subjects found"
-                description="No subjects have been created in this category yet."
-            />
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/Node.tsx b/resources/js/pages/admin/Node.tsx
new file mode 100644
index 00000000..0b530335
--- /dev/null
+++ b/resources/js/pages/admin/Node.tsx
@@ -0,0 +1,485 @@
+/**
+ * AdminNode — TSX port of `Node.vue`.
+ *
+ * Folder/resources browser with live/pending/rejected moderation tabs,
+ * freeze controls and breadcrumbs, rewritten as a `.tsx`
+ * `defineComponent` render function. Resolved via the explicit
+ * dual-extension (`*.vue` + `*.tsx`) page resolver in `resources/js/app.ts`.
+ *
+ * Ported 1:1 from the SFC; the chrome lives in `NodeHeader.vue` /
+ * `NodeTabsHeader.vue`, rows in `NodeRow.vue` / `ResourceRow.vue` /
+ * `PendingSubmissionRow.vue`.
+ */
+import { Head, router } from '@inertiajs/vue3';
+import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import BulkNodeModal from '@/components/admin/BulkNodeModal.vue';
+import BulkRenameModal from '@/components/admin/BulkRenameModal.vue';
+import CreateNodeModal from '@/components/admin/CreateNodeModal.vue';
+import CreateResourceModal from '@/components/admin/CreateResourceModal.vue';
+import NodeHeader from '@/components/admin/NodeHeader.vue';
+import NodeRow from '@/components/admin/NodeRow.vue';
+import NodeTabsHeader from '@/components/admin/NodeTabsHeader.vue';
+import PendingSubmissionRow from '@/components/admin/PendingSubmissionRow.vue';
+import ResourceRow from '@/components/admin/ResourceRow.vue';
+import ReviewResourceModal from '@/components/admin/ReviewResourceModal.vue';
+import { adminPageClass } from '@/components/admin/ui';
+import EmptyState from '@/components/EmptyState.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface BreadcrumbItem {
+    name: string;
+    link: string;
+}
+
+type ResourceTab = 'live' | 'pending' | 'rejected';
+
+export default defineComponent({
+    name: 'AdminNode',
+    props: {
+        subject: { type: Object as PropType<any>, default: null },
+        nodes: { type: Array as PropType<any[]>, default: null },
+        resources: { type: Array as PropType<any[]>, default: null },
+        pending_creates: { type: Array as PropType<any[]>, default: null },
+        rejected_creates: { type: Array as PropType<any[]>, default: null },
+        parent: { type: Object as PropType<any>, default: null },
+        breadcrumb: { type: Array as PropType<any[]>, default: null },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+
+        /* Frozen state (direct on this folder vs inherited from a parent). */
+        const isDirectlyFrozen = computed(() =>
+            Boolean(props.parent?.is_frozen),
+        );
+        const isInheritedFrozen = computed(
+            () =>
+                !isDirectlyFrozen.value &&
+                Boolean(props.parent?.is_effectively_frozen),
+        );
+        const isFrozen = computed(
+            () => isDirectlyFrozen.value || isInheritedFrozen.value,
+        );
+
+        const isTogglingFreeze = ref(false);
+
+        /**
+         * Confirms and requests a toggle of this folder's direct freeze flag.
+         * Inherited freezes can be made direct; without a parent ID, does nothing.
+         */
+        const toggleFreeze = () => {
+            if (!props.parent?.id) {
+                return;
+            }
+
+            let message = 'Are you sure you want to freeze this folder?';
+
+            if (props.parent.is_frozen) {
+                message = 'Are you sure you want to unfreeze this folder?';
+            } else if (isInheritedFrozen.value) {
+                message =
+                    'প্যারেন্ট ফোল্ডার আনলক করা হলেও এই ফোল্ডারটি যাতে লক থাকে, সেজন্য কি এটিকে আলাদাভাবে ফ্রিজ করতে চান?';
+            }
+
+            if (confirm(message)) {
+                isTogglingFreeze.value = true;
+                router.post(
+                    `/admin/nodes/${props.parent.id}/toggle-freeze`,
+                    {},
+                    {
+                        preserveScroll: true,
+                        onFinish: () => {
+                            isTogglingFreeze.value = false;
+                        },
+                    },
+                );
+            }
+        };
+
+        const isBulkModalOpen = ref(false);
+        const isBulkRenameModalOpen = ref(false);
+        const isSingleModalOpen = ref(false);
+        const editingNode = ref<any | null>(null);
+        const isSingleResourceModalOpen = ref(false);
+        const editingResource = ref<any | null>(null);
+        const viewingPendingModal = ref<any | null>(null);
+
+        const openCreateNodeModal = () => {
+            editingNode.value = null;
+            isSingleModalOpen.value = true;
+        };
+
+        const openEditNodeModal = (node: any) => {
+            editingNode.value = node;
+            isSingleModalOpen.value = true;
+        };
+
+        const handleNodeModalClose = () => {
+            isSingleModalOpen.value = false;
+            editingNode.value = null;
+        };
+
+        const openEditResourceModal = (resource: any) => {
+            editingResource.value = resource;
+            isSingleResourceModalOpen.value = true;
+        };
+
+        const handleResourceModalClose = () => {
+            isSingleResourceModalOpen.value = false;
+            editingResource.value = null;
+        };
+
+        const totalItemsCount = computed(
+            () =>
+                (props.nodes?.length ?? 0) +
+                (props.resources?.length ?? 0) +
+                (props.pending_creates?.length ?? 0) +
+                (props.rejected_creates?.length ?? 0),
+        );
+
+        /* Moderation tabs — the active tab is mirrored into the URL hash
+            so it survives refreshes and can be linked directly. */
+        const activeResourceTab = ref<ResourceTab>('live');
+
+        /**
+         * Reads the moderation tab from the URL hash without regard to case.
+         * An empty hash or #approved selects live; unknown hashes leave the
+         * selection unchanged. Does nothing outside the browser.
+         */
+        const syncTabFromHash = () => {
+            if (typeof window === 'undefined') {
+                return;
+            }
+
+            const hash = window.location.hash.toLowerCase();
+
+            if (hash === '#rejected') {
+                activeResourceTab.value = 'rejected';
+            } else if (hash === '#pending') {
+                activeResourceTab.value = 'pending';
+            } else if (hash === '#live' || hash === '#approved') {
+                activeResourceTab.value = 'live';
+            } else if (hash === '') {
+                // No hash — navigating to another folder resets to Live so
+                // the visible tab can't silently disagree with the URL.
+                activeResourceTab.value = 'live';
+            }
+        };
+
+        /** Selects a tab and replaces the browser URL hash without adding history. */
+        const handleTabChange = (tab: ResourceTab) => {
+            activeResourceTab.value = tab;
+
+            if (typeof window !== 'undefined') {
+                const hash = `#${tab}`;
+
+                if (window.location.hash !== hash) {
+                    // Keep Inertia's state on the entry — a null state breaks
+                    // Back-button restoration to this page.
+                    history.replaceState(window.history.state, '', hash);
+                }
+            }
+        };
+
+        onMounted(() => {
+            syncTabFromHash();
+
+            window.addEventListener('hashchange', syncTabFromHash);
+
+            // Inertia client-side navigations (folder → folder) don't fire
+            // hashchange; re-sync so the tab follows the (cleared) URL.
+            const offNavigate = router.on('navigate', () => syncTabFromHash());
+
+            onUnmounted(() => offNavigate());
+        });
+
+        onUnmounted(() => {
+            window.removeEventListener('hashchange', syncTabFromHash);
+        });
+
+        /* Live resources that carry a pending or rejected change request. */
+        const liveResourcesWithPending = computed(() => {
+            return (
+                props.resources?.filter((r) =>
+                    Boolean(r.pending_change_request),
+                ) ?? []
+            );
+        });
+
+        const totalPendingCount = computed(() => {
+            return (
+                (props.pending_creates?.length ?? 0) +
+                liveResourcesWithPending.value.length
+            );
+        });
+
+        const liveResourcesWithRejected = computed(() => {
+            return (
+                props.resources?.filter(
+                    (r) =>
+                        !r.pending_change_request &&
+                        Boolean(r.latest_rejected_change_request),
+                ) ?? []
+            );
+        });
+
+        const totalRejectedCount = computed(() => {
+            return (
+                (props.rejected_creates?.length ?? 0) +
+                liveResourcesWithRejected.value.length
+            );
+        });
+
+        const liveCount = computed(() => {
+            return (props.nodes?.length ?? 0) + (props.resources?.length ?? 0);
+        });
+
+        const adminBreadcrumbs = computed<BreadcrumbItem[]>(() => {
+            const items: BreadcrumbItem[] = [
+                {
+                    name: 'Subjects',
+                    link: '/admin/subjects',
+                },
+                {
+                    name: props.subject?.name || 'Subject',
+                    link: `/admin/subjects/${props.subject?.slug}/nodes`,
+                },
+            ];
+
+            if (props.breadcrumb && Array.isArray(props.breadcrumb)) {
+                let currentPath = `/admin/subjects/${props.subject?.slug}/nodes`;
+
+                for (const crumb of props.breadcrumb) {
+                    currentPath += `/${crumb.slug}`;
+                    items.push({
+                        name: crumb.name,
+                        link: currentPath,
+                    });
+                }
+            }
+
+            return items;
+        });
+
+        /**
+         * Opens review with the request and its target resource, or clears
+         * the modal when the request is falsy.
+         */
+        const openPendingModal = (pending: any, resource: any) => {
+            viewingPendingModal.value = pending
+                ? { ...pending, targetResource: resource }
+                : null;
+        };
+
+        /** Dashed callout for an empty tab bucket. */
+        const TabEmptyCallout = defineComponent({
+            name: 'AdminNodeTabEmptyCallout',
+            props: { message: { type: String, required: true } },
+            setup(innerProps) {
+                return () => (
+                    <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50/50 p-6 text-center text-xs text-slate-500 dark:border-slate-800/60 dark:bg-gray-900/30 dark:text-gray-400">
+                        {innerProps.message}
+                    </div>
+                );
+            },
+        });
+
+        /** Per-render props for ResourceRow spreads. Built as a factory so
+         *  `isFrozen` is read during render, not once in setup — otherwise
+         *  rows keep stale frozen state across partial page updates. */
+        const resourceRowProps = () => ({
+            isFrozen: isFrozen.value,
+            onEdit: openEditResourceModal,
+            onViewPending: openPendingModal,
+        });
+
+        return () => (
+            <>
+                <Head
+                    title={
+                        props.parent?.name ||
+                        props.subject?.name ||
+                        'Manage Nodes'
+                    }
+                />
+
+                <div class={[adminPageClass, 'flex-1']}>
+                    {/* Page Header & Action Toolbar */}
+                    <NodeHeader
+                        subject={props.subject}
+                        parent={props.parent}
+                        breadcrumbs={adminBreadcrumbs.value}
+                        isFrozen={isFrozen.value}
+                        isDirectlyFrozen={isDirectlyFrozen.value}
+                        isInheritedFrozen={isInheritedFrozen.value}
+                        isTogglingFreeze={isTogglingFreeze.value}
+                        onToggleFreeze={toggleFreeze}
+                        onCreateSingleFolder={openCreateNodeModal}
+                        onCreateBulkFolder={() =>
+                            (isBulkModalOpen.value = true)
+                        }
+                    />
+
+                    {/* Items Container */}
+                    <div class="flex flex-1 flex-col">
+                        {totalItemsCount.value > 0 ? (
+                            <div class="space-y-4">
+                                {/* Tabs Header on Top */}
+                                <NodeTabsHeader
+                                    activeTab={activeResourceTab.value}
+                                    liveCount={liveCount.value}
+                                    totalPendingCount={totalPendingCount.value}
+                                    totalRejectedCount={
+                                        totalRejectedCount.value
+                                    }
+                                    canBulkRename={
+                                        !isFrozen.value &&
+                                        can('edit resources') &&
+                                        Boolean(props.resources?.length)
+                                    }
+                                    onChangeTab={handleTabChange}
+                                    onBulkRename={() =>
+                                        (isBulkRenameModalOpen.value = true)
+                                    }
+                                />
+
+                                {/* Live Tab Content */}
+                                {activeResourceTab.value === 'live' ? (
+                                    <div class="flex flex-col gap-2.5 sm:gap-3">
+                                        {props.nodes?.map((node) => (
+                                            <NodeRow
+                                                key={`node-${node.id}`}
+                                                node={node}
+                                                isFrozen={isFrozen.value}
+                                                onEdit={openEditNodeModal}
+                                            />
+                                        ))}
+
+                                        {props.resources?.map((resource) => (
+                                            <ResourceRow
+                                                key={`resource-${resource.id}`}
+                                                resource={resource}
+                                                {...resourceRowProps()}
+                                            />
+                                        ))}
+
+                                        {liveCount.value === 0 && (
+                                            <TabEmptyCallout message="No live items in this folder." />
+                                        )}
+                                    </div>
+                                ) : activeResourceTab.value === 'pending' ? (
+                                    <div class="flex flex-col gap-2.5 sm:gap-3">
+                                        {props.pending_creates?.map(
+                                            (pending) => (
+                                                <PendingSubmissionRow
+                                                    key={`pending-create-${pending.id}`}
+                                                    submission={pending}
+                                                    status="pending"
+                                                    onPreview={(p: any) =>
+                                                        (viewingPendingModal.value =
+                                                            p)
+                                                    }
+                                                />
+                                            ),
+                                        )}
+
+                                        {liveResourcesWithPending.value.map(
+                                            (resource) => (
+                                                <ResourceRow
+                                                    key={`pending-res-${resource.id}`}
+                                                    resource={resource}
+                                                    {...resourceRowProps()}
+                                                />
+                                            ),
+                                        )}
+
+                                        {totalPendingCount.value === 0 && (
+                                            <TabEmptyCallout message="No pending submissions awaiting review." />
+                                        )}
+                                    </div>
+                                ) : (
+                                    <div class="flex flex-col gap-2.5 sm:gap-3">
+                                        {props.rejected_creates?.map(
+                                            (rejected) => (
+                                                <PendingSubmissionRow
+                                                    key={`rejected-create-${rejected.id}`}
+                                                    submission={rejected}
+                                                    status="rejected"
+                                                    onPreview={(r: any) =>
+                                                        (viewingPendingModal.value =
+                                                            r)
+                                                    }
+                                                />
+                                            ),
+                                        )}
+
+                                        {liveResourcesWithRejected.value.map(
+                                            (resource) => (
+                                                <ResourceRow
+                                                    key={`rejected-res-${resource.id}`}
+                                                    resource={resource}
+                                                    {...resourceRowProps()}
+                                                />
+                                            ),
+                                        )}
+
+                                        {totalRejectedCount.value === 0 && (
+                                            <TabEmptyCallout message="No rejected submissions in this folder." />
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        ) : (
+                            <EmptyState
+                                title="No items in this folder"
+                                description="Create a new folder or resource above to get started."
+                            />
+                        )}
+                    </div>
+                </div>
+
+                {/* Modals are outside the spaced page stack: fixed overlays
+                    must not receive space-y margins (they'd shift down). */}
+                <CreateNodeModal
+                    isOpen={isSingleModalOpen.value}
+                    subject={props.subject}
+                    parent={props.parent}
+                    node={editingNode.value}
+                    onClose={handleNodeModalClose}
+                />
+
+                {props.parent && (
+                    <CreateResourceModal
+                        isOpen={isSingleResourceModalOpen.value}
+                        node={props.parent}
+                        resource={editingResource.value}
+                        onClose={handleResourceModalClose}
+                    />
+                )}
+
+                <BulkNodeModal
+                    isOpen={isBulkModalOpen.value}
+                    subject={props.subject}
+                    parent={props.parent}
+                    onClose={() => (isBulkModalOpen.value = false)}
+                />
+
+                {props.parent && (
+                    <BulkRenameModal
+                        isOpen={isBulkRenameModalOpen.value}
+                        node={props.parent}
+                        resources={props.resources ?? []}
+                        onClose={() => (isBulkRenameModalOpen.value = false)}
+                    />
+                )}
+
+                {/* Pending / Rejected Resource Preview Modal */}
+                <ReviewResourceModal
+                    request={viewingPendingModal.value}
+                    onClose={() => (viewingPendingModal.value = null)}
+                />
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/Node.vue b/resources/js/pages/admin/Node.vue
deleted file mode 100644
index 4d7f7cf1..00000000
--- a/resources/js/pages/admin/Node.vue
+++ /dev/null
@@ -1,424 +0,0 @@
-<script setup lang="ts">
-import { Head, router, usePage } from '@inertiajs/vue3';
-import { computed, ref, onMounted, onUnmounted } from 'vue';
-import BulkNodeModal from '@/components/admin/BulkNodeModal.vue';
-import BulkRenameModal from '@/components/admin/BulkRenameModal.vue';
-import CreateNodeModal from '@/components/admin/CreateNodeModal.vue';
-import CreateResourceModal from '@/components/admin/CreateResourceModal.vue';
-import NodeHeader from '@/components/admin/NodeHeader.vue';
-import NodeRow from '@/components/admin/NodeRow.vue';
-import NodeTabsHeader from '@/components/admin/NodeTabsHeader.vue';
-import PendingSubmissionRow from '@/components/admin/PendingSubmissionRow.vue';
-import ResourceRow from '@/components/admin/ResourceRow.vue';
-import ReviewResourceModal from '@/components/admin/ReviewResourceModal.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import { usePermissions } from '@/lib/usePermissions';
-
-const { can } = usePermissions();
-const page = usePage();
-
-const props = defineProps({
-    subject: Object,
-    nodes: Array,
-    resources: Array,
-    pending_creates: Array,
-    rejected_creates: Array,
-    parent: Object,
-    breadcrumb: Array,
-});
-
-const isDirectlyFrozen = computed(() => Boolean(props.parent?.is_frozen));
-const isInheritedFrozen = computed(
-    () =>
-        !isDirectlyFrozen.value && Boolean(props.parent?.is_effectively_frozen),
-);
-const isFrozen = computed(
-    () => isDirectlyFrozen.value || isInheritedFrozen.value,
-);
-
-const isTogglingFreeze = ref(false);
-
-const toggleFreeze = () => {
-    if (!props.parent?.id) {
-        return;
-    }
-
-    let message = 'Are you sure you want to freeze this folder?';
-
-    if (props.parent.is_frozen) {
-        message = 'Are you sure you want to unfreeze this folder?';
-    } else if (isInheritedFrozen.value) {
-        message =
-            'প্যারেন্ট ফোল্ডার আনলক করা হলেও এই ফোল্ডারটি যাতে লক থাকে, সেজন্য কি এটিকে আলাদাভাবে ফ্রিজ করতে চান?';
-    }
-
-    if (confirm(message)) {
-        isTogglingFreeze.value = true;
-        router.post(
-            `/admin/nodes/${props.parent.id}/toggle-freeze`,
-            {},
-            {
-                preserveScroll: true,
-                onFinish: () => {
-                    isTogglingFreeze.value = false;
-                },
-            },
-        );
-    }
-};
-
-const isBulkModalOpen = ref(false);
-const isBulkRenameModalOpen = ref(false);
-const isSingleModalOpen = ref(false);
-const editingNode = ref<any | null>(null);
-const isSingleResourceModalOpen = ref(false);
-const editingResource = ref<any | null>(null);
-const viewingPendingModal = ref<any | null>(null);
-
-const openCreateNodeModal = () => {
-    editingNode.value = null;
-    isSingleModalOpen.value = true;
-};
-
-const openEditNodeModal = (node: any) => {
-    editingNode.value = node;
-    isSingleModalOpen.value = true;
-};
-
-const handleNodeModalClose = () => {
-    isSingleModalOpen.value = false;
-    editingNode.value = null;
-};
-
-const openEditResourceModal = (resource: any) => {
-    editingResource.value = resource;
-    isSingleResourceModalOpen.value = true;
-};
-
-const handleResourceModalClose = () => {
-    isSingleResourceModalOpen.value = false;
-    editingResource.value = null;
-};
-
-const totalItemsCount = computed(
-    () =>
-        (props.nodes?.length ?? 0) +
-        (props.resources?.length ?? 0) +
-        (props.pending_creates?.length ?? 0) +
-        (props.rejected_creates?.length ?? 0),
-);
-
-const activeResourceTab = ref<'live' | 'pending' | 'rejected'>('live');
-
-const syncTabFromHash = () => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-
-    const hash = window.location.hash.toLowerCase();
-
-    if (hash === '#rejected') {
-        activeResourceTab.value = 'rejected';
-    } else if (hash === '#pending') {
-        activeResourceTab.value = 'pending';
-    } else if (hash === '#live' || hash === '#approved') {
-        activeResourceTab.value = 'live';
-    }
-};
-
-const handleTabChange = (tab: 'live' | 'pending' | 'rejected') => {
-    activeResourceTab.value = tab;
-
-    if (typeof window !== 'undefined') {
-        const hash = `#${tab}`;
-
-        if (window.location.hash !== hash) {
-            history.replaceState(null, '', hash);
-        }
-    }
-};
-
-onMounted(() => {
-    syncTabFromHash();
-    window.addEventListener('hashchange', syncTabFromHash);
-});
-
-onUnmounted(() => {
-    window.removeEventListener('hashchange', syncTabFromHash);
-});
-
-const liveResourcesWithPending = computed(() => {
-    return (
-        (props.resources as any[])?.filter((r) =>
-            Boolean(r.pending_change_request),
-        ) ?? []
-    );
-});
-
-const totalPendingCount = computed(() => {
-    return (
-        (props.pending_creates?.length ?? 0) +
-        liveResourcesWithPending.value.length
-    );
-});
-
-const liveResourcesWithRejected = computed(() => {
-    return (
-        (props.resources as any[])?.filter(
-            (r) =>
-                !r.pending_change_request &&
-                Boolean(r.latest_rejected_change_request),
-        ) ?? []
-    );
-});
-
-const totalRejectedCount = computed(() => {
-    return (
-        (props.rejected_creates?.length ?? 0) +
-        liveResourcesWithRejected.value.length
-    );
-});
-
-const liveCount = computed(() => {
-    return (props.nodes?.length ?? 0) + (props.resources?.length ?? 0);
-});
-
-const backUrl = computed(() => {
-    const rawPath = (page.url || '').split('?')[0];
-    const segments = rawPath.split('/').filter(Boolean);
-
-    const nodesIndex = segments.indexOf('nodes');
-
-    if (nodesIndex === -1 || nodesIndex === segments.length - 1) {
-        return '/admin/subjects';
-    }
-
-    segments.pop();
-
-    return '/' + segments.join('/');
-});
-
-interface BreadcrumbItem {
-    name: string;
-    link: string;
-}
-
-const adminBreadcrumbs = computed<BreadcrumbItem[]>(() => {
-    const items: BreadcrumbItem[] = [
-        {
-            name: 'Subjects',
-            link: '/admin/subjects',
-        },
-        {
-            name: (props.subject as any)?.name || 'Subject',
-            link: `/admin/subjects/${(props.subject as any)?.slug}/nodes`,
-        },
-    ];
-
-    if (props.breadcrumb && Array.isArray(props.breadcrumb)) {
-        let currentPath = `/admin/subjects/${(props.subject as any)?.slug}/nodes`;
-
-        for (const crumb of props.breadcrumb as any[]) {
-            currentPath += `/${crumb.slug}`;
-            items.push({
-                name: crumb.name,
-                link: currentPath,
-            });
-        }
-    }
-
-    return items;
-});
-</script>
-
-<template>
-    <Head :title="parent?.name || subject?.name || 'Manage Nodes'" />
-
-    <div class="flex w-full flex-1 flex-col">
-        <!-- Page Header & Action Toolbar -->
-        <NodeHeader
-            :subject="subject"
-            :parent="parent"
-            :breadcrumbs="adminBreadcrumbs"
-            :back-url="backUrl"
-            :is-frozen="isFrozen"
-            :is-directly-frozen="isDirectlyFrozen"
-            :is-inherited-frozen="isInheritedFrozen"
-            :is-toggling-freeze="isTogglingFreeze"
-            @toggle-freeze="toggleFreeze"
-            @create-single-folder="openCreateNodeModal"
-            @create-bulk-folder="isBulkModalOpen = true"
-        />
-
-        <!-- Modals -->
-        <CreateNodeModal
-            :is-open="isSingleModalOpen"
-            :subject="subject"
-            :parent="parent"
-            :node="editingNode"
-            @close="handleNodeModalClose"
-        />
-
-        <CreateResourceModal
-            v-if="parent"
-            :is-open="isSingleResourceModalOpen"
-            :node="parent"
-            :resource="editingResource"
-            @close="handleResourceModalClose"
-        />
-
-        <BulkNodeModal
-            :is-open="isBulkModalOpen"
-            :subject="subject"
-            :parent="parent"
-            @close="isBulkModalOpen = false"
-        />
-
-        <BulkRenameModal
-            v-if="parent"
-            :is-open="isBulkRenameModalOpen"
-            :node="parent"
-            :resources="resources ?? []"
-            @close="isBulkRenameModalOpen = false"
-        />
-
-        <!-- Pending / Rejected Resource Preview Modal -->
-        <ReviewResourceModal
-            :request="viewingPendingModal"
-            @close="viewingPendingModal = null"
-        />
-
-        <!-- Items Container -->
-        <div class="flex flex-1 flex-col">
-            <template v-if="totalItemsCount > 0">
-                <div class="space-y-4">
-                    <!-- Tabs Header on Top -->
-                    <NodeTabsHeader
-                        :active-tab="activeResourceTab"
-                        :live-count="liveCount"
-                        :total-pending-count="totalPendingCount"
-                        :total-rejected-count="totalRejectedCount"
-                        :can-bulk-rename="
-                            !isFrozen &&
-                            can('edit resources') &&
-                            Boolean(resources?.length)
-                        "
-                        @change-tab="handleTabChange"
-                        @bulk-rename="isBulkRenameModalOpen = true"
-                    />
-
-                    <!-- Live Tab Content -->
-                    <div
-                        v-if="activeResourceTab === 'live'"
-                        class="flex flex-col gap-2.5 sm:gap-3"
-                    >
-                        <NodeRow
-                            v-for="node in nodes"
-                            :key="`node-${node.id}`"
-                            :node="node"
-                            :is-frozen="isFrozen"
-                            @edit="openEditNodeModal"
-                        />
-
-                        <ResourceRow
-                            v-for="resource in resources"
-                            :key="`resource-${resource.id}`"
-                            :resource="resource"
-                            :is-frozen="isFrozen"
-                            @edit="openEditResourceModal"
-                            @view-pending="
-                                (pending, res) =>
-                                    (viewingPendingModal = pending
-                                        ? { ...pending, targetResource: res }
-                                        : null)
-                            "
-                        />
-
-                        <div
-                            v-if="liveCount === 0"
-                            class="rounded-xl border border-dashed border-slate-200 bg-slate-50/50 p-6 text-center text-xs text-slate-500 dark:border-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
-                        >
-                            No live items in this folder.
-                        </div>
-                    </div>
-
-                    <!-- Pending Review Tab Content -->
-                    <div
-                        v-else-if="activeResourceTab === 'pending'"
-                        class="flex flex-col gap-2.5 sm:gap-3"
-                    >
-                        <PendingSubmissionRow
-                            v-for="pending in pending_creates"
-                            :key="`pending-create-${pending.id}`"
-                            :submission="pending"
-                            status="pending"
-                            @preview="viewingPendingModal = $event"
-                        />
-
-                        <ResourceRow
-                            v-for="resource in liveResourcesWithPending"
-                            :key="`pending-res-${resource.id}`"
-                            :resource="resource"
-                            :is-frozen="isFrozen"
-                            @edit="openEditResourceModal"
-                            @view-pending="
-                                (pending, res) =>
-                                    (viewingPendingModal = pending
-                                        ? { ...pending, targetResource: res }
-                                        : null)
-                            "
-                        />
-
-                        <div
-                            v-if="totalPendingCount === 0"
-                            class="rounded-xl border border-dashed border-slate-200 bg-slate-50/50 p-6 text-center text-xs text-slate-500 dark:border-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
-                        >
-                            No pending submissions awaiting review.
-                        </div>
-                    </div>
-
-                    <!-- Rejected Submissions Tab Content -->
-                    <div
-                        v-else-if="activeResourceTab === 'rejected'"
-                        class="flex flex-col gap-2.5 sm:gap-3"
-                    >
-                        <PendingSubmissionRow
-                            v-for="rejected in rejected_creates"
-                            :key="`rejected-create-${rejected.id}`"
-                            :submission="rejected"
-                            status="rejected"
-                            @preview="viewingPendingModal = $event"
-                        />
-
-                        <ResourceRow
-                            v-for="resource in liveResourcesWithRejected"
-                            :key="`rejected-res-${resource.id}`"
-                            :resource="resource"
-                            :is-frozen="isFrozen"
-                            @edit="openEditResourceModal"
-                            @view-pending="
-                                (pending, res) =>
-                                    (viewingPendingModal = pending
-                                        ? { ...pending, targetResource: res }
-                                        : null)
-                            "
-                        />
-
-                        <div
-                            v-if="totalRejectedCount === 0"
-                            class="rounded-xl border border-dashed border-slate-200 bg-slate-50/50 p-6 text-center text-xs text-slate-500 dark:border-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
-                        >
-                            No rejected submissions in this folder.
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <EmptyState
-                v-else
-                title="No items in this folder"
-                description="Create a new folder or resource above to get started."
-            />
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/NoticeEdit.tsx b/resources/js/pages/admin/NoticeEdit.tsx
new file mode 100644
index 00000000..f0738162
--- /dev/null
+++ b/resources/js/pages/admin/NoticeEdit.tsx
@@ -0,0 +1,479 @@
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { AlertCircle, Loader2, Save, Trash2, Upload } from 'lucide-vue-next';
+import { computed, defineComponent, onUnmounted, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminInputClass,
+    adminPanelClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSecondaryBtnClass,
+    adminSectionTitleClass,
+    adminTextareaClass,
+} from '@/components/admin/ui';
+import { markAdminFormDirty } from '@/lib/adminFormGuard';
+
+interface SiteNotice {
+    title?: string | null;
+    message?: string | null;
+    image?: string | null;
+    show_button?: boolean;
+    button_title?: string | null;
+    button_link?: string | null;
+    is_active?: boolean;
+}
+
+interface NoticeFormFields {
+    title: string;
+    message: string;
+    image: File | null;
+    remove_image: boolean;
+    show_button: boolean;
+    button_title: string;
+    button_link: string;
+    is_active: boolean;
+}
+
+export default defineComponent({
+    name: 'AdminNoticeEdit',
+    props: {
+        notice: {
+            type: Object as PropType<SiteNotice>,
+            default: undefined,
+        },
+    },
+    setup(props) {
+        const form = useForm<NoticeFormFields>({
+            title: props.notice?.title || '',
+            message: props.notice?.message || '',
+            image: null as File | null,
+            remove_image: false,
+            show_button: props.notice?.show_button ?? false,
+            button_title: props.notice?.button_title || '',
+            button_link: props.notice?.button_link || '',
+            is_active: props.notice?.is_active ?? false,
+        });
+
+        watch(
+            () => form.isDirty,
+            (v) => markAdminFormDirty(v),
+        );
+
+        onUnmounted(() => markAdminFormDirty(false));
+
+        const imagePreview = ref<string | null>(props.notice?.image ?? null);
+        const fileInput = ref<HTMLInputElement | null>(null);
+
+        const hasContent = computed(
+            () => form.title.trim() !== '' || form.message.trim() !== '',
+        );
+
+        /** Selects the first file, previews it, and cancels pending image removal. */
+        const handleFileSelect = (event: Event): void => {
+            const target = event.target as HTMLInputElement;
+
+            if (target.files && target.files[0]) {
+                const file = target.files[0];
+                form.image = file;
+                form.remove_image = false;
+                imagePreview.value = URL.createObjectURL(file);
+            }
+        };
+
+        /** Clears the image preview and input, and flags image removal on save. */
+        const handleRemoveImage = (): void => {
+            form.image = null;
+            form.remove_image = true;
+            imagePreview.value = null;
+
+            if (fileInput.value) {
+                fileInput.value.value = '';
+            }
+        };
+
+        const submitForm = (): void => {
+            form.post('/admin/notice', {
+                preserveScroll: true,
+                forceFormData: true,
+            });
+        };
+
+        const onTitleInput = (e: Event) => {
+            form.title = (e.target as HTMLInputElement).value;
+        };
+
+        const onMessageInput = (e: Event) => {
+            form.message = (e.target as HTMLTextAreaElement).value;
+        };
+
+        const onButtonTitleInput = (e: Event) => {
+            form.button_title = (e.target as HTMLInputElement).value;
+        };
+
+        const onButtonLinkInput = (e: Event) => {
+            form.button_link = (e.target as HTMLInputElement).value;
+        };
+
+        const onShowButtonChange = (e: Event) => {
+            form.show_button = (e.target as HTMLInputElement).checked;
+        };
+
+        const onIsActiveChange = (e: Event) => {
+            form.is_active = (e.target as HTMLInputElement).checked;
+        };
+
+        return () => (
+            <>
+                <Head title="Site Notice" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Site Notice"
+                        description="Configure the announcement dialog shown on the home page. Only one notice is displayed at a time."
+                    >
+                        {{
+                            actions: () => (
+                                <>
+                                    <Link
+                                        href="/admin"
+                                        class={adminSecondaryBtnClass}
+                                    >
+                                        Cancel
+                                    </Link>
+                                    <button
+                                        type="button"
+                                        onClick={submitForm}
+                                        disabled={form.processing}
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        {form.processing ? (
+                                            <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                                        ) : (
+                                            <Save class="h-3.5 w-3.5" />
+                                        )}
+                                        {form.processing
+                                            ? 'Saving...'
+                                            : 'Save Notice'}
+                                    </button>
+                                </>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    <form
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            submitForm();
+                        }}
+                        class={[adminPanelClass, 'mx-auto max-w-5xl space-y-8']}
+                    >
+                        {/* Content */}
+                        <section class="space-y-4">
+                            <div>
+                                <h2 class={adminSectionTitleClass}>Content</h2>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Title, message and cover image shown in the
+                                    dialog.
+                                </p>
+                            </div>
+
+                            <div>
+                                <label
+                                    for="title"
+                                    class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                >
+                                    Title
+                                </label>
+                                <input
+                                    value={form.title}
+                                    onInput={onTitleInput}
+                                    type="text"
+                                    id="title"
+                                    placeholder="Important announcement"
+                                    disabled={form.processing}
+                                    class={[
+                                        adminInputClass,
+                                        form.errors.title
+                                            ? '!border-rose-400 focus:!border-rose-500 dark:!border-rose-500/40'
+                                            : '',
+                                    ]}
+                                />
+                                {form.errors.title && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.title}
+                                    </p>
+                                )}
+                            </div>
+
+                            <div>
+                                <label
+                                    for="message"
+                                    class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                >
+                                    Message
+                                </label>
+                                <textarea
+                                    value={form.message}
+                                    onInput={onMessageInput}
+                                    id="message"
+                                    rows={5}
+                                    placeholder="Write the notice message for visitors..."
+                                    disabled={form.processing}
+                                    class={[
+                                        adminTextareaClass,
+                                        form.errors.message
+                                            ? '!border-rose-400 focus:!border-rose-500 dark:!border-rose-500/40'
+                                            : '',
+                                    ]}
+                                ></textarea>
+                                {form.errors.message && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.message}
+                                    </p>
+                                )}
+                            </div>
+
+                            <div>
+                                <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                    Cover Image
+                                </label>
+
+                                <input
+                                    ref={fileInput}
+                                    type="file"
+                                    id="notice_image_upload"
+                                    class="peer sr-only"
+                                    accept="image/png,image/jpeg,image/jpg,image/webp"
+                                    disabled={form.processing}
+                                    onChange={handleFileSelect}
+                                />
+
+                                {imagePreview.value ? (
+                                    <div class="flex items-center gap-3">
+                                        <img
+                                            src={imagePreview.value}
+                                            alt="Notice preview"
+                                            class="h-16 w-16 shrink-0 rounded-xl border border-slate-200 object-cover dark:border-gray-700"
+                                        />
+                                        <div class="min-w-0 flex-1">
+                                            <p class="truncate text-xs font-semibold text-slate-700 dark:text-gray-200">
+                                                {form.image?.name ??
+                                                    'Current cover image'}
+                                            </p>
+                                            <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                                PNG, JPG or WEBP (Max 5MB)
+                                            </p>
+                                        </div>
+                                        <div class="flex shrink-0 items-center gap-1.5">
+                                            <label
+                                                for="notice_image_upload"
+                                                class="inline-flex h-8 cursor-pointer items-center rounded-[10px] bg-white/70 px-2.5 text-[11px] font-semibold text-slate-600 ring-1 ring-slate-200/60 backdrop-blur transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-indigo-500 hover:bg-white/90 active:scale-95 dark:bg-slate-900/60 dark:text-gray-300 dark:ring-slate-800/60 dark:hover:bg-slate-900/85"
+                                            >
+                                                Change
+                                            </label>
+                                            <button
+                                                type="button"
+                                                onClick={handleRemoveImage}
+                                                class="inline-flex h-8 cursor-pointer items-center gap-1 rounded-[10px] px-2.5 text-[11px] font-semibold text-rose-600 transition-colors hover:bg-rose-500/10 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-rose-400"
+                                            >
+                                                <Trash2 class="h-3 w-3" />
+                                                Remove
+                                            </button>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div
+                                        class={[
+                                            'rounded-xl border border-dashed p-5 text-center transition dark:bg-gray-900',
+                                            form.errors.image
+                                                ? 'border-rose-300 dark:border-rose-500/40'
+                                                : 'border-slate-200 dark:border-gray-700',
+                                        ]}
+                                    >
+                                        <label
+                                            for="notice_image_upload"
+                                            class="flex cursor-pointer flex-col items-center justify-center rounded-xl peer-focus-visible:outline-2 peer-focus-visible:outline-indigo-500"
+                                        >
+                                            <Upload class="mb-1.5 h-4 w-4 text-slate-400 dark:text-gray-500" />
+                                            <span class="text-xs font-semibold text-slate-700 dark:text-gray-200">
+                                                Click to upload cover image
+                                            </span>
+                                            <span class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                                PNG, JPG or WEBP (Max 5MB)
+                                            </span>
+                                        </label>
+                                    </div>
+                                )}
+
+                                {form.errors.image && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.image}
+                                    </p>
+                                )}
+                            </div>
+                        </section>
+
+                        {/* Visibility */}
+                        <section class="space-y-4">
+                            <div>
+                                <h2 class={adminSectionTitleClass}>
+                                    Visibility
+                                </h2>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Control the call-to-action button and
+                                    whether the notice is live.
+                                </p>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-3">
+                                <div>
+                                    <p class="text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                        Action button
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                        Optional call-to-action link in the
+                                        dialog.
+                                    </p>
+                                </div>
+                                <label class="relative inline-flex shrink-0 cursor-pointer items-center">
+                                    <input
+                                        checked={form.show_button}
+                                        onChange={onShowButtonChange}
+                                        type="checkbox"
+                                        aria-label="Show action button"
+                                        class="peer sr-only"
+                                        disabled={form.processing}
+                                    />
+                                    <span class="peer h-6 w-11 cursor-pointer rounded-full bg-slate-200 transition peer-checked:bg-indigo-600 peer-focus-visible:outline-2 peer-focus-visible:outline-indigo-500 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition peer-checked:after:translate-x-5 dark:bg-gray-700 dark:peer-checked:bg-indigo-500"></span>
+                                </label>
+                            </div>
+
+                            {form.show_button && (
+                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                                    <div>
+                                        <label
+                                            for="button_title"
+                                            class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                        >
+                                            Button title
+                                        </label>
+                                        <input
+                                            value={form.button_title}
+                                            onInput={onButtonTitleInput}
+                                            type="text"
+                                            id="button_title"
+                                            placeholder="Learn more"
+                                            disabled={form.processing}
+                                            class={[
+                                                adminInputClass,
+                                                form.errors.button_title
+                                                    ? '!border-rose-400 focus:!border-rose-500 dark:!border-rose-500/40'
+                                                    : '',
+                                            ]}
+                                        />
+                                        {form.errors.button_title && (
+                                            <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                                {form.errors.button_title}
+                                            </p>
+                                        )}
+                                    </div>
+
+                                    <div>
+                                        <label
+                                            for="button_link"
+                                            class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                        >
+                                            Button link
+                                        </label>
+                                        <input
+                                            value={form.button_link}
+                                            onInput={onButtonLinkInput}
+                                            type="text"
+                                            id="button_link"
+                                            placeholder="https://example.com/details"
+                                            disabled={form.processing}
+                                            class={[
+                                                adminInputClass,
+                                                form.errors.button_link
+                                                    ? '!border-rose-400 focus:!border-rose-500 dark:!border-rose-500/40'
+                                                    : '',
+                                            ]}
+                                        />
+                                        {form.errors.button_link && (
+                                            <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                                {form.errors.button_link}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+
+                            <div class="flex items-center justify-between gap-3">
+                                <div>
+                                    <p class="text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                        Show Notice
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                        Display this notice to visitors on the
+                                        home page.
+                                    </p>
+                                </div>
+                                <label class="relative inline-flex shrink-0 cursor-pointer items-center">
+                                    <input
+                                        checked={form.is_active}
+                                        onChange={onIsActiveChange}
+                                        type="checkbox"
+                                        aria-label="Show notice"
+                                        class="peer sr-only"
+                                        disabled={form.processing}
+                                    />
+                                    <span class="peer h-6 w-11 cursor-pointer rounded-full bg-slate-200 transition peer-checked:bg-indigo-600 peer-focus-visible:outline-2 peer-focus-visible:outline-indigo-500 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition peer-checked:after:translate-x-5 dark:bg-gray-700 dark:peer-checked:bg-indigo-500"></span>
+                                </label>
+                            </div>
+
+                            {form.is_active && !hasContent.value && (
+                                <p class="flex items-start gap-1.5 rounded-xl bg-amber-50 px-3 py-2 text-[11px] font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">
+                                    <AlertCircle class="mt-px h-3.5 w-3.5 shrink-0" />
+                                    <span>
+                                        Please add a title or message body
+                                        before making this notice live.
+                                    </span>
+                                </p>
+                            )}
+                        </section>
+
+                        <div class="flex flex-col gap-2 border-t border-slate-200/60 pt-4 sm:flex-row sm:justify-end dark:border-slate-800/60">
+                            <Link
+                                href="/admin"
+                                class={[
+                                    adminSecondaryBtnClass,
+                                    'w-full justify-center sm:w-auto',
+                                ]}
+                            >
+                                Cancel
+                            </Link>
+                            <button
+                                type="submit"
+                                disabled={form.processing}
+                                class={[
+                                    adminPrimaryBtnClass,
+                                    'w-full justify-center sm:w-auto',
+                                ]}
+                            >
+                                {form.processing ? (
+                                    <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                                ) : (
+                                    <Save class="h-3.5 w-3.5" />
+                                )}
+                                {form.processing ? 'Saving...' : 'Save Notice'}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/NoticeEdit.vue b/resources/js/pages/admin/NoticeEdit.vue
deleted file mode 100644
index 1439120c..00000000
--- a/resources/js/pages/admin/NoticeEdit.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { Loader2, Save, Trash2, Upload } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-
-const props = defineProps({
-    notice: Object,
-});
-
-const form = useForm({
-    title: props.notice?.title || '',
-    message: props.notice?.message || '',
-    image: null as File | null,
-    remove_image: false,
-    show_button: props.notice?.show_button ?? false,
-    button_title: props.notice?.button_title || '',
-    button_link: props.notice?.button_link || '',
-    is_active: props.notice?.is_active ?? false,
-});
-
-const imagePreview = ref<string | null>(props.notice?.image || null);
-const fileInput = ref<HTMLInputElement | null>(null);
-
-const hasContent = computed(
-    () => form.title.trim() !== '' || form.message.trim() !== '',
-);
-
-const handleFileSelect = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-
-    if (target.files && target.files[0]) {
-        const file = target.files[0];
-        form.image = file;
-        form.remove_image = false;
-        imagePreview.value = URL.createObjectURL(file);
-    }
-};
-
-const handleRemoveImage = () => {
-    form.image = null;
-    form.remove_image = true;
-    imagePreview.value = null;
-
-    if (fileInput.value) {
-        fileInput.value.value = '';
-    }
-};
-
-const submitForm = () => {
-    form.post('/admin/notice', {
-        preserveScroll: true,
-        forceFormData: true,
-    });
-};
-</script>
-
-<template>
-    <Head title="Site Notice" />
-
-    <div class="flex w-full flex-1 flex-col">
-        <div class="mb-8 border-b border-slate-200 pb-6 dark:border-gray-800">
-            <h1
-                class="text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
-            >
-                Site Notice
-            </h1>
-            <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
-                Configure the announcement dialog shown on the home page. Only
-                one notice is displayed at a time.
-            </p>
-        </div>
-
-        <form
-            @submit.prevent="submitForm"
-            class="grid grid-cols-1 gap-8 lg:grid-cols-3"
-        >
-            <div class="space-y-6 lg:col-span-2">
-                <div>
-                    <label
-                        for="title"
-                        class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                    >
-                        Title
-                    </label>
-                    <input
-                        v-model="form.title"
-                        type="text"
-                        id="title"
-                        placeholder="Important announcement"
-                        :disabled="form.processing"
-                        class="w-full rounded-xl border bg-white px-4 py-3 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
-                        :class="
-                            form.errors.title
-                                ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.title"
-                        class="mt-1.5 text-xs font-medium text-rose-600"
-                    >
-                        {{ form.errors.title }}
-                    </p>
-                </div>
-
-                <div>
-                    <label
-                        for="message"
-                        class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                    >
-                        Message
-                    </label>
-                    <textarea
-                        v-model="form.message"
-                        id="message"
-                        rows="6"
-                        placeholder="Write the notice message for visitors..."
-                        :disabled="form.processing"
-                        class="w-full rounded-xl border bg-white px-4 py-3 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
-                        :class="
-                            form.errors.message
-                                ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                        "
-                    ></textarea>
-                    <p
-                        v-if="form.errors.message"
-                        class="mt-1.5 text-xs font-medium text-rose-600"
-                    >
-                        {{ form.errors.message }}
-                    </p>
-                </div>
-
-                <div
-                    class="space-y-5 rounded-2xl bg-slate-50 p-5 ring-1 ring-slate-900/5 dark:bg-gray-800 dark:ring-gray-700"
-                >
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p
-                                class="text-sm font-semibold text-slate-900 dark:text-gray-100"
-                            >
-                                Action button
-                            </p>
-                            <p
-                                class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Optional call-to-action link in the dialog.
-                            </p>
-                        </div>
-                        <label
-                            class="relative inline-flex cursor-pointer items-center"
-                        >
-                            <input
-                                v-model="form.show_button"
-                                type="checkbox"
-                                class="peer sr-only"
-                                :disabled="form.processing"
-                            />
-                            <span
-                                class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5 dark:bg-gray-600 dark:peer-checked:bg-gray-200"
-                            ></span>
-                        </label>
-                    </div>
-
-                    <div
-                        v-if="form.show_button"
-                        class="grid grid-cols-1 gap-4 pt-2 md:grid-cols-2"
-                    >
-                        <div>
-                            <label
-                                for="button_title"
-                                class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                            >
-                                Button title
-                            </label>
-                            <input
-                                v-model="form.button_title"
-                                type="text"
-                                id="button_title"
-                                placeholder="Learn more"
-                                :disabled="form.processing"
-                                class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:ring-4 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                :class="
-                                    form.errors.button_title
-                                        ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                        : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                                "
-                            />
-                            <p
-                                v-if="form.errors.button_title"
-                                class="mt-1.5 text-xs font-medium text-rose-600"
-                            >
-                                {{ form.errors.button_title }}
-                            </p>
-                        </div>
-
-                        <div>
-                            <label
-                                for="button_link"
-                                class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                            >
-                                Button link
-                            </label>
-                            <input
-                                v-model="form.button_link"
-                                type="text"
-                                id="button_link"
-                                placeholder="https://example.com/details"
-                                :disabled="form.processing"
-                                class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:ring-4 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
-                                :class="
-                                    form.errors.button_link
-                                        ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                        : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                                "
-                            />
-                            <p
-                                v-if="form.errors.button_link"
-                                class="mt-1.5 text-xs font-medium text-rose-600"
-                            >
-                                {{ form.errors.button_link }}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="space-y-6">
-                <div
-                    class="rounded-2xl bg-slate-50 p-5 ring-1 ring-slate-900/5 dark:bg-gray-800 dark:ring-gray-700"
-                >
-                    <div class="flex items-center justify-between">
-                        <p
-                            class="text-sm font-semibold text-slate-900 dark:text-gray-100"
-                        >
-                            Show Notice
-                        </p>
-                        <label
-                            class="relative inline-flex cursor-pointer items-center"
-                        >
-                            <input
-                                v-model="form.is_active"
-                                type="checkbox"
-                                class="peer sr-only"
-                                :disabled="form.processing"
-                            />
-                            <span
-                                class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5 dark:bg-gray-600 dark:peer-checked:bg-gray-200"
-                            ></span>
-                        </label>
-                    </div>
-                </div>
-
-                <div
-                    v-if="form.is_active && !hasContent"
-                    class="rounded-2xl bg-amber-50 p-4 text-xs font-medium text-amber-800 ring-1 ring-amber-900/5 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-500/20"
-                >
-                    Please add a title or message body before switching this
-                    notice alive.
-                </div>
-
-                <div
-                    class="space-y-4 rounded-2xl border border-slate-100 p-5 ring-1 ring-slate-900/5 dark:border-gray-800 dark:ring-gray-700"
-                >
-                    <label
-                        class="block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                    >
-                        Cover Image
-                    </label>
-
-                    <input
-                        ref="fileInput"
-                        type="file"
-                        id="notice_image_upload"
-                        class="hidden"
-                        accept="image/png,image/jpeg,image/jpg,image/webp"
-                        :disabled="form.processing"
-                        @change="handleFileSelect"
-                    />
-
-                    <!-- Image Preview -->
-                    <div
-                        v-if="imagePreview"
-                        class="relative overflow-hidden rounded-xl ring-1 ring-slate-900/10 dark:ring-gray-700"
-                    >
-                        <img
-                            :src="imagePreview"
-                            alt="Notice preview"
-                            class="h-40 w-full object-cover"
-                        />
-                        <div
-                            class="absolute inset-0 flex items-center justify-center gap-2 bg-slate-900/50 opacity-0 transition-opacity hover:opacity-100"
-                        >
-                            <label
-                                for="notice_image_upload"
-                                class="cursor-pointer rounded-lg bg-white/90 px-3 py-1.5 text-xs font-semibold text-slate-900 transition hover:bg-white dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
-                            >
-                                Change Image
-                            </label>
-                            <button
-                                type="button"
-                                @click="handleRemoveImage"
-                                class="inline-flex items-center gap-1 rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-rose-700"
-                            >
-                                <Trash2 class="h-3.5 w-3.5" />
-                                Remove
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Upload Dropzone when no image -->
-                    <div
-                        v-else
-                        class="rounded-xl border-2 border-dashed bg-slate-50/50 p-6 text-center transition dark:bg-gray-800/50"
-                        :class="
-                            form.errors.image
-                                ? 'border-rose-300 bg-rose-50/20 dark:border-rose-500/30 dark:bg-rose-500/10'
-                                : 'border-slate-200 dark:border-gray-700 dark:hover:bg-gray-800'
-                        "
-                    >
-                        <label
-                            for="notice_image_upload"
-                            class="flex cursor-pointer flex-col items-center justify-center"
-                        >
-                            <div
-                                class="mb-2 rounded-full border border-slate-100 bg-white p-3 text-slate-400 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-500"
-                            >
-                                <Upload class="h-5 w-5" />
-                            </div>
-                            <span
-                                class="text-center text-sm font-medium text-slate-700 dark:text-gray-300"
-                            >
-                                Click to upload cover image
-                            </span>
-                            <span
-                                class="mt-1 text-xs text-slate-400 dark:text-gray-500"
-                            >
-                                PNG, JPG or WEBP (Max 10MB)
-                            </span>
-                        </label>
-                    </div>
-
-                    <p
-                        v-if="form.errors.image"
-                        class="mt-1.5 text-xs font-medium text-rose-600"
-                    >
-                        {{ form.errors.image }}
-                    </p>
-                </div>
-            </div>
-
-            <div
-                class="flex justify-end gap-3 border-t border-slate-100 pt-6 lg:col-span-3 dark:border-gray-800"
-            >
-                <Link
-                    href="/admin"
-                    class="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-                >
-                    Cancel
-                </Link>
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800 focus:ring-4 focus:ring-slate-900/10 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                >
-                    <Loader2
-                        v-if="form.processing"
-                        class="h-4 w-4 animate-spin"
-                    />
-                    <Save v-else class="h-4 w-4" />
-                    {{ form.processing ? 'Saving...' : 'Save Notice' }}
-                </button>
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/PeerSettings.tsx b/resources/js/pages/admin/PeerSettings.tsx
new file mode 100644
index 00000000..d5990032
--- /dev/null
+++ b/resources/js/pages/admin/PeerSettings.tsx
@@ -0,0 +1,303 @@
+/**
+ * AdminPeerSettings — TSX port of the former `PeerSettings.vue`.
+ *
+ * Same UI/behavior: Inertia `useForm` for the poke feature toggle, cooldown
+ * and message presets (add/remove/reset). Resolved via the explicit
+ * dual-extension (`*.vue` + `*.tsx`) page resolver in `resources/js/app.ts`.
+ */
+import { Head, useForm } from '@inertiajs/vue3';
+import { Clock, Loader2, Plus, RotateCcw, Save, Trash2 } from 'lucide-vue-next';
+import { defineComponent, onUnmounted, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminDangerIconBtnClass,
+    adminInputClass,
+    adminPageClass,
+    adminPanelClass,
+    adminPrimaryBtnClass,
+    adminSectionTitleClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+import { markAdminFormDirty } from '@/lib/adminFormGuard';
+
+interface PokePreset {
+    id: string;
+    icon: string;
+    message: string;
+}
+
+interface PeerSettingsProps {
+    settings: {
+        enabled: boolean;
+        cooldown_minutes: number;
+        presets: PokePreset[];
+    };
+}
+
+const defaultPresets: PokePreset[] = [
+    {
+        id: 'syllabus',
+        icon: '🔥',
+        message: "That syllabus isn't going to finish itself! Open the books!",
+    },
+    {
+        id: 'phone_down',
+        icon: '📱',
+        message: 'Close the tabs, put the phone on DND, and start studying.',
+    },
+];
+
+export default defineComponent({
+    name: 'AdminPeerSettings',
+    props: {
+        settings: {
+            type: Object as PropType<PeerSettingsProps['settings']>,
+            required: true,
+        },
+    },
+    setup(props) {
+        const form = useForm({
+            enabled: props.settings.enabled,
+            cooldown_minutes: props.settings.cooldown_minutes,
+            presets: JSON.parse(
+                JSON.stringify(props.settings.presets || defaultPresets),
+            ) as PokePreset[],
+        });
+
+        watch(
+            () => form.isDirty,
+            (v) => markAdminFormDirty(v),
+        );
+
+        onUnmounted(() => markAdminFormDirty(false));
+
+        const addPreset = () => {
+            form.presets.push({
+                id: 'preset_' + Date.now(),
+                icon: '⚡',
+                message: 'Time to open the books and make today count!',
+            });
+        };
+
+        /** Removes the preset at a zero-based index, alerting if only one remains. */
+        const removePreset = (index: number) => {
+            if (form.presets.length <= 1) {
+                alert('You must have at least one poke preset.');
+
+                return;
+            }
+
+            form.presets.splice(index, 1);
+        };
+
+        const resetToDefaultPresets = () => {
+            if (confirm('Reset all presets to default recommendations?')) {
+                form.presets = JSON.parse(JSON.stringify(defaultPresets));
+            }
+        };
+
+        const submit = () => {
+            form.post('/admin/peers/settings', {
+                preserveScroll: true,
+            });
+        };
+
+        // Numeric field with the shared field vocabulary, fixed width + centered.
+        const cooldownInputClass =
+            'h-9 w-24 rounded-[10px] border border-slate-200 bg-white px-2.5 text-center text-xs font-semibold text-slate-900 transition-colors outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-indigo-400';
+
+        // Emoji picker cell: same vocabulary, larger glyph.
+        const emojiInputClass =
+            'h-9 w-14 rounded-[10px] border border-slate-200 bg-white px-1 text-center text-base text-slate-900 transition-colors outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-indigo-400';
+
+        const toggleWrapClass =
+            'relative inline-flex shrink-0 cursor-pointer items-center';
+        const toggleTrackClass =
+            "peer relative h-6 w-11 rounded-full bg-slate-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-indigo-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-indigo-500 dark:bg-gray-700 dark:peer-checked:bg-indigo-500";
+
+        return () => (
+            <>
+                <Head title="Peer &amp; Poke Settings - Admin" />
+
+                <div class={adminPageClass}>
+                    <AdminPageHeader
+                        title="Peer & Poke Settings"
+                        description="Configure peer pokes, anti-spam cooldowns, and message presets."
+                    >
+                        {{
+                            actions: () => (
+                                <button
+                                    type="button"
+                                    onClick={submit}
+                                    disabled={form.processing}
+                                    class={adminPrimaryBtnClass}
+                                >
+                                    {form.processing ? (
+                                        <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                                    ) : (
+                                        <Save class="h-3.5 w-3.5" />
+                                    )}
+                                    <span>
+                                        {form.processing
+                                            ? 'Saving...'
+                                            : 'Save Settings'}
+                                    </span>
+                                </button>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Single glass panel: sections separated by whitespace,
+                        not cards. */}
+                    <form
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            submit();
+                        }}
+                        class={[adminPanelClass, 'mx-auto max-w-4xl space-y-8']}
+                    >
+                        {/* General Controls */}
+                        <section class="space-y-5">
+                            <div>
+                                <h2 class={adminSectionTitleClass}>
+                                    General Controls &amp; Anti-Spam
+                                </h2>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Enable or pause peer pokes globally and set
+                                    cooling-off limits.
+                                </p>
+                            </div>
+
+                            <div class="grid gap-6 sm:grid-cols-2">
+                                {/* Poke feature toggle (plain row, no box) */}
+                                <div class="flex items-start justify-between gap-4">
+                                    <div>
+                                        <span class="text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                            Poke Feature
+                                        </span>
+                                        <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                            Allow users to send pokes to peers.
+                                        </p>
+                                    </div>
+                                    <label class={toggleWrapClass}>
+                                        <input
+                                            type="checkbox"
+                                            v-model={form.enabled}
+                                            aria-label="Toggle Poke feature"
+                                            class="peer sr-only"
+                                        />
+                                        <div class={toggleTrackClass}></div>
+                                    </label>
+                                </div>
+
+                                {/* Cooldown */}
+                                <div class="flex items-start justify-between gap-4 sm:justify-end">
+                                    <div>
+                                        <span class="flex items-center gap-1.5 text-xs font-semibold text-slate-900 dark:text-gray-100">
+                                            <Clock class="h-3.5 w-3.5 text-slate-500 dark:text-gray-400" />
+                                            Cooldown Duration
+                                        </span>
+                                        <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                            Wait time before poking the same
+                                            peer again.
+                                        </p>
+                                    </div>
+                                    <input
+                                        type="number"
+                                        v-model={form.cooldown_minutes}
+                                        min="1"
+                                        max="10080"
+                                        required
+                                        aria-label="Cooldown duration in minutes"
+                                        class={cooldownInputClass}
+                                    />
+                                </div>
+                            </div>
+                        </section>
+
+                        {/* Message Presets */}
+                        <section class="space-y-4">
+                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                                <div>
+                                    <h2 class={adminSectionTitleClass}>
+                                        Message Presets
+                                    </h2>
+                                    <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                        Shown when users click the "Poke"
+                                        button.
+                                    </p>
+                                </div>
+
+                                <div class="flex shrink-0 items-center gap-2">
+                                    <button
+                                        type="button"
+                                        onClick={resetToDefaultPresets}
+                                        class={adminSecondaryBtnClass}
+                                    >
+                                        <RotateCcw class="h-3.5 w-3.5" />
+                                        <span>Reset Defaults</span>
+                                    </button>
+                                    <button
+                                        type="button"
+                                        onClick={addPreset}
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        <Plus class="h-3.5 w-3.5" />
+                                        <span>Add Preset</span>
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/* Preset rows: hairline dividers, no boxes */}
+                            <div class="divide-y divide-slate-200/60 dark:divide-slate-800/60">
+                                {form.presets.map((preset, idx) => (
+                                    <div
+                                        key={preset.id || idx}
+                                        class="flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-center"
+                                    >
+                                        <div class="w-16 shrink-0">
+                                            <input
+                                                type="text"
+                                                v-model={preset.icon}
+                                                maxlength="6"
+                                                required
+                                                aria-label="Preset emoji"
+                                                class={emojiInputClass}
+                                            />
+                                        </div>
+
+                                        <div class="min-w-0 flex-1">
+                                            <input
+                                                type="text"
+                                                v-model={preset.message}
+                                                placeholder="e.g. Time to open the books and make today count!"
+                                                required
+                                                aria-label="Preset message"
+                                                class={adminInputClass}
+                                            />
+                                        </div>
+
+                                        <button
+                                            type="button"
+                                            onClick={() => removePreset(idx)}
+                                            disabled={form.presets.length <= 1}
+                                            title="Delete Preset"
+                                            class={[
+                                                adminDangerIconBtnClass,
+                                                'disabled:cursor-not-allowed disabled:opacity-30',
+                                            ]}
+                                        >
+                                            <Trash2 class="h-4 w-4" />
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        </section>
+                    </form>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/PeerSettings.vue b/resources/js/pages/admin/PeerSettings.vue
deleted file mode 100644
index 5b8c7fa2..00000000
--- a/resources/js/pages/admin/PeerSettings.vue
+++ /dev/null
@@ -1,356 +0,0 @@
-<script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
-import {
-    Zap,
-    Clock,
-    Plus,
-    Trash2,
-    RotateCcw,
-    Save,
-    CheckCircle2,
-    Shield,
-    Sparkles,
-} from 'lucide-vue-next';
-import { ref } from 'vue';
-
-interface PokePreset {
-    id: string;
-    icon: string;
-    message: string;
-}
-
-interface PeerSettingsProps {
-    settings: {
-        enabled: boolean;
-        cooldown_minutes: number;
-        presets: PokePreset[];
-    };
-}
-
-const props = defineProps<PeerSettingsProps>();
-
-const defaultPresets: PokePreset[] = [
-    {
-        id: 'syllabus',
-        icon: '🔥',
-        message: "That syllabus isn't going to finish itself! Open the books!",
-    },
-    {
-        id: 'phone_down',
-        icon: '📱',
-        message: 'Close the tabs, put the phone on DND, and start studying.',
-    },
-];
-
-const form = useForm({
-    enabled: props.settings.enabled,
-    cooldown_minutes: props.settings.cooldown_minutes,
-    presets: JSON.parse(
-        JSON.stringify(props.settings.presets || defaultPresets),
-    ) as PokePreset[],
-});
-
-const isSaved = ref(false);
-
-const addPreset = () => {
-    form.presets.push({
-        id: 'preset_' + Date.now(),
-        icon: '⚡',
-        message: 'Time to open the books and make today count!',
-    });
-};
-
-const removePreset = (index: number) => {
-    if (form.presets.length <= 1) {
-        alert('You must have at least one poke preset.');
-
-        return;
-    }
-
-    form.presets.splice(index, 1);
-};
-
-const resetToDefaultPresets = () => {
-    if (confirm('Reset all presets to default recommendations?')) {
-        form.presets = JSON.parse(JSON.stringify(defaultPresets));
-    }
-};
-
-const submit = () => {
-    form.post('/admin/peers/settings', {
-        preserveScroll: true,
-        onSuccess: () => {
-            isSaved.value = true;
-            setTimeout(() => {
-                isSaved.value = false;
-            }, 3000);
-        },
-    });
-};
-</script>
-
-<template>
-    <Head title="Peer & Poke Settings - Admin" />
-
-    <div class="mx-auto max-w-5xl space-y-8 p-4 sm:p-6 lg:p-8">
-        <!-- Header -->
-        <div
-            class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
-        >
-            <div class="space-y-1">
-                <div class="flex items-center gap-2.5">
-                    <div
-                        class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400"
-                    >
-                        <Zap class="h-5 w-5" />
-                    </div>
-                    <div>
-                        <h1
-                            class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                        >
-                            Peer & Poke Settings
-                        </h1>
-                        <p class="text-xs text-slate-500 dark:text-gray-400">
-                            Configure peer pokes, anti-spam cooldowns, and
-                            message presets.
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex items-center gap-3">
-                <button
-                    type="button"
-                    @click="submit"
-                    :disabled="form.processing"
-                    class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-xs font-bold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
-                >
-                    <Save class="h-4 w-4" />
-                    <span>{{
-                        form.processing ? 'Saving...' : 'Save Settings'
-                    }}</span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Success Toast Indicator -->
-        <div
-            v-if="isSaved"
-            class="flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-xs font-semibold text-emerald-800 dark:border-emerald-800/30 dark:bg-emerald-950/40 dark:text-emerald-300"
-        >
-            <CheckCircle2
-                class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400"
-            />
-            <span>Settings saved successfully!</span>
-        </div>
-
-        <form @submit.prevent="submit" class="space-y-8">
-            <!-- General Configuration Card -->
-            <div
-                class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div
-                    class="mb-6 flex items-center gap-3 border-b border-slate-100 pb-4 dark:border-gray-800"
-                >
-                    <div
-                        class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400"
-                    >
-                        <Shield class="h-4 w-4" />
-                    </div>
-                    <div>
-                        <h2
-                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            General Controls & Anti-Spam
-                        </h2>
-                        <p class="text-xs text-slate-500 dark:text-gray-400">
-                            Enable or pause peer pokes globally and set
-                            cooling-off limits.
-                        </p>
-                    </div>
-                </div>
-
-                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
-                    <!-- Feature Toggle -->
-                    <div
-                        class="flex flex-col justify-between rounded-xl border border-slate-100 bg-slate-50/50 p-4 dark:border-gray-800/80 dark:bg-gray-800/30"
-                    >
-                        <div>
-                            <span
-                                class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Poke Feature
-                            </span>
-                            <p
-                                class="mt-1 text-[11px] text-slate-500 dark:text-gray-400"
-                            >
-                                Allow users to send pokes to peers.
-                            </p>
-                        </div>
-                        <div class="mt-4 flex items-center gap-3">
-                            <label
-                                class="relative inline-flex cursor-pointer items-center"
-                            >
-                                <input
-                                    type="checkbox"
-                                    v-model="form.enabled"
-                                    aria-label="Toggle Poke feature"
-                                    class="peer sr-only"
-                                />
-                                <div
-                                    class="peer h-6 w-11 rounded-full bg-slate-200 peer-checked:bg-indigo-600 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:bg-gray-700 dark:peer-checked:bg-indigo-500"
-                                ></div>
-                            </label>
-                            <span
-                                class="text-xs font-semibold text-slate-700 dark:text-gray-300"
-                            >
-                                {{ form.enabled ? 'Enabled' : 'Disabled' }}
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Cooldown Minutes -->
-                    <div
-                        class="flex flex-col justify-between rounded-xl border border-slate-100 bg-slate-50/50 p-4 dark:border-gray-800/80 dark:bg-gray-800/30"
-                    >
-                        <div>
-                            <div class="flex items-center gap-1.5">
-                                <Clock
-                                    class="h-3.5 w-3.5 text-slate-500 dark:text-gray-400"
-                                />
-                                <span
-                                    class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                                >
-                                    Cooldown Duration (Minutes)
-                                </span>
-                            </div>
-                            <p
-                                class="mt-1 text-[11px] text-slate-500 dark:text-gray-400"
-                            >
-                                Time a user must wait before poking the exact
-                                same peer again.
-                            </p>
-                        </div>
-                        <div class="mt-4 flex items-center gap-3">
-                            <input
-                                type="number"
-                                v-model.number="form.cooldown_minutes"
-                                min="1"
-                                max="10080"
-                                required
-                                class="w-24 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-bold text-slate-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                            />
-                            <span
-                                class="text-xs text-slate-500 dark:text-gray-400"
-                                >minutes</span
-                            >
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Presets Management Card -->
-            <div
-                class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div
-                    class="mb-6 flex flex-col gap-3 border-b border-slate-100 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-                >
-                    <div class="flex items-center gap-3">
-                        <div
-                            class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-950/50 dark:text-amber-400"
-                        >
-                            <Sparkles class="h-4 w-4" />
-                        </div>
-                        <div>
-                            <h2
-                                class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Message Presets
-                            </h2>
-                            <p
-                                class="text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Customize the presets shown when clicking the
-                                "Poke" button.
-                            </p>
-                        </div>
-                    </div>
-
-                    <div class="flex items-center gap-2">
-                        <button
-                            type="button"
-                            @click="resetToDefaultPresets"
-                            class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-                        >
-                            <RotateCcw class="h-3.5 w-3.5" />
-                            <span>Reset Defaults</span>
-                        </button>
-                        <button
-                            type="button"
-                            @click="addPreset"
-                            class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-bold text-indigo-600 transition hover:bg-indigo-100 dark:bg-indigo-950/60 dark:text-indigo-400 dark:hover:bg-indigo-900/60"
-                        >
-                            <Plus class="h-3.5 w-3.5" />
-                            <span>Add Preset</span>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Presets List -->
-                <div class="space-y-3.5">
-                    <div
-                        v-for="(preset, idx) in form.presets"
-                        :key="preset.id || idx"
-                        class="flex flex-col gap-3 rounded-xl border border-slate-200/70 bg-slate-50/40 p-4 transition sm:flex-row sm:items-center dark:border-gray-800 dark:bg-gray-800/30"
-                    >
-                        <!-- Icon Picker / Emoji -->
-                        <div class="w-14 shrink-0">
-                            <label
-                                class="mb-1 block text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                            >
-                                Emoji
-                            </label>
-                            <input
-                                type="text"
-                                v-model="preset.icon"
-                                maxlength="6"
-                                required
-                                class="w-full rounded-lg border border-slate-300 bg-white py-1.5 text-center text-base focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                            />
-                        </div>
-
-                        <!-- Message -->
-                        <div class="flex-1">
-                            <label
-                                class="mb-1 block text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                            >
-                                Notification Message
-                            </label>
-                            <input
-                                type="text"
-                                v-model="preset.message"
-                                placeholder="e.g. That syllabus isn't going to finish itself!"
-                                required
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs text-slate-800 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
-                            />
-                        </div>
-
-                        <!-- Actions -->
-                        <div class="flex items-center justify-end sm:pt-4">
-                            <button
-                                type="button"
-                                @click="removePreset(idx)"
-                                :disabled="form.presets.length <= 1"
-                                class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 disabled:opacity-30 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                title="Delete Preset"
-                            >
-                                <Trash2 class="h-4 w-4" />
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/Tickets.tsx b/resources/js/pages/admin/Tickets.tsx
new file mode 100644
index 00000000..95d85076
--- /dev/null
+++ b/resources/js/pages/admin/Tickets.tsx
@@ -0,0 +1,633 @@
+import { Head, Link, router, useForm } from '@inertiajs/vue3';
+import {
+    LifeBuoy,
+    MessageSquare,
+    Search,
+    Send,
+    Trash2,
+    Image as ImageIcon,
+} from 'lucide-vue-next';
+import { computed, defineComponent, onUnmounted, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    AdminSelect,
+    SegmentedTabs,
+    adminCardRowClass,
+    adminDangerIconBtnClass,
+    adminHoverListClass,
+    adminOptionClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSearchInputClass,
+} from '@/components/admin/ui';
+import BaseModal from '@/components/BaseModal.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import Pagination from '@/components/Pagination.vue';
+import StatusBadge from '@/components/StatusBadge.vue';
+import { markAdminFormDirty } from '@/lib/adminFormGuard';
+import { formatDateTime } from '@/lib/useDate';
+
+interface UserInfo {
+    id: number;
+    name: string;
+    username: string;
+    email: string;
+    image_path?: string | null;
+}
+
+interface Ticket {
+    id: number;
+    ticket_number: string;
+    user_id: number;
+    user: UserInfo;
+    category: string;
+    subject: string;
+    message: string;
+    attachment_url?: string | null;
+    status: 'open' | 'in_progress' | 'resolved' | 'closed';
+    admin_reply?: string | null;
+    replied_by?: UserInfo | null;
+    replied_at?: string | null;
+    created_at: string;
+}
+
+interface PaginationLinkItem {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+interface PaginatedTickets {
+    data: Ticket[];
+    links: PaginationLinkItem[];
+    total: number;
+    current_page: number;
+    last_page: number;
+}
+
+interface TicketStats {
+    total: number;
+    open: number;
+    in_progress: number;
+    resolved: number;
+    closed: number;
+}
+
+interface TicketFilters {
+    status?: string | null;
+    category?: string | null;
+    search?: string | null;
+}
+
+export default defineComponent({
+    name: 'AdminTickets',
+    props: {
+        tickets: {
+            type: Object as PropType<PaginatedTickets>,
+            required: true,
+        },
+        stats: { type: Object as PropType<TicketStats>, required: true },
+        filters: { type: Object as PropType<TicketFilters>, required: true },
+        categories: {
+            type: Object as PropType<Record<string, string>>,
+            required: true,
+        },
+    },
+    setup(props) {
+        const searchTerm = ref(props.filters.search || '');
+        const selectedStatus = ref(props.filters.status || 'all');
+        const selectedCategory = ref(props.filters.category || 'all');
+
+        // Modal State
+        const isModalOpen = ref(false);
+        const activeTicket = ref<Ticket | null>(null);
+
+        const replyForm = useForm({
+            admin_reply: '',
+            status: 'resolved',
+        });
+
+        watch(
+            () => replyForm.isDirty,
+            (v) => markAdminFormDirty(v),
+        );
+
+        onUnmounted(() => markAdminFormDirty(false));
+
+        /**
+         * Opens reply editing with the existing reply. For open tickets, the
+         * reply status defaults to resolved; other statuses are kept.
+         */
+        const openReplyModal = (ticket: Ticket) => {
+            activeTicket.value = ticket;
+            replyForm.admin_reply = ticket.admin_reply || '';
+            replyForm.status =
+                ticket.status === 'open' ? 'resolved' : ticket.status;
+            isModalOpen.value = true;
+        };
+
+        const closeReplyModal = () => {
+            isModalOpen.value = false;
+            activeTicket.value = null;
+            replyForm.reset();
+        };
+
+        /** Spread onto BaseModal: avoids the ambiguous JSX
+         *  `v-model:isOpen` spelling and stays type-safe. */
+        const bindReplyOpen = (): {
+            isOpen: boolean;
+            'onUpdate:isOpen': (value: boolean) => void;
+        } => ({
+            isOpen: isModalOpen.value && activeTicket.value !== null,
+            'onUpdate:isOpen': (value: boolean) => {
+                if (!value) {
+                    closeReplyModal();
+                } else {
+                    isModalOpen.value = value;
+                }
+            },
+        });
+
+        const submitReply = () => {
+            if (!activeTicket.value) {
+                return;
+            }
+
+            replyForm.patch(`/admin/tickets/${activeTicket.value.id}`, {
+                preserveScroll: true,
+                onSuccess: () => {
+                    closeReplyModal();
+                },
+            });
+        };
+
+        /**
+         * Requests a status-only update. The payload omits `admin_reply`
+         * entirely, so the server leaves `replied_by`/`replied_at` untouched
+         * and a status change can't re-attribute another admin's reply.
+         */
+        const updateStatus = (ticket: Ticket, newStatus: string) => {
+            router.patch(
+                `/admin/tickets/${ticket.id}`,
+                {
+                    status: newStatus,
+                },
+                { preserveScroll: true },
+            );
+        };
+
+        const deleteTicket = (ticket: Ticket) => {
+            if (
+                confirm(
+                    `Are you sure you want to permanently delete ticket ${ticket.ticket_number}?`,
+                )
+            ) {
+                router.delete(`/admin/tickets/${ticket.id}`, {
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        const applyFilters = () => {
+            router.get(
+                '/admin/tickets',
+                {
+                    search: searchTerm.value || undefined,
+                    status:
+                        selectedStatus.value === 'all'
+                            ? undefined
+                            : selectedStatus.value,
+                    category:
+                        selectedCategory.value === 'all'
+                            ? undefined
+                            : selectedCategory.value,
+                },
+                { preserveState: true, replace: true },
+            );
+        };
+
+        const setStatusFilter = (status: string) => {
+            selectedStatus.value = status;
+            applyFilters();
+        };
+
+        const getCategoryLabel = (key: string) => {
+            return props.categories[key] || key;
+        };
+
+        const formatDate = formatDateTime;
+
+        const onSearchInput = (e: Event) => {
+            searchTerm.value = (e.target as HTMLInputElement).value;
+        };
+
+        const onSearchKeyup = (e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+                applyFilters();
+            }
+        };
+
+        const onReplyInput = (e: Event) => {
+            replyForm.admin_reply = (e.target as HTMLTextAreaElement).value;
+        };
+
+        const onReplyStatusChange = (e: Event) => {
+            replyForm.status = (e.target as HTMLSelectElement).value;
+        };
+
+        const onReplySubmit = (e: Event) => {
+            e.preventDefault();
+            submitReply();
+        };
+
+        const tabOptions = computed(() => [
+            { value: 'all', label: `All (${props.stats.total})` },
+            { value: 'open', label: `Open (${props.stats.open})` },
+            {
+                value: 'in_progress',
+                label: `In Progress (${props.stats.in_progress})`,
+            },
+            {
+                value: 'resolved',
+                label: `Resolved (${props.stats.resolved})`,
+            },
+            { value: 'closed', label: `Closed (${props.stats.closed})` },
+        ]);
+
+        return () => {
+            const active = activeTicket.value;
+
+            return (
+                <>
+                    <Head title="Support Tickets - Admin" />
+
+                    <div class={adminPageClass}>
+                        {/* Page header */}
+                        <AdminPageHeader
+                            title="Support Tickets"
+                            description="Reply to student requests and track resolution status."
+                        >
+                            {{
+                                actions: () => (
+                                    <div class="relative w-full sm:w-64">
+                                        <Search class="pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2 text-slate-400 dark:text-gray-500" />
+                                        <input
+                                            value={searchTerm.value}
+                                            onInput={onSearchInput}
+                                            onKeyup={onSearchKeyup}
+                                            type="text"
+                                            placeholder="Search tickets, student, subject..."
+                                            class={adminSearchInputClass}
+                                        />
+                                    </div>
+                                ),
+                            }}
+                        </AdminPageHeader>
+
+                        {/* Status filter tabs */}
+                        <SegmentedTabs
+                            tabs={tabOptions.value}
+                            active={selectedStatus.value}
+                            onSelect={(value: string) =>
+                                setStatusFilter(
+                                    value as typeof selectedStatus.value,
+                                )
+                            }
+                        />
+
+                        {/* Ticket list */}
+                        <div>
+                            {props.tickets.data.length === 0 ? (
+                                <EmptyState
+                                    icon={LifeBuoy}
+                                    title="No tickets found"
+                                    description="Try changing your search keywords or filter options."
+                                />
+                            ) : (
+                                <div class={adminHoverListClass}>
+                                    {props.tickets.data.map((ticket) => (
+                                        <div
+                                            key={ticket.id}
+                                            class={[
+                                                ...adminCardRowClass('indigo'),
+                                                'flex-col sm:flex-row sm:items-start sm:justify-between',
+                                            ]}
+                                        >
+                                            <div class="min-w-0 flex-1 space-y-1">
+                                                <div class="flex flex-wrap items-center gap-1.5">
+                                                    <span class="font-mono text-[11px] font-bold text-slate-500 dark:text-gray-400">
+                                                        {ticket.ticket_number}
+                                                    </span>
+                                                    <StatusBadge
+                                                        status={ticket.status}
+                                                        size="xs"
+                                                        showIcon={false}
+                                                    />
+                                                    <span class="text-[11px] font-semibold text-indigo-600 dark:text-indigo-400">
+                                                        {getCategoryLabel(
+                                                            ticket.category,
+                                                        )}
+                                                    </span>
+                                                    {ticket.attachment_url ? (
+                                                        <span class="inline-flex items-center gap-0.5 rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-600 dark:bg-gray-800 dark:text-gray-300">
+                                                            <ImageIcon class="h-3 w-3" />
+                                                            <span>
+                                                                Attachment
+                                                            </span>
+                                                        </span>
+                                                    ) : null}
+                                                </div>
+                                                <p class="text-sm font-semibold text-slate-900 dark:text-gray-100">
+                                                    {ticket.subject}
+                                                </p>
+                                                <p class="text-[11px] text-slate-500 dark:text-gray-400">
+                                                    {ticket.user ? (
+                                                        <Link
+                                                            href={`/u/${ticket.user.username}`}
+                                                            class="font-medium text-slate-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
+                                                        >
+                                                            {ticket.user.name} (
+                                                            {ticket.user.email})
+                                                        </Link>
+                                                    ) : (
+                                                        <span>
+                                                            Unknown user
+                                                        </span>
+                                                    )}
+                                                    <span>
+                                                        {' '}
+                                                        · Created{' '}
+                                                        {formatDate(
+                                                            ticket.created_at,
+                                                        )}
+                                                    </span>
+                                                    {ticket.replied_by ? (
+                                                        <span>
+                                                            {' '}
+                                                            <span>
+                                                                &bull;
+                                                            </span>{' '}
+                                                            <span class="font-medium text-emerald-600 dark:text-emerald-400">
+                                                                Replied by:{' '}
+                                                                {
+                                                                    ticket
+                                                                        .replied_by
+                                                                        .name
+                                                                }
+                                                            </span>
+                                                        </span>
+                                                    ) : null}
+                                                </p>
+                                            </div>
+                                            <div class="flex shrink-0 flex-wrap items-center gap-1.5">
+                                                <AdminSelect
+                                                    value={ticket.status}
+                                                    onChange={(e: Event) =>
+                                                        updateStatus(
+                                                            ticket,
+                                                            (
+                                                                e.target as HTMLSelectElement
+                                                            ).value,
+                                                        )
+                                                    }
+                                                    title="Update ticket status"
+                                                    toneClass="w-32"
+                                                >
+                                                    <option
+                                                        value="open"
+                                                        class={adminOptionClass}
+                                                    >
+                                                        Open
+                                                    </option>
+                                                    <option
+                                                        value="in_progress"
+                                                        class={adminOptionClass}
+                                                    >
+                                                        In Progress
+                                                    </option>
+                                                    <option
+                                                        value="resolved"
+                                                        class={adminOptionClass}
+                                                    >
+                                                        Resolved
+                                                    </option>
+                                                    <option
+                                                        value="closed"
+                                                        class={adminOptionClass}
+                                                    >
+                                                        Closed
+                                                    </option>
+                                                </AdminSelect>
+                                                <button
+                                                    type="button"
+                                                    onClick={() =>
+                                                        openReplyModal(ticket)
+                                                    }
+                                                    class={adminPrimaryBtnClass}
+                                                >
+                                                    <MessageSquare class="h-3.5 w-3.5" />
+                                                    <span>
+                                                        {ticket.admin_reply
+                                                            ? 'Edit Reply'
+                                                            : 'Respond'}
+                                                    </span>
+                                                </button>
+                                                <button
+                                                    type="button"
+                                                    onClick={() =>
+                                                        deleteTicket(ticket)
+                                                    }
+                                                    title="Delete ticket"
+                                                    aria-label="Delete ticket"
+                                                    class={
+                                                        adminDangerIconBtnClass
+                                                    }
+                                                >
+                                                    <Trash2 class="h-4 w-4" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                            {props.tickets.links &&
+                            props.tickets.links.length > 3 ? (
+                                <div class="mt-6 border-t border-slate-200/60 pt-4 dark:border-slate-800/60">
+                                    <Pagination
+                                        links={props.tickets.links}
+                                        currentPage={props.tickets.current_page}
+                                        lastPage={props.tickets.last_page}
+                                    />
+                                </div>
+                            ) : null}
+                        </div>
+
+                        {/* Reply / resolution modal */}
+                        <BaseModal
+                            {...bindReplyOpen()}
+                            maxWidth="2xl"
+                            position="center"
+                            onClose={closeReplyModal}
+                        >
+                            {{
+                                header: () =>
+                                    active ? (
+                                        <div class="flex min-w-0 items-center gap-2">
+                                            <span class="shrink-0 rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[11px] font-bold text-slate-600 dark:bg-gray-800 dark:text-gray-300">
+                                                {active.ticket_number}
+                                            </span>
+                                            <h3 class="truncate text-sm font-bold text-slate-900 dark:text-gray-100">
+                                                {active.subject}
+                                            </h3>
+                                        </div>
+                                    ) : null,
+                                default: () =>
+                                    active ? (
+                                        <div class="space-y-4 px-4 py-4 sm:px-6">
+                                            <div class="border-l-2 border-slate-200 pl-3 dark:border-gray-700">
+                                                <p class="text-[11px] text-slate-500 dark:text-gray-400">
+                                                    {active.user?.name} (
+                                                    {active.user?.email}) ·{' '}
+                                                    {formatDate(
+                                                        active.created_at,
+                                                    )}
+                                                </p>
+                                                <p class="mt-1 text-xs leading-relaxed whitespace-pre-wrap text-slate-700 dark:text-gray-300">
+                                                    {active.message}
+                                                </p>
+                                                {active.attachment_url ? (
+                                                    <a
+                                                        href={
+                                                            active.attachment_url
+                                                        }
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        class="mt-1.5 inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:underline dark:text-indigo-400"
+                                                    >
+                                                        <ImageIcon class="h-3 w-3" />
+                                                        <span>
+                                                            View attachment
+                                                        </span>
+                                                    </a>
+                                                ) : null}
+                                            </div>
+                                            <form
+                                                id="ticket-reply-form"
+                                                onSubmit={onReplySubmit}
+                                                class="space-y-3"
+                                            >
+                                                <div>
+                                                    <div class="mb-1 flex items-center justify-between">
+                                                        <label class="block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                                            Your response
+                                                        </label>
+                                                        {active.replied_by ? (
+                                                            <span class="text-[11px] font-medium text-slate-500 dark:text-gray-400">
+                                                                (Last replied
+                                                                by:{' '}
+                                                                <span class="font-semibold text-slate-700 dark:text-gray-300">
+                                                                    {
+                                                                        active
+                                                                            .replied_by
+                                                                            .name
+                                                                    }
+                                                                </span>
+                                                                )
+                                                            </span>
+                                                        ) : null}
+                                                    </div>
+                                                    <textarea
+                                                        value={
+                                                            replyForm.admin_reply
+                                                        }
+                                                        onInput={onReplyInput}
+                                                        rows={6}
+                                                        placeholder="Type your response to the user here..."
+                                                        required
+                                                        class="min-h-28 w-full rounded-[10px] border border-slate-200 bg-white p-3 text-xs leading-relaxed text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-200 dark:placeholder:text-gray-500 dark:focus:border-indigo-400"
+                                                    />
+                                                    {replyForm.errors
+                                                        .admin_reply ? (
+                                                        <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                                            {
+                                                                replyForm.errors
+                                                                    .admin_reply
+                                                            }
+                                                        </p>
+                                                    ) : null}
+                                                </div>
+                                                <div class="flex items-center gap-2">
+                                                    <label class="text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                                        Update status:
+                                                    </label>
+                                                    <AdminSelect
+                                                        value={replyForm.status}
+                                                        onChange={
+                                                            onReplyStatusChange
+                                                        }
+                                                    >
+                                                        <option
+                                                            value="resolved"
+                                                            class={
+                                                                adminOptionClass
+                                                            }
+                                                        >
+                                                            Resolved
+                                                            (Recommended)
+                                                        </option>
+                                                        <option
+                                                            value="in_progress"
+                                                            class={
+                                                                adminOptionClass
+                                                            }
+                                                        >
+                                                            In Progress
+                                                        </option>
+                                                        <option
+                                                            value="closed"
+                                                            class={
+                                                                adminOptionClass
+                                                            }
+                                                        >
+                                                            Closed
+                                                        </option>
+                                                    </AdminSelect>
+                                                </div>
+                                            </form>
+                                        </div>
+                                    ) : null,
+                                footer: () =>
+                                    active ? (
+                                        <div class="flex items-center justify-end gap-2">
+                                            <button
+                                                type="button"
+                                                onClick={closeReplyModal}
+                                                class="cursor-pointer rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                                            >
+                                                Cancel
+                                            </button>
+                                            <button
+                                                type="submit"
+                                                form="ticket-reply-form"
+                                                disabled={replyForm.processing}
+                                                class={adminPrimaryBtnClass}
+                                            >
+                                                <Send class="h-3.5 w-3.5" />
+                                                <span>
+                                                    {replyForm.processing
+                                                        ? 'Saving...'
+                                                        : 'Send response'}
+                                                </span>
+                                            </button>
+                                        </div>
+                                    ) : null,
+                            }}
+                        </BaseModal>
+                    </div>
+                </>
+            );
+        };
+    },
+});
diff --git a/resources/js/pages/admin/Tickets.vue b/resources/js/pages/admin/Tickets.vue
deleted file mode 100644
index 2cdd483d..00000000
--- a/resources/js/pages/admin/Tickets.vue
+++ /dev/null
@@ -1,633 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, router, useForm } from '@inertiajs/vue3';
-import {
-    LifeBuoy,
-    Search,
-    Clock,
-    HelpCircle,
-    CheckCircle2,
-    XCircle,
-    MessageSquare,
-    Send,
-    Trash2,
-    Image as ImageIcon,
-    User as UserIcon,
-} from 'lucide-vue-next';
-import { ref } from 'vue';
-import BaseModal from '@/components/BaseModal.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import Pagination from '@/components/Pagination.vue';
-import StatusBadge from '@/components/StatusBadge.vue';
-import { formatDateTime } from '@/lib/useDate';
-
-interface UserInfo {
-    id: number;
-    name: string;
-    username: string;
-    email: string;
-    image_path?: string | null;
-}
-
-interface Ticket {
-    id: number;
-    ticket_number: string;
-    user_id: number;
-    user: UserInfo;
-    category: string;
-    subject: string;
-    message: string;
-    attachment_url?: string | null;
-    status: 'open' | 'in_progress' | 'resolved' | 'closed';
-    admin_reply?: string | null;
-    replied_by?: UserInfo | null;
-    replied_at?: string | null;
-    created_at: string;
-}
-
-interface PaginationLink {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-const props = defineProps<{
-    tickets: {
-        data: Ticket[];
-        links: PaginationLink[];
-        total: number;
-        current_page: number;
-        last_page: number;
-    };
-    stats: {
-        total: number;
-        open: number;
-        in_progress: number;
-        resolved: number;
-        closed: number;
-    };
-    filters: {
-        status?: string | null;
-        category?: string | null;
-        search?: string | null;
-    };
-    categories: Record<string, string>;
-}>();
-
-const searchTerm = ref(props.filters.search || '');
-const selectedStatus = ref(props.filters.status || 'all');
-const selectedCategory = ref(props.filters.category || 'all');
-
-// Modal State
-const isModalOpen = ref(false);
-const activeTicket = ref<Ticket | null>(null);
-
-const replyForm = useForm({
-    admin_reply: '',
-    status: 'resolved',
-});
-
-const openReplyModal = (ticket: Ticket) => {
-    activeTicket.value = ticket;
-    replyForm.admin_reply = ticket.admin_reply || '';
-    replyForm.status = ticket.status === 'open' ? 'resolved' : ticket.status;
-    isModalOpen.value = true;
-};
-
-const closeReplyModal = () => {
-    isModalOpen.value = false;
-    activeTicket.value = null;
-    replyForm.reset();
-};
-
-const submitReply = () => {
-    if (!activeTicket.value) {
-        return;
-    }
-
-    replyForm.patch(`/admin/tickets/${activeTicket.value.id}`, {
-        preserveScroll: true,
-        onSuccess: () => {
-            closeReplyModal();
-        },
-    });
-};
-
-const updateStatus = (ticket: Ticket, newStatus: string) => {
-    let reply = ticket.admin_reply;
-
-    if (!reply) {
-        const defaultMessages: Record<string, string> = {
-            resolved:
-                'আপনার টিকেটটি পর্যালোচনা করা হয়েছে এবং বিষয়টি সমাধান করা হয়েছে। ধন্যবাদ!',
-            closed: 'আপনার সাপোর্ট টিকেটটি পর্যালোচনা শেষে বন্ধ করা হয়েছে।',
-            in_progress:
-                'আমাদের সাপোর্ট টিম আপনার টিকেটটি পর্যালোচনা করছে এবং খুব শীঘ্রই সমাধান করা হবে।',
-        };
-
-        reply = defaultMessages[newStatus] || null;
-    }
-
-    router.patch(
-        `/admin/tickets/${ticket.id}`,
-        {
-            status: newStatus,
-            admin_reply: reply,
-        },
-        { preserveScroll: true },
-    );
-};
-
-const deleteTicket = (ticket: Ticket) => {
-    if (
-        confirm(
-            `Are you sure you want to permanently delete ticket ${ticket.ticket_number}?`,
-        )
-    ) {
-        router.delete(`/admin/tickets/${ticket.id}`, {
-            preserveScroll: true,
-        });
-    }
-};
-
-const applyFilters = () => {
-    router.get(
-        '/admin/tickets',
-        {
-            search: searchTerm.value || undefined,
-            status:
-                selectedStatus.value === 'all'
-                    ? undefined
-                    : selectedStatus.value,
-            category:
-                selectedCategory.value === 'all'
-                    ? undefined
-                    : selectedCategory.value,
-        },
-        { preserveState: true, replace: true },
-    );
-};
-
-const getCategoryLabel = (key: string) => {
-    return props.categories[key] || key;
-};
-
-const formatDate = formatDateTime;
-</script>
-
-<template>
-    <Head title="Support Tickets - Admin" />
-
-    <div class="flex w-full flex-1 flex-col space-y-6">
-        <!-- Page Header & Search Bar -->
-        <div
-            class="flex flex-col gap-3 border-b border-slate-200 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-        >
-            <div class="flex items-center gap-2.5">
-                <div
-                    class="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-xs"
-                >
-                    <LifeBuoy class="h-5 w-5" />
-                </div>
-                <div>
-                    <div class="flex items-center gap-2">
-                        <h2
-                            class="text-xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
-                        >
-                            Support Tickets
-                        </h2>
-                        <span
-                            class="rounded-md bg-indigo-50 px-2 py-0.5 text-xs font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400"
-                        >
-                            {{ stats.total }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Top Line Search Bar -->
-            <div class="relative w-full sm:w-72">
-                <Search
-                    class="absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2 text-slate-400"
-                />
-                <input
-                    v-model="searchTerm"
-                    @keyup.enter="applyFilters"
-                    type="text"
-                    placeholder="Search tickets, student, subject..."
-                    class="w-full rounded-xl border border-slate-200 bg-white py-1.5 pr-3 pl-8 text-xs text-slate-900 shadow-2xs placeholder:text-slate-400 focus:border-indigo-600 focus:outline-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100"
-                />
-            </div>
-        </div>
-
-        <!-- Metric Stat Cards -->
-        <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-            <button
-                type="button"
-                @click="
-                    selectedStatus = 'open';
-                    applyFilters();
-                "
-                class="flex items-center justify-between rounded-xl border p-4 text-left transition-all"
-                :class="
-                    selectedStatus === 'open'
-                        ? 'border-amber-500 bg-amber-50/50 dark:border-amber-500/50 dark:bg-amber-500/10'
-                        : 'border-slate-200/80 bg-white hover:border-slate-300 dark:border-gray-800 dark:bg-gray-900'
-                "
-            >
-                <div>
-                    <p
-                        class="text-xs font-bold text-slate-500 dark:text-gray-400"
-                    >
-                        Open / Pending
-                    </p>
-                    <p
-                        class="mt-1 text-2xl font-black text-amber-600 dark:text-amber-400"
-                    >
-                        {{ stats.open }}
-                    </p>
-                </div>
-                <Clock class="h-6 w-6 text-amber-500/60" />
-            </button>
-
-            <button
-                type="button"
-                @click="
-                    selectedStatus = 'in_progress';
-                    applyFilters();
-                "
-                class="flex items-center justify-between rounded-xl border p-4 text-left transition-all"
-                :class="
-                    selectedStatus === 'in_progress'
-                        ? 'border-blue-500 bg-blue-50/50 dark:border-blue-500/50 dark:bg-blue-500/10'
-                        : 'border-slate-200/80 bg-white hover:border-slate-300 dark:border-gray-800 dark:bg-gray-900'
-                "
-            >
-                <div>
-                    <p
-                        class="text-xs font-bold text-slate-500 dark:text-gray-400"
-                    >
-                        In Progress
-                    </p>
-                    <p
-                        class="mt-1 text-2xl font-black text-blue-600 dark:text-blue-400"
-                    >
-                        {{ stats.in_progress }}
-                    </p>
-                </div>
-                <HelpCircle class="h-6 w-6 text-blue-500/60" />
-            </button>
-
-            <button
-                type="button"
-                @click="
-                    selectedStatus = 'resolved';
-                    applyFilters();
-                "
-                class="flex items-center justify-between rounded-xl border p-4 text-left transition-all"
-                :class="
-                    selectedStatus === 'resolved'
-                        ? 'border-emerald-500 bg-emerald-50/50 dark:border-emerald-500/50 dark:bg-emerald-500/10'
-                        : 'border-slate-200/80 bg-white hover:border-slate-300 dark:border-gray-800 dark:bg-gray-900'
-                "
-            >
-                <div>
-                    <p
-                        class="text-xs font-bold text-slate-500 dark:text-gray-400"
-                    >
-                        Resolved
-                    </p>
-                    <p
-                        class="mt-1 text-2xl font-black text-emerald-600 dark:text-emerald-400"
-                    >
-                        {{ stats.resolved }}
-                    </p>
-                </div>
-                <CheckCircle2 class="h-6 w-6 text-emerald-500/60" />
-            </button>
-
-            <button
-                type="button"
-                @click="
-                    selectedStatus = 'closed';
-                    applyFilters();
-                "
-                class="flex items-center justify-between rounded-xl border p-4 text-left transition-all"
-                :class="
-                    selectedStatus === 'closed'
-                        ? 'border-slate-400 bg-slate-100 dark:border-gray-600 dark:bg-gray-800'
-                        : 'border-slate-200/80 bg-white hover:border-slate-300 dark:border-gray-800 dark:bg-gray-900'
-                "
-            >
-                <div>
-                    <p
-                        class="text-xs font-bold text-slate-500 dark:text-gray-400"
-                    >
-                        Closed
-                    </p>
-                    <p
-                        class="mt-1 text-2xl font-black text-slate-700 dark:text-gray-300"
-                    >
-                        {{ stats.closed }}
-                    </p>
-                </div>
-                <XCircle class="h-6 w-6 text-slate-400" />
-            </button>
-        </div>
-
-        <!-- Ticket Table / List -->
-        <div
-            class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-        >
-            <EmptyState
-                v-if="tickets.data.length === 0"
-                :icon="LifeBuoy"
-                title="No tickets found"
-                description="Try changing your search keywords or filter options."
-            />
-
-            <div v-else class="divide-y divide-slate-100 dark:divide-gray-800">
-                <div
-                    v-for="ticket in tickets.data"
-                    :key="ticket.id"
-                    class="flex flex-col gap-4 p-5 transition-colors hover:bg-slate-50/70 sm:flex-row sm:items-center sm:justify-between dark:hover:bg-gray-800/50"
-                >
-                    <!-- Left: User & Ticket Info -->
-                    <div class="space-y-1.5">
-                        <div class="flex flex-wrap items-center gap-2">
-                            <span
-                                class="rounded-md bg-slate-100 px-2 py-0.5 font-mono text-[11px] font-bold text-slate-700 dark:bg-gray-800 dark:text-gray-300"
-                            >
-                                {{ ticket.ticket_number }}
-                            </span>
-
-                            <StatusBadge :status="ticket.status" />
-
-                            <span
-                                class="rounded-md bg-indigo-50 px-2 py-0.5 text-[11px] font-semibold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
-                            >
-                                {{ getCategoryLabel(ticket.category) }}
-                            </span>
-
-                            <span
-                                v-if="ticket.attachment_url"
-                                class="inline-flex items-center gap-1 rounded-md bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold text-amber-700 dark:bg-amber-500/10 dark:text-amber-300"
-                            >
-                                <ImageIcon class="h-3 w-3" />
-                                <span>Image</span>
-                            </span>
-                        </div>
-
-                        <h4
-                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            {{ ticket.subject }}
-                        </h4>
-
-                        <!-- Student Metadata -->
-                        <div
-                            class="flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            <Link
-                                v-if="ticket.user"
-                                :href="`/u/${ticket.user.username}`"
-                                class="flex items-center gap-1.5 font-medium hover:text-indigo-600 dark:hover:text-indigo-400"
-                            >
-                                <UserIcon class="h-3.5 w-3.5" />
-                                <span
-                                    >{{ ticket.user.name }} ({{
-                                        ticket.user.email
-                                    }})</span
-                                >
-                            </Link>
-                            <span>&bull;</span>
-                            <span
-                                >Created:
-                                {{ formatDate(ticket.created_at) }}</span
-                            >
-                            <template v-if="ticket.replied_by">
-                                <span>&bull;</span>
-                                <span
-                                    class="font-medium text-emerald-600 dark:text-emerald-400"
-                                >
-                                    Replied by: {{ ticket.replied_by.name }}
-                                </span>
-                            </template>
-                        </div>
-                    </div>
-
-                    <!-- Right: Actions & Status -->
-                    <div class="flex flex-wrap items-center gap-2">
-                        <!-- Quick Status Select -->
-                        <select
-                            :value="ticket.status"
-                            @change="
-                                (e) =>
-                                    updateStatus(
-                                        ticket,
-                                        (e.target as HTMLSelectElement).value,
-                                    )
-                            "
-                            class="rounded-xl border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs focus:border-indigo-600 focus:outline-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
-                        >
-                            <option value="open">Open</option>
-                            <option value="in_progress">In Progress</option>
-                            <option value="resolved">Resolved</option>
-                            <option value="closed">Closed</option>
-                        </select>
-
-                        <!-- Respond Button -->
-                        <button
-                            type="button"
-                            @click="openReplyModal(ticket)"
-                            class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-bold shadow-2xs transition-all active:scale-95"
-                            :class="
-                                ticket.admin_reply
-                                    ? 'bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
-                                    : 'bg-indigo-600 text-white hover:bg-indigo-700'
-                            "
-                        >
-                            <MessageSquare class="h-3.5 w-3.5" />
-                            <span>{{
-                                ticket.admin_reply ? 'Edit Reply' : 'Respond'
-                            }}</span>
-                        </button>
-
-                        <!-- Delete Button -->
-                        <button
-                            type="button"
-                            @click="deleteTicket(ticket)"
-                            class="rounded-xl p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-500/10 dark:hover:text-rose-400"
-                            title="Delete Ticket"
-                        >
-                            <Trash2 class="h-4 w-4" />
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Pagination Links -->
-            <div
-                v-if="tickets.links && tickets.links.length > 3"
-                class="border-t border-slate-100 bg-slate-50/50 px-4 py-1 dark:border-gray-800 dark:bg-gray-900/60"
-            >
-                <Pagination
-                    :links="tickets.links"
-                    :current-page="tickets.current_page"
-                    :last-page="tickets.last_page"
-                />
-            </div>
-        </div>
-
-        <!-- Reply / Resolution Modal -->
-        <BaseModal
-            :is-open="isModalOpen && !!activeTicket"
-            max-width="2xl"
-            position="center"
-            @close="closeReplyModal"
-        >
-            <template #header>
-                <div v-if="activeTicket" class="flex items-center gap-2">
-                    <span
-                        class="rounded-md bg-slate-100 px-2 py-0.5 font-mono text-xs font-bold text-slate-700 dark:bg-gray-800 dark:text-gray-300"
-                    >
-                        {{ activeTicket.ticket_number }}
-                    </span>
-                    <h3
-                        class="text-base font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        {{ activeTicket.subject }}
-                    </h3>
-                </div>
-            </template>
-
-            <div v-if="activeTicket" class="p-6 pt-4">
-                <!-- User Query Details -->
-                <div class="space-y-4">
-                    <div
-                        class="rounded-xl border border-slate-200/60 bg-slate-50 p-4 dark:border-gray-800 dark:bg-gray-950/60"
-                    >
-                        <div class="mb-2 flex items-center justify-between">
-                            <span
-                                class="text-xs font-bold text-slate-700 dark:text-gray-300"
-                            >
-                                Submitter: {{ activeTicket.user?.name }} ({{
-                                    activeTicket.user?.email
-                                }})
-                            </span>
-                            <span class="text-[11px] text-slate-400">
-                                {{ formatDate(activeTicket.created_at) }}
-                            </span>
-                        </div>
-                        <p
-                            class="text-xs leading-relaxed whitespace-pre-wrap text-slate-700 dark:text-gray-300"
-                        >
-                            {{ activeTicket.message }}
-                        </p>
-
-                        <!-- Attached Screenshot -->
-                        <div v-if="activeTicket.attachment_url" class="mt-3">
-                            <p
-                                class="mb-1 text-[11px] font-bold text-slate-500"
-                            >
-                                Attachment:
-                            </p>
-                            <a
-                                :href="activeTicket.attachment_url"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-600 hover:underline dark:text-indigo-400"
-                            >
-                                <ImageIcon class="h-3.5 w-3.5" />
-                                <span>View Attachment</span>
-                            </a>
-                        </div>
-                    </div>
-
-                    <!-- Reply Form -->
-                    <form @submit.prevent="submitReply" class="space-y-3">
-                        <div>
-                            <div class="mb-1 flex items-center justify-between">
-                                <label
-                                    class="block text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    Your Response / Staff Message
-                                </label>
-                                <span
-                                    v-if="activeTicket.replied_by"
-                                    class="text-[11px] font-medium text-slate-500 dark:text-gray-400"
-                                >
-                                    (Last replied by:
-                                    <span
-                                        class="font-semibold text-slate-700 dark:text-gray-300"
-                                        >{{
-                                            activeTicket.replied_by.name
-                                        }}</span
-                                    >)
-                                </span>
-                            </div>
-                            <textarea
-                                v-model="replyForm.admin_reply"
-                                rows="5"
-                                placeholder="Type your response to the user here..."
-                                class="w-full rounded-xl border border-slate-200 bg-white p-3 text-xs leading-relaxed text-slate-800 focus:border-indigo-600 focus:outline-none dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200"
-                                required
-                            ></textarea>
-                            <div
-                                v-if="replyForm.errors.admin_reply"
-                                class="mt-1 text-xs text-rose-500"
-                            >
-                                {{ replyForm.errors.admin_reply }}
-                            </div>
-                        </div>
-
-                        <div
-                            class="flex flex-wrap items-center justify-between gap-3 pt-2"
-                        >
-                            <div class="flex items-center gap-2">
-                                <label
-                                    class="text-xs font-bold text-slate-700 dark:text-gray-300"
-                                >
-                                    Update Status:
-                                </label>
-                                <select
-                                    v-model="replyForm.status"
-                                    class="rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 focus:border-indigo-600 focus:outline-none dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300"
-                                >
-                                    <option value="resolved">
-                                        Resolved (Recommended)
-                                    </option>
-                                    <option value="in_progress">
-                                        In Progress
-                                    </option>
-                                    <option value="closed">Closed</option>
-                                </select>
-                            </div>
-
-                            <div class="flex items-center justify-end gap-2">
-                                <button
-                                    type="button"
-                                    @click="closeReplyModal"
-                                    class="cursor-pointer rounded-xl px-4 py-2 text-xs font-bold text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800"
-                                >
-                                    Cancel
-                                </button>
-                                <button
-                                    type="submit"
-                                    :disabled="replyForm.processing"
-                                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-5 py-2 text-xs font-bold text-white shadow-2xs hover:bg-indigo-700 disabled:opacity-50"
-                                >
-                                    <Send class="h-3.5 w-3.5" />
-                                    <span>{{
-                                        replyForm.processing
-                                            ? 'Saving...'
-                                            : 'Send Response'
-                                    }}</span>
-                                </button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </BaseModal>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/chat/Reports.tsx b/resources/js/pages/admin/chat/Reports.tsx
new file mode 100644
index 00000000..b903fb99
--- /dev/null
+++ b/resources/js/pages/admin/chat/Reports.tsx
@@ -0,0 +1,448 @@
+import { Head, Link, router } from '@inertiajs/vue3';
+import { Ban, Flag, MessageCircle, Trash2 } from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    SegmentedTabs,
+    adminCardRowClass,
+    adminDangerIconBtnClass,
+    adminDangerTextBtnClass,
+    adminHoverListClass,
+    adminMutedTextBtnClass,
+    adminPageClass,
+    adminSubNavBadgeClass,
+    adminSubNavClass,
+    adminSubNavLinkClass,
+    adminSuccessTextBtnClass,
+} from '@/components/admin/ui';
+import ChatBanModal from '@/components/ChatBanModal.vue';
+import type { ChatBanUser } from '@/components/ChatBanModal.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import { formatDateTime } from '@/lib/useDate';
+
+interface ReportReporter {
+    id: number;
+    name: string;
+    username: string;
+}
+
+interface ReportReportedUser {
+    id: number;
+    name: string;
+    username: string;
+    banned_until: string | null;
+    is_banned: boolean;
+}
+
+type ReportStatus = 'pending' | 'reviewed' | 'dismissed';
+type ReportFilter = 'all' | ReportStatus;
+
+interface ReportItem {
+    id: number;
+    reporter_id: number | null;
+    reporter: ReportReporter | null;
+    reported_user_id: number | null;
+    reported_user_name: string | null;
+    reported_user_username: string | null;
+    reported_user: ReportReportedUser | null;
+    message_content: string;
+    message_sent_at: string | null;
+    reason: string | null;
+    status: ReportStatus;
+    created_at: string;
+}
+
+export default defineComponent({
+    name: 'AdminChatReports',
+    props: {
+        reports: { type: Array as PropType<ReportItem[]>, required: true },
+        pendingCount: { type: Number, required: true },
+        reviewedCount: { type: Number, required: true },
+        dismissedCount: { type: Number, required: true },
+    },
+    setup(props) {
+        // Filter deep-links: `?status=reviewed` (etc.) is mirrored below.
+        const statusParam = new URLSearchParams(window.location.search).get(
+            'status',
+        ) as ReportFilter | null;
+        const allowedFilters: ReportFilter[] = [
+            'all',
+            'pending',
+            'reviewed',
+            'dismissed',
+        ];
+        const currentFilter = ref<ReportFilter>(
+            statusParam && allowedFilters.includes(statusParam)
+                ? statusParam
+                : 'pending',
+        );
+
+        const filteredReports = computed<ReportItem[]>(() => {
+            if (currentFilter.value === 'all') {
+                return props.reports;
+            }
+
+            return props.reports.filter(
+                (r) => r.status === currentFilter.value,
+            );
+        });
+
+        const updateReportStatus = (
+            reportId: number,
+            status: ReportStatus,
+        ): void => {
+            router.patch(
+                `/admin/chat/reports/${reportId}/status`,
+                { status },
+                { preserveScroll: true },
+            );
+        };
+
+        const deleteReport = (reportId: number): void => {
+            if (
+                confirm(
+                    'Are you sure you want to permanently delete this report record?',
+                )
+            ) {
+                router.delete(`/admin/chat/reports/${reportId}`, {
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        /**
+         * Confirms and requests report deletion for the supplied status.
+         * An omitted status or 'all' requests deletion across all statuses.
+         */
+        const handleClearReports = (statusFilter?: ReportFilter): void => {
+            const isFiltered = statusFilter && statusFilter !== 'all';
+            const confirmMessage = isFiltered
+                ? `Are you sure you want to permanently delete all ${statusFilter} report records? This action cannot be undone.`
+                : 'Are you sure you want to permanently delete ALL report records? This action cannot be undone.';
+
+            if (confirm(confirmMessage)) {
+                router.delete('/admin/chat/reports/clear', {
+                    data: isFiltered ? { status: statusFilter } : {},
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        const isBanModalOpen = ref<boolean>(false);
+        const selectedUser = ref<ChatBanUser | null>(null);
+
+        /** Opens ban controls for the reported user; does nothing without a user ID. */
+        const openBanModal = (report: ReportItem): void => {
+            if (!report.reported_user_id) {
+                return;
+            }
+
+            selectedUser.value = {
+                id: report.reported_user_id,
+                name:
+                    report.reported_user?.name ||
+                    report.reported_user_name ||
+                    'User',
+                username:
+                    report.reported_user?.username ||
+                    report.reported_user_username ||
+                    null,
+                banned_until: report.reported_user?.banned_until || null,
+                is_banned: report.reported_user?.is_banned ?? false,
+            };
+
+            isBanModalOpen.value = true;
+        };
+
+        const closeBanModal = (): void => {
+            isBanModalOpen.value = false;
+        };
+
+        const formatDate = formatDateTime;
+
+        const getAuthorName = (report: ReportItem): string =>
+            report.reported_user_name ||
+            report.reported_user?.name ||
+            'Unknown';
+
+        const getReporterName = (report: ReportItem): string =>
+            report.reporter?.name || 'Someone';
+
+        const statusDotClass = (status: ReportStatus): string => {
+            if (status === 'pending') {
+                return 'bg-rose-500';
+            }
+
+            if (status === 'reviewed') {
+                return 'bg-emerald-500';
+            }
+
+            return 'bg-slate-300 dark:bg-gray-600';
+        };
+
+        const tabOptions = computed(() => [
+            { value: 'all', label: `All (${props.reports.length})` },
+            { value: 'pending', label: `Pending (${props.pendingCount})` },
+            {
+                value: 'reviewed',
+                label: `Resolved (${props.reviewedCount})`,
+            },
+            {
+                value: 'dismissed',
+                label: `Dismissed (${props.dismissedCount})`,
+            },
+        ]);
+
+        return () => (
+            <>
+                <Head title="Reported Chat Messages - Staff Panel" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Reported Chat Messages"
+                        description="Review reported messages and moderate disruptive accounts."
+                    >
+                        {{
+                            actions: () =>
+                                props.reports.length > 0 && (
+                                    <button
+                                        type="button"
+                                        onClick={() =>
+                                            handleClearReports(
+                                                currentFilter.value === 'all'
+                                                    ? undefined
+                                                    : currentFilter.value,
+                                            )
+                                        }
+                                        title={
+                                            currentFilter.value === 'all'
+                                                ? 'Delete all reports'
+                                                : `Delete all ${currentFilter.value} reports`
+                                        }
+                                        class={adminDangerTextBtnClass}
+                                    >
+                                        <Trash2 class="h-3.5 w-3.5" />
+                                        <span>
+                                            {currentFilter.value === 'all'
+                                                ? 'Clear all'
+                                                : `Clear ${currentFilter.value}`}
+                                        </span>
+                                    </button>
+                                ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Chat management nav */}
+                    <nav class={adminSubNavClass}>
+                        <Link
+                            href="/admin/chat"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            <MessageCircle class="h-3.5 w-3.5" />
+                            <span>Chat configuration</span>
+                        </Link>
+                        <Link
+                            href="/admin/chat/reports"
+                            class={adminSubNavLinkClass(true)}
+                        >
+                            <Flag class="h-3.5 w-3.5" />
+                            <span>Reported messages</span>
+                            {props.pendingCount > 0 ? (
+                                <span class={adminSubNavBadgeClass}>
+                                    {props.pendingCount}
+                                </span>
+                            ) : null}
+                        </Link>
+                    </nav>
+
+                    {/* Filter tabs */}
+                    <SegmentedTabs
+                        tabs={tabOptions.value}
+                        active={currentFilter.value}
+                        onSelect={(value: string) => {
+                            currentFilter.value =
+                                value as typeof currentFilter.value;
+
+                            // Mirror the filter into the URL so a refreshed
+                            // or shared link reopens the same view.
+                            router.get(
+                                '/admin/chat/reports',
+                                {
+                                    status: currentFilter.value,
+                                },
+                                {
+                                    preserveState: true,
+                                    preserveScroll: true,
+                                    replace: true,
+                                },
+                            );
+                        }}
+                    />
+
+                    {/* Reports list */}
+                    <div>
+                        {filteredReports.value.length === 0 ? (
+                            <EmptyState
+                                icon={Flag}
+                                variant="dashed"
+                                title={`No ${currentFilter.value !== 'all' ? currentFilter.value : ''} reports found`}
+                                description="Everything looks clean for this filter criteria."
+                            />
+                        ) : (
+                            <div class={adminHoverListClass}>
+                                {filteredReports.value.map((report) => (
+                                    <div
+                                        key={report.id}
+                                        class={[
+                                            ...adminCardRowClass('amber'),
+                                            'items-start',
+                                        ]}
+                                    >
+                                        <span
+                                            class={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${statusDotClass(report.status)}`}
+                                        />
+                                        <div class="min-w-0 flex-1 space-y-1">
+                                            <div class="flex flex-wrap items-center gap-x-1.5 gap-y-0.5">
+                                                <p class="text-sm font-semibold text-slate-900 dark:text-gray-100">
+                                                    {getReporterName(report)}{' '}
+                                                    <span class="font-normal text-slate-500 dark:text-gray-400">
+                                                        reported
+                                                    </span>{' '}
+                                                    {getAuthorName(report)}
+                                                </p>
+                                                <span class="rounded bg-amber-50 px-1.5 py-0.5 text-[11px] font-semibold text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">
+                                                    {report.reason ||
+                                                        'Not specified'}
+                                                </span>
+                                            </div>
+                                            <p class="text-[11px] text-slate-500 dark:text-gray-400">
+                                                <span class="font-medium tracking-wide uppercase">
+                                                    {report.status}
+                                                </span>
+                                                <span>
+                                                    {' '}
+                                                    · Reported{' '}
+                                                    {formatDate(
+                                                        report.created_at,
+                                                    )}
+                                                </span>
+                                                {report.message_sent_at ? (
+                                                    <span>
+                                                        {' '}
+                                                        · Sent{' '}
+                                                        {formatDate(
+                                                            report.message_sent_at,
+                                                        )}
+                                                    </span>
+                                                ) : null}
+                                                {report.reported_user
+                                                    ?.is_banned ? (
+                                                    <span>
+                                                        {' '}
+                                                        · Currently banned
+                                                    </span>
+                                                ) : null}
+                                            </p>
+                                            <div class="mt-1.5 border-l-2 border-slate-200 pl-3 dark:border-gray-700">
+                                                <p class="text-xs leading-relaxed break-words text-slate-700 dark:text-gray-300">
+                                                    &quot;
+                                                    {report.message_content}
+                                                    &quot;
+                                                </p>
+                                            </div>
+                                            <div class="flex flex-wrap items-center gap-1 pt-1">
+                                                {report.reported_user_id ? (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            openBanModal(report)
+                                                        }
+                                                        title={
+                                                            report.reported_user
+                                                                ?.is_banned
+                                                                ? 'Edit suspension or unban user'
+                                                                : 'Suspend user'
+                                                        }
+                                                        class={
+                                                            adminDangerTextBtnClass
+                                                        }
+                                                    >
+                                                        <Ban class="h-3.5 w-3.5" />
+                                                        <span>
+                                                            {report
+                                                                .reported_user
+                                                                ?.is_banned
+                                                                ? 'Edit ban'
+                                                                : 'Suspend'}
+                                                        </span>
+                                                    </button>
+                                                ) : null}
+                                                {report.status !==
+                                                'reviewed' ? (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            updateReportStatus(
+                                                                report.id,
+                                                                'reviewed',
+                                                            )
+                                                        }
+                                                        class={
+                                                            adminSuccessTextBtnClass
+                                                        }
+                                                    >
+                                                        Resolve
+                                                    </button>
+                                                ) : null}
+                                                {report.status !==
+                                                'dismissed' ? (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            updateReportStatus(
+                                                                report.id,
+                                                                'dismissed',
+                                                            )
+                                                        }
+                                                        class={
+                                                            adminMutedTextBtnClass
+                                                        }
+                                                    >
+                                                        Dismiss
+                                                    </button>
+                                                ) : null}
+                                                <button
+                                                    type="button"
+                                                    onClick={() =>
+                                                        deleteReport(report.id)
+                                                    }
+                                                    title="Delete report"
+                                                    aria-label="Delete report"
+                                                    class={
+                                                        adminDangerIconBtnClass
+                                                    }
+                                                >
+                                                    <Trash2 class="h-4 w-4" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Reusable Quick Chat Ban Modal */}
+                    <ChatBanModal
+                        isOpen={isBanModalOpen.value}
+                        user={selectedUser.value}
+                        onClose={closeBanModal}
+                    />
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/chat/Reports.vue b/resources/js/pages/admin/chat/Reports.vue
deleted file mode 100644
index 97b8210a..00000000
--- a/resources/js/pages/admin/chat/Reports.vue
+++ /dev/null
@@ -1,548 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, router } from '@inertiajs/vue3';
-import {
-    Flag,
-    CheckCircle,
-    XCircle,
-    Trash2,
-    Clock,
-    CheckCheck,
-    MessageCircle,
-    Ban,
-} from 'lucide-vue-next';
-import { ref, computed } from 'vue';
-import ChatBanModal from '@/components/ChatBanModal.vue';
-import type { ChatBanUser } from '@/components/ChatBanModal.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import { formatDateTime } from '@/lib/useDate';
-
-interface ReportItem {
-    id: number;
-    reporter_id: number | null;
-    reporter: {
-        id: number;
-        name: string;
-        username: string;
-    } | null;
-    reported_user_id: number | null;
-    reported_user_name: string | null;
-    reported_user_username: string | null;
-    reported_user: {
-        id: number;
-        name: string;
-        username: string;
-        banned_until: string | null;
-        is_banned: boolean;
-    } | null;
-    message_content: string;
-    message_sent_at: string | null;
-    reason: string | null;
-    status: 'pending' | 'reviewed' | 'dismissed';
-    created_at: string;
-}
-
-const props = defineProps<{
-    reports: ReportItem[];
-    pendingCount: number;
-    reviewedCount: number;
-    dismissedCount: number;
-}>();
-
-const currentFilter = ref<'all' | 'pending' | 'reviewed' | 'dismissed'>(
-    'pending',
-);
-
-const filteredReports = computed(() => {
-    if (currentFilter.value === 'all') {
-        return props.reports;
-    }
-
-    return props.reports.filter((r) => r.status === currentFilter.value);
-});
-
-const updateReportStatus = (reportId: number, status: string) => {
-    router.patch(
-        `/admin/chat/reports/${reportId}/status`,
-        { status },
-        { preserveScroll: true },
-    );
-};
-
-const deleteReport = (reportId: number) => {
-    if (
-        confirm(
-            'Are you sure you want to permanently delete this report record?',
-        )
-    ) {
-        router.delete(`/admin/chat/reports/${reportId}`, {
-            preserveScroll: true,
-        });
-    }
-};
-
-const handleClearReports = (statusFilter?: string) => {
-    const isFiltered = statusFilter && statusFilter !== 'all';
-    const confirmMessage = isFiltered
-        ? `Are you sure you want to permanently delete all ${statusFilter} report records? This action cannot be undone.`
-        : 'Are you sure you want to permanently delete ALL report records? This action cannot be undone.';
-
-    if (confirm(confirmMessage)) {
-        router.delete('/admin/chat/reports/clear', {
-            data: isFiltered ? { status: statusFilter } : {},
-            preserveScroll: true,
-        });
-    }
-};
-
-const isBanModalOpen = ref(false);
-const selectedUser = ref<ChatBanUser | null>(null);
-
-const openBanModal = (report: ReportItem) => {
-    if (!report.reported_user_id) {
-        return;
-    }
-
-    selectedUser.value = {
-        id: report.reported_user_id,
-        name: report.reported_user?.name || report.reported_user_name || 'User',
-        username:
-            report.reported_user?.username ||
-            report.reported_user_username ||
-            null,
-        banned_until: report.reported_user?.banned_until || null,
-        is_banned: report.reported_user?.is_banned ?? false,
-    };
-
-    isBanModalOpen.value = true;
-};
-
-const formatDate = formatDateTime;
-</script>
-
-<template>
-    <Head title="Reported Chat Messages - Staff Panel" />
-
-    <div class="space-y-6">
-        <!-- Header -->
-        <div
-            class="flex flex-col gap-3 border-b border-slate-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-        >
-            <div class="flex items-center gap-3">
-                <div
-                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
-                >
-                    <Flag class="h-5 w-5" />
-                </div>
-                <div>
-                    <h1
-                        class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                    >
-                        Reported Chat Messages
-                    </h1>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Review community reports, snapshot of reported messages,
-                        and moderate disruptive accounts.
-                    </p>
-                </div>
-            </div>
-
-            <!-- Header Actions -->
-            <div v-if="reports.length > 0" class="flex items-center gap-2">
-                <button
-                    type="button"
-                    @click="
-                        handleClearReports(
-                            currentFilter === 'all' ? undefined : currentFilter,
-                        )
-                    "
-                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-rose-200 bg-rose-50/70 px-3.5 py-2 text-xs font-bold text-rose-600 transition hover:bg-rose-100 active:scale-95 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-400 dark:hover:bg-rose-950/80"
-                    :title="
-                        currentFilter === 'all'
-                            ? 'Delete all reports'
-                            : `Delete all ${currentFilter} reports`
-                    "
-                >
-                    <Trash2 class="h-3.5 w-3.5" />
-                    <span>
-                        {{
-                            currentFilter === 'all'
-                                ? 'Clear All Reports'
-                                : `Clear ${currentFilter.charAt(0).toUpperCase() + currentFilter.slice(1)} Reports`
-                        }}
-                    </span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Global Chat Management Route Tabs -->
-        <div
-            class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800"
-        >
-            <Link
-                href="/admin/chat"
-                class="flex items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-xs font-bold text-slate-500 transition-all hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
-            >
-                <MessageCircle class="h-4 w-4" />
-                <span>Chat Configuration</span>
-            </Link>
-
-            <Link
-                href="/admin/chat/reports"
-                class="flex items-center gap-2 border-b-2 border-rose-600 px-4 py-2.5 text-xs font-bold text-rose-600 transition-all dark:border-rose-400 dark:text-rose-400"
-            >
-                <Flag class="h-4 w-4 text-rose-500" />
-                <span>Reported Messages</span>
-                <span
-                    v-if="pendingCount > 0"
-                    class="py-0.2 rounded-full bg-rose-500 px-1.5 text-[10px] font-bold text-white"
-                >
-                    {{ pendingCount }}
-                </span>
-            </Link>
-        </div>
-
-        <!-- Metric Statistics Cards -->
-        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-            <div
-                @click="currentFilter = 'pending'"
-                class="cursor-pointer rounded-2xl border p-4 transition-all"
-                :class="
-                    currentFilter === 'pending'
-                        ? 'border-rose-300 bg-rose-50/50 ring-2 ring-rose-500/20 dark:border-rose-800 dark:bg-rose-950/30'
-                        : 'border-slate-100 bg-white hover:border-slate-200 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700'
-                "
-            >
-                <div class="flex items-center justify-between">
-                    <span
-                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                    >
-                        Pending Review
-                    </span>
-                    <Clock class="h-4 w-4 text-rose-500" />
-                </div>
-                <p
-                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
-                >
-                    {{ pendingCount }}
-                </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Requires moderation action</span
-                >
-            </div>
-
-            <div
-                @click="currentFilter = 'reviewed'"
-                class="cursor-pointer rounded-2xl border p-4 transition-all"
-                :class="
-                    currentFilter === 'reviewed'
-                        ? 'border-emerald-300 bg-emerald-50/50 ring-2 ring-emerald-500/20 dark:border-emerald-800 dark:bg-emerald-950/30'
-                        : 'border-slate-100 bg-white hover:border-slate-200 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700'
-                "
-            >
-                <div class="flex items-center justify-between">
-                    <span
-                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                    >
-                        Resolved
-                    </span>
-                    <CheckCheck class="h-4 w-4 text-emerald-500" />
-                </div>
-                <p
-                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
-                >
-                    {{ reviewedCount }}
-                </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Reviewed & resolved reports</span
-                >
-            </div>
-
-            <div
-                @click="currentFilter = 'dismissed'"
-                class="cursor-pointer rounded-2xl border p-4 transition-all"
-                :class="
-                    currentFilter === 'dismissed'
-                        ? 'border-slate-400 bg-slate-100/70 ring-2 ring-slate-400/20 dark:border-gray-600 dark:bg-gray-800'
-                        : 'border-slate-100 bg-white hover:border-slate-200 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700'
-                "
-            >
-                <div class="flex items-center justify-between">
-                    <span
-                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                    >
-                        Dismissed
-                    </span>
-                    <XCircle
-                        class="h-4 w-4 text-slate-400 dark:text-gray-400"
-                    />
-                </div>
-                <p
-                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
-                >
-                    {{ dismissedCount }}
-                </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Ignored or invalid reports</span
-                >
-            </div>
-        </div>
-
-        <!-- Filter Sub-Tabs -->
-        <div
-            class="flex flex-wrap items-center gap-2 border-b border-slate-200 pb-3 dark:border-gray-800"
-        >
-            <button
-                type="button"
-                @click="currentFilter = 'all'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
-                :class="
-                    currentFilter === 'all'
-                        ? 'bg-indigo-600 text-white dark:bg-indigo-500'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                "
-            >
-                All ({{ reports.length }})
-            </button>
-
-            <button
-                type="button"
-                @click="currentFilter = 'pending'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
-                :class="
-                    currentFilter === 'pending'
-                        ? 'bg-rose-600 text-white dark:bg-rose-500'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                "
-            >
-                Pending ({{ pendingCount }})
-            </button>
-
-            <button
-                type="button"
-                @click="currentFilter = 'reviewed'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
-                :class="
-                    currentFilter === 'reviewed'
-                        ? 'bg-emerald-600 text-white dark:bg-emerald-500'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                "
-            >
-                Resolved ({{ reviewedCount }})
-            </button>
-
-            <button
-                type="button"
-                @click="currentFilter = 'dismissed'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
-                :class="
-                    currentFilter === 'dismissed'
-                        ? 'bg-slate-700 text-white dark:bg-gray-700'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                "
-            >
-                Dismissed ({{ dismissedCount }})
-            </button>
-        </div>
-
-        <!-- Reports List Feed -->
-        <div class="space-y-4">
-            <EmptyState
-                v-if="filteredReports.length === 0"
-                :icon="Flag"
-                variant="dashed"
-                :title="`No ${currentFilter !== 'all' ? currentFilter : ''} reports found`"
-                description="Everything looks clean for this filter criteria."
-            />
-
-            <div v-else class="space-y-3.5">
-                <div
-                    v-for="report in filteredReports"
-                    :key="report.id"
-                    class="rounded-2xl border p-4.5 transition-colors sm:p-5"
-                    :class="[
-                        report.status === 'pending'
-                            ? 'border-rose-200 bg-white shadow-2xs dark:border-rose-900/50 dark:bg-gray-900'
-                            : 'border-slate-200/80 bg-slate-50/60 dark:border-gray-800 dark:bg-gray-900/40',
-                    ]"
-                >
-                    <div
-                        class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
-                    >
-                        <!-- Left: Reporter & Reported User info -->
-                        <div class="space-y-1.5">
-                            <div class="flex flex-wrap items-center gap-2">
-                                <span
-                                    class="inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase"
-                                    :class="
-                                        report.status === 'pending'
-                                            ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/70 dark:text-rose-300'
-                                            : report.status === 'reviewed'
-                                              ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300'
-                                              : 'bg-slate-200 text-slate-700 dark:bg-gray-800 dark:text-gray-300'
-                                    "
-                                >
-                                    {{ report.status }}
-                                </span>
-
-                                <span
-                                    class="text-xs text-slate-400 dark:text-gray-500"
-                                >
-                                    Reported {{ formatDate(report.created_at) }}
-                                </span>
-
-                                <span
-                                    v-if="report.reporter"
-                                    class="text-xs text-slate-500 dark:text-gray-400"
-                                >
-                                    by
-                                    <strong
-                                        class="text-slate-700 dark:text-gray-300"
-                                        >{{ report.reporter.name }}</strong
-                                    >
-                                    <span
-                                        v-if="report.reporter.username"
-                                        class="text-slate-400"
-                                    >
-                                        (@{{ report.reporter.username }})</span
-                                    >
-                                </span>
-                            </div>
-
-                            <div class="flex items-center gap-2 pt-0.5">
-                                <span
-                                    class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                                    >Reason:</span
-                                >
-                                <span
-                                    class="rounded-md bg-amber-50 px-2 py-0.5 text-xs font-bold text-amber-800 dark:bg-amber-950/50 dark:text-amber-300"
-                                >
-                                    {{ report.reason || 'Not specified' }}
-                                </span>
-                            </div>
-                        </div>
-
-                        <!-- Right: Action buttons & Moderation shortcut -->
-                        <div class="flex flex-wrap items-center gap-2">
-                            <!-- Quick Ban / Unban Modal trigger -->
-                            <button
-                                v-if="report.reported_user_id"
-                                type="button"
-                                @click="openBanModal(report)"
-                                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                                :class="
-                                    report.reported_user?.is_banned
-                                        ? 'bg-amber-50 text-amber-800 hover:bg-amber-100 dark:bg-amber-950/60 dark:text-amber-300 dark:hover:bg-amber-900/60'
-                                        : 'bg-rose-50 text-rose-700 hover:bg-rose-100 dark:bg-rose-950/60 dark:text-rose-300 dark:hover:bg-rose-900/60'
-                                "
-                                :title="
-                                    report.reported_user?.is_banned
-                                        ? 'Edit suspension timer or unban user'
-                                        : 'Suspend user'
-                                "
-                            >
-                                <Ban class="h-3 w-3" />
-                                <span>{{
-                                    report.reported_user?.is_banned
-                                        ? 'Edit Ban / Unban'
-                                        : 'Suspend Author'
-                                }}</span>
-                            </button>
-
-                            <!-- Mark Status Buttons -->
-                            <button
-                                v-if="report.status !== 'reviewed'"
-                                type="button"
-                                @click="
-                                    updateReportStatus(report.id, 'reviewed')
-                                "
-                                class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:bg-emerald-950/60 dark:text-emerald-300 dark:hover:bg-emerald-900/60"
-                            >
-                                <CheckCircle class="h-3 w-3" />
-                                <span>Resolve</span>
-                            </button>
-
-                            <button
-                                v-if="report.status !== 'dismissed'"
-                                type="button"
-                                @click="
-                                    updateReportStatus(report.id, 'dismissed')
-                                "
-                                class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                            >
-                                <XCircle class="h-3 w-3" />
-                                <span>Dismiss</span>
-                            </button>
-
-                            <!-- Delete report record -->
-                            <button
-                                type="button"
-                                @click="deleteReport(report.id)"
-                                class="cursor-pointer rounded-xl p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                title="Delete Report Record"
-                            >
-                                <Trash2 class="h-3.5 w-3.5" />
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Message Snapshot Content Box -->
-                    <div
-                        class="mt-3.5 rounded-xl border border-slate-200/80 bg-slate-50/70 p-3.5 dark:border-gray-800 dark:bg-gray-800/60"
-                    >
-                        <div
-                            class="flex items-center justify-between border-b border-slate-200/60 pb-2 text-[11px] text-slate-500 dark:border-gray-700/60 dark:text-gray-400"
-                        >
-                            <div>
-                                <span
-                                    class="font-bold text-slate-800 dark:text-gray-200"
-                                >
-                                    Message Author:
-                                    {{
-                                        report.reported_user_name ||
-                                        report.reported_user?.name ||
-                                        'Unknown'
-                                    }}
-                                </span>
-                                <span
-                                    v-if="
-                                        report.reported_user_username ||
-                                        report.reported_user?.username
-                                    "
-                                    class="ml-1 text-slate-400"
-                                >
-                                    (@{{
-                                        report.reported_user_username ||
-                                        report.reported_user?.username
-                                    }})
-                                </span>
-                                <span
-                                    v-if="report.reported_user?.is_banned"
-                                    class="ml-2 rounded-sm bg-rose-100 px-1.5 py-0.5 text-[9px] font-bold text-rose-700 dark:bg-rose-900/60 dark:text-rose-300"
-                                >
-                                    Currently Banned
-                                </span>
-                            </div>
-
-                            <span v-if="report.message_sent_at">
-                                Sent {{ formatDate(report.message_sent_at) }}
-                            </span>
-                        </div>
-
-                        <p
-                            class="mt-2 text-xs leading-relaxed font-medium break-words text-slate-900 dark:text-gray-100"
-                        >
-                            "{{ report.message_content }}"
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Reusable Quick Chat Ban Modal -->
-        <ChatBanModal
-            :is-open="isBanModalOpen"
-            :user="selectedUser"
-            @close="isBanModalOpen = false"
-        />
-    </div>
-</template>
diff --git a/resources/js/pages/admin/forums/Index.tsx b/resources/js/pages/admin/forums/Index.tsx
new file mode 100644
index 00000000..c5117e0e
--- /dev/null
+++ b/resources/js/pages/admin/forums/Index.tsx
@@ -0,0 +1,529 @@
+import { Head, Link, router } from '@inertiajs/vue3';
+import {
+    Ban,
+    ExternalLink,
+    Flag,
+    HelpCircle,
+    Lock,
+    Search,
+    Settings,
+    Trash2,
+    Unlock,
+} from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    AdminSelect,
+    SegmentedTabs,
+    adminDangerIconBtnClass,
+    adminIconBtnClass,
+    adminOptionClass,
+    adminPageClass,
+    adminSearchInputClass,
+    adminSubNavBadgeClass,
+    adminSubNavClass,
+    adminSubNavLinkClass,
+    adminTableHeadClass,
+    adminTableWrapClass,
+} from '@/components/admin/ui';
+import ChatBanModal from '@/components/ChatBanModal.vue';
+import type { ChatBanUser } from '@/components/ChatBanModal.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import Pagination from '@/components/Pagination.vue';
+import type { PaginationLink } from '@/components/Pagination.vue';
+
+interface ForumPostUser {
+    id: number;
+    name: string;
+    username: string;
+    banned_until?: string | null;
+    is_banned?: boolean;
+}
+
+type ModerationStatus = 'approved' | 'pending' | 'flagged' | 'rejected';
+type StatusFilter = 'all' | ModerationStatus;
+
+interface ForumPostItem {
+    id: number;
+    title: string;
+    slug: string;
+    body?: string;
+    curriculum: 'hsc' | 'ssc';
+    is_answered: boolean;
+    is_locked: boolean;
+    moderation_status: ModerationStatus;
+    vote_score: number;
+    answers_count: number;
+    created_at: string;
+    user?: ForumPostUser | null;
+    subject?: {
+        id: number;
+        name: string;
+        course: string;
+    } | null;
+}
+
+interface ForumsIndexPosts {
+    data: ForumPostItem[];
+    links: PaginationLink[];
+    total: number;
+    current_page: number;
+    last_page: number;
+}
+
+interface ForumsIndexFilters {
+    status?: string;
+    search?: string;
+}
+
+interface ForumsIndexStats {
+    totalPosts: number;
+    pendingCount: number;
+    flaggedCount: number;
+    rejectedCount: number;
+    approvedCount: number;
+}
+
+export default defineComponent({
+    name: 'AdminForumsIndex',
+    props: {
+        posts: { type: Object as PropType<ForumsIndexPosts>, required: true },
+        filters: {
+            type: Object as PropType<ForumsIndexFilters>,
+            required: true,
+        },
+        stats: { type: Object as PropType<ForumsIndexStats>, required: true },
+        pendingReportsCount: {
+            type: Number as PropType<number>,
+            default: undefined,
+        },
+    },
+    setup(props) {
+        const searchInput = ref<string>(props.filters.search || '');
+        const selectedStatus = ref<string>(props.filters.status || 'all');
+
+        const setStatusFilter = (status: StatusFilter | string): void => {
+            selectedStatus.value = status;
+            applyFilters();
+        };
+
+        const applyFilters = (): void => {
+            router.get(
+                '/admin/forums',
+                {
+                    search: searchInput.value || undefined,
+                    status:
+                        selectedStatus.value === 'all'
+                            ? undefined
+                            : selectedStatus.value,
+                },
+                { preserveState: true, replace: true },
+            );
+        };
+
+        const handleSearch = (): void => {
+            applyFilters();
+        };
+
+        const onSearchInput = (e: Event) => {
+            searchInput.value = (e.target as HTMLInputElement).value;
+        };
+
+        const onSearchKeyup = (e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+                handleSearch();
+            }
+        };
+
+        const toggleLock = (post: ForumPostItem): void => {
+            router.patch(
+                `/admin/forums/${post.id}/lock`,
+                {},
+                { preserveScroll: true },
+            );
+        };
+
+        const updateStatus = (
+            post: ForumPostItem,
+            status: ModerationStatus,
+        ): void => {
+            router.patch(
+                `/admin/forums/${post.id}/status`,
+                { moderation_status: status },
+                { preserveScroll: true },
+            );
+        };
+
+        const deletePost = (post: ForumPostItem): void => {
+            if (
+                confirm(
+                    `Delete "${post.title}" permanently? This cannot be undone.`,
+                )
+            ) {
+                router.delete(`/admin/forums/${post.id}`, {
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        const handleStatusChange = (
+            post: ForumPostItem,
+            event: Event,
+        ): void => {
+            const target = event.target as HTMLSelectElement | null;
+
+            if (!target) {
+                return;
+            }
+
+            updateStatus(post, target.value as ModerationStatus);
+        };
+
+        const isBanModalOpen = ref<boolean>(false);
+        const selectedUser = ref<ChatBanUser | null>(null);
+
+        const openBanModal = (post: ForumPostItem): void => {
+            if (!post.user) {
+                return;
+            }
+
+            selectedUser.value = {
+                id: post.user.id,
+                name: post.user.name,
+                username: post.user.username,
+                banned_until: post.user.banned_until || null,
+                is_banned: post.user.is_banned ?? false,
+            };
+
+            isBanModalOpen.value = true;
+        };
+
+        const onStatusSelectChange = (post: ForumPostItem) => (e: Event) => {
+            handleStatusChange(post, e);
+        };
+
+        const statusTabs = computed<{ value: StatusFilter; label: string }[]>(
+            () => [
+                {
+                    value: 'all',
+                    label: `All (${props.stats.totalPosts})`,
+                },
+                {
+                    value: 'pending',
+                    label: `Pending (${props.stats.pendingCount})`,
+                },
+                {
+                    value: 'flagged',
+                    label: `Flagged (${props.stats.flaggedCount})`,
+                },
+                {
+                    value: 'rejected',
+                    label: `Rejected (${props.stats.rejectedCount})`,
+                },
+                {
+                    value: 'approved',
+                    label: `Live (${props.stats.approvedCount})`,
+                },
+            ],
+        );
+
+        // Status tint for the AdminSelect: important modifiers so the tint
+        // reliably wins over the shared ring/base colors.
+        const statusToneClass = (status: ModerationStatus): string =>
+            status === 'approved'
+                ? '!bg-emerald-50 !text-emerald-700 !ring-emerald-300/70 dark:!bg-emerald-500/15 dark:!text-emerald-300 dark:!ring-emerald-500/30'
+                : status === 'pending'
+                  ? '!bg-amber-50 !text-amber-800 !ring-amber-300/70 dark:!bg-amber-500/15 dark:!text-amber-300 dark:!ring-amber-500/30'
+                  : '!bg-rose-50 !text-rose-700 !ring-rose-300/70 dark:!bg-rose-500/15 dark:!text-rose-300 dark:!ring-rose-500/30';
+
+        return () => (
+            <>
+                <Head title="Forum Management - Admin" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Forum Management"
+                        count={
+                            props.stats.pendingCount > 0
+                                ? `${props.stats.pendingCount} pending`
+                                : undefined
+                        }
+                        countTone="amber"
+                        description="Review community questions, moderate discussions, and manage reports."
+                    />
+
+                    {/* Section switcher (same row position on Discussions / Reports / Settings) */}
+                    <nav class={adminSubNavClass}>
+                        <Link
+                            href="/admin/forums"
+                            class={adminSubNavLinkClass(true)}
+                        >
+                            Discussions
+                        </Link>
+                        <Link
+                            href="/admin/forums/reports"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            <Flag class="h-3.5 w-3.5 text-rose-500" />
+                            <span>Reports</span>
+                            {(props.pendingReportsCount ?? 0) > 0 && (
+                                <span class={adminSubNavBadgeClass}>
+                                    {props.pendingReportsCount}
+                                </span>
+                            )}
+                        </Link>
+                        <Link
+                            href="/admin/forums/settings"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            <Settings class="h-3.5 w-3.5" />
+                            <span>Settings</span>
+                        </Link>
+                    </nav>
+
+                    {/* Status segmented control + search */}
+                    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                        <SegmentedTabs
+                            tabs={statusTabs.value}
+                            active={selectedStatus.value || 'all'}
+                            onSelect={(value: string) => setStatusFilter(value)}
+                        />
+
+                        <div class="relative w-full lg:w-64">
+                            <Search class="pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2 text-slate-400 dark:text-gray-500" />
+                            <input
+                                value={searchInput.value}
+                                onInput={onSearchInput}
+                                type="text"
+                                placeholder="Search questions..."
+                                onKeyup={onSearchKeyup}
+                                class={adminSearchInputClass}
+                            />
+                        </div>
+                    </div>
+
+                    {/* Moderation table */}
+                    <div>
+                        {props.posts.data.length === 0 ? (
+                            <EmptyState
+                                icon={HelpCircle}
+                                variant="dashed"
+                                title="No discussions match your filter"
+                                description="Try changing your search keywords or filter status."
+                            />
+                        ) : (
+                            <div class={adminTableWrapClass}>
+                                <table class="w-full text-left text-xs text-slate-700 dark:text-gray-300">
+                                    <thead class={adminTableHeadClass}>
+                                        <tr>
+                                            <th class="rounded-tl-2xl px-3 py-2.5 whitespace-nowrap">
+                                                Discussion
+                                            </th>
+                                            <th class="hidden px-3 py-2.5 whitespace-nowrap sm:table-cell">
+                                                Author
+                                            </th>
+                                            <th class="px-3 py-2.5 whitespace-nowrap">
+                                                Moderation Status
+                                            </th>
+                                            <th class="rounded-tr-2xl px-3 py-2.5 text-right whitespace-nowrap">
+                                                Actions
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-slate-200/60 dark:divide-slate-800/60">
+                                        {props.posts.data.map((post) => (
+                                            <tr
+                                                key={post.id}
+                                                class="transition-colors hover:bg-white/50 dark:hover:bg-white/[0.03] last:[&>td:first-child]:rounded-bl-2xl last:[&>td:last-child]:rounded-br-2xl"
+                                            >
+                                                <td class="max-w-md min-w-[180px] px-3 py-2.5">
+                                                    <div class="min-w-0 space-y-0.5">
+                                                        <div class="flex min-w-0 items-center gap-1.5">
+                                                            {post.is_locked && (
+                                                                <Lock
+                                                                    class="h-3.5 w-3.5 shrink-0 text-amber-500"
+                                                                    title="Discussion locked"
+                                                                />
+                                                            )}
+                                                            <a
+                                                                href={`/forum/questions/${post.slug}`}
+                                                                target="_blank"
+                                                                class="min-w-0 truncate font-semibold text-slate-900 hover:text-indigo-600 hover:underline dark:text-gray-100 dark:hover:text-indigo-400"
+                                                            >
+                                                                {post.title}
+                                                            </a>
+                                                            <ExternalLink class="h-3 w-3 shrink-0 text-slate-400 dark:text-gray-500" />
+                                                        </div>
+                                                        {post.body && (
+                                                            <p class="line-clamp-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                                                {post.body}
+                                                            </p>
+                                                        )}
+                                                        <p class="text-[11px] text-slate-500 sm:hidden dark:text-gray-400">
+                                                            {post.user
+                                                                ? `${post.user.name} (@${post.user.username})`
+                                                                : 'Anonymous'}
+                                                        </p>
+                                                    </div>
+                                                </td>
+
+                                                <td class="hidden max-w-[160px] px-3 py-2.5 whitespace-nowrap sm:table-cell">
+                                                    {post.user ? (
+                                                        <div class="max-w-[160px] truncate text-xs">
+                                                            <span class="block truncate font-semibold text-slate-800 dark:text-gray-200">
+                                                                {post.user.name}
+                                                            </span>
+                                                            <span class="block truncate text-[10px] text-slate-500 dark:text-gray-400">
+                                                                @
+                                                                {
+                                                                    post.user
+                                                                        .username
+                                                                }
+                                                            </span>
+                                                        </div>
+                                                    ) : (
+                                                        <span class="text-slate-500 dark:text-gray-400">
+                                                            Anonymous
+                                                        </span>
+                                                    )}
+                                                </td>
+
+                                                <td class="px-3 py-2.5 whitespace-nowrap">
+                                                    <AdminSelect
+                                                        value={
+                                                            post.moderation_status
+                                                        }
+                                                        onChange={onStatusSelectChange(
+                                                            post,
+                                                        )}
+                                                        toneClass={statusToneClass(
+                                                            post.moderation_status,
+                                                        )}
+                                                    >
+                                                        <option
+                                                            value="approved"
+                                                            class={
+                                                                adminOptionClass
+                                                            }
+                                                        >
+                                                            Approved (Live)
+                                                        </option>
+                                                        <option
+                                                            value="pending"
+                                                            class={
+                                                                adminOptionClass
+                                                            }
+                                                        >
+                                                            Pending Review
+                                                        </option>
+                                                        <option
+                                                            value="flagged"
+                                                            class={
+                                                                adminOptionClass
+                                                            }
+                                                        >
+                                                            Flagged (Reports)
+                                                        </option>
+                                                        <option
+                                                            value="rejected"
+                                                            class={
+                                                                adminOptionClass
+                                                            }
+                                                        >
+                                                            Rejected (Hidden)
+                                                        </option>
+                                                    </AdminSelect>
+                                                </td>
+
+                                                <td class="px-3 py-2.5 text-right whitespace-nowrap">
+                                                    <div class="flex items-center justify-end gap-0.5">
+                                                        {post.user && (
+                                                            <button
+                                                                type="button"
+                                                                onClick={() =>
+                                                                    openBanModal(
+                                                                        post,
+                                                                    )
+                                                                }
+                                                                class={
+                                                                    adminDangerIconBtnClass
+                                                                }
+                                                                title={`Moderate / Suspend @${post.user.username}`}
+                                                                aria-label={`Moderate / Suspend @${post.user.username}`}
+                                                            >
+                                                                <Ban class="h-3.5 w-3.5" />
+                                                            </button>
+                                                        )}
+                                                        <button
+                                                            type="button"
+                                                            onClick={() =>
+                                                                toggleLock(post)
+                                                            }
+                                                            class={
+                                                                adminIconBtnClass
+                                                            }
+                                                            title={
+                                                                post.is_locked
+                                                                    ? 'Unlock discussion replies'
+                                                                    : 'Lock discussion replies'
+                                                            }
+                                                            aria-label={
+                                                                post.is_locked
+                                                                    ? 'Unlock discussion replies'
+                                                                    : 'Lock discussion replies'
+                                                            }
+                                                        >
+                                                            {post.is_locked ? (
+                                                                <Unlock class="h-3.5 w-3.5 text-amber-500" />
+                                                            ) : (
+                                                                <Lock class="h-3.5 w-3.5" />
+                                                            )}
+                                                        </button>
+                                                        <button
+                                                            type="button"
+                                                            onClick={() =>
+                                                                deletePost(post)
+                                                            }
+                                                            class={
+                                                                adminDangerIconBtnClass
+                                                            }
+                                                            title="Delete discussion"
+                                                            aria-label="Delete discussion"
+                                                        >
+                                                            <Trash2 class="h-3.5 w-3.5" />
+                                                        </button>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        )}
+
+                        {props.posts.links && props.posts.links.length > 3 && (
+                            <div class="border-t border-slate-200/60 pt-4 dark:border-slate-800/60">
+                                <Pagination
+                                    links={props.posts.links}
+                                    currentPage={props.posts.current_page}
+                                    lastPage={props.posts.last_page}
+                                />
+                            </div>
+                        )}
+                    </div>
+
+                    <ChatBanModal
+                        isOpen={isBanModalOpen.value}
+                        user={selectedUser.value}
+                        onClose={() => {
+                            isBanModalOpen.value = false;
+                        }}
+                    />
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/forums/Index.vue b/resources/js/pages/admin/forums/Index.vue
deleted file mode 100644
index 11a3f2b7..00000000
--- a/resources/js/pages/admin/forums/Index.vue
+++ /dev/null
@@ -1,482 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, router } from '@inertiajs/vue3';
-import {
-    Flag,
-    Settings,
-    Lock,
-    Unlock,
-    Trash2,
-    Search,
-    ExternalLink,
-    HelpCircle,
-    Ban,
-} from 'lucide-vue-next';
-import { ref } from 'vue';
-import ChatBanModal from '@/components/ChatBanModal.vue';
-import type { ChatBanUser } from '@/components/ChatBanModal.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import Pagination from '@/components/Pagination.vue';
-
-interface ForumPostItem {
-    id: number;
-    title: string;
-    slug: string;
-    body?: string;
-    curriculum: 'hsc' | 'ssc';
-    is_answered: boolean;
-    is_locked: boolean;
-    moderation_status: 'approved' | 'pending' | 'flagged' | 'rejected';
-    vote_score: number;
-    answers_count: number;
-    created_at: string;
-    user?: {
-        id: number;
-        name: string;
-        username: string;
-    } | null;
-    subject?: {
-        id: number;
-        name: string;
-        course: string;
-    } | null;
-}
-
-interface PaginationLinks {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-const props = defineProps<{
-    posts: {
-        data: ForumPostItem[];
-        links: PaginationLinks[];
-        total: number;
-        current_page: number;
-        last_page: number;
-    };
-    filters: {
-        status?: string;
-        search?: string;
-    };
-    stats: {
-        totalPosts: number;
-        pendingCount: number;
-        flaggedCount: number;
-        rejectedCount: number;
-        approvedCount: number;
-    };
-    pendingReportsCount?: number;
-}>();
-
-const searchInput = ref(props.filters.search || '');
-const selectedStatus = ref(props.filters.status || 'all');
-
-const setStatusFilter = (status: string) => {
-    selectedStatus.value = status;
-    applyFilters();
-};
-
-const applyFilters = () => {
-    router.get(
-        '/admin/forums',
-        {
-            search: searchInput.value || undefined,
-            status:
-                selectedStatus.value === 'all'
-                    ? undefined
-                    : selectedStatus.value,
-        },
-        { preserveState: true, replace: true },
-    );
-};
-
-const handleSearch = () => {
-    applyFilters();
-};
-
-const toggleLock = (post: ForumPostItem) => {
-    router.patch(`/admin/forums/${post.id}/lock`, {}, { preserveScroll: true });
-};
-
-const updateStatus = (
-    post: ForumPostItem,
-    status: 'approved' | 'pending' | 'flagged' | 'rejected',
-) => {
-    router.patch(
-        `/admin/forums/${post.id}/status`,
-        { moderation_status: status },
-        { preserveScroll: true },
-    );
-};
-
-const deletePost = (post: ForumPostItem) => {
-    if (confirm(`Delete "${post.title}" permanently? This cannot be undone.`)) {
-        router.delete(`/admin/forums/${post.id}`, {
-            preserveScroll: true,
-        });
-    }
-};
-
-const isBanModalOpen = ref(false);
-const selectedUser = ref<ChatBanUser | null>(null);
-
-const openBanModal = (post: ForumPostItem) => {
-    if (!post.user) {
-        return;
-    }
-
-    selectedUser.value = {
-        id: post.user.id,
-        name: post.user.name,
-        username: post.user.username,
-        banned_until: (post.user as any).banned_until || null,
-        is_banned: (post.user as any).is_banned ?? false,
-    };
-
-    isBanModalOpen.value = true;
-};
-</script>
-
-<template>
-    <Head title="Forum Management - Admin" />
-
-    <div class="space-y-5">
-        <!-- Minimal Top Header -->
-        <div
-            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-        >
-            <div>
-                <h1
-                    class="text-lg font-bold tracking-tight text-slate-900 sm:text-xl dark:text-gray-100"
-                >
-                    Forum Management
-                </h1>
-                <p class="text-xs text-slate-500 dark:text-gray-400">
-                    Review community questions, moderate discussions, and manage
-                    reports.
-                </p>
-            </div>
-
-            <!-- Header Quick Tabs -->
-            <div
-                class="flex max-w-full items-center gap-1.5 overflow-x-auto rounded-xl border border-slate-200 bg-white p-1 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <Link
-                    href="/admin/forums"
-                    class="shrink-0 rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-bold text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                >
-                    Discussions
-                </Link>
-
-                <Link
-                    href="/admin/forums/reports"
-                    class="flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                >
-                    <Flag class="h-3.5 w-3.5 text-rose-500" />
-                    <span>Reports</span>
-                    <span
-                        v-if="pendingReportsCount && pendingReportsCount > 0"
-                        class="py-0.2 rounded-full bg-rose-500 px-1.5 text-[10px] font-bold text-white"
-                    >
-                        {{ pendingReportsCount }}
-                    </span>
-                </Link>
-
-                <Link
-                    href="/admin/forums/settings"
-                    class="flex shrink-0 items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                >
-                    <Settings class="h-3.5 w-3.5" />
-                    <span>Settings</span>
-                </Link>
-            </div>
-        </div>
-
-        <!-- Integrated Status Pills & Search Bar -->
-        <div
-            class="flex flex-col gap-3 rounded-2xl border border-slate-200/90 bg-white p-3.5 shadow-2xs sm:flex-row sm:items-center sm:justify-between dark:border-gray-800 dark:bg-gray-900"
-        >
-            <!-- Status Tabs -->
-            <div class="flex flex-wrap items-center gap-1.5">
-                <button
-                    type="button"
-                    @click="setStatusFilter('all')"
-                    class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                    :class="[
-                        selectedStatus === 'all' || !selectedStatus
-                            ? 'bg-slate-900 text-white dark:bg-gray-100 dark:text-gray-900'
-                            : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700',
-                    ]"
-                >
-                    All ({{ stats.totalPosts }})
-                </button>
-
-                <button
-                    type="button"
-                    @click="setStatusFilter('pending')"
-                    class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                    :class="[
-                        selectedStatus === 'pending'
-                            ? 'bg-amber-600 text-white'
-                            : 'bg-amber-50 text-amber-700 hover:bg-amber-100 dark:bg-amber-950/40 dark:text-amber-300',
-                    ]"
-                >
-                    Pending ({{ stats.pendingCount }})
-                </button>
-
-                <button
-                    type="button"
-                    @click="setStatusFilter('flagged')"
-                    class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                    :class="[
-                        selectedStatus === 'flagged'
-                            ? 'bg-rose-600 text-white'
-                            : 'bg-rose-50 text-rose-700 hover:bg-rose-100 dark:bg-rose-950/40 dark:text-rose-300',
-                    ]"
-                >
-                    Flagged ({{ stats.flaggedCount }})
-                </button>
-
-                <button
-                    type="button"
-                    @click="setStatusFilter('rejected')"
-                    class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                    :class="[
-                        selectedStatus === 'rejected'
-                            ? 'bg-red-600 text-white'
-                            : 'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300',
-                    ]"
-                >
-                    Rejected ({{ stats.rejectedCount }})
-                </button>
-
-                <button
-                    type="button"
-                    @click="setStatusFilter('approved')"
-                    class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                    :class="[
-                        selectedStatus === 'approved'
-                            ? 'bg-emerald-600 text-white'
-                            : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300',
-                    ]"
-                >
-                    Live ({{ stats.approvedCount }})
-                </button>
-            </div>
-
-            <!-- Search Field -->
-            <div class="relative w-full sm:w-64">
-                <Search
-                    class="pointer-events-none absolute top-2 left-2.5 h-3.5 w-3.5 text-slate-400"
-                />
-                <input
-                    v-model="searchInput"
-                    type="text"
-                    placeholder="Search questions..."
-                    @keyup.enter="handleSearch"
-                    class="w-full rounded-xl border border-slate-200 bg-slate-50/50 py-1.5 pr-3 pl-8 text-xs text-slate-900 transition outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                />
-            </div>
-        </div>
-
-        <!-- Clean Moderation Table -->
-        <div
-            class="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-        >
-            <EmptyState
-                v-if="posts.data.length === 0"
-                :icon="HelpCircle"
-                title="No discussions match your filter"
-                description="Try changing your search keywords or filter status."
-            />
-
-            <div v-else class="overflow-x-auto">
-                <table
-                    class="w-full text-left text-xs text-slate-700 dark:text-gray-300"
-                >
-                    <thead
-                        class="border-b border-slate-100 bg-slate-50/70 text-[11px] font-bold text-slate-500 uppercase dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-400"
-                    >
-                        <tr>
-                            <th class="px-4 py-3 whitespace-nowrap">
-                                Discussion
-                            </th>
-                            <th class="px-4 py-3 whitespace-nowrap">Author</th>
-                            <th class="px-4 py-3 whitespace-nowrap">
-                                Moderation Status
-                            </th>
-                            <th class="px-4 py-3 text-right whitespace-nowrap">
-                                Actions
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody
-                        class="divide-y divide-slate-100 dark:divide-gray-800"
-                    >
-                        <tr
-                            v-for="post in posts.data"
-                            :key="post.id"
-                            class="transition hover:bg-slate-50/60 dark:hover:bg-gray-800/40"
-                        >
-                            <!-- Title & Snippet -->
-                            <td class="max-w-xl min-w-[220px] px-4 py-3.5">
-                                <div class="space-y-1">
-                                    <div class="flex items-center gap-1.5">
-                                        <Lock
-                                            v-if="post.is_locked"
-                                            class="h-3.5 w-3.5 shrink-0 text-amber-500"
-                                            title="Discussion locked"
-                                        />
-                                        <a
-                                            :href="`/forum/questions/${post.slug}`"
-                                            target="_blank"
-                                            class="font-semibold text-slate-900 hover:text-indigo-600 hover:underline dark:text-gray-100 dark:hover:text-indigo-400"
-                                        >
-                                            {{ post.title }}
-                                        </a>
-                                        <ExternalLink
-                                            class="h-3 w-3 shrink-0 text-slate-400"
-                                        />
-                                    </div>
-
-                                    <!-- Content snippet -->
-                                    <p
-                                        v-if="post.body"
-                                        class="line-clamp-1 text-[11px] text-slate-500 dark:text-gray-400"
-                                    >
-                                        {{ post.body }}
-                                    </p>
-                                </div>
-                            </td>
-
-                            <!-- Author -->
-                            <td class="px-4 py-3.5 whitespace-nowrap">
-                                <div v-if="post.user" class="text-xs">
-                                    <span
-                                        class="font-semibold text-slate-800 dark:text-gray-200"
-                                        >{{ post.user.name }}</span
-                                    >
-                                    <span
-                                        class="block text-[10px] text-slate-400"
-                                        >@{{ post.user.username }}</span
-                                    >
-                                </div>
-                                <span v-else class="text-slate-400"
-                                    >Anonymous</span
-                                >
-                            </td>
-
-                            <!-- Inline Moderation Status Dropdown -->
-                            <td class="px-4 py-3.5 whitespace-nowrap">
-                                <select
-                                    :value="post.moderation_status"
-                                    @change="
-                                        (e) =>
-                                            updateStatus(
-                                                post,
-                                                (e.target as HTMLSelectElement)
-                                                    .value as any,
-                                            )
-                                    "
-                                    class="cursor-pointer rounded-xl border px-2.5 py-1 text-xs font-bold transition outline-none"
-                                    :class="[
-                                        post.moderation_status === 'approved'
-                                            ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-300'
-                                            : post.moderation_status ===
-                                                'pending'
-                                              ? 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-300'
-                                              : post.moderation_status ===
-                                                  'flagged'
-                                                ? 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300'
-                                                : 'border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300',
-                                    ]"
-                                >
-                                    <option value="approved">
-                                        Approved (Live)
-                                    </option>
-                                    <option value="pending">
-                                        Pending Review
-                                    </option>
-                                    <option value="flagged">
-                                        Flagged (Reports)
-                                    </option>
-                                    <option value="rejected">
-                                        Rejected (Hidden)
-                                    </option>
-                                </select>
-                            </td>
-
-                            <!-- Actions -->
-                            <td
-                                class="px-4 py-3.5 text-right whitespace-nowrap"
-                            >
-                                <div
-                                    class="flex items-center justify-end gap-1.5"
-                                >
-                                    <!-- Suspend Author button -->
-                                    <button
-                                        v-if="post.user"
-                                        type="button"
-                                        @click="openBanModal(post)"
-                                        class="cursor-pointer rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                        :title="`Moderate / Suspend @${post.user.username}`"
-                                    >
-                                        <Ban class="h-3.5 w-3.5" />
-                                    </button>
-
-                                    <!-- Lock button -->
-                                    <button
-                                        type="button"
-                                        @click="toggleLock(post)"
-                                        class="cursor-pointer rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-800 dark:hover:bg-gray-800"
-                                        :title="
-                                            post.is_locked
-                                                ? 'Unlock discussion replies'
-                                                : 'Lock discussion replies'
-                                        "
-                                    >
-                                        <Unlock
-                                            v-if="post.is_locked"
-                                            class="h-3.5 w-3.5 text-amber-500"
-                                        />
-                                        <Lock v-else class="h-3.5 w-3.5" />
-                                    </button>
-
-                                    <!-- Delete button -->
-                                    <button
-                                        type="button"
-                                        @click="deletePost(post)"
-                                        class="cursor-pointer rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40"
-                                        title="Delete discussion"
-                                    >
-                                        <Trash2 class="h-3.5 w-3.5" />
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <!-- Pagination -->
-            <div
-                v-if="posts.links && posts.links.length > 3"
-                class="border-t border-slate-100 bg-slate-50/40 px-4 py-1 dark:border-gray-800 dark:bg-gray-900"
-            >
-                <Pagination
-                    :links="posts.links"
-                    :current-page="posts.current_page"
-                    :last-page="posts.last_page"
-                />
-            </div>
-        </div>
-
-        <!-- Suspension Modal -->
-        <ChatBanModal
-            :is-open="isBanModalOpen"
-            :user="selectedUser"
-            @close="isBanModalOpen = false"
-        />
-    </div>
-</template>
diff --git a/resources/js/pages/admin/forums/Reports.tsx b/resources/js/pages/admin/forums/Reports.tsx
new file mode 100644
index 00000000..4d9cf5ff
--- /dev/null
+++ b/resources/js/pages/admin/forums/Reports.tsx
@@ -0,0 +1,486 @@
+import { Head, Link, router } from '@inertiajs/vue3';
+import { Ban, ExternalLink, Flag, Settings, Trash2 } from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    SegmentedTabs,
+    adminCardRowClass,
+    adminDangerIconBtnClass,
+    adminDangerTextBtnClass,
+    adminHoverListClass,
+    adminMutedTextBtnClass,
+    adminPageClass,
+    adminSubNavBadgeClass,
+    adminSubNavClass,
+    adminSubNavLinkClass,
+    adminSuccessTextBtnClass,
+} from '@/components/admin/ui';
+import ChatBanModal from '@/components/ChatBanModal.vue';
+import type { ChatBanUser } from '@/components/ChatBanModal.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import { formatDateTime } from '@/lib/useDate';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface ForumReportReporter {
+    id: number;
+    name: string;
+    username: string;
+}
+
+interface ForumReportReportedUser {
+    id: number;
+    name: string;
+    username: string;
+    banned_until: string | null;
+    is_banned: boolean;
+}
+
+type ForumReportStatus = 'pending' | 'reviewed' | 'dismissed';
+type ForumReportFilter = 'all' | ForumReportStatus;
+
+interface ReportItem {
+    id: number;
+    reporter_id: number | null;
+    reporter: ForumReportReporter | null;
+    reported_user_id: number | null;
+    reported_user_name: string | null;
+    reported_user_username: string | null;
+    reported_user: ForumReportReportedUser | null;
+    reportable_type: string;
+    reportable_id: number | null;
+    post_slug?: string | null;
+    post_title?: string | null;
+    content_snapshot: string;
+    reason: string | null;
+    status: ForumReportStatus;
+    created_at: string;
+}
+
+export default defineComponent({
+    name: 'AdminForumsReports',
+    props: {
+        reports: { type: Array as PropType<ReportItem[]>, required: true },
+        pendingCount: { type: Number, required: true },
+        reviewedCount: { type: Number, required: true },
+        dismissedCount: { type: Number, required: true },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+
+        // Filter deep-links: `?status=reviewed` (etc.) is mirrored below.
+        const statusParam = new URLSearchParams(window.location.search).get(
+            'status',
+        ) as ForumReportFilter | null;
+        const allowedFilters: ForumReportFilter[] = [
+            'all',
+            'pending',
+            'reviewed',
+            'dismissed',
+        ];
+        const currentFilter = ref<ForumReportFilter>(
+            statusParam && allowedFilters.includes(statusParam)
+                ? statusParam
+                : 'pending',
+        );
+
+        const filteredReports = computed<ReportItem[]>(() => {
+            if (currentFilter.value === 'all') {
+                return props.reports;
+            }
+
+            return props.reports.filter(
+                (r) => r.status === currentFilter.value,
+            );
+        });
+
+        const updateReportStatus = (
+            reportId: number,
+            status: ForumReportStatus,
+        ): void => {
+            router.patch(
+                `/admin/forums/reports/${reportId}/status`,
+                { status },
+                { preserveScroll: true },
+            );
+        };
+
+        const deleteReport = (reportId: number): void => {
+            if (
+                confirm(
+                    'Are you sure you want to permanently delete this report record?',
+                )
+            ) {
+                router.delete(`/admin/forums/reports/${reportId}`, {
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        /**
+         * Confirms and requests report deletion for the supplied status.
+         * An omitted status or 'all' requests deletion across all statuses.
+         */
+        const handleClearReports = (statusFilter?: ForumReportFilter): void => {
+            const isFiltered = statusFilter && statusFilter !== 'all';
+            const confirmMessage = isFiltered
+                ? `Are you sure you want to permanently delete all ${statusFilter} forum report records?`
+                : 'Are you sure you want to permanently delete ALL forum report records?';
+
+            if (confirm(confirmMessage)) {
+                router.delete('/admin/forums/reports/clear', {
+                    data: isFiltered ? { status: statusFilter } : {},
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        const isBanModalOpen = ref<boolean>(false);
+        const selectedUser = ref<ChatBanUser | null>(null);
+
+        /** Opens ban controls for the reported user; does nothing without a user ID. */
+        const openBanModal = (report: ReportItem): void => {
+            if (!report.reported_user_id) {
+                return;
+            }
+
+            selectedUser.value = {
+                id: report.reported_user_id,
+                name:
+                    report.reported_user?.name ||
+                    report.reported_user_name ||
+                    'User',
+                username:
+                    report.reported_user?.username ||
+                    report.reported_user_username ||
+                    null,
+                banned_until: report.reported_user?.banned_until || null,
+                is_banned: report.reported_user?.is_banned ?? false,
+            };
+
+            isBanModalOpen.value = true;
+        };
+
+        const closeBanModal = (): void => {
+            isBanModalOpen.value = false;
+        };
+
+        const formatDate = formatDateTime;
+
+        const getAuthorName = (report: ReportItem): string =>
+            report.reported_user_name ||
+            report.reported_user?.name ||
+            'Unknown';
+
+        const getReporterName = (report: ReportItem): string =>
+            report.reporter?.name || 'Someone';
+
+        const getTypeLabel = (report: ReportItem): string =>
+            report.reportable_type === 'ForumPost'
+                ? 'Forum Question'
+                : 'Forum Answer';
+
+        const statusDotClass = (status: ForumReportStatus): string => {
+            if (status === 'pending') {
+                return 'bg-rose-500';
+            }
+
+            if (status === 'reviewed') {
+                return 'bg-emerald-500';
+            }
+
+            return 'bg-slate-300 dark:bg-gray-600';
+        };
+
+        const statusPillClass = (status: ForumReportStatus): string => {
+            if (status === 'pending') {
+                return 'bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300';
+            }
+
+            if (status === 'reviewed') {
+                return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300';
+            }
+
+            return 'bg-slate-100 text-slate-600 dark:bg-gray-800 dark:text-gray-300';
+        };
+
+        const tabOptions = computed(() => [
+            { value: 'all', label: `All (${props.reports.length})` },
+            { value: 'pending', label: `Pending (${props.pendingCount})` },
+            {
+                value: 'reviewed',
+                label: `Resolved (${props.reviewedCount})`,
+            },
+            {
+                value: 'dismissed',
+                label: `Dismissed (${props.dismissedCount})`,
+            },
+        ]);
+
+        return () => (
+            <>
+                <Head title="Reported Content - Forum Admin" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Reported Forum Content"
+                        count={
+                            props.pendingCount > 0
+                                ? `${props.pendingCount} pending`
+                                : undefined
+                        }
+                        countTone="amber"
+                        description="Review reported questions and answers, then resolve or dismiss."
+                    >
+                        {{
+                            actions: () =>
+                                props.reports.length > 0 && (
+                                    <button
+                                        type="button"
+                                        onClick={() =>
+                                            handleClearReports(
+                                                currentFilter.value === 'all'
+                                                    ? undefined
+                                                    : currentFilter.value,
+                                            )
+                                        }
+                                        title={
+                                            currentFilter.value === 'all'
+                                                ? 'Delete all reports'
+                                                : `Delete all ${currentFilter.value} reports`
+                                        }
+                                        class={adminDangerTextBtnClass}
+                                    >
+                                        <Trash2 class="h-3.5 w-3.5" />
+                                        <span>
+                                            {currentFilter.value === 'all'
+                                                ? 'Clear all'
+                                                : `Clear ${currentFilter.value}`}
+                                        </span>
+                                    </button>
+                                ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Forum management nav */}
+                    <nav class={adminSubNavClass}>
+                        <Link
+                            href="/admin/forums"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            Discussions
+                        </Link>
+                        <Link
+                            href="/admin/forums/reports"
+                            class={adminSubNavLinkClass(true)}
+                        >
+                            <Flag class="h-3.5 w-3.5" />
+                            <span>Reports</span>
+                            {props.pendingCount > 0 ? (
+                                <span class={adminSubNavBadgeClass}>
+                                    {props.pendingCount}
+                                </span>
+                            ) : null}
+                        </Link>
+                        <Link
+                            href="/admin/forums/settings"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            <Settings class="h-3.5 w-3.5" />
+                            <span>Settings</span>
+                        </Link>
+                    </nav>
+
+                    {/* Filter tabs */}
+                    <SegmentedTabs
+                        tabs={tabOptions.value}
+                        active={currentFilter.value}
+                        onSelect={(value: string) => {
+                            currentFilter.value =
+                                value as typeof currentFilter.value;
+
+                            // Mirror the filter into the URL so a refreshed
+                            // or shared link reopens the same view.
+                            router.get(
+                                '/admin/forums/reports',
+                                {
+                                    status: currentFilter.value,
+                                },
+                                {
+                                    preserveState: true,
+                                    preserveScroll: true,
+                                    replace: true,
+                                },
+                            );
+                        }}
+                    />
+
+                    {/* Reports list */}
+                    <div>
+                        {filteredReports.value.length === 0 ? (
+                            <EmptyState
+                                icon={Flag}
+                                variant="dashed"
+                                title={`No ${currentFilter.value !== 'all' ? currentFilter.value : ''} forum reports found`}
+                                description="The forum is clear of flagged discussions or answers under this filter."
+                            />
+                        ) : (
+                            <div class={adminHoverListClass}>
+                                {filteredReports.value.map((report) => (
+                                    <div
+                                        key={report.id}
+                                        class={[
+                                            ...adminCardRowClass('amber'),
+                                            'items-start',
+                                        ]}
+                                    >
+                                        <span
+                                            class={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${statusDotClass(report.status)}`}
+                                        />
+                                        <div class="min-w-0 flex-1 space-y-1">
+                                            <div class="flex flex-wrap items-center gap-1.5">
+                                                <span
+                                                    class={`rounded px-1.5 py-0.5 text-[11px] font-bold tracking-wide uppercase ${statusPillClass(report.status)}`}
+                                                >
+                                                    {report.status}
+                                                </span>
+                                                <span class="rounded bg-indigo-50 px-1.5 py-0.5 text-[11px] font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300">
+                                                    {getTypeLabel(report)}
+                                                </span>
+                                                <p class="text-sm font-semibold text-slate-900 dark:text-gray-100">
+                                                    {getReporterName(report)}{' '}
+                                                    <span class="font-normal text-slate-500 dark:text-gray-400">
+                                                        reported
+                                                    </span>{' '}
+                                                    {getAuthorName(report)}
+                                                </p>
+                                                <span class="rounded bg-amber-50 px-1.5 py-0.5 text-[11px] font-semibold text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">
+                                                    {report.reason ||
+                                                        'Flagged for moderation'}
+                                                </span>
+                                            </div>
+                                            <p class="text-[11px] text-slate-500 dark:text-gray-400">
+                                                <span>
+                                                    Reported{' '}
+                                                    {formatDate(
+                                                        report.created_at,
+                                                    )}
+                                                </span>
+                                                {report.reported_user
+                                                    ?.is_banned ? (
+                                                    <span>
+                                                        {' '}
+                                                        · Currently suspended
+                                                    </span>
+                                                ) : null}
+                                            </p>
+                                            <div class="mt-1.5 border-l-2 border-slate-200 pl-3 dark:border-gray-700">
+                                                <p class="text-xs leading-relaxed break-words whitespace-pre-wrap text-slate-700 dark:text-gray-300">
+                                                    {report.content_snapshot}
+                                                </p>
+                                                {report.post_slug ? (
+                                                    <a
+                                                        href={`/forum/questions/${report.post_slug}`}
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        class="mt-1 inline-flex items-center gap-1 text-[11px] font-semibold text-indigo-600 hover:underline dark:text-indigo-400"
+                                                    >
+                                                        <span>
+                                                            View discussion
+                                                        </span>
+                                                        <ExternalLink class="h-3 w-3" />
+                                                    </a>
+                                                ) : null}
+                                            </div>
+                                            <div class="flex flex-wrap items-center gap-1 pt-1">
+                                                {report.reported_user_id &&
+                                                (can('manage chat') ||
+                                                    can('manage forums')) ? (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            openBanModal(report)
+                                                        }
+                                                        title="Suspend author"
+                                                        class={
+                                                            adminDangerTextBtnClass
+                                                        }
+                                                    >
+                                                        <Ban class="h-3.5 w-3.5" />
+                                                        <span>
+                                                            {report
+                                                                .reported_user
+                                                                ?.is_banned
+                                                                ? 'Edit suspension'
+                                                                : 'Suspend'}
+                                                        </span>
+                                                    </button>
+                                                ) : null}
+                                                {report.status !==
+                                                'reviewed' ? (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            updateReportStatus(
+                                                                report.id,
+                                                                'reviewed',
+                                                            )
+                                                        }
+                                                        class={
+                                                            adminSuccessTextBtnClass
+                                                        }
+                                                    >
+                                                        Resolve
+                                                    </button>
+                                                ) : null}
+                                                {report.status !==
+                                                'dismissed' ? (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            updateReportStatus(
+                                                                report.id,
+                                                                'dismissed',
+                                                            )
+                                                        }
+                                                        class={
+                                                            adminMutedTextBtnClass
+                                                        }
+                                                    >
+                                                        Dismiss
+                                                    </button>
+                                                ) : null}
+                                                <button
+                                                    type="button"
+                                                    onClick={() =>
+                                                        deleteReport(report.id)
+                                                    }
+                                                    title="Delete report"
+                                                    aria-label="Delete report"
+                                                    class={
+                                                        adminDangerIconBtnClass
+                                                    }
+                                                >
+                                                    <Trash2 class="h-4 w-4" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Suspension Modal */}
+                    <ChatBanModal
+                        isOpen={isBanModalOpen.value}
+                        user={selectedUser.value}
+                        onClose={closeBanModal}
+                    />
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/forums/Reports.vue b/resources/js/pages/admin/forums/Reports.vue
deleted file mode 100644
index 1ec1b54f..00000000
--- a/resources/js/pages/admin/forums/Reports.vue
+++ /dev/null
@@ -1,474 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, router } from '@inertiajs/vue3';
-import {
-    Flag,
-    CheckCircle,
-    XCircle,
-    Trash2,
-    Settings,
-    Ban,
-    ExternalLink,
-} from 'lucide-vue-next';
-import { ref, computed } from 'vue';
-import ChatBanModal from '@/components/ChatBanModal.vue';
-import type { ChatBanUser } from '@/components/ChatBanModal.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import { formatDateTime } from '@/lib/useDate';
-import { usePermissions } from '@/lib/usePermissions';
-
-const { can } = usePermissions();
-
-interface ReportItem {
-    id: number;
-    reporter_id: number | null;
-    reporter: {
-        id: number;
-        name: string;
-        username: string;
-    } | null;
-    reported_user_id: number | null;
-    reported_user_name: string | null;
-    reported_user_username: string | null;
-    reported_user: {
-        id: number;
-        name: string;
-        username: string;
-        banned_until: string | null;
-        is_banned: boolean;
-    } | null;
-    reportable_type: string;
-    reportable_id: number | null;
-    post_slug?: string | null;
-    post_title?: string | null;
-    content_snapshot: string;
-    reason: string | null;
-    status: 'pending' | 'reviewed' | 'dismissed';
-    created_at: string;
-}
-
-const props = defineProps<{
-    reports: ReportItem[];
-    pendingCount: number;
-    reviewedCount: number;
-    dismissedCount: number;
-}>();
-
-const currentFilter = ref<'all' | 'pending' | 'reviewed' | 'dismissed'>(
-    'pending',
-);
-
-const filteredReports = computed(() => {
-    if (currentFilter.value === 'all') {
-        return props.reports;
-    }
-
-    return props.reports.filter((r) => r.status === currentFilter.value);
-});
-
-const updateReportStatus = (reportId: number, status: string) => {
-    router.patch(
-        `/admin/forums/reports/${reportId}/status`,
-        { status },
-        { preserveScroll: true },
-    );
-};
-
-const deleteReport = (reportId: number) => {
-    if (
-        confirm(
-            'Are you sure you want to permanently delete this report record?',
-        )
-    ) {
-        router.delete(`/admin/forums/reports/${reportId}`, {
-            preserveScroll: true,
-        });
-    }
-};
-
-const handleClearReports = (statusFilter?: string) => {
-    const isFiltered = statusFilter && statusFilter !== 'all';
-    const confirmMessage = isFiltered
-        ? `Are you sure you want to permanently delete all ${statusFilter} forum report records?`
-        : 'Are you sure you want to permanently delete ALL forum report records?';
-
-    if (confirm(confirmMessage)) {
-        router.delete('/admin/forums/reports/clear', {
-            data: isFiltered ? { status: statusFilter } : {},
-            preserveScroll: true,
-        });
-    }
-};
-
-const isBanModalOpen = ref(false);
-const selectedUser = ref<ChatBanUser | null>(null);
-
-const openBanModal = (report: ReportItem) => {
-    if (!report.reported_user_id) {
-        return;
-    }
-
-    selectedUser.value = {
-        id: report.reported_user_id,
-        name: report.reported_user?.name || report.reported_user_name || 'User',
-        username:
-            report.reported_user?.username ||
-            report.reported_user_username ||
-            null,
-        banned_until: report.reported_user?.banned_until || null,
-        is_banned: report.reported_user?.is_banned ?? false,
-    };
-
-    isBanModalOpen.value = true;
-};
-
-const formatDate = formatDateTime;
-</script>
-
-<template>
-    <Head title="Reported Content - Forum Admin" />
-
-    <div class="space-y-5">
-        <!-- Minimal Top Header -->
-        <div
-            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-        >
-            <div>
-                <h1
-                    class="text-lg font-bold tracking-tight text-slate-900 sm:text-xl dark:text-gray-100"
-                >
-                    Reported Forum Content
-                </h1>
-                <p class="text-xs text-slate-500 dark:text-gray-400">
-                    Review and act on community reports against forum questions
-                    and answers.
-                </p>
-            </div>
-
-            <!-- Header Quick Tabs & Clear Action -->
-            <div class="flex max-w-full flex-wrap items-center gap-2">
-                <div
-                    class="flex max-w-full items-center gap-1.5 overflow-x-auto rounded-xl border border-slate-200 bg-white p-1 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <Link
-                        href="/admin/forums"
-                        class="shrink-0 rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                    >
-                        Discussions
-                    </Link>
-
-                    <Link
-                        href="/admin/forums/reports"
-                        class="flex shrink-0 items-center gap-1.5 rounded-lg bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
-                    >
-                        <Flag class="h-3.5 w-3.5" />
-                        <span>Reports</span>
-                        <span
-                            v-if="pendingCount > 0"
-                            class="py-0.2 rounded-full bg-rose-500 px-1.5 text-[10px] font-bold text-white"
-                        >
-                            {{ pendingCount }}
-                        </span>
-                    </Link>
-
-                    <Link
-                        href="/admin/forums/settings"
-                        class="flex shrink-0 items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                    >
-                        <Settings class="h-3.5 w-3.5" />
-                        <span>Settings</span>
-                    </Link>
-                </div>
-
-                <button
-                    v-if="reports.length > 0"
-                    type="button"
-                    @click="
-                        handleClearReports(
-                            currentFilter === 'all' ? undefined : currentFilter,
-                        )
-                    "
-                    class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl border border-rose-200 bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-600 transition hover:bg-rose-100 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-400"
-                >
-                    <Trash2 class="h-3.5 w-3.5" />
-                    <span>Clear</span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Filter Status Pills -->
-        <div
-            class="flex flex-wrap items-center gap-1.5 rounded-2xl border border-slate-200/90 bg-white p-3 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-        >
-            <button
-                type="button"
-                @click="currentFilter = 'pending'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                :class="[
-                    currentFilter === 'pending'
-                        ? 'bg-rose-600 text-white'
-                        : 'bg-rose-50 text-rose-700 hover:bg-rose-100 dark:bg-rose-950/40 dark:text-rose-300',
-                ]"
-            >
-                Pending ({{ pendingCount }})
-            </button>
-
-            <button
-                type="button"
-                @click="currentFilter = 'reviewed'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                :class="[
-                    currentFilter === 'reviewed'
-                        ? 'bg-emerald-600 text-white'
-                        : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300',
-                ]"
-            >
-                Resolved ({{ reviewedCount }})
-            </button>
-
-            <button
-                type="button"
-                @click="currentFilter = 'dismissed'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                :class="[
-                    currentFilter === 'dismissed'
-                        ? 'bg-slate-800 text-white dark:bg-gray-700'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300',
-                ]"
-            >
-                Dismissed ({{ dismissedCount }})
-            </button>
-
-            <button
-                type="button"
-                @click="currentFilter = 'all'"
-                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                :class="[
-                    currentFilter === 'all'
-                        ? 'bg-slate-900 text-white dark:bg-gray-100 dark:text-gray-900'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300',
-                ]"
-            >
-                All ({{ reports.length }})
-            </button>
-        </div>
-
-        <!-- Reports List -->
-        <div class="space-y-4">
-            <EmptyState
-                v-if="filteredReports.length === 0"
-                :icon="Flag"
-                variant="dashed"
-                :title="`No ${currentFilter !== 'all' ? currentFilter : ''} forum reports found`"
-                description="The forum is clear of flagged discussions or answers under this filter."
-            />
-
-            <div v-else class="space-y-3.5">
-                <div
-                    v-for="report in filteredReports"
-                    :key="report.id"
-                    class="rounded-2xl border p-4.5 transition-colors sm:p-5"
-                    :class="[
-                        report.status === 'pending'
-                            ? 'border-rose-200 bg-white shadow-2xs dark:border-rose-900/50 dark:bg-gray-900'
-                            : 'border-slate-200/80 bg-slate-50/60 dark:border-gray-800 dark:bg-gray-900/40',
-                    ]"
-                >
-                    <div
-                        class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
-                    >
-                        <!-- Left Info -->
-                        <div class="space-y-1.5">
-                            <div class="flex flex-wrap items-center gap-2">
-                                <span
-                                    class="inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase"
-                                    :class="
-                                        report.status === 'pending'
-                                            ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/70 dark:text-rose-300'
-                                            : report.status === 'reviewed'
-                                              ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300'
-                                              : 'bg-slate-200 text-slate-700 dark:bg-gray-800 dark:text-gray-300'
-                                    "
-                                >
-                                    {{ report.status }}
-                                </span>
-
-                                <span
-                                    class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-0.5 text-[10px] font-bold text-indigo-700 dark:bg-indigo-950/70 dark:text-indigo-300"
-                                >
-                                    {{
-                                        report.reportable_type === 'ForumPost'
-                                            ? 'Forum Question'
-                                            : 'Forum Answer'
-                                    }}
-                                </span>
-
-                                <span
-                                    class="text-xs text-slate-400 dark:text-gray-500"
-                                >
-                                    Reported {{ formatDate(report.created_at) }}
-                                </span>
-
-                                <span
-                                    v-if="report.reporter"
-                                    class="text-xs text-slate-500 dark:text-gray-400"
-                                >
-                                    by
-                                    <strong
-                                        class="text-slate-700 dark:text-gray-300"
-                                        >{{ report.reporter.name }}</strong
-                                    >
-                                    <span
-                                        v-if="report.reporter.username"
-                                        class="text-slate-400"
-                                    >
-                                        (@{{ report.reporter.username }})
-                                    </span>
-                                </span>
-                            </div>
-
-                            <div class="flex items-center gap-2 pt-0.5">
-                                <span
-                                    class="text-xs font-semibold text-slate-500 dark:text-gray-400"
-                                    >Reason:</span
-                                >
-                                <span
-                                    class="rounded-md bg-amber-50 px-2 py-0.5 text-xs font-bold text-amber-800 dark:bg-amber-950/50 dark:text-amber-300"
-                                >
-                                    {{
-                                        report.reason ||
-                                        'Flagged for moderation'
-                                    }}
-                                </span>
-                            </div>
-                        </div>
-
-                        <!-- Right Actions -->
-                        <div class="flex flex-wrap items-center gap-2">
-                            <!-- Ban Modal trigger (requires chat or forum management permission) -->
-                            <button
-                                v-if="
-                                    report.reported_user_id &&
-                                    (can('manage chat') || can('manage forums'))
-                                "
-                                type="button"
-                                @click="openBanModal(report)"
-                                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-bold transition"
-                                :class="
-                                    report.reported_user?.is_banned
-                                        ? 'bg-amber-50 text-amber-800 hover:bg-amber-100 dark:bg-amber-950/60 dark:text-amber-300'
-                                        : 'bg-rose-50 text-rose-700 hover:bg-rose-100 dark:bg-rose-950/60 dark:text-rose-300'
-                                "
-                            >
-                                <Ban class="h-3 w-3" />
-                                <span>{{
-                                    report.reported_user?.is_banned
-                                        ? 'Edit Suspension'
-                                        : 'Suspend Author'
-                                }}</span>
-                            </button>
-
-                            <!-- Resolve -->
-                            <button
-                                v-if="report.status !== 'reviewed'"
-                                type="button"
-                                @click="
-                                    updateReportStatus(report.id, 'reviewed')
-                                "
-                                class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:bg-emerald-950/60 dark:text-emerald-300"
-                            >
-                                <CheckCircle class="h-3 w-3" />
-                                <span>Resolve</span>
-                            </button>
-
-                            <!-- Dismiss -->
-                            <button
-                                v-if="report.status !== 'dismissed'"
-                                type="button"
-                                @click="
-                                    updateReportStatus(report.id, 'dismissed')
-                                "
-                                class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300"
-                            >
-                                <XCircle class="h-3 w-3" />
-                                <span>Dismiss</span>
-                            </button>
-
-                            <!-- Delete report record -->
-                            <button
-                                type="button"
-                                @click="deleteReport(report.id)"
-                                class="cursor-pointer rounded-xl p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                title="Delete Report Record"
-                            >
-                                <Trash2 class="h-3.5 w-3.5" />
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Snapshot Box -->
-                    <div
-                        class="mt-3.5 rounded-xl border border-slate-200/80 bg-slate-50/70 p-3.5 dark:border-gray-800 dark:bg-gray-800/60"
-                    >
-                        <div
-                            class="flex flex-col gap-1.5 border-b border-slate-200/60 pb-2 text-[11px] text-slate-500 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700/60 dark:text-gray-400"
-                        >
-                            <div>
-                                <span
-                                    class="font-bold text-slate-800 dark:text-gray-200"
-                                >
-                                    Author:
-                                    {{
-                                        report.reported_user_name ||
-                                        report.reported_user?.name ||
-                                        'Unknown'
-                                    }}
-                                </span>
-                                <span
-                                    v-if="
-                                        report.reported_user_username ||
-                                        report.reported_user?.username
-                                    "
-                                    class="ml-1 text-slate-400"
-                                >
-                                    (@{{
-                                        report.reported_user_username ||
-                                        report.reported_user?.username
-                                    }})
-                                </span>
-                                <span
-                                    v-if="report.reported_user?.is_banned"
-                                    class="ml-2 rounded-sm bg-rose-100 px-1.5 py-0.5 text-[9px] font-bold text-rose-700 dark:bg-rose-900/60 dark:text-rose-300"
-                                >
-                                    Suspended
-                                </span>
-                            </div>
-
-                            <a
-                                v-if="report.post_slug"
-                                :href="`/forum/questions/${report.post_slug}`"
-                                target="_blank"
-                                class="inline-flex items-center gap-1 font-semibold text-indigo-600 hover:underline dark:text-indigo-400"
-                            >
-                                <span>View Discussion</span>
-                                <ExternalLink class="h-3 w-3" />
-                            </a>
-                        </div>
-
-                        <p
-                            class="mt-2 text-xs leading-relaxed font-medium break-words whitespace-pre-wrap text-slate-900 dark:text-gray-100"
-                        >
-                            {{ report.content_snapshot }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Suspension Modal -->
-        <ChatBanModal
-            :is-open="isBanModalOpen"
-            :user="selectedUser"
-            @close="isBanModalOpen = false"
-        />
-    </div>
-</template>
diff --git a/resources/js/pages/admin/forums/Settings.tsx b/resources/js/pages/admin/forums/Settings.tsx
new file mode 100644
index 00000000..0448383a
--- /dev/null
+++ b/resources/js/pages/admin/forums/Settings.tsx
@@ -0,0 +1,433 @@
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Flag, Loader2, Save, Settings } from 'lucide-vue-next';
+import { defineComponent, onUnmounted, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminListClass,
+    adminPanelClass,
+    adminPageClass,
+    adminSectionTitleClass,
+    adminPrimaryBtnClass,
+    adminSegmentedActiveClass,
+    adminSegmentedIdleClass,
+    adminSubNavBadgeClass,
+    adminSubNavClass,
+    adminSubNavLinkClass,
+} from '@/components/admin/ui';
+import { markAdminFormDirty } from '@/lib/adminFormGuard';
+
+type ForumApprovalMode = 'auto' | 'manual';
+
+interface ForumSettingsData {
+    approval_mode: string;
+    posting_enabled: boolean;
+    comments_enabled: boolean;
+    disabled_reason: string;
+    auto_unpublish_threshold: number;
+    profanity_filter_enabled: boolean;
+    banned_words: string;
+}
+
+interface ForumSettingsProps {
+    settings: ForumSettingsData;
+    pendingReportsCount: number;
+}
+
+interface ForumSettingsFormFields {
+    approval_mode: ForumApprovalMode;
+    posting_enabled: boolean;
+    comments_enabled: boolean;
+    disabled_reason: string;
+    auto_unpublish_threshold: number;
+    profanity_filter_enabled: boolean;
+    banned_words: string;
+}
+
+export default defineComponent({
+    name: 'AdminForumsSettings',
+    props: {
+        settings: {
+            type: Object as PropType<ForumSettingsData>,
+            required: true,
+        },
+        pendingReportsCount: {
+            type: Number as PropType<number>,
+            required: true,
+        },
+    },
+    setup(props: ForumSettingsProps) {
+        const form = useForm<ForumSettingsFormFields>({
+            approval_mode:
+                (props.settings.approval_mode as ForumApprovalMode) || 'auto',
+            posting_enabled: props.settings.posting_enabled,
+            comments_enabled: props.settings.comments_enabled,
+            disabled_reason: props.settings.disabled_reason,
+            auto_unpublish_threshold: props.settings.auto_unpublish_threshold,
+            profanity_filter_enabled: props.settings.profanity_filter_enabled,
+            banned_words: props.settings.banned_words,
+        });
+
+        watch(
+            () => form.isDirty,
+            (v) => markAdminFormDirty(v),
+        );
+
+        onUnmounted(() => markAdminFormDirty(false));
+
+        const submitSettings = (e: Event) => {
+            e.preventDefault();
+            form.post('/admin/forums/settings', {
+                preserveScroll: true,
+            });
+        };
+
+        const onApprovalModeChange = (mode: ForumApprovalMode) => () => {
+            form.approval_mode = mode;
+        };
+
+        const onPostingEnabledChange = (e: Event) => {
+            form.posting_enabled = (e.target as HTMLInputElement).checked;
+        };
+
+        const onCommentsEnabledChange = (e: Event) => {
+            form.comments_enabled = (e.target as HTMLInputElement).checked;
+        };
+
+        const onDisabledReasonInput = (e: Event) => {
+            form.disabled_reason = (e.target as HTMLInputElement).value;
+        };
+
+        const onThresholdInput = (e: Event) => {
+            form.auto_unpublish_threshold = Number(
+                (e.target as HTMLInputElement).value,
+            );
+        };
+
+        const onProfanityFilterChange = (e: Event) => {
+            form.profanity_filter_enabled = (
+                e.target as HTMLInputElement
+            ).checked;
+        };
+
+        const onBannedWordsInput = (e: Event) => {
+            form.banned_words = (e.target as HTMLTextAreaElement).value;
+        };
+
+        const saveButtonContent = () =>
+            form.processing ? (
+                <>
+                    <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                    <span>Saving...</span>
+                </>
+            ) : (
+                <>
+                    <Save class="h-3.5 w-3.5" />
+                    <span>Save Settings</span>
+                </>
+            );
+
+        return () => (
+            <>
+                <Head title="Forum Settings - Admin" />
+
+                {/* Header + switcher stay full-width like Discussions/Reports;
+                    only the form narrows for readability. */}
+                <div class={adminPageClass}>
+                    {/* Page header with Save action */}
+                    <AdminPageHeader
+                        title="Forum Settings"
+                        count={
+                            props.pendingReportsCount > 0
+                                ? `${props.pendingReportsCount} pending`
+                                : undefined
+                        }
+                        countTone="amber"
+                        description="Configure question approval mode, availability, and moderation triggers."
+                    >
+                        {{
+                            actions: () => (
+                                <button
+                                    type="button"
+                                    onClick={submitSettings}
+                                    disabled={form.processing}
+                                    class={adminPrimaryBtnClass}
+                                >
+                                    {saveButtonContent()}
+                                </button>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Slim text tabs with active underline */}
+                    <nav class={adminSubNavClass}>
+                        <Link
+                            href="/admin/forums"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            Discussions
+                        </Link>
+                        <Link
+                            href="/admin/forums/reports"
+                            class={adminSubNavLinkClass(false)}
+                        >
+                            <Flag class="h-3.5 w-3.5 text-rose-500" />
+                            <span>Reports</span>
+                            {props.pendingReportsCount > 0 && (
+                                <span class={adminSubNavBadgeClass}>
+                                    {props.pendingReportsCount}
+                                </span>
+                            )}
+                        </Link>
+                        <Link
+                            href="/admin/forums/settings"
+                            class={adminSubNavLinkClass(true)}
+                        >
+                            <Settings class="h-3.5 w-3.5" />
+                            <span>Settings</span>
+                        </Link>
+                    </nav>
+
+                    <form
+                        onSubmit={submitSettings}
+                        class={[adminPanelClass, 'mx-auto max-w-4xl space-y-8']}
+                    >
+                        {/* 1. Approval */}
+                        <section class="space-y-3">
+                            <div>
+                                <h2 class={adminSectionTitleClass}>Approval</h2>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Choose whether new questions go live
+                                    automatically or wait for moderator review.
+                                </p>
+                            </div>
+
+                            <div
+                                role="radiogroup"
+                                aria-label="Post approval mode"
+                                class="inline-flex items-center gap-1.5"
+                            >
+                                <label
+                                    class={[
+                                        'cursor-pointer rounded-[10px] px-3 py-1.5 text-xs font-semibold tracking-tight transition-colors duration-150 active:scale-95 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-indigo-500',
+                                        form.approval_mode === 'auto'
+                                            ? adminSegmentedActiveClass
+                                            : adminSegmentedIdleClass,
+                                    ]}
+                                >
+                                    <input
+                                        value="auto"
+                                        name="approval_mode"
+                                        checked={form.approval_mode === 'auto'}
+                                        onChange={onApprovalModeChange('auto')}
+                                        type="radio"
+                                        class="sr-only"
+                                    />
+                                    Automatic
+                                </label>
+                                <label
+                                    class={[
+                                        'cursor-pointer rounded-[10px] px-3 py-1.5 text-xs font-semibold tracking-tight transition-colors duration-150 active:scale-95 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-indigo-500',
+                                        form.approval_mode === 'manual'
+                                            ? adminSegmentedActiveClass
+                                            : adminSegmentedIdleClass,
+                                    ]}
+                                >
+                                    <input
+                                        value="manual"
+                                        name="approval_mode"
+                                        checked={
+                                            form.approval_mode === 'manual'
+                                        }
+                                        onChange={onApprovalModeChange(
+                                            'manual',
+                                        )}
+                                        type="radio"
+                                        class="sr-only"
+                                    />
+                                    Manual review
+                                </label>
+                            </div>
+                            <p class="text-[11px] text-slate-400 dark:text-gray-500">
+                                {form.approval_mode === 'manual'
+                                    ? 'New posts stay pending until approved by a moderator.'
+                                    : 'Questions go live immediately after submission.'}
+                            </p>
+                            {form.errors.approval_mode && (
+                                <p class="text-xs text-rose-600 dark:text-rose-400">
+                                    {form.errors.approval_mode}
+                                </p>
+                            )}
+                        </section>
+
+                        {/* 2. Availability */}
+                        <section class="space-y-3">
+                            <div>
+                                <h2 class={adminSectionTitleClass}>
+                                    Availability
+                                </h2>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Toggle community participation or post a
+                                    temporary pause notice.
+                                </p>
+                            </div>
+
+                            <div class={adminListClass}>
+                                <div class="flex items-center justify-between gap-4 px-3 py-3">
+                                    <div>
+                                        <p class="text-xs font-semibold text-slate-800 dark:text-gray-200">
+                                            Allow new questions
+                                        </p>
+                                        <p class="mt-0.5 text-[11px] text-slate-400 dark:text-gray-500">
+                                            Permit students to ask new
+                                            questions.
+                                        </p>
+                                    </div>
+                                    <input
+                                        checked={form.posting_enabled}
+                                        onChange={onPostingEnabledChange}
+                                        type="checkbox"
+                                        class="h-4 w-4 shrink-0 cursor-pointer rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 dark:border-gray-600"
+                                    />
+                                </div>
+                                <div class="flex items-center justify-between gap-4 px-3 py-3">
+                                    <div>
+                                        <p class="text-xs font-semibold text-slate-800 dark:text-gray-200">
+                                            Allow answers & comments
+                                        </p>
+                                        <p class="mt-0.5 text-[11px] text-slate-400 dark:text-gray-500">
+                                            Permit replies and discussion
+                                            solutions.
+                                        </p>
+                                    </div>
+                                    <input
+                                        checked={form.comments_enabled}
+                                        onChange={onCommentsEnabledChange}
+                                        type="checkbox"
+                                        class="h-4 w-4 shrink-0 cursor-pointer rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 dark:border-gray-600"
+                                    />
+                                </div>
+                            </div>
+
+                            <div>
+                                <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                    Pause notice (optional)
+                                </label>
+                                <input
+                                    value={form.disabled_reason}
+                                    onInput={onDisabledReasonInput}
+                                    type="text"
+                                    placeholder="e.g. Discussions temporarily paused during maintenance."
+                                    class="h-9 w-full rounded-[10px] border border-slate-200 bg-white px-3 text-xs text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400"
+                                />
+                                <p class="mt-1 text-[11px] text-slate-400 dark:text-gray-500">
+                                    Shown to students when posting or commenting
+                                    is turned off.
+                                </p>
+                                {form.errors.disabled_reason && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.disabled_reason}
+                                    </p>
+                                )}
+                            </div>
+                        </section>
+
+                        {/* 3. Moderation */}
+                        <section class="space-y-3">
+                            <div>
+                                <h2 class={adminSectionTitleClass}>
+                                    Moderation
+                                </h2>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Automated triggers to unpublish reported
+                                    content and screen keywords.
+                                </p>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-4 px-3 py-3">
+                                <div>
+                                    <p class="text-xs font-semibold text-slate-800 dark:text-gray-200">
+                                        Auto-unpublish threshold
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-400 dark:text-gray-500">
+                                        Hide questions when reports reach this
+                                        count (0 disables).
+                                    </p>
+                                </div>
+                                <div class="flex shrink-0 items-center gap-1.5">
+                                    <input
+                                        value={form.auto_unpublish_threshold}
+                                        onInput={onThresholdInput}
+                                        type="number"
+                                        min="0"
+                                        max="50"
+                                        required
+                                        class="h-9 w-16 rounded-[10px] border border-slate-200 bg-white px-2.5 text-center text-xs font-semibold text-slate-900 transition-colors outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-indigo-400"
+                                    />
+                                    <span class="text-xs text-slate-500 dark:text-gray-400">
+                                        reports
+                                    </span>
+                                </div>
+                            </div>
+                            {form.errors.auto_unpublish_threshold && (
+                                <p class="text-xs text-rose-600 dark:text-rose-400">
+                                    {form.errors.auto_unpublish_threshold}
+                                </p>
+                            )}
+
+                            <div class="flex items-center justify-between gap-4 px-3 py-3">
+                                <div>
+                                    <p class="text-xs font-semibold text-slate-800 dark:text-gray-200">
+                                        Profanity filter
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-400 dark:text-gray-500">
+                                        Screen question and answer text against
+                                        banned keywords.
+                                    </p>
+                                </div>
+                                <input
+                                    checked={form.profanity_filter_enabled}
+                                    onChange={onProfanityFilterChange}
+                                    type="checkbox"
+                                    class="h-4 w-4 shrink-0 cursor-pointer rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 dark:border-gray-600"
+                                />
+                            </div>
+
+                            <div>
+                                <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                    Banned keywords (comma-separated)
+                                </label>
+                                <textarea
+                                    value={form.banned_words}
+                                    onInput={onBannedWordsInput}
+                                    rows={2}
+                                    placeholder="e.g. abusive_word, spam_link"
+                                    class="w-full rounded-[10px] border border-slate-200 bg-white p-2.5 text-xs text-slate-900 transition-colors outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400"
+                                ></textarea>
+                                <p class="mt-1 text-[11px] text-slate-400 dark:text-gray-500">
+                                    Matches are screened before posts go live.
+                                </p>
+                                {form.errors.banned_words && (
+                                    <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                        {form.errors.banned_words}
+                                    </p>
+                                )}
+                            </div>
+                        </section>
+
+                        <div class="flex justify-end border-t border-slate-200/60 pt-4 dark:border-slate-800/60">
+                            <button
+                                type="submit"
+                                disabled={form.processing}
+                                class={adminPrimaryBtnClass}
+                            >
+                                {saveButtonContent()}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/forums/Settings.vue b/resources/js/pages/admin/forums/Settings.vue
deleted file mode 100644
index c8bae4a9..00000000
--- a/resources/js/pages/admin/forums/Settings.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { Settings, Flag, Save, Loader2 } from 'lucide-vue-next';
-
-const props = defineProps<{
-    settings: {
-        approval_mode: string;
-        posting_enabled: boolean;
-        comments_enabled: boolean;
-        disabled_reason: string;
-        auto_unpublish_threshold: number;
-        profanity_filter_enabled: boolean;
-        banned_words: string;
-    };
-    pendingReportsCount: number;
-}>();
-
-const form = useForm({
-    approval_mode: props.settings.approval_mode || 'auto',
-    posting_enabled: props.settings.posting_enabled,
-    comments_enabled: props.settings.comments_enabled,
-    disabled_reason: props.settings.disabled_reason,
-    auto_unpublish_threshold: props.settings.auto_unpublish_threshold,
-    profanity_filter_enabled: props.settings.profanity_filter_enabled,
-    banned_words: props.settings.banned_words,
-});
-
-const submitSettings = () => {
-    form.post('/admin/forums/settings', {
-        preserveScroll: true,
-    });
-};
-</script>
-
-<template>
-    <Head title="Forum Settings - Admin" />
-
-    <div class="max-w-4xl space-y-5">
-        <!-- Minimal Header -->
-        <div
-            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-        >
-            <div>
-                <h1
-                    class="text-lg font-bold tracking-tight text-slate-900 sm:text-xl dark:text-gray-100"
-                >
-                    Forum Settings
-                </h1>
-                <p class="text-xs text-slate-500 dark:text-gray-400">
-                    Configure question approval mode, availability, and
-                    moderation triggers.
-                </p>
-            </div>
-
-            <!-- Header Quick Tabs -->
-            <div
-                class="flex max-w-full items-center gap-1.5 overflow-x-auto rounded-xl border border-slate-200 bg-white p-1 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <Link
-                    href="/admin/forums"
-                    class="shrink-0 rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                >
-                    Discussions
-                </Link>
-
-                <Link
-                    href="/admin/forums/reports"
-                    class="flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                >
-                    <Flag class="h-3.5 w-3.5 text-rose-500" />
-                    <span>Reports</span>
-                    <span
-                        v-if="pendingReportsCount > 0"
-                        class="py-0.2 rounded-full bg-rose-500 px-1.5 text-[10px] font-bold text-white"
-                    >
-                        {{ pendingReportsCount }}
-                    </span>
-                </Link>
-
-                <Link
-                    href="/admin/forums/settings"
-                    class="flex shrink-0 items-center gap-1 rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-bold text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                >
-                    <Settings class="h-3.5 w-3.5" />
-                    <span>Settings</span>
-                </Link>
-            </div>
-        </div>
-
-        <form @submit.prevent="submitSettings" class="space-y-4">
-            <!-- 1. Approval Mode -->
-            <div
-                class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <h2
-                    class="text-xs font-bold tracking-wider text-slate-900 uppercase dark:text-gray-100"
-                >
-                    Post Approval Workflow
-                </h2>
-                <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                    Choose whether new questions go live automatically or
-                    require moderator review first.
-                </p>
-
-                <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
-                    <label
-                        class="flex cursor-pointer items-start gap-3 rounded-xl border p-3.5 transition"
-                        :class="[
-                            form.approval_mode === 'auto'
-                                ? 'border-indigo-500 bg-indigo-50/40 dark:border-indigo-500/70 dark:bg-indigo-950/20'
-                                : 'border-slate-200 bg-white hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/50',
-                        ]"
-                    >
-                        <input
-                            v-model="form.approval_mode"
-                            type="radio"
-                            value="auto"
-                            class="mt-0.5 h-4 w-4 border-slate-300 text-indigo-600 focus:ring-indigo-500"
-                        />
-                        <div class="space-y-0.5">
-                            <div
-                                class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Automatic (Default)
-                            </div>
-                            <p
-                                class="text-[11px] text-slate-500 dark:text-gray-400"
-                            >
-                                Questions go live immediately after submission.
-                            </p>
-                        </div>
-                    </label>
-
-                    <label
-                        class="flex cursor-pointer items-start gap-3 rounded-xl border p-3.5 transition"
-                        :class="[
-                            form.approval_mode === 'manual'
-                                ? 'border-indigo-500 bg-indigo-50/40 dark:border-indigo-500/70 dark:bg-indigo-950/20'
-                                : 'border-slate-200 bg-white hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/50',
-                        ]"
-                    >
-                        <input
-                            v-model="form.approval_mode"
-                            type="radio"
-                            value="manual"
-                            class="mt-0.5 h-4 w-4 border-slate-300 text-indigo-600 focus:ring-indigo-500"
-                        />
-                        <div class="space-y-0.5">
-                            <div
-                                class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Manual Review
-                            </div>
-                            <p
-                                class="text-[11px] text-slate-500 dark:text-gray-400"
-                            >
-                                New posts stay pending until approved by a
-                                moderator.
-                            </p>
-                        </div>
-                    </label>
-                </div>
-            </div>
-
-            <!-- 2. Availability Toggles -->
-            <div
-                class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <h2
-                    class="text-xs font-bold tracking-wider text-slate-900 uppercase dark:text-gray-100"
-                >
-                    Forum Availability
-                </h2>
-                <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                    Toggle community participation or post a temporary
-                    maintenance reason.
-                </p>
-
-                <div class="mt-4 space-y-3">
-                    <div
-                        class="flex items-center justify-between gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-3.5 dark:border-gray-800 dark:bg-gray-800/30"
-                    >
-                        <div>
-                            <span
-                                class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                >Allow New Questions</span
-                            >
-                            <p class="text-[11px] text-slate-400">
-                                Permit students to ask new questions.
-                            </p>
-                        </div>
-                        <input
-                            v-model="form.posting_enabled"
-                            type="checkbox"
-                            class="h-4.5 w-4.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
-                        />
-                    </div>
-
-                    <div
-                        class="flex items-center justify-between gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-3.5 dark:border-gray-800 dark:bg-gray-800/30"
-                    >
-                        <div>
-                            <span
-                                class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                >Allow Answers & Comments</span
-                            >
-                            <p class="text-[11px] text-slate-400">
-                                Permit replies and discussion solutions.
-                            </p>
-                        </div>
-                        <input
-                            v-model="form.comments_enabled"
-                            type="checkbox"
-                            class="h-4.5 w-4.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
-                        />
-                    </div>
-
-                    <div class="pt-1">
-                        <label
-                            class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
-                        >
-                            Pause Notice (Optional)
-                        </label>
-                        <input
-                            v-model="form.disabled_reason"
-                            type="text"
-                            placeholder="e.g. Discussions temporarily paused during maintenance."
-                            class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-900 transition outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <!-- 3. Moderation & Thresholds -->
-            <div
-                class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <h2
-                    class="text-xs font-bold tracking-wider text-slate-900 uppercase dark:text-gray-100"
-                >
-                    Auto-Moderation & Screening
-                </h2>
-                <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                    Automated triggers to unpublish reported content and screen
-                    keywords.
-                </p>
-
-                <div class="mt-4 space-y-3">
-                    <div
-                        class="flex items-center justify-between gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-3.5 dark:border-gray-800 dark:bg-gray-800/30"
-                    >
-                        <div>
-                            <span
-                                class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                >Auto-Unpublish Threshold</span
-                            >
-                            <p class="text-[11px] text-slate-400">
-                                Hide questions when reports reach this count (0
-                                to disable).
-                            </p>
-                        </div>
-                        <div class="flex items-center gap-1.5">
-                            <input
-                                v-model.number="form.auto_unpublish_threshold"
-                                type="number"
-                                min="0"
-                                max="50"
-                                required
-                                class="w-16 rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-center text-xs font-bold text-slate-900 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                            />
-                            <span class="text-xs text-slate-500">reports</span>
-                        </div>
-                    </div>
-
-                    <div
-                        class="flex items-center justify-between gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-3.5 dark:border-gray-800 dark:bg-gray-800/30"
-                    >
-                        <div>
-                            <span
-                                class="text-xs font-bold text-slate-800 dark:text-gray-200"
-                                >Profanity Filter</span
-                            >
-                            <p class="text-[11px] text-slate-400">
-                                Screen question and answer text against banned
-                                keywords.
-                            </p>
-                        </div>
-                        <input
-                            v-model="form.profanity_filter_enabled"
-                            type="checkbox"
-                            class="h-4.5 w-4.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
-                        />
-                    </div>
-
-                    <div class="pt-1">
-                        <label
-                            class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
-                        >
-                            Banned Keywords (Comma-separated)
-                        </label>
-                        <textarea
-                            v-model="form.banned_words"
-                            rows="2"
-                            placeholder="e.g. abusive_word, spam_link"
-                            class="w-full rounded-xl border border-slate-200 bg-white p-2.5 text-xs text-slate-900 transition outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                        ></textarea>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Save Action Button -->
-            <div class="flex justify-end pt-2">
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2 text-xs font-bold text-white shadow-xs transition hover:bg-indigo-700 disabled:opacity-50"
-                >
-                    <Loader2
-                        v-if="form.processing"
-                        class="h-3.5 w-3.5 animate-spin"
-                    />
-                    <Save v-else class="h-3.5 w-3.5" />
-                    <span>{{
-                        form.processing ? 'Saving...' : 'Save Settings'
-                    }}</span>
-                </button>
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/moderation/Resources.vue b/resources/js/pages/admin/moderation/Resources.vue
index 402e75b5..d9a61774 100644
--- a/resources/js/pages/admin/moderation/Resources.vue
+++ b/resources/js/pages/admin/moderation/Resources.vue
@@ -537,7 +537,7 @@ const handleReject = () => {
                 <Clock class="h-3.5 w-3.5" />
                 <span>Pending</span>
                 <span
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-full px-1.5 py-0.5 text-[10px] font-bold"
                     :class="[
                         filters.status === 'pending'
                             ? 'bg-amber-600 text-white'
@@ -561,7 +561,7 @@ const handleReject = () => {
                 <Check class="h-3.5 w-3.5" />
                 <span>Approved</span>
                 <span
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-full px-1.5 py-0.5 text-[10px] font-bold"
                     :class="[
                         filters.status === 'approved'
                             ? 'bg-emerald-700 text-white'
@@ -585,7 +585,7 @@ const handleReject = () => {
                 <X class="h-3.5 w-3.5" />
                 <span>Rejected</span>
                 <span
-                    class="py-0.2 rounded-full px-1.5 text-[10px] font-bold"
+                    class="rounded-full px-1.5 py-0.5 text-[10px] font-bold"
                     :class="[
                         filters.status === 'rejected'
                             ? 'bg-rose-700 text-white'
@@ -791,7 +791,7 @@ const handleReject = () => {
                                             req.action_type === 'update' &&
                                             getChangedFields(req).length > 0
                                         "
-                                        class="py-0.2 rounded bg-amber-100/80 px-1.5 text-[10px] font-bold text-amber-800 dark:bg-amber-900/40 dark:text-amber-300"
+                                        class="rounded bg-amber-100/80 px-1.5 py-0.5 text-[10px] font-bold text-amber-800 dark:bg-amber-900/40 dark:text-amber-300"
                                     >
                                         {{ getChangedFields(req).length }}
                                         changed
diff --git a/resources/js/pages/admin/users/CreateOrEdit.tsx b/resources/js/pages/admin/users/CreateOrEdit.tsx
new file mode 100644
index 00000000..fb1bf885
--- /dev/null
+++ b/resources/js/pages/admin/users/CreateOrEdit.tsx
@@ -0,0 +1,759 @@
+/**
+ * AdminUsersCreateOrEdit — TSX port of the former `CreateOrEdit.vue`.
+ *
+ * Same UI/behavior as the SFC: Inertia `useForm` (create POST vs edit
+ * PATCH), editor-permissions section, avatar file input wired via
+ * `handleAvatarSelect`. Resolved via the explicit dual-extension
+ * (`*.vue` + `*.tsx`) page resolver in `resources/js/app.ts`.
+ */
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { BadgeCheck, Loader2, Save, Sparkles, UserPlus } from 'lucide-vue-next';
+import { defineComponent, onUnmounted, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminInputClass,
+    adminNativePopupClass,
+    adminOptionClass,
+    adminPageClass,
+    adminPanelClass,
+    adminPrimaryBtnClass,
+    adminSecondaryBtnClass,
+    adminSectionTitleClass,
+    adminTextareaClass,
+} from '@/components/admin/ui';
+import { markAdminFormDirty } from '@/lib/adminFormGuard';
+
+interface Role {
+    id?: number;
+    name: string;
+}
+
+interface PermissionItem {
+    id?: number | string;
+    name: string;
+}
+
+interface User {
+    id: number;
+    name?: string | null;
+    username?: string | null;
+    email?: string | null;
+    is_verified?: boolean | null;
+    priority?: number | null;
+    image_url?: string | null;
+    about?: string | null;
+    title?: string | null;
+    institution?: string | null;
+    facebook?: string | null;
+    github?: string | null;
+    instagram?: string | null;
+    roles?: Role[];
+    permissions?: PermissionItem[];
+}
+
+export default defineComponent({
+    name: 'AdminUsersCreateOrEdit',
+    props: {
+        user: { type: Object as PropType<User | null>, default: undefined },
+        permissions: {
+            type: Array as PropType<PermissionItem[]>,
+            default: undefined,
+        },
+    },
+    setup(props) {
+        const availablePermissions = props.permissions ?? [];
+
+        const roles = [
+            { value: '', label: 'Student (No Role)' },
+            { value: 'admin', label: 'Admin' },
+            { value: 'editor', label: 'Editor' },
+        ];
+
+        const form = useForm({
+            _method: props.user ? 'PATCH' : 'POST',
+            name: props.user?.name || '',
+            username: props.user?.username || '',
+            email: props.user?.email || '',
+            is_verified: Boolean(props.user?.is_verified ?? false),
+            priority: props.user?.priority ?? 0,
+            role: props.user?.roles?.[0]?.name || '',
+            permissions: props.user?.permissions?.map((p) => p.name) || [
+                'view admin',
+            ],
+
+            file: null as File | null,
+            about: props.user?.about || '',
+            title: props.user?.title || '',
+            institution: props.user?.institution || '',
+            facebook: props.user?.facebook || '',
+            github: props.user?.github || '',
+            instagram: props.user?.instagram || '',
+        });
+
+        watch(
+            () => form.isDirty,
+            (v) => markAdminFormDirty(v),
+        );
+
+        onUnmounted(() => markAdminFormDirty(false));
+
+        watch(
+            () => form.role,
+            (newRole) => {
+                if (newRole !== 'editor') {
+                    form.permissions = [];
+                } else if (!form.permissions.includes('view admin')) {
+                    form.permissions.push('view admin');
+                }
+            },
+        );
+
+        const avatarPreview = ref<string | null>(null);
+
+        // Replacement selections revoke eagerly in `handleAvatarSelect`;
+        // this covers navigating away with a preview still active.
+        onUnmounted(() => {
+            if (avatarPreview.value) {
+                URL.revokeObjectURL(avatarPreview.value);
+                avatarPreview.value = null;
+            }
+        });
+
+        /** Selects the first avatar file and revokes any previous preview URL. */
+        const handleAvatarSelect = (event: Event) => {
+            const target = event.target as HTMLInputElement;
+
+            if (target.files && target.files[0]) {
+                form.file = target.files[0];
+
+                if (avatarPreview.value) {
+                    URL.revokeObjectURL(avatarPreview.value);
+                }
+
+                avatarPreview.value = URL.createObjectURL(target.files[0]);
+            }
+        };
+
+        /** Posts the user form, using its _method field for updates to an existing user. */
+        const submitForm = () => {
+            if (props.user) {
+                form.post(`/admin/users/${props.user.id}`, {
+                    preserveScroll: true,
+                });
+            } else {
+                form.post('/admin/users', {
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        const onSubmit = (e: Event) => {
+            e.preventDefault();
+            submitForm();
+        };
+
+        const onPermissionToggle = (
+            permissionName: string,
+            checked: boolean,
+        ) => {
+            if (checked) {
+                if (!form.permissions.includes(permissionName)) {
+                    form.permissions.push(permissionName);
+                }
+            } else {
+                form.permissions = form.permissions.filter(
+                    (p) => p !== permissionName,
+                );
+            }
+        };
+
+        const avatarSrc = () =>
+            avatarPreview.value || props.user?.image_url || null;
+
+        const avatarInitial = () =>
+            (props.user?.name || form.name || 'U').charAt(0).toUpperCase();
+
+        const labelClass =
+            'mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300';
+        const errorClass = 'mt-1 text-xs text-rose-600 dark:text-rose-400';
+        const hintClass = 'mt-1 text-[11px] text-slate-400 dark:text-gray-500';
+
+        const inputClass = (hasError: unknown) => [
+            adminInputClass,
+            hasError
+                ? '!border-rose-500 focus:!border-rose-500 focus:!ring-rose-500/30'
+                : '',
+        ];
+
+        const textareaClass = (hasError: unknown) => [
+            adminTextareaClass,
+            hasError
+                ? '!border-rose-500 focus:!border-rose-500 focus:!ring-rose-500/30'
+                : '',
+        ];
+
+        return () => (
+            <>
+                <Head
+                    title={
+                        props.user ? `Edit ${props.user.name}` : 'Create User'
+                    }
+                />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title={props.user ? 'Edit User' : 'Create User'}
+                        description={
+                            props.user
+                                ? 'Update team member details and system access.'
+                                : 'Add a new team member and assign their role.'
+                        }
+                    >
+                        {{
+                            actions: () => (
+                                <>
+                                    <Link
+                                        href="/admin/users"
+                                        class={adminSecondaryBtnClass}
+                                    >
+                                        Cancel
+                                    </Link>
+                                    <button
+                                        type="button"
+                                        onClick={submitForm}
+                                        disabled={form.processing}
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        {form.processing ? (
+                                            <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                                        ) : props.user ? (
+                                            <Save class="h-3.5 w-3.5" />
+                                        ) : (
+                                            <UserPlus class="h-3.5 w-3.5" />
+                                        )}
+                                        {form.processing
+                                            ? 'Saving...'
+                                            : props.user
+                                              ? 'Update User'
+                                              : 'Save User'}
+                                    </button>
+                                </>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    <form
+                        onSubmit={onSubmit}
+                        class={[adminPanelClass, 'mx-auto max-w-4xl space-y-8']}
+                    >
+                        {/* Account */}
+                        <div class="space-y-4">
+                            <h2 class={adminSectionTitleClass}>Account</h2>
+                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                                <div>
+                                    <label for="name" class={labelClass}>
+                                        Full Name
+                                    </label>
+                                    <input
+                                        value={form.name}
+                                        onInput={(e: Event) => {
+                                            form.name = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        type="text"
+                                        id="name"
+                                        placeholder="John Doe"
+                                        disabled={form.processing}
+                                        class={inputClass(form.errors.name)}
+                                    />
+                                    {form.errors.name && (
+                                        <p class={errorClass}>
+                                            {form.errors.name}
+                                        </p>
+                                    )}
+                                </div>
+
+                                <div>
+                                    <label for="username" class={labelClass}>
+                                        Username
+                                    </label>
+                                    <div class="relative">
+                                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-xs font-medium text-slate-400 dark:text-gray-500">
+                                            @
+                                        </span>
+                                        <input
+                                            value={form.username}
+                                            onInput={(e: Event) => {
+                                                form.username = (
+                                                    e.target as HTMLInputElement
+                                                ).value;
+                                            }}
+                                            type="text"
+                                            id="username"
+                                            placeholder="johndoe"
+                                            disabled={form.processing}
+                                            class={[
+                                                ...inputClass(
+                                                    form.errors.username,
+                                                ),
+                                                'pl-7',
+                                            ]}
+                                        />
+                                    </div>
+                                    {form.errors.username && (
+                                        <p class={errorClass}>
+                                            {form.errors.username}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div>
+                                <label for="email" class={labelClass}>
+                                    Email Address
+                                </label>
+                                <input
+                                    value={form.email}
+                                    onInput={(e: Event) => {
+                                        form.email = (
+                                            e.target as HTMLInputElement
+                                        ).value;
+                                    }}
+                                    type="email"
+                                    id="email"
+                                    placeholder="johndoe@example.com"
+                                    disabled={form.processing}
+                                    class={inputClass(form.errors.email)}
+                                />
+                                {form.errors.email && (
+                                    <p class={errorClass}>
+                                        {form.errors.email}
+                                    </p>
+                                )}
+                            </div>
+
+                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                                <div>
+                                    <label for="role" class={labelClass}>
+                                        System Role
+                                    </label>
+                                    <select
+                                        id="role"
+                                        value={form.role}
+                                        onChange={(e: Event) => {
+                                            form.role = (
+                                                e.target as HTMLSelectElement
+                                            ).value;
+                                        }}
+                                        disabled={form.processing}
+                                        class={[
+                                            ...inputClass(form.errors.role),
+                                            adminNativePopupClass,
+                                        ]}
+                                    >
+                                        {roles.map((role) => (
+                                            <option
+                                                key={role.value}
+                                                value={role.value}
+                                                class={adminOptionClass}
+                                            >
+                                                {role.label}
+                                            </option>
+                                        ))}
+                                    </select>
+                                    {form.errors.role && (
+                                        <p class={errorClass}>
+                                            {form.errors.role}
+                                        </p>
+                                    )}
+                                </div>
+
+                                <div>
+                                    <span class={labelClass}>
+                                        Verified Contributor
+                                    </span>
+                                    <div class="flex h-9 items-center gap-2">
+                                        <input
+                                            type="checkbox"
+                                            id="is_verified"
+                                            checked={form.is_verified}
+                                            onChange={(e: Event) => {
+                                                form.is_verified = (
+                                                    e.target as HTMLInputElement
+                                                ).checked;
+                                            }}
+                                            disabled={form.processing}
+                                            class="h-4 w-4 cursor-pointer rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 disabled:opacity-60 dark:border-gray-600 dark:bg-gray-900"
+                                        />
+                                        <label
+                                            for="is_verified"
+                                            class="flex cursor-pointer items-center gap-1.5 text-xs font-medium text-slate-700 select-none focus-visible:outline-2 focus-visible:outline-indigo-500 dark:text-gray-300"
+                                        >
+                                            <BadgeCheck class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400" />
+                                            Verified badge
+                                        </label>
+                                    </div>
+                                    <p class={hintClass}>
+                                        Shows verified badge in chat and
+                                        profile.
+                                    </p>
+                                    {form.errors.is_verified && (
+                                        <p class={errorClass}>
+                                            {form.errors.is_verified}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Feature & Suggestion Priority Option */}
+                        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                            <div class="flex items-start gap-3">
+                                <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400">
+                                    <Sparkles class="h-5 w-5" />
+                                </div>
+                                <div>
+                                    <label
+                                        for="priority"
+                                        class="text-sm font-semibold text-slate-900 select-none dark:text-gray-100"
+                                    >
+                                        Display & Suggestion Priority
+                                    </label>
+                                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                                        Determines placement in onboarding
+                                        appreciation suggestions and About Us
+                                        team listings. Higher numbers appear
+                                        first (default: 0).
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="w-full sm:w-28">
+                                <input
+                                    type="number"
+                                    id="priority"
+                                    value={form.priority}
+                                    onInput={(e: Event) => {
+                                        form.priority = Number(
+                                            (e.target as HTMLInputElement)
+                                                .value,
+                                        );
+                                    }}
+                                    min="0"
+                                    step="1"
+                                    placeholder="0"
+                                    disabled={form.processing}
+                                    class={inputClass(form.errors.priority)}
+                                />
+                            </div>
+                        </div>
+                        {form.errors.priority && (
+                            <p class={errorClass}>{form.errors.priority}</p>
+                        )}
+
+                        {/* Profile */}
+                        <div class="space-y-4">
+                            <h2 class={adminSectionTitleClass}>Profile</h2>
+
+                            <div class="flex items-start gap-3">
+                                <div class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-100 text-sm font-bold text-slate-500 dark:bg-gray-800 dark:text-gray-400">
+                                    {avatarSrc() ? (
+                                        <img
+                                            src={avatarSrc() as string}
+                                            alt="Avatar preview"
+                                            class="h-full w-full object-cover"
+                                        />
+                                    ) : (
+                                        <span>{avatarInitial()}</span>
+                                    )}
+                                </div>
+                                <div class="min-w-0 flex-1">
+                                    <label for="file" class={labelClass}>
+                                        Profile Image
+                                    </label>
+                                    <input
+                                        type="file"
+                                        id="file"
+                                        accept="image/*"
+                                        onChange={handleAvatarSelect}
+                                        disabled={form.processing}
+                                        class={[
+                                            'w-full cursor-pointer rounded-[10px] border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500 transition-colors outline-none file:mr-3 file:cursor-pointer file:rounded-lg file:border-0 file:bg-slate-100 file:px-2.5 file:py-1 file:text-xs file:font-semibold file:text-slate-700 hover:file:bg-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 disabled:bg-slate-50 disabled:text-slate-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:file:bg-gray-800 dark:file:text-gray-300 dark:hover:file:bg-gray-700 dark:focus:border-indigo-400 dark:disabled:bg-gray-800 dark:disabled:text-gray-400',
+                                            form.errors.file
+                                                ? 'border-rose-500'
+                                                : '',
+                                        ]}
+                                    />
+                                    <p class={hintClass}>
+                                        PNG or JPG, square works best.
+                                    </p>
+                                    {form.errors.file && (
+                                        <p class={errorClass}>
+                                            {form.errors.file}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                                <div>
+                                    <label for="title" class={labelClass}>
+                                        Title
+                                    </label>
+                                    <input
+                                        value={form.title}
+                                        onInput={(e: Event) => {
+                                            form.title = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        type="text"
+                                        id="title"
+                                        placeholder="e.g. Lead Developer, Professor"
+                                        disabled={form.processing}
+                                        class={inputClass(form.errors.title)}
+                                    />
+                                    {form.errors.title && (
+                                        <p class={errorClass}>
+                                            {form.errors.title}
+                                        </p>
+                                    )}
+                                </div>
+
+                                <div>
+                                    <label for="institution" class={labelClass}>
+                                        Institution
+                                    </label>
+                                    <input
+                                        value={form.institution}
+                                        onInput={(e: Event) => {
+                                            form.institution = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        type="text"
+                                        id="institution"
+                                        placeholder="University / Company"
+                                        disabled={form.processing}
+                                        class={inputClass(
+                                            form.errors.institution,
+                                        )}
+                                    />
+                                    {form.errors.institution && (
+                                        <p class={errorClass}>
+                                            {form.errors.institution}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                                <div>
+                                    <label for="facebook" class={labelClass}>
+                                        Facebook
+                                    </label>
+                                    <input
+                                        value={form.facebook}
+                                        onInput={(e: Event) => {
+                                            form.facebook = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        type="text"
+                                        id="facebook"
+                                        placeholder="Facebook profile URL"
+                                        disabled={form.processing}
+                                        class={inputClass(form.errors.facebook)}
+                                    />
+                                    {form.errors.facebook && (
+                                        <p class={errorClass}>
+                                            {form.errors.facebook}
+                                        </p>
+                                    )}
+                                </div>
+
+                                <div>
+                                    <label for="github" class={labelClass}>
+                                        GitHub
+                                    </label>
+                                    <input
+                                        value={form.github}
+                                        onInput={(e: Event) => {
+                                            form.github = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        type="text"
+                                        id="github"
+                                        placeholder="GitHub profile URL"
+                                        disabled={form.processing}
+                                        class={inputClass(form.errors.github)}
+                                    />
+                                    {form.errors.github && (
+                                        <p class={errorClass}>
+                                            {form.errors.github}
+                                        </p>
+                                    )}
+                                </div>
+
+                                <div>
+                                    <label for="instagram" class={labelClass}>
+                                        Instagram
+                                    </label>
+                                    <input
+                                        value={form.instagram}
+                                        onInput={(e: Event) => {
+                                            form.instagram = (
+                                                e.target as HTMLInputElement
+                                            ).value;
+                                        }}
+                                        type="text"
+                                        id="instagram"
+                                        placeholder="Instagram profile URL"
+                                        disabled={form.processing}
+                                        class={inputClass(
+                                            form.errors.instagram,
+                                        )}
+                                    />
+                                    {form.errors.instagram && (
+                                        <p class={errorClass}>
+                                            {form.errors.instagram}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div>
+                                <div class="mb-1 flex items-center justify-between">
+                                    <label
+                                        for="about"
+                                        class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                    >
+                                        About
+                                    </label>
+                                    <span class="text-[11px] text-slate-400 dark:text-gray-500">
+                                        {form.about?.length || 0}/255
+                                    </span>
+                                </div>
+                                <textarea
+                                    value={form.about}
+                                    onInput={(e: Event) => {
+                                        form.about = (
+                                            e.target as HTMLInputElement
+                                        ).value;
+                                    }}
+                                    id="about"
+                                    rows={4}
+                                    maxLength={255}
+                                    placeholder="Short bio..."
+                                    disabled={form.processing}
+                                    class={textareaClass(form.errors.about)}
+                                />
+                                {form.errors.about && (
+                                    <p class={errorClass}>
+                                        {form.errors.about}
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Permissions */}
+                        {form.role === 'editor' && (
+                            <div class="space-y-3">
+                                <div>
+                                    <h2 class={adminSectionTitleClass}>
+                                        Permissions
+                                    </h2>
+                                    <p class={hintClass}>
+                                        Select the features this editor is
+                                        authorized to modify.
+                                    </p>
+                                </div>
+
+                                <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                                    {availablePermissions.map((permission) => (
+                                        <label
+                                            key={permission.name}
+                                            for={`perm-${permission.name}`}
+                                            class="flex cursor-pointer items-center gap-2 text-xs font-medium text-slate-700 select-none focus-visible:outline-2 focus-visible:outline-indigo-500 dark:text-gray-300"
+                                        >
+                                            <input
+                                                type="checkbox"
+                                                id={`perm-${permission.name}`}
+                                                value={permission.name}
+                                                checked={form.permissions.includes(
+                                                    permission.name,
+                                                )}
+                                                onChange={(e: Event) => {
+                                                    onPermissionToggle(
+                                                        permission.name,
+                                                        (
+                                                            e.target as HTMLInputElement
+                                                        ).checked,
+                                                    );
+                                                }}
+                                                disabled={
+                                                    form.processing ||
+                                                    permission.name ===
+                                                        'view admin'
+                                                }
+                                                class="h-4 w-4 cursor-pointer rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-600 dark:bg-gray-900"
+                                            />
+                                            <span
+                                                class={[
+                                                    permission.name ===
+                                                    'view admin'
+                                                        ? 'text-slate-500 dark:text-gray-400'
+                                                        : '',
+                                                ]}
+                                            >
+                                                {permission.name}
+                                                {permission.name ===
+                                                    'view admin' && (
+                                                    <span class="text-[11px] font-normal text-slate-500 dark:text-gray-400">
+                                                        {' '}
+                                                        (Required)
+                                                    </span>
+                                                )}
+                                            </span>
+                                        </label>
+                                    ))}
+                                </div>
+                                {form.errors.permissions && (
+                                    <p class={errorClass}>
+                                        {form.errors.permissions}
+                                    </p>
+                                )}
+                            </div>
+                        )}
+
+                        {/* Role reference */}
+                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                            <div class="space-y-1 border-l-2 border-rose-500 pl-3">
+                                <div class="text-xs font-bold text-rose-700 dark:text-rose-400">
+                                    Admin
+                                </div>
+                                <div class="text-[11px] leading-relaxed text-slate-500 dark:text-gray-400">
+                                    Superuser control. Automatically has all
+                                    permissions system-wide.
+                                </div>
+                            </div>
+                            <div class="space-y-1 border-l-2 border-indigo-500 pl-3">
+                                <div class="text-xs font-bold text-indigo-700 dark:text-indigo-400">
+                                    Editor
+                                </div>
+                                <div class="text-[11px] leading-relaxed text-slate-500 dark:text-gray-400">
+                                    Customizable access. Permissions can be
+                                    checked explicitly above.
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/users/CreateOrEdit.vue b/resources/js/pages/admin/users/CreateOrEdit.vue
deleted file mode 100644
index ed7dc9ea..00000000
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ /dev/null
@@ -1,651 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { UserPlus, Loader2, Save, BadgeCheck, Sparkles } from 'lucide-vue-next';
-import { watch } from 'vue';
-
-const props = defineProps({
-    user: Object,
-    permissions: Array,
-});
-
-const availablePermissions = props.permissions;
-
-const roles = [
-    { value: '', label: 'Student (No Role)' },
-    { value: 'admin', label: 'Admin' },
-    { value: 'editor', label: 'Editor' },
-];
-
-const form = useForm({
-    _method: props.user ? 'PATCH' : 'POST',
-    name: props.user?.name || '',
-    username: props.user?.username || '',
-    email: props.user?.email || '',
-    is_verified: Boolean(props.user?.is_verified ?? false),
-    priority: props.user?.priority ?? 0,
-    role: props.user?.roles?.[0]?.name || '',
-    permissions: props.user?.permissions?.map((p) => p.name) || ['view admin'],
-
-    file: null,
-    about: props.user?.about || '',
-    title: props.user?.title || '',
-    institution: props.user?.institution || '',
-    facebook: props.user?.facebook || '',
-    github: props.user?.github || '',
-    instagram: props.user?.instagram || '',
-});
-
-watch(
-    () => form.role,
-    (newRole) => {
-        if (newRole !== 'editor') {
-            form.permissions = [];
-        } else if (!form.permissions.includes('view admin')) {
-            form.permissions.push('view admin');
-        }
-    },
-);
-
-const submitForm = () => {
-    if (props.user) {
-        form.post(`/admin/users/${props.user.id}`, {
-            preserveScroll: true,
-        });
-    } else {
-        form.post('/admin/users', {
-            preserveScroll: true,
-        });
-    }
-};
-</script>
-
-<template>
-    <Head :title="user ? `Edit ${user.name}` : 'Create User'" />
-
-    <div class="flex w-full flex-1 flex-col">
-        <div
-            class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-200 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
-        >
-            <div>
-                <h1
-                    class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                >
-                    {{ props.user ? 'Edit' : 'Create New' }} User
-                </h1>
-                <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
-                    {{
-                        props.user
-                            ? 'Update team member details and system access rules.'
-                            : 'Add a new team member and assign their system access role.'
-                    }}
-                </p>
-            </div>
-            <Link
-                href="/admin/users"
-                class="inline-flex items-center self-start rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-200 sm:self-center dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
-            >
-                &larr; Back
-            </Link>
-        </div>
-
-        <form @submit.prevent="submitForm" class="max-w-3xl space-y-6">
-            <!-- Base fields section (Name, Username, Email) -->
-            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-                <div>
-                    <label
-                        for="name"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Full Name</label
-                    >
-                    <input
-                        v-model="form.name"
-                        type="text"
-                        id="name"
-                        placeholder="John Doe"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.name
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.name"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.name }}
-                    </p>
-                </div>
-
-                <div>
-                    <label
-                        for="username"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Username</label
-                    >
-                    <div class="relative">
-                        <span
-                            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-sm font-medium text-slate-400 dark:text-gray-500"
-                            >@</span
-                        >
-                        <input
-                            v-model="form.username"
-                            type="text"
-                            id="username"
-                            placeholder="johndoe"
-                            :disabled="form.processing"
-                            class="w-full rounded-lg border bg-white py-2.5 pr-4 pl-8 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.username
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
-                        />
-                    </div>
-                    <p
-                        v-if="form.errors.username"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.username }}
-                    </p>
-                </div>
-
-                <div class="md:col-span-2">
-                    <label
-                        for="email"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Email Address</label
-                    >
-                    <input
-                        v-model="form.email"
-                        type="email"
-                        id="email"
-                        placeholder="johndoe@example.com"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.email
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.email"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.email }}
-                    </p>
-                </div>
-            </div>
-
-            <!-- Role Selection -->
-            <div>
-                <div>
-                    <label
-                        for="role"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >System Role</label
-                    >
-                    <select
-                        id="role"
-                        v-model="form.role"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.role
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    >
-                        <option
-                            v-for="role in roles"
-                            :key="role.value"
-                            :value="role.value"
-                        >
-                            {{ role.label }}
-                        </option>
-                    </select>
-                    <p
-                        v-if="form.errors.role"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.role }}
-                    </p>
-                </div>
-            </div>
-
-            <!-- Verified Contributor Option -->
-            <div
-                class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 transition dark:border-gray-800 dark:bg-gray-800/40"
-            >
-                <div class="flex items-start justify-between gap-4">
-                    <div class="flex items-start gap-3">
-                        <div
-                            class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400"
-                        >
-                            <BadgeCheck class="h-5 w-5" />
-                        </div>
-                        <div>
-                            <label
-                                for="is_verified"
-                                class="cursor-pointer text-sm font-semibold text-slate-900 select-none dark:text-gray-100"
-                            >
-                                Verified Contributor Badge
-                            </label>
-                            <p
-                                class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Controls verified status across the platform
-                                (user badges, chat access, and contributor
-                                recognition).
-                            </p>
-                        </div>
-                    </div>
-                    <label
-                        class="relative inline-flex shrink-0 cursor-pointer items-center"
-                    >
-                        <input
-                            type="checkbox"
-                            id="is_verified"
-                            v-model="form.is_verified"
-                            :disabled="form.processing"
-                            class="peer sr-only"
-                        />
-                        <div
-                            class="peer h-6 w-11 rounded-full bg-slate-200 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-500/20 peer-focus:outline-none dark:bg-gray-700 dark:peer-checked:bg-blue-600"
-                        ></div>
-                        <div
-                            class="absolute top-[2px] left-[2px] h-5 w-5 rounded-full bg-white transition-all peer-checked:translate-x-full dark:bg-gray-200"
-                        ></div>
-                    </label>
-                </div>
-                <p
-                    v-if="form.errors.is_verified"
-                    class="mt-2 text-sm text-rose-600"
-                >
-                    {{ form.errors.is_verified }}
-                </p>
-            </div>
-
-            <!-- Feature & Suggestion Priority Option -->
-            <div
-                class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 transition dark:border-gray-800 dark:bg-gray-800/40"
-            >
-                <div
-                    class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-                >
-                    <div class="flex items-start gap-3">
-                        <div
-                            class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400"
-                        >
-                            <Sparkles class="h-5 w-5" />
-                        </div>
-                        <div>
-                            <label
-                                for="priority"
-                                class="text-sm font-semibold text-slate-900 select-none dark:text-gray-100"
-                            >
-                                Display & Suggestion Priority
-                            </label>
-                            <p
-                                class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Determines placement in onboarding appreciation
-                                suggestions and About Us team listings. Higher
-                                numbers appear first (default: 0).
-                            </p>
-                        </div>
-                    </div>
-                    <div class="w-full sm:w-28">
-                        <input
-                            type="number"
-                            id="priority"
-                            v-model.number="form.priority"
-                            min="0"
-                            step="1"
-                            placeholder="0"
-                            :disabled="form.processing"
-                            class="w-full rounded-lg border bg-white px-3 py-2 text-sm text-slate-900 transition outline-none disabled:bg-slate-50 dark:bg-gray-900 dark:text-gray-100 dark:disabled:bg-gray-800"
-                            :class="
-                                form.errors.priority
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
-                        />
-                    </div>
-                </div>
-                <p
-                    v-if="form.errors.priority"
-                    class="mt-2 text-sm text-rose-600"
-                >
-                    {{ form.errors.priority }}
-                </p>
-            </div>
-
-            <!-- DYNAMIC EDITOR PERMISSIONS SECTION -->
-            <div
-                v-if="form.role === 'editor'"
-                class="animate-fadeIn space-y-3 rounded-xl border border-blue-200 bg-blue-50/30 p-5 transition-all dark:border-blue-500/30 dark:bg-blue-500/10"
-            >
-                <div>
-                    <h3
-                        class="text-sm font-semibold text-slate-900 dark:text-gray-100"
-                    >
-                        Editor Permissions
-                    </h3>
-                    <p class="text-xs text-slate-500 dark:text-gray-400">
-                        Select the features this editor is authorized to modify.
-                    </p>
-                </div>
-
-                <div
-                    class="grid grid-cols-1 gap-3 pt-2 sm:grid-cols-2 md:grid-cols-3"
-                >
-                    <div
-                        v-for="permission in availablePermissions"
-                        :key="permission.name"
-                        class="flex items-start gap-2.5 rounded-lg border border-gray-200 bg-white p-3 shadow-xs dark:border-gray-700 dark:bg-gray-900"
-                    >
-                        <input
-                            type="checkbox"
-                            :id="`perm-${permission.name}`"
-                            :value="permission.name"
-                            v-model="form.permissions"
-                            :disabled="
-                                form.processing ||
-                                permission.name === 'view admin'
-                            "
-                            class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-60 dark:border-gray-600"
-                        />
-                        <label
-                            :for="`perm-${permission.name}`"
-                            class="cursor-pointer text-xs font-medium text-slate-700 select-none disabled:cursor-not-allowed dark:text-gray-300"
-                            :class="{
-                                'text-slate-400 dark:text-gray-500':
-                                    permission.name === 'view admin',
-                            }"
-                        >
-                            {{ permission.name }}
-                            <span
-                                v-if="permission.name === 'view admin'"
-                                class="block text-[10px] font-normal text-slate-400 dark:text-gray-500"
-                                >(Required)</span
-                            >
-                        </label>
-                    </div>
-                </div>
-                <p
-                    v-if="form.errors.permissions"
-                    class="mt-1 text-sm text-rose-600"
-                >
-                    {{ form.errors.permissions }}
-                </p>
-            </div>
-
-            <!-- Profile Meta details section -->
-            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-                <div>
-                    <label
-                        for="file"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Profile Image</label
-                    >
-                    <input
-                        type="file"
-                        id="file"
-                        accept="image/*"
-                        @change="form.file = $event.target.files[0]"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-3 py-2 text-sm text-slate-500 transition outline-none file:mr-4 file:rounded-md file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-slate-700 file:transition hover:file:bg-slate-200 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-400 dark:file:bg-gray-800 dark:file:text-gray-300 dark:hover:file:bg-gray-700 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.file
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.file"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.file }}
-                    </p>
-                </div>
-
-                <div>
-                    <label
-                        for="title"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Title</label
-                    >
-                    <input
-                        v-model="form.title"
-                        type="text"
-                        id="title"
-                        placeholder="e.g. Lead Developer, Professor"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.title
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.title"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.title }}
-                    </p>
-                </div>
-            </div>
-
-            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-                <div>
-                    <label
-                        for="institution"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Institution</label
-                    >
-                    <input
-                        v-model="form.institution"
-                        type="text"
-                        id="institution"
-                        placeholder="University / Company"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.institution
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.institution"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.institution }}
-                    </p>
-                </div>
-
-                <div>
-                    <label
-                        for="facebook"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Facebook</label
-                    >
-                    <input
-                        v-model="form.facebook"
-                        type="text"
-                        id="facebook"
-                        placeholder="Facebook profile URL"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.facebook
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.facebook"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.facebook }}
-                    </p>
-                </div>
-            </div>
-
-            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-                <div>
-                    <label
-                        for="github"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >GitHub</label
-                    >
-                    <input
-                        v-model="form.github"
-                        type="text"
-                        id="github"
-                        placeholder="GitHub profile URL"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.github
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.github"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.github }}
-                    </p>
-                </div>
-
-                <div>
-                    <label
-                        for="instagram"
-                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >Instagram</label
-                    >
-                    <input
-                        v-model="form.instagram"
-                        type="text"
-                        id="instagram"
-                        placeholder="Instagram profile URL"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.instagram
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.instagram"
-                        class="mt-1 text-sm text-rose-600"
-                    >
-                        {{ form.errors.instagram }}
-                    </p>
-                </div>
-            </div>
-
-            <div>
-                <div class="mb-1.5 flex items-center justify-between">
-                    <label
-                        for="about"
-                        class="block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                        >About</label
-                    >
-                    <span class="text-xs text-slate-400 dark:text-gray-500">
-                        {{ form.about?.length || 0 }}/255
-                    </span>
-                </div>
-                <textarea
-                    v-model="form.about"
-                    id="about"
-                    rows="4"
-                    maxlength="255"
-                    placeholder="Short bio..."
-                    :disabled="form.processing"
-                    class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                    :class="
-                        form.errors.about
-                            ? 'border-rose-500 focus:ring-rose-500/20'
-                            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                    "
-                ></textarea>
-                <p v-if="form.errors.about" class="mt-1 text-sm text-rose-600">
-                    {{ form.errors.about }}
-                </p>
-            </div>
-
-            <!-- Role Permissions Reference Card -->
-            <div
-                class="space-y-3.5 rounded-xl border border-gray-300 bg-slate-50/50 p-4.5 dark:border-gray-600 dark:bg-gray-800/50"
-            >
-                <h4
-                    class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
-                >
-                    Role Permissions Reference
-                </h4>
-                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-                    <div class="space-y-1 border-l-2 border-red-500 pl-3">
-                        <div class="text-xs font-bold text-red-700">Admin</div>
-                        <div
-                            class="text-xs leading-relaxed text-slate-600 dark:text-gray-400"
-                        >
-                            Superuser control. Automatically has all permissions
-                            system-wide.
-                        </div>
-                    </div>
-                    <div class="space-y-1 border-l-2 border-purple-500 pl-3">
-                        <div class="text-xs font-bold text-purple-700">
-                            Editor
-                        </div>
-                        <div
-                            class="text-xs leading-relaxed text-slate-600 dark:text-gray-400"
-                        >
-                            Customizable access. Permissions can be
-                            checked/unchecked explicitly above.
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div
-                class="flex justify-end space-x-3 border-t border-gray-300 pt-6 dark:border-gray-600"
-            >
-                <Link
-                    href="/admin/users"
-                    class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                >
-                    Cancel
-                </Link>
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                >
-                    <Loader2
-                        v-if="form.processing"
-                        class="h-4 w-4 animate-spin"
-                    />
-                    <template v-else>
-                        <Save v-if="props.user" class="h-4 w-4" />
-                        <UserPlus v-else class="h-4 w-4" />
-                    </template>
-                    {{
-                        form.processing
-                            ? 'Saving...'
-                            : props.user
-                              ? 'Update User'
-                              : 'Save User'
-                    }}
-                </button>
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/users/Index.tsx b/resources/js/pages/admin/users/Index.tsx
new file mode 100644
index 00000000..daff03a8
--- /dev/null
+++ b/resources/js/pages/admin/users/Index.tsx
@@ -0,0 +1,288 @@
+/**
+ * AdminUsersIndex — TSX proof-of-concept for "TypeScript TypeScript" admin pages.
+ *
+ * Same UI/behavior as the former `Index.vue` (flat, decardified), rewritten as
+ * a `.tsx` `defineComponent` render function. Resolved via the explicit
+ * dual-extension (`*.vue` + `*.tsx`) page resolver in `resources/js/app.ts`.
+ */
+import { Head, Link, router } from '@inertiajs/vue3';
+import { Plus, Search, ShieldCheck, Users, X } from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    SegmentedTabs,
+    adminHoverListClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSearchInputClass,
+} from '@/components/admin/ui';
+import UserRow from '@/components/admin/UserRow.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import Pagination from '@/components/Pagination.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface AdminUser {
+    id: number;
+    name: string;
+    username: string;
+    email: string;
+    image_url?: string | null;
+    is_verified?: boolean | null;
+    banned_until?: string | null;
+    roles?: { id?: number; name: string }[];
+}
+
+interface PaginationLinkItem {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+interface PaginatedUsers {
+    data: AdminUser[];
+    total: number;
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    from: number | null;
+    to: number | null;
+    links: PaginationLinkItem[];
+}
+
+interface UsersFilters {
+    q?: string;
+    role?: string;
+}
+
+interface UsersCounts {
+    all?: number;
+    staff?: number;
+}
+
+export default defineComponent({
+    name: 'AdminUsersIndex',
+    props: {
+        users: { type: Object as PropType<PaginatedUsers>, required: true },
+        filters: { type: Object as PropType<UsersFilters>, default: undefined },
+        counts: { type: Object as PropType<UsersCounts>, default: undefined },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+
+        const selectedRole = ref(props.filters?.role || 'all');
+        const searchQuery = ref(
+            props.filters?.q ||
+                (typeof window !== 'undefined'
+                    ? new URLSearchParams(window.location.search).get('q') || ''
+                    : ''),
+        );
+
+        /**
+         * Optionally changes the role, then visits the user list with a trimmed
+         * search and any non-all role. Replaces history while preserving state
+         * and scroll; an omitted role keeps the current selection.
+         */
+        const applyFilters = (role?: string) => {
+            if (role !== undefined) {
+                selectedRole.value = role;
+            }
+
+            const params: Record<string, string> = {};
+
+            if (searchQuery.value.trim()) {
+                params.q = searchQuery.value.trim();
+            }
+
+            if (selectedRole.value && selectedRole.value !== 'all') {
+                params.role = selectedRole.value;
+            }
+
+            router.get('/admin/users', params, {
+                preserveState: true,
+                preserveScroll: true,
+                replace: true,
+            });
+        };
+
+        const handleSearch = () => {
+            applyFilters();
+        };
+
+        const clearSearch = () => {
+            searchQuery.value = '';
+            applyFilters();
+        };
+
+        const onSearchInput = (e: Event) => {
+            searchQuery.value = (e.target as HTMLInputElement).value;
+        };
+
+        const onSearchKeyup = (e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+                handleSearch();
+            }
+        };
+
+        // Derived (not a snapshot): `applyFilters` preserves this component
+        // while the server swaps `props.users`, so this must recompute.
+        const hasUsers = computed(
+            () => props.users.data && props.users.data.length > 0,
+        );
+
+        const tabOptions = computed(() => [
+            {
+                value: 'all',
+                label: 'All',
+                icon: Users,
+                badge: props.counts?.all,
+            },
+            {
+                value: 'staff',
+                label: 'Staff Only',
+                icon: ShieldCheck,
+                badge: props.counts?.staff,
+            },
+        ]);
+
+        return () => (
+            <>
+                <Head title="Manage Users" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Manage Users"
+                        count={
+                            props.users.total ?? props.users.data?.length ?? 0
+                        }
+                        description="Manage user accounts, roles, and access."
+                    >
+                        {{
+                            actions: () => (
+                                <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+                                    {/* Search Input Bar */}
+                                    <div class="relative w-full sm:w-64">
+                                        <input
+                                            value={searchQuery.value}
+                                            onInput={onSearchInput}
+                                            type="text"
+                                            placeholder="Search name, email, username..."
+                                            onKeyup={onSearchKeyup}
+                                            class={adminSearchInputClass}
+                                        />
+                                        <Search class="pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2 text-slate-400 dark:text-gray-500" />
+                                        {searchQuery.value && (
+                                            <button
+                                                onClick={clearSearch}
+                                                type="button"
+                                                class="absolute top-1/2 right-1.5 flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                                                title="Clear search"
+                                                aria-label="Clear search"
+                                            >
+                                                <X class="h-3.5 w-3.5" />
+                                            </button>
+                                        )}
+                                    </div>
+
+                                    {can('create users') && (
+                                        <Link
+                                            href="/admin/users/create"
+                                            class={[
+                                                adminPrimaryBtnClass,
+                                                'shrink-0 justify-center',
+                                            ]}
+                                        >
+                                            <Plus
+                                                class="h-3.5 w-3.5"
+                                                strokeWidth={2.2}
+                                            />
+                                            <span>Create User</span>
+                                        </Link>
+                                    )}
+                                </div>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Role Filter Tabs (All / Staff) */}
+                    <SegmentedTabs
+                        tabs={tabOptions.value}
+                        active={selectedRole.value}
+                        onSelect={(value: string) => applyFilters(value)}
+                    />
+
+                    {/* Users List */}
+                    <div class="flex flex-1 flex-col">
+                        {hasUsers.value ? (
+                            <div class={adminHoverListClass}>
+                                {props.users.data.map((user) => (
+                                    <UserRow key={user.id} user={user} />
+                                ))}
+                            </div>
+                        ) : searchQuery.value ? (
+                            <EmptyState
+                                icon={Search}
+                                variant="dashed"
+                                title="No users found"
+                                description={`"${searchQuery.value}" দিয়ে কোনো ইউজার পাওয়া যায়নি। অন্য কিছু লিখে সার্চ করুন।`}
+                            >
+                                {{
+                                    default: () => (
+                                        <button
+                                            type="button"
+                                            onClick={clearSearch}
+                                            class={adminPrimaryBtnClass}
+                                        >
+                                            <span>Clear Search</span>
+                                        </button>
+                                    ),
+                                }}
+                            </EmptyState>
+                        ) : selectedRole.value === 'staff' ? (
+                            <EmptyState
+                                icon={ShieldCheck}
+                                variant="dashed"
+                                title="No staff members found"
+                                description="Currently there are no users assigned to staff roles."
+                            >
+                                {{
+                                    default: () => (
+                                        <button
+                                            type="button"
+                                            onClick={() => applyFilters('all')}
+                                            class={adminPrimaryBtnClass}
+                                        >
+                                            <span>Show All Users</span>
+                                        </button>
+                                    ),
+                                }}
+                            </EmptyState>
+                        ) : (
+                            <EmptyState
+                                title="No users found"
+                                description="No registered users found in the system."
+                            />
+                        )}
+
+                        {/* Pagination Bar */}
+                        {props.users.links && props.users.links.length > 3 && (
+                            <div class="mt-6 border-t border-slate-200/60 pt-4 dark:border-slate-800/60">
+                                <Pagination
+                                    links={props.users.links}
+                                    from={props.users.from}
+                                    to={props.users.to}
+                                    total={props.users.total}
+                                    currentPage={props.users.current_page}
+                                    lastPage={props.users.last_page}
+                                    showSummary
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/users/Index.vue b/resources/js/pages/admin/users/Index.vue
deleted file mode 100644
index 8bcb6d1a..00000000
--- a/resources/js/pages/admin/users/Index.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, router } from '@inertiajs/vue3';
-import { Plus, Search, ShieldCheck, Users, X } from 'lucide-vue-next';
-import { ref } from 'vue';
-import UserRow from '@/components/admin/UserRow.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import Pagination from '@/components/Pagination.vue';
-import { usePermissions } from '@/lib/usePermissions';
-
-interface PaginationLink {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-interface PaginatedUsers {
-    data: any[];
-    total: number;
-    current_page: number;
-    last_page: number;
-    per_page: number;
-    from: number | null;
-    to: number | null;
-    links: PaginationLink[];
-}
-
-const props = defineProps<{
-    users: PaginatedUsers;
-    filters?: {
-        q?: string;
-        role?: string;
-    };
-    counts?: {
-        all?: number;
-        staff?: number;
-    };
-}>();
-
-const { can } = usePermissions();
-
-const selectedRole = ref(props.filters?.role || 'all');
-const searchQuery = ref(
-    props.filters?.q ||
-        (typeof window !== 'undefined'
-            ? new URLSearchParams(window.location.search).get('q') || ''
-            : ''),
-);
-
-const applyFilters = (role?: string) => {
-    if (role !== undefined) {
-        selectedRole.value = role;
-    }
-
-    const params: Record<string, string> = {};
-
-    if (searchQuery.value.trim()) {
-        params.q = searchQuery.value.trim();
-    }
-
-    if (selectedRole.value && selectedRole.value !== 'all') {
-        params.role = selectedRole.value;
-    }
-
-    router.get('/admin/users', params, {
-        preserveState: true,
-        preserveScroll: true,
-        replace: true,
-    });
-};
-
-const handleSearch = () => {
-    applyFilters();
-};
-
-const clearSearch = () => {
-    searchQuery.value = '';
-    applyFilters();
-};
-</script>
-
-<template>
-    <Head title="Manage Users" />
-
-    <div class="flex w-full flex-1 flex-col">
-        <!-- Page Header & Action Controls -->
-        <div
-            class="mb-4 flex shrink-0 flex-col gap-3 border-b border-slate-100 pb-3.5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-        >
-            <div
-                class="flex flex-wrap items-center justify-between gap-2.5 sm:justify-start"
-            >
-                <div class="flex items-center gap-2.5">
-                    <h3
-                        class="truncate text-base font-bold tracking-tight text-slate-900 dark:text-gray-100"
-                    >
-                        Manage Users
-                    </h3>
-
-                    <span
-                        class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-0.5 text-[11px] font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400"
-                    >
-                        {{ users.total ?? users.data?.length ?? 0 }}
-                    </span>
-                </div>
-
-                <!-- Role Filter Tabs (All / Staff) -->
-                <div
-                    class="inline-flex items-center rounded-xl border border-slate-200/80 bg-slate-100/80 p-1 dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <button
-                        type="button"
-                        @click="applyFilters('all')"
-                        class="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-semibold transition-all duration-150 active:scale-95"
-                        :class="
-                            selectedRole === 'all'
-                                ? 'bg-white text-slate-900 shadow-2xs dark:bg-gray-800 dark:text-gray-100'
-                                : 'text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-200'
-                        "
-                    >
-                        <Users class="h-3.5 w-3.5" />
-                        <span>All</span>
-                        <span
-                            v-if="counts?.all !== undefined"
-                            class="py-0.2 rounded-md px-1.5 text-[10px] font-bold"
-                            :class="
-                                selectedRole === 'all'
-                                    ? 'bg-slate-100 text-slate-700 dark:bg-gray-700 dark:text-gray-300'
-                                    : 'bg-slate-200/70 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
-                            "
-                        >
-                            {{ counts.all }}
-                        </span>
-                    </button>
-
-                    <button
-                        type="button"
-                        @click="applyFilters('staff')"
-                        class="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-semibold transition-all duration-150 active:scale-95"
-                        :class="
-                            selectedRole === 'staff'
-                                ? 'bg-white text-indigo-600 shadow-2xs dark:bg-gray-800 dark:text-indigo-400'
-                                : 'text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-200'
-                        "
-                    >
-                        <ShieldCheck class="h-3.5 w-3.5" />
-                        <span>Staff Only</span>
-                        <span
-                            v-if="counts?.staff !== undefined"
-                            class="py-0.2 rounded-md px-1.5 text-[10px] font-bold"
-                            :class="
-                                selectedRole === 'staff'
-                                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300'
-                                    : 'bg-slate-200/70 text-slate-600 dark:bg-gray-800 dark:text-gray-400'
-                            "
-                        >
-                            {{ counts.staff }}
-                        </span>
-                    </button>
-                </div>
-
-                <div v-if="can('create users')" class="sm:hidden">
-                    <Link
-                        href="/admin/users/create"
-                        class="inline-flex shrink-0 items-center gap-1 rounded-lg bg-indigo-600 px-2.5 py-1.5 text-xs font-semibold text-white shadow-2xs transition-colors duration-150 hover:bg-indigo-700 active:scale-95"
-                    >
-                        <Plus class="h-3.5 w-3.5" :stroke-width="2.2" />
-                        <span>Create</span>
-                    </Link>
-                </div>
-            </div>
-
-            <div class="flex items-center gap-2.5">
-                <!-- Search Input Bar -->
-                <div class="relative w-full sm:w-64">
-                    <input
-                        v-model="searchQuery"
-                        type="text"
-                        placeholder="Search name, email, username..."
-                        @keyup.enter="handleSearch"
-                        class="w-full appearance-none rounded-xl border border-slate-200 bg-slate-50 py-1.5 pr-8 pl-9 text-xs font-semibold text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-900"
-                    />
-                    <Search
-                        class="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-slate-400"
-                    />
-                    <button
-                        v-if="searchQuery"
-                        @click="clearSearch"
-                        type="button"
-                        class="absolute top-1/2 right-2 -translate-y-1/2 p-0.5 text-slate-400 transition hover:text-slate-600 dark:hover:text-gray-200"
-                        title="Clear search"
-                    >
-                        <X class="h-3.5 w-3.5" />
-                    </button>
-                </div>
-
-                <div v-if="can('create users')" class="hidden sm:block">
-                    <Link
-                        href="/admin/users/create"
-                        class="inline-flex shrink-0 items-center gap-1.5 rounded-xl bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-2xs transition-colors duration-150 hover:bg-indigo-700 active:scale-95"
-                    >
-                        <Plus class="h-3.5 w-3.5" :stroke-width="2.2" />
-                        <span>Create User</span>
-                    </Link>
-                </div>
-            </div>
-        </div>
-
-        <!-- Users List -->
-        <div class="flex flex-1 flex-col">
-            <div
-                v-if="users.data && users.data.length > 0"
-                class="flex flex-col gap-2.5 sm:gap-3"
-            >
-                <UserRow
-                    v-for="user in users.data"
-                    :key="user.id"
-                    :user="user"
-                />
-            </div>
-
-            <!-- Search Empty State -->
-            <EmptyState
-                v-else-if="searchQuery"
-                :icon="Search"
-                variant="dashed"
-                title="No users found"
-                :description="`&quot;${searchQuery}&quot; দিয়ে কোনো ইউজার পাওয়া যায়নি। অন্য কিছু লিখে সার্চ করুন।`"
-            >
-                <button
-                    type="button"
-                    @click="clearSearch"
-                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95"
-                >
-                    <span>Clear Search</span>
-                </button>
-            </EmptyState>
-
-            <!-- Staff Filter Empty State -->
-            <EmptyState
-                v-else-if="selectedRole === 'staff'"
-                :icon="ShieldCheck"
-                variant="dashed"
-                title="No staff members found"
-                description="Currently there are no users assigned to staff roles."
-            >
-                <button
-                    type="button"
-                    @click="applyFilters('all')"
-                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95"
-                >
-                    <span>Show All Users</span>
-                </button>
-            </EmptyState>
-
-            <!-- Global Empty State -->
-            <EmptyState
-                v-else
-                title="No users found"
-                description="No registered users found in the system."
-            />
-
-            <!-- Pagination Bar -->
-            <div
-                v-if="users.links && users.links.length > 3"
-                class="mt-6 border-t border-slate-100 pt-4 dark:border-gray-800"
-            >
-                <Pagination
-                    :links="users.links"
-                    :from="users.from"
-                    :to="users.to"
-                    :total="users.total"
-                    :current-page="users.current_page"
-                    :last-page="users.last_page"
-                    show-summary
-                />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 0e1b3c52..e2b918a1 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -85,6 +85,16 @@
     $pageComponent = $page['component'] ?? '';
     $props = $page['props'] ?? [];
 
+    // Inertia page entries are preloaded via @vite below. Admin pages are
+    // being migrated from `.vue` SFCs to `.tsx` (see the dual-extension
+    // resolver in `resources/js/app.ts`), so resolve whichever exists —
+    // hardcoding `.vue` 500s on migrated pages in production builds.
+    $pageEntry = "resources/js/pages/{$pageComponent}.vue";
+
+    if (!is_file(resource_path("js/pages/{$pageComponent}.vue"))) {
+        $pageEntry = "resources/js/pages/{$pageComponent}.tsx";
+    }
+
     $s3Url = rtrim(config('filesystems.disks.s3.url') ?: env('AWS_URL', 'https://cdn.hscstack.site'), '/');
     $defaultOgImage = $s3Url ? "{$s3Url}/images/og.png" : url('/images/og.png');
 
@@ -412,7 +422,7 @@
             </script>
         @endif
 
-        @vite(['resources/css/app.css', 'resources/js/app.ts', "resources/js/pages/{$page['component']}.vue"])
+        @vite(['resources/css/app.css', 'resources/js/app.ts', $pageEntry])
         <x-inertia::head>
             <title>{{ $metaTitle ?? config('app.name', 'HSCStack') }}</title>
         </x-inertia::head>