@actuate-media/cms-admin 0.7.3 → 0.8.1

package/src/views/Pages.tsx

@@ -1,17 +1,30 @@
-'use client';
-
-import { Plus, Search, Trash2, SlidersHorizontal, Pencil, ArrowUpDown, ArrowUp, ArrowDown, Loader2, AlertTriangle, GripVertical, FolderInput } from 'lucide-react';
-import { useState, useMemo, useCallback } from 'react';
-import { toast } from 'sonner';
-import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
-import { FolderTree, type FolderSelection } from '../components/FolderTree.js';
-
-type PageSortKey = 'title' | 'author' | 'template' | 'status' | 'date';
+'use client'
+
+import {
+  Plus,
+  Search,
+  Trash2,
+  SlidersHorizontal,
+  Pencil,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Loader2,
+  AlertTriangle,
+  GripVertical,
+  FolderInput,
+} from 'lucide-react'
+import { useState, useMemo, useCallback } from 'react'
+import { toast } from 'sonner'
+import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
+import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
+
+type PageSortKey = 'title' | 'author' | 'template' | 'status' | 'date'
 
 export interface PagesProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 const COLOR_PALETTE = [
@@ -23,177 +36,195 @@ const COLOR_PALETTE = [
   { 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;
+  let hash = 0
   for (let i = 0; i < s.length; i++) {
-    hash = ((hash << 5) - hash + s.charCodeAt(i)) | 0;
+    hash = ((hash << 5) - hash + s.charCodeAt(i)) | 0
   }
-  return Math.abs(hash);
+  return Math.abs(hash)
 }
 
-const folderColorCache: Record<string, (typeof COLOR_PALETTE)[0]> = {};
+const folderColorCache: Record<string, (typeof COLOR_PALETTE)[0]> = {}
 
 function getFolderColor(name: string) {
   if (!folderColorCache[name]) {
-    folderColorCache[name] = COLOR_PALETTE[hashString(name) % COLOR_PALETTE.length]!;
+    folderColorCache[name] = COLOR_PALETTE[hashString(name) % COLOR_PALETTE.length]!
   }
-  return folderColorCache[name]!;
+  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;
+  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 textValue(value: unknown): string {
-  return String(value ?? '');
+  return String(value ?? '')
 }
 
 function SeoScoreBadge({ score }: { score: number }) {
-  const color = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-amber-500' : 'bg-red-500';
+  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);
+  const colors = getFolderColor(name)
   return (
-    <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${colors.bg} ${colors.text}`}>
+    <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';
+  const base = '/collections/pages?pageSize=100'
   if (folderSel.type === 'smart') {
-    if (folderSel.smart === 'recent') return `${base}&sort=updatedAt&order=desc&pageSize=20`;
-    if (folderSel.smart === 'uncategorized') return `${base}&folderId=none`;
-    return base;
+    if (folderSel.smart === 'recent') return `${base}&sort=updatedAt&order=desc&pageSize=20`
+    if (folderSel.smart === 'uncategorized') return `${base}&folderId=none`
+    return base
   }
-  return `${base}&folderId=${folderSel.folderId}`;
+  return `${base}&folderId=${folderSel.folderId}`
 }
 
 export function Pages({ onNavigate }: PagesProps) {
-  const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' });
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' })
+  const [sidebarOpen, setSidebarOpen] = useState(true)
 
-  const apiUrl = useMemo(() => buildApiUrl(folderSel), [folderSel]);
-  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(apiUrl);
+  const apiUrl = useMemo(() => buildApiUrl(folderSel), [folderSel])
+  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(apiUrl)
 
-  const allData = useApiData<{ docs: any[]; total: number }>('/collections/pages?pageSize=1');
-  const uncatData = useApiData<{ docs: any[]; total: number }>('/collections/pages?pageSize=1&folderId=none');
+  const allData = useApiData<{ docs: any[]; total: number }>('/collections/pages?pageSize=1')
+  const uncatData = useApiData<{ docs: any[]; total: number }>(
+    '/collections/pages?pageSize=1&folderId=none',
+  )
 
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterStatus, setFilterStatus] = useState<string>('all');
-  const [filterTemplate, setFilterTemplate] = useState<string>('all');
-  const [selectedPages, setSelectedPages] = useState<number[]>([]);
-  const [sortConfig, setSortConfig] = useState<SortConfig<PageSortKey> | null>(null);
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterStatus, setFilterStatus] = useState<string>('all')
+  const [filterTemplate, setFilterTemplate] = useState<string>('all')
+  const [selectedPages, setSelectedPages] = useState<number[]>([])
+  const [sortConfig, setSortConfig] = useState<SortConfig<PageSortKey> | null>(null)
 
-  const pages = data?.docs ?? [];
-  const totalCount = data?.total ?? pages.length;
+  const pages = data?.docs ?? []
+  const totalCount = data?.total ?? pages.length
 
   const filteredAndSorted = useMemo(() => {
     let results = pages.filter((page: any) => {
-      const matchesSearch = textValue(page.title).toLowerCase().includes(searchQuery.toLowerCase()) ||
-        textValue(page.author).toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesStatus = filterStatus === 'all' || textValue(page.status).toLowerCase() === filterStatus.toLowerCase();
-      const matchesTemplate = filterTemplate === 'all' || textValue(page.template).toLowerCase() === filterTemplate.toLowerCase();
-      return matchesSearch && matchesStatus && matchesTemplate;
-    });
+      const matchesSearch =
+        textValue(page.title).toLowerCase().includes(searchQuery.toLowerCase()) ||
+        textValue(page.author).toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesStatus =
+        filterStatus === 'all' ||
+        textValue(page.status).toLowerCase() === filterStatus.toLowerCase()
+      const matchesTemplate =
+        filterTemplate === 'all' ||
+        textValue(page.template).toLowerCase() === filterTemplate.toLowerCase()
+      return matchesSearch && matchesStatus && matchesTemplate
+    })
 
     if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (p: any) => [p.title, p.author ?? '', p.template ?? '']);
+      results = sortByRelevance(results, searchQuery, (p: any) => [
+        p.title,
+        p.author ?? '',
+        p.template ?? '',
+      ])
     } else if (sortConfig) {
       results = [...results].sort((a: any, b: any) => {
-        const aVal = a[sortConfig.key] ?? '';
-        const bVal = b[sortConfig.key] ?? '';
-        const cmp = String(aVal).localeCompare(String(bVal));
-        return sortConfig.direction === 'asc' ? cmp : -cmp;
-      });
+        const aVal = a[sortConfig.key] ?? ''
+        const bVal = b[sortConfig.key] ?? ''
+        const cmp = String(aVal).localeCompare(String(bVal))
+        return sortConfig.direction === 'asc' ? cmp : -cmp
+      })
     }
-    return results;
-  }, [pages, searchQuery, filterStatus, filterTemplate, sortConfig]);
+    return results
+  }, [pages, searchQuery, filterStatus, filterTemplate, sortConfig])
 
   const handleSelectAll = (checked: boolean) => {
-    setSelectedPages(checked ? filteredAndSorted.map((p: any) => p.id) : []);
-  };
+    setSelectedPages(checked ? filteredAndSorted.map((p: any) => p.id) : [])
+  }
 
   const handleSelectPage = (id: number) => {
-    setSelectedPages(prev => prev.includes(id) ? prev.filter(pid => pid !== id) : [...prev, id]);
-  };
+    setSelectedPages((prev) =>
+      prev.includes(id) ? prev.filter((pid) => pid !== id) : [...prev, id],
+    )
+  }
 
   const handleBulkDelete = async () => {
     for (const id of selectedPages) {
-      await cmsApi(`/collections/pages/${id}`, { method: 'DELETE' });
+      await cmsApi(`/collections/pages/${id}`, { method: 'DELETE' })
     }
-    toast.success(`${selectedPages.length} pages deleted`);
-    setSelectedPages([]);
-    refetch();
-  };
+    toast.success(`${selectedPages.length} pages deleted`)
+    setSelectedPages([])
+    refetch()
+  }
 
   const handleBulkPublish = async () => {
     for (const id of selectedPages) {
       await cmsApi(`/collections/pages/${id}`, {
         method: 'PUT',
         body: JSON.stringify({ status: 'PUBLISHED' }),
-      });
+      })
     }
-    toast.success(`${selectedPages.length} pages published`);
-    setSelectedPages([]);
-    refetch();
-  };
+    toast.success(`${selectedPages.length} pages published`)
+    setSelectedPages([])
+    refetch()
+  }
 
   const handleBulkUnpublish = async () => {
     for (const id of selectedPages) {
       await cmsApi(`/collections/pages/${id}`, {
         method: 'PUT',
         body: JSON.stringify({ status: 'DRAFT' }),
-      });
+      })
     }
-    toast.success(`${selectedPages.length} pages unpublished`);
-    setSelectedPages([]);
-    refetch();
-  };
+    toast.success(`${selectedPages.length} pages unpublished`)
+    setSelectedPages([])
+    refetch()
+  }
 
   const handleDelete = async (id: number) => {
-    await cmsApi(`/collections/pages/${id}`, { method: 'DELETE' });
-    toast.success('Page deleted');
-    setSelectedPages(prev => prev.filter(pid => pid !== id));
-    refetch();
-  };
-
-  const handleDropItem = useCallback(async (itemId: string, folderId: string | null) => {
-    const res = await cmsApi(`/documents/${itemId}/folder`, {
-      method: 'PUT',
-      body: JSON.stringify({ folderId }),
-    });
-    if (res.error) {
-      toast.error(res.error);
-    } else {
-      toast.success(folderId ? 'Moved to folder' : 'Removed from folder');
-      refetch();
-    }
-  }, [refetch]);
+    await cmsApi(`/collections/pages/${id}`, { method: 'DELETE' })
+    toast.success('Page deleted')
+    setSelectedPages((prev) => prev.filter((pid) => pid !== id))
+    refetch()
+  }
+
+  const handleDropItem = useCallback(
+    async (itemId: string, folderId: string | null) => {
+      const res = await cmsApi(`/documents/${itemId}/folder`, {
+        method: 'PUT',
+        body: JSON.stringify({ folderId }),
+      })
+      if (res.error) {
+        toast.error(res.error)
+      } else {
+        toast.success(folderId ? 'Moved to folder' : 'Removed from folder')
+        refetch()
+      }
+    },
+    [refetch],
+  )
 
   const handleDragStart = (e: React.DragEvent, id: string) => {
-    e.dataTransfer.setData('text/actuate-item-id', id);
-    e.dataTransfer.effectAllowed = 'move';
-  };
+    e.dataTransfer.setData('text/actuate-item-id', id)
+    e.dataTransfer.effectAllowed = 'move'
+  }
 
   function SortHeader({ label, sortKey }: { label: string; sortKey: PageSortKey }) {
-    const active = sortConfig?.key === sortKey;
+    const active = sortConfig?.key === sortKey
     return (
       <button
         type="button"
@@ -202,12 +233,16 @@ export function Pages({ onNavigate }: PagesProps) {
       >
         {label}
         {active ? (
-          sortConfig!.direction === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />
+          sortConfig!.direction === 'asc' ? (
+            <ArrowUp className="w-3 h-3" />
+          ) : (
+            <ArrowDown className="w-3 h-3" />
+          )
         ) : (
           <ArrowUpDown className="w-3 h-3 text-gray-400" />
         )}
       </button>
-    );
+    )
   }
 
   if (loading) {
@@ -215,7 +250,7 @@ export function Pages({ onNavigate }: PagesProps) {
       <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 (
@@ -224,7 +259,12 @@ export function Pages({ onNavigate }: PagesProps) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
@@ -232,7 +272,7 @@ export function Pages({ onNavigate }: PagesProps) {
         <div className="flex items-center gap-3">
           <button
             type="button"
-            onClick={() => setSidebarOpen(prev => !prev)}
+            onClick={() => setSidebarOpen((prev) => !prev)}
             className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
@@ -240,7 +280,9 @@ export function Pages({ onNavigate }: PagesProps) {
           </button>
           <div>
             <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>
+            <p className="text-sm text-gray-500">
+              {totalCount} page{totalCount !== 1 ? 's' : ''}
+            </p>
           </div>
         </div>
         <button
@@ -259,7 +301,10 @@ export function Pages({ onNavigate }: PagesProps) {
             <FolderTree
               scope="pages"
               selected={folderSel}
-              onSelect={(sel) => { setFolderSel(sel); setSelectedPages([]); }}
+              onSelect={(sel) => {
+                setFolderSel(sel)
+                setSelectedPages([])
+              }}
               totalCount={allData.data?.total}
               uncategorizedCount={uncatData.data?.total}
               onDropItem={handleDropItem}
@@ -272,22 +317,39 @@ export function Pages({ onNavigate }: PagesProps) {
             <div className="p-3 flex flex-col gap-3">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-                <input type="text" placeholder="Search pages..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                <input
+                  type="text"
+                  placeholder="Search pages..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
               </div>
               <div className="flex flex-col sm:flex-row gap-2">
-                <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)} className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <select
+                  value={filterStatus}
+                  onChange={(e) => setFilterStatus(e.target.value)}
+                  className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
                   <option value="all">All Status</option>
                   <option value="published">Published</option>
                   <option value="draft">Draft</option>
                 </select>
-                <select value={filterTemplate} onChange={(e) => setFilterTemplate(e.target.value)} className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <select
+                  value={filterTemplate}
+                  onChange={(e) => setFilterTemplate(e.target.value)}
+                  className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
                   <option value="all">All Templates</option>
                   <option value="landing">Landing</option>
                   <option value="standard">Standard</option>
                   <option value="marketing">Marketing</option>
                   <option value="blog">Blog</option>
                 </select>
-                <button type="button" className="flex items-center justify-center gap-2 px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+                <button
+                  type="button"
+                  className="flex items-center justify-center gap-2 px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                >
                   <SlidersHorizontal className="w-4 h-4" />
                   <span className="hidden sm:inline">More Filters</span>
                 </button>
@@ -298,12 +360,38 @@ export function Pages({ onNavigate }: PagesProps) {
           {selectedPages.length > 0 && (
             <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
               <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
-                <span className="text-sm text-blue-900">{selectedPages.length} page{selectedPages.length !== 1 ? 's' : ''} selected</span>
+                <span className="text-sm text-blue-900">
+                  {selectedPages.length} page{selectedPages.length !== 1 ? 's' : ''} selected
+                </span>
                 <div className="flex items-center gap-2">
-                  <button type="button" onClick={handleBulkPublish} className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">Publish</button>
-                  <button type="button" onClick={handleBulkUnpublish} className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors">Unpublish</button>
-                  <button type="button" onClick={handleBulkDelete} className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">Delete</button>
-                  <button type="button" onClick={() => setSelectedPages([])} className="flex-1 sm:flex-none px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors">Cancel</button>
+                  <button
+                    type="button"
+                    onClick={handleBulkPublish}
+                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                  >
+                    Publish
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleBulkUnpublish}
+                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
+                  >
+                    Unpublish
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleBulkDelete}
+                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                  >
+                    Delete
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSelectedPages([])}
+                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors"
+                  >
+                    Cancel
+                  </button>
                 </div>
               </div>
             </div>
@@ -315,10 +403,15 @@ export function Pages({ onNavigate }: PagesProps) {
                 {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
                   ? 'No uncategorized pages'
                   : folderSel.type === 'folder'
-                  ? 'No pages in this folder'
-                  : 'No pages yet'}
+                    ? 'No pages in this folder'
+                    : 'No pages yet'}
               </p>
-              <button onClick={() => onNavigate?.('/pages/new')} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Create your first page</button>
+              <button
+                onClick={() => onNavigate?.('/pages/new')}
+                className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                Create your first page
+              </button>
             </div>
           ) : (
             <>
@@ -328,22 +421,44 @@ export function Pages({ onNavigate }: PagesProps) {
                     <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
                       <tr>
                         <th className="w-8 px-3 py-2 text-left">
-                          <input type="checkbox" checked={selectedPages.length === filteredAndSorted.length && filteredAndSorted.length > 0} onChange={(e) => handleSelectAll(e.target.checked)} className="rounded border-gray-300" />
+                          <input
+                            type="checkbox"
+                            checked={
+                              selectedPages.length === filteredAndSorted.length &&
+                              filteredAndSorted.length > 0
+                            }
+                            onChange={(e) => handleSelectAll(e.target.checked)}
+                            className="rounded border-gray-300"
+                          />
                         </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 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>
+                        <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 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) => {
-                        const seoScore = computeSeoScore(page.data);
-                        const folderName = page.folder?.name ?? page.folderName;
+                        const seoScore = computeSeoScore(page.data)
+                        const folderName = page.folder?.name ?? page.folderName
                         return (
                           <tr
                             key={page.id}
@@ -352,37 +467,66 @@ export function Pages({ onNavigate }: PagesProps) {
                             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" />
+                              <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>
+                              <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>}
+                              {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>
+                              <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">
+                                <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">
+                                <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>
@@ -392,8 +536,8 @@ 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) => {
-                    const seoScore = computeSeoScore(page.data);
-                    const folderName = page.folder?.name ?? page.folderName;
+                    const seoScore = computeSeoScore(page.data)
+                    const folderName = page.folder?.name ?? page.folderName
                     return (
                       <div
                         key={page.id}
@@ -402,24 +546,43 @@ export function Pages({ onNavigate }: PagesProps) {
                         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" />
+                          <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>
+                            <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>
+                              <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">
+                          <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>
@@ -428,5 +591,5 @@ export function Pages({ onNavigate }: PagesProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }