@actuate-media/cms-admin 0.7.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -70,7 +70,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^3.0.0",
-    "@actuate-media/cms-core": "0.9.0"
+    "@actuate-media/cms-core": "0.10.2"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json && npx @tailwindcss/cli -i src/styles/build-input.css -o dist/actuate-admin.css --minify",

package/src/AdminRoot.tsx

@@ -25,6 +25,7 @@ import { LocaleProvider } from './components/LocaleProvider.js';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js';
 import { PageBuilder } from './views/page-builder/PageBuilder.js';
 import { SavedSections } from './views/page-builder/SavedSections.js';
+import { PageTemplates } from './views/page-builder/PageTemplates.js';
 
 export interface AdminRootProps {
   config: any;
@@ -101,16 +102,16 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
       return <Dashboard config={config} session={session} onNavigate={navigate} />;
     }
 
-    const pageBuilderEdit = matchRoute('/page-builder/:id');
-    if (pageBuilderEdit?.id) {
-      return <PageBuilder documentId={pageBuilderEdit.id} collectionSlug="pages" config={config} onNavigate={navigate} />;
-    }
-
     const pageBuilderNew = matchRoute('/page-builder/new');
     if (pageBuilderNew) {
       return <PageBuilder collectionSlug="pages" config={config} onNavigate={navigate} />;
     }
 
