@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/Dashboard.tsx

@@ -1,97 +1,116 @@
-'use client';
+'use client'
 
 import {
-  FileText, File, Image, Users, ClipboardList, Search,
-  Loader2, AlertTriangle, Database, ChevronLeft, ChevronRight,
-} from 'lucide-react';
-import { useState } from 'react';
-import { useApiData } from '../lib/useApiData.js';
-import { ContentOverviewChart } from '../components/ContentOverviewChart.js';
-import { SEOPerformance } from '../components/SEOPerformance.js';
+  FileText,
+  File,
+  Image,
+  Users,
+  ClipboardList,
+  Search,
+  Loader2,
+  AlertTriangle,
+  Database,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react'
+import { useState } from 'react'
+import { useApiData } from '../lib/useApiData.js'
+import { ContentOverviewChart } from '../components/ContentOverviewChart.js'
+import { SEOPerformance } from '../components/SEOPerformance.js'
 
 interface DashboardStats {
-  totalDocuments: number;
-  totalMedia: number;
-  totalUsers: number;
-  formCount: number;
-  avgSeoScore: number;
-  collectionCounts: Record<string, number>;
-  statusCounts: Record<string, number>;
+  totalDocuments: number
+  totalMedia: number
+  totalUsers: number
+  formCount: number
+  avgSeoScore: number
+  collectionCounts: Record<string, number>
+  statusCounts: Record<string, number>
   recentDocuments: {
-    id: string;
-    title: string;
-    status: string;
-    collection: string;
-    updatedAt: string;
-    author: string;
-  }[];
+    id: string
+    title: string
+    status: string
+    collection: string
+    updatedAt: string
+    author: string
+  }[]
 }
 
 interface HealthData {
-  status: 'healthy' | 'degraded';
-  version: string;
-  secretConfigured: boolean;
-  models: Record<string, boolean>;
-  databaseConnected: boolean;
+  status: 'healthy' | 'degraded'
+  version: string
+  secretConfigured: boolean
+  models: Record<string, boolean>
+  databaseConnected: boolean
 }
 
 interface CollectionMeta {
-  slug: string;
-  type?: string;
-  labels?: { singular?: string; plural?: string };
+  slug: string
+  type?: string
+  labels?: { singular?: string; plural?: string }
 }
 
 export interface DashboardProps {
-  config?: any;
-  session?: any;
-  onNavigate?: (path: string) => void;
+  config?: any
+  session?: any
+  onNavigate?: (path: string) => void
 }
 
 function resolveCollections(config: any): CollectionMeta[] {
-  if (!config?.collections) return [];
-  const raw = config.collections;
-  const list: any[] = Array.isArray(raw) ? raw : Object.values(raw);
+  if (!config?.collections) return []
+  const raw = config.collections
+  const list: any[] = Array.isArray(raw) ? raw : Object.values(raw)
   return list
     .filter((c) => !c.admin?.hidden)
-    .map((c) => ({ slug: c.slug, type: c.type, labels: c.labels }));
+    .map((c) => ({ slug: c.slug, type: c.type, labels: c.labels }))
 }
 
 function collectionLabel(col: CollectionMeta, plural = true): string {
-  if (plural) return col.labels?.plural ?? col.slug.charAt(0).toUpperCase() + col.slug.slice(1);
-  return col.labels?.singular ?? col.slug.charAt(0).toUpperCase() + col.slug.slice(1);
+  if (plural) return col.labels?.plural ?? col.slug.charAt(0).toUpperCase() + col.slug.slice(1)
+  return col.labels?.singular ?? col.slug.charAt(0).toUpperCase() + col.slug.slice(1)
 }
 
 function relativeTime(dateStr: string): string {
-  const now = Date.now();
-  const then = new Date(dateStr).getTime();
-  const diff = now - then;
-  const mins = Math.floor(diff / 60000);
-  if (mins < 1) return 'just now';
-  if (mins < 60) return `${mins} min ago`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days} day${days !== 1 ? 's' : ''} ago`;
-  return new Date(dateStr).toLocaleDateString();
+  const now = Date.now()
+  const then = new Date(dateStr).getTime()
+  const diff = now - then
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return 'just now'
+  if (mins < 60) return `${mins} min ago`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days} day${days !== 1 ? 's' : ''} ago`
+  return new Date(dateStr).toLocaleDateString()
 }
 
 function statusColor(status: string): string {
   switch (status) {
-    case 'PUBLISHED': return 'bg-green-100 text-green-800';
-    case 'DRAFT': return 'bg-gray-100 text-gray-700';
-    case 'SCHEDULED': return 'bg-purple-100 text-purple-800';
-    case 'IN_REVIEW': return 'bg-blue-100 text-blue-800';
-    default: return 'bg-gray-100 text-gray-700';
+    case 'PUBLISHED':
+      return 'bg-green-100 text-green-800'
+    case 'DRAFT':
+      return 'bg-gray-100 text-gray-700'
+    case 'SCHEDULED':
+      return 'bg-purple-100 text-purple-800'
+    case 'IN_REVIEW':
+      return 'bg-blue-100 text-blue-800'
+    default:
+      return 'bg-gray-100 text-gray-700'
   }
 }
 
 function statusLabel(status: string): string {
   switch (status) {
-    case 'PUBLISHED': return 'Published';
-    case 'DRAFT': return 'Draft';
-    case 'SCHEDULED': return 'Scheduled';
-    case 'IN_REVIEW': return 'In Review';
-    default: return status;
+    case 'PUBLISHED':
+      return 'Published'
+    case 'DRAFT':
+      return 'Draft'
+    case 'SCHEDULED':
+      return 'Scheduled'
+    case 'IN_REVIEW':
+      return 'In Review'
+    default:
+      return status
   }
 }
 
