@actuate-media/cms-admin 0.2.1 → 0.4.0

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>
   );
 }

package/src/views/DocumentEdit.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { AlertTriangle, Eye, EyeOff, Save, Copy, Loader2, Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { FieldRenderer } from '../fields/FieldRenderer.js';
+import { RelationshipField } from '../fields/RelationshipField.js';
 import { Button } from '../components/ui/Button.js';
 import { Badge } from '../components/ui/Badge.js';
 import { LivePreview } from '../components/LivePreview.js';
@@ -26,6 +27,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   const [initialValues, setInitialValues] = useState<Record<string, any>>({});
   const [seoData, setSeoData] = useState<SEOData>({});
   const [initialSeoData, setInitialSeoData] = useState<SEOData>({});
+  const [layoutAssignments, setLayoutAssignments] = useState<Record<string, string>>({});
+  const [initialLayoutAssignments, setInitialLayoutAssignments] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
   const [loading, setLoading] = useState(!isNew);
   const [showPreview, setShowPreview] = useState(false);
@@ -38,6 +41,16 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
     ? collections.find((c: any) => c.slug === collectionSlug)
     : collections?.[collectionSlug];
 
+  const layoutConfig = config?.layout;
+  const layoutRegions: Array<{ name: string; collection: string; label: string }> = layoutConfig?.regions
+    ? Object.entries(layoutConfig.regions).map(([name, region]: [string, any]) => ({
+        name,
+        collection: region.collection,
+        label: region.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+      }))
+    : [];
+  const hasLayout = layoutRegions.length > 0 && (collection?.type === 'page' || collection?.urlPrefix !== undefined);
+
   const previewUrl = collection?.admin?.preview ? collection.admin.preview({}) : undefined;
   const fields: any[] = collection?.fields
     ? (Array.isArray(collection.fields)
@@ -51,7 +64,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
     : `Edit ${values[useAsTitleField] ?? 'Document'}`;
 
   const isDirty = JSON.stringify(values) !== JSON.stringify(initialValues)
-    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData);
+    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData)
+    || JSON.stringify(layoutAssignments) !== JSON.stringify(initialLayoutAssignments);
 
   useEffect(() => {
     if (!isNew && documentId && !hasLoadedRef.current) {
@@ -95,6 +109,12 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       }
       setSeoData(loadedSeo);
       setInitialSeoData(loadedSeo);
+
+      if (docData._layout && typeof docData._layout === 'object') {
+        const loaded = docData._layout as Record<string, string>;
+        setLayoutAssignments(loaded);
+        setInitialLayoutAssignments(loaded);
+      }
     } else if (res.error) {
       toast.error(`Failed to load document: ${res.error}`);
     }
@@ -107,7 +127,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
 
   async function handleSave() {
     setSaving(true);
-    const payload = { ...values, ...seoData };
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
+    const payload = { ...values, ...seoData, ...layoutPayload };
     try {
       if (isNew) {
         const res = await cmsApi<any>(`/collections/${collectionSlug}`, {
@@ -121,6 +142,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
           const newId = res.data?.id;
           setInitialValues(values);
           setInitialSeoData(seoData);
+          setInitialLayoutAssignments(layoutAssignments);
           if (newId && onNavigate) {
             onNavigate(`/${collectionSlug}/${newId}`);
           }
@@ -136,6 +158,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
           toast.success('Changes saved');
           setInitialValues(values);
           setInitialSeoData(seoData);
+          setInitialLayoutAssignments(layoutAssignments);
           if (res.data?.status) setDocStatus(res.data.status);
         }
       }
@@ -148,9 +171,10 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   async function handlePublish() {
     if (isNew) return;
     setSaving(true);
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
     const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
       method: 'PUT',
-      body: JSON.stringify({ ...values, ...seoData, status: 'PUBLISHED' }),
+      body: JSON.stringify({ ...values, ...seoData, ...layoutPayload, status: 'PUBLISHED' }),
     });
     if (res.error) {
       toast.error(res.error);
@@ -159,6 +183,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       setDocStatus('PUBLISHED');
       setInitialValues(values);
       setInitialSeoData(seoData);
+      setInitialLayoutAssignments(layoutAssignments);
     }
     setSaving(false);
   }
@@ -166,9 +191,10 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   async function handleUnpublish() {
     if (isNew) return;
     setSaving(true);
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
     const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
       method: 'PUT',
-      body: JSON.stringify({ ...values, ...seoData, status: 'DRAFT' }),
+      body: JSON.stringify({ ...values, ...seoData, ...layoutPayload, status: 'DRAFT' }),
     });
     if (res.error) {
       toast.error(res.error);
@@ -177,6 +203,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       setDocStatus('DRAFT');
       setInitialValues(values);
       setInitialSeoData(seoData);
+      setInitialLayoutAssignments(layoutAssignments);
     }
     setSaving(false);
   }
@@ -335,6 +362,57 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
                 onChange={setSeoData}
                 siteUrl={config?.siteUrl}
               />
+
+              {hasLayout && (
+                <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+                  <h3 className="mb-1 font-semibold">Layout</h3>
+                  <p className="mb-4 text-xs text-[var(--muted-foreground)]">
+                    Assign header/footer variants. Child pages inherit from ancestors.
+                  </p>
+                  <div className="space-y-4">
+                    {layoutRegions.map((region) => (
+                      <div key={region.name}>
+                        <RelationshipField
+                          label={region.label}
+                          value={layoutAssignments[region.name] ?? ''}
+                          onChange={(val) => {
+                            setLayoutAssignments((prev) => {
+                              const next = { ...prev };
+                              if (val && typeof val === 'string') {
+                                next[region.name] = val;
+                              } else {
+                                delete next[region.name];
+                              }
+                              return next;
+                            });
+                          }}
+                          relationTo={region.collection}
+                          helpText={
+                            !layoutAssignments[region.name]
+                              ? 'Inheriting from parent page or site default'
+                              : undefined
+                          }
+                        />
+                        {layoutAssignments[region.name] && (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setLayoutAssignments((prev) => {
+                                const next = { ...prev };
+                                delete next[region.name];
+                                return next;
+                              });
+                            }}
+                            className="mt-1 text-xs text-[var(--primary)] hover:underline"
+                          >
+                            Clear override (inherit from parent)
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
           </div>
           )}