@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/views/PostEditor.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ArrowLeft, Eye, Loader2, AlertTriangle } from 'lucide-react';
+import { toast } from 'sonner';
+import { TipTapEditor } from '../components/TipTapEditor.js';
+import { SEOPanel, type SEOData } from '../components/SEOPanel.js';
+import { useApiData } from '../lib/useApiData.js';
+import { cmsApi } from '../lib/api.js';
+
+export interface PostEditorProps {
+  id?: string;
+  onNavigate?: (path: string) => void;
+}
+
+export function PostEditor({ id, onNavigate }: PostEditorProps) {
+  const isNew = !id;
+  const { data, loading, error } = useApiData<any>(
+    isNew ? '' : `/collections/posts/${id}`
+  );
+
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [status, setStatus] = useState<'draft' | 'published'>('draft');
+  const [slug, setSlug] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [initialized, setInitialized] = useState(isNew);
+  const [seoData, setSeoData] = useState<SEOData>({});
+
+  useEffect(() => {
+    if (data && !initialized) {
+      setTitle(data.title ?? '');
+      setContent(data.content ?? data.data?.content ?? '');
+      setStatus(data.status === 'PUBLISHED' ? 'published' : 'draft');
+      setSlug(data.slug ?? '');
+      setInitialized(true);
+    }
+  }, [data, initialized]);
+
+  const savePost = async () => {
+    setSaving(true);
+    const body = JSON.stringify({
+      title,
+      content,
+      slug,
+      status: status === 'published' ? 'PUBLISHED' : 'DRAFT',
+    });
+
+    const res = isNew
+      ? await cmsApi('/collections/posts', { method: 'POST', body })
+      : await cmsApi(`/collections/posts/${id}`, { method: 'PUT', body });
+
+    setSaving(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Post saved successfully!');
+      if (isNew && (res.data as any)?.id) {
+        onNavigate?.(`/posts/${(res.data as any).id}`);
+      }
+    }
+  };
+
+  const publishPost = async () => {
+    setSaving(true);
+    const body = JSON.stringify({
+      title,
+      content,
+      slug,
+      status: 'PUBLISHED',
+    });
+
+    const endpoint = isNew ? '/collections/posts' : `/collections/posts/${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('Post published!');
+      if (isNew && (res.data as any)?.id) {
+        onNavigate?.(`/posts/${(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-3 sm:px-4 py-3">
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => onNavigate?.('/posts')}
+            className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            <span className="hidden sm:inline">Back to Posts</span>
+            <span className="sm:hidden">Back</span>
+          </button>
+          <div className="flex items-center gap-2">
+            <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" />
+              <span className="hidden sm:inline">Preview</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-hidden flex flex-col lg:flex-row">
+        <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="Post 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="mb-4">
+              <TipTapEditor content={content} onChange={setContent} />
+            </div>
+          </div>
+        </div>
+
+        <div className="hidden lg:block 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>
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Publish Date</label>
+                  <input
+                    type="datetime-local"
+                    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>
+                <button
+                  onClick={savePost}
+                  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 Post'}
+                </button>
+                {status === 'draft' && (
+                  <button
+                    onClick={publishPost}
+                    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>
+
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <h3 className="font-semibold text-gray-900 mb-3 text-sm">Categories & Tags</h3>
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Category</label>
+                  <select 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>Technology</option>
+                    <option>Design</option>
+                    <option>Business</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">Tags</label>
+                  <input
+                    type="text"
+                    placeholder="Add tags..."
+                    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>
+            </div>
+
+            <div className="bg-white rounded-lg border border-gray-200 p-4">
+              <h3 className="font-semibold text-gray-900 mb-3 text-sm">Featured Image</h3>
+              <button className="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg hover:border-gray-400 transition-colors text-sm text-gray-600">
+                Upload Image
+              </button>
+            </div>
+
+            <SEOPanel title={title} slug={slug} content={content} seoData={seoData} onChange={setSeoData} />
+          </div>
+        </div>
+
+        <div className="lg:hidden border-t border-gray-200 p-3 bg-white">
+          <div className="flex gap-2">
+            <button
+              onClick={savePost}
+              disabled={saving}
+              className="flex-1 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 Post'}
+            </button>
+            {status === 'draft' && (
+              <button
+                onClick={publishPost}
+                disabled={saving}
+                className="flex-1 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium disabled:opacity-50"
+              >
+                Publish
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/Posts.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { Plus, Search, Trash2, SlidersHorizontal, Pencil, ArrowUpDown, ArrowUp, ArrowDown, Loader2, AlertTriangle } from 'lucide-react';
+import { useState, useMemo } 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';
+
+type PostSortKey = 'title' | 'author' | 'category' | 'status' | 'date';
+
+export interface PostsProps {
+  onNavigate?: (path: string) => void;
+}
+
+export function Posts({ onNavigate }: PostsProps) {
+  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>('/collections/posts?pageSize=100');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [filterCategory, setFilterCategory] = useState<string>('all');
+  const [selectedPosts, setSelectedPosts] = useState<number[]>([]);
+  const [sortConfig, setSortConfig] = useState<SortConfig<PostSortKey> | null>(null);
+
+  const posts = data?.docs ?? [];
+
+  const filteredAndSorted = useMemo(() => {
+    let results = posts.filter((post: any) => {
+      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();
+      return matchesSearch && matchesStatus && matchesCategory;
+    });
+
+    if (searchQuery.trim()) {
+      results = sortByRelevance(results, searchQuery, (p: any) => [p.title, p.author ?? '', p.category ?? '']);
+    } 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;
+  }, [posts, searchQuery, filterStatus, filterCategory, sortConfig]);
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectedPosts(checked ? filteredAndSorted.map((p: any) => p.id) : []);
+  };
+
+  const handleSelectPost = (id: number) => {
+    setSelectedPosts(prev => prev.includes(id) ? prev.filter(pid => pid !== id) : [...prev, id]);
+  };
+
+  const handleBulkDelete = async () => {
+    for (const id of selectedPosts) {
+      await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' });
+    }
+    toast.success(`${selectedPosts.length} posts deleted`);
+    setSelectedPosts([]);
+    refetch();
+  };
+
+  const handleDelete = async (id: number) => {
+    await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' });
+    toast.success('Post deleted');
+    setSelectedPosts(prev => prev.filter(pid => pid !== id));
+    refetch();
+  };
+
+  function SortHeader({ label, sortKey }: { label: string; sortKey: PostSortKey }) {
+    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>
+          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Posts</h1>
+          <p className="text-sm text-gray-600">{filteredAndSorted.length} total posts</p>
+        </div>
+        <button
+          onClick={() => onNavigate?.('/posts/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 Post</span>
+          <span className="sm:hidden">New</span>
+        </button>
+      </div>
+
+      <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 posts..." 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={filterCategory} onChange={(e) => setFilterCategory(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 Categories</option>
+              <option value="technology">Technology</option>
+              <option value="design">Design</option>
+              <option value="business">Business</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>
+
+      {selectedPosts.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">{selectedPosts.length} post{selectedPosts.length !== 1 ? 's' : ''} selected</span>
+            <div className="flex items-center gap-2">
+              <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={() => setSelectedPosts([])} 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">No posts yet</p>
+          <button onClick={() => onNavigate?.('/posts/new')} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Create your first post</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={selectedPosts.length === filteredAndSorted.length && filteredAndSorted.length > 0} onChange={(e) => handleSelectAll(e.target.checked)} className="rounded border-gray-300" />
+                    </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="Category" sortKey="category" /></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((post: any) => (
+                    <tr key={post.id} className="hover:bg-gray-50 transition-colors">
+                      <td className="px-3 py-2">
+                        <input type="checkbox" checked={selectedPosts.includes(post.id)} onChange={() => handleSelectPost(post.id)} className="rounded border-gray-300" />
+                      </td>
+                      <td className="px-3 py-2">
+                        <button type="button" onClick={() => onNavigate?.(`/posts/${post.id}`)} className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left">{post.title}</button>
+                      </td>
+                      <td className="px-3 py-2 text-sm text-gray-600">{post.author}</td>
+                      <td className="px-3 py-2 text-sm text-gray-600">{post.category}</td>
+                      <td className="px-3 py-2">
+                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{post.status}</span>
+                      </td>
+                      <td className="px-3 py-2 text-sm text-gray-600">{post.date}</td>
+                      <td className="px-3 py-2">
+                        <div className="flex items-center gap-2">
+                          <button type="button" onClick={() => onNavigate?.(`/posts/${post.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(post.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((post: any) => (
+                <div key={post.id} className="p-3">
+                  <div className="flex items-start gap-3">
+                    <input type="checkbox" checked={selectedPosts.includes(post.id)} onChange={() => handleSelectPost(post.id)} className="rounded border-gray-300 mt-1" />
+                    <div className="flex-1 min-w-0">
+                      <button type="button" onClick={() => onNavigate?.(`/posts/${post.id}`)} className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left">{post.title}</button>
+                      <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
+                        <span>{post.author}</span>
+                        <span>•</span>
+                        <span>{post.date}</span>
+                        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{post.status}</span>
+                      </div>
+                    </div>
+                    <button type="button" onClick={() => handleDelete(post.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>
+  );
+}