@@ -101,26 +120,26 @@ const STAT_COLORS = [
   { bg: 'bg-teal-50', icon: 'bg-teal-100', text: 'text-teal-600' },
   { bg: 'bg-green-50', icon: 'bg-green-100', text: 'text-green-600' },
   { bg: 'bg-amber-50', icon: 'bg-amber-100', text: 'text-amber-600' },
-];
+]
 
 export function Dashboard({ config, session, onNavigate }: DashboardProps) {
-  const nav = (path: string) => onNavigate?.(path);
-  const { data, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats');
-  const { data: health } = useApiData<HealthData>('/health');
-  const [activityPage, setActivityPage] = useState(0);
+  const nav = (path: string) => onNavigate?.(path)
+  const { data, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats')
+  const { data: health } = useApiData<HealthData>('/health')
+  const [activityPage, setActivityPage] = useState(0)
 
-  const collections = resolveCollections(config);
-  const userName = session?.name ?? session?.email?.split('@')[0] ?? 'Admin';
+  const collections = resolveCollections(config)
+  const userName = session?.name ?? session?.email?.split('@')[0] ?? 'Admin'
 
-  const collectionCounts = data?.collectionCounts ?? {};
-  const statusCounts = data?.statusCounts ?? {};
-  const recentDocs = data?.recentDocuments ?? [];
+  const collectionCounts = data?.collectionCounts ?? {}
+  const statusCounts = data?.statusCounts ?? {}
+  const recentDocs = data?.recentDocuments ?? []
 
-  const perPage = 5;
-  const totalActivityPages = Math.max(1, Math.ceil(recentDocs.length / perPage));
-  const visibleDocs = recentDocs.slice(activityPage * perPage, (activityPage + 1) * perPage);
+  const perPage = 5
+  const totalActivityPages = Math.max(1, Math.ceil(recentDocs.length / perPage))
+  const visibleDocs = recentDocs.slice(activityPage * perPage, (activityPage + 1) * perPage)
 
-  const statCards: { label: string; value: number; icon: typeof FileText }[] = [];
+  const statCards: { label: string; value: number; icon: typeof FileText }[] = []
 
   if (collections.length > 0) {
     for (const col of collections.slice(0, 2)) {
@@ -128,23 +147,23 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         label: collectionLabel(col),
         value: collectionCounts[col.slug] ?? 0,
         icon: col.type === 'page' ? File : FileText,
-      });
+      })
     }
   } else {
-    statCards.push({ label: 'Pages', value: collectionCounts['pages'] ?? 0, icon: File });
-    statCards.push({ label: 'Posts', value: collectionCounts['posts'] ?? 0, icon: FileText });
+    statCards.push({ label: 'Pages', value: collectionCounts['pages'] ?? 0, icon: File })
+    statCards.push({ label: 'Posts', value: collectionCounts['posts'] ?? 0, icon: FileText })
   }
 
-  statCards.push({ label: 'Forms', value: data?.formCount ?? 0, icon: ClipboardList });
-  statCards.push({ label: 'Media', value: data?.totalMedia ?? 0, icon: Image });
-  statCards.push({ label: 'Avg. SEO Rating', value: data?.avgSeoScore ?? 0, icon: Search });
+  statCards.push({ label: 'Forms', value: data?.formCount ?? 0, icon: ClipboardList })
+  statCards.push({ label: 'Media', value: data?.totalMedia ?? 0, icon: Image })
+  statCards.push({ label: 'Avg. SEO Rating', value: data?.avgSeoScore ?? 0, icon: Search })
 
   if (loading) {
     return (
       <div className="p-4 sm:p-6 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -159,8 +178,10 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 ? '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.`
-              }
+                  : `Some CMS models are missing: ${Object.entries(health.models)
+                      .filter(([, v]) => !v)
+                      .map(([k]) => k)
+                      .join(', ')}. Run your database migrations.`}
             </p>
           </div>
         </div>
@@ -169,33 +190,46 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       {error && exhausted && (
         <div className="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.</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>
+          <span className="text-sm text-amber-800 flex-1">
+            Some dashboard data may be unavailable.
+          </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>
       )}
 
       {/* Header */}
       <div>
