From 00cc0950c3a32a41d138859fedbe2efdba811d59 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                           |   16 +
 resources/js/components/admin/ui.tsx          |  328 +++++
 resources/js/layouts/AdminLayout.vue          |    8 +-
 resources/js/pages/admin/Blog.tsx             |  235 ++++
 resources/js/pages/admin/Blog.vue             |   68 -
 resources/js/pages/admin/BlogCreateOrEdit.tsx |  393 ++++++
 resources/js/pages/admin/BlogCreateOrEdit.vue |  242 ----
 resources/js/pages/admin/ChatSettings.tsx     | 1149 +++++++++++++++++
 resources/js/pages/admin/ChatSettings.vue     | 1069 ---------------
 resources/js/pages/admin/Dashboard.tsx        |  338 +++++
 resources/js/pages/admin/Dashboard.vue        |  393 ------
 resources/js/pages/admin/EmailSend.tsx        |  992 ++++++++++++++
 resources/js/pages/admin/EmailSend.vue        |  998 --------------
 resources/js/pages/admin/Index.tsx            |  274 ++++
 resources/js/pages/admin/Index.vue            |  154 ---
 resources/js/pages/admin/Node.tsx             |  449 +++++++
 resources/js/pages/admin/Node.vue             |  346 -----
 resources/js/pages/admin/NoticeEdit.tsx       |  467 +++++++
 resources/js/pages/admin/NoticeEdit.vue       |  376 ------
 resources/js/pages/admin/PeerSettings.vue     |    5 +-
 resources/js/pages/admin/Product.vue          |   39 +-
 .../js/pages/admin/ProductCreateOrEdit.vue    |   40 +-
 resources/js/pages/admin/Tickets.tsx          |  598 +++++++++
 resources/js/pages/admin/Tickets.vue          |  611 ---------
 resources/js/pages/admin/chat/Reports.tsx     |  411 ++++++
 resources/js/pages/admin/chat/Reports.vue     |  548 --------
 resources/js/pages/admin/forums/Index.tsx     |  527 ++++++++
 resources/js/pages/admin/forums/Index.vue     |  482 -------
 resources/js/pages/admin/forums/Reports.tsx   |  449 +++++++
 resources/js/pages/admin/forums/Reports.vue   |  474 -------
 resources/js/pages/admin/forums/Settings.tsx  |  422 ++++++
 resources/js/pages/admin/forums/Settings.vue  |  330 -----
 .../js/pages/admin/users/CreateOrEdit.tsx     |  708 ++++++++++
 .../js/pages/admin/users/CreateOrEdit.vue     |  607 ---------
 resources/js/pages/admin/users/Index.tsx      |  282 ++++
 resources/js/pages/admin/users/Index.vue      |  279 ----
 resources/views/app.blade.php                 |   12 +-
 37 files changed, 8106 insertions(+), 7013 deletions(-)
 create mode 100644 resources/js/components/admin/ui.tsx
 create mode 100644 resources/js/pages/admin/Blog.tsx
 delete mode 100644 resources/js/pages/admin/Blog.vue
 create mode 100644 resources/js/pages/admin/BlogCreateOrEdit.tsx
 delete mode 100644 resources/js/pages/admin/BlogCreateOrEdit.vue
 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/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..90c7cbb4 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -20,6 +20,22 @@ router.on('navigate', () => {
 
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
+    // Dual-extension page resolver: `.vue` SFCs first, `.tsx`
+    // `defineComponent` pages (e.g. admin TSX proof-of-concept) as fallback.
+    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/ui.tsx b/resources/js/components/admin/ui.tsx
new file mode 100644
index 00000000..ad02d12b
--- /dev/null
+++ b/resources/js/components/admin/ui.tsx
@@ -0,0 +1,328 @@
+/**
+ * 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 (spacing comes from here). */
+export const adminPageClass = 'space-y-6';
+
+/**
+ * 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-100 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800';
+
+export const adminPageTitleClass =
+    'truncate text-lg font-bold tracking-tight text-slate-900 dark:text-gray-100';
+
+export const adminPageDescriptionClass =
+    'mt-0.5 text-xs text-slate-500 dark:text-gray-400';
+
+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 dark:bg-amber-500/10 dark:text-amber-400'
+                : props.countTone === 'rose'
+                  ? 'bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400'
+                  : 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400';
+
+        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                                                             */
+/* ------------------------------------------------------------------ */
+
+/** Primary action (indigo). */
+export const adminPrimaryBtnClass =
+    'inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 text-xs font-semibold text-white transition 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 (bordered). */
+export const adminSecondaryBtnClass =
+    'inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800';
+
+/** 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. */
+export const adminSubNavClass =
+    'flex max-w-full items-center gap-1 overflow-x-auto';
+
+export function adminSubNavLinkClass(isActive: boolean): string[] {
+    return [
+        'flex shrink-0 cursor-pointer items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold transition focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95',
+        isActive
+            ? 'text-indigo-600 underline decoration-2 underline-offset-4 dark:text-indigo-400'
+            : 'text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-200',
+    ];
+}
+
+/** Count badge inside a sub-nav link. */
+export const adminSubNavBadgeClass =
+    'rounded-full bg-rose-500 px-1.5 py-0.5 text-[10px] leading-none font-bold text-white';
+
+/* ------------------------------------------------------------------ */
+/* Segmented filter tabs                                               */
+/* ------------------------------------------------------------------ */
+
+/** Pill container behind a segmented filter control. */
+export const adminSegmentedClass =
+    'inline-flex max-w-full flex-wrap items-center gap-0.5 self-start rounded-xl bg-slate-100 p-1 dark:bg-gray-800';
+
+/**
+ * One segmented tab. NOTE: the active state must contrast with the
+ * container in both themes — `dark:bg-gray-800` on a `dark:bg-gray-800`
+ * container is invisible, which is why this lives here instead of being
+ * re-declared per page.
+ */
+export const adminSegmentedActiveClass =
+    'bg-white text-slate-900 shadow-2xs ring-1 ring-slate-900/5 dark:bg-gray-700 dark:text-white dark:shadow-none dark:ring-0';
+
+export const adminSegmentedIdleClass =
+    'text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-200';
+
+export function adminSegmentedTabClass(isActive: boolean): string[] {
+    return [
+        'cursor-pointer rounded-lg px-2.5 py-1 text-xs font-semibold transition-all 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"
+                            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-slate-100 text-slate-700 dark:bg-gray-600 dark:text-gray-200'
+                                            : 'bg-slate-200/70 text-slate-600 dark:bg-gray-700 dark:text-gray-400',
+                                    ]}
+                                >
+                                    {tab.badge}
+                                </span>
+                            )}
+                        </button>
+                    );
+                })}
+            </div>
+        );
+    },
+});
+
+/* ------------------------------------------------------------------ */
+/* Native select (dark-safe)                                           */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Base classes for native `<select>` elements. `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-xl border border-slate-200 bg-white px-2.5 text-xs font-semibold text-slate-700 transition outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-400 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-100 dark:divide-gray-800';
+
+/**
+ * Spaced list container for rows with a hover fill. Never combine
+ * `divide-y` hairlines with rounded hover pills — the straight divider
+ * cutting across rounded corners is what produces the broken outline.
+ */
+export const adminHoverListClass = 'flex flex-col gap-1';
+
+/**
+ * Standard list row: horizontal padding + rounded corners so hover
+ * states don't bleed to the container edge (flush rows look broken).
+ */
+export const adminRowClass =
+    'flex items-center gap-3 rounded-xl px-3 py-2.5 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 dark:hover:bg-gray-800/50';
+
+/* ------------------------------------------------------------------ */
+/* Misc                                                                */
+/* ------------------------------------------------------------------ */
+
+/** Search input with leading icon slot space (pl-8). */
+export const adminSearchInputClass =
+    'h-9 w-full rounded-xl border border-slate-200 bg-white pr-3 pl-8 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-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400';
+
+/** Table head shared by admin data tables. */
+export const adminTableHeadClass =
+    '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';
+
+/**
+ * Scroll container boxing an admin data table: hairline border +
+ * rounded corners so the table reads as one unit instead of loose rows.
+ * Corner rounding on the edge cells (see th/td notes in forums/Index)
+ * keeps the header/row backgrounds inside the border radius.
+ */
+export const adminTableWrapClass =
+    'overflow-x-auto rounded-xl border border-slate-100 dark:border-gray-800';
diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index 996596a7..38560ce2 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -158,13 +158,9 @@ const closeMobileSidebar = () => {
 
                 <!-- Main Content Area -->
                 <main
-                    class="flex flex-1 flex-col overflow-x-hidden p-3.5 pb-[5.5rem] sm:p-6 md:pb-6 lg:p-8"
+                    class="mx-auto flex w-full max-w-7xl flex-1 flex-col overflow-x-hidden p-3.5 pb-[5.5rem] sm:p-6 md:pb-6 lg:p-8"
                 >
-                    <div
-                        class="flex w-full flex-1 flex-col rounded-xl 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"
-                    >
-                        <slot />
-                    </div>
+                    <slot />
                 </main>
             </div>
         </div>
diff --git a/resources/js/pages/admin/Blog.tsx b/resources/js/pages/admin/Blog.tsx
new file mode 100644
index 00000000..df7b7446
--- /dev/null
+++ b/resources/js/pages/admin/Blog.tsx
@@ -0,0 +1,235 @@
+import { Head, Link, router } from '@inertiajs/vue3';
+import { BookOpen, Eye, Pencil, Plus, Trash2 } from 'lucide-vue-next';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminDangerIconBtnClass,
+    adminHoverListClass,
+    adminIconBtnClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminRowClass,
+} from '@/components/admin/ui';
+import EmptyState from '@/components/EmptyState.vue';
+import StatusBadge from '@/components/StatusBadge.vue';
+import { formatDate } from '@/lib/useDate';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface Blog {
+    id: number;
+    slug: string;
+    title: string;
+    excerpt?: string | null;
+    content?: string | null;
+    featured_image?: string | null;
+    featured_image_path?: string | null;
+    is_published?: boolean;
+    is_featured?: boolean;
+    seo_tags?: string | null;
+    views?: number | null;
+    created_at?: string | null;
+}
+
+export default defineComponent({
+    name: 'AdminBlog',
+    props: {
+        blogs: { type: Array as PropType<Blog[]>, required: true },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+
+        const deleteBlog = (blog: Blog): void => {
+            if (confirm('Are you sure you want to delete this blog?')) {
+                router.delete(`/admin/blogs/${blog.slug}`, {
+                    preserveScroll: true,
+                });
+            }
+        };
+
+        const canEdit = (blog: Blog): boolean => {
+            void blog;
+
+            return can('edit blogs');
+        };
+
+        return () => (
+            <>
+                <Head title="Manage Blogs" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Manage Blogs"
+                        count={props.blogs.length}
+                        description="Publish articles, feature top stories, and keep content up to date."
+                    >
+                        {{
+                            actions: () =>
+                                can('create blogs') && (
+                                    <Link
+                                        href="/admin/blogs/create"
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        <Plus
+                                            class="h-3.5 w-3.5"
+                                            strokeWidth={2.2}
+                                        />
+                                        <span>New Post</span>
+                                    </Link>
+                                ),
+                        }}
+                    </AdminPageHeader>
+
+                    <div>
+                        {props.blogs.length > 0 ? (
+                            <div class={adminHoverListClass}>
+                                {props.blogs.map((blog) => (
+                                    <div
+                                        key={blog.id || blog.slug}
+                                        class={adminRowClass}
+                                    >
+                                        {/* Cover thumb */}
+                                        <Link
+                                            href={`/blogs/${blog.slug}`}
+                                            class="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-slate-100 dark:bg-gray-800"
+                                        >
+                                            {blog.featured_image ? (
+                                                <img
+                                                    src={blog.featured_image}
+                                                    alt={blog.title}
+                                                    class="h-full w-full object-cover"
+                                                />
+                                            ) : (
+                                                <BookOpen class="h-4 w-4 text-slate-400 dark:text-gray-500" />
+                                            )}
+                                        </Link>
+
+                                        {/* Title + excerpt + meta */}
+                                        <div class="min-w-0 flex-1">
+                                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+                                                <Link
+                                                    href={`/blogs/${blog.slug}`}
+                                                    class="max-w-full min-w-0 truncate text-sm font-semibold text-slate-900 hover:text-indigo-600 hover:underline dark:text-gray-100 dark:hover:text-indigo-400"
+                                                >
+                                                    {blog.title}
+                                                </Link>
+                                                <StatusBadge
+                                                    status={
+                                                        blog.is_published
+                                                            ? 'published'
+                                                            : 'draft'
+                                                    }
+                                                    size="xs"
+                                                    showIcon={false}
+                                                />
+                                                {blog.is_featured && (
+                                                    <StatusBadge
+                                                        status="featured"
+                                                        size="xs"
+                                                        showIcon={false}
+                                                    />
+                                                )}
+                                            </div>
+                                            {blog.excerpt && (
+                                                <p class="mt-0.5 line-clamp-1 text-xs text-slate-500 dark:text-gray-400">
+                                                    {blog.excerpt}
+                                                </p>
+                                            )}
+                                            <p class="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                                <span class="inline-flex items-center gap-1">
+                                                    <Eye class="h-3 w-3" />
+                                                    {blog.views || 0} views
+                                                </span>
+                                                {blog.created_at && (
+                                                    <>
+                                                        <span aria-hidden="true">
+                                                            ·
+                                                        </span>
+                                                        <span>
+                                                            {formatDate(
+                                                                blog.created_at,
+                                                            )}
+                                                        </span>
+                                                    </>
+                                                )}
+                                                <span
+                                                    aria-hidden="true"
+                                                    class="hidden sm:inline"
+                                                >
+                                                    ·
+                                                </span>
+                                                <span class="hidden truncate sm:inline">
+                                                    /blogs/{blog.slug}
+                                                </span>
+                                            </p>
+                                        </div>
+
+                                        {/* Status/date + ghost actions */}
+                                        <div class="flex shrink-0 items-center gap-0.5">
+                                            {canEdit(blog) && (
+                                                <Link
+                                                    href={`/admin/blogs/edit/${blog.slug}`}
+                                                    class={[
+                                                        adminIconBtnClass,
+                                                        'hover:text-indigo-600 dark:hover:text-indigo-400',
+                                                    ]}
+                                                    title="Edit blog"
+                                                    aria-label="Edit blog"
+                                                >
+                                                    <Pencil
+                                                        class="h-4 w-4"
+                                                        strokeWidth={1.8}
+                                                    />
+                                                </Link>
+                                            )}
+                                            {can('delete blogs') && (
+                                                <button
+                                                    type="button"
+                                                    onClick={() =>
+                                                        deleteBlog(blog)
+                                                    }
+                                                    class={
+                                                        adminDangerIconBtnClass
+                                                    }
+                                                    title="Delete blog"
+                                                    aria-label="Delete blog"
+                                                >
+                                                    <Trash2
+                                                        class="h-4 w-4"
+                                                        strokeWidth={1.8}
+                                                    />
+                                                </button>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <EmptyState
+                                icon={BookOpen}
+                                title="No blogs found"
+                                description="No blog posts have been published yet."
+                                showCta={false}
+                            >
+                                {{
+                                    default: () =>
+                                        can('create blogs') ? (
+                                            <Link
+                                                href="/admin/blogs/create"
+                                                class={adminPrimaryBtnClass}
+                                            >
+                                                <Plus class="h-3.5 w-3.5" />
+                                                <span>New Post</span>
+                                            </Link>
+                                        ) : null,
+                                }}
+                            </EmptyState>
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/Blog.vue b/resources/js/pages/admin/Blog.vue
deleted file mode 100644
index 780c5325..00000000
--- a/resources/js/pages/admin/Blog.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
-import { Plus } from 'lucide-vue-next';
-import BlogRow from '@/components/BlogRow.vue';
-import EmptyState from '@/components/EmptyState.vue';
-import { usePermissions } from '@/lib/usePermissions';
-
-const { can } = usePermissions();
-
-defineProps({
-    blogs: {
-        type: Array,
-        default: () => [],
-    },
-});
-</script>
-
-<template>
-    <Head title="Manage Blogs" />
-
-    <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 Blogs
-                </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"
-                >
-                    {{ blogs.length }}
-                </span>
-            </div>
-
-            <div v-if="can('create blogs')" class="flex items-center gap-2">
-                <Link
-                    href="/admin/blogs/create"
-                    class="inline-flex 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 Blog</span>
-                </Link>
-            </div>
-        </div>
-
-        <div class="flex flex-1 flex-col">
-            <div v-if="blogs.length > 0" class="flex flex-col gap-3">
-                <BlogRow
-                    v-for="blog in blogs"
-                    :key="blog.id || blog.slug"
-                    :blog="blog"
-                />
-            </div>
-
-            <EmptyState
-                v-else
-                title="No blogs found"
-                description="No blog posts have been published yet."
-                :show-cta="false"
-            />
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/BlogCreateOrEdit.tsx b/resources/js/pages/admin/BlogCreateOrEdit.tsx
new file mode 100644
index 00000000..ca8bb99e
--- /dev/null
+++ b/resources/js/pages/admin/BlogCreateOrEdit.tsx
@@ -0,0 +1,393 @@
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Loader2, Save, Trash2, Upload } from 'lucide-vue-next';
+import { defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminListClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+import HTMLEditor from '@/components/HTMLEditor.vue';
+
+interface Blog {
+    id?: number;
+    slug: string;
+    title?: string | null;
+    content?: string | null;
+    featured_image?: string | null;
+    is_published?: boolean;
+    is_featured?: boolean;
+    seo_tags?: string | null;
+}
+
+export default defineComponent({
+    name: 'AdminBlogCreateOrEdit',
+    props: {
+        blog: {
+            type: Object as PropType<Blog | null>,
+            default: null,
+        },
+    },
+    setup(props) {
+        const form = useForm({
+            title: props.blog?.title || '',
+            content: props.blog?.content || '',
+            featured_image: null as File | null,
+            is_published: props.blog?.is_published ?? true,
+            is_featured: props.blog?.is_featured ?? false,
+            seo_tags: props.blog?.seo_tags || '',
+        });
+
+        const coverPreview = ref<string | null>(
+            props.blog?.featured_image ?? null,
+        );
+
+        const fileInput = ref<HTMLInputElement | null>(null);
+
+        const handleFileSelect = (event: Event) => {
+            const target = event.target as HTMLInputElement;
+
+            if (target.files && target.files[0]) {
+                const file = target.files[0];
+                form.featured_image = file;
+                coverPreview.value = URL.createObjectURL(file);
+            }
+        };
+
+        const handleRemoveCover = (): void => {
+            form.featured_image = null;
+            coverPreview.value = null;
+
+            if (fileInput.value) {
+                fileInput.value.value = '';
+            }
+        };
+
+        const submitForm = (e: Event) => {
+            e.preventDefault();
+
+            if (props.blog) {
+                form.post(`/admin/blogs/edit/${props.blog.slug}/patch`, {
+                    preserveScroll: true,
+                    forceFormData: true,
+                });
+            } else {
+                form.post('/admin/blogs', {
+                    preserveScroll: true,
+                    forceFormData: true,
+                });
+            }
+        };
+
+        const onTitleInput = (e: Event) => {
+            form.title = (e.target as HTMLInputElement).value;
+        };
+
+        const onSeoTagsInput = (e: Event) => {
+            form.seo_tags = (e.target as HTMLInputElement).value;
+        };
+
+        const onIsPublishedChange = (e: Event) => {
+            form.is_published = (e.target as HTMLInputElement).checked;
+        };
+
+        const onIsFeaturedChange = (e: Event) => {
+            form.is_featured = (e.target as HTMLInputElement).checked;
+        };
+
+        const onContentUpdate = (val: string) => {
+            form.content = val;
+        };
+
+        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 Blog</span>
+                </>
+            );
+
+        return () => (
+            <>
+                <Head
+                    title={
+                        props.blog
+                            ? `Edit ${props.blog.title}`
+                            : 'Write Blog Post'
+                    }
+                />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title={`${props.blog ? 'Edit' : 'Create'} Blog Post`}
+                        description="Write and publish articles for your readers."
+                    >
+                        {{
+                            actions: () => (
+                                <>
+                                    <Link
+                                        href="/admin/blogs"
+                                        class={adminSecondaryBtnClass}
+                                    >
+                                        Cancel
+                                    </Link>
+                                    <button
+                                        type="button"
+                                        onClick={submitForm}
+                                        disabled={form.processing}
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        {saveButtonContent()}
+                                    </button>
+                                </>
+                            ),
+                        }}
+                    </AdminPageHeader>
+
+                    <form onSubmit={submitForm} class="max-w-3xl space-y-5">
+                        {/* Title */}
+                        <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="e.g. 10 Tips for Cracking BUET"
+                                class={[
+                                    'h-9 w-full rounded-xl border bg-white px-3 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400',
+                                    form.errors.title
+                                        ? 'border-rose-300 focus:border-rose-500 dark:border-rose-500/40'
+                                        : 'border-slate-200 dark:border-gray-700',
+                                ]}
+                            />
+                            <p class="mt-1 text-[11px] text-slate-400 dark:text-gray-500">
+                                {props.blog?.slug
+                                    ? `/blogs/${props.blog.slug}`
+                                    : 'URL slug is generated automatically from the title.'}
+                            </p>
+                            {form.errors.title && (
+                                <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                    {form.errors.title}
+                                </p>
+                            )}
+                        </div>
+
+                        {/* Cover */}
+                        <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="featured_image_upload"
+                                class="peer sr-only"
+                                accept="image/*"
+                                onChange={handleFileSelect}
+                            />
+                            {coverPreview.value ? (
+                                <div class="flex items-center gap-3">
+                                    <img
+                                        src={coverPreview.value}
+                                        alt="Cover 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.featured_image?.name ??
+                                                'Current cover image'}
+                                        </p>
+                                        <p class="mt-0.5 text-[11px] text-slate-400 dark:text-gray-500">
+                                            PNG, JPG or WEBP
+                                        </p>
+                                    </div>
+                                    <div class="flex shrink-0 items-center gap-1.5">
+                                        <label
+                                            for="featured_image_upload"
+                                            class="inline-flex h-8 shrink-0 cursor-pointer items-center rounded-xl border border-slate-200 bg-white px-2.5 text-[11px] font-semibold text-slate-600 transition peer-focus-visible:outline-2 peer-focus-visible:outline-indigo-500 hover:bg-slate-50 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+                                        >
+                                            Change
+                                        </label>
+                                        <button
+                                            type="button"
+                                            onClick={handleRemoveCover}
+                                            class="inline-flex h-8 cursor-pointer items-center gap-1 rounded-xl px-2.5 text-[11px] font-semibold text-rose-600 transition hover:bg-rose-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-rose-400 dark:hover:bg-rose-500/10"
+                                        >
+                                            <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.featured_image
+                                            ? 'border-rose-300 dark:border-rose-500/40'
+                                            : 'border-slate-200 dark:border-gray-700',
+                                    ]}
+                                >
+                                    <label
+                                        for="featured_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-400 dark:text-gray-500">
+                                            PNG, JPG or WEBP
+                                        </span>
+                                    </label>
+                                </div>
+                            )}
+                            {form.errors.featured_image && (
+                                <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                    {form.errors.featured_image}
+                                </p>
+                            )}
+                        </div>
+
+                        {/* Content */}
+                        <div>
+                            <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                Content
+                            </label>
+                            <HTMLEditor
+                                modelValue={form.content}
+                                onUpdate:modelValue={onContentUpdate}
+                                error={form.errors.content}
+                                placeholder="Write your article content here..."
+                            />
+                            {form.errors.content && (
+                                <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                    {form.errors.content}
+                                </p>
+                            )}
+                        </div>
+
+                        {/* SEO tags */}
+                        <div>
+                            <label
+                                for="seo_tags"
+                                class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                            >
+                                SEO tags
+                            </label>
+                            <input
+                                value={form.seo_tags}
+                                onInput={onSeoTagsInput}
+                                type="text"
+                                id="seo_tags"
+                                placeholder="e.g. admission, news, tips"
+                                class={[
+                                    'h-9 w-full rounded-xl border bg-white px-3 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400',
+                                    form.errors.seo_tags
+                                        ? 'border-rose-300 focus:border-rose-500 dark:border-rose-500/40'
+                                        : 'border-slate-200 dark:border-gray-700',
+                                ]}
+                            />
+                            <p class="mt-1 text-[11px] text-slate-400 dark:text-gray-500">
+                                Comma-separated keywords to help readers find
+                                this post.
+                            </p>
+                            {form.errors.seo_tags && (
+                                <p class="mt-1 text-xs text-rose-600 dark:text-rose-400">
+                                    {form.errors.seo_tags}
+                                </p>
+                            )}
+                        </div>
+
+                        {/* Publish */}
+                        <section class="space-y-3 border-t border-slate-100 pt-5 dark:border-gray-800">
+                            <div>
+                                <h2 class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                    Publish
+                                </h2>
+                                <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                    Control visibility and featuring for this
+                                    post.
+                                </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">
+                                            Publish immediately
+                                        </p>
+                                        <p class="mt-0.5 text-[11px] text-slate-400 dark:text-gray-500">
+                                            Make this post visible right away.
+                                        </p>
+                                    </div>
+                                    <input
+                                        checked={form.is_published}
+                                        onChange={onIsPublishedChange}
+                                        type="checkbox"
+                                        aria-label="Publish immediately"
+                                        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">
+                                            Feature post
+                                        </p>
+                                        <p class="mt-0.5 text-[11px] text-slate-400 dark:text-gray-500">
+                                            Pin to the top of the blog home
+                                            screen.
+                                        </p>
+                                    </div>
+                                    <input
+                                        checked={form.is_featured}
+                                        onChange={onIsFeaturedChange}
+                                        type="checkbox"
+                                        aria-label="Feature post"
+                                        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>
+                        </section>
+
+                        <div class="flex flex-col gap-2 border-t border-slate-100 pt-4 sm:flex-row sm:justify-end dark:border-gray-800">
+                            <Link
+                                href="/admin/blogs"
+                                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',
+                                ]}
+                            >
+                                {saveButtonContent()}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/BlogCreateOrEdit.vue b/resources/js/pages/admin/BlogCreateOrEdit.vue
deleted file mode 100644
index 109a3383..00000000
--- a/resources/js/pages/admin/BlogCreateOrEdit.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { Upload } from 'lucide-vue-next';
-import HTMLEditor from '@/components/HTMLEditor.vue';
-
-const props = defineProps({
-    blog: {
-        type: Object,
-        default: null,
-    },
-});
-
-const form = useForm({
-    title: props.blog?.title || '',
-    content: props.blog?.content || '',
-    featured_image: null,
-    is_published: props.blog?.is_published ?? true,
-    is_featured: props.blog?.is_featured ?? false,
-    seo_tags: props.blog?.seo_tags || '',
-});
-
-const handleFileSelect = (event: any) => {
-    form.featured_image = event.target.files[0];
-};
-
-const submitForm = () => {
-    if (props.blog) {
-        form.post(`/admin/blogs/edit/${props.blog.slug}/patch`, {
-            preserveScroll: true,
-            forceFormData: true,
-        });
-    } else {
-        form.post('/admin/blogs', {
-            preserveScroll: true,
-            forceFormData: true,
-        });
-    }
-};
-</script>
-
-<template>
-    <Head :title="blog ? `Edit ${blog.title}` : 'Write Blog Post'" />
-
-    <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.blog ? 'Edit' : 'Create' }} Blog Post
-                </h1>
-                <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
-                    Compose and manage article content for your web application
-                    audience.
-                </p>
-            </div>
-        </div>
-
-        <form @submit.prevent="submitForm" class="space-y-6">
-            <div>
-                <label
-                    for="title"
-                    class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                    >Blog Title</label
-                >
-                <input
-                    v-model="form.title"
-                    type="text"
-                    id="title"
-                    placeholder="e.g. 10 Tips for Cracking BUET"
-                    class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
-                    :class="
-                        form.errors.title
-                            ? 'border-rose-500 focus:ring-rose-500/20'
-                            : 'border-slate-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>
-                <label
-                    class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                    >Featured Image</label
-                >
-                <div
-                    class="rounded-xl border-2 border-dashed bg-slate-50/50 p-6 text-center transition dark:bg-gray-800/50"
-                    :class="
-                        form.errors.featured_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'
-                    "
-                >
-                    <input
-                        type="file"
-                        id="featured_image_upload"
-                        class="hidden"
-                        accept="image/*"
-                        @change="handleFileSelect"
-                    />
-                    <label
-                        for="featured_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 break-all text-blue-700 dark:text-blue-400"
-                        >
-                            {{
-                                form.featured_image?.name ||
-                                'Click to upload or drag & drop image'
-                            }}
-                        </span>
-                        <span
-                            class="mt-1 text-xs text-slate-400 dark:text-gray-500"
-                        >
-                            Supports PNG, JPG or WEBP
-                        </span>
-                    </label>
-                </div>
-                <p
-                    v-if="form.errors.featured_image"
-                    class="mt-1 text-sm text-rose-600"
-                >
-                    {{ form.errors.featured_image }}
-                </p>
-            </div>
-
-            <div>
-                <label
-                    for="seo_tags"
-                    class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                    >SEO Tags (Comma separated)</label
-                >
-                <input
-                    v-model="form.seo_tags"
-                    type="text"
-                    id="seo_tags"
-                    placeholder="e.g. admission, news, tips"
-                    class="w-full rounded-lg border bg-white px-4 py-2.5 text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
-                    :class="
-                        form.errors.seo_tags
-                            ? 'border-rose-500 focus:ring-rose-500/20'
-                            : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                    "
-                />
-                <p
-                    v-if="form.errors.seo_tags"
-                    class="mt-1 text-sm text-rose-600"
-                >
-                    {{ form.errors.seo_tags }}
-                </p>
-            </div>
-
-            <div
-                class="flex flex-wrap gap-6 rounded-xl border border-slate-100 bg-slate-50/50 p-4 dark:border-gray-800 dark:bg-gray-800/50"
-            >
-                <label class="flex cursor-pointer items-center gap-2.5">
-                    <input
-                        v-model="form.is_published"
-                        type="checkbox"
-                        class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20 dark:border-gray-600"
-                    />
-                    <div>
-                        <span
-                            class="block text-xs font-bold text-slate-700 uppercase dark:text-gray-300"
-                            >Publish immediately</span
-                        >
-                        <span
-                            class="text-[11px] text-slate-500 dark:text-gray-400"
-                            >Make this blog post visible right away.</span
-                        >
-                    </div>
-                </label>
-
-                <label class="flex cursor-pointer items-center gap-2.5">
-                    <input
-                        v-model="form.is_featured"
-                        type="checkbox"
-                        class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20 dark:border-gray-600"
-                    />
-                    <div>
-                        <span
-                            class="block text-xs font-bold text-slate-700 uppercase dark:text-gray-300"
-                            >Feature Post</span
-                        >
-                        <span
-                            class="text-[11px] text-slate-500 dark:text-gray-400"
-                            >Pin to the top of your blog home screen.</span
-                        >
-                    </div>
-                </label>
-            </div>
-
-            <div>
-                <label
-                    class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
-                    >Blog Content</label
-                >
-
-                <HTMLEditor
-                    v-model="form.content"
-                    :error="form.errors.content"
-                    placeholder="Write your article content here..."
-                />
-
-                <p
-                    v-if="form.errors.content"
-                    class="mt-1 text-sm text-rose-600"
-                >
-                    {{ form.errors.content }}
-                </p>
-            </div>
-
-            <div
-                class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
-            >
-                <Link
-                    href="/admin/blogs"
-                    class="rounded-lg border border-slate-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="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"
-                >
-                    {{ form.processing ? 'Saving...' : 'Save Blog' }}
-                </button>
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/resources/js/pages/admin/ChatSettings.tsx b/resources/js/pages/admin/ChatSettings.tsx
new file mode 100644
index 00000000..80ff071b
--- /dev/null
+++ b/resources/js/pages/admin/ChatSettings.tsx
@@ -0,0 +1,1149 @@
+/**
+ * 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, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminListClass,
+    adminPageClass,
+    adminSegmentedActiveClass,
+    adminSegmentedIdleClass,
+    adminSubNavBadgeClass,
+    adminSubNavClass,
+    adminSubNavLinkClass,
+} from '@/components/admin/ui';
+
+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,
+        });
+
+        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)',
+            },
+        ];
+
+        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-full border border-indigo-500 bg-indigo-50 px-3 text-[11px] font-bold text-indigo-700 transition focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
+                : 'inline-flex h-8 cursor-pointer items-center rounded-full border border-slate-200 bg-white px-3 text-[11px] font-semibold text-slate-600 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700';
+
+        const customNumberInputClass =
+            'h-9 w-24 rounded-xl border border-slate-200 bg-white px-3 text-xs font-bold text-slate-800 transition [appearance:textfield] focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 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-xl px-3 py-1.5 text-xs font-bold',
+                                        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>
+                        <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="space-y-8"
+                    >
+                        {/* Group 1 — Access */}
+                        <section aria-label="Access">
+                            <h2 class="flex items-center gap-2 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                <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 items-center gap-0.5 rounded-xl bg-slate-100 p-1 dark:bg-gray-800"
+                            >
+                                {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 h-9 cursor-pointer items-center justify-center rounded-lg px-2 text-center text-[11px] leading-tight font-bold transition focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 sm:text-xs',
+                                                isActive
+                                                    ? isDisabledOption
+                                                        ? 'bg-white text-rose-600 shadow-2xs ring-1 ring-slate-900/5 dark:bg-gray-700 dark:text-rose-300 dark:shadow-none dark:ring-0'
+                                                        : 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-100 pt-3 dark:border-gray-800">
+                                    <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-xl border border-rose-200 bg-white px-3.5 py-2 text-xs text-slate-800 transition 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>
+                            )}
+                        </section>
+
+                        {/* Group 2 — Limits & Safety */}
+                        <section aria-label="Limits and safety">
+                            <h2 class="flex items-center gap-2 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                <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-bold 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-bold 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-bold 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-bold 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"
+                                            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-xl border border-slate-200 bg-white p-3 font-mono text-xs text-slate-800 transition focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 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-bold 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"
+                                            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-bold 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-xl border border-slate-200 px-3 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 active:scale-95 max-sm:w-full dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                                        >
+                                            <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-xl border border-slate-200 bg-white px-3.5 text-xs text-slate-800 transition focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400"
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => addEmoji()}
+                                            class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-50 px-3.5 text-xs font-bold text-indigo-700 transition hover:bg-indigo-100 focus-visible:outline-2 focus-visible:outline-indigo-500 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 */}
+                                    <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="flex items-center gap-2 text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                <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-bold 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-xl border border-slate-200 bg-white py-2 pr-3 pl-8 text-xs font-bold text-slate-800 transition focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 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-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-xl border border-rose-300 bg-rose-50 px-3.5 text-xs font-bold text-rose-700 transition hover:bg-rose-100 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 max-sm:w-full dark:border-rose-800 dark:bg-rose-950/50 dark:text-rose-300 dark:hover:bg-rose-950"
+                                    >
+                                        <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-100 pt-4 sm:flex-row sm:items-center dark:border-gray-800">
+                            <button
+                                type="submit"
+                                disabled={form.processing}
+                                class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-xs font-bold text-white transition 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..052d616e
--- /dev/null
+++ b/resources/js/pages/admin/Dashboard.tsx
@@ -0,0 +1,338 @@
+/**
+ * AdminDashboard — TSX port of the former `Dashboard.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 } from '@inertiajs/vue3';
+import {
+    ArrowRight,
+    BarChart3,
+    BookOpen,
+    RefreshCw,
+    Share2,
+} from 'lucide-vue-next';
+import { defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    adminPageClass,
+    adminPageDescriptionClass,
+    adminPageTitleClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+import EmptyState from '@/components/EmptyState.vue';
+
+interface AnalyticsSource {
+    source: string;
+    visits: number;
+}
+
+interface DashboardAnalytics {
+    total_accounts?: number;
+    realtime_users?: number;
+    total_visits?: number;
+    total_users?: number;
+    top_sources?: AnalyticsSource[];
+}
+
+export default defineComponent({
+    name: 'AdminDashboard',
+    props: {
+        totalAccounts: { type: Number as PropType<number>, default: undefined },
+    },
+    setup(props) {
+        const stats = ref<DashboardAnalytics | null>(null);
+        const isLoading = ref<boolean>(false);
+        const hasFetched = ref<boolean>(false);
+        const errorMsg = ref<string | null>(null);
+
+        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 ডাটা লোড করা যায়নি');
+                }
+
+                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;
+                } else {
+                    errorMsg.value = 'Analytics লোড করতে সমস্যা হয়েছে';
+                }
+            } finally {
+                isLoading.value = false;
+            }
+        };
+
+        return () => {
+            const totalAccounts =
+                stats.value?.total_accounts ?? props.totalAccounts ?? 0;
+            const topVisits = stats.value?.top_sources?.[0]?.visits ?? 0;
+
+            return (
+                <>
+                    <Head title="Staff Panel" />
+
+                    <div class={adminPageClass}>
+                        {/* Page Header — no rule; the KPI strip below carries the separator */}
+                        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                            <div>
+                                <h1 class={adminPageTitleClass}>Dashboard</h1>
+                                <p class={adminPageDescriptionClass}>
+                                    অ্যাডমিন ওয়ার্কস্পেসের সামগ্রিক তথ্য ও
+                                    অ্যানালিটিক্স।
+                                </p>
+                            </div>
+
+                            {/* On-Demand Load / Reload Button */}
+                            <button
+                                type="button"
+                                onClick={() => fetchAnalytics(hasFetched.value)}
+                                disabled={isLoading.value}
+                                class={[
+                                    adminSecondaryBtnClass,
+                                    'justify-center max-sm:w-full',
+                                ]}
+                            >
+                                <RefreshCw
+                                    class={[
+                                        'h-3.5 w-3.5',
+                                        isLoading.value ? 'animate-spin' : '',
+                                    ]}
+                                />
+                                <span>
+                                    {hasFetched.value
+                                        ? isLoading.value
+                                            ? 'রিফ্রেশ হচ্ছে...'
+                                            : 'Reload Analytics'
+                                        : isLoading.value
+                                          ? 'লোড হচ্ছে...'
+                                          : 'Load Analytics'}
+                                </span>
+                            </button>
+                        </div>
+
+                        {/* KPI strip — one horizontal strip, no per-stat cards */}
+                        <section aria-label="Analytics overview">
+                            <div class="grid grid-cols-2 border-y border-slate-100 lg:grid-cols-4 lg:divide-x lg:divide-slate-100 dark:border-gray-800 dark:lg:divide-gray-800">
+                                {/* Total Accounts */}
+                                <div class="border-r border-b border-slate-100 py-4 pr-4 lg:border-r-0 lg:border-b-0 lg:px-4 lg:pl-0 dark:border-gray-800">
+                                    <p class="text-[11px] font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                        Total Accounts
+                                    </p>
+                                    <p class="mt-1 flex h-8 items-center text-xl font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                        {totalAccounts.toLocaleString()}
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                        সর্বমোট নিবন্ধিত একাউন্ট
+                                    </p>
+                                </div>
+
+                                {/* Active Now */}
+                                <div class="border-b border-slate-100 py-4 pl-4 lg:border-b-0 lg:px-4 dark:border-gray-800">
+                                    <p class="flex h-[18px] items-center gap-1.5 text-[11px] font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                        <span class="relative flex h-2 w-2 shrink-0">
+                                            <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>
+                                        Active Now
+                                    </p>
+                                    <p class="mt-1 flex h-8 items-center text-xl font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                        {hasFetched.value
+                                            ? (
+                                                  stats.value?.realtime_users ??
+                                                  0
+                                              ).toLocaleString()
+                                            : '—'}
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                        গত ৫ মিনিটে একটিভ ইউজার
+                                    </p>
+                                </div>
+
+                                {/* Total Visits */}
+                                <div class="border-r border-slate-100 py-4 pr-4 lg:border-r-0 lg:px-4 dark:border-gray-800">
+                                    <p class="flex h-[18px] items-center text-[11px] font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                        Total Visits
+                                    </p>
+                                    <p class="mt-1 flex h-8 items-center text-xl font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                        {hasFetched.value
+                                            ? (
+                                                  stats.value?.total_visits ?? 0
+                                              ).toLocaleString()
+                                            : '—'}
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                        পেজ ভিউ · বিগত ৩০ দিন
+                                    </p>
+                                </div>
+
+                                {/* Unique Visitors */}
+                                <div class="py-4 pl-4 lg:px-4 lg:pr-0">
+                                    <p class="flex h-[18px] items-center text-[11px] font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                        Unique Visitors
+                                    </p>
+                                    <p class="mt-1 flex h-8 items-center text-xl font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                        {hasFetched.value
+                                            ? (
+                                                  stats.value?.total_users ?? 0
+                                              ).toLocaleString()
+                                            : '—'}
+                                    </p>
+                                    <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                        ইউনিক ভিজিটর · বিগত ৩০ দিন
+                                    </p>
+                                </div>
+                            </div>
+                        </section>
+
+                        {/* Initial Unloaded State / Loading / Metrics */}
+                        {/* Load errors render above every branch so a failed
+                            first fetch is never silent. */}
+                        {errorMsg.value && (
+                            <p class="text-center text-xs font-medium text-rose-600 dark:text-rose-400">
+                                {errorMsg.value}
+                            </p>
+                        )}
+                        {!hasFetched.value && !isLoading.value ? (
+                            <EmptyState
+                                icon={BarChart3}
+                                variant="simple"
+                                title="Analytics ডাটা লোড করার জন্য প্রস্তুত"
+                                description="পেজ লোড দ্রুত রাখতে অ্যানালিটিক্স ডাটা ডিমান্ড অনুযায়ী লোড হয়। দেখতে উপরে Load Analytics বাটনে ক্লিক করুন।"
+                            />
+                        ) : isLoading.value && !hasFetched.value ? (
+                            <div class="flex flex-col items-center justify-center py-10 text-center">
+                                <RefreshCw class="h-7 w-7 animate-spin text-indigo-600 dark:text-indigo-400" />
+                                <p class="mt-3 text-xs font-medium text-slate-500 dark:text-gray-400">
+                                    বিগত ৩০ দিনের অ্যানালিটিক্স লোড হচ্ছে...
+                                </p>
+                            </div>
+                        ) : (
+                            <div class="flex flex-1 flex-col gap-6">
+                                {/* Top Traffic Sources — ranked list, two columns on lg */}
+                                <section aria-label="Top traffic sources">
+                                    <div class="flex items-center gap-2">
+                                        <Share2 class="h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                                        <h2 class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                            Top Traffic Sources
+                                        </h2>
+                                    </div>
+                                    <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                                        যেসব রেফারেল বা সোর্স থেকে ট্রাফিক এসেছে
+                                    </p>
+
+                                    {stats.value?.top_sources?.length ? (
+                                        <ol class="mt-1 grid gap-x-8 lg:grid-cols-2">
+                                            {stats.value?.top_sources?.map(
+                                                (source, index) => {
+                                                    const share =
+                                                        topVisits > 0
+                                                            ? Math.round(
+                                                                  ((source.visits ??
+                                                                      0) /
+                                                                      topVisits) *
+                                                                      100,
+                                                              )
+                                                            : 0;
+
+                                                    return (
+                                                        <li
+                                                            key={index}
+                                                            class="flex items-center gap-3 border-b border-slate-100 px-3 py-3 dark:border-gray-800"
+                                                        >
+                                                            <span class="w-6 shrink-0 text-xs font-bold text-slate-400 tabular-nums dark:text-gray-500">
+                                                                {String(
+                                                                    index + 1,
+                                                                ).padStart(
+                                                                    2,
+                                                                    '0',
+                                                                )}
+                                                            </span>
+                                                            <div class="min-w-0 flex-1">
+                                                                <div class="flex items-baseline justify-between gap-3">
+                                                                    <p
+                                                                        class="truncate text-xs font-semibold text-slate-700 dark:text-gray-300"
+                                                                        title={
+                                                                            source.source
+                                                                        }
+                                                                    >
+                                                                        {source.source ||
+                                                                            'Direct / Unknown'}
+                                                                    </p>
+                                                                    <span class="shrink-0 text-xs font-bold text-slate-900 tabular-nums dark:text-gray-100">
+                                                                        {source.visits?.toLocaleString() ??
+                                                                            0}{' '}
+                                                                        <span class="font-medium text-slate-400 dark:text-gray-500">
+                                                                            visits
+                                                                        </span>
+                                                                    </span>
+                                                                </div>
+                                                                <div class="mt-1.5 h-1 overflow-hidden rounded-full bg-slate-100 dark:bg-gray-800">
+                                                                    <div
+                                                                        class="h-1 rounded-full bg-indigo-500 transition-all dark:bg-indigo-400"
+                                                                        style={{
+                                                                            width: `${share}%`,
+                                                                        }}
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                        </li>
+                                                    );
+                                                },
+                                            )}
+                                        </ol>
+                                    ) : (
+                                        <div class="flex flex-col items-center justify-center py-10 text-center">
+                                            <Share2 class="h-6 w-6 text-slate-300 dark:text-gray-600" />
+                                            <p class="mt-2 text-xs font-medium text-slate-500 dark:text-gray-400">
+                                                এখনও কোনো সোর্স ডাটা পাওয়া
+                                                যায়নি।
+                                            </p>
+                                        </div>
+                                    )}
+                                </section>
+                            </div>
+                        )}
+
+                        {/* Contributor guide — pinned to the bottom, no card, no dividers */}
+                        <div class="mt-auto flex flex-col gap-3 py-1 sm:flex-row sm:items-center sm:justify-between">
+                            <div class="flex items-center gap-2.5">
+                                <BookOpen class="h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                                <p class="text-xs text-slate-500 dark:text-gray-400">
+                                    <span class="font-bold text-slate-900 dark:text-gray-100">
+                                        কন্ট্রিবিউটর গাইড প্রয়োজন?{' '}
+                                    </span>
+                                    সাবজেক্ট ম্যানেজ, রিসোর্স আপলোড, ব্লগ তৈরি ও
+                                    প্যানেল পারমিশন সংক্রান্ত বিস্তারিত গাইডলাইন
+                                    দেখুন।
+                                </p>
+                            </div>
+
+                            <Link
+                                href="/guide"
+                                class="group inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 text-xs font-semibold text-white transition hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 max-sm:w-full dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                            >
+                                <span>গাইড দেখুন</span>
+                                <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+                            </Link>
+                        </div>
+                    </div>
+                </>
+            );
+        };
+    },
+});
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
deleted file mode 100644
index 760c97cc..00000000
--- a/resources/js/pages/admin/Dashboard.vue
+++ /dev/null
@@ -1,393 +0,0 @@
-<script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
-import {
-    LayoutGrid,
-    Sparkles,
-    Users,
-    Eye,
-    Share2,
-    BookOpen,
-    ArrowRight,
-    Zap,
-    RefreshCw,
-    BarChart3,
-} from 'lucide-vue-next';
-import { ref } from 'vue';
-import EmptyState from '@/components/EmptyState.vue';
-
-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 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 ডাটা লোড করা যায়নি');
-        }
-
-        stats.value = await res.json();
-        hasFetched.value = true;
-    } catch (e: any) {
-        errorMsg.value = e.message || 'Analytics লোড করতে সমস্যা হয়েছে';
-    } finally {
-        isLoading.value = false;
-    }
-};
-</script>
-
-<template>
-    <Head title="Staff Panel" />
-
-    <div class="animate-fade-in mx-auto max-w-7xl space-y-6 p-1">
-        <!-- Main Dashboard Header -->
-        <div
-            class="relative overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-r from-white via-slate-50 to-white p-5 shadow-2xs sm:p-6 dark:border-gray-800 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900"
-        >
-            <div
-                class="pointer-events-none absolute -top-10 -right-10 h-40 w-40 rounded-full bg-indigo-500/10 blur-3xl dark:bg-indigo-500/20"
-            ></div>
-            <div
-                class="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
-            >
-                <div class="flex items-center gap-3.5">
-                    <div
-                        class="hidden h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-gradient-to-b from-white to-slate-100 text-indigo-600 shadow-2xs sm:flex dark:border-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-indigo-400"
-                    >
-                        <Sparkles class="h-4.5 w-4.5" />
-                    </div>
-                    <div>
-                        <h1
-                            class="text-lg font-bold tracking-tight text-slate-900 sm:text-xl dark:text-gray-100"
-                        >
-                            Dashboard
-                        </h1>
-                        <p
-                            class="mt-0.5 text-xs text-slate-600 dark:text-gray-400"
-                        >
-                            অ্যাডমিন ওয়ার্কস্পেসের সামগ্রিক তথ্য ও
-                            অ্যানালিটিক্স।
-                        </p>
-                    </div>
-                </div>
-
-                <!-- On-Demand Load / Reload Button -->
-                <button
-                    type="button"
-                    @click="fetchAnalytics(hasFetched)"
-                    :disabled="isLoading"
-                    class="inline-flex 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
-                                ? 'রিফ্রেশ হচ্ছে...'
-                                : 'Reload Analytics'
-                            : isLoading
-                              ? 'লোড হচ্ছে...'
-                              : 'Load Analytics'
-                    }}</span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Overview Stats Grid -->
-        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            <div
-                class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div class="flex items-center justify-between">
-                    <div>
-                        <p
-                            class="text-xs font-bold tracking-wider text-slate-600 uppercase dark:text-gray-400"
-                        >
-                            Total Accounts
-                        </p>
-                        <h3
-                            class="mt-2 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
-                        >
-                            {{
-                                (
-                                    stats?.total_accounts ??
-                                    props.totalAccounts ??
-                                    0
-                                ).toLocaleString()
-                            }}
-                        </h3>
-                        <p
-                            class="mt-1 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            সর্বমোট নিবন্ধিত একাউন্ট
-                        </p>
-                    </div>
-                    <div
-                        class="flex h-11 w-11 items-center justify-center rounded-2xl border border-indigo-100 bg-indigo-50 text-indigo-600 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400"
-                    >
-                        <Users class="h-5 w-5" />
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Highlighted Guide/Tour Card -->
-        <div
-            class="relative overflow-hidden rounded-2xl border border-indigo-200/70 bg-indigo-50/50 p-4 shadow-2xs transition-colors hover:border-indigo-300 sm:p-5 dark:border-indigo-500/30 dark:bg-indigo-500/10"
-        >
-            <div
-                class="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
-            >
-                <div class="flex items-start gap-3 sm:items-center">
-                    <div
-                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-2xs dark:bg-indigo-500"
-                    >
-                        <BookOpen class="h-4.5 w-4.5" />
-                    </div>
-                    <div>
-                        <h2
-                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            কন্ট্রিবিউটর গাইড প্রয়োজন?
-                        </h2>
-                        <p
-                            class="mt-0.5 text-xs text-slate-600 dark:text-gray-400"
-                        >
-                            সাবজেক্ট ম্যানেজ, রিসোর্স আপলোড, ব্লগ তৈরি ও প্যানেল
-                            পারমিশন সংক্রান্ত বিস্তারিত গাইডলাইন দেখুন।
-                        </p>
-                    </div>
-                </div>
-
-                <Link
-                    href="/guide"
-                    class="group inline-flex shrink-0 items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-bold text-white shadow-2xs transition-all hover:bg-indigo-700 active:scale-95"
-                >
-                    <span>গাইড দেখুন</span>
-                    <ArrowRight
-                        class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5"
-                    />
-                </Link>
-            </div>
-        </div>
-
-        <!-- Initial Unloaded State Placeholder -->
-        <EmptyState
-            v-if="!hasFetched && !isLoading"
-            :icon="BarChart3"
-            variant="dashed"
-            title="Analytics ডাটা লোড করার জন্য প্রস্তুত"
-            description="পেজ লোড দ্রুত রাখতে অ্যানালিটিক্স ডাটা ডিমান্ড অনুযায়ী লোড হয়। লাইভ মেট্রিক্স দেখতে নিচে ক্লিক করুন।"
-        >
-            <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 Live Analytics</span>
-            </button>
-        </EmptyState>
-
-        <!-- Loading State Spinner -->
-        <div
-            v-else-if="isLoading && !hasFetched"
-            class="flex flex-col items-center justify-center rounded-2xl border border-slate-200 bg-white py-16 text-center shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-        >
-            <RefreshCw
-                class="h-8 w-8 animate-spin text-indigo-600 dark:text-indigo-400"
-            />
-            <p
-                class="mt-3 text-xs font-medium text-slate-500 dark:text-gray-400"
-            >
-                বিগত ৩০ দিনের অ্যানালিটিক্স লোড হচ্ছে...
-            </p>
-        </div>
-
-        <!-- Metrics Section (Rendered once loaded) -->
-        <div v-else class="grid gap-6 md:grid-cols-2">
-            <div class="space-y-6">
-                <!-- Realtime Active -->
-                <div
-                    class="relative overflow-hidden rounded-2xl border border-emerald-200/70 bg-gradient-to-br from-emerald-500/10 via-white to-white p-5 shadow-2xs dark:border-emerald-500/30 dark:from-emerald-950/40 dark:via-gray-900 dark:to-gray-900"
-                >
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center gap-2">
-                            <span class="relative flex h-2.5 w-2.5">
-                                <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.5 w-2.5 rounded-full bg-emerald-500"
-                                ></span>
-                            </span>
-                            <p
-                                class="text-xs font-bold tracking-wider text-emerald-900 uppercase dark:text-emerald-300"
-                            >
-                                Active Now
-                            </p>
-                        </div>
-                        <div
-                            class="flex h-9 w-9 items-center justify-center rounded-xl border border-emerald-200 bg-emerald-100/60 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/20 dark:text-emerald-300"
-                        >
-                            <Zap class="h-4.5 w-4.5" />
-                        </div>
-                    </div>
-                    <div class="mt-3.5">
-                        <h3
-                            class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
-                        >
-                            {{ stats?.realtime_users ?? 0 }}
-                        </h3>
-                        <p
-                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            গত ৫ মিনিটে একটিভ ইউজার
-                        </p>
-                    </div>
-                </div>
-
-                <!-- Total Visits -->
-                <div
-                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 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-600 uppercase dark:text-gray-400"
-                        >
-                            Total Visits
-                        </p>
-                        <div
-                            class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-100 bg-indigo-50 text-indigo-600 dark:border-gray-800 dark:bg-indigo-500/10 dark:text-indigo-400"
-                        >
-                            <Eye class="h-4.5 w-4.5" />
-                        </div>
-                    </div>
-                    <div class="mt-3.5">
-                        <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-500 dark:text-gray-400"
-                        >
-                            সর্বমোট পেজ ভিউ (বিগত ৩০ দিন)
-                        </p>
-                    </div>
-                </div>
-
-                <!-- Unique Visitors -->
-                <div
-                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 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-600 uppercase dark:text-gray-400"
-                        >
-                            Unique Visitors
-                        </p>
-                        <div
-                            class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-100 bg-blue-50 text-blue-600 dark:border-gray-800 dark:bg-blue-500/10 dark:text-blue-400"
-                        >
-                            <Users class="h-4.5 w-4.5" />
-                        </div>
-                    </div>
-                    <div class="mt-3.5">
-                        <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-500 dark:text-gray-400"
-                        >
-                            ইউনিক ভিজিটর সংখ্যা (বিগত ৩০ দিন)
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Top Acquisition Sources -->
-            <div
-                class="flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div
-                    class="flex items-center gap-3 border-b border-slate-100 pb-3.5 dark:border-gray-800"
-                >
-                    <div
-                        class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 text-slate-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
-                    >
-                        <Share2 class="h-4 w-4" />
-                    </div>
-                    <div>
-                        <h3
-                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            Top Traffic Sources
-                        </h3>
-                        <p class="text-xs text-slate-500 dark:text-gray-400">
-                            যেসব রেফারেল বা সোর্স থেকে ট্রাফিক এসেছে
-                        </p>
-                    </div>
-                </div>
-
-                <div class="mt-3.5 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.5"
-                        >
-                            <div class="w-2/3 pr-4">
-                                <p
-                                    class="truncate text-xs font-semibold text-slate-700 dark:text-gray-300"
-                                    :title="source.source"
-                                >
-                                    {{ source.source || 'Direct / Unknown' }}
-                                </p>
-                            </div>
-                            <div class="flex w-1/3 items-center justify-end">
-                                <span
-                                    class="inline-flex items-center rounded-md bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-800 dark:bg-gray-800 dark:text-gray-200"
-                                >
-                                    {{ source.visits?.toLocaleString() }} visits
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        v-else
-                        class="flex h-full flex-col items-center justify-center py-10 text-center"
-                    >
-                        <LayoutGrid
-                            class="h-7 w-7 text-slate-300 dark:text-gray-600"
-                        />
-                        <p
-                            class="mt-2 text-xs font-medium text-slate-500 dark:text-gray-400"
-                        >
-                            এখনও কোনো সোর্স ডাটা পাওয়া যায়নি।
-                        </p>
-                    </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..9db2bf5b
--- /dev/null
+++ b/resources/js/pages/admin/EmailSend.tsx
@@ -0,0 +1,992 @@
+import { Head, useForm, usePage } from '@inertiajs/vue3';
+import {
+    Loader2,
+    Mail,
+    Send,
+    Users,
+    GraduationCap,
+    ShieldCheck,
+    AlertCircle,
+    CheckCircle2,
+    Eye,
+    X,
+    Upload,
+    Trash2,
+    Download,
+    ChevronDown,
+} from 'lucide-vue-next';
+import {
+    Teleport,
+    computed,
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+} from 'vue';
+
+import {
+    AdminPageHeader,
+    adminPageClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+import HTMLEditor from '@/components/HTMLEditor.vue';
+
+interface EmailFormFields {
+    recipients: string;
+    subject: string;
+    body: string;
+    image: File | null;
+}
+
+interface RecipientsResponse {
+    emails?: unknown;
+}
+
+export default defineComponent({
+    name: 'AdminEmailSend',
+    props: {
+        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,
+        });
+
+        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 = '';
+            }
+        };
+
+        // Import helper
+        const importSubscribers = async (
+            type: '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;
+            }
+        };
+
+        const cleanAndFormatRecipients = (): void => {
+            const valid = recipientStats.value.validEmails;
+            form.recipients = valid.join('\n');
+        };
+
+        const handleSendClick = (): void => {
+            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;
+        };
+
+        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="mx-auto max-w-4xl space-y-8"
+                    >
+                        {/* 1. 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">
+                                        1
+                                    </span>
+                                    <h2 class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                        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-9 cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
+                                        >
+                                            {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 border border-slate-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
+                                                <button
+                                                    type="button"
+                                                    disabled={
+                                                        props.recipientCount ===
+                                                        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 Subscribed
+                                                        </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.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>
+                                                            Students (Non-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.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>
+                                                            Staff Members
+                                                        </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="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-xl 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"
+                                        >
+                                            <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-xl border bg-white px-3 py-2 font-mono text-xs leading-relaxed text-slate-900 transition placeholder:text-slate-400 focus:outline-none disabled:opacity-50 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500',
+                                        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>
+
+                        {/* 2. 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="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                    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-xl border bg-white px-3 py-2 text-sm text-slate-900 transition placeholder:text-slate-400 focus:outline-none disabled:opacity-50 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500',
+                                        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-xl border border-slate-200 bg-white px-2.5 text-[11px] font-semibold text-slate-600 transition hover:bg-slate-50 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+                                                >
+                                                    Change
+                                                </label>
+                                                <button
+                                                    type="button"
+                                                    onClick={handleRemoveImage}
+                                                    class="inline-flex h-8 cursor-pointer items-center gap-1 rounded-xl px-2.5 text-[11px] font-semibold text-rose-600 transition hover:bg-rose-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-rose-400 dark:hover:bg-rose-500/10"
+                                                >
+                                                    <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>
+
+                        {/* 3. Review & Send */}
+                        <div class="sticky bottom-0 flex flex-col gap-3 border-t border-slate-100 bg-white/90 py-3 backdrop-blur sm:flex-row sm:items-center sm:justify-between dark:border-gray-800 dark:bg-gray-950/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">
+                                    Emails are queued and delivered
+                                    asynchronously. Duplicates and invalid
+                                    addresses are automatically stripped.
+                                </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="inline-flex h-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 sm:w-auto dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
+                                >
+                                    <Eye class="h-3.5 w-3.5" />
+                                    <span>Preview</span>
+                                </button>
+
+                                <button
+                                    type="submit"
+                                    disabled={
+                                        form.processing ||
+                                        recipientStats.value.validEmails
+                                            .length === 0
+                                    }
+                                    class="inline-flex h-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-4 text-xs font-semibold text-white transition hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                                >
+                                    {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-100 bg-white py-4 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-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-100 bg-slate-50 px-6 py-5 text-center text-xs text-slate-500 dark:border-gray-800 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-9 cursor-pointer items-center rounded-xl bg-indigo-600 px-4 text-xs font-semibold text-white transition 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 Email Queue
+                                        </h3>
+                                        <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                            Dispatching to{' '}
+                                            {
+                                                recipientStats.value.validEmails
+                                                    .length
+                                            }{' '}
+                                            unique recipient
+                                            {recipientStats.value.validEmails
+                                                .length === 1
+                                                ? ''
+                                                : 's'}
+                                        </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 emails will be queued
+                                    asynchronously.
+                                    {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-9 cursor-pointer items-center rounded-xl border border-slate-200 px-4 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                                    >
+                                        Cancel
+                                    </button>
+
+                                    <button
+                                        type="button"
+                                        onClick={submitForm}
+                                        class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-4 text-xs font-semibold text-white transition 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 022f4313..00000000
--- a/resources/js/pages/admin/EmailSend.vue
+++ /dev/null
@@ -1,998 +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,
-} from 'lucide-vue-next';
-
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import HTMLEditor from '@/components/HTMLEditor.vue';
-
-defineProps({
-    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,
-});
-
-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: '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 (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">
-            <!-- 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"
-                            >
-                                <button
-                                    type="button"
-                                    :disabled="recipientCount === 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 Subscribed</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>
-
-                                <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>Students (Non-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"
-                                    >
-                                        {{ studentsCount }}
-                                    </span>
-                                </button>
-
-                                <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>Staff Members</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">
-                    Emails are queued and delivered asynchronously. Duplicates
-                    and invalid addresses are automatically stripped.
-                </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 ||
-                            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 Email Queue
-                        </h3>
-                        <p class="text-xs text-slate-500 dark:text-gray-400">
-                            Dispatching to
-                            {{ recipientStats.validEmails.length }} unique
-                            recipient{{
-                                recipientStats.validEmails.length === 1
-                                    ? ''
-                                    : 's'
-                            }}
-                        </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 emails
-                    will be queued asynchronously.
-                    <span
-                        v-if="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..923556c7
--- /dev/null
+++ b/resources/js/pages/admin/Index.tsx
@@ -0,0 +1,274 @@
+/**
+ * AdminIndex — TSX port of the former `Index.vue` (flat, decardified).
+ *
+ * Same behavior as the SFC: course filter + subject list + create/edit
+ * modal. Resolved via the explicit dual-extension (`*.vue` + `*.tsx`)
+ * page resolver in `resources/js/app.ts`.
+ */
+import { Head, Link, router } from '@inertiajs/vue3';
+import { ChevronRight, Pencil, Plus, Trash2 } from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import CreateSubjectModal from '@/components/admin/CreateSubjectModal.vue';
+import {
+    AdminPageHeader,
+    SegmentedTabs,
+    adminDangerIconBtnClass,
+    adminHoverListClass,
+    adminIconBtnClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminRowClass,
+} from '@/components/admin/ui';
+import EmptyState from '@/components/EmptyState.vue';
+import SubjectIcon from '@/components/SubjectIcon.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface Subject {
+    id: number;
+    name: string;
+    slug: string;
+    course?: 'hsc' | 'ssc' | string | null;
+    icon?: string | null;
+    tailwind_format?: string | null;
+    sort_order?: number | null;
+    nodes_count?: number | null;
+}
+
+export default defineComponent({
+    name: 'AdminIndex',
+    props: {
+        subjects: { type: Array as PropType<Subject[]>, required: true },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+
+        const isCreateModalOpen = ref(false);
+        const editingSubject = ref<Subject | null>(null);
+        const activeCourse = ref<'all' | 'hsc' | 'ssc'>('all');
+
+        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 handleDelete = (subject: Subject) => {
+            if (confirm('Are you sure you want to delete this Subject?')) {
+                router.delete(`/admin/subjects/${subject.id}`);
+            }
+        };
+
+        const openSubject = (subject: Subject) => {
+            router.visit(`/admin/subjects/${subject.slug}/nodes`);
+        };
+
+        const hscCount = computed(
+            () =>
+                props.subjects.filter((s) => s.course?.toLowerCase() === 'hsc')
+                    .length,
+        );
+
+        const sscCount = computed(
+            () =>
+                props.subjects.filter((s) => s.course?.toLowerCase() === 'ssc')
+                    .length,
+        );
+
+        const filteredSubjects = computed(() => {
+            if (activeCourse.value === 'all') {
+                return props.subjects;
+            }
+
+            return props.subjects.filter(
+                (s) =>
+                    s.course?.toLowerCase() ===
+                    activeCourse.value.toLowerCase(),
+            );
+        });
+
+        const tabOptions = computed(() => [
+            { value: 'all', label: `All (${props.subjects.length})` },
+            { value: 'hsc', label: `HSC (${hscCount.value})` },
+            { value: 'ssc', label: `SSC (${sscCount.value})` },
+        ]);
+
+        return () => (
+            <>
+                <Head title="Manage Contents" />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <AdminPageHeader
+                        title="Manage Subjects"
+                        count={props.subjects.length}
+                        description="Organize HSC and SSC subjects and their contents."
+                    >
+                        {{
+                            actions: () =>
+                                can('create subjects') && (
+                                    <button
+                                        type="button"
+                                        onClick={openCreateModal}
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        <Plus
+                                            class="h-3.5 w-3.5"
+                                            strokeWidth={2.2}
+                                        />
+                                        <span>New Subject</span>
+                                    </button>
+                                ),
+                        }}
+                    </AdminPageHeader>
+
+                    {/* Create/Edit Subject Modal */}
+                    <CreateSubjectModal
+                        isOpen={isCreateModalOpen.value}
+                        subject={editingSubject.value}
+                        onClose={handleModalClose}
+                    />
+
+                    {/* Course filter (shared segmented style) */}
+                    <SegmentedTabs
+                        tabs={tabOptions.value}
+                        active={activeCourse.value}
+                        onSelect={(value: string) =>
+                            (activeCourse.value =
+                                value as typeof activeCourse.value)
+                        }
+                    />
+
+                    {/* Flat subject list */}
+                    <div class="flex flex-1 flex-col">
+                        {filteredSubjects.value.length > 0 ? (
+                            <div class={adminHoverListClass}>
+                                {filteredSubjects.value.map((subject) => (
+                                    <div
+                                        key={subject.id || subject.name}
+                                        onClick={() => openSubject(subject)}
+                                        role="button"
+                                        tabIndex={0}
+                                        onKeyDown={(e: KeyboardEvent) => {
+                                            // Only the row itself opens the
+                                            // subject; keydowns bubbling up
+                                            // from the inner action buttons
+                                            // must reach the buttons.
+                                            if (e.target !== e.currentTarget) {
+                                                return;
+                                            }
+
+                                            if (
+                                                e.key === 'Enter' ||
+                                                e.key === ' '
+                                            ) {
+                                                e.preventDefault();
+                                                openSubject(subject);
+                                            }
+                                        }}
+                                        class={[
+                                            adminRowClass,
+                                            'group cursor-pointer',
+                                        ]}
+                                    >
+                                        <div
+                                            class={[
+                                                subject.tailwind_format ||
+                                                    'bg-slate-100 text-slate-500 dark:bg-gray-800 dark:text-gray-400',
+                                                'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',
+                                            ]}
+                                        >
+                                            <SubjectIcon
+                                                name={subject.icon}
+                                                className="h-4 w-4 stroke-[2]"
+                                            />
+                                        </div>
+
+                                        <div class="min-w-0 flex-1">
+                                            <p class="truncate text-sm font-semibold text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400">
+                                                {subject.name}
+                                            </p>
+                                            <p class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400">
+                                                {subject.course
+                                                    ? `${subject.course.toUpperCase()} · `
+                                                    : ''}
+                                                {subject.nodes_count ?? 0}{' '}
+                                                {(subject.nodes_count ?? 0) ===
+                                                1
+                                                    ? 'node'
+                                                    : 'nodes'}
+                                            </p>
+                                        </div>
+
+                                        <div
+                                            class="flex shrink-0 items-center gap-0.5"
+                                            onClick={(e: MouseEvent) =>
+                                                e.stopPropagation()
+                                            }
+                                        >
+                                            {can('edit subjects') && (
+                                                <button
+                                                    type="button"
+                                                    onClick={() =>
+                                                        openEditModal(subject)
+                                                    }
+                                                    class={[
+                                                        adminIconBtnClass,
+                                                        'hover:text-indigo-600 dark:hover:text-indigo-400',
+                                                    ]}
+                                                    title="Edit subject"
+                                                    aria-label="Edit subject"
+                                                >
+                                                    <Pencil class="h-4 w-4" />
+                                                </button>
+                                            )}
+                                            {can('delete subjects') && (
+                                                <button
+                                                    type="button"
+                                                    onClick={() =>
+                                                        handleDelete(subject)
+                                                    }
+                                                    class={
+                                                        adminDangerIconBtnClass
+                                                    }
+                                                    title="Delete subject"
+                                                    aria-label="Delete subject"
+                                                >
+                                                    <Trash2 class="h-4 w-4" />
+                                                </button>
+                                            )}
+                                            <Link
+                                                href={`/admin/subjects/${subject.slug}/nodes`}
+                                                class={adminIconBtnClass}
+                                                title="Open subject"
+                                                aria-label="Open subject"
+                                            >
+                                                <ChevronRight class="h-4 w-4" />
+                                            </Link>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <EmptyState
+                                title="No subjects found"
+                                description="No subjects have been created in this category yet."
+                                showCta={false}
+                            />
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/Index.vue b/resources/js/pages/admin/Index.vue
deleted file mode 100644
index 46eb7071..00000000
--- a/resources/js/pages/admin/Index.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import { Plus } from 'lucide-vue-next';
-import { ref, computed } 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();
-
-const props = defineProps({
-    subjects: {
-        type: Array as () => any[],
-        default: () => [],
-    },
-});
-
-const isCreateModalOpen = ref(false);
-const editingSubject = ref<any | null>(null);
-const activeCourse = ref<'all' | 'hsc' | 'ssc'>('all');
-
-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 filteredSubjects = computed(() => {
-    if (activeCourse.value === 'all') {
-        return props.subjects;
-    }
-
-    return props.subjects.filter(
-        (s) => s.course?.toLowerCase() === activeCourse.value.toLowerCase(),
-    );
-});
-</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"
-            @close="handleModalClose"
-        />
-
-        <!-- Filter Pills (All / HSC / SSC) -->
-        <div class="mb-4 flex items-center gap-1.5">
-            <button
-                type="button"
-                @click="activeCourse = 'all'"
-                :class="[
-                    activeCourse === '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 dark:hover:bg-gray-700',
-                    'rounded-lg px-2.5 py-1 text-xs font-semibold transition-colors',
-                ]"
-            >
-                All ({{ subjects.length }})
-            </button>
-
-            <button
-                type="button"
-                @click="activeCourse = 'hsc'"
-                :class="[
-                    activeCourse === 'hsc'
-                        ? 'bg-indigo-600 text-white dark:bg-indigo-500 dark:text-white'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
-                    'rounded-lg px-2.5 py-1 text-xs font-semibold transition-colors',
-                ]"
-            >
-                HSC ({{
-                    subjects.filter((s) => s.course?.toLowerCase() === 'hsc')
-                        .length
-                }})
-            </button>
-
-            <button
-                type="button"
-                @click="activeCourse = 'ssc'"
-                :class="[
-                    activeCourse === 'ssc'
-                        ? 'bg-amber-600 text-white dark:bg-amber-500 dark:text-white'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
-                    'rounded-lg px-2.5 py-1 text-xs font-semibold transition-colors',
-                ]"
-            >
-                SSC ({{
-                    subjects.filter((s) => s.course?.toLowerCase() === 'ssc')
-                        .length
-                }})
-            </button>
-        </div>
-
-        <div class="flex flex-1 flex-col">
-            <div
-                v-if="filteredSubjects.length > 0"
-                class="flex flex-col gap-2.5 sm:gap-3"
-            >
-                <SubjectCard
-                    v-for="subject in filteredSubjects"
-                    :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."
-                :show-cta="false"
-            />
-        </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..04f664d2
--- /dev/null
+++ b/resources/js/pages/admin/Node.tsx
@@ -0,0 +1,449 @@
+/**
+ * AdminNode — TSX port of the former `Node.vue` (flat, decardified).
+ *
+ * Same UI/behavior as the SFC: folder/resource dropdowns, single + bulk
+ * modals, NodeRow/ResourceRow lists. Resolved via the explicit
+ * dual-extension (`*.vue` + `*.tsx`) page resolver in
+ * `resources/js/app.ts`.
+ */
+import { Head, Link, usePage } from '@inertiajs/vue3';
+import {
+    ArrowLeft,
+    ChevronDown,
+    FolderPlus,
+    PencilLine,
+    Plus,
+} from 'lucide-vue-next';
+import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import BulkImageModal from '@/components/admin/BulkImageModal.vue';
+import BulkNodeModal from '@/components/admin/BulkNodeModal.vue';
+import BulkRenameModal from '@/components/admin/BulkRenameModal.vue';
+import BulkVideoModal from '@/components/admin/BulkVideoModal.vue';
+import CreateNodeModal from '@/components/admin/CreateNodeModal.vue';
+import CreateResourceModal from '@/components/admin/CreateResourceModal.vue';
+import NodeRow from '@/components/admin/NodeRow.vue';
+import ResourceRow from '@/components/admin/ResourceRow.vue';
+import {
+    adminIconBtnClass,
+    adminPageClass,
+    adminPageDescriptionClass,
+    adminPageHeaderClass,
+    adminPageTitleClass,
+    adminPrimaryBtnClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+import EmptyState from '@/components/EmptyState.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+interface Subject {
+    id: number;
+    name: string;
+    slug: string;
+}
+
+interface Node {
+    id: number;
+    subject_id?: number | null;
+    parent_id?: number | null;
+    name: string;
+    slug: string;
+    sort_order?: number | null;
+}
+
+interface Resource {
+    id: number;
+    node_id?: number | null;
+    title: string;
+    resource_type?: string | null;
+    content?: string | null;
+    external_url?: string | null;
+    file_path?: string | null;
+}
+
+export default defineComponent({
+    name: 'AdminNode',
+    props: {
+        subject: { type: Object as PropType<Subject>, required: true },
+        nodes: { type: Array as PropType<Node[]>, required: true },
+        resources: { type: Array as PropType<Resource[]>, required: true },
+        parent: { type: Object as PropType<Node>, default: undefined },
+    },
+    setup(props) {
+        const { can } = usePermissions();
+        const page = usePage();
+
+        const isResourceDropdownOpen = ref(false);
+        const isFolderDropdownOpen = ref(false);
+        const resourceDropdownRef = ref<HTMLElement | null>(null);
+        const folderDropdownRef = ref<HTMLElement | null>(null);
+        const isBulkModalOpen = ref(false);
+        const isBulkImageModalOpen = ref(false);
+        const isBulkVideoModalOpen = ref(false);
+        const isBulkRenameModalOpen = ref(false);
+        const isSingleModalOpen = ref(false);
+        const editingNode = ref<Node | null>(null);
+        const isSingleResourceModalOpen = ref(false);
+        const editingResource = ref<Resource | null>(null);
+
+        const openCreateNodeModal = () => {
+            editingNode.value = null;
+            isSingleModalOpen.value = true;
+        };
+
+        const openEditNodeModal = (node: Node) => {
+            editingNode.value = node;
+            isSingleModalOpen.value = true;
+        };
+
+        const handleNodeModalClose = () => {
+            isSingleModalOpen.value = false;
+            editingNode.value = null;
+        };
+
+        const openCreateResourceModal = () => {
+            editingResource.value = null;
+            isSingleResourceModalOpen.value = true;
+        };
+
+        const openEditResourceModal = (resource: Resource) => {
+            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),
+        );
+
+        const backUrl = computed(() => {
+            const rawPath = (page.url || '').split('?')[0];
+            const segments = rawPath.split('/').filter(Boolean);
+
+            // If at top-level /admin/subjects/{subject}/nodes -> go to /admin/subjects
+            const nodesIndex = segments.indexOf('nodes');
+
+            if (nodesIndex === -1 || nodesIndex === segments.length - 1) {
+                return '/admin/subjects';
+            }
+
+            // Step up one folder level
+            segments.pop();
+
+            return '/' + segments.join('/');
+        });
+
+        const closeDropdowns = (e: MouseEvent) => {
+            const target = e.target as globalThis.Node | null;
+
+            if (
+                resourceDropdownRef.value &&
+                target &&
+                !resourceDropdownRef.value.contains(target)
+            ) {
+                isResourceDropdownOpen.value = false;
+            }
+
+            if (
+                folderDropdownRef.value &&
+                target &&
+                !folderDropdownRef.value.contains(target)
+            ) {
+                isFolderDropdownOpen.value = false;
+            }
+        };
+
+        onMounted(() => document.addEventListener('click', closeDropdowns));
+        onUnmounted(() =>
+            document.removeEventListener('click', closeDropdowns),
+        );
+
+        const menuPanelClass =
+            'absolute right-0 z-10 mt-1.5 w-48 rounded-xl border border-slate-100 bg-white p-1 shadow-lg dark:border-gray-800 dark:bg-gray-900';
+
+        const menuItemClass =
+            'block w-full cursor-pointer rounded-lg px-3 py-2 text-left text-xs font-medium text-slate-700 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100';
+
+        return () => (
+            <>
+                <Head
+                    title={
+                        props.parent?.name ||
+                        props.subject?.name ||
+                        'Manage Nodes'
+                    }
+                />
+
+                <div class={adminPageClass}>
+                    {/* Page header */}
+                    <div class={adminPageHeaderClass}>
+                        <div class="min-w-0">
+                            <div class="flex items-center gap-2">
+                                <Link
+                                    href={backUrl.value}
+                                    class={adminIconBtnClass}
+                                    title="Go back"
+                                    aria-label="Go back"
+                                >
+                                    <ArrowLeft
+                                        class="h-4 w-4"
+                                        strokeWidth={2.2}
+                                    />
+                                </Link>
+                                <h1 class={adminPageTitleClass}>
+                                    {props.parent?.name
+                                        ? props.parent.name
+                                        : props.subject.name}
+                                </h1>
+                                <span class="inline-flex items-center rounded-md bg-indigo-50 px-1.5 py-0.5 text-[11px] font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400">
+                                    {totalItemsCount.value}
+                                </span>
+                            </div>
+                            <p class={adminPageDescriptionClass}>
+                                {props.subject.name} ·{' '}
+                                {props.nodes?.length ?? 0}{' '}
+                                {(props.nodes?.length ?? 0) === 1
+                                    ? 'folder'
+                                    : 'folders'}{' '}
+                                · {props.resources?.length ?? 0}{' '}
+                                {(props.resources?.length ?? 0) === 1
+                                    ? 'resource'
+                                    : 'resources'}
+                            </p>
+                        </div>
+
+                        <div class="flex shrink-0 items-center gap-2">
+                            {/* Bulk Rename (lives with the other actions, not floating over the list) */}
+                            {can('edit resources') &&
+                            props.resources?.length ? (
+                                <button
+                                    type="button"
+                                    onClick={() =>
+                                        (isBulkRenameModalOpen.value = true)
+                                    }
+                                    class={adminSecondaryBtnClass}
+                                >
+                                    <PencilLine class="h-3.5 w-3.5" />
+                                    <span>
+                                        <span class="hidden sm:inline">
+                                            Bulk{' '}
+                                        </span>
+                                        Rename
+                                    </span>
+                                </button>
+                            ) : null}
+
+                            {/* Add Folder Dropdown */}
+                            {can('create nodes') && (
+                                <div
+                                    ref={folderDropdownRef}
+                                    class="relative inline-block"
+                                >
+                                    <button
+                                        type="button"
+                                        onClick={() =>
+                                            (isFolderDropdownOpen.value =
+                                                !isFolderDropdownOpen.value)
+                                        }
+                                        class="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+                                    >
+                                        <FolderPlus
+                                            class="h-3.5 w-3.5 text-slate-500 dark:text-gray-400"
+                                            strokeWidth={2}
+                                        />
+                                        <span>
+                                            <span class="hidden sm:inline">
+                                                Add{' '}
+                                            </span>
+                                            Folder
+                                        </span>
+                                        <ChevronDown class="h-3.5 w-3.5 text-slate-400" />
+                                    </button>
+
+                                    {isFolderDropdownOpen.value && (
+                                        <div class={menuPanelClass}>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    isFolderDropdownOpen.value = false;
+                                                    openCreateNodeModal();
+                                                }}
+                                                class={menuItemClass}
+                                            >
+                                                Upload Single Folder
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    isFolderDropdownOpen.value = false;
+                                                    isBulkModalOpen.value = true;
+                                                }}
+                                                class={menuItemClass}
+                                            >
+                                                Add Multiple Folders
+                                            </button>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+
+                            {/* Add Resource Dropdown */}
+                            {props.parent?.id ? (
+                                <div
+                                    ref={resourceDropdownRef}
+                                    class="relative inline-block"
+                                >
+                                    <button
+                                        type="button"
+                                        onClick={() =>
+                                            (isResourceDropdownOpen.value =
+                                                !isResourceDropdownOpen.value)
+                                        }
+                                        class={adminPrimaryBtnClass}
+                                    >
+                                        <Plus
+                                            class="h-3.5 w-3.5"
+                                            strokeWidth={2.2}
+                                        />
+                                        <span>
+                                            <span class="hidden sm:inline">
+                                                Add{' '}
+                                            </span>
+                                            Resource
+                                        </span>
+                                        <ChevronDown class="h-3.5 w-3.5" />
+                                    </button>
+
+                                    {isResourceDropdownOpen.value && (
+                                        <div class={menuPanelClass}>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    isResourceDropdownOpen.value = false;
+                                                    openCreateResourceModal();
+                                                }}
+                                                class={menuItemClass}
+                                            >
+                                                Upload Single Resource
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    isResourceDropdownOpen.value = false;
+                                                    isBulkImageModalOpen.value = true;
+                                                }}
+                                                class={menuItemClass}
+                                            >
+                                                Upload Multiple Images
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    isResourceDropdownOpen.value = false;
+                                                    isBulkVideoModalOpen.value = true;
+                                                }}
+                                                class={menuItemClass}
+                                            >
+                                                Upload Multiple Videos
+                                            </button>
+                                        </div>
+                                    )}
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+
+                    {/* Single Node Modal (Create / Edit) */}
+                    <CreateNodeModal
+                        isOpen={isSingleModalOpen.value}
+                        subject={props.subject}
+                        parent={props.parent}
+                        node={editingNode.value}
+                        onClose={handleNodeModalClose}
+                    />
+
+                    {/* Single Resource Modal (Create / Edit) */}
+                    {props.parent ? (
+                        <CreateResourceModal
+                            isOpen={isSingleResourceModalOpen.value}
+                            node={props.parent}
+                            resource={editingResource.value}
+                            onClose={handleResourceModalClose}
+                        />
+                    ) : null}
+
+                    {/* Bulk Node Modal */}
+                    <BulkNodeModal
+                        isOpen={isBulkModalOpen.value}
+                        subject={props.subject}
+                        parent={props.parent}
+                        onClose={() => (isBulkModalOpen.value = false)}
+                    />
+
+                    {/* Bulk Images Modal */}
+                    {props.parent ? (
+                        <BulkImageModal
+                            isOpen={isBulkImageModalOpen.value}
+                            node={props.parent}
+                            onClose={() => (isBulkImageModalOpen.value = false)}
+                        />
+                    ) : null}
+
+                    {/* Bulk Videos Modal */}
+                    {props.parent ? (
+                        <BulkVideoModal
+                            isOpen={isBulkVideoModalOpen.value}
+                            node={props.parent}
+                            onClose={() => (isBulkVideoModalOpen.value = false)}
+                        />
+                    ) : null}
+
+                    {/* Bulk Rename Modal */}
+                    {props.parent ? (
+                        <BulkRenameModal
+                            isOpen={isBulkRenameModalOpen.value}
+                            node={props.parent}
+                            resources={props.resources ?? []}
+                            onClose={() =>
+                                (isBulkRenameModalOpen.value = false)
+                            }
+                        />
+                    ) : null}
+
+                    <div class="flex flex-1 flex-col">
+                        {totalItemsCount.value > 0 ? (
+                            <>
+                                <div class="flex flex-col gap-2">
+                                    {props.nodes.map((node) => (
+                                        <NodeRow
+                                            key={`node-${node.id}`}
+                                            node={node}
+                                            onEdit={openEditNodeModal}
+                                        />
+                                    ))}
+                                    {props.resources.map((resource) => (
+                                        <ResourceRow
+                                            key={`resource-${resource.id}`}
+                                            resource={resource}
+                                            onEdit={openEditResourceModal}
+                                        />
+                                    ))}
+                                </div>
+                            </>
+                        ) : (
+                            <EmptyState
+                                title="No items in this folder"
+                                description="Create a new folder or resource above to get started."
+                            />
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    },
+});
diff --git a/resources/js/pages/admin/Node.vue b/resources/js/pages/admin/Node.vue
deleted file mode 100644
index 2edec79d..00000000
--- a/resources/js/pages/admin/Node.vue
+++ /dev/null
@@ -1,346 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, usePage } from '@inertiajs/vue3';
-import {
-    Plus,
-    FolderPlus,
-    ArrowLeft,
-    ChevronDown,
-    PencilLine,
-} from 'lucide-vue-next';
-import { computed, ref, onMounted, onUnmounted } from 'vue';
-import BulkImageModal from '@/components/admin/BulkImageModal.vue';
-import BulkNodeModal from '@/components/admin/BulkNodeModal.vue';
-import BulkRenameModal from '@/components/admin/BulkRenameModal.vue';
-import BulkVideoModal from '@/components/admin/BulkVideoModal.vue';
-import CreateNodeModal from '@/components/admin/CreateNodeModal.vue';
-import CreateResourceModal from '@/components/admin/CreateResourceModal.vue';
-import NodeRow from '@/components/admin/NodeRow.vue';
-import ResourceRow from '@/components/admin/ResourceRow.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,
-    parent: Object,
-});
-
-const isResourceDropdownOpen = ref(false);
-const isFolderDropdownOpen = ref(false);
-const resourceDropdownRef = ref<HTMLElement | null>(null);
-const folderDropdownRef = ref<HTMLElement | null>(null);
-const isBulkModalOpen = ref(false);
-const isBulkImageModalOpen = ref(false);
-const isBulkVideoModalOpen = 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 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 openCreateResourceModal = () => {
-    editingResource.value = null;
-    isSingleResourceModalOpen.value = true;
-};
-
-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),
-);
-
-const backUrl = computed(() => {
-    const rawPath = (page.url || '').split('?')[0];
-    const segments = rawPath.split('/').filter(Boolean);
-
-    // If at top-level /admin/subjects/{subject}/nodes -> go to /admin/subjects
-    const nodesIndex = segments.indexOf('nodes');
-
-    if (nodesIndex === -1 || nodesIndex === segments.length - 1) {
-        return '/admin/subjects';
-    }
-
-    // Step up one folder level
-    segments.pop();
-
-    return '/' + segments.join('/');
-});
-
-const closeDropdowns = (e: MouseEvent) => {
-    const target = e.target as Node | null;
-
-    if (
-        resourceDropdownRef.value &&
-        target &&
-        !resourceDropdownRef.value.contains(target)
-    ) {
-        isResourceDropdownOpen.value = false;
-    }
-
-    if (
-        folderDropdownRef.value &&
-        target &&
-        !folderDropdownRef.value.contains(target)
-    ) {
-        isFolderDropdownOpen.value = false;
-    }
-};
-
-onMounted(() => document.addEventListener('click', closeDropdowns));
-onUnmounted(() => document.removeEventListener('click', closeDropdowns));
-</script>
-
-<template>
-    <Head :title="parent?.name || subject?.name || 'Manage Nodes'" />
-
-    <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-2 border-b border-slate-100 pb-3 sm:gap-3 dark:border-gray-800"
-        >
-            <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"
-                >
-                    {{ parent?.name ? parent.name : subject.name }}
-                </h3>
-            </div>
-
-            <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
-                <!-- Add Folder Dropdown -->
-                <div
-                    v-if="can('create nodes')"
-                    ref="folderDropdownRef"
-                    class="relative inline-block"
-                >
-                    <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"
-                    >
-                        <FolderPlus
-                            class="h-3.5 w-3.5 text-slate-500 dark:text-gray-400"
-                            :stroke-width="2"
-                        />
-                        <span
-                            ><span class="hidden sm:inline">Add </span
-                            >Folder</span
-                        >
-                        <ChevronDown class="h-3.5 w-3.5 text-slate-400" />
-                    </button>
-
-                    <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"
-                    >
-                        <button
-                            type="button"
-                            @click="
-                                isFolderDropdownOpen = false;
-                                openCreateNodeModal();
-                            "
-                            class="block w-full cursor-pointer rounded-lg px-3 py-2 text-left text-xs font-medium text-slate-700 hover:bg-slate-50 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                        >
-                            Upload Single Folder
-                        </button>
-                        <button
-                            type="button"
-                            @click="
-                                isFolderDropdownOpen = false;
-                                isBulkModalOpen = true;
-                            "
-                            class="block w-full cursor-pointer rounded-lg px-3 py-2 text-left text-xs font-medium text-slate-700 hover:bg-slate-50 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                        >
-                            Add Multiple Folders
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Add Resource Dropdown -->
-                <div
-                    v-if="parent?.id"
-                    ref="resourceDropdownRef"
-                    class="relative inline-block"
-                >
-                    <button
-                        type="button"
-                        @click="
-                            isResourceDropdownOpen = !isResourceDropdownOpen
-                        "
-                        class="inline-flex cursor-pointer 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 sm:gap-1.5 sm:px-3"
-                    >
-                        <Plus class="h-3.5 w-3.5" :stroke-width="2.2" />
-                        <span
-                            ><span class="hidden sm:inline">Add </span
-                            >Resource</span
-                        >
-                        <ChevronDown class="h-3.5 w-3.5" />
-                    </button>
-
-                    <div
-                        v-if="isResourceDropdownOpen"
-                        class="absolute right-0 z-10 mt-1.5 w-48 rounded-xl border border-slate-100 bg-white p-1 shadow-lg dark:border-gray-800 dark:bg-gray-900"
-                    >
-                        <button
-                            type="button"
-                            @click="
-                                isResourceDropdownOpen = false;
-                                openCreateResourceModal();
-                            "
-                            class="block w-full cursor-pointer rounded-lg px-3 py-2 text-left text-xs font-medium text-slate-700 hover:bg-slate-50 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                        >
-                            Upload Single Resource
-                        </button>
-                        <button
-                            type="button"
-                            @click="
-                                isResourceDropdownOpen = false;
-                                isBulkImageModalOpen = true;
-                            "
-                            class="block w-full cursor-pointer rounded-lg px-3 py-2 text-left text-xs font-medium text-slate-700 hover:bg-slate-50 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                        >
-                            Upload Multiple Images
-                        </button>
-                        <button
-                            type="button"
-                            @click="
-                                isResourceDropdownOpen = false;
-                                isBulkVideoModalOpen = true;
-                            "
-                            class="block w-full cursor-pointer rounded-lg px-3 py-2 text-left text-xs font-medium text-slate-700 hover:bg-slate-50 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                        >
-                            Upload Multiple Videos
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Single Node Modal (Create / Edit) -->
-        <CreateNodeModal
-            :is-open="isSingleModalOpen"
-            :subject="subject"
-            :parent="parent"
-            :node="editingNode"
-            @close="handleNodeModalClose"
-        />
-
-        <!-- Single Resource Modal (Create / Edit) -->
-        <CreateResourceModal
-            v-if="parent"
-            :is-open="isSingleResourceModalOpen"
-            :node="parent"
-            :resource="editingResource"
-            @close="handleResourceModalClose"
-        />
-
-        <!-- Bulk Node Modal -->
-        <BulkNodeModal
-            :is-open="isBulkModalOpen"
-            :subject="subject"
-            :parent="parent"
-            @close="isBulkModalOpen = false"
-        />
-
-        <!-- Bulk Images Modal -->
-        <BulkImageModal
-            v-if="parent"
-            :is-open="isBulkImageModalOpen"
-            :node="parent"
-            @close="isBulkImageModalOpen = false"
-        />
-
-        <!-- Bulk Videos Modal -->
-        <BulkVideoModal
-            v-if="parent"
-            :is-open="isBulkVideoModalOpen"
-            :node="parent"
-            @close="isBulkVideoModalOpen = false"
-        />
-
-        <!-- Bulk Rename Modal -->
-        <BulkRenameModal
-            v-if="parent"
-            :is-open="isBulkRenameModalOpen"
-            :node="parent"
-            :resources="resources ?? []"
-            @close="isBulkRenameModalOpen = false"
-        />
-
-        <div class="flex flex-1 flex-col">
-            <template v-if="totalItemsCount > 0">
-                <div
-                    class="flex shrink-0 items-center justify-between rounded-t-lg border-b border-gray-100 bg-gray-50/70 px-4 py-2.5 text-xs font-semibold tracking-wider text-gray-400 uppercase dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-500"
-                >
-                    <span>Resources</span>
-
-                    <button
-                        v-if="can('edit resources') && resources?.length"
-                        type="button"
-                        @click="isBulkRenameModalOpen = true"
-                        class="inline-flex cursor-pointer items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium text-indigo-600 transition-colors hover:bg-indigo-50 hover:text-indigo-700 dark:text-indigo-400 dark:hover:bg-indigo-950/50 dark:hover:text-indigo-300"
-                    >
-                        <PencilLine class="h-3.5 w-3.5" />
-                        <span>Bulk Rename</span>
-                    </button>
-                </div>
-
-                <div class="flex flex-col gap-2.5 sm:gap-3">
-                    <NodeRow
-                        v-for="node in nodes"
-                        :key="`node-${node.id}`"
-                        :node="node"
-                        @edit="openEditNodeModal"
-                    />
-                    <ResourceRow
-                        v-for="resource in resources"
-                        :key="`resource-${resource.id}`"
-                        :resource="resource"
-                        @edit="openEditResourceModal"
-                    />
-                </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..48d8cde0
--- /dev/null
+++ b/resources/js/pages/admin/NoticeEdit.tsx
@@ -0,0 +1,467 @@
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { AlertCircle, Loader2, Save, Trash2, Upload } from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+
+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,
+        });
+
+        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): 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);
+            }
+        };
+
+        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="max-w-3xl space-y-5"
+                    >
+                        {/* Content */}
+                        <section class="space-y-4">
+                            <div>
+                                <h2 class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                    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={[
+                                        'w-full rounded-xl border bg-white px-3 py-2 text-sm text-slate-900 transition placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none disabled:opacity-50 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500',
+                                        form.errors.title
+                                            ? '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.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={[
+                                        'w-full rounded-xl border bg-white px-3 py-2 text-sm text-slate-900 transition placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none disabled:opacity-50 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500',
+                                        form.errors.message
+                                            ? '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.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 10MB)
+                                            </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-xl border border-slate-200 bg-white px-2.5 text-[11px] font-semibold text-slate-600 transition peer-focus-visible:outline-2 peer-focus-visible:outline-indigo-500 hover:bg-slate-50 active:scale-95 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+                                            >
+                                                Change
+                                            </label>
+                                            <button
+                                                type="button"
+                                                onClick={handleRemoveImage}
+                                                class="inline-flex h-8 cursor-pointer items-center gap-1 rounded-xl px-2.5 text-[11px] font-semibold text-rose-600 transition hover:bg-rose-50 focus-visible:outline-2 focus-visible:outline-indigo-500 active:scale-95 dark:text-rose-400 dark:hover:bg-rose-500/10"
+                                            >
+                                                <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 10MB)
+                                            </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="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                    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={[
+                                                'w-full rounded-xl border bg-white px-3 py-2 text-sm text-slate-900 transition placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none disabled:opacity-50 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500',
+                                                form.errors.button_title
+                                                    ? '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.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={[
+                                                'w-full rounded-xl border bg-white px-3 py-2 text-sm text-slate-900 transition placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none disabled:opacity-50 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500',
+                                                form.errors.button_link
+                                                    ? '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.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 switching this notice alive.
+                                    </span>
+                                </p>
+                            )}
+                        </section>
+
+                        <div class="flex flex-col gap-2 border-t border-slate-100 pt-4 sm:flex-row sm:justify-end dark:border-gray-800">
+                            <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.vue b/resources/js/pages/admin/PeerSettings.vue
index 5b8c7fa2..464f11fc 100644
--- a/resources/js/pages/admin/PeerSettings.vue
+++ b/resources/js/pages/admin/PeerSettings.vue
@@ -12,6 +12,7 @@ import {
     Sparkles,
 } from 'lucide-vue-next';
 import { ref } from 'vue';