+    const pageBuilderEdit = matchRoute('/page-builder/:id');
+    if (pageBuilderEdit?.id) {
+      return <PageBuilder documentId={pageBuilderEdit.id} collectionSlug="pages" config={config} onNavigate={navigate} />;
+    }
+
     for (const slug of collectionSlugs) {
       const newMatch = matchRoute(`/${slug}/new`);
       if (newMatch) {
@@ -187,6 +188,10 @@ function AdminShell({ config, session, basePath = '/admin', initialPath = '/', s
       return <SavedSections onNavigate={navigate} config={config} />;
     }
 
+    if (matchRoute('/page-templates')) {
+      return <PageTemplates onNavigate={navigate} />;
+    }
+
     if (matchRoute('/users')) {
       return <Users onNavigate={navigate} />;
     }

package/src/views/FormSubmissions.tsx

@@ -35,7 +35,7 @@ interface Submission {
 }
 
 function sourceColor(source: string): string {
-  const s = source.toLowerCase();
+  const s = (source ?? '').toLowerCase();
   if (s === 'google') return 'bg-blue-100 text-blue-800';
   if (s === 'facebook' || s === 'meta') return 'bg-indigo-100 text-indigo-800';
   if (s === 'linkedin') return 'bg-sky-100 text-sky-800';
@@ -45,7 +45,7 @@ function sourceColor(source: string): string {
 }
 
 function mediumColor(medium: string): string {
-  const m = medium.toLowerCase();
+  const m = (medium ?? '').toLowerCase();
   if (m === 'cpc' || m === 'paid') return 'bg-orange-100 text-orange-800';
   if (m === 'organic') return 'bg-green-100 text-green-800';
   if (m === 'social') return 'bg-pink-100 text-pink-800';
@@ -66,22 +66,22 @@ export interface FormSubmissionsProps {
 }
 
 export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
-  const { data, loading, error, refetch } = useApiData<Submission[]>(`/forms/${formId}/submissions`);
+  const { data, loading, error, refetch } = useApiData<Submission[] | { submissions: Submission[] }>(`/forms/${formId}/submissions`);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterStatus, setFilterStatus] = useState('all');
   const [filterSource, setFilterSource] = useState('all');
   const [expandedId, setExpandedId] = useState<number | null>(null);
 
-  const submissions = data ?? [];
+  const submissions = Array.isArray(data) ? data : data?.submissions ?? [];
 
   const filteredSubmissions = useMemo(() => {
     let results = submissions.filter((s) => {
       const matchesSearch =
-        s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        s.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        s.message.toLowerCase().includes(searchQuery.toLowerCase());
+        (s.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (s.email ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (s.message ?? '').toLowerCase().includes(searchQuery.toLowerCase());
       const matchesStatus = filterStatus === 'all' || s.status === filterStatus;
-      const matchesSource = filterSource === 'all' || s.attribution.source === filterSource;
+      const matchesSource = filterSource === 'all' || s.attribution?.source === filterSource;
       return matchesSearch && matchesStatus && matchesSource;
     });
 
@@ -91,19 +91,19 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
     return results;
   }, [submissions, searchQuery, filterStatus, filterSource]);
 
-  const uniqueSources = [...new Set(submissions.map(s => s.attribution.source))];
+  const uniqueSources = [...new Set(submissions.map(s => s.attribution?.source ?? '(direct)'))];
 
   const sourceSummary = useMemo(() => {
     const counts: Record<string, number> = {};
     for (const s of submissions) {
-      const key = `${s.attribution.source} / ${s.attribution.medium}`;
+      const key = `${s.attribution?.source ?? '(direct)'} / ${s.attribution?.medium ?? '(none)'}`;
       counts[key] = (counts[key] ?? 0) + 1;
     }
     return Object.entries(counts).sort(([, a], [, b]) => b - a);
   }, [submissions]);
 
-  const paidCount = submissions.filter(s => ['cpc', 'paid'].includes(s.attribution.medium)).length;
-  const organicCount = submissions.filter(s => s.attribution.medium === 'organic').length;
+  const paidCount = submissions.filter(s => ['cpc', 'paid'].includes(s.attribution?.medium ?? '')).length;
+  const organicCount = submissions.filter(s => s.attribution?.medium === 'organic').length;
 
   const handleExport = () => {
     toast.success('Submissions exported to CSV (includes attribution data)');

package/src/views/Forms.tsx

@@ -17,7 +17,7 @@ export function Forms({ onNavigate }: FormsProps) {
 
   const filteredAndSorted = useMemo(() => {
     let results = forms.filter((form: any) =>
-      form.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (form.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
       (form.description ?? '').toLowerCase().includes(searchQuery.toLowerCase())
     );
 

package/src/views/MediaBrowser.tsx

@@ -15,7 +15,7 @@ import { FolderTree, type FolderSelection } from '../components/FolderTree.js';
 import { FocalPointPicker } from '../components/FocalPointPicker.js';
 
 interface MediaItem {
-  id: number;
+  id: number | string;
   name: string;
   type: string;
   size: string;
@@ -29,6 +29,33 @@ interface MediaItem {
   usedOn?: { page: string; path: string }[];
 }
 
+function isImageMedia(item: MediaItem): boolean {
+  return Boolean(item.url) && (item.type?.startsWith('image/') || /\.(avif|gif|jpe?g|png|webp|svg)$/i.test(item.url));
+}
+
+function matchesMediaType(item: MediaItem, filterType: string): boolean {
+  if (filterType === 'all') return true;
+  if (filterType === 'image') return item.type?.startsWith('image/') || isImageMedia(item);
+  if (filterType === 'video') return item.type?.startsWith('video/');
+  if (filterType === 'document') return !item.type?.startsWith('image/') && !item.type?.startsWith('video/');
+  return item.type === filterType;
+}
+
+function MediaPreview({ item }: { item: MediaItem }) {
+  if (isImageMedia(item)) {
+    return (
+      <img
+        src={item.url}
+        alt={item.altTag || item.title || item.name || 'Media preview'}
+        className="h-full w-full object-cover"
+        loading="lazy"
+      />
+    );
+  }
+
+  return <FileImage className="w-6 h-6 sm:w-8 sm:h-8 text-muted-foreground" />;
+}
+
 type MediaSortKey = 'name' | 'type' | 'size' | 'date';
 
 export interface MediaBrowserProps {
@@ -50,7 +77,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   const [sidebarOpen, setSidebarOpen] = useState(true);
 
   const apiUrl = useMemo(() => buildMediaApiUrl(folderSel), [folderSel]);
-  const { data, loading, error, refetch } = useApiData<{ data: MediaItem[]; total: number }>(apiUrl);
+  const { data, loading, error, refetch } = useApiData<{ data?: MediaItem[]; items?: MediaItem[]; total: number }>(apiUrl);
 
   const allData = useApiData<{ data: MediaItem[]; total: number }>('/media?pageSize=1');
   const uncatData = useApiData<{ data: MediaItem[]; total: number }>('/media?pageSize=1&folderId=none');
@@ -58,7 +85,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [searchQuery, setSearchQuery] = useState('');
   const [filterType, setFilterType] = useState('all');
-  const [selectedMedia, setSelectedMedia] = useState<number[]>([]);
+  const [selectedMedia, setSelectedMedia] = useState<Array<number | string>>([]);
   const [sortConfig, setSortConfig] = useState<SortConfig<MediaSortKey> | null>(null);
   const [activeItem, setActiveItem] = useState<MediaItem | null>(null);
 
@@ -72,12 +99,12 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   const [uploading, setUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const mediaItems = data?.data ?? [];
+  const mediaItems = data?.data ?? data?.items ?? [];
 
   const filteredAndSorted = useMemo(() => {
     let results = mediaItems.filter((item) => {
-      const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesType = filterType === 'all' || item.type === filterType;
+      const matchesSearch = (item.name ?? '').toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesType = matchesMediaType(item, filterType);
       return matchesSearch && matchesType;
     });
 
@@ -110,7 +137,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     setActiveItem(null);
   };
 
-  const handleCheckbox = (e: React.MouseEvent, id: number) => {
+  const handleCheckbox = (e: React.MouseEvent, id: number | string) => {
     e.stopPropagation();
     setSelectedMedia(prev => prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]);
   };
@@ -141,7 +168,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     }
   };
 
-  const deleteMedia = async (id: number) => {
+  const deleteMedia = async (id: number | string) => {
     const res = await cmsApi(`/media/${id}`, { method: 'DELETE' });
     if (res.error) {
       toast.error(res.error);
@@ -185,7 +212,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
 
     await new Promise(r => setTimeout(r, 1500));
     if (field === 'alt') {
-      const generated = `A ${activeItem?.format?.toLowerCase()} image showing ${activeItem?.name.replace(/[-_]/g, ' ').replace(/\.\w+$/, '')} content`;
+      const generated = `A ${(activeItem?.format ?? 'media').toLowerCase()} image showing ${(activeItem?.name ?? 'uploaded').replace(/[-_]/g, ' ').replace(/\.\w+$/, '')} content`;
       setEditAlt(generated);
       toast.success('Alt tag generated by AI');
     } else if (field === 'title') {
@@ -257,7 +284,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     }
   }, [refetch]);
 
-  const handleDragStart = (e: React.DragEvent, id: number) => {
+  const handleDragStart = (e: React.DragEvent, id: number | string) => {
     e.dataTransfer.setData('text/actuate-item-id', String(id));
     e.dataTransfer.effectAllowed = 'move';
   };
@@ -432,7 +459,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                         onDragStart={(e) => handleDragStart(e, item.id)}
                       >
                         <div className="w-full h-full bg-gray-100 flex items-center justify-center">
-                          <FileImage className="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" />
+                          <MediaPreview item={item} />
                         </div>
                         <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                           <div className="absolute bottom-0 left-0 right-0 p-2">
@@ -494,7 +521,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                             </td>
                             <td className="px-3 py-2">
                               <div className="flex items-center gap-3">
-                                <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center"><FileImage className="w-5 h-5 text-gray-400" /></div>
+                                <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center overflow-hidden"><MediaPreview item={item} /></div>
                                 <span className="text-sm font-medium text-gray-900">{item.name}</span>
                               </div>
                             </td>
@@ -530,8 +557,12 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
 
                 <div className="flex-1 overflow-y-auto">
                   <div className="p-4 border-b border-gray-200">
-                    <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
-                      <ImageIcon className="w-12 h-12 text-gray-300" />
+                    <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
+                      {isImageMedia(activeItem) ? (
+                        <MediaPreview item={activeItem} />
+                      ) : (
+                        <ImageIcon className="w-12 h-12 text-gray-300" />
+                      )}
                     </div>
                   </div>
 
@@ -661,7 +692,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     </div>
                   </div>
 
-                  {activeItem.type === 'image' && activeItem.url && (
+                  {isImageMedia(activeItem) && activeItem.url && (
                     <div className="p-4 border-b border-gray-200">
                       <FocalPointPicker
                         imageUrl={activeItem.url}

package/src/views/Posts.tsx

@@ -25,7 +25,7 @@ export function Posts({ onNavigate }: PostsProps) {
 
   const filteredAndSorted = useMemo(() => {
     let results = posts.filter((post: any) => {
-      const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      const matchesSearch = (post.title ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
         (post.author ?? '').toLowerCase().includes(searchQuery.toLowerCase());
       const matchesStatus = filterStatus === 'all' || (post.status ?? '').toLowerCase() === filterStatus.toLowerCase();
       const matchesCategory = filterCategory === 'all' || (post.category ?? '').toLowerCase() === filterCategory.toLowerCase();

package/src/views/Redirects.tsx

@@ -27,8 +27,8 @@ export function Redirects({ onNavigate }: RedirectsProps) {
   const filteredAndSorted = useMemo(() => {
     let results = redirects.filter((r) => {
       const matchesSearch =
-        r.from.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        r.to.toLowerCase().includes(searchQuery.toLowerCase());
+        (r.from ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (r.to ?? '').toLowerCase().includes(searchQuery.toLowerCase());
       const matchesType = filterType === 'all' || r.type === filterType;
       return matchesSearch && matchesType;
     });

package/src/views/SEO.tsx

@@ -44,7 +44,7 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
   // --- Pages tab data ---
   const filtered = seoPages
     .filter((page: any) => {
-      const matchesSearch = page.url.toLowerCase().includes(searchQuery.toLowerCase()) || page.title.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesSearch = (page.url ?? '').toLowerCase().includes(searchQuery.toLowerCase()) || (page.title ?? '').toLowerCase().includes(searchQuery.toLowerCase());
       const matchesScore = filterScore === 'all' || (filterScore === 'good' && page.score >= 80) || (filterScore === 'warning' && page.score >= 50 && page.score < 80) || (filterScore === 'critical' && page.score < 50);
       return matchesSearch && matchesScore;
     })
@@ -62,8 +62,8 @@ export function SEO({ onNavigate, initialTab = 'pages' }: SEOProps) {
 
   // --- Redirects data ---
   const filteredRedirects = redirects.filter((r: any) =>
-    r.from.toLowerCase().includes(redirectSearch.toLowerCase()) ||
-    r.to.toLowerCase().includes(redirectSearch.toLowerCase())
+    (r.from ?? '').toLowerCase().includes(redirectSearch.toLowerCase()) ||
+    (r.to ?? '').toLowerCase().includes(redirectSearch.toLowerCase())
   );
 
   const handleScan = async () => {

package/src/views/Users.tsx

@@ -28,9 +28,9 @@ export function Users({ onNavigate }: UsersProps) {
   const filteredAndSorted = useMemo(() => {
     let results = users.filter((user: any) => {
       const matchesSearch =
-        user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        user.email.toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesRole = filterRole === 'all' || user.role.toLowerCase() === filterRole.toLowerCase();
+        (user.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (user.email ?? '').toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesRole = filterRole === 'all' || (user.role ?? '').toLowerCase() === filterRole.toLowerCase();
       return matchesSearch && matchesRole;
     });
 

package/src/views/page-builder/PageTemplates.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { AlertTriangle, Layers, Loader2, RefreshCw } from 'lucide-react';
+import { useApiData } from '../../lib/useApiData.js';
+
+interface PageTemplate {
+  id: string;
+  name?: string;
+  description?: string | null;
+  category?: string;
+  builtIn?: boolean;
+  updatedAt?: string;
+}
+
+export interface PageTemplatesProps {
+  onNavigate?: (path: string) => void;
+}
+
+export function PageTemplates({ onNavigate }: PageTemplatesProps) {
+  const { data, loading, error, refetch } = useApiData<PageTemplate[]>('/page-templates');
+  const templates = data ?? [];
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center p-4" role="status" aria-live="polite">
+        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+        <span className="sr-only">Loading page templates</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 pr-8">
+      {error && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-border bg-card p-3">
+          <AlertTriangle className="h-5 w-5 shrink-0 text-muted-foreground" />
+          <span className="flex-1 text-sm text-foreground">{error}</span>
+          <button
+            type="button"
+            onClick={refetch}
+            className="rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-accent"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h1 className="mb-1 text-2xl font-medium text-foreground">Page Templates</h1>
+          <p className="text-sm text-muted-foreground">
+            {templates.length} saved template{templates.length === 1 ? '' : 's'}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={refetch}
+          className="inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground hover:bg-accent"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Refresh
+        </button>
+      </div>
+
+      {templates.length === 0 ? (
+        <div className="rounded-lg border border-border bg-card p-8 text-center">
+          <Layers className="mx-auto mb-3 h-8 w-8 text-muted-foreground" />
+          <h2 className="mb-1 text-lg font-medium text-foreground">No page templates yet</h2>
+          <p className="mb-4 text-sm text-muted-foreground">
+            Built-in templates are seeded by the CMS when the templates API is available.
+          </p>
+          <button
+            type="button"
+            onClick={() => onNavigate?.('/saved-sections')}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+          >
+            View Saved Sections
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {templates.map((template) => (
+            <div key={template.id} className="rounded-lg border border-border bg-card p-4">
+              <div className="mb-3 flex items-start justify-between gap-3">
+                <div>
+                  <h2 className="text-base font-medium text-foreground">{template.name ?? 'Untitled template'}</h2>
+                  <p className="mt-1 text-sm text-muted-foreground">{template.description ?? 'No description provided.'}</p>
+                </div>
+                {template.builtIn && (
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                    Built-in
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <span>{template.category ?? 'content'}</span>
+                <span>{template.updatedAt ? new Date(template.updatedAt).toLocaleDateString() : ''}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}