@actuate-media/cms-admin 0.2.1 → 0.4.0

package/src/views/Pages.tsx

@@ -14,6 +14,63 @@ export interface PagesProps {
   onNavigate?: (path: string) => void;
 }
 
+const COLOR_PALETTE = [
+  { bg: 'bg-blue-100', text: 'text-blue-700' },
+  { bg: 'bg-green-100', text: 'text-green-700' },
+  { bg: 'bg-purple-100', text: 'text-purple-700' },
+  { bg: 'bg-orange-100', text: 'text-orange-700' },
+  { bg: 'bg-pink-100', text: 'text-pink-700' },
+  { bg: 'bg-teal-100', text: 'text-teal-700' },
+  { bg: 'bg-indigo-100', text: 'text-indigo-700' },
+  { bg: 'bg-rose-100', text: 'text-rose-700' },
+];
+
+function hashString(s: string): number {
+  let hash = 0;
+  for (let i = 0; i < s.length; i++) {
+    hash = ((hash << 5) - hash + s.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash);
+}
+
+const folderColorCache: Record<string, (typeof COLOR_PALETTE)[0]> = {};
+
+function getFolderColor(name: string) {
+  if (!folderColorCache[name]) {
+    folderColorCache[name] = COLOR_PALETTE[hashString(name) % COLOR_PALETTE.length]!;
+  }
+  return folderColorCache[name]!;
+}
+
+function computeSeoScore(data: Record<string, unknown> | null | undefined): number {
+  if (!data) return 0;
+  let score = 0;
+  if (data.metaTitle || data.seoTitle) score += 25;
+  if (data.metaDescription || data.seoDescription) score += 25;
+  if (data.canonical) score += 25;
+  if (data.schemaType) score += 25;
+  return score;
+}
+
+function SeoScoreBadge({ score }: { score: number }) {
+  const color = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-amber-500' : 'bg-red-500';
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={`w-2.5 h-2.5 rounded-full ${color}`} />
+      <span className="text-xs text-gray-600">{score}</span>
+    </div>
+  );
+}
+
+function FolderBadge({ name }: { name: string }) {
+  const colors = getFolderColor(name);
+  return (
+    <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${colors.bg} ${colors.text}`}>
+      {name}
+    </span>
+  );
+}
+
 function buildApiUrl(folderSel: FolderSelection): string {
   const base = '/collections/pages?pageSize=100';
   if (folderSel.type === 'smart') {
@@ -41,6 +98,7 @@ export function Pages({ onNavigate }: PagesProps) {
   const [sortConfig, setSortConfig] = useState<SortConfig<PageSortKey> | null>(null);
 
   const pages = data?.docs ?? [];
+  const totalCount = data?.total ?? pages.length;
 
   const filteredAndSorted = useMemo(() => {
     let results = pages.filter((page: any) => {
@@ -177,8 +235,8 @@ export function Pages({ onNavigate }: PagesProps) {
             <FolderInput className="w-5 h-5 text-gray-600" />
           </button>
           <div>
-            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Pages</h1>
-            <p className="text-sm text-gray-600">{filteredAndSorted.length} total pages</p>
+            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">Pages</h1>
+            <p className="text-sm text-gray-500">{totalCount} page{totalCount !== 1 ? 's' : ''}</p>
           </div>
         </div>
         <button
@@ -270,48 +328,58 @@ export function Pages({ onNavigate }: PagesProps) {
                         </th>
                         <th className="w-6 px-1 py-2"></th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Title" sortKey="title" /></th>
+                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">Folder</th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Author" sortKey="author" /></th>
-                        <th className="px-3 py-2 text-left"><SortHeader label="Template" sortKey="template" /></th>
+                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">SEO</th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Status" sortKey="status" /></th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Date" sortKey="date" /></th>
                         <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
                       </tr>
                     </thead>
                     <tbody className="divide-y divide-gray-200">
-                      {filteredAndSorted.map((page: any) => (
-                        <tr
-                          key={page.id}
-                          className="hover:bg-gray-50 transition-colors"
-                          draggable
-                          onDragStart={(e) => handleDragStart(e, page.id)}
-                        >
-                          <td className="px-3 py-2">
-                            <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300" />
-                          </td>
-                          <td className="px-1 py-2 cursor-grab">
-                            <GripVertical className="w-4 h-4 text-gray-300" />
-                          </td>
-                          <td className="px-3 py-2">
-                            <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left">{page.title}</button>
-                          </td>
-                          <td className="px-3 py-2 text-sm text-gray-600">{page.author}</td>
-                          <td className="px-3 py-2 text-sm text-gray-600">{page.template}</td>
-                          <td className="px-3 py-2">
-                            <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
-                          </td>
-                          <td className="px-3 py-2 text-sm text-gray-600">{page.date}</td>
-                          <td className="px-3 py-2">
-                            <div className="flex items-center gap-2">
-                              <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit">
-                                <Pencil className="w-4 h-4 text-gray-600" />
-                              </button>
-                              <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Delete">
-                                <Trash2 className="w-4 h-4 text-red-600" />
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
-                      ))}
+                      {filteredAndSorted.map((page: any) => {
+                        const seoScore = computeSeoScore(page.data);
+                        const folderName = page.folder?.name ?? page.folderName;
+                        return (
+                          <tr
+                            key={page.id}
+                            className="hover:bg-gray-50 transition-colors"
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, page.id)}
+                          >
+                            <td className="px-3 py-2">
+                              <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300" />
+                            </td>
+                            <td className="px-1 py-2 cursor-grab">
+                              <GripVertical className="w-4 h-4 text-gray-300" />
+                            </td>
+                            <td className="px-3 py-2">
+                              <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left">{page.title}</button>
+                            </td>
+                            <td className="px-3 py-2">
+                              {folderName ? <FolderBadge name={folderName} /> : <span className="text-xs text-gray-400">—</span>}
+                            </td>
+                            <td className="px-3 py-2 text-sm text-gray-600">{page.author}</td>
+                            <td className="px-3 py-2">
+                              <SeoScoreBadge score={seoScore} />
+                            </td>
+                            <td className="px-3 py-2">
+                              <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
+                            </td>
+                            <td className="px-3 py-2 text-sm text-gray-600">{page.date}</td>
+                            <td className="px-3 py-2">
+                              <div className="flex items-center gap-2">
+                                <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit">
+                                  <Pencil className="w-4 h-4 text-gray-600" />
+                                </button>
+                                <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Delete">
+                                  <Trash2 className="w-4 h-4 text-red-600" />
+                                </button>
+                              </div>
+                            </td>
+                          </tr>
+                        );
+                      })}
                     </tbody>
                   </table>
                 </div>
@@ -319,30 +387,36 @@ export function Pages({ onNavigate }: PagesProps) {
 
               <div className="md:hidden bg-white rounded-lg border border-gray-200 flex-1 overflow-auto">
                 <div className="divide-y divide-gray-200">
-                  {filteredAndSorted.map((page: any) => (
-                    <div
-                      key={page.id}
-                      className="p-3"
-                      draggable
-                      onDragStart={(e) => handleDragStart(e, page.id)}
-                    >
-                      <div className="flex items-start gap-3">
-                        <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300 mt-1" />
-                        <div className="flex-1 min-w-0">
-                          <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left">{page.title}</button>
-                          <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
-                            <span>{page.author}</span>
-                            <span>•</span>
-                            <span>{page.date}</span>
-                            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
+                  {filteredAndSorted.map((page: any) => {
+                    const seoScore = computeSeoScore(page.data);
+                    const folderName = page.folder?.name ?? page.folderName;
+                    return (
+                      <div
+                        key={page.id}
+                        className="p-3"
+                        draggable
+                        onDragStart={(e) => handleDragStart(e, page.id)}
+                      >
+                        <div className="flex items-start gap-3">
+                          <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300 mt-1" />
+                          <div className="flex-1 min-w-0">
+                            <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left">{page.title}</button>
+                            <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
+                              {folderName && <FolderBadge name={folderName} />}
+                              <span>{page.author}</span>
+                              <span>&middot;</span>
+                              <span>{page.date}</span>
+                              <SeoScoreBadge score={seoScore} />
+                              <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
+                            </div>
                           </div>
+                          <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors">
+                            <Trash2 className="w-4 h-4 text-red-600" />
+                          </button>
                         </div>
-                        <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors">
-                          <Trash2 className="w-4 h-4 text-red-600" />
-                        </button>
                       </div>
-                    </div>
-                  ))}
+                    );
+                  })}
                 </div>
               </div>
             </>

package/src/views/Settings.tsx

@@ -1,18 +1,20 @@
 'use client';
 
 import * as Tabs from '@radix-ui/react-tabs';
-import { Bot, Eye, EyeOff, Image, FileCode2, BookOpen, Sparkles, MessageSquare, Languages, Loader2, AlertTriangle, Download, CheckCircle2, ArrowUpCircle, ExternalLink, RefreshCw, GitPullRequest } from 'lucide-react';
+import { Bot, Eye, EyeOff, Image, FileCode2, BookOpen, Sparkles, MessageSquare, Languages, Loader2, AlertTriangle, Download, CheckCircle2, ArrowUpCircle, ExternalLink, RefreshCw, GitPullRequest, Layers } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import { useApiData } from '../lib/useApiData.js';
 import { cmsApi } from '../lib/api.js';
 import { useTheme } from '../components/ThemeProvider.js';
+import { RelationshipField } from '../fields/RelationshipField.js';
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void;
+  config?: any;
 }
 
-export function Settings(_props: SettingsProps = {}) {
+export function Settings({ config, ..._props }: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings');
 
   const [siteTitle, setSiteTitle] = useState('My CMS');
@@ -26,6 +28,18 @@ export function Settings(_props: SettingsProps = {}) {
   const [activeTab, setActiveTab] = useState('general');
   const [saving, setSaving] = useState(false);
 
+  // Layout defaults
+  const [defaultLayout, setDefaultLayout] = useState<Record<string, string>>({});
+  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 hasLayoutRegions = layoutRegions.length > 0;
+
   // AI settings
   const [aiProvider, setAiProvider] = useState('anthropic');
   const [aiApiKey, setAiApiKey] = useState('');
@@ -60,11 +74,15 @@ export function Settings(_props: SettingsProps = {}) {
       setAiWritingAssistant(data.aiWritingAssistant ?? true);
       setAiContentScoring(data.aiContentScoring ?? true);
       setAiTranslation(data.aiTranslation ?? false);
+      if (data.defaultLayout && typeof data.defaultLayout === 'object') {
+        setDefaultLayout(data.defaultLayout);
+      }
     }
   }, [data]);
 
   const handleSave = async () => {
     setSaving(true);
+    const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {};
     const res = await cmsApi('/globals/settings', {
       method: 'PUT',
       body: JSON.stringify({
@@ -73,6 +91,7 @@ export function Settings(_props: SettingsProps = {}) {
         aiProvider, aiAltTags, aiMediaCategorize, aiMetaDescriptions,
         aiReadability, aiSchema, aiBrandVoice, aiWritingAssistant,
         aiContentScoring, aiTranslation,
+        ...layoutPayload,
       }),
     });
     setSaving(false);
@@ -112,6 +131,14 @@ export function Settings(_props: SettingsProps = {}) {
         <Tabs.List className="mb-4 flex gap-1 border-b border-gray-200 overflow-x-auto">
           <Tabs.Trigger value="general" className={tabTriggerClass}>General</Tabs.Trigger>
           <Tabs.Trigger value="appearance" className={tabTriggerClass}>Appearance</Tabs.Trigger>
+          {hasLayoutRegions && (
+            <Tabs.Trigger value="layout" className={tabTriggerClass}>
+              <span className="flex items-center gap-1.5">
+                <Layers className="w-4 h-4" />
+                Layout
+              </span>
+            </Tabs.Trigger>
+          )}
           <Tabs.Trigger value="security" className={tabTriggerClass}>Security</Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
@@ -188,6 +215,56 @@ export function Settings(_props: SettingsProps = {}) {
           </div>
         </Tabs.Content>
 
+        {hasLayoutRegions && (
+          <Tabs.Content value="layout" className="space-y-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <h3 className="mb-1 text-sm font-semibold text-gray-900">Default Layout Variants</h3>
+              <p className="mb-4 text-xs text-gray-500">
+                Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages.
+              </p>
+              <div className="space-y-4">
+                {layoutRegions.map((region) => (
+                  <RelationshipField
+                    key={region.name}
+                    label={`Default ${region.label}`}
+                    value={defaultLayout[region.name] ?? ''}
+                    onChange={(val) => {
+                      setDefaultLayout((prev) => {
+                        const next = { ...prev };
+                        if (val && typeof val === 'string') {
+                          next[region.name] = val;
+                        } else {
+                          delete next[region.name];
+                        }
+                        return next;
+                      });
+                    }}
+                    relationTo={region.collection}
+                    helpText={`The ${region.label.toLowerCase()} variant used when no page in the ancestor chain specifies one`}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">How Layout Inheritance Works</h3>
+              <ul className="space-y-1.5 text-xs text-gray-600">
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">1</span>
+                  <span>Each page can assign specific layout variants (header, footer, etc.) from the document editor.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">2</span>
+                  <span>Child pages automatically inherit their parent&apos;s layout. For example, <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads/thank-you</code> inherits from <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads</code>.</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">3</span>
+                  <span>If no page in the ancestor chain sets a variant, the defaults configured above are used.</span>
+                </li>
+              </ul>
+            </div>
+          </Tabs.Content>
+        )}
+
         <Tabs.Content value="security" className="space-y-4">
           <div className="rounded-lg border border-gray-200 bg-white p-4">
             <h3 className="mb-4 text-sm font-semibold text-gray-900">Security Settings</h3>