feat(web): add Admin module frontend — dashboard, users, moderation, KYC

Build the complete admin panel UI at apps/web/app/(admin)/:
- Admin layout with sidebar navigation and ADMIN role guard
- Dashboard page with stats cards and revenue chart
- User management with search, filters, pagination, detail panel, ban/unban
- Listings moderation queue with approve/reject/bulk actions
- KYC review page with document viewer and approve/reject flow
- New reusable UI components: Dialog, Table

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/app/(admin)/layout.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import {
+  LayoutDashboard,
+  Users,
+  ClipboardList,
+  ShieldCheck,
+  LogOut,
+  Menu,
+  X,
+} from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { useAuthStore } from '@/lib/auth-store';
+import { Button } from '@/components/ui/button';
+
+const adminNavItems = [
+  { href: '/admin', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/admin/users', label: 'Qu\u1EA3n l\u00FD ng\u01B0\u1EDDi d\u00F9ng', icon: Users },
+  { href: '/admin/moderation', label: 'Ki\u1EC3m duy\u1EC7t tin', icon: ClipboardList },
+  { href: '/admin/kyc', label: 'Duy\u1EC7t KYC', icon: ShieldCheck },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { user, logout } = useAuthStore();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    if (user && user.role !== 'ADMIN') {
+      router.replace('/dashboard');
+    }
+  }, [user, router]);
+
+  if (!user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="text-muted-foreground">Đang tải...</div>
+      </div>
+    );
+  }
+
+  if (user.role !== 'ADMIN') {
+    return null;
+  }
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 w-64 border-r bg-card transition-transform lg:static lg:translate-x-0',
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
+        )}
+      >
+        <div className="flex h-14 items-center border-b px-4">
+          <Link href="/admin" className="flex items-center gap-2">
+            <span className="text-lg font-bold text-primary">GoodGo</span>
+            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-semibold text-primary">
+              Admin
+            </span>
+          </Link>
+          <button
+            className="ml-auto lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <nav className="flex flex-col gap-1 p-3">
+          {adminNavItems.map((item) => {
+            const Icon = item.icon;
+            const isActive =
+              item.href === '/admin'
+                ? pathname === '/admin'
+                : pathname.startsWith(item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setSidebarOpen(false)}
+                className={cn(
+                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto border-t p-3">
+          <div className="mb-2 px-3 text-xs text-muted-foreground truncate">
+            {user.fullName}
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start gap-2"
+            onClick={logout}
+          >
+            <LogOut className="h-4 w-4" />
+            Đăng xuất
+          </Button>
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <div className="flex flex-1 flex-col">
+        <header className="sticky top-0 z-30 flex h-14 items-center border-b bg-background/95 px-4 backdrop-blur lg:hidden">
+          <button onClick={() => setSidebarOpen(true)}>
+            <Menu className="h-5 w-5" />
+          </button>
+          <span className="ml-3 text-sm font-semibold">GoodGo Admin</span>
+        </header>
+
+        <main className="flex-1 p-4 md:p-6">{children}</main>
+      </div>
+    </div>
+  );
+}