@actuate-media/cms-admin 0.2.1 → 0.3.0

package/src/components/SEOPerformance.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { Search, AlertTriangle, FileWarning, ImageOff, LinkIcon, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+import { useApiData } from '../lib/useApiData.js';
+
+interface SEOSummary {
+  totalPages: number;
+  issuesSummary: {
+    missingMetaDescriptions: number;
+    brokenInternalLinks: number;
+    missingAltText: number;
+  };
+  topContent: { id: string; title: string; collection: string; score: number }[];
+}
+
+function ScoreBadge({ score }: { score: number }) {
+  const color = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-amber-500' : 'text-red-500';
+  const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50';
+  return (
+    <span className={`inline-flex items-center justify-center w-9 h-9 rounded-full text-sm font-semibold ${color} ${bg}`}>
+      {score}
+    </span>
+  );
+}
+
+export interface SEOPerformanceProps {
+  onNavigate?: (path: string) => void;
+}
+
+export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
+  const { data, loading, error } = useApiData<SEOSummary>('/seo/summary');
+  const [page, setPage] = useState(0);
+  const perPage = 5;
+
+  if (loading || error || !data) return null;
+
+  const issues = data.issuesSummary;
+  const totalIssues = issues.missingMetaDescriptions + issues.brokenInternalLinks + issues.missingAltText;
+  const topContent = data.topContent ?? [];
+  const totalPages = Math.max(1, Math.ceil(topContent.length / perPage));
+  const visible = topContent.slice(page * perPage, (page + 1) * perPage);
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200">
+      <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Search className="w-4 h-4 text-gray-500" />
+          <h2 className="text-sm font-semibold text-gray-900">SEO Performance</h2>
+        </div>
+        {totalIssues > 0 && (
+          <span className="text-xs text-gray-500">{totalIssues} issue{totalIssues !== 1 ? 's' : ''} found</span>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+        <div className="lg:col-span-7 p-4">
+          <h3 className="text-sm font-medium text-gray-700 mb-3">Top Performing Content</h3>
+          <div className="space-y-2">
+            {visible.map((item) => (
+              <div key={item.id} className="flex items-center justify-between py-2">
+                <div className="flex-1 min-w-0 mr-3">
+                  <p className="text-sm font-medium text-gray-900 truncate">{item.title}</p>
+                  <p className="text-xs text-gray-500 capitalize">{item.collection}</p>
+                </div>
+                <ScoreBadge score={item.score} />
+              </div>
+            ))}
+            {visible.length === 0 && (
+              <p className="text-sm text-gray-400 py-4 text-center">No published content yet</p>
+            )}
+          </div>
+          {topContent.length > perPage && (
+            <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
+              <span>Showing {page * perPage + 1}-{Math.min((page + 1) * perPage, topContent.length)} of {topContent.length}</span>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => setPage(Math.max(0, page - 1))}
+                  disabled={page === 0}
+                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                >
+                  <ChevronLeft className="w-3.5 h-3.5" />
+                </button>
+                <span>Page {page + 1} of {totalPages}</span>
+                <button
+                  onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
+                  disabled={page >= totalPages - 1}
+                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                >
+                  <ChevronRight className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="lg:col-span-5 p-4">
+          <h3 className="text-sm font-medium text-gray-700 mb-3">SEO Issues</h3>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <FileWarning className="w-4 h-4 text-red-400" />
+                <span className="text-sm text-gray-700">Missing meta descriptions</span>
+              </div>
+              <span className="text-sm font-semibold text-gray-900">{issues.missingMetaDescriptions}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <LinkIcon className="w-4 h-4 text-red-400" />
+                <span className="text-sm text-gray-700">Broken internal links</span>
+              </div>
+              <span className="text-sm font-semibold text-gray-900">{issues.brokenInternalLinks}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <ImageOff className="w-4 h-4 text-red-400" />
+                <span className="text-sm text-gray-700">Missing alt text</span>
+              </div>
+              <span className="text-sm font-semibold text-gray-900">{issues.missingAltText}</span>
+            </div>
+          </div>
+          {totalIssues > 0 && (
+            <button
+              onClick={() => onNavigate?.('/seo')}
+              className="mt-4 text-sm text-blue-600 hover:text-blue-700 font-medium"
+            >
+              View All Issues
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/Dashboard.tsx

@@ -1,14 +1,30 @@
 'use client';
 
-import { FileText, File, Layout, Image, Users, User, Calendar, Loader2, AlertTriangle, Database } from 'lucide-react';
+import {
+  FileText, File, Image, Users, ClipboardList, Search,
+  Loader2, AlertTriangle, Database, ChevronLeft, ChevronRight,
+} 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;
   totalMedia: number;
   totalUsers: number;
+  formCount: number;
+  avgSeoScore: number;
   collectionCounts: Record<string, number>;
-  recentDocuments: { id: string; title: string; status: string; collection: string; updatedAt: string; createdById: string }[];
+  statusCounts: Record<string, number>;
+  recentDocuments: {
+    id: string;
+    title: string;
+    status: string;
+    collection: string;
+    updatedAt: string;
+    author: string;
+  }[];
 }
 
 interface HealthData {
@@ -27,6 +43,7 @@ interface CollectionMeta {
 
 export interface DashboardProps {
   config?: any;
+  session?: any;
   onNavigate?: (path: string) => void;
 }
 
@@ -36,11 +53,7 @@ function resolveCollections(config: any): CollectionMeta[] {
   const list: any[] = Array.isArray(raw) ? raw : Object.values(raw);
   return list
     .filter((c) => !c.admin?.hidden)
-    .map((c) => ({
-      slug: c.slug,
-      type: c.type,
-      labels: c.labels,
-    }));
+    .map((c) => ({ slug: c.slug, type: c.type, labels: c.labels }));
 }
 
 function collectionLabel(col: CollectionMeta, plural = true): string {
@@ -48,45 +61,96 @@ function collectionLabel(col: CollectionMeta, plural = true): string {
   return col.labels?.singular ?? col.slug.charAt(0).toUpperCase() + col.slug.slice(1);
 }
 
-const STAT_COLORS = [
-  { bg: 'bg-blue-100', text: 'text-blue-600' },
-  { bg: 'bg-purple-100', text: 'text-purple-600' },
-  { bg: 'bg-indigo-100', text: 'text-indigo-600' },
-  { bg: 'bg-teal-100', text: 'text-teal-600' },
-];
+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 hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days} day${days !== 1 ? 's' : ''} 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 collectionIcon(col: CollectionMeta) {
-  if (col.type === 'page') return File;
-  return FileText;
+function statusLabel(status: string): string {
+  switch (status) {
+    case 'PUBLISHED': return 'Published';
+    case 'DRAFT': return 'Draft';
+    case 'SCHEDULED': return 'Scheduled';
+    case 'IN_REVIEW': return 'In Review';
+    default: return status;
+  }
 }
 
-export function Dashboard({ config, onNavigate }: DashboardProps) {
+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' },
+];
+
+export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   const nav = (path: string) => onNavigate?.(path);
   const { data, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats');
   const { data: health } = useApiData<HealthData>('/health');
+  const [activityPage, setActivityPage] = useState(0);
 
   const collections = resolveCollections(config);
-  const hasCollections = collections.length > 0;
+  const userName = session?.name ?? session?.email?.split('@')[0] ?? 'Admin';
 
-  const totalMedia = data?.totalMedia ?? 0;
-  const totalUsers = data?.totalUsers ?? 0;
   const collectionCounts = data?.collectionCounts ?? {};
+  const statusCounts = data?.statusCounts ?? {};
   const recentDocs = data?.recentDocuments ?? [];
 
-  const primaryCollection = hasCollections ? collections[0]! : null;
+  const perPage = 5;
+  const totalActivityPages = Math.max(1, Math.ceil(recentDocs.length / perPage));
+  const visibleDocs = recentDocs.slice(activityPage * perPage, (activityPage + 1) * perPage);
+
+  const statCards: { label: string; value: number; icon: typeof FileText }[] = [];
+
+  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,
+      });
+    }
+  } 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 (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
+      <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>
     );
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+    <div className="p-4 sm:p-6 space-y-6">
       {health && health.status === 'degraded' && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+        <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>
@@ -95,7 +159,7 @@ export function Dashboard({ config, onNavigate }: DashboardProps) {
                 ? 'Cannot connect to the database. Check your DATABASE_URL environment variable.'
                 : !health.secretConfigured
                   ? 'CMS secret not configured. Set CMS_SECRET or CMS_SESSION_SECRET (min 32 characters).'
-                  : `Some CMS models are missing: ${Object.entries(health.models).filter(([, v]) => !v).map(([k]) => k).join(', ')}. Run your database migrations to create the required tables.`
+                  : `Some CMS models are missing: ${Object.entries(health.models).filter(([, v]) => !v).map(([k]) => k).join(', ')}. Run your database migrations.`
               }
             </p>
           </div>
@@ -103,198 +167,117 @@ export function Dashboard({ config, onNavigate }: DashboardProps) {
       )}
 
       {error && exhausted && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3">
+        <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">Some dashboard data may be unavailable. This is normal if your database hasn&apos;t been set up yet.</span>
+          <span className="text-sm text-amber-800 flex-1">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">Retry</button>
         </div>
       )}
 
-      <div className="mb-4 sm:mb-6">
-        <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Dashboard</h1>
-        <p className="text-sm text-gray-600">Welcome back! Here's what's happening.</p>
+      {/* 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>
       </div>
 
-      {/* Stat cards: one per collection + media + users */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
-        {hasCollections ? (
-          collections.slice(0, 2).map((col, i) => {
-            const colors = STAT_COLORS[i % STAT_COLORS.length]!;
-            const Icon = collectionIcon(col);
-            return (
-              <div key={col.slug} className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-xs text-gray-600 mb-1">{collectionLabel(col)}</p>
-                    <p className="text-xl sm:text-2xl font-semibold text-gray-900">{(collectionCounts[col.slug] ?? 0).toLocaleString()}</p>
-                    <p className="text-xs text-gray-400 mt-1">&mdash;</p>
-                  </div>
-                  <div className={`w-8 h-8 sm:w-10 sm:h-10 ${colors.bg} rounded-lg flex items-center justify-center`}>
-                    <Icon className={`w-4 h-4 sm:w-5 sm:h-5 ${colors.text}`} />
-                  </div>
-                </div>
-              </div>
-            );
-          })
-        ) : (
-          <>
-            <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-xs text-gray-600 mb-1">Documents</p>
-                  <p className="text-xl sm:text-2xl font-semibold text-gray-900">{(data?.totalDocuments ?? 0).toLocaleString()}</p>
-                  <p className="text-xs text-gray-400 mt-1">&mdash;</p>
-                </div>
-                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-                  <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
-                </div>
-              </div>
-            </div>
-            <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-xs text-gray-600 mb-1">Pages</p>
-                  <p className="text-xl sm:text-2xl font-semibold text-gray-900">{(collectionCounts['pages'] ?? 0).toLocaleString()}</p>
-                  <p className="text-xs text-gray-400 mt-1">&mdash;</p>
-                </div>
-                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-purple-100 rounded-lg flex items-center justify-center">
-                  <Layout className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
+      {/* 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>
               </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>
-          </>
-        )}
-
-        <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-xs text-gray-600 mb-1">Media Files</p>
-              <p className="text-xl sm:text-2xl font-semibold text-gray-900">{totalMedia.toLocaleString()}</p>
-              <p className="text-xs text-gray-400 mt-1">&mdash;</p>
-            </div>
-            <div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-100 rounded-lg flex items-center justify-center">
-              <Image className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-xs text-gray-600 mb-1">Total Users</p>
-              <p className="text-xl sm:text-2xl font-semibold text-gray-900">{totalUsers}</p>
-              <p className="text-xs text-gray-400 mt-1">&mdash;</p>
-            </div>
-            <div className="w-8 h-8 sm:w-10 sm:h-10 bg-amber-100 rounded-lg flex items-center justify-center">
-              <Users className="w-4 h-4 sm:w-5 sm:h-5 text-amber-600" />
-            </div>
-          </div>
-        </div>
+          );
+        })}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-3 sm:gap-4">
-        {/* Recent documents -- labeled by primary collection or generic */}
-        <div className="lg:col-span-8 bg-white rounded-lg border border-gray-200">
-          <div className="p-3 sm:p-4 border-b border-gray-200">
-            <h2 className="text-sm sm:text-base font-semibold text-gray-900">
-              Recent {primaryCollection ? collectionLabel(primaryCollection) : 'Documents'}
-            </h2>
+      {/* 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-200">
-            {recentDocs.length === 0 ? (
+          <div className="divide-y divide-gray-100">
+            {visibleDocs.length === 0 ? (
               <div className="p-8 text-center">
-                <p className="text-sm text-gray-500 mb-2">
-                  No {primaryCollection ? collectionLabel(primaryCollection).toLowerCase() : 'documents'} yet
-                </p>
-                {primaryCollection && (
-                  <button onClick={() => nav(`/${primaryCollection.slug}/new`)} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
-                    Create your first {collectionLabel(primaryCollection, false).toLowerCase()}
-                  </button>
-                )}
+                <p className="text-sm text-gray-400">No content yet</p>
               </div>
-            ) : recentDocs.map((doc) => (
-              <div key={doc.id} className="p-3 sm:p-4 hover:bg-gray-50 transition-colors">
-                <div className="flex items-start justify-between gap-3">
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-sm font-medium text-gray-900 mb-1 truncate">{doc.title ?? 'Untitled'}</h3>
-                    <div className="flex flex-wrap items-center gap-2 sm:gap-3 text-xs text-gray-600">
-                      <span className="flex items-center gap-1">
-                        <User className="w-3 h-3" />
-                        <span className="hidden sm:inline">{doc.createdById}</span>
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <Calendar className="w-3 h-3" />
-                        {new Date(doc.updatedAt).toLocaleDateString()}
-                      </span>
-                      <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-                        doc.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-                      }`}>
-                        {doc.status}
-                      </span>
+            ) : 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>
                     </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>
-                  <button
-                    onClick={() => nav(`/${doc.collection}/${doc.id}`)}
-                    className="text-xs sm:text-sm text-blue-600 hover:text-blue-700 whitespace-nowrap"
-                  >
-                    Edit
-                  </button>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
-        </div>
-
-        {/* Quick actions -- derived from collections */}
-        <div className="lg:col-span-4 bg-white rounded-lg border border-gray-200">
-          <div className="p-3 sm:p-4 border-b border-gray-200">
-            <h2 className="text-sm sm:text-base font-semibold text-gray-900">Quick Actions</h2>
-          </div>
-          <div className="p-3 sm:p-4 space-y-2">
-            {hasCollections ? (
-              collections.slice(0, 4).map((col, i) => {
-                const colors = STAT_COLORS[i % STAT_COLORS.length]!;
-                const Icon = collectionIcon(col);
-                return (
-                  <button key={col.slug} onClick={() => nav(`/${col.slug}/new`)} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
-                    <div className={`w-8 h-8 ${colors.bg} rounded-lg flex items-center justify-center group-hover:opacity-80 transition-colors`}>
-                      <Icon className={`w-4 h-4 ${colors.text}`} />
-                    </div>
-                    <span className="text-sm font-medium text-gray-900">New {collectionLabel(col, false)}</span>
-                  </button>
-                );
-              })
-            ) : (
-              <>
-                <button onClick={() => nav('/posts/new')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
-                  <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-200 transition-colors">
-                    <FileText className="w-4 h-4 text-blue-600" />
-                  </div>
-                  <span className="text-sm font-medium text-gray-900">New Post</span>
+          {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"
+                >
+                  <ChevronLeft className="w-3.5 h-3.5" />
                 </button>
-                <button onClick={() => nav('/pages/new')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
-                  <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-200 transition-colors">
-                    <Layout className="w-4 h-4 text-purple-600" />
-                  </div>
-                  <span className="text-sm font-medium text-gray-900">New Page</span>
+                <span>Page {activityPage + 1} of {totalActivityPages}</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>
-              </>
-            )}
-            <button onClick={() => nav('/media')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
-              <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200 transition-colors">
-                <Image className="w-4 h-4 text-green-600" />
-              </div>
-              <span className="text-sm font-medium text-gray-900">Upload Media</span>
-            </button>
-            <button onClick={() => nav('/users')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
-              <div className="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center group-hover:bg-amber-200 transition-colors">
-                <Users className="w-4 h-4 text-amber-600" />
               </div>
-              <span className="text-sm font-medium text-gray-900">Manage Users</span>
-            </button>
+            </div>
+          )}
+        </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}
+            />
           </div>
         </div>
       </div>
+
+      {/* SEO Performance */}
+      <SEOPerformance onNavigate={nav} />
     </div>
   );
 }