-        <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">Welcome back, {userName}</h1>
-        <p className="text-sm text-gray-500 mt-0.5">Here&apos;s what&apos;s happening with your content today</p>
+        <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">
+          Welcome back, {userName}
+        </h1>
+        <p className="text-sm text-gray-500 mt-0.5">
+          Here&apos;s what&apos;s happening with your content today
+        </p>
       </div>
 
       {/* Stat cards */}
       <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4">
         {statCards.map((card, i) => {
-          const colors = STAT_COLORS[i % STAT_COLORS.length]!;
-          const Icon = card.icon;
+          const colors = STAT_COLORS[i % STAT_COLORS.length]!
+          const Icon = card.icon
           return (
             <div key={card.label} className="bg-white rounded-xl border border-gray-200 p-4">
               <div className="flex items-center justify-between mb-3">
-                <div className={`w-9 h-9 rounded-lg flex items-center justify-center ${colors.icon}`}>
+                <div
+                  className={`w-9 h-9 rounded-lg flex items-center justify-center ${colors.icon}`}
+                >
                   <Icon className={`w-4.5 h-4.5 ${colors.text}`} />
                 </div>
               </div>
               <p className="text-2xl font-semibold text-gray-900">{card.value.toLocaleString()}</p>
               <p className="text-xs text-gray-500 mt-0.5">{card.label}</p>
             </div>
-          );
+          )
         })}
       </div>
 
@@ -211,35 +245,44 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               <div className="p-8 text-center">
                 <p className="text-sm text-gray-400">No content yet</p>
               </div>
-            ) : visibleDocs.map((doc) => {
-              const colMeta = collections.find((c) => c.slug === doc.collection);
-              const typeLabel = colMeta ? collectionLabel(colMeta, false) : doc.collection;
-              return (
-                <div key={doc.id} className="px-4 py-3 hover:bg-gray-50 transition-colors">
-                  <div className="flex items-center justify-between gap-3">
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 mb-0.5">
-                        <h3 className="text-sm font-medium text-gray-900 truncate">{doc.title ?? 'Untitled'}</h3>
-                      </div>
-                      <div className="flex items-center gap-2 text-xs text-gray-500">
-                        <span className="capitalize">{typeLabel}</span>
-                        <span>&middot;</span>
-                        <span>{doc.author}</span>
-                        <span>&middot;</span>
-                        <span>{relativeTime(doc.updatedAt)}</span>
+            ) : (
+              visibleDocs.map((doc) => {
+                const colMeta = collections.find((c) => c.slug === doc.collection)
+                const typeLabel = colMeta ? collectionLabel(colMeta, false) : doc.collection
+                return (
+                  <div key={doc.id} className="px-4 py-3 hover:bg-gray-50 transition-colors">
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-0.5">
+                          <h3 className="text-sm font-medium text-gray-900 truncate">
+                            {doc.title ?? 'Untitled'}
+                          </h3>
+                        </div>
+                        <div className="flex items-center gap-2 text-xs text-gray-500">
+                          <span className="capitalize">{typeLabel}</span>
+                          <span>&middot;</span>
+                          <span>{doc.author}</span>
+                          <span>&middot;</span>
+                          <span>{relativeTime(doc.updatedAt)}</span>
+                        </div>
                       </div>
+                      <span
+                        className={`px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${statusColor(doc.status)}`}
+                      >
+                        {statusLabel(doc.status)}
+                      </span>
                     </div>
-                    <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${statusColor(doc.status)}`}>
-                      {statusLabel(doc.status)}
-                    </span>
                   </div>
-                </div>
-              );
-            })}
+                )
+              })
+            )}
           </div>
           {recentDocs.length > perPage && (
             <div className="px-4 py-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-500">
-              <span>Showing {activityPage * perPage + 1}-{Math.min((activityPage + 1) * perPage, recentDocs.length)} of {recentDocs.length}</span>
+              <span>
+                Showing {activityPage * perPage + 1}-
+                {Math.min((activityPage + 1) * perPage, recentDocs.length)} of {recentDocs.length}
+              </span>
               <div className="flex items-center gap-1">
                 <button
                   onClick={() => setActivityPage(Math.max(0, activityPage - 1))}
@@ -248,9 +291,13 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 >
                   <ChevronLeft className="w-3.5 h-3.5" />
                 </button>
-                <span>Page {activityPage + 1} of {totalActivityPages}</span>
+                <span>
+                  Page {activityPage + 1} of {totalActivityPages}
+                </span>
                 <button
-                  onClick={() => setActivityPage(Math.min(totalActivityPages - 1, activityPage + 1))}
+                  onClick={() =>
+                    setActivityPage(Math.min(totalActivityPages - 1, activityPage + 1))
+                  }
                   disabled={activityPage >= totalActivityPages - 1}
                   className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
                 >
@@ -279,5 +326,5 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       {/* SEO Performance */}
       <SEOPerformance onNavigate={nav} />
     </div>
-  );
+  )
 }