@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/views/Dashboard.tsx

@@ -1,22 +1,41 @@
 'use client'
 
+/**
+ * Dashboard
+ * ----------
+ * Single-file, lean dashboard implementation. Two API calls only
+ * (`/stats` + `/health`, both shared with the rest of the admin), everything
+ * else derived client-side via `useMemo`. No charting libraries on this view
+ * (the design uses plain progress bars + colored dots), keeping the bundle
+ * and TTI cost low.
+ *
+ * Responsive layout:
+ *   <  640px (mobile):  stat cards 2-col, main grid stacks, quick actions scroll-x
+ *   640-1023 (tablet):  stat cards 3-col, main grid stacks
+ *   >= 1024 (desktop):  stat cards 5-col, main grid is `1fr 320px`
+ */
+
+import { useMemo, useState } from 'react'
 import {
   FileText,
-  File,
-  Image,
-  Users,
+  File as FileIcon,
+  Image as ImageIcon,
   ClipboardList,
   Search,
-  Loader2,
+  Plus,
+  Upload,
+  Globe,
+  ExternalLink,
+  Activity,
   AlertTriangle,
+  Clock,
+  Zap,
   Database,
-  ChevronLeft,
   ChevronRight,
+  Loader2,
+  type LucideIcon,
 } from 'lucide-react'
-import { useState } from 'react'
 import { useApiData } from '../lib/useApiData.js'
