Index: chapterx-frontend/src/pages/admin/AdminDashboard.tsx
===================================================================
--- chapterx-frontend/src/pages/admin/AdminDashboard.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/admin/AdminDashboard.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,130 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Shield, Users, BookOpen, AlertTriangle, Settings, ChevronRight } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useNotificationStore } from '../../store/notificationStore'
+import { PlatformStats } from '../../components/admin/PlatformStats'
+import { Button } from '../../components/ui/Button'
+import { RoleBadge } from '../../components/ui/Badge'
+import { Avatar } from '../../components/ui/Avatar'
+
+function timeAgo(str: string): string {
+  const diff = Date.now() - new Date(str).getTime()
+  const m = Math.floor(diff / 60000)
+  if (m < 1) return 'just now'
+  if (m < 60) return `${m}m ago`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h}h ago`
+  return `${Math.floor(h / 24)}d ago`
+}
+
+export const AdminDashboard: React.FC = () => {
+  const navigate = useNavigate()
+  const { allUsers } = useAuthStore()
+  const { stories } = useStoryStore()
+  const { notifications } = useNotificationStore()
+
+  const recentUsers = [...allUsers].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).slice(0, 5)
+  const recentStories = [...stories].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).slice(0, 5)
+
+  const adminLinks = [
+    { to: '/admin/users', icon: <Users size={20} className="text-blue-400" />, label: 'Manage Users', desc: `${allUsers.length} registered users`, color: 'bg-blue-500/10 border-blue-500/20' },
+    { to: '/admin/content', icon: <BookOpen size={20} className="text-violet-400" />, label: 'Content Moderation', desc: `${stories.length} total stories`, color: 'bg-violet-500/10 border-violet-500/20' },
+    { to: '/admin/genres', icon: <Settings size={20} className="text-amber-400" />, label: 'Manage Genres', desc: 'Add or remove genres', color: 'bg-amber-500/10 border-amber-500/20' },
+  ]
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-8">
+        <div className="w-10 h-10 rounded-xl bg-rose-500/20 flex items-center justify-center">
+          <Shield size={20} className="text-rose-400" />
+        </div>
+        <div>
+          <h1 className="font-serif text-3xl font-bold text-white">Admin Dashboard</h1>
+          <p className="text-slate-400 text-sm mt-0.5">Platform management and moderation</p>
+        </div>
+      </div>
+
+      {/* Platform stats */}
+      <div className="mb-8">
+        <h2 className="font-serif text-xl font-bold text-white mb-4">Platform Overview</h2>
+        <PlatformStats />
+      </div>
+
+      {/* Quick links */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+        {adminLinks.map(link => (
+          <button
+            key={link.to}
+            onClick={() => navigate(link.to)}
+            className={`flex items-center gap-4 p-5 rounded-2xl border ${link.color} hover:scale-105 transition-all group text-left`}
+          >
+            <div className="w-12 h-12 rounded-xl bg-slate-800 flex items-center justify-center">
+              {link.icon}
+            </div>
+            <div className="flex-1">
+              <p className="text-white font-semibold">{link.label}</p>
+              <p className="text-slate-400 text-sm">{link.desc}</p>
+            </div>
+            <ChevronRight size={16} className="text-slate-500 group-hover:text-white transition-colors" />
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Recent users */}
+        <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-serif text-lg font-bold text-white">Recent Users</h3>
+            <Button size="sm" variant="ghost" onClick={() => navigate('/admin/users')}>
+              View all <ChevronRight size={14} />
+            </Button>
+          </div>
+          <div className="space-y-3">
+            {recentUsers.map(user => (
+              <div key={user.user_id} className="flex items-center gap-3">
+                <Avatar name={user.name} size="sm" />
+                <div className="flex-1 min-w-0">
+                  <p className="text-white text-sm font-medium">{user.name} {user.surname}</p>
+                  <p className="text-slate-500 text-xs">@{user.username}</p>
+                </div>
+                <RoleBadge role={user.role} />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Recent stories */}
+        <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-serif text-lg font-bold text-white">Recent Stories</h3>
+            <Button size="sm" variant="ghost" onClick={() => navigate('/admin/content')}>
+              View all <ChevronRight size={14} />
+            </Button>
+          </div>
+          <div className="space-y-3">
+            {recentStories.map(story => (
+              <div key={story.story_id} className="flex items-center gap-3">
+                <div className="flex-1 min-w-0">
+                  <p className="text-white text-sm font-medium truncate">{story.title}</p>
+                  <p className="text-slate-500 text-xs">by @{story.author_username}</p>
+                </div>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${
+                  story.status === 'published'
+                    ? 'bg-emerald-500/20 text-emerald-400'
+                    : story.status === 'draft'
+                    ? 'bg-amber-500/20 text-amber-400'
+                    : 'bg-slate-500/20 text-slate-400'
+                }`}>
+                  {story.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}