From 0d912305cf76fa8212125c548b76319a9dbb2349 Mon Sep 17 00:00:00 2001
From: TR Tajim <com.tajim@gmail.com>
Date: Sat, 10 Oct 2026 22:58:09 +0600
Subject: [PATCH 1/2] feat(admin): replace custom admin nav with global rail
 and add dashboard tool hub

---
 resources/js/layouts/AdminLayout.vue   | 167 ++-----
 resources/js/pages/admin/Dashboard.vue | 655 +++++++++++++++----------
 2 files changed, 448 insertions(+), 374 deletions(-)

diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index 8bae17dd..dec789fd 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -1,166 +1,90 @@
 <script setup lang="ts">
-import { usePage } from '@inertiajs/vue3';
 import { computed, ref, watch } from 'vue';
 
-import AppLogo from '@/components/AppLogo.vue';
 import AtmosphericBackground from '@/components/AtmosphericBackground.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import {
-    AdminDrawer as MobileSideBar,
-    AdminRail as AdminSideRail,
     SiteBottomNav as BottomNav,
+    SiteDrawer as OverflowDrawer,
+    SiteRail as SideRail,
 } from '@/components/navigation/Navigation';
-import type { AdminNavItem } from '@/components/navigation/Navigation';
-import NotificationDropdown from '@/components/NotificationDropdown.vue';
 import ToastNotification from '@/components/ToastNotification.vue';
-import MaterialIcon from '@/components/ui/MaterialIcon.vue';
-import { usePermissions } from '@/lib/usePermissions';
+import { useBreakpoint } from '@/lib/useBreakpoint';
+import { useOrientation } from '@/lib/useOrientation';
 
