@actuate-media/cms-admin 0.6.0 → 0.7.1

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/AIBlockAssist.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Sparkles, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { cmsApi } from '../../lib/api.js';
+import type { BlockNode } from '@actuate-media/cms-core';
+
+export interface AIBlockAssistProps {
+  block: BlockNode;
+  pageTitle?: string;
+  businessName?: string;
+  onUpdateData: (data: Record<string, unknown>) => void;
+}
+
+export function AIBlockAssist({
+  block,
+  pageTitle,
+  businessName,
+  onUpdateData,
+}: AIBlockAssistProps) {
+  const [generating, setGenerating] = useState(false);
+
+  const handleGenerate = useCallback(async () => {
+    setGenerating(true);
+
+    try {
+      const res = await cmsApi<Record<string, unknown>>('/page-builder/generate-block', {
+        method: 'POST',
+        body: JSON.stringify({
+          blockType: block.settings.blockType,
+          variant: block.settings.variant,
+          pageContext: {
+            pageTitle,
+            businessName,
+          },
+        }),
+      });
+
+      if (res.error) {
+        toast.error(res.error);
+      } else if (res.data) {
+        onUpdateData(res.data);
+        toast.success('Content generated');
+      }
+    } catch {
+      toast.error('Failed to generate content');
+    } finally {
+      setGenerating(false);
+    }
+  }, [block, pageTitle, businessName, onUpdateData]);
+
+  return (
+    <button
+      onClick={handleGenerate}
+      disabled={generating}
+      className="flex items-center gap-1.5 px-2.5 py-1 text-xs text-primary hover:bg-primary/10 rounded-md transition-colors disabled:opacity-50"
+      title="Generate content with AI"
+    >
+      {generating ? (
+        <Loader2 size={12} className="animate-spin" />
+      ) : (
+        <Sparkles size={12} />
+      )}
+      {generating ? 'Generating...' : 'AI Fill'}
+    </button>
+  );
+}