claudmax 2.0.0 → 2.0.1

package/src/app/admin/dashboard/AdminDashboardClient.tsx

@@ -1,1546 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { useRouter } from 'next/navigation';
-
-interface AdminUser {
-  id: string;
-  username: string;
-  name: string;
-  role: string;
-  isActive: boolean;
-  createdAt: string;
-  apiKeyCount: number;
-  blockedUntil: string | null;
-  canCreateKey: boolean;
-  canDeleteKey: boolean;
-  canBlockKey: boolean;
-  canManageTokens: boolean;
-  canCreateReseller: boolean;
-  canManageResellers: boolean;
-  canManageUsers: boolean;
-}
-
-interface ApiKey {
-  id: string;
-  key: string;
-  name: string;
-  prefix: string;
-  tier: string;
-  isActive: boolean;
-  blockedUntil: string | null;
-  tokenLimitOverride: number | null;
-  displayMultiplier: number;
-  windowTokensUsed: number;
-  windowRequestsUsed: number;
-  totalTokensUsed: number;
-  windowStartAt: string | null;
-  createdAt: string;
-  lastUsedAt: string | null;
-  reseller?: { id: string; name: string } | null;
-}
-
-interface Stats {
-  totalKeys: number;
-  activeKeys: number;
-  totalRequests: number;
-  totalTokens: number;
-  totalUsers: number;
-  keysByTier: { tier: string; _count: { _all: number } }[];
-  recentKeys: any[];
-  topTokens: any[];
-  myRole: string;
-}
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-const TIER_LIMITS: Record<string, { requestsPerWindow: number; tokensPerWindow: number }> = {
-  '5x':      { requestsPerWindow: 18000,  tokensPerWindow: 5_000_000 },
-  '20x':     { requestsPerWindow: 18000,  tokensPerWindow: 20_000_000 },
-  unlimited: { requestsPerWindow: 999_999_999, tokensPerWindow: 999_999_999_999 },
-};
-function fmtTokens(n: number) {
-  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`;
-  return String(n);
-}
-
-function fmtCost(n: number) {
-  // Assume $3 per million tokens (claude-sonnet-4.6 mid-range)
-  const cost = (n / 1_000_000) * 3;
-  if (cost >= 1000) return `$${(cost / 1000).toFixed(1)}K`;
-  if (cost >= 1) return `$${cost.toFixed(2)}`;
-  return `$${cost.toFixed(4)}`;
-}
-
-function getDisplayedTokens(key: ApiKey) {
-  return Math.floor((key.windowTokensUsed || 0) * (key.displayMultiplier ?? 3));
-}
-
-function roleLabel(role: string) {
-  return { super_admin: 'Super Admin', admin: 'Admin', reseller: 'Reseller' }[role] ?? role;
-}
-function roleColor(role: string) {
-  return { super_admin: 'bg-purple-50 text-purple-700 border-purple-200', admin: 'bg-blue-50 text-blue-700 border-blue-200', reseller: 'bg-amber-50 text-amber-700 border-amber-200' }[role] ?? 'bg-gray-50 text-gray-600 border-gray-200';
-}
-function tierColor(tier: string) {
-  return { '5x': 'bg-blue-50 text-blue-600 border-blue-100', '20x': 'bg-purple-50 text-purple-600 border-purple-100', unlimited: 'bg-amber-50 text-amber-600 border-amber-100' }[tier] ?? 'bg-gray-50';
-}
-
-// ─── Stat Card ────────────────────────────────────────────────────────────────
-function StatCard({ label, value, sub, icon, color = 'purple' }: { label: string; value: string | number; sub?: string; icon: React.ReactNode; color?: string }) {
-  const colors: Record<string, string> = { purple: 'bg-purple-50 border-purple-100', green: 'bg-emerald-50 border-emerald-100', blue: 'bg-blue-50 border-blue-100', amber: 'bg-amber-50 border-amber-100' };
-  const iconColors: Record<string, string> = { purple: 'text-purple-600', green: 'text-emerald-600', blue: 'text-blue-600', amber: 'text-amber-600' };
-  return (
-    <div className={`rounded-2xl border p-5 ${colors[color]} card-shadow`}>
-      <div className="flex items-center justify-between mb-3">
-        <p className="text-[#9CA3AF] text-xs font-bold uppercase tracking-wider">{label}</p>
-        <div className={`w-8 h-8 rounded-lg bg-white border border-gray-100 flex items-center justify-center ${iconColors[color]}`}>{icon}</div>
-      </div>
-      <p className="text-3xl font-black text-[#111827]">{value}</p>
-      {sub && <p className="text-[#D1D5DB] text-xs mt-1">{sub}</p>}
-    </div>
-  );
-}
-
-// ─── Modals ──────────────────────────────────────────────────────────────────
-function ConfirmModal({ title, message, onConfirm, onCancel, danger }: { title: string; message: string; onConfirm: () => void; onCancel: () => void; danger?: boolean }) {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-sm p-6 card-shadow-md">
-        <h3 className="text-lg font-bold text-[#111827] mb-2">{title}</h3>
-        <p className="text-[#6B7280] text-sm mb-6">{message}</p>
-        <div className="flex gap-3">
-          <button onClick={onCancel} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-          <button onClick={onConfirm} className={`flex-1 h-10 rounded-xl font-semibold text-sm text-white transition-colors ${danger ? 'bg-red-500 hover:bg-red-600' : 'bg-[#5244F3] hover:bg-[#4338CA]'}`}>Confirm</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function CreateUserModal({ onCreate, onCancel, myRole }: { onCreate: (data: { username: string; password: string; name: string; role: string }) => void; onCancel: () => void; myRole: string }) {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [name, setName] = useState('');
-  const [role, setRole] = useState('reseller');
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-sm p-6 card-shadow-md max-h-[90vh] overflow-y-auto">
-        <h3 className="text-lg font-bold text-[#111827] mb-1">Create User</h3>
-        <p className="text-[#9CA3AF] text-xs mb-4">Create an admin, reseller, or sub-user account.</p>
-        <div className="space-y-3">
-          <div>
-            <label className="text-[#6B7280] text-xs font-medium block mb-1">Full Name</label>
-            <input value={name} onChange={e => setName(e.target.value)} placeholder="John Doe" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm text-[#111827] focus:outline-none focus:border-purple-400 transition-all" />
-          </div>
-          <div>
-            <label className="text-[#6B7280] text-xs font-medium block mb-1">Username</label>
-            <input value={username} onChange={e => setUsername(e.target.value)} placeholder="johndoe" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm text-[#111827] focus:outline-none focus:border-purple-400 transition-all" />
-          </div>
-          <div>
-            <label className="text-[#6B7280] text-xs font-medium block mb-1">Password</label>
-            <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Min 8 characters" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm text-[#111827] focus:outline-none focus:border-purple-400 transition-all" />
-          </div>
-          {myRole === 'super_admin' && (
-            <div>
-              <label className="text-[#6B7280] text-xs font-medium block mb-2">Role</label>
-              <div className="grid grid-cols-3 gap-2">
-                {[{ v: 'admin', l: 'Admin' }, { v: 'reseller', l: 'Reseller' }].map(r => (
-                  <button key={r.v} onClick={() => setRole(r.v)} className={`p-2.5 rounded-xl border text-center text-xs font-semibold transition-all ${role === r.v ? 'border-purple-400 bg-purple-50 text-purple-700 ring-2 ring-purple-100' : 'border-gray-200 text-[#6B7280]'}`}>
-                    {r.l}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-          {myRole === 'admin' && (
-            <div>
-              <label className="text-[#6B7280] text-xs font-medium block mb-2">Role</label>
-              <div className="p-2.5 rounded-xl border border-gray-100 bg-gray-50 text-center text-xs font-semibold text-[#6B7280]">Reseller (only option)</div>
-            </div>
-          )}
-          <div className="flex gap-3 pt-2">
-            <button onClick={onCancel} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-            <button onClick={() => { if (username && password && name) onCreate({ username, password, name, role }); }} disabled={!username || !password || !name || password.length < 6} className="flex-1 h-10 rounded-xl bg-[#5244F3] hover:bg-[#4338CA] disabled:bg-gray-300 text-white font-semibold text-sm transition-colors">Create User</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function PermissionsModal({ user, onSave, onCancel }: { user: AdminUser; onSave: (permissions: any) => void; onCancel: () => void }) {
-  const [perms, setPerms] = useState({
-    canCreateKey: user.canCreateKey,
-    canDeleteKey: user.canDeleteKey,
-    canBlockKey: user.canBlockKey,
-    canManageTokens: user.canManageTokens,
-    canCreateReseller: user.canCreateReseller,
-    canManageResellers: user.canManageResellers,
-    canManageUsers: user.canManageUsers,
-  });
-
-  const toggle = (key: keyof typeof perms) => setPerms(p => ({ ...p, [key]: !p[key] }));
-
-  const permLabels: Record<keyof typeof perms, { label: string; desc: string }> = {
-    canCreateKey: { label: 'Create Keys', desc: 'Can generate new API keys' },
-    canDeleteKey: { label: 'Delete Keys', desc: 'Can delete API keys' },
-    canBlockKey: { label: 'Block Keys', desc: 'Can block and unblock API keys' },
-    canManageTokens: { label: 'Manage Tokens', desc: 'Can adjust token limits per key' },
-    canCreateReseller: { label: 'Create Resellers', desc: 'Can create reseller accounts' },
-    canManageResellers: { label: 'Manage Resellers', desc: 'Can manage reseller accounts' },
-    canManageUsers: { label: 'Manage Users', desc: 'Can manage users and permissions' },
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-sm p-6 card-shadow-md max-h-[90vh] overflow-y-auto">
-        <h3 className="text-lg font-bold text-[#111827] mb-1">Permissions</h3>
-        <p className="text-[#9CA3AF] text-xs font-mono mb-4">@{user.username} · {roleLabel(user.role)}</p>
-        <div className="space-y-2">
-          {(Object.keys(perms) as Array<keyof typeof perms>).map(key => (
-            <div key={key} className="flex items-center justify-between p-3 bg-[#F9FAFB] rounded-xl border border-gray-100">
-              <div>
-                <p className="text-[#374151] text-sm font-medium">{permLabels[key].label}</p>
-                <p className="text-[#9CA3AF] text-xs">{permLabels[key].desc}</p>
-              </div>
-              <button
-                onClick={() => toggle(key)}
-                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${perms[key] ? 'bg-purple-600' : 'bg-gray-200'}`}
-              >
-                <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${perms[key] ? 'translate-x-6' : 'translate-x-1'}`} />
-              </button>
-            </div>
-          ))}
-        </div>
-        <div className="flex gap-3 mt-4">
-          <button onClick={onCancel} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-          <button onClick={() => onSave(perms)} className="flex-1 h-10 rounded-xl bg-[#5244F3] hover:bg-[#4338CA] text-white font-semibold text-sm transition-colors">Save Permissions</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function TempBlockModal({ user, onConfirm, onCancel }: { user: AdminUser; onConfirm: (duration: number) => void; onCancel: () => void }) {
-  const durations = [
-    { label: '1 Hour', value: 3600000 },
-    { label: '6 Hours', value: 21600000 },
-    { label: '24 Hours', value: 86400000 },
-    { label: '3 Days', value: 259200000 },
-    { label: '7 Days', value: 604800000 },
-    { label: '30 Days', value: 2592000000 },
-  ];
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-xs p-6 card-shadow-md">
-        <h3 className="text-lg font-bold text-[#111827] mb-1">Temporarily Block</h3>
-        <p className="text-[#9CA3AF] text-xs font-mono mb-4">@{user.username} will be blocked for this duration.</p>
-        <div className="space-y-2">
-          {durations.map(d => (
-            <button key={d.value} onClick={() => onConfirm(d.value)} className="w-full h-10 rounded-xl border border-gray-200 text-[#374151] font-semibold text-sm hover:bg-purple-50 hover:border-purple-300 hover:text-purple-700 transition-colors text-left px-3">
-              {d.label}
-            </button>
-          ))}
-        </div>
-        <div className="mt-3">
-          <button onClick={onCancel} className="w-full h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BlogModal({ post, onSave, onCancel }: { post?: any; onSave: (data: any) => void; onCancel: () => void }) {
-  const [title, setTitle] = useState(post?.title ?? '');
-  const [content, setContent] = useState(post?.content ?? '');
-  const [excerpt, setExcerpt] = useState(post?.excerpt ?? '');
-  const [tags, setTags] = useState(post?.tags ?? '');
-  const [coverImage, setCoverImage] = useState(post?.coverImage ?? '');
-  const [seoTitle, setSeoTitle] = useState(post?.seoTitle ?? '');
-  const [seoDesc, setSeoDesc] = useState(post?.seoDesc ?? '');
-  const [published, setPublished] = useState(post?.published ?? false);
-  const [saving, setSaving] = useState(false);
-
-  const handleSave = async () => {
-    if (!title || !content) return;
-    setSaving(true);
-    await onSave({ title, content, excerpt, tags, coverImage, seoTitle, seoDesc, published });
-    setSaving(false);
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 backdrop-blur-sm p-4 overflow-y-auto">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-2xl p-6 card-shadow-md my-8">
-        <h3 className="text-lg font-bold text-[#111827] mb-4">{post ? 'Edit Post' : 'New Blog Post'}</h3>
-        <div className="space-y-3 max-h-[70vh] overflow-y-auto pr-1">
-          <div>
-            <label className="text-[#6B7280] text-xs font-medium block mb-1">Title *</label>
-            <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Blog post title" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm text-[#111827] focus:outline-none focus:border-purple-400 transition-all" />
-          </div>
-          <div>
-            <label className="text-[#6B7280] text-xs font-medium block mb-1">Content * (HTML supported)</label>
-            <textarea value={content} onChange={e => setContent(e.target.value)} placeholder="Write your blog post content here..." rows={10} className="w-full px-3 py-2 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm text-[#111827] focus:outline-none focus:border-purple-400 transition-all resize-y" />
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="text-[#6B7280] text-xs font-medium block mb-1">Excerpt</label>
-              <input value={excerpt} onChange={e => setExcerpt(e.target.value)} placeholder="Short description" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" />
-            </div>
-            <div>
-              <label className="text-[#6B7280] text-xs font-medium block mb-1">Tags (comma-separated)</label>
-              <input value={tags} onChange={e => setTags(e.target.value)} placeholder="AI, Claude, API" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" />
-            </div>
-          </div>
-          <div>
-            <label className="text-[#6B7280] text-xs font-medium block mb-1">Cover Image URL</label>
-            <input value={coverImage} onChange={e => setCoverImage(e.target.value)} placeholder="https://..." className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" />
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="text-[#6B7280] text-xs font-medium block mb-1">SEO Title</label>
-              <input value={seoTitle} onChange={e => setSeoTitle(e.target.value)} placeholder="Custom SEO title" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" />
-            </div>
-            <div>
-              <label className="text-[#6B7280] text-xs font-medium block mb-1">SEO Description</label>
-              <input value={seoDesc} onChange={e => setSeoDesc(e.target.value)} placeholder="Meta description" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" />
-            </div>
-          </div>
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => setPublished(!published)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${published ? 'bg-purple-600' : 'bg-gray-200'}`}
-            >
-              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${published ? 'translate-x-6' : 'translate-x-1'}`} />
-            </button>
-            <span className="text-sm font-medium text-[#374151]">{published ? 'Published' : 'Draft'}</span>
-          </div>
-        </div>
-        <div className="flex gap-3 mt-4 pt-4 border-t border-gray-100">
-          <button onClick={onCancel} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-          <button onClick={handleSave} disabled={saving || !title || !content} className="flex-1 h-10 rounded-xl bg-[#5244F3] hover:bg-[#4338CA] disabled:bg-gray-300 text-white font-semibold text-sm transition-colors">{saving ? 'Saving...' : 'Save Post'}</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BlogTab({ posts, total, page, onFetch, onFetchStats }: { posts: any[]; total: number; page: number; onFetch: (p: number) => void; onFetchStats: () => void }) {
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-  const [confirm, setConfirm] = useState<{ message: string; onConfirm: () => void } | null>(null);
-  const [editingPost, setEditingPost] = useState<any | null>(null);
-  const [creating, setCreating] = useState(false);
-
-  const doAction = async (id: string, action: string, data?: any) => {
-    setActionLoading(id + action);
-    try {
-      const r = await fetch(`/api/admin/posts/${id}`, {
-        method: action === 'delete' ? 'DELETE' : 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: action === 'delete' ? undefined : JSON.stringify(data),
-      });
-      if (r.ok) { await onFetch(page); onFetchStats(); }
-    } finally { setActionLoading(null); }
-  };
-
-  const handleCreate = async (data: any) => {
-    setCreating(false);
-    setActionLoading('creating');
-    try {
-      await fetch('/api/admin/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
-      await onFetch(1);
-      onFetchStats();
-    } finally { setActionLoading(null); }
-  };
-
-  return (
-    <>
-      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
-        <div className="flex items-center gap-2">
-          <span className="text-[#9CA3AF] text-xs">{total} posts</span>
-        </div>
-        <button onClick={() => setCreating(true)} className="h-9 px-4 bg-[#5244F3] hover:bg-[#4338CA] text-white rounded-xl text-sm font-semibold transition-colors shadow-sm flex items-center gap-1.5">
-          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          New Post
-        </button>
-      </div>
-
-      <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden card-shadow">
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-gray-100 bg-gray-50">
-                {['Title', 'Status', 'Tags', 'Views', 'Created', 'Actions'].map(h => (
-                  <th key={h} className="text-left text-[#9CA3AF] font-bold px-4 py-3 text-xs uppercase tracking-wider whitespace-nowrap">{h}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {posts.length === 0 ? (
-                <tr><td colSpan={6} className="px-4 py-16 text-center text-[#D1D5DB] text-sm">No blog posts yet.</td></tr>
-              ) : posts.map(p => (
-                <tr key={p.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
-                  <td className="px-4 py-3">
-                    <p className="text-[#374151] text-sm font-medium max-w-64 truncate">{p.title}</p>
-                    <p className="text-[#D1D5DB] text-xs font-mono truncate max-w-64">{p.slug}</p>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${p.published ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-gray-100 text-gray-500 border border-gray-200'}`}>
-                      {p.published ? 'Published' : 'Draft'}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="flex gap-1 flex-wrap">
-                      {(p.tags as string ?? '').split(',').filter(Boolean).map((t: string) => (
-                        <span key={t} className="text-xs bg-purple-50 text-purple-600 px-1.5 py-0.5 rounded-full border border-purple-100">{t.trim()}</span>
-                      ))}
-                    </div>
-                  </td>
-                  <td className="px-4 py-3 text-xs font-mono text-[#6B7280]">{p.views?.toLocaleString() ?? 0}</td>
-                  <td className="px-4 py-3 text-xs text-[#9CA3AF]">{new Date(p.createdAt).toLocaleDateString()}</td>
-                  <td className="px-4 py-3">
-                    <div className="flex items-center gap-1">
-                      <button onClick={() => setEditingPost(p)} className="w-7 h-7 rounded-lg hover:bg-gray-100 flex items-center justify-center text-[#9CA3AF] hover:text-[#6B7280] transition-colors" title="Edit">
-                        <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                      </button>
-                      {p.published ? (
-                        <button onClick={() => setConfirm({ message: `Unpublish "${p.title}"?`, onConfirm: () => { setConfirm(null); doAction(p.id, 'update', { published: false }); } })} disabled={actionLoading === p.id + 'update'} className="w-7 h-7 rounded-lg hover:bg-amber-50 flex items-center justify-center text-[#9CA3AF] hover:text-amber-500 transition-colors" title="Unpublish">
-                          <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18.36 6.64A9 9 0 0 1 20.77 15M6.16 6.16a9 9 0 1 0 12.68 12.68M12 2v4M2 12h4"/></svg>
-                        </button>
-                      ) : (
-                        <button onClick={() => setConfirm({ message: `Publish "${p.title}"?`, onConfirm: () => { setConfirm(null); doAction(p.id, 'update', { published: true }); } })} disabled={actionLoading === p.id + 'update'} className="w-7 h-7 rounded-lg hover:bg-emerald-50 flex items-center justify-center text-[#9CA3AF] hover:text-emerald-500 transition-colors" title="Publish">
-                          <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg>
-                        </button>
-                      )}
-                      <button onClick={() => setConfirm({ message: `Delete "${p.title}"? This cannot be undone.`, onConfirm: () => { setConfirm(null); doAction(p.id, 'delete'); } })} disabled={actionLoading === p.id + 'delete'} className="w-7 h-7 rounded-lg hover:bg-red-50 flex items-center justify-center text-[#9CA3AF] hover:text-red-500 transition-colors" title="Delete">
-                        <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3,6 5,6 21,6"/><path d="M19,6l-1,14a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2L5,6"/><path d="M10,11v6M14,11v6"/><path d="M9,6V4a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1V6"/></svg>
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        {total > 10 && (
-          <div className="flex items-center justify-center gap-1 py-3 border-t border-gray-100">
-            {Array.from({ length: Math.min(Math.ceil(total / 10), 7) }, (_, i) => (
-              <button key={i} onClick={() => onFetch(i + 1)} className={`w-8 h-8 rounded-lg text-xs font-semibold transition-colors ${page === i + 1 ? 'bg-purple-600 text-white' : 'hover:bg-gray-100 text-[#6B7280]'}`}>{i + 1}</button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {confirm && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-          <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-sm p-6 card-shadow-md">
-            <p className="text-[#374151] text-sm mb-6">{confirm.message}</p>
-            <div className="flex gap-3">
-              <button onClick={() => setConfirm(null)} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-              <button onClick={confirm.onConfirm} className="flex-1 h-10 rounded-xl bg-[#5244F3] hover:bg-[#4338CA] text-white font-semibold text-sm transition-colors">Confirm</button>
-            </div>
-          </div>
-        </div>
-      )}
-      {editingPost && (
-        <BlogModal post={editingPost} onSave={async (data) => { await doAction(editingPost.id, 'update', data); setEditingPost(null); }} onCancel={() => setEditingPost(null)} />
-      )}
-      {creating && (
-        <BlogModal onSave={async (data) => { await handleCreate(data); setCreating(false); }} onCancel={() => setCreating(false)} />
-      )}
-    </>
-  );
-}
-
-function SettingsTab() {
-  const [supportEnabled, setSupportEnabled] = useState(true);
-  const [loading, setLoading] = useState(false);
-  const [saved, setSaved] = useState(false);
-
-  useEffect(() => {
-    fetch('/api/admin/settings').then(r => r.ok ? r.json() : { supportEnabled: true }).then((d: { supportEnabled: boolean }) => setSupportEnabled(d.supportEnabled ?? true)).catch(() => {});
-  }, []);
-
-  const toggle = async () => {
-    setLoading(true);
-    const newVal = !supportEnabled;
-    try {
-      const r = await fetch('/api/admin/settings', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ supportEnabled: newVal }) });
-      if (r.ok) {
-        setSupportEnabled(newVal);
-        setSaved(true);
-        setTimeout(() => setSaved(false), 2000);
-      }
-    } finally { setLoading(false); }
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="bg-white rounded-2xl border border-gray-200 card-shadow p-6">
-        <h2 className="text-lg font-bold text-[#111827] mb-1">Site Settings</h2>
-        <p className="text-[#9CA3AF] text-xs mb-6">Configure global site features.</p>
-
-        <div className="space-y-4">
-          <div className="flex items-center justify-between p-4 bg-[#F9FAFB] rounded-xl border border-gray-100">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
-                <svg className="w-5 h-5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              </div>
-              <div>
-                <p className="text-[#374151] text-sm font-semibold">Support Page</p>
-                <p className="text-[#9CA3AF] text-xs">Show or hide the Support page from header, footer, and mobile menu.</p>
-              </div>
-            </div>
-            <div className="flex items-center gap-3">
-              {saved && <span className="text-xs text-emerald-600 font-semibold">Saved!</span>}
-              <button
-                onClick={toggle}
-                disabled={loading}
-                className={`relative inline-flex h-7 w-13 items-center rounded-full transition-colors focus:outline-none ${supportEnabled ? 'bg-purple-600' : 'bg-gray-200'}`}
-              >
-                <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${supportEnabled ? 'translate-x-7' : 'translate-x-1.5'}`} />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function EditUserModal({ user, onSave, onCancel }: { user: AdminUser; onSave: (data: any) => void; onCancel: () => void }) {
-  const [name, setName] = useState(user.name);
-  const [password, setPassword] = useState('');
-  const [role, setRole] = useState(user.role);
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-sm p-6 card-shadow-md">
-        <h3 className="text-lg font-bold text-[#111827] mb-1">Edit User</h3>
-        <p className="text-[#9CA3AF] text-xs font-mono mb-4">@{user.username}</p>
-        <div className="space-y-3">
-          <div><label className="text-[#6B7280] text-xs font-medium block mb-1">Name</label><input value={name} onChange={e => setName(e.target.value)} className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" /></div>
-          <div><label className="text-[#6B7280] text-xs font-medium block mb-1">New Password <span className="text-[#9CA3AF]">(optional)</span></label><input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Leave blank to keep current" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" /></div>
-          <div><label className="text-[#6B7280] text-xs font-medium block mb-2">Role</label><div className="grid grid-cols-3 gap-2">{['super_admin', 'admin', 'reseller'].map(r => (<button key={r} onClick={() => setRole(r)} className={`p-2 rounded-xl border text-center text-xs font-semibold transition-all ${role === r ? 'border-purple-400 bg-purple-50 text-purple-700 ring-2 ring-purple-100' : 'border-gray-200 text-[#6B7280]'}`}>{roleLabel(r)}</button>))}</div></div>
-          <div className="flex gap-3">
-            <button onClick={onCancel} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-            <button onClick={() => onSave({ name, password: password || undefined, role })} className="flex-1 h-10 rounded-xl bg-[#5244F3] hover:bg-[#4338CA] text-white font-semibold text-sm transition-colors">Save Changes</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function EditKeyModal({ apiKey, onSave, onCancel }: { apiKey: any; onSave: (data: { tokenLimitOverride?: number | null; expiresAt?: string | null; name?: string }) => void; onCancel: () => void }) {
-  const [tokenLimitOverride, setTokenLimitOverride] = useState(apiKey.tokenLimitOverride ? String(apiKey.tokenLimitOverride) : '');
-  const [expiresAt, setExpiresAt] = useState(
-    apiKey.expiresAt ? new Date(apiKey.expiresAt).toISOString().split('T')[0] : ''
-  );
-  const [name, setName] = useState(apiKey.name || '');
-  const [overrideEnabled, setOverrideEnabled] = useState(!!apiKey.tokenLimitOverride);
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-sm p-6 card-shadow-md">
-        <h3 className="text-lg font-bold text-[#111827] mb-1">Edit API Key</h3>
-        <p className="text-[#9CA3AF] text-xs mb-4">Update token limits, expiry, or name.</p>
-        <div className="space-y-3">
-          {/* Key Name */}
-          <div>
-            <label className="text-[#6B7280] text-xs font-medium block mb-1">Key Name</label>
-            <input value={name} onChange={e => setName(e.target.value)} className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" />
-          </div>
-          {/* Token Limit Override */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className="text-[#6B7280] text-xs font-medium">Token Limit Override</label>
-              <label className="flex items-center gap-1 text-[10px] text-[#9CA3AF] cursor-pointer">
-                <input type="checkbox" checked={overrideEnabled} onChange={e => { setOverrideEnabled(e.target.checked); if (!e.target.checked) setTokenLimitOverride(''); }} className="accent-purple-500" />
-                Custom
-              </label>
-            </div>
-            {overrideEnabled ? (
-              <div className="flex gap-2 items-center">
-                <input
-                  type="number" min={100000} max={1000000000} step={100000}
-                  value={tokenLimitOverride}
-                  onChange={e => setTokenLimitOverride(e.target.value)}
-                  placeholder="Leave empty for plan default"
-                  className="flex-1 h-10 px-3 bg-[#F9FAFB] border border-purple-300 rounded-xl text-sm focus:outline-none focus:border-purple-400 focus:ring-1 focus:ring-purple-100 transition-all"
-                />
-                <span className="text-[#9CA3AF] text-xs">tok/5h</span>
-              </div>
-            ) : (
-              <p className="text-[#9CA3AF] text-xs py-2">
-                Using plan default {apiKey.tokenLimitOverride ? `(override: ${(Number(apiKey.tokenLimitOverride) / 1_000_000).toFixed(1)}M)` : ''}
-              </p>
-            )}
-          </div>
-          {/* Expiry Date */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className="text-[#6B7280] text-xs font-medium">Expiry Date</label>
-              {expiresAt && (
-                <button onClick={() => setExpiresAt('')} className="text-[10px] text-red-400 hover:text-red-500">Clear expiry</button>
-              )}
-            </div>
-            <input
-              type="date"
-              value={expiresAt}
-              min={new Date().toISOString().split('T')[0]}
-              onChange={e => setExpiresAt(e.target.value)}
-              className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all"
-            />
-            <p className="text-[#D1D5DB] text-[10px] mt-1">
-              {expiresAt ? `Expires: ${new Date(expiresAt).toLocaleDateString()} · Admin override` : 'No expiry set (uses plan duration)'}
-            </p>
-          </div>
-        </div>
-        <div className="flex gap-3 pt-4">
-          <button onClick={onCancel} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-          <button onClick={() => onSave({
-            name,
-            tokenLimitOverride: overrideEnabled && tokenLimitOverride ? Number(tokenLimitOverride) : null,
-            expiresAt: expiresAt || null,
-          })} className="flex-1 h-10 rounded-xl bg-[#5244F3] hover:bg-[#4338CA] text-white font-semibold text-sm transition-colors">Save Changes</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function CreateKeyModal({ onCreate, onCancel, users, myRole, plans = [], allowedPlanIds = [], defaultPlanId = '' }: { onCreate: (data: { name: string; planId?: string; resellerId?: string; days?: number; tokenLimitOverride?: number }) => void; onCancel: () => void; users?: AdminUser[]; myRole: string; plans?: any[]; allowedPlanIds?: string[]; defaultPlanId?: string }) {
-  const [name, setName] = useState('');
-  const [planId, setPlanId] = useState(defaultPlanId || (plans[0]?.id ?? ''));
-  const [resellerId, setResellerId] = useState('');
-  const [days, setDays] = useState(30);
-  const [tokenLimitOverride, setTokenLimitOverride] = useState('');
-  const [overrideEnabled, setOverrideEnabled] = useState(false);
-  const isAdmin = myRole === 'super_admin' || myRole === 'admin';
-
-  const availablePlans = myRole === 'reseller' ? plans.filter(p => allowedPlanIds.includes(p.id)) : plans;
-  const selectedPlan = plans.find(p => p.id === planId);
-
-  const defaultDays = selectedPlan?.durationDays ?? 30;
-  useEffect(() => { setDays(defaultDays); }, [defaultDays]);
-
-  const durationOptions: { label: string; value: number }[] = [];
-  if (selectedPlan) {
-    if (selectedPlan.maxDurationDays === -1) {
-      [7, 15, 30, 60, 90, 180, 365].forEach(d => {
-        if (d >= selectedPlan.minDurationDays) durationOptions.push({ label: `${d} days`, value: d });
-      });
-    } else {
-      for (let d = selectedPlan.minDurationDays; d <= selectedPlan.maxDurationDays; d += 7) {
-        if (d > 0) durationOptions.push({ label: `${d} days`, value: d });
-      }
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl border border-gray-200 w-full max-w-sm p-6 card-shadow-md max-h-[90vh] overflow-y-auto">
-        <h3 className="text-lg font-bold text-[#111827] mb-1">Create API Key</h3>
-        <p className="text-[#9CA3AF] text-xs mb-4">{myRole === 'reseller' ? 'Create a key for your account.' : 'Generate a new API key for a client.'}</p>
-        <div className="space-y-3">
-          <div><label className="text-[#6B7280] text-xs font-medium block mb-1">Application Name</label><input value={name} onChange={e => setName(e.target.value)} placeholder="Client iOS App" className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" /></div>
-          {myRole !== 'reseller' && users && users.length > 0 && (
-            <div><label className="text-[#6B7280] text-xs font-medium block mb-1">Assign to Reseller</label>
-              <select value={resellerId} onChange={e => setResellerId(e.target.value)} className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all">
-                <option value="">No reseller (general)</option>
-                {users.filter(u => u.role === 'reseller').map(u => (<option key={u.id} value={u.id}>{u.name} (@{u.username})</option>))}
-              </select>
-            </div>
-          )}
-          <div><label className="text-[#6B7280] text-xs font-medium block mb-1">Assign Plan</label>
-            <select value={planId} onChange={e => { setPlanId(e.target.value); setDays(plans.find(p => p.id === e.target.value)?.durationDays ?? 30); }} className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all">
-              {availablePlans.map(p => {
-                const tokensM = Number(p.tokensPerWindow) / 1_000_000;
-                const durationLabel = p.durationDays === -1 ? 'No expiry' : p.durationDays > 0 ? `${p.durationDays}d` : '';
-                return (
-                <option key={p.id} value={p.id}>{p.name} — {p.tier} ({tokensM}M tok / {p.requestsPerWindow} req / {durationLabel})</option>
-              );
-              })}
-            </select>
-          </div>
-          {selectedPlan && selectedPlan.durationDays !== -1 && (
-            <div>
-              <div className="flex items-center justify-between mb-1">
-                <label className="text-[#6B7280] text-xs font-medium">Duration {isAdmin && <span className="text-purple-500 text-[10px]">(Admin: up to 365d)</span>}</label>
-                {isAdmin && (
-                  <label className="flex items-center gap-1 text-[10px] text-[#9CA3AF] cursor-pointer">
-                    <input type="checkbox" checked={overrideEnabled} onChange={e => { setOverrideEnabled(e.target.checked); if (!e.target.checked) setDays(defaultDays); }} className="accent-purple-500" />
-                    Custom
-                  </label>
-                )}
-              </div>
-              {overrideEnabled ? (
-                <input
-                  type="number" min={1} max={365} value={days}
-                  onChange={e => setDays(Math.min(365, Math.max(1, Number(e.target.value))))}
-                  className="w-full h-10 px-3 bg-[#F9FAFB] border border-purple-300 rounded-xl text-sm focus:outline-none focus:border-purple-400 focus:ring-1 focus:ring-purple-100 transition-all"
-                />
-              ) : durationOptions.length > 0 ? (
-                <div className="grid grid-cols-4 gap-1.5">
-                  {durationOptions.map(opt => (
-                    <button key={opt.value} onClick={() => setDays(opt.value)} className={`px-2 py-1.5 rounded-lg border text-center text-xs font-semibold transition-all ${days === opt.value ? 'border-purple-400 bg-purple-50 text-purple-700 ring-1 ring-purple-200' : 'border-gray-200 text-[#6B7280] hover:border-gray-300'}`}>
-                      {opt.label}
-                    </button>
-                  ))}
-                </div>
-              ) : (
-                <input type="number" min={selectedPlan.minDurationDays} max={365} value={days} onChange={e => setDays(Number(e.target.value))} className="w-full h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all" />
-              )}
-              <p className="text-[#D1D5DB] text-[10px] mt-1">
-                {overrideEnabled ? `${days} days · Admin override (max 365d)` : (selectedPlan.minDurationDays > 0 ? `Min: ${selectedPlan.minDurationDays}d` : '') + (selectedPlan.maxDurationDays !== -1 ? ` · Max: ${selectedPlan.maxDurationDays}d` : ' · No max')}
-              </p>
-            </div>
-          )}
-          {selectedPlan && selectedPlan.durationDays === -1 && (
-            <div className="p-2.5 rounded-lg border border-gray-100 bg-gray-50 text-center text-xs text-[#9CA3AF]">Duration: No expiry (unlimited plan)</div>
-          )}
-          {/* Token limit override for admins */}
-          {isAdmin && selectedPlan && (
-            <div>
-              <div className="flex items-center justify-between mb-1">
-                <label className="text-[#6B7280] text-xs font-medium">Token Limit Override</label>
-                <label className="flex items-center gap-1 text-[10px] text-[#9CA3AF] cursor-pointer">
-                  <input type="checkbox" checked={overrideEnabled} onChange={e => { setOverrideEnabled(e.target.checked); if (!e.target.checked) setTokenLimitOverride(''); }} className="accent-purple-500" />
-                  Custom
-                </label>
-              </div>
-              <div className="flex gap-2 items-center">
-                <input
-                  type="number" min={100000} max={1000000000} step={100000}
-                  value={tokenLimitOverride}
-                  onChange={e => setTokenLimitOverride(e.target.value)}
-                  placeholder={`Default: ${Number(selectedPlan.tokensPerWindow).toLocaleString()}`}
-                  className="flex-1 h-10 px-3 bg-[#F9FAFB] border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-purple-400 transition-all"
-                />
-                <span className="text-[#9CA3AF] text-xs">tokens/5h</span>
-              </div>
-              <p className="text-[#D1D5DB] text-[10px] mt-1">
-                {tokenLimitOverride ? `${(Number(tokenLimitOverride) / 1_000_000).toFixed(1)}M tokens/5h window · Admin override` : `Plan default: ${(Number(selectedPlan.tokensPerWindow) / 1_000_000).toFixed(1)}M tokens/5h`}
-              </p>
-            </div>
-          )}
-          <div className="flex gap-3 pt-1">
-            <button onClick={onCancel} className="flex-1 h-10 rounded-xl border border-gray-200 text-[#6B7280] font-semibold text-sm hover:bg-gray-50 transition-colors">Cancel</button>
-            <button onClick={() => onCreate({ name: name || 'My API Key', planId: planId || undefined, resellerId: resellerId || undefined, days: selectedPlan?.durationDays === -1 ? undefined : days, tokenLimitOverride: overrideEnabled && tokenLimitOverride ? Number(tokenLimitOverride) : undefined })} className="flex-1 h-10 rounded-xl bg-[#5244F3] hover:bg-[#4338CA] text-white font-semibold text-sm transition-colors">Generate Key</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-export default function AdminDashboard() {
-  const router = useRouter();
-  const [me, setMe] = useState<{ id: string; username: string; name: string; role: string; canCreateKey: boolean; canDeleteKey: boolean; canBlockKey: boolean; canManageTokens: boolean; canCreateReseller: boolean; canManageResellers: boolean; canManageUsers: boolean; allowedPlanIds?: string; defaultPlanId?: string | null } | null>(null);
-  const [stats, setStats] = useState<Stats | null>(null);
-  const [keys, setKeys] = useState<ApiKey[]>([]);
-  const [users, setUsers] = useState<AdminUser[]>([]);
-  const [totalKeys, setTotalKeys] = useState(0);
-  const [totalUsers, setTotalUsers] = useState(0);
-  const [totalPosts, setTotalPosts] = useState(0);
-  const [blogPosts, setBlogPosts] = useState<any[]>([]);
-  const [blogPage, setBlogPage] = useState(1);
-  const [blogSearch, setBlogSearch] = useState('');
-  const [blogStatus, setBlogStatus] = useState('');
-  const [page, setPage] = useState(1);
-  const [userPage, setUserPage] = useState(1);
-  const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState('overview');
-  const [search, setSearch] = useState('');
-  const [tierFilter, setTierFilter] = useState('');
-  const [statusFilter, setStatusFilter] = useState('');
-  const [userSearch, setUserSearch] = useState('');
-  const [userRoleFilter, setUserRoleFilter] = useState('');
-  const [userStatusFilter, setUserStatusFilter] = useState('');
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-  const [copiedKey, setCopiedKey] = useState('');
-  const [newlyCreated, setNewlyCreated] = useState('');
-  const [confirmModal, setConfirmModal] = useState<{ title: string; message: string; onConfirm: () => void; danger?: boolean } | null>(null);
-  const [editUser, setEditUser] = useState<AdminUser | null>(null);
-  const [createUserOpen, setCreateUserOpen] = useState(false);
-  const [createKeyOpen, setCreateKeyOpen] = useState(false);
-  const [editKey, setEditKey] = useState<any | null>(null);
-  const [permissionsUser, setPermissionsUser] = useState<AdminUser | null>(null);
-  const [tempBlockUser, setTempBlockUser] = useState<AdminUser | null>(null);
-  const [editingPost, setEditingPost] = useState<any | null>(null);
-  const [creatingPost, setCreatingPost] = useState(false);
-  const [plans, setPlans] = useState<any[]>([]);
-  const [healthData, setHealthData] = useState<any>(null);
-  const [healthLoading, setHealthLoading] = useState(false);
-  const searchRef = useRef<ReturnType<typeof setTimeout>>();
-
-  // Auth check
-  useEffect(() => {
-    fetch('/api/admin/auth/me').then(r => {
-      if (!r.ok) { router.push('/admin'); return null; }
-      return r.json();
-    }).then(data => {
-      if (!data) return;
-      setMe(data);
-      if (data.role === 'reseller') setActiveTab('keys');
-    }).catch(() => router.push('/admin'));
-  }, [router]);
-
-  const fetchStats = useCallback(async () => {
-    try {
-      const r = await fetch('/api/admin/stats');
-      if (r.ok) setStats(await r.json());
-    } catch {}
-  }, []);
-
-  const fetchKeys = useCallback(async (p = 1) => {
-    setLoading(true);
-    try {
-      const params = new URLSearchParams({ page: String(p), limit: '15' });
-      if (search) params.set('search', search);
-      if (tierFilter) params.set('tier', tierFilter);
-      if (statusFilter) params.set('status', statusFilter);
-      const r = await fetch(`/api/admin/keys-list?${params}`);
-      if (r.ok) {
-        const d = await r.json();
-        setKeys(d.keys);
-        setTotalKeys(d.total);
-        setPage(d.page);
-      }
-    } catch {} finally { setLoading(false); }
-  }, [search, tierFilter, statusFilter]);
-
-  const fetchUsers = useCallback(async (p = 1) => {
-    try {
-      const params = new URLSearchParams({ page: String(p) });
-      if (userSearch) params.set('search', userSearch);
-      if (userRoleFilter) params.set('role', userRoleFilter);
-      if (userStatusFilter) params.set('status', userStatusFilter);
-      const r = await fetch(`/api/admin/users?${params}`);
-      if (r.ok) {
-        const d = await r.json();
-        setUsers(d.users);
-        setTotalUsers(d.total);
-        setUserPage(d.page);
-      }
-    } catch {}
-  }, [userSearch, userRoleFilter, userStatusFilter]);
-
-  useEffect(() => { if (me) fetchStats(); }, [me, fetchStats]);
-  useEffect(() => { if (me) fetchKeys(); }, [me, fetchKeys]);
-  useEffect(() => { if (me && me.role !== 'reseller') fetchUsers(); }, [me, fetchUsers]);
-
-  const fetchHealth = useCallback(async () => {
-    if (me?.role !== 'super_admin') return;
-    setHealthLoading(true);
-    try {
-      const r = await fetch('/api/admin/health');
-      if (r.ok) setHealthData(await r.json());
-    } catch {} finally { setHealthLoading(false); }
-  }, [me]);
-
-  // Auto-refresh stats every 10s and keys every 10s
-  useEffect(() => {
-    const interval = setInterval(() => { fetchStats(); fetchKeys(); if (activeTab === 'health') fetchHealth(); }, 10000);
-    return () => clearInterval(interval);
-  }, [fetchStats, fetchKeys, fetchHealth, activeTab]);
-
-  // Debounced search
-  useEffect(() => {
-    clearTimeout(searchRef.current);
-    searchRef.current = setTimeout(() => fetchKeys(1), 400);
-    return () => clearTimeout(searchRef.current);
-  }, [search, tierFilter, statusFilter, fetchKeys]);
-
-  useEffect(() => {
-    const t = setTimeout(() => fetchUsers(1), 400);
-    return () => clearTimeout(t);
-  }, [userSearch, userRoleFilter, userStatusFilter, fetchUsers]);
-
-  const fetchBlogPosts = useCallback(async (p = 1) => {
-    try {
-      const params = new URLSearchParams({ page: String(p) });
-      if (blogStatus) params.set('status', blogStatus);
-      const r = await fetch(`/api/admin/posts?${params}`);
-      if (r.ok) {
-        const d = await r.json();
-        setBlogPosts(d.posts);
-        setTotalPosts(d.total);
-        setBlogPage(d.page);
-      }
-    } catch {}
-  }, [blogStatus]);
-
-  useEffect(() => { if (me && (me.role === 'super_admin' || me.role === 'admin')) fetchBlogPosts(); }, [me, fetchBlogPosts]);
-
-  useEffect(() => {
-    if (!me) return;
-    fetch('/api/admin/plans').then(r => r.ok && r.json()).then(d => { if (d?.plans) setPlans(d.plans); });
-  }, [me]);
-
-  useEffect(() => {
-    const t = setTimeout(() => fetchBlogPosts(1), 400);
-    return () => clearTimeout(t);
-  }, [blogStatus, fetchBlogPosts]);
-
-  const doAction = async (id: string, action: string, data?: any) => {
-    setActionLoading(id + action);
-    try {
-      const r = await fetch(`/api/admin/keys/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action, ...data }) });
-      if (r.ok) { await fetchKeys(page); await fetchStats(); }
-    } finally { setActionLoading(null); }
-  };
-
-  const doUserAction = async (id: string, action: string, data?: any) => {
-    setActionLoading(id + action);
-    try {
-      const r = await fetch(`/api/admin/users/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action, ...data }) });
-      if (r.ok) { await fetchUsers(userPage); await fetchStats(); }
-    } finally { setActionLoading(null); }
-  };
-
-  const handleSavePermissions = async (id: string, permissions: any) => {
-    setPermissionsUser(null);
-    setActionLoading(id + 'perms');
-    try {
-      const r = await fetch(`/api/admin/users/${id}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'updatePermissions', permissions }),
-      });
-      if (r.ok) { await fetchUsers(userPage); }
-    } finally { setActionLoading(null); }
-  };
-
-  const doDeleteUser = async (id: string) => {
-    setConfirmModal(null);
-    setActionLoading(id + 'delete');
-    try {
-      const r = await fetch(`/api/admin/users/${id}`, { method: 'DELETE' });
-      if (r.ok) { await fetchUsers(userPage); await fetchStats(); }
-    } finally { setActionLoading(null); }
-  };
-
-  const handleCreateUser = async (data: { username: string; password: string; name: string; role: string }) => {
-    setCreateUserOpen(false);
-    setActionLoading('creating');
-    try {
-      const r = await fetch('/api/admin/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
-      if (r.ok) { await fetchUsers(1); await fetchStats(); }
-    } finally { setActionLoading(null); }
-  };
-
-  const handleSaveUser = async (id: string, data: any) => {
-    setEditUser(null);
-    setActionLoading(id);
-    try {
-      const r = await fetch(`/api/admin/users/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'update', ...data }) });
-      if (r.ok) { await fetchUsers(userPage); }
-    } finally { setActionLoading(null); }
-  };
-
-  const handleCreateKey = async (data: { name: string; planId?: string; resellerId?: string; days?: number }) => {
-    setCreateKeyOpen(false);
-    setActionLoading('creating');
-    try {
-      const r = await fetch('/api/admin/keys', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
-      if (r.ok) {
-        const d = await r.json();
-        setNewlyCreated(d.key);
-        await fetchKeys(1);
-        await fetchStats();
-      }
-    } finally { setActionLoading(null); }
-  };
-
-  const handleSaveKey = async (id: string, data: { name?: string; tokenLimitOverride?: number | null; expiresAt?: string | null }) => {
-    setEditKey(null);
-    setActionLoading(id);
-    try {
-      const r = await fetch(`/api/admin/keys/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'update', ...data }) });
-      if (r.ok) { await fetchKeys(page); }
-    } finally { setActionLoading(null); }
-  };
-
-  const logout = async () => {
-    await fetch('/api/admin/logout', { method: 'POST' });
-    router.push('/admin');
-  };
-
-  if (!me) return (
-    <div className="min-h-screen bg-[#F9FAFB] flex items-center justify-center">
-      <div className="w-8 h-8 border-2 border-purple-600 border-t-transparent rounded-full animate-spin" />
-    </div>
-  );
-
-  const showUsersTab = me.role !== 'reseller';
-  const canCreateResellers = me.role === 'super_admin' || me.role === 'admin';
-
-  const tierTabs = [
-    { label: 'All', value: '' },
-    { label: '5x Max', value: '5x' },
-    { label: '20x Max', value: '20x' },
-    { label: 'Unlimited', value: 'unlimited' },
-  ];
-
-  const userRoleTabs = [
-    { label: 'All', value: '' },
-    ...(me.role === 'super_admin' ? [{ label: 'Admins', value: 'admin' }] : []),
-    { label: 'Resellers', value: 'reseller' },
-  ];
-
-  return (
-    <div className="min-h-screen bg-[#F9FAFB]">
-
-      {/* Header */}
-      <header className="sticky top-0 z-40 bg-white/90 backdrop-blur-md border-b border-gray-200">
-        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-600 to-purple-500 flex items-center justify-center">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-white"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/></svg>
-            </div>
-            <span className="text-[#111827] font-bold text-lg">ClaudMax</span>
-            <span className={`text-xs font-bold px-2 py-0.5 rounded-full border ${roleColor(me.role)}`}>{roleLabel(me.role)}</span>
-            <span className="text-[#9CA3AF] text-xs">@{me.username}</span>
-          </div>
-          <div className="flex items-center gap-3">
-            <button onClick={fetchStats} className="text-xs text-[#9CA3AF] hover:text-[#6B7280] transition-colors flex items-center gap-1">
-              <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 4v6h6M23 20v-6h-6"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14l-4.64 4.36A9 9 0 0 1 3.51 15"/></svg>
-              Refresh
-            </button>
-            <button onClick={logout} className="text-xs text-[#9CA3AF] hover:text-red-500 transition-colors">Sign Out</button>
-          </div>
-        </div>
-      </header>
-
-      <div className="max-w-7xl mx-auto px-6 py-6">
-
-        {/* Tabs */}
-        <div className="flex items-center gap-1 mb-6 bg-white rounded-xl border border-gray-200 p-1 w-fit">
-          <button onClick={() => setActiveTab('overview')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'overview' ? 'bg-purple-600 text-white shadow-sm' : 'text-[#6B7280] hover:text-[#111827]'}`}>Overview</button>
-          <button onClick={() => setActiveTab('keys')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'keys' ? 'bg-purple-600 text-white shadow-sm' : 'text-[#6B7280] hover:text-[#111827]'}`}>API Keys</button>
-          {showUsersTab && (
-            <button onClick={() => setActiveTab('users')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'users' ? 'bg-purple-600 text-white shadow-sm' : 'text-[#6B7280] hover:text-[#111827]'}`}>
-              Users {me.role === 'super_admin' ? '& Admins' : ''}
-              <span className="ml-1.5 text-xs bg-white/20 px-1.5 py-0.5 rounded-full">{totalUsers}</span>
-            </button>
-          )}
-          {(me.role === 'super_admin' || me.role === 'admin') && (
-            <button onClick={() => { setActiveTab('blog'); }} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'blog' ? 'bg-purple-600 text-white shadow-sm' : 'text-[#6B7280] hover:text-[#111827]'}`}>
-              Blog
-              <span className="ml-1.5 text-xs bg-white/20 px-1.5 py-0.5 rounded-full">{totalPosts}</span>
-            </button>
-          )}
-          {me.role === 'super_admin' && (
-            <button onClick={() => { setActiveTab('health'); fetchHealth(); }} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all flex items-center gap-1.5 ${activeTab === 'health' ? 'bg-purple-600 text-white shadow-sm' : 'text-[#6B7280] hover:text-[#111827]'}`}>
-              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
-              Health
-              {healthData?.api?.status === 'ok' ? (
-                <span className="w-2 h-2 rounded-full bg-emerald-400" />
-              ) : healthData?.api?.status === 'error' ? (
-                <span className="w-2 h-2 rounded-full bg-red-500" />
-              ) : null}
-            </button>
-          )}
-          {me.role === 'super_admin' && (
-            <button onClick={() => setActiveTab('settings')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'settings' ? 'bg-purple-600 text-white shadow-sm' : 'text-[#6B7280] hover:text-[#111827]'}`}>
-              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M19.07 19.07l-1.41-1.41M5.34 5.34L3.93 3.93M19.07 19.07l1.41-1.41M5.34 5.34l1.41 1.41"/></svg>
-              Settings
-            </button>
-          )}
-        </div>
-
-        {/* ── Overview ── */}
-        {activeTab === 'overview' && stats && (
-          <>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-              <StatCard label="Total Keys" value={stats.totalKeys} sub={`${stats.activeKeys} active`} icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>} color="purple" />
-              <StatCard label="Total Requests" value={stats.totalRequests.toLocaleString()} sub="all time" icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>} color="blue" />
-              <StatCard label="Backend Tokens" value={fmtTokens(stats.totalTokens)} sub="actual consumed" icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>} color="amber" />
-              <StatCard label="Backend Cost" value={fmtCost(stats.totalTokens)} sub="at $3/1M tokens" icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>} color="green" />
-              {showUsersTab && <StatCard label="Users" value={stats.totalUsers} sub="registered" icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>} color="purple" />}
-            </div>
-
-            {/* Keys by tier */}
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
-              {['5x', '20x', 'unlimited'].map(tier => {
-                const found = stats.keysByTier.find(k => k.tier === tier);
-                const count = found?._count._all ?? 0;
-                return (
-                  <div key={tier} className={`rounded-2xl border p-4 ${tierColor(tier)} card-shadow`}>
-                    <p className="text-xs font-bold uppercase tracking-wider mb-1">{tier === '5x' ? '5x Max' : tier === '20x' ? '20x Max' : tier.charAt(0).toUpperCase() + tier.slice(1)}</p>
-                    <p className="text-2xl font-black text-[#111827]">{count}</p>
-                    <p className="text-[#9CA3AF] text-xs">keys</p>
-                  </div>
-                );
-              })}
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {/* Recent keys */}
-              <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden card-shadow">
-                <div className="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
-                  <p className="text-[#9CA3AF] text-xs font-bold uppercase tracking-wider">Recent Keys</p>
-                  <button onClick={() => setActiveTab('keys')} className="text-xs text-purple-600 hover:text-purple-700 font-semibold">View all →</button>
-                </div>
-                <div className="divide-y divide-gray-50">
-                  {stats.recentKeys.length === 0 ? (
-                    <p className="text-center text-[#D1D5DB] text-sm py-8">No keys yet.</p>
-                  ) : stats.recentKeys.slice(0, 5).map((k: any) => (
-                    <div key={k.id} className="px-4 py-3 flex items-center justify-between">
-                      <div>
-                        <p className="text-[#374151] text-sm font-medium">{k.name}</p>
-                        <p className="text-[#D1D5DB] text-xs font-mono">{k.prefix}••••</p>
-                      </div>
-                      <div className="text-right">
-                        <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${k.isActive ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-500'}`}>{k.isActive ? 'Active' : 'Blocked'}</span>
-                        <p className="text-[#D1D5DB] text-xs mt-0.5">{k.windowRequestsUsed?.toLocaleString() ?? 0} req</p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Top tokens */}
-              <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden card-shadow">
-                <div className="px-4 py-3 border-b border-gray-100">
-                  <p className="text-[#9CA3AF] text-xs font-bold uppercase tracking-wider">Top Tokens</p>
-                </div>
-                <div className="divide-y divide-gray-50">
-                  {stats.topTokens.length === 0 ? (
-                    <p className="text-center text-[#D1D5DB] text-sm py-8">No usage yet.</p>
-                  ) : stats.topTokens.map((k: any, i: number) => (
-                    <div key={k.id} className="px-4 py-3 flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <span className="text-xs font-bold text-[#D1D5DB]">#{i + 1}</span>
-                        <div>
-                          <p className="text-[#374151] text-sm font-medium">{k.name}</p>
-                          <p className="text-[#D1D5DB] text-xs font-mono">{k.prefix}••••</p>
-                        </div>
-                      </div>
-                      <div className="text-right">
-                        <span className="text-purple-600 font-bold text-sm">{fmtTokens(Number(k.totalTokensUsed ?? 0))} actual</span>
-                        <span className="block text-[#D1D5DB] text-xs">{fmtTokens(Number(k.displayedTokens ?? 0))} shown ({k.displayMultiplier ?? 3}x)</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* ── API Keys ── */}
-        {activeTab === 'keys' && (
-          <>
-            <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
-              <div className="flex flex-wrap items-center gap-2">
-                <div className="relative">
-                  <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#D1D5DB]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-                  <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search keys..." className="h-9 pl-9 pr-4 bg-white border border-gray-200 rounded-xl text-sm text-[#111827] placeholder:text-[#D1D5DB] focus:outline-none focus:border-purple-400 w-52 transition-all" />
-                </div>
-                <div className="flex bg-white border border-gray-200 rounded-xl overflow-hidden">
-                  {tierTabs.map(t => (
-                    <button key={t.value} onClick={() => setTierFilter(t.value)} className={`px-3 h-9 text-xs font-semibold transition-all ${tierFilter === t.value ? 'bg-purple-600 text-white' : 'text-[#6B7280] hover:bg-gray-50'}`}>{t.label}</button>
-                  ))}
-                </div>
-                <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)} className="h-9 px-3 bg-white border border-gray-200 rounded-xl text-sm text-[#6B7280] focus:outline-none transition-all">
-                  <option value="">All Status</option>
-                  <option value="active">Active</option>
-                  <option value="inactive">Inactive</option>
-                </select>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-[#9CA3AF] text-xs">{totalKeys} keys</span>
-                <button onClick={() => setCreateKeyOpen(true)} className="h-9 px-4 bg-[#5244F3] hover:bg-[#4338CA] text-white rounded-xl text-sm font-semibold transition-colors shadow-sm flex items-center gap-1.5">
-                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
-                  Create Key
-                </button>
-              </div>
-            </div>
-
-            <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden card-shadow">
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b border-gray-100 bg-gray-50">
-                      {['Key', 'Name', me.role !== 'reseller' ? 'Reseller' : '', 'Tier', 'Multiplier', 'Token Limit', 'Requests', 'Actual Tok', 'Displayed Tok', 'Status', 'Actions'].filter(Boolean).map(h => (
-                        <th key={h} className="text-left text-[#9CA3AF] font-bold px-3 py-3 text-xs uppercase tracking-wider whitespace-nowrap">{h}</th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {loading ? (
-                      Array.from({ length: 5 }).map((_, i) => (
-                        <tr key={i} className="border-b border-gray-100 last:border-0">
-                          {Array.from({ length: 9 }).map((_, j) => (<td key={j} className="px-4 py-3"><div className="h-4 bg-gray-100 rounded animate-pulse w-24" /></td>))}
-                        </tr>
-                      ))
-                    ) : keys.length === 0 ? (
-                      <tr><td colSpan={9} className="px-4 py-16 text-center text-[#D1D5DB] text-sm">No API keys found.</td></tr>
-                    ) : (
-                      keys.map(k => (
-                        <tr key={k.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
-                          <td className="px-3 py-3">
-                            <div className="flex items-center gap-2">
-                              <code className="text-purple-600 font-mono text-xs">{k.prefix}••••</code>
-                              <button onClick={() => { navigator.clipboard.writeText(k.key); setCopiedKey(k.id); setTimeout(() => setCopiedKey(''), 2000); }} className="text-[#D1D5DB] hover:text-[#6B7280] transition-colors">
-                                {copiedKey === k.id ? <svg className="w-3.5 h-3.5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg> : <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>}
-                              </button>
-                            </div>
-                          </td>
-                          <td className="px-3 py-3 text-[#374151] text-xs font-medium max-w-32 truncate">{k.name}</td>
-                          {me.role !== 'reseller' && <td className="px-3 py-3 text-[#6B7280] text-xs max-w-24 truncate">{k.reseller?.name ?? '—'}</td>}
-                          <td className="px-3 py-3"><span className={`text-xs font-bold px-2 py-0.5 rounded-full border ${tierColor(k.tier)}`}>{k.tier === '5x' ? '5x' : k.tier === '20x' ? '20x' : k.tier.charAt(0).toUpperCase() + k.tier.slice(1)}</span></td>
-                          <td className="px-3 py-3">
-                            <select
-                              value={k.displayMultiplier ?? 3}
-                              onChange={async (e) => {
-                                const val = parseFloat(e.target.value);
-                                await fetch(`/api/admin/keys/${k.id}`, {
-                                  method: 'PATCH',
-                                  headers: { 'Content-Type': 'application/json' },
-                                  body: JSON.stringify({ action: 'update', displayMultiplier: val }),
-                                });
-                                fetchKeys(page);
-                              }}
-                              className="h-6 px-1 bg-purple-50 border border-purple-200 rounded text-xs font-bold text-purple-700 focus:outline-none cursor-pointer"
-                            >
-                              <option value={1}>1x</option>
-                              <option value={2}>2x</option>
-                              <option value={3}>3x</option>
-                              <option value={4}>4x</option>
-                              <option value={5}>5x</option>
-                            </select>
-                          </td>
-                          <td className="px-3 py-3">
-                            <div className="flex items-center gap-1">
-                              <input
-                                type="number"
-                                defaultValue={k.tokenLimitOverride ? Math.floor(Number(k.tokenLimitOverride) / 1_000_000) : ''}
-                                placeholder={TIER_LIMITS[k.tier] ? `${(TIER_LIMITS[k.tier].tokensPerWindow / 1_000_000).toFixed(0)}M` : '—'}
-                                onBlur={async (e) => {
-                                  const val = e.target.value;
-                                  const num = val ? Math.floor(parseFloat(val) * 1_000_000) : null;
-                                  await fetch(`/api/admin/keys/${k.id}`, {
-                                    method: 'PATCH',
-                                    headers: { 'Content-Type': 'application/json' },
-                                    body: JSON.stringify({ action: 'update', tokenLimitOverride: num }),
-                                  });
-                                  fetchKeys(page);
-                                }}
-                                className="w-16 h-6 px-1 bg-blue-50 border border-blue-200 rounded text-xs text-blue-700 font-mono focus:outline-none focus:border-blue-400"
-                              />
-                              <span className="text-[#9CA3AF] text-xs">M</span>
-                            </div>
-                          </td>
-                          <td className="px-3 py-3 font-mono text-xs text-[#6B7280]">{k.windowRequestsUsed?.toLocaleString() ?? 0}</td>
-                          <td className="px-3 py-3 font-mono text-xs text-[#D1D5DB]">{fmtTokens(k.windowTokensUsed ?? 0)}</td>
-                          <td className="px-3 py-3 font-mono text-xs font-bold text-purple-600">{fmtTokens(getDisplayedTokens(k))}</td>
-                          <td className="px-3 py-3">
-                            {k.blockedUntil ? (
-                              <div>
-                                <span className="text-xs font-bold px-2 py-0.5 rounded-full bg-amber-50 text-amber-600 border border-amber-100">Temp Blocked</span>
-                                <p className="text-[#9CA3AF] text-xs mt-0.5">{new Date(k.blockedUntil).toLocaleString()}</p>
-                              </div>
-                            ) : (
-                              <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${k.isActive ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-red-50 text-red-500 border border-red-100'}`}>{k.isActive ? 'Active' : 'Blocked'}</span>
-                            )}
-                          </td>
-                          <td className="px-3 py-3">
-                            <div className="flex items-center gap-0.5">
-                              {(me.role === 'super_admin' || me.role === 'admin') && (
-                                <button onClick={() => setEditKey(k)} disabled={actionLoading === k.id} className="w-7 h-7 rounded-lg hover:bg-blue-50 flex items-center justify-center text-[#9CA3AF] hover:text-blue-500 transition-colors" title="Edit">
-                                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                                </button>
-                              )}
-                              {k.blockedUntil ? (
-                                <button onClick={() => doAction(k.id, 'unblock')} disabled={actionLoading === k.id + 'unblock'} className="w-7 h-7 rounded-lg hover:bg-emerald-50 flex items-center justify-center text-[#9CA3AF] hover:text-emerald-500 transition-colors" title="Unblock">
-                                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
-                                </button>
-                              ) : k.isActive ? (
-                                <>
-                                  <button onClick={() => setConfirmModal({ title: 'Block API Key', message: `Block "${k.name}"? It will no longer accept requests.`, onConfirm: () => { setConfirmModal(null); doAction(k.id, 'block'); }, danger: true })} disabled={actionLoading === k.id + 'block'} className="w-7 h-7 rounded-lg hover:bg-amber-50 flex items-center justify-center text-[#9CA3AF] hover:text-amber-500 transition-colors" title="Block">
-                                    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M4.93 4.93l14.14 14.14"/></svg>
-                                  </button>
-                                </>
-                              ) : (
-                                <button onClick={() => doAction(k.id, 'unblock')} disabled={actionLoading === k.id + 'unblock'} className="w-7 h-7 rounded-lg hover:bg-emerald-50 flex items-center justify-center text-[#9CA3AF] hover:text-emerald-500 transition-colors" title="Unblock">
-                                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
-                                </button>
-                              )}
-                              <button onClick={() => setConfirmModal({ title: 'Delete API Key', message: `Permanently delete "${k.name}"? This cannot be undone.`, onConfirm: () => { setConfirmModal(null); doAction(k.id, 'delete'); }, danger: true })} disabled={actionLoading === k.id + 'delete'} className="w-7 h-7 rounded-lg hover:bg-red-50 flex items-center justify-center text-[#9CA3AF] hover:text-red-500 transition-colors" title="Delete">
-                                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3,6 5,6 21,6"/><path d="M19,6l-1,14a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2L5,6"/><path d="M10,11v6M14,11v6"/><path d="M9,6V4a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1V6"/></svg>
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              </div>
-              {totalKeys > 15 && (
-                <div className="flex items-center justify-center gap-1 py-3 border-t border-gray-100">
-                  {Array.from({ length: Math.min(Math.ceil(totalKeys / 15), 7) }, (_, i) => (
-                    <button key={i} onClick={() => fetchKeys(i + 1)} className={`w-8 h-8 rounded-lg text-xs font-semibold transition-colors ${page === i + 1 ? 'bg-purple-600 text-white' : 'hover:bg-gray-100 text-[#6B7280]'}`}>{i + 1}</button>
-                  ))}
-                </div>
-              )}
-            </div>
-          </>
-        )}
-
-        {/* ── Users ── */}
-        {activeTab === 'users' && showUsersTab && (
-          <>
-            <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
-              <div className="flex flex-wrap items-center gap-2">
-                <div className="relative">
-                  <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#D1D5DB]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-                  <input value={userSearch} onChange={e => setUserSearch(e.target.value)} placeholder="Search users..." className="h-9 pl-9 pr-4 bg-white border border-gray-200 rounded-xl text-sm text-[#111827] placeholder:text-[#D1D5DB] focus:outline-none focus:border-purple-400 w-52 transition-all" />
-                </div>
-                <div className="flex bg-white border border-gray-200 rounded-xl overflow-hidden">
-                  {userRoleTabs.map(t => (
-                    <button key={t.value} onClick={() => setUserRoleFilter(t.value)} className={`px-3 h-9 text-xs font-semibold transition-all ${userRoleFilter === t.value ? 'bg-purple-600 text-white' : 'text-[#6B7280] hover:bg-gray-50'}`}>{t.label}</button>
-                  ))}
-                </div>
-                <select value={userStatusFilter} onChange={e => setUserStatusFilter(e.target.value)} className="h-9 px-3 bg-white border border-gray-200 rounded-xl text-sm text-[#6B7280] focus:outline-none transition-all">
-                  <option value="">All Status</option>
-                  <option value="active">Active</option>
-                  <option value="inactive">Inactive</option>
-                </select>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-[#9CA3AF] text-xs">{totalUsers} users</span>
-                {canCreateResellers && (
-                  <button onClick={() => setCreateUserOpen(true)} className="h-9 px-4 bg-[#5244F3] hover:bg-[#4338CA] text-white rounded-xl text-sm font-semibold transition-colors shadow-sm flex items-center gap-1.5">
-                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
-                    Create User
-                  </button>
-                )}
-              </div>
-            </div>
-
-            <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden card-shadow">
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b border-gray-100 bg-gray-50">
-                      {['User', 'Role', 'Status', 'API Keys', 'Created', 'Actions'].map(h => (
-                        <th key={h} className="text-left text-[#9CA3AF] font-bold px-4 py-3 text-xs uppercase tracking-wider whitespace-nowrap">{h}</th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {users.length === 0 ? (
-                      <tr><td colSpan={6} className="px-4 py-16 text-center text-[#D1D5DB] text-sm">No users found.</td></tr>
-                    ) : (
-                      users.map(u => (
-                        <tr key={u.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
-                          <td className="px-4 py-3">
-                            <div>
-                              <p className="text-[#374151] text-sm font-medium">{u.name}</p>
-                              <p className="text-[#D1D5DB] text-xs">@{u.username}</p>
-                            </div>
-                          </td>
-                          <td className="px-4 py-3"><span className={`text-xs font-bold px-2 py-0.5 rounded-full border ${roleColor(u.role)}`}>{roleLabel(u.role)}</span></td>
-                          <td className="px-4 py-3">
-                            {u.blockedUntil ? (
-                              <div>
-                                <span className="text-xs font-bold px-2 py-0.5 rounded-full bg-amber-50 text-amber-600 border border-amber-100">Blocked</span>
-                                <p className="text-[#9CA3AF] text-xs mt-0.5">{new Date(u.blockedUntil).toLocaleString()}</p>
-                              </div>
-                            ) : (
-                              <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${u.isActive ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-red-50 text-red-500 border border-red-100'}`}>{u.isActive ? 'Active' : 'Disabled'}</span>
-                            )}
-                          </td>
-                          <td className="px-4 py-3 font-mono text-xs text-[#6B7280]">{u.apiKeyCount}</td>
-                          <td className="px-4 py-3 text-xs text-[#9CA3AF]">{new Date(u.createdAt).toLocaleDateString()}</td>
-                          <td className="px-4 py-3">
-                            <div className="flex items-center gap-0.5">
-                              {me.role !== 'reseller' && u.role === 'reseller' && (
-                                <button onClick={() => setPermissionsUser(u)} className="w-7 h-7 rounded-lg hover:bg-purple-50 flex items-center justify-center text-[#9CA3AF] hover:text-purple-500 transition-colors" title="Permissions">
-                                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-                                </button>
-                              )}
-                              <button onClick={() => setEditUser(u)} className="w-7 h-7 rounded-lg hover:bg-gray-100 flex items-center justify-center text-[#9CA3AF] hover:text-[#6B7280] transition-colors" title="Edit">
-                                <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                              </button>
-                              {u.id !== me.id && (
-                                <>
-                                  {!u.blockedUntil && u.isActive && me.role !== 'reseller' && (
-                                    <button onClick={() => setTempBlockUser(u)} className="w-7 h-7 rounded-lg hover:bg-amber-50 flex items-center justify-center text-[#9CA3AF] hover:text-amber-500 transition-colors" title="Temp Block">
-                                      <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
-                                    </button>
-                                  )}
-                                  {u.blockedUntil && (
-                                    <button onClick={() => doUserAction(u.id, 'unblockTemp')} disabled={actionLoading === u.id + 'unblockTemp'} className="w-7 h-7 rounded-lg hover:bg-emerald-50 flex items-center justify-center text-[#9CA3AF] hover:text-emerald-500 transition-colors" title="Unblock">
-                                      <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
-                                    </button>
-                                  )}
-                                  {!u.blockedUntil && !u.isActive && (
-                                    <button onClick={() => doUserAction(u.id, 'toggle')} disabled={actionLoading === u.id + 'toggle'} className="w-7 h-7 rounded-lg hover:bg-emerald-50 flex items-center justify-center text-[#9CA3AF] hover:text-emerald-500 transition-colors" title="Enable">
-                                      <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
-                                    </button>
-                                  )}
-                                  {!u.blockedUntil && u.isActive && me.role === 'super_admin' && (
-                                    <button onClick={() => setConfirmModal({ title: 'Disable User', message: `Disable "${u.name}" (@${u.username})? They will not be able to log in.`, onConfirm: () => { setConfirmModal(null); doUserAction(u.id, 'toggle'); }, danger: true })} disabled={actionLoading === u.id + 'toggle'} className="w-7 h-7 rounded-lg hover:bg-red-50 flex items-center justify-center text-[#9CA3AF] hover:text-red-400 transition-colors" title="Disable">
-                                      <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M4.93 4.93l14.14 14.14"/></svg>
-                                    </button>
-                                  )}
-                                  {me.role === 'super_admin' && (
-                                    <button onClick={() => setConfirmModal({ title: 'Delete User', message: `Permanently delete "${u.name}" (@${u.username})? Their API keys will remain but become unassigned.`, onConfirm: () => doDeleteUser(u.id), danger: true })} disabled={actionLoading === u.id + 'delete'} className="w-7 h-7 rounded-lg hover:bg-red-50 flex items-center justify-center text-[#9CA3AF] hover:text-red-500 transition-colors" title="Delete">
-                                      <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3,6 5,6 21,6"/><path d="M19,6l-1,14a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2L5,6"/><path d="M10,11v6M14,11v6"/><path d="M9,6V4a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1V6"/></svg>
-                                    </button>
-                                  )}
-                                </>
-                              )}
-                            </div>
-                          </td>
-                        </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* ── Blog ── */}
-        {activeTab === 'blog' && (me.role === 'super_admin' || me.role === 'admin') && (
-          <>
-            <BlogTab
-              posts={blogPosts}
-              total={totalPosts}
-              page={blogPage}
-              onFetch={(p) => fetchBlogPosts(p)}
-              onFetchStats={fetchStats}
-            />
-          </>
-        )}
-
-        {/* ── Health ── */}
-        {activeTab === 'health' && (
-          <div className="space-y-6">
-            {/* API Status */}
-            <div className="bg-white rounded-2xl border border-gray-200 card-shadow p-6">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-bold text-[#111827]">OpenRouter API Status</h2>
-                <div className="flex items-center gap-2">
-                  <button onClick={fetchHealth} disabled={healthLoading} className="text-xs bg-gray-100 hover:bg-gray-200 text-[#6B7280] px-3 py-1.5 rounded-lg font-semibold transition-colors disabled:opacity-50">Refresh</button>
-                  <span className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold ${healthData?.api?.status === 'ok' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-red-50 text-red-600 border border-red-200'}`}>
-                    <span className={`w-2 h-2 rounded-full ${healthData?.api?.status === 'ok' ? 'bg-emerald-500 animate-pulse' : 'bg-red-500'}`} />
-                    {healthData?.api?.status === 'ok' ? 'Online' : 'Offline'}
-                    {healthData?.api?.latency > 0 && <span className="text-xs opacity-75">· {healthData.api.latency}ms</span>}
-                  </span>
-                </div>
-              </div>
-              {healthData?.api?.error && (
-                <p className="text-red-600 text-xs bg-red-50 border border-red-200 rounded-lg px-3 py-2 mb-3">Error: {healthData.api.error}</p>
-              )}
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                <StatCard label="Total Keys" value={healthData?.stats?.totalKeys ?? 0} sub={`${healthData?.stats?.activeKeys ?? 0} active`} icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>} color="purple" />
-                <StatCard label="Total Tokens" value={fmtTokens(healthData?.stats?.totalTokens ?? 0)} sub="consumed all time" icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>} color="blue" />
-                <StatCard label="Over Limit" value={healthData?.overLimitCount ?? 0} sub="keys at limit" icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>} color="amber" />
-                <StatCard label="Active Now" value={healthData?.activeCount ?? 0} sub="in last 5min" icon={<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>} color="green" />
-              </div>
-            </div>
-
-            {/* Top Keys by Usage */}
-            <div className="bg-white rounded-2xl border border-gray-200 card-shadow overflow-hidden">
-              <div className="p-6 border-b border-gray-100">
-                <h2 className="text-lg font-bold text-[#111827]">Top Keys by Usage</h2>
-              </div>
-              <div className="overflow-x-auto">
-                <table className="w-full">
-                  <thead className="bg-gray-50 border-b border-gray-100">
-                    <tr>
-                      {['Key', 'Plan', 'Window Tokens', 'Total Tokens', 'Requests', 'Reset At', 'Reseller', 'Status'].map(h => (
-                        <th key={h} className="px-4 py-3 text-left text-xs font-bold text-[#9CA3AF] uppercase tracking-wider">{h}</th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {healthLoading && !healthData ? (
-                      Array.from({ length: 5 }).map((_, i) => (
-                        <tr key={i} className="border-b border-gray-100">
-                          {Array.from({ length: 8 }).map((_, j) => (<td key={j} className="px-4 py-3"><div className="h-4 bg-gray-100 rounded animate-pulse w-24" /></td>))}
-                        </tr>
-                      ))
-                    ) : healthData?.topKeys?.length === 0 ? (
-                      <tr><td colSpan={8} className="px-4 py-12 text-center text-[#D1D5DB] text-sm">No keys found.</td></tr>
-                    ) : (
-                      healthData?.topKeys?.map((k: any) => {
-                        const resetAt = k.windowResetAt ? new Date(k.windowResetAt) : null;
-                        const now = Date.now();
-                        const resetIn = resetAt ? Math.max(0, Math.floor((resetAt.getTime() - now) / 1000)) : null;
-                        const resetStr = resetIn !== null ? (resetIn > 0 ? `${Math.floor(resetIn / 3600)}h ${Math.floor((resetIn % 3600) / 60)}m` : 'now') : 'n/a';
-                        return (
-                          <tr key={k.id} className={`border-b border-gray-100 last:border-0 ${k.isOverLimit ? 'bg-red-50/30' : ''}`}>
-                            <td className="px-4 py-3">
-                              <p className="text-sm font-bold text-[#111827]">{k.name}</p>
-                              <code className="text-[#9CA3AF] text-xs font-mono">{k.prefix}••••</code>
-                            </td>
-                            <td className="px-4 py-3"><span className={`text-xs font-bold px-2 py-1 rounded-full ${tierColor(k.tier)}`}>{k.tier}</span></td>
-                            <td className="px-4 py-3">
-                              <p className={`text-sm font-bold ${k.isOverLimit ? 'text-red-600' : 'text-[#111827]'}`}>{fmtTokens(k.windowTokensUsed)}</p>
-                              {k.isOverLimit && <span className="text-xs text-red-500 font-semibold">OVER</span>}
-                            </td>
-                            <td className="px-4 py-3 text-sm font-semibold text-[#111827]">{fmtTokens(k.totalTokensUsed)}</td>
-                            <td className="px-4 py-3 text-sm text-[#6B7280]">{k.windowRequestsUsed.toLocaleString()}</td>
-                            <td className="px-4 py-3 text-sm text-[#6B7280]">{resetStr}</td>
-                            <td className="px-4 py-3 text-sm text-[#6B7280]">{k.resellerName || '—'}</td>
-                            <td className="px-4 py-3">
-                              <span className={`text-xs font-bold px-2 py-1 rounded-full flex items-center gap-1 w-fit ${k.isActive ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-red-50 text-red-500 border border-red-100'}`}>
-                                <span className={`w-1.5 h-1.5 rounded-full ${k.isActive ? 'bg-emerald-500' : 'bg-red-500'}`} />
-                                {k.isActive ? 'Active' : 'Inactive'}
-                              </span>
-                            </td>
-                          </tr>
-                        );
-                      })
-                    )}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        )}
-        {/* ── Settings ── */}
-        {activeTab === 'settings' && me.role === 'super_admin' && (
-          <SettingsTab />
-        )}
-      </div>
-
-      {/* Modals */}
-      {confirmModal && <ConfirmModal {...confirmModal} onCancel={() => setConfirmModal(null)} />}
-      {editUser && <EditUserModal user={editUser} onSave={(d) => handleSaveUser(editUser.id, d)} onCancel={() => setEditUser(null)} />}
-      {createUserOpen && <CreateUserModal onCreate={handleCreateUser} onCancel={() => setCreateUserOpen(false)} myRole={me.role} />}
-      {createKeyOpen && <CreateKeyModal onCreate={handleCreateKey} onCancel={() => setCreateKeyOpen(false)} users={users} myRole={me.role} plans={plans} allowedPlanIds={me.allowedPlanIds ? JSON.parse(me.allowedPlanIds) : []} defaultPlanId={me.defaultPlanId ?? ''} />}
-      {editKey && <EditKeyModal apiKey={editKey} onSave={(d) => handleSaveKey(editKey.id, d)} onCancel={() => setEditKey(null)} />}
-      {permissionsUser && <PermissionsModal user={permissionsUser} onSave={(p) => handleSavePermissions(permissionsUser.id, p)} onCancel={() => setPermissionsUser(null)} />}
-      {tempBlockUser && <TempBlockModal user={tempBlockUser} onConfirm={(duration) => { setTempBlockUser(null); doUserAction(tempBlockUser.id, 'blockTemp', { duration }); }} onCancel={() => setTempBlockUser(null)} />}
-      {editingPost && <BlogModal post={editingPost} onSave={async (data) => { await fetch(`/api/admin/posts/${editingPost.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); setEditingPost(null); }} onCancel={() => setEditingPost(null)} />}
-      {creatingPost && <BlogModal onSave={async (data) => { await fetch('/api/admin/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); setCreatingPost(false); }} onCancel={() => setCreatingPost(false)} />}
-
-      {/* Newly created key toast */}
-      {newlyCreated && (
-        <div className="fixed bottom-6 right-6 z-50 bg-white rounded-2xl border border-amber-200 shadow-xl p-4 max-w-sm w-full">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <p className="text-amber-600 text-xs font-bold uppercase tracking-wider mb-1">Save your API key</p>
-              <p className="text-[#374151] text-sm font-medium mb-2">Copy it now — you won't see it again.</p>
-              <code className="text-purple-600 font-mono text-xs break-all">{newlyCreated}</code>
-            </div>
-            <button onClick={() => { navigator.clipboard.writeText(newlyCreated); setNewlyCreated(''); }} className="shrink-0 text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 px-2 py-1 rounded-lg transition-colors">Copy</button>
-          </div>
-          <button onClick={() => setNewlyCreated('')} className="mt-3 w-full h-8 rounded-xl bg-gray-100 hover:bg-gray-200 text-[#6B7280] text-xs font-semibold transition-colors">Close</button>
-        </div>
-      )}
-    </div>
-  );
-}