-const { can } = usePermissions();
-const page = usePage();
-const user = computed(
-    () => (page.props.auth as any)?.user as App.Data.UserData | undefined,
+const { isLandscape, isHydrated: orientationHydrated } = useOrientation();
+const { isMobile, isHydrated: breakpointHydrated } = useBreakpoint(1024);
+const isHydrated = computed(
+    () => orientationHydrated.value && breakpointHydrated.value,
 );
 
-const isMobileSidebarOpen = ref(false);
-const adminCollapsed = ref(false);
+const showSideRail = computed(() =>
+    isHydrated.value ? !isMobile.value && isLandscape.value : true,
+);
+const showBottomNav = computed(() =>
+    isHydrated.value ? isMobile.value || !isLandscape.value : false,
+);
+
+const railCollapsed = ref(false);
 
 if (typeof window !== 'undefined') {
     try {
-        const saved = localStorage.getItem('admin_rail_collapsed');
+        const saved = localStorage.getItem('rail_collapsed');
 
         if (saved !== null) {
-            adminCollapsed.value = saved === 'true';
+            railCollapsed.value = saved === 'true';
         }
     } catch {}
 }
 
-watch(adminCollapsed, (v) => {
+watch(railCollapsed, (v) => {
     try {
-        localStorage.setItem('admin_rail_collapsed', String(v));
+        localStorage.setItem('rail_collapsed', String(v));
     } catch {}
 });
 
-const allNavigation: AdminNavItem[] = [
-    { name: 'Dashboard', to: '/admin', icon: 'dashboard' },
-    {
-        name: 'Resource Moderation',
-        to: '/admin/moderation/resources',
-        icon: 'fact_check',
-        permission: 'moderate resources',
-    },
-    { name: 'Manage Contents', to: '/admin/subjects', icon: 'menu_book' },
-    {
-        name: 'Manage Forum',
-        to: '/admin/forums',
-        icon: 'forum',
-        permission: 'manage forums',
-    },
-    {
-        name: 'Support Tickets',
-        to: '/admin/tickets',
-        icon: 'confirmation_number',
-        permission: 'manage tickets',
-    },
-    {
-        name: 'Site Notice',
-        to: '/admin/notice',
-        icon: 'notifications',
-        permission: 'edit notice',
-    },
-    {
-        name: 'Global Chat',
-        to: '/admin/chat',
-        icon: 'chat',
-        permission: 'manage chat',
-    },
-    {
-        name: 'Users',
-        to: '/admin/users',
-        icon: 'group',
-        permission: 'view users',
-    },
-    {
-        name: 'Peer & Pokes',
-        to: '/admin/peers/settings',
-        icon: 'bolt',
-        permission: 'manage peers',
-    },
-    {
-        name: 'Send Emails',
-        to: '/admin/emails/send',
-        icon: 'mail',
-        permission: 'send email',
-    },
-];
-
-const navigation = computed(() =>
-    allNavigation.filter((item) => !item.permission || can(item.permission)),
-);
-
-const openMobileSidebar = () => {
-    isMobileSidebarOpen.value = true;
+const toggleRail = () => {
+    railCollapsed.value = !railCollapsed.value;
 };
 
-const closeMobileSidebar = () => {
-    isMobileSidebarOpen.value = false;
-};
+const drawerOpen = ref(false);
 </script>
 
 <template>
     <LoadingSpinner />
     <div
-        class="min-h-screen overflow-x-clip bg-slate-100/70 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
+        class="relative min-h-screen overflow-x-clip bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
     >
         <AtmosphericBackground />
+
         <div class="relative z-10 flex min-h-screen">
-            <!-- Desktop staff rail — unified with site SideRail -->
-            <AdminSideRail
-                :navigation="navigation"
-                :collapsed="adminCollapsed"
-                class="hidden md:flex"
-                @toggle="adminCollapsed = !adminCollapsed"
+            <!-- Desktop side rail - Global uniform navigation -->
+            <SideRail
+                v-if="showSideRail"
+                :collapsed="railCollapsed"
+                @toggle="toggleRail"
             />
 
             <div class="flex min-h-screen w-full min-w-0 flex-1 flex-col">
-                <!-- Single mobile top bar (replaces old NavBar + subheader duplication) -->
-                <div
-                    class="sticky top-0 z-30 flex h-[56px] items-center gap-2.5 border-b border-slate-200/70 bg-white/90 px-3.5 backdrop-blur-xl md:hidden dark:border-slate-800 dark:bg-slate-900/90"
-                >
-                    <button
-                        type="button"
-                        @click="openMobileSidebar"
-                        class="flex h-9 w-9 items-center justify-center rounded-full text-slate-700 transition-colors hover:bg-slate-100 active:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-800"
-                        aria-label="Open staff menu"
-                    >
-                        <MaterialIcon name="menu" :size="24" />
-                    </button>
-                    <div class="ml-1">
-                        <AppLogo />
-                    </div>
-                    <span
-                        class="ml-1 rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-bold tracking-wider text-indigo-600 uppercase dark:bg-indigo-500/10 dark:text-indigo-300"
-                    >
-                        Staff
-                    </span>
-                    <div class="ml-auto flex items-center gap-1.5">
-                        <NotificationDropdown v-if="user" />
-                    </div>
-                </div>
-
-                <!-- Single mobile drawer (admin links only) -->
-                <MobileSideBar
-                    :navigation="navigation"
-                    :is-open="isMobileSidebarOpen"
-                    @close="closeMobileSidebar"
+                <!-- Mobile top bar + drawer -->
+                <OverflowDrawer
+                    v-if="showBottomNav"
+                    :open="drawerOpen"
+                    @update:open="drawerOpen = $event"
+                    @close="drawerOpen = false"
                 />
 
                 <!-- 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="[
+                        'min-w-0 flex-1 p-3.5 sm:p-6 lg:p-8',
+                        showBottomNav
+                            ? 'pb-[calc(4.5rem+env(safe-area-inset-bottom))]'
+                            : 'min-h-[calc(100vh-4rem)] pb-6',
+                    ]"
                 >
                     <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"
+                        class="flex w-full flex-1 flex-col rounded-2xl border border-slate-200/90 bg-white p-4.5 shadow-2xs sm:p-7 md:p-8 dark:border-gray-800 dark:bg-gray-900"
                     >
                         <slot />
                     </div>
@@ -168,10 +92,7 @@ const closeMobileSidebar = () => {
             </div>
         </div>
 
-        <!-- Site bottom nav on mobile (same as AppLayout) -->
-        <div class="md:hidden">
-            <BottomNav />
-        </div>
+        <BottomNav v-if="showBottomNav" />
         <ToastNotification />
     </div>
 </template>
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index 760c97cc..f4016d33 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -2,18 +2,30 @@
 import { Head, Link } from '@inertiajs/vue3';
 import {
     LayoutGrid,
-    Sparkles,
     Users,
     Eye,
     Share2,
-    BookOpen,
-    ArrowRight,
     Zap,
     RefreshCw,
     BarChart3,
+    CheckSquare,
+    BookOpen,
+    MessageSquare,
+    LifeBuoy,
+    Bell,
+    MessageCircle,
+    UserCheck,
+    Radio,
+    Mail,
+    FileText,
+    Boxes,
+    ArrowUpRight,
 } from 'lucide-vue-next';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import EmptyState from '@/components/EmptyState.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+const { can } = usePermissions();
 
 const props = defineProps<{
     totalAccounts?: number;
@@ -24,6 +36,100 @@ const isLoading = ref(false);
 const hasFetched = ref(false);
 const errorMsg = ref<string | null>(null);
 
+const adminTools = [
+    {
+        name: 'Resource Moderation',
+        description: 'Review and approve community submitted study materials',
+        href: '/admin/moderation/resources',
+        icon: CheckSquare,
+        color: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-500/10 dark:text-emerald-400',
+        permission: 'moderate resources',
+    },
+    {
+        name: 'Manage Contents',
+        description: 'Syllabus, subjects, chapters and learning resources',
+        href: '/admin/subjects',
+        icon: BookOpen,
+        color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-500/10 dark:text-indigo-400',
+    },
+    {
+        name: 'Manage Forum',
+        description: 'Categories, pinned questions, and moderation',
+        href: '/admin/forums',
+        icon: MessageSquare,
+        color: 'text-blue-600 bg-blue-50 dark:bg-blue-500/10 dark:text-blue-400',
+        permission: 'manage forums',
+    },
+    {
+        name: 'Support Tickets',
+        description: 'View and respond to student help tickets',
+        href: '/admin/tickets',
+        icon: LifeBuoy,
+        color: 'text-amber-600 bg-amber-50 dark:bg-amber-500/10 dark:text-amber-400',
+        permission: 'manage tickets',
+    },
+    {
+        name: 'Site Notice',
+        description: 'Broadcast system banner and maintenance alerts',
+        href: '/admin/notice',
+        icon: Bell,
+        color: 'text-purple-600 bg-purple-50 dark:bg-purple-500/10 dark:text-purple-400',
+        permission: 'edit notice',
+    },
+    {
+        name: 'Global Chat',
+        description: 'Live chat room moderation and flagged messages',
+        href: '/admin/chat',
+        icon: MessageCircle,
+        color: 'text-teal-600 bg-teal-50 dark:bg-teal-500/10 dark:text-teal-400',
+        permission: 'manage chat',
+    },
+    {
+        name: 'Users & Roles',
+        description: 'Directory, verification badges, and permissions',
+        href: '/admin/users',
+        icon: UserCheck,
+        color: 'text-sky-600 bg-sky-50 dark:bg-sky-500/10 dark:text-sky-400',
+        permission: 'view users',
+    },
+    {
+        name: 'Peer & Pokes',
+        description: 'Community interactions and study buddy settings',
+        href: '/admin/peers/settings',
+        icon: Radio,
+        color: 'text-rose-600 bg-rose-50 dark:bg-rose-500/10 dark:text-rose-400',
+        permission: 'manage peers',
+    },
+    {
+        name: 'Send Emails',
+        description: 'Compose announcements and system updates',
+        href: '/admin/emails/send',
+        icon: Mail,
+        color: 'text-orange-600 bg-orange-50 dark:bg-orange-500/10 dark:text-orange-400',
+        permission: 'send email',
+    },
+    {
+        name: 'Blogs & Articles',
+        description: 'Public authoring, editorial drafts, and posts',
+        href: '/blogs',
+        icon: FileText,
+        color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-500/10 dark:text-indigo-400',
+        permission: 'manage blogs',
+    },
+    {
+        name: 'Products & Projects',
+        description: 'Public showcase platform apps and tools',
+        href: '/products',
+        icon: Boxes,
+        color: 'text-cyan-600 bg-cyan-50 dark:bg-cyan-500/10 dark:text-cyan-400',
+        permission: 'manage products',
+    },
+];
+
+const visibleTools = computed(() =>
+    adminTools.filter((tool) => !tool.permission || can(tool.permission)),
+);
+
 const fetchAnalytics = async (refresh = false) => {
     isLoading.value = true;
     errorMsg.value = null;
@@ -34,13 +140,13 @@ const fetchAnalytics = async (refresh = false) => {
         );
 
         if (!res.ok) {
-            throw new Error('Analytics ডাটা লোড করা যায়নি');
+            throw new Error('Analytics could not be loaded');
         }
 
         stats.value = await res.json();
         hasFetched.value = true;
     } catch (e: any) {
-        errorMsg.value = e.message || 'Analytics লোড করতে সমস্যা হয়েছে';
+        errorMsg.value = e.message || 'Failed to load analytics';
     } finally {
         isLoading.value = false;
     }
@@ -48,78 +154,118 @@ const fetchAnalytics = async (refresh = false) => {
 </script>
 
 <template>
-    <Head title="Staff Panel" />
+    <Head title="Staff Dashboard" />
 
-    <div class="animate-fade-in mx-auto max-w-7xl space-y-6 p-1">
-        <!-- Main Dashboard Header -->
+    <div class="animate-fade-in mx-auto max-w-7xl space-y-6">
+        <!-- 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"
+            class="flex flex-col gap-3 border-b border-slate-100 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
         >
+            <div>
+                <h1
+                    class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
+                >
+                    Dashboard
+                </h1>
+                <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                    Staff workspace and management portal
+                </p>
+            </div>
+
+            <!-- On-Demand Load / Reload Button -->
+            <button
+                type="button"
+                @click="fetchAnalytics(hasFetched)"
+                :disabled="isLoading"
+                class="inline-flex w-fit items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-700 shadow-2xs transition-colors hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-600 active:scale-95 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
+            >
+                <RefreshCw
+                    class="h-3.5 w-3.5"
+                    :class="{ 'animate-spin': isLoading }"
+                />
+                <span>{{
+                    hasFetched
+                        ? isLoading
+                            ? 'Refreshing...'
+                            : 'Reload Analytics'
+                        : isLoading
+                          ? 'Loading...'
+                          : 'Load Analytics'
+                }}</span>
+            </button>
+        </div>
+
+        <!-- Management Tools Grid -->
+        <div>
+            <div class="mb-3 flex items-center justify-between">
+                <h2
+                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
+                >
+                    Management Tools
+                </h2>
+                <span
+                    class="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-600 dark:bg-gray-800 dark:text-gray-400"
+                >
+                    {{ visibleTools.length }} Available
+                </span>
+            </div>
+
             <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"
+                class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
             >
-                <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" />
+                <Link
+                    v-for="tool in visibleTools"
+                    :key="tool.href"
+                    :href="tool.href"
+                    class="group relative flex flex-col justify-between rounded-xl border border-slate-200/80 bg-white p-4 shadow-2xs transition-all duration-150 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-xs dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/40"
+                >
+                    <div class="flex items-start justify-between gap-3">
+                        <div
+                            :class="[
+                                'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-colors',
+                                tool.color,
+                            ]"
+                        >
+                            <component
+                                :is="tool.icon"
+                                class="h-5 w-5 stroke-[1.9]"
+                            />
+                        </div>
+                        <ArrowUpRight
+                            class="h-4 w-4 text-slate-400 opacity-0 transition-all duration-150 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-gray-500 dark:group-hover:text-indigo-400"
+                        />
                     </div>
-                    <div>
-                        <h1
-                            class="text-lg font-bold tracking-tight text-slate-900 sm:text-xl dark:text-gray-100"
+
+                    <div class="mt-3.5">
+                        <h3
+                            class="text-sm font-bold text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
                         >
-                            Dashboard
-                        </h1>
+                            {{ tool.name }}
+                        </h3>
                         <p
-                            class="mt-0.5 text-xs text-slate-600 dark:text-gray-400"
+                            class="mt-1 line-clamp-2 text-xs text-slate-500 dark:text-gray-400"
                         >
-                            অ্যাডমিন ওয়ার্কস্পেসের সামগ্রিক তথ্য ও
-                            অ্যানালিটিক্স।
+                            {{ tool.description }}
                         </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>
+                </Link>
             </div>
         </div>
 
-        <!-- Overview Stats Grid -->
-        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <!-- Overview Quick Stats -->
+        <div class="grid gap-3 sm: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"
+                class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
             >
                 <div class="flex items-center justify-between">
                     <div>
                         <p
-                            class="text-xs font-bold tracking-wider text-slate-600 uppercase dark:text-gray-400"
+                            class="text-[11px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                         >
                             Total Accounts
                         </p>
                         <h3
-                            class="mt-2 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
+                            class="mt-1 text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
                         >
                             {{
                                 (
@@ -129,262 +275,269 @@ const fetchAnalytics = async (refresh = false) => {
                                 ).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"
+                        class="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
                     >
-                        <Users class="h-5 w-5" />
+                        <Users class="h-4.5 w-4.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"
+                class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
             >
-                <div class="flex items-start gap-3 sm:items-center">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p
+                            class="text-[11px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
+                        >
+                            Active Now (5m)
+                        </p>
+                        <h3
+                            class="mt-1 text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
+                        >
+                            {{
+                                stats?.realtime_users ?? (hasFetched ? 0 : '—')
+                            }}
+                        </h3>
+                    </div>
                     <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"
+                        class="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"
                     >
-                        <BookOpen class="h-4.5 w-4.5" />
+                        <Zap class="h-4.5 w-4.5" />
                     </div>
+                </div>
+            </div>
+
+            <div
+                class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
+            >
+                <div class="flex items-center justify-between">
                     <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"
+                            class="text-[11px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                         >
-                            সাবজেক্ট ম্যানেজ, রিসোর্স আপলোড, ব্লগ তৈরি ও প্যানেল
-                            পারমিশন সংক্রান্ত বিস্তারিত গাইডলাইন দেখুন।
+                            Monthly Visits
                         </p>
+                        <h3
+                            class="mt-1 text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
+                        >
+                            {{
+                                stats?.total_visits
+                                    ? stats.total_visits.toLocaleString()
+                                    : hasFetched
+                                      ? 0
+                                      : '—'
+                            }}
+                        </h3>
+                    </div>
+                    <div
+                        class="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400"
+                    >
+                        <Eye class="h-4.5 w-4.5" />
                     </div>
                 </div>
+            </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"
+        <!-- Analytics Section -->
+        <div class="space-y-4">
+            <div class="flex items-center justify-between">
+                <h2
+                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                 >
-                    <span>গাইড দেখুন</span>
-                    <ArrowRight
-                        class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5"
-                    />
-                </Link>
+                    Live Traffic & Analytics
+                </h2>
+                <span
+                    v-if="hasFetched"
+                    class="text-xs text-slate-400 dark:text-gray-500"
+                >
+                    Last 30 days
+                </span>
             </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"
+            <!-- Unloaded State Placeholder -->
+            <EmptyState
+                v-if="!hasFetched && !isLoading"
+                :icon="BarChart3"
+                variant="dashed"
+                title="Live analytics ready on demand"
+                description="Metrics are fetched on demand to keep page load instantaneous. Click below to load."
             >
-                <RefreshCw class="h-3.5 w-3.5" />
-                <span>Fetch Live Analytics</span>
-            </button>
-        </EmptyState>
+                <button
+                    type="button"
+                    @click="fetchAnalytics(false)"
+                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition-colors hover:bg-indigo-700 active:scale-95"
+                >
+                    <RefreshCw class="h-3.5 w-3.5" />
+                    <span>Fetch Analytics</span>
+                </button>
+            </EmptyState>
 
-        <!-- Loading 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"
+            <!-- Loading Spinner -->
+            <div
+                v-else-if="isLoading && !hasFetched"
+                class="flex flex-col items-center justify-center rounded-2xl border border-slate-200 bg-white py-14 text-center shadow-2xs dark:border-gray-800 dark:bg-gray-900"
             >
-                বিগত ৩০ দিনের অ্যানালিটিক্স লোড হচ্ছে...
-            </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"
+                <RefreshCw
+                    class="h-7 w-7 animate-spin text-indigo-600 dark:text-indigo-400"
+                />
+                <p
+                    class="mt-2.5 text-xs font-medium text-slate-500 dark:text-gray-400"
                 >
-                    <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"
+                    Loading metrics...
+                </p>
+            </div>
+
+            <!-- Metrics (Once loaded) -->
+            <div v-else class="grid gap-4 md:grid-cols-2">
+                <div class="space-y-3">
+                    <!-- Realtime Active -->
+                    <div
+                        class="rounded-xl border border-emerald-200/80 bg-emerald-50/40 p-4 shadow-2xs dark:border-emerald-500/30 dark:bg-emerald-950/20"
+                    >
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2">
+                                <span class="relative flex h-2 w-2">
+                                    <span
+                                        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"
+                                    />
+                                    <span
+                                        class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"
+                                    />
+                                </span>
+                                <p
+                                    class="text-xs font-bold tracking-wider text-emerald-900 uppercase dark:text-emerald-300"
+                                >
+                                    Active Now
+                                </p>
+                            </div>
+                            <span
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                                >Past 5 mins</span
                             >
-                                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 class="mt-2">
+                            <h3
+                                class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
+                            >
+                                {{ stats?.realtime_users ?? 0 }}
+                            </h3>
                         </div>
                     </div>
-                    <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" />
+                    <!-- Total Visits -->
+                    <div
+                        class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
+                    >
+                        <div class="flex items-center justify-between">
+                            <p
+                                class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                            >
+                                Total Visits
+                            </p>
+                            <Eye
+                                class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
+                            />
+                        </div>
+                        <div class="mt-2">
+                            <h3
+                                class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
+                            >
+                                {{ stats?.total_visits?.toLocaleString() ?? 0 }}
+                            </h3>
+                            <p
+                                class="mt-0.5 text-xs text-slate-400 dark:text-gray-500"
+                            >
+                                Pageviews recorded
+                            </p>
                         </div>
                     </div>
-                    <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" />
+                    <!-- Unique Visitors -->
+                    <div
+                        class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
+                    >
+                        <div class="flex items-center justify-between">
+                            <p
+                                class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                            >
+                                Unique Visitors
+                            </p>
+                            <Users
+                                class="h-4 w-4 text-blue-600 dark:text-blue-400"
+                            />
+                        </div>
+                        <div class="mt-2">
+                            <h3
+                                class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
+                            >
+                                {{ stats?.total_users?.toLocaleString() ?? 0 }}
+                            </h3>
+                            <p
+                                class="mt-0.5 text-xs text-slate-400 dark:text-gray-500"
+                            >
+                                Distinct visitors
+                            </p>
                         </div>
-                    </div>
-                    <div 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"
-            >
+                <!-- Top Traffic Sources -->
                 <div
-                    class="flex items-center gap-3 border-b border-slate-100 pb-3.5 dark:border-gray-800"
+                    class="flex flex-col rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
                 >
                     <div
-                        class="flex 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"
+                        class="flex items-center gap-2 border-b border-slate-100 pb-3 dark:border-gray-800"
                     >
-                        <Share2 class="h-4 w-4" />
-                    </div>
-                    <div>
+                        <Share2
+                            class="h-4 w-4 text-slate-500 dark:text-gray-400"
+                        />
                         <h3
-                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                            class="text-xs font-bold tracking-wider text-slate-900 uppercase 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 class="mt-3 flex-1">
                         <div
-                            v-for="(source, index) in stats.top_sources"
-                            :key="index"
-                            class="flex items-center justify-between py-2.5"
+                            v-if="stats?.top_sources?.length"
+                            class="divide-y divide-slate-100 dark:divide-gray-800"
                         >
-                            <div class="w-2/3 pr-4">
-                                <p
-                                    class="truncate text-xs font-semibold text-slate-700 dark:text-gray-300"
+                            <div
+                                v-for="(source, index) in stats.top_sources"
+                                :key="index"
+                                class="flex items-center justify-between py-2 text-xs"
+                            >
+                                <span
+                                    class="truncate font-medium text-slate-700 dark:text-gray-300"
                                     :title="source.source"
                                 >
                                     {{ source.source || 'Direct / Unknown' }}
-                                </p>
-                            </div>
-                            <div class="flex w-1/3 items-center justify-end">
+                                </span>
                                 <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"
+                                    class="ml-2 shrink-0 rounded-md bg-slate-100 px-2 py-0.5 font-semibold text-slate-700 dark:bg-gray-800 dark:text-gray-300"
                                 >
-                                    {{ source.visits?.toLocaleString() }} visits
+                                    {{ source.visits?.toLocaleString() }}
                                 </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"
+                        <div
+                            v-else
+                            class="flex h-full flex-col items-center justify-center py-10 text-center"
                         >
-                            এখনও কোনো সোর্স ডাটা পাওয়া যায়নি।
-                        </p>
+                            <LayoutGrid
+                                class="h-6 w-6 text-slate-300 dark:text-gray-600"
+                            />
+                            <p
+                                class="mt-1.5 text-xs text-slate-400 dark:text-gray-500"
+                            >
+                                No source data available yet.
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>

From a5e4248361e5399d09bda7753fe5f529f094885d Mon Sep 17 00:00:00 2001
From: TR Tajim <com.tajim@gmail.com>
Date: Sat, 10 Oct 2026 23:15:43 +0600
Subject: [PATCH 2/2] refactor(admin): polish dashboard tools grid, remove
 duplicate stats, and purge legacy nav

---
 .../js/components/navigation/Navigation.tsx   | 599 +-----------------
 resources/js/layouts/AdminLayout.vue          |  20 +
 resources/js/pages/admin/Dashboard.vue        | 177 +-----
 3 files changed, 45 insertions(+), 751 deletions(-)

diff --git a/resources/js/components/navigation/Navigation.tsx b/resources/js/components/navigation/Navigation.tsx
index 4be443de..f58db1e6 100644
--- a/resources/js/components/navigation/Navigation.tsx
+++ b/resources/js/components/navigation/Navigation.tsx
@@ -5,8 +5,6 @@
  * - SiteRail            desktop side rail (collapsible 72px <-> 280px)
  * - SiteBottomNav       mobile bottom bar
  * - SiteDrawer          mobile top hamburger bar + slide-over drawer
- * - AdminRail           staff side rail (same rail language, admin items)
- * - AdminDrawer         staff mobile drawer (teleported, same slide motion)
  *
  * Pure state/logic stays in the existing TypeScript modules under
  * resources/js/lib (navigation, useDarkMode, useOrientation,
@@ -27,7 +25,7 @@ import {
     toRef,
     watch,
 } from 'vue';
-import type { PropType, Ref } from 'vue';
+import type { Ref } from 'vue';
 
 import AppLogo from '@/components/AppLogo.vue';
 import LogoutConfirmModal from '@/components/LogoutConfirmModal.vue';
@@ -35,16 +33,8 @@ import NotificationDropdown from '@/components/NotificationDropdown.vue';
 import MaterialIcon from '@/components/ui/MaterialIcon.vue';
 import { allNavItems, primaryNavItems } from '@/lib/navigation';
 import { useDarkMode } from '@/lib/useDarkMode';
-import { usePermissions } from '@/lib/usePermissions';
 import { usePwa } from '@/lib/usePwa';
 
-export type AdminNavItem = {
-    name: string;
-    to: string;
-    icon: string;
-    permission?: string;
-};
-
 /** Authenticated user shape used across the navigation surfaces. */
 type AuthedUser = {
     name: string;
@@ -98,21 +88,6 @@ function isActiveAdminRoute(to: string, currentUrl: string): boolean {
     return currentUrl.startsWith(to);
 }
 
-function getCollapsedAdminLabel(name: string): string {
-    const map: Record<string, string> = {
-        'Manage Contents': 'Contents',
-        'Manage Blogs': 'Blogs',
-        'Manage Products': 'Products',
-        'Manage Forum': 'Forum',
-        'Support Tickets': 'Support',
-        'Site Notice': 'Notice',
-        'Global Chat': 'Chat',
-        'Send Emails': 'Emails',
-    };
-
-    return map[name] || name.replace(/^Manage\s+/i, '');
-}
-
 /**
  * Opens the dropdown from the row label. Stops propagation so the
  * label-targeted event never reaches the document outside-click
@@ -1802,575 +1777,3 @@ export const SiteDrawer = defineComponent({
         );
     },
 });
-
-/* ------------------------------------------------------------------ */
-/* AdminRail — staff side rail                                         */
-/* ------------------------------------------------------------------ */
-
-export const AdminRail = defineComponent({
-    name: 'AdminRail',
-    props: {
-        navigation: {
-            type: Array as PropType<AdminNavItem[]>,
-            required: true,
-        },
-        collapsed: { type: Boolean, required: true },
-    },
-    emits: ['toggle'],
-    setup(props, { emit }) {
-        const page = usePage();
-        const user = computed(
-            () => page.props.auth?.user as AuthedUser | undefined,
-        );
-        const currentUrl = computed(() => String(page.url));
-        const { can } = usePermissions();
-        const showLogoutModal = ref(false);
-        const notifRowRef = ref<HTMLElement | null>(null);
-
-        const handleClearCache = () => {
-            if (confirm('Are you sure you want to clear all cache?')) {
-                router.post('/admin/clear-cache');
-            }
-        };
-
-        return () => (
-            <aside
-                class={[
-                    'sticky top-0 z-30 flex h-screen shrink-0 flex-col overflow-x-hidden bg-white/70 backdrop-blur-xl transition-[width] duration-300 ease-in-out dark:bg-slate-900/60 dark:backdrop-blur-xl',
-                    'border-r border-slate-200/60 shadow-[1px_0_3px_rgba(0,0,0,0.02),4px_0_16px_rgba(0,0,0,0.03)] dark:border-slate-800/60 dark:shadow-none',
-                    props.collapsed ? 'w-[72px]' : 'w-[280px]',
-                ]}
-                aria-label="Staff navigation"
-            >
-                {/* Fixed inner width to prevent text reflow & dance during collapse transition */}
-                <div class="flex h-full w-[280px] flex-col">
-                    {/* Header: Hamburger + Logo */}
-                    <div class="flex h-16 shrink-0 items-center border-b border-slate-200/60 bg-white/70 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-900/60 dark:backdrop-blur-xl">
-                        <div class="flex w-[72px] shrink-0 items-center justify-center">
-                            <button
-                                type="button"
-                                onClick={() => emit('toggle')}
-                                class={[
-                                    'flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full text-slate-700 transition-colors hover:bg-slate-100 hover:text-slate-900 active:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100',
-                                ]}
-                                aria-label={
-                                    props.collapsed
-                                        ? 'Expand sidebar'
-                                        : 'Collapse sidebar'
-                                }
-                            >
-                                <MaterialIcon name="menu" size={24} />
-                            </button>
-                        </div>
-                        <div
-                            class={[
-                                'flex items-center overflow-hidden transition-all duration-300 ease-in-out',
-                                props.collapsed
-                                    ? 'pointer-events-none w-0 opacity-0'
-                                    : 'w-[200px] opacity-100',
-                            ]}
-                        >
-                            <div class="flex min-w-0 items-center gap-2">
-                                <AppLogo />
-                                <span class="shrink-0 rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-bold tracking-wider text-indigo-600 uppercase dark:bg-indigo-500/10 dark:text-indigo-300">
-                                    Staff
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Scrollable admin nav */}
-                    <div class="flex flex-1 flex-col overflow-y-auto py-2">
-                        {props.collapsed ? (
-                            <nav class="flex w-[72px] flex-col items-center space-y-1 px-1">
-                                {props.navigation.map((item) => {
-                                    const active = isActiveAdminRoute(
-                                        item.to,
-                                        currentUrl.value,
-                                    );
-                                    const label = getCollapsedAdminLabel(
-                                        item.name,
-                                    );
-
-                                    return (
-                                        <Link
-                                            key={item.to}
-                                            href={item.to}
-                                            class={[
-                                                'group flex h-[60px] w-full flex-col items-center justify-center rounded-xl px-1 text-center transition-colors duration-150',
-                                                active
-                                                    ? 'bg-indigo-50/80 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-200'
-                                                    : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
-                                            ]}
-                                            title={item.name}
-                                        >
-                                            <MaterialIcon
-                                                name={item.icon}
-                                                size={22}
-                                                class={`shrink-0 transition-colors duration-150 ${
-                                                    active
-                                                        ? 'text-indigo-600 dark:text-indigo-300'
-                                                        : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300'
-                                                }`}
-                                            />
-                                            <span class="mt-1 max-w-[64px] truncate text-[10px] leading-tight font-medium">
-                                                {label}
-                                            </span>
-                                        </Link>
-                                    );
-                                })}
-
-                                {can('clear cache') && (
-                                    <button
-                                        type="button"
-                                        onClick={handleClearCache}
-                                        class="group flex h-[60px] w-full flex-col items-center justify-center rounded-xl px-1 text-center text-rose-600 transition-colors duration-150 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/10"
-                                        title="Clear cache"
-                                    >
-                                        <MaterialIcon
-                                            name="cached"
-                                            size={22}
-                                            class="shrink-0"
-                                        />
-                                        <span class="mt-1 max-w-[64px] truncate text-[10px] leading-tight font-medium">
-                                            Clear cache
-                                        </span>
-                                    </button>
-                                )}
-                            </nav>
-                        ) : (
-                            <nav class="w-[280px] space-y-1 px-2.5">
-                                {props.navigation.map((item) => {
-                                    const active = isActiveAdminRoute(
-                                        item.to,
-                                        currentUrl.value,
-                                    );
-
-                                    return (
-                                        <Link
-                                            key={item.to}
-                                            href={item.to}
-                                            class={[
-                                                'group flex h-10 items-center gap-3 rounded-[10px] px-3 text-[13px] font-medium tracking-tight transition-colors duration-150',
-                                                active
-                                                    ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
-                                                    : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
-                                            ]}
-                                        >
-                                            <MaterialIcon
-                                                name={item.icon}
-                                                size={22}
-                                                class={`shrink-0 transition-colors duration-150 ${
-                                                    active
-                                                        ? 'text-indigo-600 dark:text-indigo-300'
-                                                        : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300'
-                                                }`}
-                                            />
-                                            <span class="truncate">
-                                                {item.name}
-                                            </span>
-                                            {active && (
-                                                <span class="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-600 dark:bg-indigo-400" />
-                                            )}
-                                        </Link>
-                                    );
-                                })}
-
-                                {can('clear cache') && (
-                                    <div class="pt-2">
-                                        <button
-                                            type="button"
-                                            onClick={handleClearCache}
-                                            class="flex h-10 w-full items-center gap-3 rounded-[10px] px-3 text-[13px] font-medium tracking-tight text-rose-600 transition-colors duration-150 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/10"
-                                            title="Clear cache"
-                                        >
-                                            <MaterialIcon
-                                                name="cached"
-                                                size={22}
-                                                class="shrink-0"
-                                            />
-                                            <span class="truncate">
-                                                Clear cache
-                                            </span>
-                                        </button>
-                                    </div>
-                                )}
-                            </nav>
-                        )}
-                    </div>
-
-                    {/* Footer controls */}
-                    <div class="border-t border-slate-200/60 bg-white/40 p-2 backdrop-blur-sm dark:border-slate-800/60 dark:bg-slate-900/40 dark:backdrop-blur-sm">
-                        {props.collapsed ? (
-                            <div class="flex w-[56px] flex-col items-center space-y-1.5">
-                                {/* Notifications */}
-                                {user.value && (
-                                    <div
-                                        ref={notifRowRef}
-                                        class="flex h-10 w-full items-center justify-center"
-                                    >
-                                        <NotificationDropdown plain dropUp />
-                                    </div>
-                                )}
-
-                                {/* User + logout */}
-                                {user.value && (
-                                    <div class="flex flex-col items-center py-1">
-                                        <Link
-                                            href={
-                                                user.value.username
-                                                    ? `/u/${user.value.username}`
-                                                    : '/profile'
-                                            }
-                                            title="Profile"
-                                            aria-label="Profile"
-                                            class="flex items-center justify-center"
-                                        >
-                                            {user.value.image_url ? (
-                                                <img
-                                                    src={user.value.image_url}
-                                                    alt={user.value.name}
-                                                    class="h-8 w-8 rounded-full object-cover ring-1 ring-slate-200 dark:ring-slate-700"
-                                                />
-                                            ) : (
-                                                <span class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-600 to-violet-600 text-xs font-bold text-white ring-1 ring-indigo-600/20">
-                                                    {user.value.name
-                                                        .charAt(0)
-                                                        .toUpperCase()}
-                                                </span>
-                                            )}
-                                        </Link>
-                                    </div>
-                                )}
-                            </div>
-                        ) : (
-                            <div class="w-[264px] space-y-1.5 overflow-hidden">
-                                {/* Notifications */}
-                                {user.value && (
-                                    <div
-                                        ref={notifRowRef}
-                                        class="flex h-11 w-full items-center justify-start gap-2.5 px-3"
-                                    >
-                                        <NotificationDropdown plain dropUp />
-                                        <span
-                                            role="button"
-                                            tabindex={0}
-                                            onClick={(e: MouseEvent) =>
-                                                openNotificationsFromLabel(
-                                                    e,
-                                                    notifRowRef,
-                                                )
-                                            }
-                                            onKeydown={(e: KeyboardEvent) => {
-                                                if (
-                                                    e.key === 'Enter' ||
-                                                    e.key === ' '
-                                                ) {
-                                                    openNotificationsFromLabel(
-                                                        e,
-                                                        notifRowRef,
-                                                    );
-                                                }
-                                            }}
-                                            class="flex-1 cursor-pointer truncate text-left text-[13px] font-semibold text-slate-600 transition-colors hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
-                                        >
-                                            Notifications
-                                        </span>
-                                    </div>
-                                )}
-
-                                {/* User + logout */}
-                                {user.value && (
-                                    <div class="pt-1">
-                                        <div class="flex items-center justify-between gap-3 rounded-xl border bg-white px-3 py-2.5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
-                                            <Link
-                                                href={
-                                                    user.value.username
-                                                        ? `/u/${user.value.username}`
-                                                        : '/profile'
-                                                }
-                                                class="flex min-w-0 items-center gap-2.5"
-                                            >
-                                                {user.value.image_url ? (
-                                                    <img
-                                                        src={
-                                                            user.value.image_url
-                                                        }
-                                                        alt={user.value.name}
-                                                        class="h-8 w-8 rounded-full object-cover ring-1 ring-slate-200 dark:ring-slate-700"
-                                                    />
-                                                ) : (
-                                                    <span class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-600 to-violet-600 text-xs font-bold text-white ring-1 ring-indigo-600/20">
-                                                        {user.value.name
-                                                            .charAt(0)
-                                                            .toUpperCase()}
-                                                    </span>
-                                                )}
-                                                <div class="min-w-0 text-left">
-                                                    <p class="truncate text-xs font-semibold text-slate-900 dark:text-slate-100">
-                                                        {user.value.name}
-                                                    </p>
-                                                    <p class="truncate text-[11px] text-slate-500 dark:text-slate-400">
-                                                        {user.value.email}
-                                                    </p>
-                                                </div>
-                                            </Link>
-                                            <button
-                                                type="button"
-                                                onClick={() => {
-                                                    showLogoutModal.value = true;
-                                                }}
-                                                title="Log out"
-                                                aria-label="Log out"
-                                                class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-rose-500 transition-colors hover:bg-rose-50 hover:text-rose-600 hover:shadow-sm dark:text-rose-400 dark:hover:bg-rose-950/40 dark:hover:text-rose-300"
-                                            >
-                                                <MaterialIcon
-                                                    name="logout"
-                                                    size={20}
-                                                />
-                                            </button>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                </div>
-
-                <LogoutConfirmModal {...bindOpen(showLogoutModal)} />
-            </aside>
-        );
-    },
-});
-
-/* ------------------------------------------------------------------ */
-/* AdminDrawer — staff mobile drawer (teleported)                       */
-/* ------------------------------------------------------------------ */
-
-export const AdminDrawer = defineComponent({
-    name: 'AdminDrawer',
-    props: {
-        navigation: {
-            type: Array as PropType<AdminNavItem[]>,
-            required: true,
-        },
-        isOpen: { type: Boolean, required: true },
-    },
-    emits: ['close'],
-    setup(props, { emit }) {
-        const { can } = usePermissions();
-        const page = usePage();
-        const user = computed(
-            () => (page.props.auth as any)?.user as AuthedUser | undefined,
-        );
-        const currentUrl = computed(() => String(page.url));
-
-        const showLogoutModal = ref(false);
-        const panelRef = ref<HTMLElement | null>(null);
-        const closeButtonRef = ref<HTMLElement | null>(null);
-
-        const close = () => emit('close');
-
-        useDialogA11y({
-            open: toRef(props, 'isOpen'),
-            panel: panelRef,
-            initial: closeButtonRef,
-            onEscape: close,
-        });
-
-        const askLogout = () => {
-            emit('close');
-            showLogoutModal.value = true;
-        };
-
-        const handleClearCache = () => {
-            if (confirm('Are you sure you want to clear all cache?')) {
-                emit('close');
-                router.post('/admin/clear-cache');
-            }
-        };
-
-        return () => (
-            <>
-                <Teleport to="body">
-                    {props.isOpen && (
-                        <div class="fixed inset-0 z-50 flex md:hidden">
-                            <div
-                                class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm dark:bg-black/60"
-                                onClick={close}
-                            ></div>
-
-                            <Transition
-                                appear
-                                enterActiveClass="transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]"
-                                enterFromClass="-translate-x-full"
-                                enterToClass="translate-x-0"
-                                leaveActiveClass="transition-transform duration-200 ease-in"
-                                leaveFromClass="translate-x-0"
-                                leaveToClass="-translate-x-full"
-                            >
-                                <div
-                                    ref={panelRef}
-                                    role="dialog"
-                                    aria-modal="true"
-                                    aria-label="Staff menu"
-                                    class="relative flex w-full max-w-[320px] flex-1 flex-col justify-between border-r border-slate-200/60 bg-white/85 shadow-[8px_0_32px_rgba(0,0,0,0.12)] backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-900/70 dark:backdrop-blur-xl"
-                                >
-                                    <div class="flex-1 overflow-y-auto py-3.5">
-                                        <div class="flex h-16 shrink-0 items-center justify-between border-b border-slate-200/60 px-4 dark:border-slate-800/60">
-                                            <div class="flex min-w-0 items-center gap-2">
-                                                <AppLogo />
-                                                <span class="shrink-0 rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-bold tracking-wider text-indigo-600 uppercase dark:bg-indigo-500/10 dark:text-indigo-300">
-                                                    Staff
-                                                </span>
-                                            </div>
-                                            <div class="flex items-center gap-1.5">
-                                                <Link
-                                                    href="/"
-                                                    onClick={close}
-                                                    class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-sm transition-all duration-150 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-100"
-                                                    aria-label="Home"
-                                                    title="Home"
-                                                >
-                                                    <MaterialIcon
-                                                        name="home"
-                                                        size={18}
-                                                    />
-                                                </Link>
-                                                <button
-                                                    ref={closeButtonRef}
-                                                    onClick={close}
-                                                    class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-sm transition-all duration-150 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-100"
-                                                    aria-label="Close staff menu"
-                                                >
-                                                    <MaterialIcon
-                                                        name="close"
-                                                        size={18}
-                                                    />
-                                                </button>
-                                            </div>
-                                        </div>
-
-                                        <nav class="mt-3 space-y-0.5 px-2.5">
-                                            {props.navigation.map((item) => (
-                                                <div key={item.name}>
-                                                    <Link
-                                                        href={item.to}
-                                                        onClick={close}
-                                                        class={[
-                                                            'group flex items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[13px] font-medium tracking-tight transition-all duration-150 ease-out',
-                                                            isActiveAdminRoute(
-                                                                item.to,
-                                                                currentUrl.value,
-                                                            )
-                                                                ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
-                                                                : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
-                                                        ]}
-                                                    >
-                                                        <MaterialIcon
-                                                            name={item.icon}
-                                                            size={22}
-                                                            class={`shrink-0 transition-colors duration-150 ${
-                                                                isActiveAdminRoute(
-                                                                    item.to,
-                                                                    currentUrl.value,
-                                                                )
-                                                                    ? 'text-indigo-600 dark:text-indigo-300'
-                                                                    : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300'
-                                                            }`}
-                                                        />
-                                                        <span class="truncate">
-                                                            {item.name}
-                                                        </span>
-                                                        {isActiveAdminRoute(
-                                                            item.to,
-                                                            currentUrl.value,
-                                                        ) && (
-                                                            <span class="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-600 dark:bg-indigo-400" />
-                                                        )}
-                                                    </Link>
-                                                </div>
-                                            ))}
-                                        </nav>
-                                    </div>
-
-                                    <div class="space-y-2 border-t border-slate-200/60 bg-white/40 p-2 backdrop-blur-sm dark:border-slate-800/60 dark:bg-slate-900/40 dark:backdrop-blur-sm">
-                                        {can('clear cache') && (
-                                            <button
-                                                type="button"
-                                                onClick={handleClearCache}
-                                                class="group flex h-11 w-full items-center gap-2.5 rounded-xl px-3 text-[13px] font-semibold text-rose-600 transition-all duration-150 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/40"
-                                            >
-                                                <MaterialIcon
-                                                    name="cached"
-                                                    size={20}
-                                                />
-                                                <span>Clear Cache</span>
-                                            </button>
-                                        )}
-                                        {user.value && (
-                                            <div class="flex items-center gap-2.5 rounded-xl border bg-white px-3 py-2.5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
-                                                <Link
-                                                    href={
-                                                        user.value.username
-                                                            ? `/u/${user.value.username}`
-                                                            : '/profile'
-                                                    }
-                                                    onClick={close}
-                                                    class="flex min-w-0 flex-1 items-center gap-2.5"
-                                                    title="Profile"
-                                                    aria-label="Profile"
-                                                >
-                                                    {user.value.image_url ? (
-                                                        <img
-                                                            src={
-                                                                user.value
-                                                                    .image_url
-                                                            }
-                                                            alt={
-                                                                user.value.name
-                                                            }
-                                                            class="h-9 w-9 shrink-0 rounded-full object-cover ring-1 ring-slate-200 dark:ring-slate-700"
-                                                        />
-                                                    ) : (
-                                                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-600 to-violet-600 text-xs font-bold text-white ring-1 ring-indigo-600/20">
-                                                            {user.value.name
-                                                                .charAt(0)
-                                                                .toUpperCase()}
-                                                        </span>
-                                                    )}
-                                                    <span class="min-w-0 text-left">
-                                                        <span class="block truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
-                                                            {user.value.name}
-                                                        </span>
-                                                        <span class="block truncate text-xs text-slate-500 dark:text-slate-400">
-                                                            {user.value.email}
-                                                        </span>
-                                                    </span>
-                                                </Link>
-                                                <button
-                                                    type="button"
-                                                    onClick={askLogout}
-                                                    title="Log out"
-                                                    aria-label="Log out"
-                                                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-rose-500 transition-colors hover:bg-rose-50 hover:text-rose-600 hover:shadow-sm dark:text-rose-400 dark:hover:bg-rose-950/40 dark:hover:text-rose-300"
-                                                >
-                                                    <MaterialIcon
-                                                        name="logout"
-                                                        size={20}
-                                                    />
-                                                </button>
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            </Transition>
-                        </div>
-                    )}
-                </Teleport>
-
-                <LogoutConfirmModal {...bindOpen(showLogoutModal)} />
-            </>
-        );
-    },
-});
diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index dec789fd..57ad218a 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { ArrowLeft } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 
 import AtmosphericBackground from '@/components/AtmosphericBackground.vue';
@@ -12,6 +14,13 @@ import ToastNotification from '@/components/ToastNotification.vue';
 import { useBreakpoint } from '@/lib/useBreakpoint';
 import { useOrientation } from '@/lib/useOrientation';
 
+const page = usePage();
+const isDashboard = computed(() => {
+    const url = String(page.url);
+
+    return url === '/admin' || url.startsWith('/admin?');
+});
+
 const { isLandscape, isHydrated: orientationHydrated } = useOrientation();
 const { isMobile, isHydrated: breakpointHydrated } = useBreakpoint(1024);
 const isHydrated = computed(
@@ -83,6 +92,17 @@ const drawerOpen = ref(false);
                             : 'min-h-[calc(100vh-4rem)] pb-6',
                     ]"
                 >
+                    <!-- Top back button on admin sub-pages -->
+                    <div v-if="!isDashboard" class="mb-3.5">
+                        <Link
+                            href="/admin"
+                            class="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
+                        >
+                            <ArrowLeft class="h-4 w-4" />
+                            <span>Back to Dashboard</span>
+                        </Link>
+                    </div>
+
                     <div
                         class="flex w-full flex-1 flex-col rounded-2xl border border-slate-200/90 bg-white p-4.5 shadow-2xs sm:p-7 md:p-8 dark:border-gray-800 dark:bg-gray-900"
                     >
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index f4016d33..d49d5792 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -5,7 +5,6 @@ import {
     Users,
     Eye,
     Share2,
-    Zap,
     RefreshCw,
     BarChart3,
     CheckSquare,
@@ -17,9 +16,6 @@ import {
     UserCheck,
     Radio,
     Mail,
-    FileText,
-    Boxes,
-    ArrowUpRight,
 } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
 import EmptyState from '@/components/EmptyState.vue';
@@ -39,7 +35,6 @@ const errorMsg = ref<string | null>(null);
 const adminTools = [
     {
         name: 'Resource Moderation',
-        description: 'Review and approve community submitted study materials',
         href: '/admin/moderation/resources',
         icon: CheckSquare,
         color: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-500/10 dark:text-emerald-400',
@@ -47,14 +42,12 @@ const adminTools = [
     },
     {
         name: 'Manage Contents',
-        description: 'Syllabus, subjects, chapters and learning resources',
         href: '/admin/subjects',
         icon: BookOpen,
         color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-500/10 dark:text-indigo-400',
     },
     {
         name: 'Manage Forum',
-        description: 'Categories, pinned questions, and moderation',
         href: '/admin/forums',
         icon: MessageSquare,
         color: 'text-blue-600 bg-blue-50 dark:bg-blue-500/10 dark:text-blue-400',
@@ -62,7 +55,6 @@ const adminTools = [
     },
     {
         name: 'Support Tickets',
-        description: 'View and respond to student help tickets',
         href: '/admin/tickets',
         icon: LifeBuoy,
         color: 'text-amber-600 bg-amber-50 dark:bg-amber-500/10 dark:text-amber-400',
@@ -70,7 +62,6 @@ const adminTools = [
     },
     {
         name: 'Site Notice',
-        description: 'Broadcast system banner and maintenance alerts',
         href: '/admin/notice',
         icon: Bell,
         color: 'text-purple-600 bg-purple-50 dark:bg-purple-500/10 dark:text-purple-400',
@@ -78,7 +69,6 @@ const adminTools = [
     },
     {
         name: 'Global Chat',
-        description: 'Live chat room moderation and flagged messages',
         href: '/admin/chat',
         icon: MessageCircle,
         color: 'text-teal-600 bg-teal-50 dark:bg-teal-500/10 dark:text-teal-400',
@@ -86,7 +76,6 @@ const adminTools = [
     },
     {
         name: 'Users & Roles',
-        description: 'Directory, verification badges, and permissions',
         href: '/admin/users',
         icon: UserCheck,
         color: 'text-sky-600 bg-sky-50 dark:bg-sky-500/10 dark:text-sky-400',
@@ -94,7 +83,6 @@ const adminTools = [
     },
     {
         name: 'Peer & Pokes',
-        description: 'Community interactions and study buddy settings',
         href: '/admin/peers/settings',
         icon: Radio,
         color: 'text-rose-600 bg-rose-50 dark:bg-rose-500/10 dark:text-rose-400',
@@ -102,28 +90,11 @@ const adminTools = [
     },
     {
         name: 'Send Emails',
-        description: 'Compose announcements and system updates',
         href: '/admin/emails/send',
         icon: Mail,
         color: 'text-orange-600 bg-orange-50 dark:bg-orange-500/10 dark:text-orange-400',
         permission: 'send email',
     },
-    {
-        name: 'Blogs & Articles',
-        description: 'Public authoring, editorial drafts, and posts',
-        href: '/blogs',
-        icon: FileText,
-        color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-500/10 dark:text-indigo-400',
-        permission: 'manage blogs',
-    },
-    {
-        name: 'Products & Projects',
-        description: 'Public showcase platform apps and tools',
-        href: '/products',
-        icon: Boxes,
-        color: 'text-cyan-600 bg-cyan-50 dark:bg-cyan-500/10 dark:text-cyan-400',
-        permission: 'manage products',
-    },
 ];
 
 const visibleTools = computed(() =>
@@ -168,7 +139,17 @@ const fetchAnalytics = async (refresh = false) => {
                     Dashboard
                 </h1>
                 <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                    Staff workspace and management portal
+                    Staff workspace &bull;
+                    <span class="font-medium text-slate-700 dark:text-gray-300">
+                        {{
+                            (
+                                stats?.total_accounts ??
+                                props.totalAccounts ??
+                                0
+                            ).toLocaleString()
+                        }}
+                        Total Accounts
+                    </span>
                 </p>
             </div>
 
@@ -197,147 +178,37 @@ const fetchAnalytics = async (refresh = false) => {
 
         <!-- Management Tools Grid -->
         <div>
-            <div class="mb-3 flex items-center justify-between">
+            <div class="mb-3">
                 <h2
                     class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                 >
                     Management Tools
                 </h2>
-                <span
-                    class="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-600 dark:bg-gray-800 dark:text-gray-400"
-                >
-                    {{ visibleTools.length }} Available
-                </span>
             </div>
 
             <div
-                class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 sm:gap-3 lg:grid-cols-3"
             >
                 <Link
                     v-for="tool in visibleTools"
                     :key="tool.href"
                     :href="tool.href"
-                    class="group relative flex flex-col justify-between rounded-xl border border-slate-200/80 bg-white p-4 shadow-2xs transition-all duration-150 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-xs dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/40"
+                    class="group flex items-center gap-2.5 rounded-xl border border-slate-200/80 bg-white p-2.5 shadow-2xs transition-all hover:border-indigo-300 hover:shadow-xs sm:p-3 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/40"
                 >
-                    <div class="flex items-start justify-between gap-3">
-                        <div
-                            :class="[
-                                'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-colors',
-                                tool.color,
-                            ]"
-                        >
-                            <component
-                                :is="tool.icon"
-                                class="h-5 w-5 stroke-[1.9]"
-                            />
-                        </div>
-                        <ArrowUpRight
-                            class="h-4 w-4 text-slate-400 opacity-0 transition-all duration-150 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-gray-500 dark:group-hover:text-indigo-400"
-                        />
-                    </div>
-
-                    <div class="mt-3.5">
-                        <h3
-                            class="text-sm font-bold text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
-                        >
-                            {{ tool.name }}
-                        </h3>
-                        <p
-                            class="mt-1 line-clamp-2 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            {{ tool.description }}
-                        </p>
-                    </div>
-                </Link>
-            </div>
-        </div>
-
-        <!-- Overview Quick Stats -->
-        <div class="grid gap-3 sm:grid-cols-3">
-            <div
-                class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div class="flex items-center justify-between">
-                    <div>
-                        <p
-                            class="text-[11px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                        >
-                            Total Accounts
-                        </p>
-                        <h3
-                            class="mt-1 text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                        >
-                            {{
-                                (
-                                    stats?.total_accounts ??
-                                    props.totalAccounts ??
-                                    0
-                                ).toLocaleString()
-                            }}
-                        </h3>
-                    </div>
                     <div
-                        class="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
+                        :class="[
+                            'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors',
+                            tool.color,
+                        ]"
                     >
-                        <Users class="h-4.5 w-4.5" />
+                        <component :is="tool.icon" class="h-4 w-4 stroke-[2]" />
                     </div>
-                </div>
-            </div>
-
-            <div
-                class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div class="flex items-center justify-between">
-                    <div>
-                        <p
-                            class="text-[11px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                        >
-                            Active Now (5m)
-                        </p>
-                        <h3
-                            class="mt-1 text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                        >
-                            {{
-                                stats?.realtime_users ?? (hasFetched ? 0 : '—')
-                            }}
-                        </h3>
-                    </div>
-                    <div
-                        class="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"
+                    <span
+                        class="text-xs leading-tight font-semibold text-slate-800 transition-colors group-hover:text-indigo-600 sm:text-sm dark:text-gray-200 dark:group-hover:text-indigo-400"
                     >
-                        <Zap class="h-4.5 w-4.5" />
-                    </div>
-                </div>
-            </div>
-
-            <div
-                class="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs dark:border-gray-800 dark:bg-gray-900"
-            >
-                <div class="flex items-center justify-between">
-                    <div>
-                        <p
-                            class="text-[11px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                        >
-                            Monthly Visits
-                        </p>
-                        <h3
-                            class="mt-1 text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                        >
-                            {{
-                                stats?.total_visits
-                                    ? stats.total_visits.toLocaleString()
-                                    : hasFetched
-                                      ? 0
-                                      : '—'
-                            }}
-                        </h3>
-                    </div>
-                    <div
-                        class="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400"
-                    >
-                        <Eye class="h-4.5 w-4.5" />
-                    </div>
-                </div>
+                        {{ tool.name }}
+                    </span>
+                </Link>
             </div>
         </div>