@actuate-media/cms-admin 0.2.1 → 0.3.0

package/src/views/Pages.tsx

@@ -14,6 +14,63 @@ export interface PagesProps {
   onNavigate?: (path: string) => void;
 }
 
+const COLOR_PALETTE = [
+  { bg: 'bg-blue-100', text: 'text-blue-700' },
+  { bg: 'bg-green-100', text: 'text-green-700' },
+  { bg: 'bg-purple-100', text: 'text-purple-700' },
+  { bg: 'bg-orange-100', text: 'text-orange-700' },
+  { bg: 'bg-pink-100', text: 'text-pink-700' },
+  { bg: 'bg-teal-100', text: 'text-teal-700' },
+  { bg: 'bg-indigo-100', text: 'text-indigo-700' },
+  { bg: 'bg-rose-100', text: 'text-rose-700' },
+];
+
+function hashString(s: string): number {
+  let hash = 0;
+  for (let i = 0; i < s.length; i++) {
+    hash = ((hash << 5) - hash + s.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash);
+}
+
+const folderColorCache: Record<string, (typeof COLOR_PALETTE)[0]> = {};
+
+function getFolderColor(name: string) {
+  if (!folderColorCache[name]) {
+    folderColorCache[name] = COLOR_PALETTE[hashString(name) % COLOR_PALETTE.length]!;
+  }
+  return folderColorCache[name]!;
+}
+
+function computeSeoScore(data: Record<string, unknown> | null | undefined): number {
+  if (!data) return 0;
+  let score = 0;
+  if (data.metaTitle || data.seoTitle) score += 25;
+  if (data.metaDescription || data.seoDescription) score += 25;
+  if (data.canonical) score += 25;
+  if (data.schemaType) score += 25;
+  return score;
+}
+
+function SeoScoreBadge({ score }: { score: number }) {
+  const color = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-amber-500' : 'bg-red-500';
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={`w-2.5 h-2.5 rounded-full ${color}`} />
+      <span className="text-xs text-gray-600">{score}</span>
+    </div>
+  );
+}
+
+function FolderBadge({ name }: { name: string }) {
+  const colors = getFolderColor(name);
+  return (
+    <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${colors.bg} ${colors.text}`}>
+      {name}
+    </span>
+  );
+}
+
 function buildApiUrl(folderSel: FolderSelection): string {
   const base = '/collections/pages?pageSize=100';
   if (folderSel.type === 'smart') {
@@ -41,6 +98,7 @@ export function Pages({ onNavigate }: PagesProps) {
   const [sortConfig, setSortConfig] = useState<SortConfig<PageSortKey> | null>(null);
 
   const pages = data?.docs ?? [];
+  const totalCount = data?.total ?? pages.length;
 
   const filteredAndSorted = useMemo(() => {
     let results = pages.filter((page: any) => {
@@ -177,8 +235,8 @@ export function Pages({ onNavigate }: PagesProps) {
             <FolderInput className="w-5 h-5 text-gray-600" />
           </button>
           <div>
-            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Pages</h1>
-            <p className="text-sm text-gray-600">{filteredAndSorted.length} total pages</p>
+            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">Pages</h1>
+            <p className="text-sm text-gray-500">{totalCount} page{totalCount !== 1 ? 's' : ''}</p>
           </div>
         </div>
         <button
@@ -270,48 +328,58 @@ export function Pages({ onNavigate }: PagesProps) {
                         </th>
                         <th className="w-6 px-1 py-2"></th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Title" sortKey="title" /></th>
+                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">Folder</th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Author" sortKey="author" /></th>
-                        <th className="px-3 py-2 text-left"><SortHeader label="Template" sortKey="template" /></th>
+                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">SEO</th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Status" sortKey="status" /></th>
                         <th className="px-3 py-2 text-left"><SortHeader label="Date" sortKey="date" /></th>
                         <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
                       </tr>
                     </thead>
                     <tbody className="divide-y divide-gray-200">
-                      {filteredAndSorted.map((page: any) => (
-                        <tr
-                          key={page.id}
-                          className="hover:bg-gray-50 transition-colors"
-                          draggable
-                          onDragStart={(e) => handleDragStart(e, page.id)}
-                        >
-                          <td className="px-3 py-2">
-                            <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300" />
-                          </td>
-                          <td className="px-1 py-2 cursor-grab">
-                            <GripVertical className="w-4 h-4 text-gray-300" />
-                          </td>
-                          <td className="px-3 py-2">
-                            <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left">{page.title}</button>
-                          </td>
-                          <td className="px-3 py-2 text-sm text-gray-600">{page.author}</td>
-                          <td className="px-3 py-2 text-sm text-gray-600">{page.template}</td>
-                          <td className="px-3 py-2">
-                            <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
-                          </td>
-                          <td className="px-3 py-2 text-sm text-gray-600">{page.date}</td>
-                          <td className="px-3 py-2">
-                            <div className="flex items-center gap-2">
-                              <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit">
-                                <Pencil className="w-4 h-4 text-gray-600" />
-                              </button>
-                              <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Delete">
-                                <Trash2 className="w-4 h-4 text-red-600" />
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
-                      ))}
+                      {filteredAndSorted.map((page: any) => {
+                        const seoScore = computeSeoScore(page.data);
+                        const folderName = page.folder?.name ?? page.folderName;
+                        return (
+                          <tr
+                            key={page.id}
+                            className="hover:bg-gray-50 transition-colors"
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, page.id)}
+                          >
+                            <td className="px-3 py-2">
+                              <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300" />
+                            </td>
+                            <td className="px-1 py-2 cursor-grab">
+                              <GripVertical className="w-4 h-4 text-gray-300" />
+                            </td>
+                            <td className="px-3 py-2">
+                              <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left">{page.title}</button>
+                            </td>
+                            <td className="px-3 py-2">
+                              {folderName ? <FolderBadge name={folderName} /> : <span className="text-xs text-gray-400">—</span>}
+                            </td>
+                            <td className="px-3 py-2 text-sm text-gray-600">{page.author}</td>
+                            <td className="px-3 py-2">
+                              <SeoScoreBadge score={seoScore} />
+                            </td>
+                            <td className="px-3 py-2">
+                              <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
+                            </td>
+                            <td className="px-3 py-2 text-sm text-gray-600">{page.date}</td>
+                            <td className="px-3 py-2">
+                              <div className="flex items-center gap-2">
+                                <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit">
+                                  <Pencil className="w-4 h-4 text-gray-600" />
+                                </button>
+                                <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Delete">
+                                  <Trash2 className="w-4 h-4 text-red-600" />
+                                </button>
+                              </div>
+                            </td>
+                          </tr>
+                        );
+                      })}
                     </tbody>
                   </table>
                 </div>
@@ -319,30 +387,36 @@ export function Pages({ onNavigate }: PagesProps) {
 
               <div className="md:hidden bg-white rounded-lg border border-gray-200 flex-1 overflow-auto">
                 <div className="divide-y divide-gray-200">
-                  {filteredAndSorted.map((page: any) => (
-                    <div
-                      key={page.id}
-                      className="p-3"
-                      draggable
-                      onDragStart={(e) => handleDragStart(e, page.id)}
-                    >
-                      <div className="flex items-start gap-3">
-                        <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300 mt-1" />
-                        <div className="flex-1 min-w-0">
-                          <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left">{page.title}</button>
-                          <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
-                            <span>{page.author}</span>
-                            <span>•</span>
-                            <span>{page.date}</span>
-                            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
+                  {filteredAndSorted.map((page: any) => {
+                    const seoScore = computeSeoScore(page.data);
+                    const folderName = page.folder?.name ?? page.folderName;
+                    return (
+                      <div
+                        key={page.id}
+                        className="p-3"
+                        draggable
+                        onDragStart={(e) => handleDragStart(e, page.id)}
+                      >
+                        <div className="flex items-start gap-3">
+                          <input type="checkbox" checked={selectedPages.includes(page.id)} onChange={() => handleSelectPage(page.id)} className="rounded border-gray-300 mt-1" />
+                          <div className="flex-1 min-w-0">
+                            <button type="button" onClick={() => onNavigate?.(`/pages/${page.id}`)} className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left">{page.title}</button>
+                            <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
+                              {folderName && <FolderBadge name={folderName} />}
+                              <span>{page.author}</span>
+                              <span>&middot;</span>
+                              <span>{page.date}</span>
+                              <SeoScoreBadge score={seoScore} />
+                              <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{page.status}</span>
+                            </div>
                           </div>
+                          <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors">
+                            <Trash2 className="w-4 h-4 text-red-600" />
+                          </button>
                         </div>
-                        <button type="button" onClick={() => handleDelete(page.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors">
-                          <Trash2 className="w-4 h-4 text-red-600" />
-                        </button>
                       </div>
-                    </div>
-                  ))}
+                    );
+                  })}
                 </div>
               </div>
             </>