@actuate-media/cms-admin 0.7.0 → 0.7.2

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

@@ -36,16 +36,18 @@ const PLACEMENT_COLORS: Record<string, string> = {
 };
 
 function scopeLabel(tag: ScriptTag): string {
-  if (tag.scope === 'site') return 'Entire Site';
-  if (tag.scope === 'parents') {
-    const count = tag.targetPaths?.length ?? 0;
+  const scope = String(tag.scope ?? '');
+  const targetPaths = Array.isArray(tag.targetPaths) ? tag.targetPaths : [];
+  if (scope === 'site') return 'Entire Site';
+  if (scope === 'parents') {
+    const count = targetPaths.length;
     return `${count} parent path${count !== 1 ? 's' : ''} + children`;
   }
-  if (tag.scope === 'urls') {
-    const count = tag.targetPaths?.length ?? 0;
+  if (scope === 'urls') {
+    const count = targetPaths.length;
     return `${count} URL${count !== 1 ? 's' : ''}`;
   }
-  return tag.scope;
+  return scope || 'Custom';
 }
 
 export function ScriptTags({ onNavigate }: ScriptTagsProps) {

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