@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/views/Dashboard.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+import { FileText, File, Layout, Image, Users, User, Calendar, Loader2, AlertTriangle, Database } from 'lucide-react';
+import { useApiData } from '../lib/useApiData.js';
+
+interface DashboardStats {
+  totalDocuments: number;
+  totalMedia: number;
+  totalUsers: number;
+  collectionCounts: Record<string, number>;
+  recentDocuments: { id: string; title: string; status: string; collection: string; updatedAt: string; createdById: string }[];
+}
+
+interface HealthData {
+  status: 'healthy' | 'degraded';
+  version: string;
+  secretConfigured: boolean;
+  models: Record<string, boolean>;
+  databaseConnected: boolean;
+}
+
+interface CollectionMeta {
+  slug: string;
+  type?: string;
+  labels?: { singular?: string; plural?: string };
+}
+
+export interface DashboardProps {
+  config?: any;
+  onNavigate?: (path: string) => void;
+}
+
+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)
+    .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 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 collectionIcon(col: CollectionMeta) {
+  if (col.type === 'page') return File;
+  return FileText;
+}
+
+export function Dashboard({ config, onNavigate }: DashboardProps) {
+  const nav = (path: string) => onNavigate?.(path);
+  const { data, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats');
+  const { data: health } = useApiData<HealthData>('/health');
+
+  const collections = resolveCollections(config);
+  const hasCollections = collections.length > 0;
+
+  const totalMedia = data?.totalMedia ?? 0;
+  const totalUsers = data?.totalUsers ?? 0;
+  const collectionCounts = data?.collectionCounts ?? {};
+  const recentDocs = data?.recentDocuments ?? [];
+
+  const primaryCollection = hasCollections ? collections[0]! : null;
+
+  if (loading) {
+    return (
+      <div className="p-3 pr-6 sm:p-4 sm:pr-8 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">
+      {health && health.status === 'degraded' && (
+        <div className="mb-4 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">
+              {!health.databaseConnected
+                ? '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.`
+              }
+            </p>
+          </div>
+        </div>
+      )}
+
+      {error && exhausted && (
+        <div className="mb-4 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>
+          <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>
+      </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" />
+                </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">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>
+          </div>
+          <div className="divide-y divide-gray-200">
+            {recentDocs.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>
+                )}
+              </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>
+                    </div>
+                  </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>
+                </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>
+                </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>
+      </div>
+    </div>
+  );
+}

package/src/views/DocumentEdit.tsx

@@ -0,0 +1,377 @@
+'use client';
+
+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 { Button } from '../components/ui/Button.js';
+import { Badge } from '../components/ui/Badge.js';
+import { LivePreview } from '../components/LivePreview.js';
+import { VersionHistory } from '../components/VersionHistory.js';
+import { PresenceIndicator } from '../components/PresenceIndicator.js';
+import { SEOPanel } from '../components/SEOPanel.js';
+import type { SEOData } from '../components/SEOPanel.js';
+import { cmsApi } from '../lib/api.js';
+
+export interface DocumentEditProps {
+  collectionSlug: string;
+  documentId?: string;
+  config: any;
+  onNavigate?: (path: string) => void;
+}
+
+export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }: DocumentEditProps) {
+  const isNew = !documentId;
+  const [values, setValues] = useState<Record<string, any>>({});
+  const [initialValues, setInitialValues] = useState<Record<string, any>>({});
+  const [seoData, setSeoData] = useState<SEOData>({});
+  const [initialSeoData, setInitialSeoData] = useState<SEOData>({});
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(!isNew);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showVersions, setShowVersions] = useState(false);
+  const [docStatus, setDocStatus] = useState<string>('DRAFT');
+  const hasLoadedRef = useRef(false);
+
+  const collections = config?.collections;
+  const collection = Array.isArray(collections)
+    ? collections.find((c: any) => c.slug === collectionSlug)
+    : collections?.[collectionSlug];
+
+  const previewUrl = collection?.admin?.preview ? collection.admin.preview({}) : undefined;
+  const fields: any[] = collection?.fields
+    ? (Array.isArray(collection.fields)
+        ? collection.fields
+        : Object.entries(collection.fields).map(([name, def]: [string, any]) => ({ name, ...def })))
+    : [];
+
+  const useAsTitleField = collection?.admin?.useAsTitle ?? 'title';
+  const displayTitle = isNew
+    ? `New ${collection?.labels?.singular ?? collectionSlug}`
+    : `Edit ${values[useAsTitleField] ?? 'Document'}`;
+
+  const isDirty = JSON.stringify(values) !== JSON.stringify(initialValues)
+    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData);
+
+  useEffect(() => {
+    if (!isNew && documentId && !hasLoadedRef.current) {
+      hasLoadedRef.current = true;
+      loadDocument();
+    }
+  }, [documentId, isNew]);
+
+  useEffect(() => {
+    if (!isDirty) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [isDirty]);
+
+  const SEO_FIELDS: (keyof SEOData)[] = [
+    'metaTitle', 'metaDescription', 'focusKeyphrase', 'canonical',
+    'noIndex', 'noFollow', 'ogTitle', 'ogDescription', 'ogImage',
+    'twitterTitle', 'twitterDescription', 'twitterImage',
+    'isCornerstone', 'schemaType',
+  ];
+
+  async function loadDocument() {
+    setLoading(true);
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`);
+    if (res.data) {
+      const doc = res.data;
+      const docData = (doc.data && typeof doc.data === 'object') ? doc.data : {};
+      const merged = { ...docData, title: doc.title ?? docData.title, slug: doc.slug ?? docData.slug };
+      setValues(merged);
+      setInitialValues(merged);
+      setDocStatus(doc.status ?? 'DRAFT');
+
+      const loadedSeo: SEOData = {};
+      for (const key of SEO_FIELDS) {
+        if (docData[key] !== undefined) {
+          (loadedSeo as any)[key] = docData[key];
+        }
+      }
+      setSeoData(loadedSeo);
+      setInitialSeoData(loadedSeo);
+    } else if (res.error) {
+      toast.error(`Failed to load document: ${res.error}`);
+    }
+    setLoading(false);
+  }
+
+  function handleFieldChange(name: string, value: any) {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    const payload = { ...values, ...seoData };
+    try {
+      if (isNew) {
+        const res = await cmsApi<any>(`/collections/${collectionSlug}`, {
+          method: 'POST',
+          body: JSON.stringify(payload),
+        });
+        if (res.error) {
+          toast.error(res.error);
+        } else {
+          toast.success('Document created');
+          const newId = res.data?.id;
+          setInitialValues(values);
+          setInitialSeoData(seoData);
+          if (newId && onNavigate) {
+            onNavigate(`/${collectionSlug}/${newId}`);
+          }
+        }
+      } else {
+        const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
+          method: 'PUT',
+          body: JSON.stringify(payload),
+        });
+        if (res.error) {
+          toast.error(res.error);
+        } else {
+          toast.success('Changes saved');
+          setInitialValues(values);
+          setInitialSeoData(seoData);
+          if (res.data?.status) setDocStatus(res.data.status);
+        }
+      }
+    } catch {
+      toast.error('An unexpected error occurred');
+    }
+    setSaving(false);
+  }
+
+  async function handlePublish() {
+    if (isNew) return;
+    setSaving(true);
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
+      method: 'PUT',
+      body: JSON.stringify({ ...values, ...seoData, status: 'PUBLISHED' }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Document published');
+      setDocStatus('PUBLISHED');
+      setInitialValues(values);
+      setInitialSeoData(seoData);
+    }
+    setSaving(false);
+  }
+
+  async function handleUnpublish() {
+    if (isNew) return;
+    setSaving(true);
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
+      method: 'PUT',
+      body: JSON.stringify({ ...values, ...seoData, status: 'DRAFT' }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Document unpublished');
+      setDocStatus('DRAFT');
+      setInitialValues(values);
+      setInitialSeoData(seoData);
+    }
+    setSaving(false);
+  }
+
+  async function handleDuplicate() {
+    if (isNew || !documentId) return;
+    const res = await cmsApi<any>(`/collections/${collectionSlug}`, {
+      method: 'POST',
+      body: JSON.stringify({
+        ...values,
+        title: values.title ? `${values.title} (Copy)` : undefined,
+        slug: values.slug ? `${values.slug}-copy` : undefined,
+      }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Document duplicated');
+      const newId = res.data?.id;
+      if (newId && onNavigate) {
+        onNavigate(`/${collectionSlug}/${newId}`);
+      }
+    }
+  }
+
+  const mainFields = fields.filter(
+    (f: any) => !['status', 'publishedAt', 'featured', 'featuredImage'].includes(f.name),
+  );
+  const sidebarFields = fields.filter((f: any) =>
+    ['publishedAt', 'featured', 'featuredImage'].includes(f.name),
+  );
+
+  const contentField = fields.find(
+    (f: any) => f.type === 'richText' || f.name === 'content' || f.name === 'body',
+  );
+  const htmlContent = contentField ? (values[contentField.name] ?? '') : '';
+  const docSlug = values.slug ?? '';
+
+  const statusColor = docStatus === 'PUBLISHED' ? 'bg-green-100 text-green-800'
+    : docStatus === 'SCHEDULED' ? 'bg-blue-100 text-blue-800'
+    : 'bg-yellow-100 text-yellow-800';
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[300px]">
+        <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold">{displayTitle}</h1>
+          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor}`}>
+            {docStatus}
+          </span>
+          {documentId && <PresenceIndicator documentId={documentId} />}
+          {isDirty && (
+            <span className="text-xs text-amber-600 font-medium">Unsaved changes</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowPreview((v) => !v)}
+            className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+            title={showPreview ? 'Hide preview' : 'Show preview'}
+          >
+            {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            Preview
+          </button>
+          {!isNew && (
+            <>
+              <button
+                onClick={() => setShowVersions(true)}
+                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                title="Version history"
+              >
+                <Clock className="h-4 w-4" />
+                History
+              </button>
+              <button
+                onClick={handleDuplicate}
+                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                title="Duplicate this document"
+              >
+                <Copy className="h-4 w-4" />
+                Duplicate
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className={showPreview ? 'grid grid-cols-2 gap-6' : ''}>
+        <div className="space-y-6">
+          {fields.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center rounded-lg border border-[var(--border)]">
+              <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+                <AlertTriangle className="w-6 h-6 text-gray-400" />
+              </div>
+              <h3 className="text-sm font-medium text-gray-900 mb-1">Collection schema not found</h3>
+              <p className="text-sm text-gray-500">No fields are defined for this collection.</p>
+            </div>
+          ) : (
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div className="space-y-6 lg:col-span-2">
+              {mainFields.map((field: any) => (
+                <FieldRenderer
+                  key={field.name}
+                  field={field}
+                  value={values[field.name]}
+                  onChange={(val) => handleFieldChange(field.name, val)}
+                />
+              ))}
+            </div>
+
+            <div className="space-y-6">
+              <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+                <h3 className="mb-4 font-semibold">Status</h3>
+                <div className="space-y-3">
+                  {!isNew && docStatus === 'DRAFT' && (
+                    <Button variant="primary" className="w-full" onClick={handlePublish} loading={saving}>
+                      Publish
+                    </Button>
+                  )}
+                  {!isNew && docStatus === 'PUBLISHED' && (
+                    <Button variant="secondary" className="w-full" onClick={handleUnpublish} loading={saving}>
+                      Unpublish
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {sidebarFields.length > 0 && (
+                <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+                  <h3 className="mb-4 font-semibold">Metadata</h3>
+                  {sidebarFields.map((field: any) => (
+                    <div key={field.name} className="mb-4">
+                      <FieldRenderer
+                        field={field}
+                        value={values[field.name]}
+                        onChange={(val) => handleFieldChange(field.name, val)}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <SEOPanel
+                title={values[useAsTitleField] ?? values.title ?? ''}
+                slug={docSlug}
+                content={htmlContent}
+                seoData={seoData}
+                onChange={setSeoData}
+                siteUrl={config?.siteUrl}
+              />
+            </div>
+          </div>
+          )}
+
+          <div className="sticky bottom-0 flex items-center justify-end gap-3 border-t border-[var(--border)] bg-[var(--background)] px-4 py-3">
+            <Button variant="secondary" onClick={() => onNavigate?.(`/${collectionSlug}`)}>Cancel</Button>
+            <Button variant="primary" loading={saving} onClick={handleSave} data-shortcut="save">
+              <Save className="h-4 w-4 mr-1.5" />
+              {isNew ? 'Create' : 'Save Changes'}
+            </Button>
+          </div>
+        </div>
+
+        {showPreview && (
+          <LivePreview
+            collection={collectionSlug}
+            documentId={documentId}
+            previewUrl={previewUrl}
+            values={values}
+            onClose={() => setShowPreview(false)}
+          />
+        )}
+      </div>
+
+      {!isNew && documentId && (
+        <VersionHistory
+          collectionSlug={collectionSlug}
+          documentId={documentId}
+          open={showVersions}
+          onClose={() => setShowVersions(false)}
+          onRestore={(data) => {
+            const restoredData = data as Record<string, any>;
+            setValues(restoredData);
+            setInitialValues(restoredData);
+          }}
+        />
+      )}
+    </div>
+  );
+}