@actuate-media/cms-admin 0.65.0 → 0.67.0

package/src/views/Dashboard.tsx

@@ -41,6 +41,8 @@ import {
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
 import { editPathForDoc } from '../lib/collection-routes.js'
+import { OnboardingBlock, shouldShowOnboarding } from './dashboard/OnboardingBlock.js'
+import type { OnboardingSignals } from './dashboard/OnboardingBlock.js'
 
 interface DashboardStats {
   totalDocuments: number
@@ -287,6 +289,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
 
   const collections = useMemo(() => resolveCollections(config), [config])
 
+  // Hero CTA targets (mirrors the quick-action "New Post" resolution).
+  const heroNewPostPath = useMemo(() => {
+    const postTypes = collections.filter((c) => c.type === 'post')
+    if (postTypes.length === 1) return `/${postTypes[0]!.slug}/new`
+    return postTypes.length > 1 ? '/posts/new' : '/posts/types/new'
+  }, [collections])
+  const siteUrl: string | null = config?.site?.url ?? config?.seo?.siteUrl ?? null
+
   // ── Stat cards ──────────────────────────────────────────────────────────
   const statCards: StatCardData[] = useMemo(() => {
     const counts = stats?.collectionCounts ?? {}
@@ -513,6 +523,40 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
 
   const totalIssues = contentHealth.issues.reduce((s, i) => s + i.count, 0)
 
+  // ── Onboarding (empty-site getting-started block) ───────────────────────
+  // Signals come exclusively from data already fetched above (/stats +
+  // /stats/api-delivery) — see OnboardingBlock.tsx for the per-step
+  // derivation rationale. When the site is effectively empty (zero
+  // posts+pages AND zero media) the onboarding block REPLACES the
+  // Recent Activity / Publishing Queue / Content Health grid.
+  const onboardingSignals: OnboardingSignals = useMemo(() => {
+    const counts = stats?.collectionCounts ?? {}
+    const contentCollections = collections.filter(
+      (c) => c.type === 'post' || c.type === 'page' || c.slug === 'posts' || c.slug === 'pages',
+    )
+    // No post/page collections configured → fall back to the total document
+    // count so a populated site never regresses to the onboarding view.
+    const postsAndPagesCount =
+      contentCollections.length > 0
+        ? contentCollections.reduce((sum, c) => sum + (counts[c.slug] ?? 0), 0)
+        : (stats?.totalDocuments ?? 0)
+    return {
+      postsAndPagesCount,
+      mediaCount: stats?.totalMedia ?? 0,
+      seoScore: stats?.avgSeoScore ?? 0,
+      userCount: stats?.totalUsers ?? 0,
+      hasApiTraffic: delivery?.hasData ?? false,
+    }
+  }, [stats, collections, delivery])
+
+  // Belt-and-braces: any recent activity means the site is not empty even
+  // if collection counts are missing/stale, so never hide it behind
+  // onboarding.
+  const showOnboarding =
+    stats !== null &&
+    (stats.recentDocuments?.length ?? 0) === 0 &&
+    shouldShowOnboarding(onboardingSignals)
+
   // ── Render ──────────────────────────────────────────────────────────────
 
   if (loading && !stats) {
@@ -561,24 +605,46 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       )}
 
       {/* Hero greeting ─────────────────────────────────────────────────
-          Primary "+ New Post" and "View Site" actions live in the top bar
-          (Header.tsx page-action slot), not here, so the hero is purely
-          informational and the dashboard's chrome-level affordances stay
-          consistent across navigation. The on-page secondary action row
-          below covers the same creation paths plus authoring shortcuts. */}
-      <div className="flex flex-col gap-1 sm:gap-0.5">
-        <h1 className="text-foreground">
-          {greeting}, {userName} <span aria-hidden>👋</span>
-        </h1>
-        <p className="text-muted-foreground text-sm">
-          {dateStr}
-          {totalIssues > 0 && (
-            <span className="hidden sm:inline">
-              {' · '}
-              {totalIssues} content item{totalIssues === 1 ? '' : 's'} need attention
-            </span>
-          )}
-        </p>
+          Per the design, the primary "+ New Post" and "View Site" actions
+          sit on the right of the hero (`.dash-hdr` → `.dh-r`), not in the
+          top bar. The quick-action row below keeps the wider authoring
+          shortcuts. */}
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex flex-col gap-1 sm:gap-0.5">
+          <h1 className="text-foreground">
+            {greeting}, {userName} <span aria-hidden>👋</span>
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            {dateStr}
+            {totalIssues > 0 && (
+              <span className="hidden sm:inline">
+                {' · '}
+                {totalIssues} content item{totalIssues === 1 ? '' : 's'} need attention
+              </span>
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => nav(heroNewPostPath)}
+            className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+          >
+            <Plus className="h-3.5 w-3.5" aria-hidden />
+            New Post
+          </button>
+          {siteUrl ? (
+            <a
+              href={siteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="border-border bg-card text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
+            >
+              <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+              View Site
+            </a>
+          ) : null}
+        </div>
       </div>
 
       {/* Quick actions ──────────────────────────────────────────────── */}
@@ -641,124 +707,71 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         })}
       </div>
 
-      {/* Main grid ──────────────────────────────────────────────────── */}
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
-        {/* Recent Activity ───────────────────────────────────────── */}
-        <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
-          <header className="border-border flex items-center justify-between border-b px-4 py-3">
-            <div className="min-w-0">
-              <h2 className="text-foreground text-sm font-medium">Recent Activity</h2>
-              <p className="text-muted-foreground mt-0.5 text-xs">Last 7 days across all content</p>
-            </div>
-            {(stats?.recentDocuments?.length ?? 0) > 8 && (
-              <button
-                className="text-brand text-xs font-medium hover:underline"
-                onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
-              >
-                {activityLimit >= 20 ? 'Show less' : 'Show more'}
-              </button>
-            )}
-          </header>
-          {activity.length === 0 ? (
-            <EmptyState
-              icon={Activity}
-              title="No activity yet"
-              subtitle="Content changes will appear here as your team works."
-            />
-          ) : (
-            <ul role="list" className="divide-border divide-y">
-              {activity.map((it) => (
-                <li key={it.id}>
-                  <button
-                    type="button"
-                    onClick={() => nav(it.editPath)}
-                    className="hover:bg-accent/50 focus-visible:bg-accent/50 w-full cursor-pointer px-4 py-3 text-left transition-colors"
-                  >
-                    <div className="flex min-w-0 items-start gap-3">
-                      <div
-                        className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-medium text-white"
-                        style={{ background: it.avatar.color }}
-                        aria-hidden
-                      >
-                        {it.avatar.initials}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="text-foreground truncate text-sm leading-snug">
-                          <span className="font-medium">
-                            &ldquo;{it.title || 'Untitled'}&rdquo;
-                          </span>{' '}
-                          <span className="text-muted-foreground">— {it.typeLabel}</span>
-                        </p>
-                        <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
-                          <span
-                            className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
-                          >
-                            {it.statusInfo.label}
-                          </span>
-                          <span className="max-w-[120px] truncate">{it.author}</span>
-                          <span aria-hidden>·</span>
-                          <span>{it.relTime}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </section>
-
-        {/* Right column ─────────────────────────────────────────── */}
-        <aside className="flex min-w-0 flex-col gap-4">
-          {/* Publishing Queue */}
+      {/* Onboarding (empty site) or the main grid ──────────────────── */}
+      {showOnboarding ? (
+        <OnboardingBlock signals={onboardingSignals} onNavigate={onNavigate} />
+      ) : (
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
+          {/* Recent Activity ───────────────────────────────────────── */}
           <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
             <header className="border-border flex items-center justify-between border-b px-4 py-3">
               <div className="min-w-0">
-                <h2 className="text-foreground text-sm font-medium">Publishing Queue</h2>
+                <h2 className="text-foreground text-sm font-medium">Recent Activity</h2>
                 <p className="text-muted-foreground mt-0.5 text-xs">
-                  {publishQueue.length} item{publishQueue.length === 1 ? '' : 's'} scheduled
+                  Last 7 days across all content
                 </p>
               </div>
-              <button
-                className="text-brand text-xs font-medium hover:underline disabled:cursor-default disabled:no-underline disabled:opacity-50"
-                disabled={publishQueue.length === 0}
-                onClick={() => {
-                  // We don't have a dedicated "scheduled" admin page, so deep-
-                  // link to the first scheduled item — that's where authors
-                  // typically need to land to reschedule or cancel.
-                  const first = publishQueue[0]
-                  if (first) nav(first.editPath)
-                }}
-              >
-                Manage
-              </button>
+              {(stats?.recentDocuments?.length ?? 0) > 8 && (
+                <button
+                  className="text-brand text-xs font-medium hover:underline"
+                  onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
+                >
+                  {activityLimit >= 20 ? 'Show less' : 'Show more'}
+                </button>
+              )}
             </header>
-            {publishQueue.length === 0 ? (
+            {activity.length === 0 ? (
               <EmptyState
-                icon={Clock}
-                title="No scheduled content"
-                subtitle="Scheduled posts and pages appear here."
-                compact
+                icon={Activity}
+                title="No activity yet"
+                subtitle="Content changes will appear here as your team works."
               />
             ) : (
               <ul role="list" className="divide-border divide-y">
-                {publishQueue.map((q) => (
-                  <li key={q.id}>
+                {activity.map((it) => (
+                  <li key={it.id}>
                     <button
                       type="button"
-                      onClick={() => nav(q.editPath)}
-                      className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 text-left transition-colors"
+                      onClick={() => nav(it.editPath)}
+                      className="hover:bg-accent/50 focus-visible:bg-accent/50 w-full cursor-pointer px-4 py-3 text-left transition-colors"
                     >
-                      <span className="bg-warning h-2 w-2 shrink-0 rounded-full" aria-hidden />
-                      <div className="min-w-0 flex-1">
-                        <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
-                        <p className="text-muted-foreground truncate text-[11px]">
-                          {q.date} · {q.author}
-                        </p>
+                      <div className="flex min-w-0 items-start gap-3">
+                        <div
+                          className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-medium text-white"
+                          style={{ background: it.avatar.color }}
+                          aria-hidden
+                        >
+                          {it.avatar.initials}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="text-foreground truncate text-sm leading-snug">
+                            <span className="font-medium">
+                              &ldquo;{it.title || 'Untitled'}&rdquo;
+                            </span>{' '}
+                            <span className="text-muted-foreground">— {it.typeLabel}</span>
+                          </p>
+                          <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
+                            <span
+                              className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
+                            >
+                              {it.statusInfo.label}
+                            </span>
+                            <span className="max-w-[120px] truncate">{it.author}</span>
+                            <span aria-hidden>·</span>
+                            <span>{it.relTime}</span>
+                          </div>
+                        </div>
                       </div>
-                      <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
-                        {q.type}
-                      </span>
                     </button>
                   </li>
                 ))}
@@ -766,103 +779,162 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             )}
           </section>
 
-          {/* Content Health */}
-          <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
-            <header className="border-border flex items-center justify-between border-b px-4 py-3">
-              <div className="min-w-0">
-                <h2 className="text-foreground text-sm font-medium">Content Health</h2>
-                <p className="text-muted-foreground mt-0.5 text-xs">SEO &amp; quality issues</p>
-              </div>
-              <button
-                className="text-brand text-xs font-medium hover:underline"
-                onClick={() => nav('/seo')}
-              >
-                Fix issues
-              </button>
-            </header>
-            <div className="px-4 pt-3.5 pb-2.5">
-              <div className="mb-1.5 flex items-baseline justify-between">
-                <p className="text-foreground text-2xl leading-none font-medium tracking-tight">
-                  {contentHealth.score > 0 ? contentHealth.score : '—'}
-                  {contentHealth.score > 0 && (
-                    <span className="text-muted-foreground ml-0.5 text-sm font-normal">/100</span>
-                  )}
-                </p>
-                <span
-                  className={`text-xs font-medium ${
-                    contentHealth.tone === 'ok'
-                      ? 'text-success'
-                      : contentHealth.tone === 'warn'
-                        ? 'text-warning'
-                        : contentHealth.tone === 'err'
-                          ? 'text-destructive dark:text-red-400'
-                          : 'text-muted-foreground'
-                  }`}
+          {/* Right column ─────────────────────────────────────────── */}
+          <aside className="flex min-w-0 flex-col gap-4">
+            {/* Publishing Queue */}
+            <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+              <header className="border-border flex items-center justify-between border-b px-4 py-3">
+                <div className="min-w-0">
+                  <h2 className="text-foreground text-sm font-medium">Publishing Queue</h2>
+                  <p className="text-muted-foreground mt-0.5 text-xs">
+                    {publishQueue.length} item{publishQueue.length === 1 ? '' : 's'} scheduled
+                  </p>
+                </div>
+                <button
+                  className="text-brand text-xs font-medium hover:underline disabled:cursor-default disabled:no-underline disabled:opacity-50"
+                  disabled={publishQueue.length === 0}
+                  onClick={() => {
+                    // We don't have a dedicated "scheduled" admin page, so deep-
+                    // link to the first scheduled item — that's where authors
+                    // typically need to land to reschedule or cancel.
+                    const first = publishQueue[0]
+                    if (first) nav(first.editPath)
+                  }}
                 >
-                  {contentHealth.label}
-                </span>
-              </div>
-              <div className="bg-muted h-1.5 overflow-hidden rounded-full">
-                <div
-                  className={`h-full rounded-full transition-all ${
-                    contentHealth.tone === 'ok'
-                      ? 'bg-success'
-                      : contentHealth.tone === 'warn'
-                        ? 'bg-warning'
-                        : contentHealth.tone === 'err'
-                          ? 'bg-destructive'
-                          : 'bg-muted-foreground/40'
-                  }`}
-                  style={{ width: `${Math.max(0, Math.min(100, contentHealth.score))}%` }}
+                  Manage
+                </button>
+              </header>
+              {publishQueue.length === 0 ? (
+                <EmptyState
+                  icon={Clock}
+                  title="No scheduled content"
+                  subtitle="Scheduled posts and pages appear here."
+                  compact
                 />
-              </div>
-            </div>
-            {contentHealth.issues.length === 0 ? (
-              <div className="text-muted-foreground px-4 pt-1 pb-4 text-xs">
-                No outstanding issues. Nice work.
-              </div>
-            ) : (
-              <ul role="list" className="divide-border divide-y">
-                {contentHealth.issues.map((iss, i) => (
-                  <li key={i}>
-                    <button
-                      type="button"
-                      onClick={() => nav('/seo')}
-                      className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full items-center gap-2.5 px-4 py-2 text-left transition-colors"
-                    >
-                      <span
-                        className={`h-1.5 w-1.5 shrink-0 rounded-full ${
-                          iss.tone === 'err'
-                            ? 'bg-destructive'
-                            : iss.tone === 'warn'
-                              ? 'bg-warning'
-                              : 'bg-muted-foreground'
-                        }`}
-                        aria-hidden
-                      />
-                      <span className="text-muted-foreground flex-1 truncate text-xs">
-                        {iss.label}
-                      </span>
-                      <span
-                        className={`shrink-0 text-sm font-medium ${
-                          iss.tone === 'err'
+              ) : (
+                <ul role="list" className="divide-border divide-y">
+                  {publishQueue.map((q) => (
+                    <li key={q.id}>
+                      <button
+                        type="button"
+                        onClick={() => nav(q.editPath)}
+                        className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 text-left transition-colors"
+                      >
+                        <span className="bg-warning h-2 w-2 shrink-0 rounded-full" aria-hidden />
+                        <div className="min-w-0 flex-1">
+                          <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
+                          <p className="text-muted-foreground truncate text-[11px]">
+                            {q.date} · {q.author}
+                          </p>
+                        </div>
+                        <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
+                          {q.type}
+                        </span>
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+
+            {/* Content Health */}
+            <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+              <header className="border-border flex items-center justify-between border-b px-4 py-3">
+                <div className="min-w-0">
+                  <h2 className="text-foreground text-sm font-medium">Content Health</h2>
+                  <p className="text-muted-foreground mt-0.5 text-xs">SEO &amp; quality issues</p>
+                </div>
+                <button
+                  className="text-brand text-xs font-medium hover:underline"
+                  onClick={() => nav('/seo')}
+                >
+                  Fix issues
+                </button>
+              </header>
+              <div className="px-4 pt-3.5 pb-2.5">
+                <div className="mb-1.5 flex items-baseline justify-between">
+                  <p className="text-foreground text-2xl leading-none font-medium tracking-tight">
+                    {contentHealth.score > 0 ? contentHealth.score : '—'}
+                    {contentHealth.score > 0 && (
+                      <span className="text-muted-foreground ml-0.5 text-sm font-normal">/100</span>
+                    )}
+                  </p>
+                  <span
+                    className={`text-xs font-medium ${
+                      contentHealth.tone === 'ok'
+                        ? 'text-success'
+                        : contentHealth.tone === 'warn'
+                          ? 'text-warning'
+                          : contentHealth.tone === 'err'
                             ? 'text-destructive dark:text-red-400'
-                            : iss.tone === 'warn'
-                              ? 'text-warning'
-                              : 'text-muted-foreground'
-                        }`}
+                            : 'text-muted-foreground'
+                    }`}
+                  >
+                    {contentHealth.label}
+                  </span>
+                </div>
+                <div className="bg-muted h-1.5 overflow-hidden rounded-full">
+                  <div
+                    className={`h-full rounded-full transition-all ${
+                      contentHealth.tone === 'ok'
+                        ? 'bg-success'
+                        : contentHealth.tone === 'warn'
+                          ? 'bg-warning'
+                          : contentHealth.tone === 'err'
+                            ? 'bg-destructive'
+                            : 'bg-muted-foreground/40'
+                    }`}
+                    style={{ width: `${Math.max(0, Math.min(100, contentHealth.score))}%` }}
+                  />
+                </div>
+              </div>
+              {contentHealth.issues.length === 0 ? (
+                <div className="text-muted-foreground px-4 pt-1 pb-4 text-xs">
+                  No outstanding issues. Nice work.
+                </div>
+              ) : (
+                <ul role="list" className="divide-border divide-y">
+                  {contentHealth.issues.map((iss, i) => (
+                    <li key={i}>
+                      <button
+                        type="button"
+                        onClick={() => nav('/seo')}
+                        className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full items-center gap-2.5 px-4 py-2 text-left transition-colors"
                       >
-                        {iss.count}
-                      </span>
-                      <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </section>
-        </aside>
-      </div>
+                        <span
+                          className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                            iss.tone === 'err'
+                              ? 'bg-destructive'
+                              : iss.tone === 'warn'
+                                ? 'bg-warning'
+                                : 'bg-muted-foreground'
+                          }`}
+                          aria-hidden
+                        />
+                        <span className="text-muted-foreground flex-1 truncate text-xs">
+                          {iss.label}
+                        </span>
+                        <span
+                          className={`shrink-0 text-sm font-medium ${
+                            iss.tone === 'err'
+                              ? 'text-destructive dark:text-red-400'
+                              : iss.tone === 'warn'
+                                ? 'text-warning'
+                                : 'text-muted-foreground'
+                          }`}
+                        >
+                          {iss.count}
+                        </span>
+                        <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+          </aside>
+        </div>
+      )}
 
       {/* Delivery API ──────────────────────────────────────────────────
           Headless content delivery metrics aggregated over the last