@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/views/PageEditor.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ArrowLeft, Eye, Loader2, AlertTriangle } from 'lucide-react';
+import { toast } from 'sonner';
+import { SEOPanel, type SEOData } from '../components/SEOPanel.js';
+import { useApiData } from '../lib/useApiData.js';
+import { cmsApi } from '../lib/api.js';
+
+export interface PageEditorProps {
+  id?: string;
+  onNavigate?: (path: string) => void;
+}
+
+export function PageEditor({ id, onNavigate }: PageEditorProps) {
+  const isNew = !id;
+  const { data, loading, error } = useApiData<any>(
+    isNew ? '' : `/collections/pages/${id}`
+  );
+
+  const [title, setTitle] = useState('');
+  const [slug, setSlug] = useState('');
+  const [status, setStatus] = useState<'draft' | 'published'>('draft');
+  const [saving, setSaving] = useState(false);
+  const [initialized, setInitialized] = useState(isNew);
+  const [seoData, setSeoData] = useState<SEOData>({});
+
+  useEffect(() => {
+    if (data && !initialized) {
+      setTitle(data.title ?? '');
+      setSlug(data.slug ?? '');
+      setStatus(data.status === 'PUBLISHED' ? 'published' : 'draft');
+      setInitialized(true);
+    }
+  }, [data, initialized]);
+
+  const savePage = async () => {
+    setSaving(true);
+    const body = JSON.stringify({
+      title,
+      slug,
+      status: status === 'published' ? 'PUBLISHED' : 'DRAFT',
+    });
+
+    const res = isNew
+      ? await cmsApi('/collections/pages', { method: 'POST', body })
+      : await cmsApi(`/collections/pages/${id}`, { method: 'PUT', body });
+
+    setSaving(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Page saved successfully!');
+      if (isNew && (res.data as any)?.id) {
+        onNavigate?.(`/pages/${(res.data as any).id}`);
+      }
+    }
+  };
+
+  const publishPage = async () => {
+    setSaving(true);
+    const body = JSON.stringify({
+      title,
+      slug,
+      status: 'PUBLISHED',
+    });
+
+    const endpoint = isNew ? '/collections/pages' : `/collections/pages/${id}`;
+    const method = isNew ? 'POST' : 'PUT';
+    const res = await cmsApi(endpoint, { method, body });
+
+    setSaving(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      setStatus('published');
+      toast.success('Page published!');
+      if (isNew && (res.data as any)?.id) {
+        onNavigate?.(`/pages/${(res.data as any).id}`);
+      }
+    }
+  };
+
+  if (!isNew && loading) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-white">
+      {error && (
+        <div className="mx-4 mt-3 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>
+        </div>
+      )}
+
+      <div className="border-b border-gray-200 px-4 py-3">
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => onNavigate?.('/pages')}
+            className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Pages
+          </button>
+          <div className="flex items-center gap-3">
+            <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg flex items-center gap-2 hover:bg-gray-50 transition-colors">
+              <Eye className="w-4 h-4" />
+              Preview
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-hidden flex">
+        <div className="flex-1 overflow-y-auto">
+          <div className="max-w-4xl mx-auto p-3 pr-6 sm:p-4 sm:pr-8">
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Page title"
+              className="w-full text-2xl sm:text-3xl font-bold mb-4 px-0 border-none focus:outline-none focus:ring-0 placeholder:text-gray-300"
+            />
+
+            <div className="mb-4">
+              <label className="block text-xs font-medium text-gray-600 mb-1">URL Slug</label>
+              <input
+                type="text"
+                value={slug}
+                onChange={(e) => setSlug(e.target.value)}
+                placeholder="url-slug"
+                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+              <p className="text-gray-500 mb-2">No blocks added yet</p>
+              <p className="text-sm text-gray-400">Click "Add Block" to start building your page</p>
+              <button className="mt-4 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                Add Block
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="w-[30%] border-l border-gray-200 overflow-y-auto bg-gray-50">
+          <div className="p-4 space-y-4">
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <h3 className="font-semibold text-gray-900 mb-3 text-sm">Publish</h3>
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Status</label>
+                  <select
+                    value={status}
+                    onChange={(e) => setStatus(e.target.value as 'draft' | 'published')}
+                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  >
+                    <option value="draft">Draft</option>
+                    <option value="published">Published</option>
+                  </select>
+                </div>
+                <button
+                  onClick={savePage}
+                  disabled={saving}
+                  className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium disabled:opacity-50"
+                >
+                  {saving ? 'Saving...' : 'Save Page'}
+                </button>
+                {status === 'draft' && (
+                  <button
+                    onClick={publishPage}
+                    disabled={saving}
+                    className="w-full py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium disabled:opacity-50"
+                  >
+                    {saving ? 'Publishing...' : 'Publish'}
+                  </button>
+                )}
+              </div>
+            </div>
+
+            <SEOPanel title={title} slug={slug} seoData={seoData} onChange={setSeoData} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/Pages.tsx

