@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/CollectionList.tsx

@@ -1,139 +1,177 @@
-'use client';
+'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';
+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;
+  collectionSlug: string
+  config: any
+  onNavigate: (path: string) => void
 }
 
-type SortField = 'title' | 'status' | 'updatedAt';
-type SortOrder = 'asc' | 'desc';
+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 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;
+    : 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)';
+    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)';
+    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' });
+  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 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);
+  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);
+    clearTimeout(searchTimer.current)
     searchTimer.current = setTimeout(() => {
-      setDebouncedSearch(search);
-      setPage(1);
-    }, 300);
-    return () => clearTimeout(searchTimer.current);
-  }, [search]);
+      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]);
+    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));
+  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]);
+  useEffect(() => {
+    setPage(1)
+    setSelected(new Set())
+    setSearch('')
+  }, [collectionSlug])
 
   const toggleSort = useCallback((field: SortField) => {
-    setSort(prev => {
+    setSort((prev) => {
       if (prev === field) {
-        setOrder(o => o === 'asc' ? 'desc' : 'asc');
-        return field;
+        setOrder((o) => (o === 'asc' ? 'desc' : 'asc'))
+        return field
       }
-      setOrder('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; });
+    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());
+    setSelected(checked ? new Set(docs.map((d: any) => String(d.id))) : new Set())
 
   const bulkAction = async (action: 'delete' | 'publish' | 'unpublish') => {
-    const ids = [...selected];
+    const ids = [...selected]
     for (const id of ids) {
       if (action === 'delete') {
-        await cmsApi(`/collections/${collectionSlug}/${id}`, { method: '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 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)}
+    <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)' }}>
+      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)' }} />
+        <Loader2
+          className="w-6 h-6 animate-spin"
+          style={{ color: 'var(--actuate-primary, #2563eb)' }}
+        />
       </div>
-    );
+    )
   }
 
   return (
@@ -141,103 +179,208 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
       {/* 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)' }}>
+          <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>
+          <p className="text-sm" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>
+            {total} total
+          </p>
         </div>
-        <button onClick={() => onNavigate(`/${collectionSlug}/new`)}
+        <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)' }}>
+          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)}
+        <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)' }} />
+          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' }}>
+        <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
+              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
+          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)' }}>
+        <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)' }}>
+          <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)' }}>
+        <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)' }}>
+            <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" />
+                  <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>
-                <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)' }}>
+                <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" />
+                    <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)' }}>
+                    <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) }}>
+                    <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)' }}>
+                  <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
+                      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>
@@ -249,22 +392,33 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
 
       {/* 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 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)}
+            <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)' }}>
+              style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}
+            >
               <ChevronLeft className="w-4 h-4" /> Previous
             </button>
-            <button disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}
+            <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)' }}>
+              style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}
+            >
               Next <ChevronRight className="w-4 h-4" />
             </button>
           </div>
         </div>
       )}
     </div>
-  );
+  )
 }