@actuate-media/cms-admin 0.2.1 → 0.4.0

package/src/components/SEOPerformance.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { Search, AlertTriangle, FileWarning, ImageOff, LinkIcon, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+import { useApiData } from '../lib/useApiData.js';
+
+interface SEOSummary {
+  totalPages: number;
+  issuesSummary: {
+    missingMetaDescriptions: number;
+    brokenInternalLinks: number;
+    missingAltText: number;
+  };
+  topContent: { id: string; title: string; collection: string; score: number }[];
+}
+
+function ScoreBadge({ score }: { score: number }) {
+  const color = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-amber-500' : 'text-red-500';
+  const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50';
+  return (
+    <span className={`inline-flex items-center justify-center w-9 h-9 rounded-full text-sm font-semibold ${color} ${bg}`}>
+      {score}
+    </span>
+  );
+}
+
+export interface SEOPerformanceProps {
+  onNavigate?: (path: string) => void;
+}
+
+export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
+  const { data, loading, error } = useApiData<SEOSummary>('/seo/summary');
+  const [page, setPage] = useState(0);
+  const perPage = 5;
+
+  if (loading || error || !data) return null;
+
+  const issues = data.issuesSummary;
+  const totalIssues = issues.missingMetaDescriptions + issues.brokenInternalLinks + issues.missingAltText;
+  const topContent = data.topContent ?? [];
+  const totalPages = Math.max(1, Math.ceil(topContent.length / perPage));
+  const visible = topContent.slice(page * perPage, (page + 1) * perPage);
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200">
+      <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Search className="w-4 h-4 text-gray-500" />
+          <h2 className="text-sm font-semibold text-gray-900">SEO Performance</h2>
+        </div>
+        {totalIssues > 0 && (
+          <span className="text-xs text-gray-500">{totalIssues} issue{totalIssues !== 1 ? 's' : ''} found</span>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+        <div className="lg:col-span-7 p-4">
+          <h3 className="text-sm font-medium text-gray-700 mb-3">Top Performing Content</h3>
+          <div className="space-y-2">
+            {visible.map((item) => (
+              <div key={item.id} className="flex items-center justify-between py-2">
+                <div className="flex-1 min-w-0 mr-3">
+                  <p className="text-sm font-medium text-gray-900 truncate">{item.title}</p>
+                  <p className="text-xs text-gray-500 capitalize">{item.collection}</p>
+                </div>
+                <ScoreBadge score={item.score} />
+              </div>
+            ))}
+            {visible.length === 0 && (
+              <p className="text-sm text-gray-400 py-4 text-center">No published content yet</p>
+            )}
+          </div>
+          {topContent.length > perPage && (
+            <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
+              <span>Showing {page * perPage + 1}-{Math.min((page + 1) * perPage, topContent.length)} of {topContent.length}</span>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => setPage(Math.max(0, page - 1))}
+                  disabled={page === 0}
+                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                >
+                  <ChevronLeft className="w-3.5 h-3.5" />
+                </button>
+                <span>Page {page + 1} of {totalPages}</span>
+                <button
+                  onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
+                  disabled={page >= totalPages - 1}
+                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                >
+                  <ChevronRight className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="lg:col-span-5 p-4">
+          <h3 className="text-sm font-medium text-gray-700 mb-3">SEO Issues</h3>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <FileWarning className="w-4 h-4 text-red-400" />
+                <span className="text-sm text-gray-700">Missing meta descriptions</span>
+              </div>
+              <span className="text-sm font-semibold text-gray-900">{issues.missingMetaDescriptions}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <LinkIcon className="w-4 h-4 text-red-400" />
+                <span className="text-sm text-gray-700">Broken internal links</span>
+              </div>
+              <span className="text-sm font-semibold text-gray-900">{issues.brokenInternalLinks}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <ImageOff className="w-4 h-4 text-red-400" />
+                <span className="text-sm text-gray-700">Missing alt text</span>
+              </div>
+              <span className="text-sm font-semibold text-gray-900">{issues.missingAltText}</span>
+            </div>
+          </div>
+          {totalIssues > 0 && (
+            <button
+              onClick={() => onNavigate?.('/seo')}
+              className="mt-4 text-sm text-blue-600 hover:text-blue-700 font-medium"
+            >
+              View All Issues
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/layout/Sidebar.tsx

@@ -16,6 +16,9 @@ import {
   BookOpen,
   HelpCircle,
   Newspaper,
+  PanelTop,
+  PanelBottom,
+  Layers,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
@@ -53,6 +56,9 @@ const ICON_MAP: Record<string, LucideIcon> = {
   book: BookOpen,
   help: HelpCircle,
   newspaper: Newspaper,
+  PanelTop: PanelTop,
+  PanelBottom: PanelBottom,
+  Layers: Layers,
 };
 
 function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean }) {
@@ -143,28 +149,44 @@ export function Sidebar({ collapsed, onToggleCollapse, currentPath, onNavigate,
       </div>
 
       <nav className="p-3 space-y-1">
-        {navItems.map((item) => {
+        {navItems.map((item, idx) => {
           const Icon = item.icon;
           const isActive =
             currentPath === item.path ||
             (item.path !== '/' && currentPath.startsWith(item.path));
 
+          const prevGroup = idx > 0 ? navItems[idx - 1]?.group : undefined;
+          const showGroupLabel = item.group && item.group !== prevGroup;
+
           return (
-            <button
-              key={item.path}
-              onClick={() => onNavigate(item.path)}
-              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors w-full text-left ${
-                isActive
-                  ? 'bg-sidebar-accent text-sidebar-primary'
-                  : 'text-sidebar-foreground hover:bg-sidebar-accent'
-              } ${collapsed ? 'justify-center' : ''}`}
-              title={collapsed ? item.label : ''}
-            >
-              <Icon className="w-5 h-5 shrink-0" />
-              {!collapsed && (
-                <span className="text-sm font-medium">{item.label}</span>
+            <div key={item.path}>
+              {showGroupLabel && !collapsed && (
+                <div className="pt-3 pb-1 px-3">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-sidebar-foreground/50">
+                    {item.group}
+                  </span>
+                </div>
+              )}
+              {showGroupLabel && collapsed && (
+                <div className="pt-2 pb-1 flex justify-center">
+                  <span className="w-4 border-t border-sidebar-foreground/20" />
+                </div>
               )}
-            </button>
+              <button
+                onClick={() => onNavigate(item.path)}
+                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors w-full text-left ${
+                  isActive
+                    ? 'bg-sidebar-accent text-sidebar-primary'
+                    : 'text-sidebar-foreground hover:bg-sidebar-accent'
+                } ${collapsed ? 'justify-center' : ''}`}
+                title={collapsed ? item.label : ''}
+              >
+                <Icon className="w-5 h-5 shrink-0" />
+                {!collapsed && (
+                  <span className="text-sm font-medium">{item.label}</span>
+                )}
+              </button>
+            </div>
           );
         })}
       </nav>
@@ -178,7 +200,14 @@ function resolveIcon(collection: any): LucideIcon {
   return collection.type === 'page' ? File : FileText;
 }
 
-function buildNavItems(config: any) {
+export interface NavItem {
+  path: string;
+  label: string;
+  icon: LucideIcon;
+  group?: string;
+}
+
+function buildNavItems(config: any): NavItem[] {
   if (!config?.collections) return defaultNavItems;
 
   const raw = config.collections;
@@ -186,17 +215,19 @@ function buildNavItems(config: any) {
 
   const visible = collectionsList.filter((c) => !c.admin?.hidden);
 
-  const pages = visible.filter((c) => c.type === 'page');
-  const posts = visible.filter((c) => c.type === 'post');
-  const other = visible.filter((c) => c.type !== 'page' && c.type !== 'post');
+  const ungrouped = visible.filter((c) => !c.admin?.group);
+  const grouped = visible.filter((c) => c.admin?.group);
 
-  const sorted = [...pages, ...posts, ...other];
+  const pages = ungrouped.filter((c) => c.type === 'page');
+  const posts = ungrouped.filter((c) => c.type === 'post');
+  const other = ungrouped.filter((c) => c.type !== 'page' && c.type !== 'post');
+  const sortedUngrouped = [...pages, ...posts, ...other];
 
-  const items: typeof defaultNavItems = [
+  const items: NavItem[] = [
     { path: '/', label: 'Dashboard', icon: LayoutDashboard },
   ];
 
-  for (const collection of sorted) {
+  for (const collection of sortedUngrouped) {
     items.push({
       label: collection.labels?.plural ?? collection.slug,
       path: `/${collection.slug}`,
@@ -204,6 +235,23 @@ function buildNavItems(config: any) {
     });
   }
 
+  const groups = new Map<string, typeof grouped>();
+  for (const col of grouped) {
+    const group = col.admin.group as string;
+    if (!groups.has(group)) groups.set(group, []);
+    groups.get(group)!.push(col);
+  }
+  for (const [groupName, cols] of groups) {
+    for (const collection of cols) {
+      items.push({
+        label: collection.labels?.plural ?? collection.slug,
+        path: `/${collection.slug}`,
+        icon: resolveIcon(collection),
+        group: groupName,
+      });
+    }
+  }
+
   items.push(
     { path: '/media', label: 'Media', icon: Image },
     { path: '/forms', label: 'Forms', icon: ClipboardList },