@actuate-media/cms-admin 0.18.0 → 0.20.0

package/src/views/PostEditor.tsx

@@ -1,257 +0,0 @@
-'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="flex h-full items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex h-full 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="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{error}</span>
-        </div>
-      )}
-
-      <div className="border-b border-gray-200 px-3 py-3 sm:px-4">
-        <div className="flex items-center justify-between">
-          <button
-            onClick={() => onNavigate?.('/posts')}
-            className="inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900"
-          >
-            <ArrowLeft className="h-4 w-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="flex items-center gap-2 rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50">
-              <Eye className="h-4 w-4" />
-              <span className="hidden sm:inline">Preview</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex flex-1 flex-col overflow-hidden lg:flex-row">
-        <div className="flex-1 overflow-y-auto">
-          <div className="mx-auto max-w-4xl 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="mb-4 w-full border-none px-0 text-2xl font-bold placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
-            />
-
-            <div className="mb-4">
-              <label className="mb-1 block text-xs font-medium text-gray-600">URL Slug</label>
-              <input
-                type="text"
-                value={slug}
-                onChange={(e) => setSlug(e.target.value)}
-                placeholder="url-slug"
-                className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-              />
-            </div>
-
-            <div className="mb-4">
-              <TipTapEditor content={content} onChange={setContent} />
-            </div>
-          </div>
-        </div>
-
-        <div className="hidden w-[30%] overflow-y-auto border-l border-gray-200 bg-gray-50 lg:block">
-          <div className="space-y-4 p-4">
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-3 text-sm font-semibold text-gray-900">Publish</h3>
-              <div className="space-y-3">
-                <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">Status</label>
-                  <select
-                    value={status}
-                    onChange={(e) => setStatus(e.target.value as 'draft' | 'published')}
-                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                  >
-                    <option value="draft">Draft</option>
-                    <option value="published">Published</option>
-                  </select>
-                </div>
-                <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">
-                    Publish Date
-                  </label>
-                  <input
-                    type="datetime-local"
-                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-                <button
-                  onClick={savePost}
-                  disabled={saving}
-                  className="w-full rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
-                >
-                  {saving ? 'Saving...' : 'Save Post'}
-                </button>
-                {status === 'draft' && (
-                  <button
-                    onClick={publishPost}
-                    disabled={saving}
-                    className="w-full rounded-lg bg-green-600 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
-                  >
-                    {saving ? 'Publishing...' : 'Publish'}
-                  </button>
-                )}
-              </div>
-            </div>
-
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-3 text-sm font-semibold text-gray-900">Categories & Tags</h3>
-              <div className="space-y-3">
-                <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">Category</label>
-                  <select className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
-                    <option>Technology</option>
-                    <option>Design</option>
-                    <option>Business</option>
-                  </select>
-                </div>
-                <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">Tags</label>
-                  <input
-                    type="text"
-                    placeholder="Add tags..."
-                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-3 text-sm font-semibold text-gray-900">Featured Image</h3>
-              <button className="w-full rounded-lg border-2 border-dashed border-gray-300 py-2 text-sm text-gray-600 transition-colors hover:border-gray-400">
-                Upload Image
-              </button>
-            </div>
-
-            <SEOPanel
-              title={title}
-              slug={slug}
-              content={content}
-              seoData={seoData}
-              onChange={setSeoData}
-            />
-          </div>
-        </div>
-
-        <div className="border-t border-gray-200 bg-white p-3 lg:hidden">
-          <div className="flex gap-2">
-            <button
-              onClick={savePost}
-              disabled={saving}
-              className="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
-            >
-              {saving ? 'Saving...' : 'Save Post'}
-            </button>
-            {status === 'draft' && (
-              <button
-                onClick={publishPost}
-                disabled={saving}
-                className="flex-1 rounded-lg bg-green-600 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
-              >
-                Publish
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/Posts.tsx

@@ -1,375 +0,0 @@
-'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 transition-colors hover:text-gray-900"
-      >
-        {label}
-        {active ? (
-          sortConfig!.direction === 'asc' ? (
-            <ArrowUp className="h-3 w-3" />
-          ) : (
-            <ArrowDown className="h-3 w-3" />
-          )
-        ) : (
-          <ArrowUpDown className="h-3 w-3 text-gray-400" />
-        )}
-      </button>
-    )
-  }
-
-  if (loading) {
-    return (
-      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
-      {error && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{error}</span>
-          <button
-            onClick={refetch}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-          >
-            Retry
-          </button>
-        </div>
-      )}
-
-      <div className="mb-4 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
-        <div>
-          <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">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 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-        >
-          <Plus className="h-4 w-4" />
-          <span className="hidden sm:inline">New Post</span>
-          <span className="sm:hidden">New</span>
-        </button>
-      </div>
-
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
-        <div className="flex flex-col gap-3 p-3">
-          <div className="relative">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search posts..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
-          <div className="flex flex-col gap-2 sm:flex-row">
-            <select
-              value={filterStatus}
-              onChange={(e) => setFilterStatus(e.target.value)}
-              className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            >
-              <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 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            >
-              <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 rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors hover:bg-gray-50"
-            >
-              <SlidersHorizontal className="h-4 w-4" />
-              <span className="hidden sm:inline">More Filters</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {selectedPosts.length > 0 && (
-        <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
-          <div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
-            <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 rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-700 sm:flex-none"
-              >
-                Delete
-              </button>
-              <button
-                type="button"
-                onClick={() => setSelectedPosts([])}
-                className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors hover:bg-gray-50 sm:flex-none"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {filteredAndSorted.length === 0 && !error ? (
-        <div className="flex flex-1 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-8 text-center">
-          <p className="mb-2 text-sm text-gray-500">No posts yet</p>
-          <button
-            onClick={() => onNavigate?.('/posts/new')}
-            className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-          >
-            Create your first post
-          </button>
-        </div>
-      ) : (
-        <>
-          <div className="hidden flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white md:block">
-            <div className="h-full overflow-x-auto">
-              <table className="w-full">
-                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
-                  <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="transition-colors hover:bg-gray-50">
-                      <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="text-left text-sm font-medium text-gray-900 hover:text-blue-600"
-                        >
-                          {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 rounded-full px-2 py-0.5 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="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="Edit"
-                          >
-                            <Pencil className="h-4 w-4 text-gray-600" />
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => handleDelete(post.id)}
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                            title="Delete"
-                          >
-                            <Trash2 className="h-4 w-4 text-red-600" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-auto rounded-lg border border-gray-200 bg-white md:hidden">
-            <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="mt-1 rounded border-gray-300"
-                    />
-                    <div className="min-w-0 flex-1">
-                      <button
-                        type="button"
-                        onClick={() => onNavigate?.(`/posts/${post.id}`)}
-                        className="mb-1 block text-left text-sm font-medium text-gray-900 hover:text-blue-600"
-                      >
-                        {post.title}
-                      </button>
-                      <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-gray-600">
-                        <span>{post.author}</span>
-                        <span>•</span>
-                        <span>{post.date}</span>
-                        <span
-                          className={`rounded-full px-2 py-0.5 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="rounded p-1.5 transition-colors hover:bg-gray-100"
-                    >
-                      <Trash2 className="h-4 w-4 text-red-600" />
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}