@@ -0,0 +1,354 @@
+'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;
+}
+
+function buildApiUrl(folderSel: FolderSelection): string {
+  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;
+  }
+  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 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 [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 filteredAndSorted = useMemo(() => {
+    let results = pages.filter((page: any) => {
+      const matchesSearch = (page.title ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (page.author ?? '').toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesStatus = filterStatus === 'all' || (page.status ?? '').toLowerCase() === filterStatus.toLowerCase();
+      const matchesTemplate = filterTemplate === 'all' || (page.template ?? '').toLowerCase() === filterTemplate.toLowerCase();
+      return matchesSearch && matchesStatus && matchesTemplate;
+    });
+
+    if (searchQuery.trim()) {
+      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;
+      });
+    }
+    return results;
+  }, [pages, searchQuery, filterStatus, filterTemplate, sortConfig]);
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectedPages(checked ? filteredAndSorted.map((p: any) => p.id) : []);
+  };
+
+  const handleSelectPage = (id: number) => {
+    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' });
+    }
+    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();
+  };
+
+  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();
+  };
+
+  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]);
+
+  const handleDragStart = (e: React.DragEvent, id: string) => {
+    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;
+    return (
+      <button
+        type="button"
+        onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+      >
+        {label}
+        {active ? (
+          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) {
+    return (
+      <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 (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+      {error && (
+        <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>
+        </div>
+      )}
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 gap-3">
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => setSidebarOpen(prev => !prev)}
+            className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+            title={sidebarOpen ? 'Hide folders' : 'Show folders'}
+          >
+            <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>
+          </div>
+        </div>
+        <button
+          onClick={() => onNavigate?.('/pages/new')}
+          className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+        >
+          <Plus className="w-4 h-4" />
+          <span className="hidden sm:inline">New Page</span>
+          <span className="sm:hidden">New</span>
+        </button>
+      </div>
+
+      <div className="flex gap-4 flex-1 min-h-0 overflow-hidden">
+        {sidebarOpen && (
+          <div className="w-56 shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden flex flex-col">
+            <FolderTree
+              scope="pages"
+              selected={folderSel}
+              onSelect={(sel) => { setFolderSel(sel); setSelectedPages([]); }}
+              totalCount={allData.data?.total}
+              uncategorizedCount={uncatData.data?.total}
+              onDropItem={handleDropItem}
+            />
+          </div>
+        )}
+
+        <div className="flex-1 flex flex-col min-w-0">
+          <div className="bg-white rounded-lg border border-gray-200 mb-4">
+            <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" />
+              </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">
+                  <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">
+                  <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">
+                  <SlidersHorizontal className="w-4 h-4" />
+                  <span className="hidden sm:inline">More Filters</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {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>
+                <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>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {filteredAndSorted.length === 0 && !error ? (
+            <div className="bg-white rounded-lg border border-gray-200 p-8 text-center flex-1 flex flex-col items-center justify-center">
+              <p className="text-sm text-gray-500 mb-2">
+                {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
+                  ? 'No uncategorized pages'
+                  : folderSel.type === 'folder'
+                  ? '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>
+            </div>
+          ) : (
+            <>
+              <div className="hidden md:block bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
+                <div className="overflow-x-auto h-full">
+                  <table className="w-full">
+                    <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" />
+                        </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"><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"><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>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              <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>
+                          </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>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}