-import { ContentOverviewChart } from '../components/ContentOverviewChart.js'
-import { SEOPerformance } from '../components/SEOPerformance.js'
 
 interface DashboardStats {
   totalDocuments: number
@@ -24,6 +43,8 @@ interface DashboardStats {
   totalUsers: number
   formCount: number
   avgSeoScore: number
+  webhookCount: number
+  webhookActiveCount: number
   collectionCounts: Record<string, number>
   statusCounts: Record<string, number>
   recentDocuments: {
@@ -38,10 +59,9 @@ interface DashboardStats {
 
 interface HealthData {
   status: 'healthy' | 'degraded'
-  version: string
+  databaseConnected: boolean
   secretConfigured: boolean
   models: Record<string, boolean>
-  databaseConnected: boolean
 }
 
 interface CollectionMeta {
@@ -56,124 +76,354 @@ export interface DashboardProps {
   onNavigate?: (path: string) => void
 }
 
+// ─── helpers (kept top-level so they aren't re-created on every render) ──────
+
 function resolveCollections(config: any): CollectionMeta[] {
   if (!config?.collections) return []
   const raw = config.collections
   const list: any[] = Array.isArray(raw) ? raw : Object.values(raw)
   return list
-    .filter((c) => !c.admin?.hidden)
+    .filter((c) => !c?.admin?.hidden)
     .map((c) => ({ slug: c.slug, type: c.type, labels: c.labels }))
 }
 
 function collectionLabel(col: CollectionMeta, plural = true): string {
-  if (plural) return col.labels?.plural ?? col.slug.charAt(0).toUpperCase() + col.slug.slice(1)
-  return col.labels?.singular ?? col.slug.charAt(0).toUpperCase() + col.slug.slice(1)
+  const fallback = col.slug.charAt(0).toUpperCase() + col.slug.slice(1)
+  if (plural) return col.labels?.plural ?? fallback
+  return col.labels?.singular ?? fallback
 }
 
 function relativeTime(dateStr: string): string {
-  const now = Date.now()
   const then = new Date(dateStr).getTime()
-  const diff = now - then
-  const mins = Math.floor(diff / 60000)
-  if (mins < 1) return 'just now'
-  if (mins < 60) return `${mins} min ago`
+  const diff = Date.now() - then
+  if (diff < 60_000) return 'just now'
+  const mins = Math.floor(diff / 60_000)
+  if (mins < 60) return `${mins}m ago`
   const hours = Math.floor(mins / 60)
-  if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`
+  if (hours < 24) return `${hours}h ago`
   const days = Math.floor(hours / 24)
-  if (days < 30) return `${days} day${days !== 1 ? 's' : ''} ago`
+  if (days === 1) return 'Yesterday'
+  if (days < 30) return `${days}d ago`
   return new Date(dateStr).toLocaleDateString()
 }
 
-function statusColor(status: string): string {
-  switch (status) {
-    case 'PUBLISHED':
-      return 'bg-green-100 text-green-800'
-    case 'DRAFT':
-      return 'bg-gray-100 text-gray-700'
-    case 'SCHEDULED':
-      return 'bg-purple-100 text-purple-800'
-    case 'IN_REVIEW':
-      return 'bg-blue-100 text-blue-800'
-    default:
-      return 'bg-gray-100 text-gray-700'
-  }
+function timeOfDayGreeting(): string {
+  const h = new Date().getHours()
+  if (h < 12) return 'Good morning'
+  if (h < 17) return 'Good afternoon'
+  return 'Good evening'
+}
+
+function todayDateString(): string {
+  return new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+// Deterministic colour per author so avatars stay stable across renders
+// without storing anything in state or hitting the server.
+const AVATAR_COLORS = [
+  '#7C3AED', // purple
+  '#E11D48', // rose
+  '#059669', // emerald
+  '#0891B2', // cyan
+  '#D97706', // amber
+  '#4F46E5', // indigo
+  '#DC2626', // red
+] as const
+
+function hashString(s: string): number {
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0
+  return Math.abs(h)
 }
 
-function statusLabel(status: string): string {
+function authorAvatar(name: string | null | undefined): { color: string; initials: string } {
+  const safe = (name ?? '').trim() || 'User'
+  const parts = safe.split(/\s+/).filter(Boolean)
+  const initials =
+    parts.length >= 2
+      ? `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase()
+      : safe.slice(0, 2).toUpperCase()
+  const color = AVATAR_COLORS[hashString(safe) % AVATAR_COLORS.length]!
+  return { color, initials }
+}
+
+function statusBadge(status: string): {
+  label: string
+  cls: string
+} {
   switch (status) {
     case 'PUBLISHED':
-      return 'Published'
+      return {
+        label: 'Published',
+        cls: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300',
+      }
     case 'DRAFT':
-      return 'Draft'
+      return {
+        label: 'Draft',
+        cls: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+      }
     case 'SCHEDULED':
-      return 'Scheduled'
+      return {
+        label: 'Scheduled',
+        cls: 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300',
+      }
     case 'IN_REVIEW':
-      return 'In Review'
+      return {
+        label: 'In Review',
+        cls: 'bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-300',
+      }
     default:
-      return status
+      return { label: status, cls: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' }
   }
 }
 
-const STAT_COLORS = [
-  { bg: 'bg-blue-50', icon: 'bg-blue-100', text: 'text-blue-600' },
-  { bg: 'bg-purple-50', icon: 'bg-purple-100', text: 'text-purple-600' },
-  { bg: 'bg-teal-50', icon: 'bg-teal-100', text: 'text-teal-600' },
-  { bg: 'bg-green-50', icon: 'bg-green-100', text: 'text-green-600' },
-  { bg: 'bg-amber-50', icon: 'bg-amber-100', text: 'text-amber-600' },
-]
+interface StatCardData {
+  label: string
+  value: string
+  unit?: string
+  hint?: string
+  hintUp?: boolean
+  icon: LucideIcon
+  iconBg: string
+  iconColor: string
+  href?: string
+}
+
+// ─── Dashboard ───────────────────────────────────────────────────────────────
 
 export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   const nav = (path: string) => onNavigate?.(path)
-  const { data, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats')
+  const { data: stats, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats')
   const { data: health } = useApiData<HealthData>('/health')
-  const [activityPage, setActivityPage] = useState(0)
 
-  const collections = resolveCollections(config)
-  const userName = session?.name ?? session?.email?.split('@')[0] ?? 'Admin'
+  const greeting = useMemo(() => timeOfDayGreeting(), [])
+  const dateStr = useMemo(() => todayDateString(), [])
+  const userName = session?.name ?? session?.email?.split('@')[0] ?? 'there'
+
+  const collections = useMemo(() => resolveCollections(config), [config])
 
-  const collectionCounts = data?.collectionCounts ?? {}
-  const statusCounts = data?.statusCounts ?? {}
-  const recentDocs = data?.recentDocuments ?? []
+  // ── Stat cards ──────────────────────────────────────────────────────────
+  const statCards: StatCardData[] = useMemo(() => {
+    const counts = stats?.collectionCounts ?? {}
 
-  const perPage = 5
-  const totalActivityPages = Math.max(1, Math.ceil(recentDocs.length / perPage))
-  const visibleDocs = recentDocs.slice(activityPage * perPage, (activityPage + 1) * perPage)
+    // Prefer two real collections (the user's primary content types) over
+    // hard-coded Posts/Pages so the dashboard adapts to admin-managed types.
+    const primary: CollectionMeta[] = []
+    const posts = collections.find((c) => c.slug === 'posts' || c.type === 'post')
+    const pages = collections.find((c) => c.slug === 'pages' || c.type === 'page')
+    if (posts) primary.push(posts)
+    if (pages) primary.push(pages)
+    if (primary.length < 2) {
+      for (const c of collections) {
+        if (primary.length >= 2) break
+        if (!primary.includes(c)) primary.push(c)
+      }
+    }
 
-  const statCards: { label: string; value: number; icon: typeof FileText }[] = []
+    const cards: StatCardData[] = []
 
-  if (collections.length > 0) {
-    for (const col of collections.slice(0, 2)) {
-      statCards.push({
-        label: collectionLabel(col),
-        value: collectionCounts[col.slug] ?? 0,
-        icon: col.type === 'page' ? File : FileText,
+    if (primary[0]) {
+      cards.push({
+        label: collectionLabel(primary[0]),
+        value: String(counts[primary[0].slug] ?? 0),
+        icon: primary[0].type === 'page' ? FileIcon : FileText,
+        iconBg: 'bg-violet-100 dark:bg-violet-950/60',
+        iconColor: 'text-violet-600 dark:text-violet-300',
+        href: `/${primary[0].slug}`,
+      })
+    } else {
+      cards.push({
+        label: 'Documents',
+        value: String(stats?.totalDocuments ?? 0),
+        icon: FileText,
+        iconBg: 'bg-violet-100 dark:bg-violet-950/60',
+        iconColor: 'text-violet-600 dark:text-violet-300',
       })
     }
-  } else {
-    statCards.push({ label: 'Pages', value: collectionCounts['pages'] ?? 0, icon: File })
-    statCards.push({ label: 'Posts', value: collectionCounts['posts'] ?? 0, icon: FileText })
-  }
 
-  statCards.push({ label: 'Forms', value: data?.formCount ?? 0, icon: ClipboardList })
-  statCards.push({ label: 'Media', value: data?.totalMedia ?? 0, icon: Image })
-  statCards.push({ label: 'Avg. SEO Rating', value: data?.avgSeoScore ?? 0, icon: Search })
+    if (primary[1]) {
+      cards.push({
+        label: collectionLabel(primary[1]),
+        value: String(counts[primary[1].slug] ?? 0),
+        icon: primary[1].type === 'page' ? FileIcon : FileText,
+        iconBg: 'bg-cyan-100 dark:bg-cyan-950/60',
+        iconColor: 'text-cyan-600 dark:text-cyan-300',
+        href: `/${primary[1].slug}`,
+      })
+    }
 
-  if (loading) {
+    cards.push({
+      label: 'Media',
+      value: String(stats?.totalMedia ?? 0),
+      hint:
+        stats && stats.totalMedia > 0
+          ? `${stats.totalMedia} file${stats.totalMedia === 1 ? '' : 's'}`
+          : undefined,
+      icon: ImageIcon,
+      iconBg: 'bg-emerald-100 dark:bg-emerald-950/60',
+      iconColor: 'text-emerald-600 dark:text-emerald-300',
+      href: '/media',
+    })
+
+    // `formCount` in /stats is the *submission* count; the number of
+    // forms is the count of `collection: forms` documents.
+    const formsCount = counts['forms'] ?? 0
+    const submissions = stats?.formCount ?? 0
+    cards.push({
+      label: 'Forms',
+      value: String(formsCount),
+      hint: submissions > 0 ? `${submissions} response${submissions === 1 ? '' : 's'}` : undefined,
+      icon: ClipboardList,
+      iconBg: 'bg-amber-100 dark:bg-amber-950/60',
+      iconColor: 'text-amber-600 dark:text-amber-300',
+      href: '/forms',
+    })
+
+    const seo = stats?.avgSeoScore ?? 0
+    cards.push({
+      label: 'SEO Score',
+      value: seo > 0 ? String(seo) : '—',
+      unit: seo > 0 ? '/100' : undefined,
+      hint: seo > 0 ? (seo >= 70 ? 'Good' : seo >= 40 ? 'Fair' : 'Needs work') : 'No content yet',
+      hintUp: seo >= 70,
+      icon: Search,
+      iconBg: 'bg-indigo-100 dark:bg-indigo-950/60',
+      iconColor: 'text-indigo-600 dark:text-indigo-300',
+      href: '/seo',
+    })
+
+    return cards
+  }, [stats, collections])
+
+  // ── Quick actions ───────────────────────────────────────────────────────
+  // "New Post" lives only in the hero CTA above; this row is the secondary
+  // surface and intentionally omits the primary action to avoid the obvious
+  // duplication. Order mirrors the natural authoring flow.
+  const quickActions = useMemo(() => {
+    const pages = collections.find((c) => c.slug === 'pages' || c.type === 'page')
+    const items: { label: string; icon: LucideIcon; onClick: () => void }[] = []
+    if (pages)
+      items.push({ label: 'New Page', icon: Plus, onClick: () => nav(`/${pages.slug}/new`) })
+    items.push({ label: 'Upload Media', icon: Upload, onClick: () => nav('/media') })
+    items.push({ label: 'New Form', icon: Plus, onClick: () => nav('/forms') })
+    items.push({ label: 'Manage SEO', icon: Search, onClick: () => nav('/seo') })
+    items.push({ label: 'View API', icon: Globe, onClick: () => nav('/api-keys') })
+    return items
+  }, [collections, onNavigate]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Recent activity ─────────────────────────────────────────────────────
+  const [activityLimit, setActivityLimit] = useState(8)
+  const activity = useMemo(() => {
+    const docs = stats?.recentDocuments ?? []
+    return docs.slice(0, activityLimit).map((d) => {
+      const col = collections.find((c) => c.slug === d.collection)
+      return {
+        ...d,
+        typeLabel: col ? collectionLabel(col, false) : d.collection,
+        relTime: relativeTime(d.updatedAt),
+        avatar: authorAvatar(d.author),
+        statusInfo: statusBadge(d.status),
+      }
+    })
+  }, [stats, collections, activityLimit])
+
+  // ── Publishing queue (scheduled docs only) ──────────────────────────────
+  const publishQueue = useMemo(() => {
+    const docs = stats?.recentDocuments ?? []
+    return docs
+      .filter((d) => d.status === 'SCHEDULED')
+      .slice(0, 5)
+      .map((d) => {
+        const col = collections.find((c) => c.slug === d.collection)
+        return {
+          id: d.id,
+          collection: d.collection,
+          title: d.title || 'Untitled',
+          type: col ? collectionLabel(col, false) : d.collection,
+          date: relativeTime(d.updatedAt),
+          author: d.author,
+        }
+      })
+  }, [stats, collections])
+
+  // ── Content health summary (derived from /stats) ────────────────────────
+  const contentHealth = useMemo(() => {
+    const score = stats?.avgSeoScore ?? 0
+    const counts = stats?.statusCounts ?? {}
+    const totalDrafts = counts['DRAFT'] ?? 0
+    const totalScheduled = counts['SCHEDULED'] ?? 0
+    const totalInReview = counts['IN_REVIEW'] ?? 0
+    const issues: { label: string; count: number; tone: 'warn' | 'err' | 'muted' }[] = []
+    if (totalDrafts > 0) {
+      issues.push({ label: 'Drafts pending publish', count: totalDrafts, tone: 'warn' })
+    }
+    if (totalInReview > 0) {
+      issues.push({ label: 'Awaiting review', count: totalInReview, tone: 'warn' })
+    }
+    if (totalScheduled > 0) {
+      issues.push({ label: 'Scheduled to publish', count: totalScheduled, tone: 'muted' })
+    }
+    if (score > 0 && score < 70) {
+      issues.push({
+        label: 'Pages with weak SEO',
+        count: Math.max(1, Math.round((70 - score) / 10)),
+        tone: score < 40 ? 'err' : 'warn',
+      })
+    }
+    return {
+      score,
+      label: score >= 70 ? 'Good' : score >= 40 ? 'Fair' : score > 0 ? 'Poor' : 'No data',
+      tone: score >= 70 ? 'ok' : score >= 40 ? 'warn' : score > 0 ? 'err' : 'muted',
+      issues,
+    } as const
+  }, [stats])
+
+  // ── Content delivery tiles ──────────────────────────────────────────────
+  const delivery = useMemo(() => {
+    const sched = stats?.statusCounts?.['SCHEDULED'] ?? 0
+    return {
+      totalDocs: stats?.totalDocuments ?? 0,
+      forms: stats?.formCount ?? 0,
+      scheduled: sched,
+      webhooks: {
+        total: stats?.webhookCount ?? 0,
+        active: stats?.webhookActiveCount ?? 0,
+      },
+    }
+  }, [stats])
+
+  const totalIssues = contentHealth.issues.reduce((s, i) => s + i.count, 0)
+
+  // ── Render ──────────────────────────────────────────────────────────────
+
+  if (loading && !stats) {
     return (
-      <div className="p-4 sm:p-6 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-4 sm:p-6">
+        <Loader2 className="h-6 w-6 animate-spin text-violet-600" />
       </div>
     )
   }
 
+  const heroPostSlug =
+    collections.find((c) => c.slug === 'posts' || c.type === 'post')?.slug ?? 'posts'
+  const siteUrl = config?.site?.url ?? config?.seo?.siteUrl ?? null
+
   return (
-    <div className="p-4 sm:p-6 space-y-6">
+    <div className="w-full space-y-5 p-4 sm:p-6 lg:px-8">
+      {/* Health banners ────────────────────────────────────────────── */}
       {health && health.status === 'degraded' && (
-        <div className="flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-          <Database className="w-5 h-5 text-blue-600 shrink-0" />
-          <div className="flex-1">
-            <span className="text-sm font-medium text-blue-900">Database Setup Required</span>
-            <p className="text-xs text-blue-700 mt-0.5">
+        <div className="flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950/40">
+          <Database className="mt-0.5 h-5 w-5 shrink-0 text-blue-600 dark:text-blue-400" />
+          <div className="min-w-0 flex-1">
+            <span className="text-sm font-medium text-blue-900 dark:text-blue-200">
+              Database setup required
+            </span>
+            <p className="mt-0.5 text-xs text-blue-700 dark:text-blue-300">
               {!health.databaseConnected
                 ? 'Cannot connect to the database. Check your DATABASE_URL environment variable.'
                 : !health.secretConfigured
@@ -188,143 +438,444 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       )}
 
       {error && exhausted && (
-        <div className="flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0" />
-          <span className="text-sm text-amber-800 flex-1">
+        <div className="flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950/40">
+          <AlertTriangle className="h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400" />
+          <span className="flex-1 text-sm text-amber-800 dark:text-amber-200">
             Some dashboard data may be unavailable.
           </span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-amber-700 border border-amber-300 rounded-lg hover:bg-amber-100 transition-colors"
+            className="rounded-lg border border-amber-300 px-3 py-1 text-sm text-amber-700 transition-colors hover:bg-amber-100 dark:border-amber-700 dark:text-amber-200 dark:hover:bg-amber-900/40"
           >
             Retry
           </button>
         </div>
       )}
 
-      {/* Header */}
-      <div>
-        <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">
-          Welcome back, {userName}
-        </h1>
-        <p className="text-sm text-gray-500 mt-0.5">
-          Here&apos;s what&apos;s happening with your content today
-        </p>
+      {/* Header ─────────────────────────────────────────────────────── */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0">
+          <h1 className="text-foreground text-xl font-semibold tracking-tight sm:text-2xl">
+            {greeting}, {userName} <span aria-hidden>👋</span>
+          </h1>
+          <p className="text-muted-foreground mt-0.5 text-sm">
+            {dateStr}
+            {totalIssues > 0 && (
+              <span className="hidden sm:inline">
+                {' · '}
+                {totalIssues} content item{totalIssues === 1 ? '' : 's'} need attention
+              </span>
+            )}
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <button
+            onClick={() => nav(`/${heroPostSlug}/new`)}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-violet-600 px-3.5 py-2 text-sm font-medium text-white transition-colors hover:bg-violet-700"
+          >
+            <Plus className="h-3.5 w-3.5" /> New Post
+          </button>
+          {siteUrl && (
+            <a
+              href={siteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="border-border bg-card hover:bg-accent hover:text-accent-foreground hidden items-center gap-1.5 rounded-lg border px-3 py-2 text-sm transition-colors sm:inline-flex"
+            >
+              <ExternalLink className="h-3.5 w-3.5" /> View Site
+            </a>
+          )}
+        </div>
       </div>
 
-      {/* Stat cards */}
-      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4">
-        {statCards.map((card, i) => {
-          const colors = STAT_COLORS[i % STAT_COLORS.length]!
-          const Icon = card.icon
-          return (
-            <div key={card.label} className="bg-white rounded-xl border border-gray-200 p-4">
-              <div className="flex items-center justify-between mb-3">
-                <div
-                  className={`w-9 h-9 rounded-lg flex items-center justify-center ${colors.icon}`}
-                >
-                  <Icon className={`w-4.5 h-4.5 ${colors.text}`} />
-                </div>
+      {/* Quick actions ──────────────────────────────────────────────── */}
+      <div className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 [scrollbar-width:thin]">
+        {quickActions.map((a) => (
+          <button
+            key={a.label}
+            onClick={a.onClick}
+            className="border-border bg-card inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3.5 py-2 text-sm shadow-sm transition-colors hover:border-violet-400 hover:bg-violet-50 hover:text-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+          >
+            <a.icon className="h-3.5 w-3.5" />
+            {a.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Stat cards ─────────────────────────────────────────────────── */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+        {statCards.map((card) => {
+          const Inner = (
+            <>
+              <div
+                className={`mb-3 flex h-8 w-8 items-center justify-center rounded-lg ${card.iconBg}`}
+              >
+                <card.icon className={`h-4 w-4 ${card.iconColor}`} />
               </div>
-              <p className="text-2xl font-semibold text-gray-900">{card.value.toLocaleString()}</p>
-              <p className="text-xs text-gray-500 mt-0.5">{card.label}</p>
+              <div className="flex items-baseline gap-1">
+                <span className="text-foreground text-2xl leading-none font-semibold tracking-tight">
+                  {card.value}
+                </span>
+                {card.unit && (
+                  <span className="text-muted-foreground text-sm font-medium">{card.unit}</span>
+                )}
+              </div>
+              <p className="text-muted-foreground mt-1 text-xs">{card.label}</p>
+              {card.hint && (
+                <p
+                  className={`mt-1.5 text-[11px] ${card.hintUp ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`}
+                >
+                  {card.hint}
+                </p>
+              )}
+            </>
+          )
+
+          return card.href ? (
+            <button
+              key={card.label}
+              type="button"
+              onClick={() => nav(card.href!)}
+              className="bg-card border-border rounded-xl border p-4 text-left shadow-sm transition-shadow hover:shadow-md"
+            >
+              {Inner}
+            </button>
+          ) : (
+            <div key={card.label} className="bg-card border-border rounded-xl border p-4 shadow-sm">
+              {Inner}
             </div>
           )
         })}
       </div>
 
-      {/* Middle row: Recent Activity + Content Overview */}
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
-        {/* Recent Activity */}
-        <div className="lg:col-span-8 bg-white rounded-xl border border-gray-200">
-          <div className="p-4 border-b border-gray-200">
-            <h2 className="text-sm font-semibold text-gray-900">Recent Activity</h2>
-          </div>
-          <div className="divide-y divide-gray-100">
-            {visibleDocs.length === 0 ? (
-              <div className="p-8 text-center">
-                <p className="text-sm text-gray-400">No content yet</p>
-              </div>
-            ) : (
-              visibleDocs.map((doc) => {
-                const colMeta = collections.find((c) => c.slug === doc.collection)
-                const typeLabel = colMeta ? collectionLabel(colMeta, false) : doc.collection
-                return (
-                  <div key={doc.id} className="px-4 py-3 hover:bg-gray-50 transition-colors">
-                    <div className="flex items-center justify-between gap-3">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-0.5">
-                          <h3 className="text-sm font-medium text-gray-900 truncate">
-                            {doc.title ?? 'Untitled'}
-                          </h3>
-                        </div>
-                        <div className="flex items-center gap-2 text-xs text-gray-500">
-                          <span className="capitalize">{typeLabel}</span>
-                          <span>&middot;</span>
-                          <span>{doc.author}</span>
-                          <span>&middot;</span>
-                          <span>{relativeTime(doc.updatedAt)}</span>
-                        </div>
+      {/* Main grid ──────────────────────────────────────────────────── */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
+        {/* Recent Activity ───────────────────────────────────────── */}
+        <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+          <header className="border-border flex items-center justify-between border-b px-4 py-3">
+            <div className="min-w-0">
+              <h2 className="text-foreground text-sm font-semibold">Recent Activity</h2>
+              <p className="text-muted-foreground mt-0.5 text-xs">Last 7 days across all content</p>
+            </div>
+            <button
+              className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+              onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
+            >
+              {activity.length >= 20 ? 'Show less' : 'View all'}
+            </button>
+          </header>
+          {activity.length === 0 ? (
+            <EmptyState
+              icon={Activity}
+              title="No activity yet"
+              subtitle="Content changes will appear here as your team works."
+            />
+          ) : (
+            <ul role="list" className="divide-border divide-y">
+              {activity.map((it) => (
+                <li
+                  key={it.id}
+                  className="hover:bg-accent/50 cursor-pointer px-4 py-3 transition-colors"
+                  onClick={() => nav(`/${it.collection}/${it.id}`)}
+                >
+                  <div className="flex min-w-0 items-start gap-3">
+                    <div
+                      className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
+                      style={{ background: it.avatar.color }}
+                      aria-hidden
+                    >
+                      {it.avatar.initials}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-foreground truncate text-sm leading-snug">
+                        <span className="font-semibold">
+                          &ldquo;{it.title || 'Untitled'}&rdquo;
+                        </span>{' '}
+                        <span className="text-muted-foreground">— {it.typeLabel}</span>
+                      </p>
+                      <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
+                        <span
+                          className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
+                        >
+                          {it.statusInfo.label}
+                        </span>
+                        <span className="max-w-[120px] truncate">{it.author}</span>
+                        <span aria-hidden>·</span>
+                        <span>{it.relTime}</span>
                       </div>
-                      <span
-                        className={`px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${statusColor(doc.status)}`}
-                      >
-                        {statusLabel(doc.status)}
-                      </span>
                     </div>
                   </div>
-                )
-              })
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* Right column ─────────────────────────────────────────── */}
+        <aside className="flex min-w-0 flex-col gap-4">
+          {/* Publishing Queue */}
+          <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+            <header className="border-border flex items-center justify-between border-b px-4 py-3">
+              <div className="min-w-0">
+                <h2 className="text-foreground text-sm font-semibold">Publishing Queue</h2>
+                <p className="text-muted-foreground mt-0.5 text-xs">
+                  {publishQueue.length} item{publishQueue.length === 1 ? '' : 's'} scheduled
+                </p>
+              </div>
+              <button
+                className="text-xs font-medium text-violet-600 hover:underline disabled:cursor-default disabled:no-underline disabled:opacity-50 dark:text-violet-400"
+                disabled={publishQueue.length === 0}
+                onClick={() => {
+                  // We don't have a dedicated "scheduled" admin page, so deep-
+                  // link to the first scheduled item — that's where authors
+                  // typically need to land to reschedule or cancel.
+                  const first = publishQueue[0]
+                  if (first) nav(`/${first.collection}/${first.id}`)
+                }}
+              >
+                Manage
+              </button>
+            </header>
+            {publishQueue.length === 0 ? (
+              <EmptyState
+                icon={Clock}
+                title="No scheduled content"
+                subtitle="Scheduled posts and pages appear here."
+                compact
+              />
+            ) : (
+              <ul role="list" className="divide-border divide-y">
+                {publishQueue.map((q) => (
+                  <li
+                    key={q.id}
+                    className="hover:bg-accent/50 flex min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 transition-colors"
+                    onClick={() => nav(`/${q.collection}/${q.id}`)}
+                  >
+                    <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden />
+                    <div className="min-w-0 flex-1">
+                      <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
+                      <p className="text-muted-foreground truncate text-[11px]">
+                        {q.date} · {q.author}
+                      </p>
+                    </div>
+                    <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
+                      {q.type}
+                    </span>
+                  </li>
+                ))}
+              </ul>
             )}
-          </div>
-          {recentDocs.length > perPage && (
-            <div className="px-4 py-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-500">
-              <span>
-                Showing {activityPage * perPage + 1}-
-                {Math.min((activityPage + 1) * perPage, recentDocs.length)} of {recentDocs.length}
-              </span>
-              <div className="flex items-center gap-1">
-                <button
-                  onClick={() => setActivityPage(Math.max(0, activityPage - 1))}
-                  disabled={activityPage === 0}
-                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+          </section>
+
+          {/* Content Health */}
+          <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+            <header className="border-border flex items-center justify-between border-b px-4 py-3">
+              <div className="min-w-0">
+                <h2 className="text-foreground text-sm font-semibold">Content Health</h2>
+                <p className="text-muted-foreground mt-0.5 text-xs">SEO &amp; quality issues</p>
+              </div>
+              <button
+                className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+                onClick={() => nav('/seo')}
+              >
+                Fix issues
+              </button>
+            </header>
+            <div className="px-4 pt-3.5 pb-2.5">
+              <div className="mb-1.5 flex items-baseline justify-between">
+                <p className="text-foreground text-2xl leading-none font-semibold tracking-tight">
+                  {contentHealth.score > 0 ? contentHealth.score : '—'}
+                  {contentHealth.score > 0 && (
+                    <span className="text-muted-foreground ml-0.5 text-sm font-normal">/100</span>
+                  )}
+                </p>
+                <span
+                  className={`text-xs font-medium ${
+                    contentHealth.tone === 'ok'
+                      ? 'text-emerald-600 dark:text-emerald-400'
+                      : contentHealth.tone === 'warn'
+                        ? 'text-amber-600 dark:text-amber-400'
+                        : contentHealth.tone === 'err'
+                          ? 'text-red-600 dark:text-red-400'
+                          : 'text-muted-foreground'
+                  }`}
                 >
-                  <ChevronLeft className="w-3.5 h-3.5" />
-                </button>
-                <span>
-                  Page {activityPage + 1} of {totalActivityPages}
+                  {contentHealth.label}
                 </span>
-                <button
-                  onClick={() =>
-                    setActivityPage(Math.min(totalActivityPages - 1, activityPage + 1))
-                  }
-                  disabled={activityPage >= totalActivityPages - 1}
-                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
-                >
-                  <ChevronRight className="w-3.5 h-3.5" />
-                </button>
+              </div>
+              <div className="bg-muted h-1.5 overflow-hidden rounded-full">
+                <div
+                  className={`h-full rounded-full transition-all ${
+                    contentHealth.tone === 'ok'
+                      ? 'bg-emerald-500'
+                      : contentHealth.tone === 'warn'
+                        ? 'bg-amber-500'
+                        : contentHealth.tone === 'err'
+                          ? 'bg-red-500'
+                          : 'bg-muted-foreground/40'
+                  }`}
+                  style={{ width: `${Math.max(0, Math.min(100, contentHealth.score))}%` }}
+                />
               </div>
             </div>
-          )}
-        </div>
+            {contentHealth.issues.length === 0 ? (
+              <div className="text-muted-foreground px-4 pt-1 pb-4 text-xs">
+                No outstanding issues. Nice work.
+              </div>
+            ) : (
+              <ul role="list" className="divide-border divide-y">
+                {contentHealth.issues.map((iss, i) => (
+                  <li
+                    key={i}
+                    className="hover:bg-accent/50 flex cursor-pointer items-center gap-2.5 px-4 py-2 transition-colors"
+                    onClick={() => nav('/seo')}
+                  >
+                    <span
+                      className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                        iss.tone === 'err'
+                          ? 'bg-red-500'
+                          : iss.tone === 'warn'
+                            ? 'bg-amber-500'
+                            : 'bg-muted-foreground'
+                      }`}
+                      aria-hidden
+                    />
+                    <span className="text-muted-foreground flex-1 truncate text-xs">
+                      {iss.label}
+                    </span>
+                    <span
+                      className={`shrink-0 text-sm font-semibold ${
+                        iss.tone === 'err'
+                          ? 'text-red-600 dark:text-red-400'
+                          : iss.tone === 'warn'
+                            ? 'text-amber-600 dark:text-amber-400'
+                            : 'text-muted-foreground'
+                      }`}
+                    >
+                      {iss.count}
+                    </span>
+                    <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+        </aside>
+      </div>
 
-        {/* Content Overview */}
-        <div className="lg:col-span-4 bg-white rounded-xl border border-gray-200">
-          <div className="p-4 border-b border-gray-200">
-            <h2 className="text-sm font-semibold text-gray-900">Content Overview</h2>
-          </div>
-          <div className="p-4 flex items-center justify-center min-h-[220px]">
-            <ContentOverviewChart
-              published={statusCounts['PUBLISHED'] ?? 0}
-              drafts={statusCounts['DRAFT'] ?? 0}
-              scheduled={statusCounts['SCHEDULED'] ?? 0}
-            />
+      {/* Content Delivery ──────────────────────────────────────────── */}
+      <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+        <header className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="min-w-0">
+            <h2 className="text-foreground text-sm font-semibold">Content Delivery</h2>
+            <p className="text-muted-foreground mt-0.5 text-xs">Real-time platform activity</p>
           </div>
+          <button
+            className="inline-flex items-center gap-1 text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+            onClick={() => nav('/api-keys')}
+          >
+            API docs <ExternalLink className="h-3 w-3" />
+          </button>
+        </header>
+        <div className="divide-border grid grid-cols-2 divide-x divide-y lg:grid-cols-4 lg:divide-y-0">
+          <DeliveryTile
+            icon={Activity}
+            label="Total Documents"
+            value={delivery.totalDocs.toLocaleString()}
+            sub="across all collections"
+          />
+          <DeliveryTile
+            icon={Clock}
+            label="Scheduled Posts"
+            value={delivery.scheduled.toLocaleString()}
+            sub={delivery.scheduled > 0 ? 'in publishing queue' : 'none queued'}
+            tone={delivery.scheduled > 0 ? 'ok' : 'muted'}
+          />
+          <DeliveryTile
+            icon={ClipboardList}
+            label="Form Responses"
+            value={delivery.forms.toLocaleString()}
+            sub={delivery.forms > 0 ? 'total received' : 'none yet'}
+            tone={delivery.forms > 0 ? 'ok' : 'muted'}
+          />
+          <DeliveryTile
+            icon={Zap}
+            label="Active Webhooks"
+            value={`${delivery.webhooks.active} / ${delivery.webhooks.total || 0}`}
+            sub={
+              delivery.webhooks.total === 0
+                ? 'none configured'
+                : delivery.webhooks.active === delivery.webhooks.total
+                  ? 'all active'
+                  : `${delivery.webhooks.total - delivery.webhooks.active} paused`
+            }
+            tone={
+              delivery.webhooks.total === 0
+                ? 'muted'
+                : delivery.webhooks.active === delivery.webhooks.total
+                  ? 'ok'
+                  : 'warn'
+            }
+          />
         </div>
-      </div>
+      </section>
+    </div>
+  )
+}
+
+// ─── Sub-components (kept in-file: smaller bundle, no extra module hops) ────
 
-      {/* SEO Performance */}
-      <SEOPerformance onNavigate={nav} />
+function EmptyState({
+  icon: Icon,
+  title,
+  subtitle,
+  compact = false,
+}: {
+  icon: LucideIcon
+  title: string
+  subtitle: string
+  compact?: boolean
+}) {
+  return (
+    <div
+      className={`flex flex-col items-center justify-center gap-1.5 text-center ${compact ? 'px-4 py-6' : 'px-6 py-10'}`}
+    >
+      <Icon className="text-muted-foreground/50 mb-1 h-7 w-7" aria-hidden />
+      <p className="text-foreground text-sm font-semibold">{title}</p>
+      <p className="text-muted-foreground max-w-xs text-xs">{subtitle}</p>
+    </div>
+  )
+}
+
+function DeliveryTile({
+  icon: Icon,
+  label,
+  value,
+  sub,
+  tone = 'muted',
+}: {
+  icon: LucideIcon
+  label: string
+  value: string
+  sub?: string
+  tone?: 'ok' | 'warn' | 'err' | 'muted'
+}) {
+  const subTone =
+    tone === 'ok'
+      ? 'text-emerald-600 dark:text-emerald-400'
+      : tone === 'warn'
+        ? 'text-amber-600 dark:text-amber-400'
+        : tone === 'err'
+          ? 'text-red-600 dark:text-red-400'
+          : 'text-muted-foreground'
+  return (
+    <div className="px-4 py-3.5">
+      <div className="text-muted-foreground mb-1 flex items-center gap-1.5">
+        <Icon className="h-3.5 w-3.5" aria-hidden />
+        <span className="text-[11px] font-medium">{label}</span>
+      </div>
+      <p className="text-foreground text-xl leading-tight font-semibold tracking-tight">{value}</p>
+      {sub && <p className={`mt-0.5 text-[11px] ${subTone}`}>{sub}</p>}
     </div>
   )
 }