+import { adminPageClass } from '@/components/admin/ui';
 
 interface PokePreset {
     id: string;
@@ -92,7 +93,9 @@ const submit = () => {
 <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">
+    <!-- AdminLayout already pads page content; no extra padding here
+         or this page renders narrower/wider than its siblings. -->
+    <div :class="['mx-auto max-w-5xl', adminPageClass]">
         <!-- Header -->
         <div
             class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
diff --git a/resources/js/pages/admin/Product.vue b/resources/js/pages/admin/Product.vue
index 7dac5085..841a6f78 100644
--- a/resources/js/pages/admin/Product.vue
+++ b/resources/js/pages/admin/Product.vue
@@ -2,6 +2,7 @@
 import { Head, Link } from '@inertiajs/vue3';
 import { Plus } from 'lucide-vue-next';
 import ProductRow from '@/components/admin/ProductRow.vue';
+import { adminPageClass, adminPrimaryBtnClass } from '@/components/admin/ui';
 import EmptyState from '@/components/EmptyState.vue';
 import { usePermissions } from '@/lib/usePermissions';
 
@@ -18,29 +19,37 @@ defineProps({
 <template>
     <Head title="Manage Products" />
 
-    <div class="flex w-full flex-1 flex-col">
+    <div :class="adminPageClass">
         <!-- Compact Page Title Bar -->
         <div
-            class="mb-4 flex shrink-0 items-center justify-between gap-3 border-b border-slate-100 pb-3 dark:border-gray-800"
+            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 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 Products
-                </h3>
+            <div class="min-w-0">
+                <div class="flex items-center gap-2">
+                    <h1
+                        class="truncate text-lg font-bold tracking-tight text-slate-900 dark:text-gray-100"
+                    >
+                        Manage Products
+                    </h1>
 
-                <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"
-                >
-                    {{ products.length }}
-                </span>
+                    <span
+                        class="inline-flex items-center rounded-md bg-indigo-50 px-1.5 py-0.5 text-[11px] font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400"
+                    >
+                        {{ products.length }}
+                    </span>
+                </div>
+                <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                    Showcase products and manage their visibility.
+                </p>
             </div>
 
-            <div v-if="can('manage products')" class="flex items-center gap-2">
+            <div
+                v-if="can('manage products')"
+                class="flex shrink-0 items-center gap-2"
+            >
                 <Link
                     href="/admin/products/create"
-                    class="inline-flex 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"
+                    :class="adminPrimaryBtnClass"
                 >
                     <Plus class="h-3.5 w-3.5" :stroke-width="2.2" />
                     <span>Create Product</span>
diff --git a/resources/js/pages/admin/ProductCreateOrEdit.vue b/resources/js/pages/admin/ProductCreateOrEdit.vue
index 20f09a83..72885eae 100644
--- a/resources/js/pages/admin/ProductCreateOrEdit.vue
+++ b/resources/js/pages/admin/ProductCreateOrEdit.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { Head, Link, useForm } from '@inertiajs/vue3';
 import { ArrowLeft, Loader2, Save } from 'lucide-vue-next';
+import {
+    adminIconBtnClass,
+    adminPageClass,
+    adminPageDescriptionClass,
+    adminPageTitleClass,
+} from '@/components/admin/ui';
 import ImageUpload from '@/components/ImageUpload.vue';
 
 const props = defineProps({
@@ -40,26 +46,24 @@ const submitForm = () => {
 <template>
     <Head :title="product ? `Edit ${product.name}` : 'Create Product'" />
 
-    <div class="flex w-full flex-1 flex-col">
+    <div :class="adminPageClass">
         <!-- Page Header -->
         <div
-            class="mb-6 flex flex-col justify-between gap-4 border-b border-slate-200 pb-5 sm:flex-row sm:items-center dark:border-gray-800"
+            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 class="flex items-center gap-3">
+            <div class="flex min-w-0 items-center gap-2">
                 <Link
                     href="/admin/products"
-                    class="rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+                    :class="adminIconBtnClass"
                     title="Back to products"
                 >
-                    <ArrowLeft class="h-5 w-5" />
+                    <ArrowLeft class="h-4 w-4" />
                 </Link>
-                <div>
-                    <h1
-                        class="text-xl font-bold text-slate-900 dark:text-gray-100"
-                    >
+                <div class="min-w-0">
+                    <h1 :class="adminPageTitleClass">
                         {{ props.product ? 'Edit' : 'Create' }} Product
                     </h1>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                    <p :class="adminPageDescriptionClass">
                         Configure showcase products displayed on the /products
                         page.
                     </p>
@@ -195,15 +199,25 @@ const submitForm = () => {
                     <select
                         v-model="form.open_type"
                         id="open_type"
-                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none dark:bg-gray-900 dark:text-gray-100"
+                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none dark:bg-gray-900 dark:text-gray-100 dark:[color-scheme:dark]"
                         :class="
                             form.errors.open_type
                                 ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
                                 : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
                         "
                     >
-                        <option value="_blank">New Tab (_blank)</option>
-                        <option value="_self">Same Page (_self)</option>
+                        <option
+                            value="_blank"
+                            class="bg-white text-slate-900 dark:bg-gray-900 dark:text-gray-100"
+                        >
+                            New Tab (_blank)
+                        </option>
+                        <option
+                            value="_self"
+                            class="bg-white text-slate-900 dark:bg-gray-900 dark:text-gray-100"
+                        >
+                            Same Page (_self)
+                        </option>
                     </select>
                     <p
                         v-if="form.errors.open_type"
diff --git a/resources/js/pages/admin/Tickets.tsx b/resources/js/pages/admin/Tickets.tsx
new file mode 100644
index 00000000..b9df7948
--- /dev/null
+++ b/resources/js/pages/admin/Tickets.tsx
@@ -0,0 +1,598 @@
+import { Head, Link, router, useForm } from '@inertiajs/vue3';
+import {
+    LifeBuoy,
+    MessageSquare,
+    Search,
+    Send,
+    Trash2,
+    Image as ImageIcon,
+} from 'lucide-vue-next';
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    AdminSelect,
+    SegmentedTabs,
+    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 { 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',
+        });
+
+        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();
+                },
+            });
+        };
+
+        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 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="flex flex-col gap-2 rounded-xl px-3 py-3.5 transition hover:bg-slate-50 sm:flex-row sm:items-start sm:justify-between dark:hover:bg-gray-800/50"
+                                        >
+                                            <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.admin_reply ? (
+                                                        <span> · Replied</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-100 pt-4 dark:border-gray-800">
+                                    <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>
+                                                    <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                                                        Your response
+                                                    </label>
+                                                    <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-lg border border-slate-200 bg-white p-3 text-sm leading-relaxed text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none 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 f0432522..00000000
--- a/resources/js/pages/admin/Tickets.vue
+++ /dev/null
@@ -1,611 +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
-                            >
-                        </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>
-                            <label
-                                class="mb-1 block text-xs font-bold text-slate-700 dark:text-gray-300"
-                            >
-                                Your Response / Staff Message
-                            </label>
-                            <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..fa8837c4
--- /dev/null
+++ b/resources/js/pages/admin/chat/Reports.tsx
@@ -0,0 +1,411 @@
+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,
+    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) {
+        const currentFilter = ref<ReportFilter>('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,
+                });
+            }
+        };
+
+        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);
+
+        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)
+                        }
+                    />
+
+                    {/* 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="flex items-start gap-3 rounded-xl px-3 py-3.5 transition hover:bg-slate-50 dark:hover:bg-gray-800/50"
+                                    >
+                                        <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..9bb44cb3
--- /dev/null
+++ b/resources/js/pages/admin/forums/Index.tsx
@@ -0,0 +1,527 @@
+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})`,
+                },
+            ],
+        );
+
+        const statusToneClass = (status: ModerationStatus): string =>
+            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'
+                : 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'
+                  : 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300';
+
+        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-xl 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-xl px-3 py-2.5 text-right whitespace-nowrap">
+                                                Actions
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-slate-100 dark:divide-gray-800">
+                                        {props.posts.data.map((post) => (
+                                            <tr
+                                                key={post.id}
+                                                class="transition hover:bg-slate-50 dark:hover:bg-gray-800/50 last:[&>td:first-child]:rounded-bl-xl last:[&>td:last-child]:rounded-br-xl"
+                                            >
+                                                <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-100 pt-4 dark:border-gray-800">
+                                <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..1ed73d3c
--- /dev/null
+++ b/resources/js/pages/admin/forums/Reports.tsx
@@ -0,0 +1,449 @@
+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,
+    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();
+
+        const currentFilter = ref<ForumReportFilter>('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,
+                });
+            }
+        };
+
+        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);
+
+        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)
+                        }
+                    />
+
+                    {/* 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="flex items-start gap-3 rounded-xl px-3 py-3.5 transition hover:bg-slate-50 dark:hover:bg-gray-800/50"
+                                    >
+                                        <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..3bac4a66
--- /dev/null
+++ b/resources/js/pages/admin/forums/Settings.tsx
@@ -0,0 +1,422 @@
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Flag, Loader2, Save, Settings } from 'lucide-vue-next';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminListClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSegmentedActiveClass,
+    adminSegmentedIdleClass,
+    adminSubNavBadgeClass,
+    adminSubNavClass,
+    adminSubNavLinkClass,
+} from '@/components/admin/ui';
+
+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,
+        });
+
+        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="max-w-4xl space-y-5">
+                        {/* 1. Approval */}
+                        <section class="space-y-3">
+                            <div>
+                                <h2 class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                    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-0.5 rounded-xl bg-slate-100 p-1 dark:bg-gray-800"
+                            >
+                                <label
+                                    class={[
+                                        'cursor-pointer rounded-lg px-2.5 py-1 text-xs font-semibold transition-all 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-lg px-2.5 py-1 text-xs font-semibold transition-all 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 border-t border-slate-100 pt-5 dark:border-gray-800">
+                            <div>
+                                <h2 class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                    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-xl border border-slate-200 bg-white px-3 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-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 border-t border-slate-100 pt-5 dark:border-gray-800">
+                            <div>
+                                <h2 class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400">
+                                    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-xl border border-slate-200 bg-white px-2.5 text-center text-xs font-semibold text-slate-900 transition outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 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-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-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-100 pt-4 dark:border-gray-800">
+                            <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/users/CreateOrEdit.tsx b/resources/js/pages/admin/users/CreateOrEdit.tsx
new file mode 100644
index 00000000..5143a0b7
--- /dev/null
+++ b/resources/js/pages/admin/users/CreateOrEdit.tsx
@@ -0,0 +1,708 @@
+/**
+ * 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, UserPlus } from 'lucide-vue-next';
+import { defineComponent, onUnmounted, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import {
+    AdminPageHeader,
+    adminNativePopupClass,
+    adminOptionClass,
+    adminPageClass,
+    adminPrimaryBtnClass,
+    adminSecondaryBtnClass,
+} from '@/components/admin/ui';
+
+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;
+    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' },
+            { value: 'manager', label: 'Manager' },
+        ];
+
+        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),
+            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.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;
+            }
+        });
+
+        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]);
+            }
+        };
+
+        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 sectionTitleClass =
+            'text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400';
+
+        const inputClass = (hasError: unknown) => [
+            'h-9 w-full rounded-xl border bg-white px-3 text-xs text-slate-900 transition outline-none placeholder:text-slate-400 focus:ring-2 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',
+            hasError
+                ? 'border-rose-500 focus:border-rose-500 focus:ring-rose-500/20'
+                : 'border-slate-200 focus:border-indigo-500 focus:ring-indigo-500/20 dark:border-gray-700 dark:focus:border-indigo-400',
+        ];
+
+        const textareaClass = (hasError: unknown) => [
+            'w-full rounded-xl border bg-white px-3 py-2 text-xs text-slate-900 transition outline-none placeholder:text-slate-400 focus:ring-2 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',
+            hasError
+                ? 'border-rose-500 focus:border-rose-500 focus:ring-rose-500/20'
+                : 'border-slate-200 focus:border-indigo-500 focus:ring-indigo-500/20 dark:border-gray-700 dark:focus:border-indigo-400',
+        ];
+
+        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="max-w-3xl space-y-5">
+                        {/* Account */}
+                        <div class="space-y-4">
+                            <h2 class={sectionTitleClass}>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>
+
+                        {/* Profile */}
+                        <div class="space-y-4 border-t border-slate-100 pt-5 dark:border-gray-800">
+                            <h2 class={sectionTitleClass}>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-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500 transition 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 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 border-t border-slate-100 pt-5 dark:border-gray-800">
+                                <div>
+                                    <h2 class={sectionTitleClass}>
+                                        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 border-t border-slate-100 pt-5 sm:grid-cols-3 dark:border-gray-800">
+                            <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 class="space-y-1 border-l-2 border-amber-500 pl-3">
+                                <div class="text-xs font-bold text-amber-700 dark:text-amber-400">
+                                    Manager
+                                </div>
+                                <div class="text-[11px] leading-relaxed text-slate-500 dark:text-gray-400">
+                                    Dashboard view. Basic view access with no
+                                    modification capabilities.
+                                </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 bf0bcc1f..00000000
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ /dev/null
@@ -1,607 +0,0 @@
-<script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { UserPlus, Loader2, Save, BadgeCheck } 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' },
-    { value: 'manager', label: 'Manager' },
-];
-
-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),
-    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>
-
-            <!-- 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 class="space-y-1 border-l-2 border-amber-500 pl-3">
-                        <div class="text-xs font-bold text-amber-700">
-                            Manager
-                        </div>
-                        <div
-                            class="text-xs leading-relaxed text-slate-600 dark:text-gray-400"
-                        >
-                            Dashboard view. Basic view access with no
-                            modification capabilities.
-                        </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..699711cf
--- /dev/null
+++ b/resources/js/pages/admin/users/Index.tsx
@@ -0,0 +1,282 @@
+/**
+ * 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,
+    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') || ''
+                    : ''),
+        );
+
+        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-2.5 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="flex flex-col gap-2">
+                                {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-100 pt-4 dark:border-gray-800">
+                                <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 27ee98ab..caaf4f8a 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -79,6 +79,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');
 
@@ -406,7 +416,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>