@actuate-media/cms-admin 0.1.3 → 0.2.0

package/src/views/CollectionList.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import { Search, Plus, Trash2, ChevronLeft, ChevronRight, Loader2, FileText, MoreHorizontal } from 'lucide-react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+import { cmsApi } from '../lib/api.js';
+import { useApiData } from '../lib/useApiData.js';
+
+export interface CollectionListProps {
+  collectionSlug: string;
+  config: any;
+  onNavigate: (path: string) => void;
+}
+
+type SortField = 'title' | 'status' | 'updatedAt';
+type SortOrder = 'asc' | 'desc';
+
+function resolveLabel(config: any, slug: string): { singular: string; plural: string } {
+  const fallback = { singular: slug, plural: slug };
+  if (!config?.collections) return fallback;
+  const list = Array.isArray(config.collections)
+    ? config.collections
+    : Object.values(config.collections);
+  const match = (list as any[]).find((c: any) => c.slug === slug);
+  return match?.labels ?? fallback;
+}
+
+function statusColor(status: string): string {
+  switch (status?.toUpperCase()) {
+    case 'PUBLISHED': return 'var(--actuate-success-bg, #dcfce7)';
+    case 'DRAFT': return 'var(--actuate-muted-bg, #f3f4f6)';
+    case 'ARCHIVED': return 'var(--actuate-warning-bg, #fef9c3)';
+    case 'SCHEDULED': return 'var(--actuate-info-bg, #dbeafe)';
+    default: return 'var(--actuate-muted-bg, #f3f4f6)';
+  }
+}
+
+function statusText(status: string): string {
+  switch (status?.toUpperCase()) {
+    case 'PUBLISHED': return 'var(--actuate-success-text, #166534)';
+    case 'DRAFT': return 'var(--actuate-muted-text, #374151)';
+    case 'ARCHIVED': return 'var(--actuate-warning-text, #854d0e)';
+    case 'SCHEDULED': return 'var(--actuate-info-text, #1e40af)';
+    default: return 'var(--actuate-muted-text, #374151)';
+  }
+}
+
+function formatDate(d: string | undefined): string {
+  if (!d) return '—';
+  return new Date(d).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export function CollectionList({ collectionSlug, config, onNavigate }: CollectionListProps) {
+  const labels = useMemo(() => resolveLabel(config, collectionSlug), [config, collectionSlug]);
+
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [sort, setSort] = useState<SortField | null>(null);
+  const [order, setOrder] = useState<SortOrder>('asc');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    clearTimeout(searchTimer.current);
+    searchTimer.current = setTimeout(() => {
+      setDebouncedSearch(search);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(searchTimer.current);
+  }, [search]);
+
+  const endpoint = useMemo(() => {
+    let url = `/collections/${collectionSlug}?page=${page}&pageSize=25`;
+    if (debouncedSearch) url += `&search=${encodeURIComponent(debouncedSearch)}`;
+    if (sort) url += `&sort=${sort}&order=${order}`;
+    return url;
+  }, [collectionSlug, page, debouncedSearch, sort, order]);
+
+  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(endpoint);
+  const docs = data?.docs ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / 25));
+
+  useEffect(() => { setPage(1); setSelected(new Set()); setSearch(''); }, [collectionSlug]);
+
+  const toggleSort = useCallback((field: SortField) => {
+    setSort(prev => {
+      if (prev === field) {
+        setOrder(o => o === 'asc' ? 'desc' : 'asc');
+        return field;
+      }
+      setOrder('asc');
+      return field;
+    });
+  }, []);
+
+  const toggleSelect = (id: string) =>
+    setSelected(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
+
+  const toggleAll = (checked: boolean) =>
+    setSelected(checked ? new Set(docs.map((d: any) => String(d.id))) : new Set());
+
+  const bulkAction = async (action: 'delete' | 'publish' | 'unpublish') => {
+    const ids = [...selected];
+    for (const id of ids) {
+      if (action === 'delete') {
+        await cmsApi(`/collections/${collectionSlug}/${id}`, { method: 'DELETE' });
+      } else {
+        await cmsApi(`/collections/${collectionSlug}/${id}`, {
+          method: 'PUT',
+          body: JSON.stringify({ status: action === 'publish' ? 'PUBLISHED' : 'DRAFT' }),
+        });
+      }
+    }
+    const verb = action === 'delete' ? 'deleted' : action === 'publish' ? 'published' : 'unpublished';
+    toast.success(`${ids.length} ${ids.length === 1 ? labels.singular : labels.plural} ${verb}`);
+    setSelected(new Set());
+    refetch();
+  };
+
+  const SortCol = ({ field, children }: { field: SortField; children: string }) => (
+    <button type="button" onClick={() => toggleSort(field)}
+      className="flex items-center gap-1 text-xs font-medium hover:opacity-80 transition-opacity"
+      style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>
+      {children}
+      {sort === field && <span>{order === 'asc' ? '↑' : '↓'}</span>}
+    </button>
+  );
+
+  if (loading && docs.length === 0) {
+    return (
+      <div className="p-4 flex items-center justify-center h-64">
+        <Loader2 className="w-6 h-6 animate-spin" style={{ color: 'var(--actuate-primary, #2563eb)' }} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4 gap-3 flex-wrap">
+        <div>
+          <h1 className="text-xl sm:text-2xl font-semibold" style={{ color: 'var(--actuate-text, #111827)' }}>
+            {labels.plural}
+          </h1>
+          <p className="text-sm" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>{total} total</p>
+        </div>
+        <button onClick={() => onNavigate(`/${collectionSlug}/new`)}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors"
+          style={{ background: 'var(--actuate-primary, #2563eb)' }}>
+          <Plus className="w-4 h-4" /> New {labels.singular}
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="relative mb-4">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: 'var(--actuate-text-muted, #9ca3af)' }} />
+        <input type="text" placeholder={`Search ${labels.plural.toLowerCase()}...`} value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border focus:outline-none focus:ring-2"
+          style={{ borderColor: 'var(--actuate-border, #d1d5db)', color: 'var(--actuate-text, #111827)' }} />
+      </div>
+
+      {/* Bulk actions */}
+      {selected.size > 0 && (
+        <div className="rounded-lg p-3 mb-4 flex flex-wrap items-center justify-between gap-2"
+          style={{ background: 'var(--actuate-info-bg, #eff6ff)', borderColor: 'var(--actuate-info-border, #bfdbfe)', borderWidth: 1, borderStyle: 'solid' }}>
+          <span className="text-sm" style={{ color: 'var(--actuate-info-text, #1e40af)' }}>
+            {selected.size} selected
+          </span>
+          <div className="flex gap-2">
+            <button onClick={() => bulkAction('publish')} className="px-3 py-1.5 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-success, #16a34a)' }}>Publish</button>
+            <button onClick={() => bulkAction('unpublish')} className="px-3 py-1.5 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-warning, #ca8a04)' }}>Unpublish</button>
+            <button onClick={() => bulkAction('delete')} className="px-3 py-1.5 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-danger, #dc2626)' }}>
+              <Trash2 className="w-3.5 h-3.5 inline -mt-0.5 mr-1" />Delete
+            </button>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-lg p-3 mb-4 text-sm" style={{ background: 'var(--actuate-danger-bg, #fef2f2)', color: 'var(--actuate-danger-text, #991b1b)' }}>
+          {error} — <button onClick={refetch} className="underline">retry</button>
+        </div>
+      )}
+
+      {/* Table */}
+      {docs.length === 0 && !loading ? (
+        <div className="flex-1 flex flex-col items-center justify-center rounded-lg border p-8"
+          style={{ borderColor: 'var(--actuate-border, #d1d5db)', color: 'var(--actuate-text-secondary, #6b7280)' }}>
+          <FileText className="w-10 h-10 mb-3 opacity-40" />
+          <p className="text-sm mb-3">No {labels.plural.toLowerCase()} found</p>
+          <button onClick={() => onNavigate(`/${collectionSlug}/new`)}
+            className="px-4 py-2 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-primary, #2563eb)' }}>
+            Create {labels.singular}
+          </button>
+        </div>
+      ) : (
+        <div className="flex-1 rounded-lg border overflow-auto" style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}>
+          <table className="w-full text-sm">
+            <thead className="sticky top-0" style={{ background: 'var(--actuate-surface-alt, #f9fafb)', borderBottom: '1px solid var(--actuate-border, #d1d5db)' }}>
+              <tr>
+                <th className="w-10 px-3 py-2 text-left">
+                  <input type="checkbox" checked={selected.size === docs.length && docs.length > 0}
+                    onChange={e => toggleAll(e.target.checked)} className="rounded" />
+                </th>
+                <th className="px-3 py-2 text-left"><SortCol field="title">Title</SortCol></th>
+                <th className="px-3 py-2 text-left"><SortCol field="status">Status</SortCol></th>
+                <th className="px-3 py-2 text-left"><SortCol field="updatedAt">Updated</SortCol></th>
+                <th className="px-3 py-2 text-left text-xs font-medium" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {docs.map((doc: any) => (
+                <tr key={doc.id} className="transition-colors hover:opacity-95"
+                  style={{ borderBottom: '1px solid var(--actuate-border, #e5e7eb)' }}>
+                  <td className="px-3 py-2">
+                    <input type="checkbox" checked={selected.has(String(doc.id))}
+                      onChange={() => toggleSelect(String(doc.id))} className="rounded" />
+                  </td>
+                  <td className="px-3 py-2">
+                    <button type="button" onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
+                      className="font-medium text-left hover:underline" style={{ color: 'var(--actuate-text, #111827)' }}>
+                      {doc.title || doc.name || `#${doc.id}`}
+                    </button>
+                  </td>
+                  <td className="px-3 py-2">
+                    <span className="inline-block px-2 py-0.5 rounded-full text-xs font-medium"
+                      style={{ background: statusColor(doc.status), color: statusText(doc.status) }}>
+                      {doc.status ?? 'DRAFT'}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>
+                    {formatDate(doc.updatedAt)}
+                  </td>
+                  <td className="px-3 py-2">
+                    <button type="button" onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
+                      className="p-1.5 rounded hover:opacity-75 transition-opacity" title="Edit">
+                      <MoreHorizontal className="w-4 h-4" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }} />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between mt-4 text-sm" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>
+          <span>Page {page} of {totalPages}</span>
+          <div className="flex gap-2">
+            <button disabled={page <= 1} onClick={() => setPage(p => p - 1)}
+              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border disabled:opacity-40 transition-opacity"
+              style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}>
+              <ChevronLeft className="w-4 h-4" /> Previous
+            </button>
+            <button disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}
+              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border disabled:opacity-40 transition-opacity"
+              style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}>
+              Next <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/views/Dashboard.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { FileText, Layout, Image, Users, User, Calendar, Loader2, AlertTriangle, Database } from 'lucide-react';
+import { useApiData } from '../lib/useApiData.js';
+
+interface DashboardStats {
+  totalDocuments: number;
+  totalMedia: number;
+  totalUsers: number;
+  recentDocuments: { id: number; title: string; status: string; date: string; author: string }[];
+}
+
+interface HealthData {
+  status: 'healthy' | 'degraded';
+  version: string;
+  secretConfigured: boolean;
+  models: Record<string, boolean>;
+  databaseConnected: boolean;
+}
+
+export interface DashboardProps {
+  onNavigate?: (path: string) => void;
+}
+
+export function Dashboard({ onNavigate }: DashboardProps) {
+  const nav = (path: string) => onNavigate?.(path);
+  const { data, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats');
+  const { data: health } = useApiData<HealthData>('/health');
+
+  const totalPosts = data?.totalDocuments ?? 0;
+  const totalMedia = data?.totalMedia ?? 0;
+  const totalUsers = data?.totalUsers ?? 0;
+  const recentPosts = data?.recentDocuments ?? [];
+
+  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">
+      {health && health.status === 'degraded' && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+          <Database className="w-5 h-5 text-blue-600 shrink-0" />
+          <div className="flex-1">
+            <span className="text-sm font-medium text-blue-900">Database Setup Required</span>
+            <p className="text-xs text-blue-700 mt-0.5">
+              {!health.databaseConnected
+                ? 'Cannot connect to the database. Check your DATABASE_URL environment variable.'
+                : !health.secretConfigured
+                  ? 'CMS secret not configured. Set CMS_SECRET or CMS_SESSION_SECRET (min 32 characters).'
+                  : `Some CMS models are missing: ${Object.entries(health.models).filter(([, v]) => !v).map(([k]) => k).join(', ')}. Run your database migrations to create the required tables.`
+              }
+            </p>
+          </div>
+        </div>
+      )}
+
+      {error && exhausted && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3">
+          <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0" />
+          <span className="text-sm text-amber-800 flex-1">Some dashboard data may be unavailable. This is normal if your database hasn&apos;t been set up yet.</span>
+          <button onClick={refetch} className="px-3 py-1 text-sm text-amber-700 border border-amber-300 rounded-lg hover:bg-amber-100 transition-colors">Retry</button>
+        </div>
+      )}
+
+      <div className="mb-4 sm:mb-6">
+        <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Dashboard</h1>
+        <p className="text-sm text-gray-600">Welcome back! Here's what's happening.</p>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
+        <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-gray-600 mb-1">Total Posts</p>
+              <p className="text-xl sm:text-2xl font-semibold text-gray-900">{totalPosts}</p>
+              <p className="text-xs text-gray-400 mt-1">—</p>
+            </div>
+            <div className="w-8 h-8 sm:w-10 sm:h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+              <FileText className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-gray-600 mb-1">Total Pages</p>
+              <p className="text-xl sm:text-2xl font-semibold text-gray-900">0</p>
+              <p className="text-xs text-gray-400 mt-1">—</p>
+            </div>
+            <div className="w-8 h-8 sm:w-10 sm:h-10 bg-purple-100 rounded-lg flex items-center justify-center">
+              <Layout className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-gray-600 mb-1">Media Files</p>
+              <p className="text-xl sm:text-2xl font-semibold text-gray-900">{totalMedia.toLocaleString()}</p>
+              <p className="text-xs text-gray-400 mt-1">—</p>
+            </div>
+            <div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-100 rounded-lg flex items-center justify-center">
+              <Image className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-gray-600 mb-1">Total Users</p>
+              <p className="text-xl sm:text-2xl font-semibold text-gray-900">{totalUsers}</p>
+              <p className="text-xs text-gray-400 mt-1">—</p>
+            </div>
+            <div className="w-8 h-8 sm:w-10 sm:h-10 bg-amber-100 rounded-lg flex items-center justify-center">
+              <Users className="w-4 h-4 sm:w-5 sm:h-5 text-amber-600" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-3 sm:gap-4">
+        <div className="lg:col-span-8 bg-white rounded-lg border border-gray-200">
+          <div className="p-3 sm:p-4 border-b border-gray-200">
+            <h2 className="text-sm sm:text-base font-semibold text-gray-900">Recent Posts</h2>
+          </div>
+          <div className="divide-y divide-gray-200">
+            {recentPosts.length === 0 ? (
+              <div className="p-8 text-center">
+                <p className="text-sm text-gray-500 mb-2">No posts yet</p>
+                <button onClick={() => nav('/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>
+            ) : recentPosts.map((post) => (
+              <div key={post.id} className="p-3 sm:p-4 hover:bg-gray-50 transition-colors">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-sm font-medium text-gray-900 mb-1 truncate">{post.title}</h3>
+                    <div className="flex flex-wrap items-center gap-2 sm:gap-3 text-xs text-gray-600">
+                      <span className="flex items-center gap-1">
+                        <User className="w-3 h-3" />
+                        <span className="hidden sm:inline">{post.author}</span>
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="w-3 h-3" />
+                        {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
+                    onClick={() => nav(`/posts/${post.id}`)}
+                    className="text-xs sm:text-sm text-blue-600 hover:text-blue-700 whitespace-nowrap"
+                  >
+                    Edit
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="lg:col-span-4 bg-white rounded-lg border border-gray-200">
+          <div className="p-3 sm:p-4 border-b border-gray-200">
+            <h2 className="text-sm sm:text-base font-semibold text-gray-900">Quick Actions</h2>
+          </div>
+          <div className="p-3 sm:p-4 space-y-2">
+            <button onClick={() => nav('/posts/new')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
+              <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-200 transition-colors">
+                <FileText className="w-4 h-4 text-blue-600" />
+              </div>
+              <span className="text-sm font-medium text-gray-900">New Post</span>
+            </button>
+            <button onClick={() => nav('/pages/new')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
+              <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-200 transition-colors">
+                <Layout className="w-4 h-4 text-purple-600" />
+              </div>
+              <span className="text-sm font-medium text-gray-900">New Page</span>
+            </button>
+            <button onClick={() => nav('/media')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
+              <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200 transition-colors">
+                <Image className="w-4 h-4 text-green-600" />
+              </div>
+              <span className="text-sm font-medium text-gray-900">Upload Media</span>
+            </button>
+            <button onClick={() => nav('/users')} className="flex items-center gap-3 p-2.5 sm:p-3 rounded-lg hover:bg-gray-50 transition-colors group w-full text-left">
+              <div className="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center group-hover:bg-amber-200 transition-colors">
+                <Users className="w-4 h-4 text-amber-600" />
+              </div>
+              <span className="text-sm font-medium text-gray-900">Manage Users</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}