@actuate-media/cms-admin 0.19.0 → 0.20.0

package/src/views/seo/AuditTab.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { ClipboardCheck, Clock, CheckCircle2 } from 'lucide-react'
+import {
+  fetchSeoIssues,
+  fetchSeoAuditRuns,
+  type SeoIssue,
+  type SeoIssueQuery,
+  type SeoSeverity,
+  type SeoIssueStatus,
+} from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoLoading,
+  SeoEmptyState,
+  SeoErrorState,
+  severityMeta,
+  SeoStatusBadge,
+} from '../../components/seo/primitives.js'
+import { SeoIssueFixDrawer } from '../../components/seo/SeoIssueFixDrawer.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const SEVERITY_FILTERS: { id: SeoSeverity | 'all'; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'critical', label: 'Critical' },
+  { id: 'warning', label: 'Warnings' },
+  { id: 'info', label: 'Info' },
+]
+
+const STATUS_FILTERS: { id: SeoIssueStatus | 'all'; label: string }[] = [
+  { id: 'open', label: 'Open' },
+  { id: 'recurring', label: 'Recurring' },
+  { id: 'ignored', label: 'Ignored' },
+  { id: 'resolved', label: 'Resolved' },
+  { id: 'all', label: 'All' },
+]
+
+function issueStatusTone(status: SeoIssueStatus) {
+  switch (status) {
+    case 'resolved':
+      return 'good' as const
+    case 'ignored':
+      return 'neutral' as const
+    case 'recurring':
+      return 'fair' as const
+    default:
+      return 'critical' as const
+  }
+}
+
+function AuditSummaryCards({ refetchKey }: { refetchKey: number }) {
+  const { data, loading } = useSeoResource(fetchSeoAuditRuns, [refetchKey])
+  const last = (data ?? [])[0]
+  return (
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground flex items-center gap-1.5 text-sm">
+          <Clock className="h-3.5 w-3.5" aria-hidden /> Last audit
+        </p>
+        <p className="text-foreground mt-1 text-sm font-medium">
+          {loading ? '…' : last ? new Date(last.startedAt).toLocaleString() : 'Never'}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Pages scanned</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.pagesScanned ?? 0}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Issues found</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.issuesFound ?? 0}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Site score</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.siteScoreAfter ?? '—'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function AuditTab({
+  refetchKey = 0,
+  initialIssueId,
+  onNavigate,
+}: {
+  refetchKey?: number
+  initialIssueId?: string | null
+  onNavigate?: (path: string) => void
+}) {
+  const [severity, setSeverity] = useState<SeoSeverity | 'all'>('all')
+  const [status, setStatus] = useState<SeoIssueStatus | 'all'>('open')
+  const [openIssue, setOpenIssue] = useState<string | null>(initialIssueId ?? null)
+
+  const query: SeoIssueQuery = useMemo(() => ({ severity, status }), [severity, status])
+  const { data, loading, error, refetch } = useSeoResource(
+    () => fetchSeoIssues(query),
+    [severity, status, refetchKey],
+  )
+
+  const issues = data ?? []
+
+  return (
+    <div className="space-y-4">
+      <AuditSummaryCards refetchKey={refetchKey} />
+
+      <SectionCard>
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap gap-1" role="tablist" aria-label="Filter by severity">
+            {SEVERITY_FILTERS.map((f) => (
+              <button
+                key={f.id}
+                role="tab"
+                aria-selected={severity === f.id}
+                onClick={() => setSeverity(f.id)}
+                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                  severity === f.id
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+          <div className="flex flex-wrap gap-1" role="tablist" aria-label="Filter by status">
+            {STATUS_FILTERS.map((f) => (
+              <button
+                key={f.id}
+                role="tab"
+                aria-selected={status === f.id}
+                onClick={() => setStatus(f.id)}
+                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                  status === f.id
+                    ? 'bg-accent text-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {loading ? (
+          <SeoLoading label="Loading issues…" />
+        ) : error ? (
+          <SeoErrorState message={error} onRetry={refetch} />
+        ) : issues.length === 0 ? (
+          <SeoEmptyState
+            icon={status === 'open' ? <CheckCircle2 size={24} /> : <ClipboardCheck size={24} />}
+            title={status === 'open' ? 'No open issues' : 'No issues match'}
+            description={
+              status === 'open'
+                ? 'Run an audit to scan for new issues, or adjust the filters.'
+                : 'Try a different severity or status filter.'
+            }
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" aria-label="SEO issues">
+              <thead>
+                <tr className="text-muted-foreground border-border border-b text-left">
+                  <th className="py-2 pr-4 font-medium">Severity</th>
+                  <th className="py-2 pr-4 font-medium">Issue</th>
+                  <th className="py-2 pr-4 font-medium">Page</th>
+                  <th className="py-2 pr-4 font-medium">Status</th>
+                  <th className="py-2 text-right font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {issues.map((issue: SeoIssue) => {
+                  const meta = severityMeta(issue.severity)
+                  return (
+                    <tr key={issue.id} className="hover:bg-accent/40">
+                      <td className="py-2.5 pr-4">
+                        <span className={`inline-flex items-center gap-1.5 text-sm ${meta.text}`}>
+                          <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+                          {meta.label}
+                        </span>
+                      </td>
+                      <td className="py-2.5 pr-4">
+                        <span className="text-foreground block font-medium">{issue.title}</span>
+                        <span className="text-muted-foreground block capitalize">
+                          {issue.category}
+                        </span>
+                      </td>
+                      <td className="text-muted-foreground py-2.5 pr-4">
+                        <span className="block truncate">
+                          {issue.entityTitle || issue.url || '—'}
+                        </span>
+                      </td>
+                      <td className="py-2.5 pr-4">
+                        <SeoStatusBadge label={issue.status} tone={issueStatusTone(issue.status)} />
+                      </td>
+                      <td className="py-2.5 text-right">
+                        <button
+                          onClick={() => setOpenIssue(issue.id)}
+                          className="text-primary hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                        >
+                          {issue.fixable ? 'Fix' : 'View'}
+                        </button>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </SectionCard>
+
+      <SeoIssueFixDrawer
+        open={openIssue !== null}
+        onOpenChange={(o) => !o && setOpenIssue(null)}
+        issueId={openIssue}
+        onChanged={refetch}
+        onNavigate={onNavigate}
+      />
+    </div>
+  )
+}

package/src/views/seo/ContentTab.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Search, FileText, Pencil } from 'lucide-react'
+import {
+  fetchSeoContentRecords,
+  applyContentSeoQuery,
+  type ContentSeoFilter,
+} from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoLoading,
+  SeoEmptyState,
+  SeoErrorState,
+  ScorePill,
+  SeoStatusBadge,
+} from '../../components/seo/primitives.js'
+import { SeoEditorDrawer } from '../../components/seo/SeoEditorDrawer.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const FILTERS: { id: ContentSeoFilter; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'pages', label: 'Pages' },
+  { id: 'posts', label: 'Posts' },
+]
+
+const inputCls =
+  'w-full rounded-md border border-border bg-input-background py-2 pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+
+export function ContentTab({
+  initialEntityType,
+  initialEntityId,
+}: {
+  initialEntityType?: string | null
+  initialEntityId?: string | null
+}) {
+  const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, [])
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<ContentSeoFilter>('all')
+  const [editor, setEditor] = useState<{ type: string; id: string } | null>(
+    initialEntityType && initialEntityId ? { type: initialEntityType, id: initialEntityId } : null,
+  )
+
+  const rows = useMemo(
+    () => applyContentSeoQuery(data ?? [], { search, filter }),
+    [data, search, filter],
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative max-w-sm flex-1">
+          <Search
+            className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            aria-hidden
+          />
+          <input
+            className={inputCls}
+            placeholder="Search content…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            aria-label="Search content"
+          />
+        </div>
+        <div className="flex gap-1" role="tablist" aria-label="Content type filter">
+          {FILTERS.map((f) => (
+            <button
+              key={f.id}
+              role="tab"
+              aria-selected={filter === f.id}
+              onClick={() => setFilter(f.id)}
+              className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                filter === f.id
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+              }`}
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <SectionCard>
+        {loading ? (
+          <SeoLoading label="Loading content…" />
+        ) : error ? (
+          <SeoErrorState message={error} onRetry={refetch} />
+        ) : rows.length === 0 ? (
+          <SeoEmptyState
+            icon={<FileText size={24} />}
+            title={search || filter !== 'all' ? 'No matching content' : 'No content yet'}
+            description={
+              search || filter !== 'all'
+                ? 'Try adjusting your search or filter.'
+                : 'Publish pages or posts to manage their SEO here.'
+            }
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" aria-label="Content SEO">
+              <thead>
+                <tr className="text-muted-foreground border-border border-b text-left">
+                  <th className="py-2 pr-4 font-medium">Title</th>
+                  <th className="py-2 pr-4 font-medium">Type</th>
+                  <th className="py-2 pr-4 font-medium">Meta</th>
+                  <th className="py-2 pr-4 text-right font-medium">Score</th>
+                  <th className="py-2 text-right font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {rows.map((r) => (
+                  <tr key={`${r.entityType}-${r.entityId}`} className="hover:bg-accent/40">
+                    <td className="py-2.5 pr-4">
+                      <span className="text-foreground block font-medium">{r.title}</span>
+                      <span className="text-muted-foreground block truncate">{r.url}</span>
+                    </td>
+                    <td className="py-2.5 pr-4 capitalize">
+                      <span className="text-muted-foreground">{r.entityType}</span>
+                    </td>
+                    <td className="py-2.5 pr-4">
+                      <span className="flex flex-wrap gap-1.5">
+                        <SeoStatusBadge
+                          label={r.metaTitle ? 'Title' : 'No title'}
+                          tone={r.metaTitle ? 'good' : 'critical'}
+                        />
+                        <SeoStatusBadge
+                          label={r.metaDescription ? 'Desc' : 'No desc'}
+                          tone={r.metaDescription ? 'good' : 'critical'}
+                        />
+                        {r.noindex && <SeoStatusBadge label="No-index" tone="fair" />}
+                      </span>
+                    </td>
+                    <td className="py-2.5 pr-4 text-right">
+                      <ScorePill score={r.seoScore} />
+                    </td>
+                    <td className="py-2.5 text-right">
+                      <button
+                        onClick={() => setEditor({ type: r.entityType, id: r.entityId })}
+                        className="text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                      >
+                        <Pencil className="h-3.5 w-3.5" aria-hidden /> Edit
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </SectionCard>
+
+      <SeoEditorDrawer
+        open={editor !== null}
+        onOpenChange={(o) => !o && setEditor(null)}
+        entityType={editor?.type ?? null}
+        entityId={editor?.id ?? null}
+        onSaved={refetch}
+      />
+    </div>
+  )
+}

package/src/views/seo/OverviewTab.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import {
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  AlertOctagon,
+  AlertTriangle,
+  Info,
+  Zap,
+  BarChart3,
+  ArrowRight,
+} from 'lucide-react'
+import type { QuickWin, SeoMetric, SeoOverview } from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoScoreBar,
+  SeoLoading,
+  SeoEmptyState,
+  SeoErrorState,
+  gradeMeta,
+  btnSecondary,
+} from '../../components/seo/primitives.js'
+import type { SeoResource } from './useSeoResource.js'
+
+function TrendIcon({ trend }: { trend?: SeoMetric['trend'] }) {
+  if (trend === 'up') return <TrendingUp className="text-success h-4 w-4" aria-hidden />
+  if (trend === 'down') return <TrendingDown className="text-destructive h-4 w-4" aria-hidden />
+  return <Minus className="text-muted-foreground h-4 w-4" aria-hidden />
+}
+
+function impactTone(impact: QuickWin['impact']): 'good' | 'fair' | 'poor' {
+  return impact === 'High' ? 'poor' : impact === 'Medium' ? 'fair' : 'good'
+}
+
+export function OverviewTab({
+  resource,
+  onOpenIssue,
+  onConnectSearchConsole,
+}: {
+  resource: SeoResource<SeoOverview>
+  onOpenIssue?: (issueId: string) => void
+  onConnectSearchConsole?: () => void
+}) {
+  const { data, loading, error, refetch } = resource
+
+  if (loading) return <SeoLoading label="Loading SEO overview…" />
+  if (error) return <SeoErrorState message={error} onRetry={refetch} />
+  if (!data) return <SeoEmptyState title="No overview data" />
+
+  const {
+    siteScore,
+    metrics,
+    issuesSummary,
+    quickWins,
+    searchPerformance,
+    searchConsoleConnected,
+  } = data
+  const grade = gradeMeta(siteScore.grade)
+
+  return (
+    <div className="space-y-6">
+      {/* Site score + metrics */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <SectionCard title="Site SEO Score" className="lg:col-span-1">
+          <div className="flex items-center gap-4">
+            <div className="flex flex-col">
+              <span className="text-foreground text-4xl font-medium tabular-nums">
+                {siteScore.score}
+              </span>
+              <span className={`text-sm font-medium ${grade.text}`}>{grade.label}</span>
+            </div>
+            {siteScore.delta !== null && (
+              <span
+                className={`inline-flex items-center gap-1 text-sm ${
+                  siteScore.delta >= 0 ? 'text-success' : 'text-destructive'
+                }`}
+              >
+                {siteScore.delta >= 0 ? (
+                  <TrendingUp className="h-4 w-4" aria-hidden />
+                ) : (
+                  <TrendingDown className="h-4 w-4" aria-hidden />
+                )}
+                {siteScore.delta >= 0 ? '+' : ''}
+                {siteScore.delta} pts
+              </span>
+            )}
+          </div>
+          <SeoScoreBar score={siteScore.score} className="mt-4" />
+          {siteScore.breakdown.length > 0 && (
+            <dl className="mt-4 space-y-2">
+              {siteScore.breakdown.map((b) => (
+                <div key={b.category} className="flex items-center justify-between text-sm">
+                  <dt className="text-muted-foreground capitalize">{b.category}</dt>
+                  <dd className="text-foreground tabular-nums">
+                    {b.score}/{100} <span className="text-muted-foreground">({b.weight}%)</span>
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          )}
+        </SectionCard>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-2">
+          {metrics.length === 0 ? (
+            <div className="sm:col-span-2">
+              <SeoEmptyState
+                title="No metrics yet"
+                description="Run an audit to populate site metrics."
+              />
+            </div>
+          ) : (
+            metrics.map((m) => (
+              <div key={m.label} className="border-border bg-card rounded-lg border p-4">
+                <p className="text-muted-foreground text-sm">{m.label}</p>
+                <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">{m.value}</p>
+                <p className="text-muted-foreground mt-1 flex items-center gap-1.5 text-sm">
+                  <TrendIcon trend={m.trend} />
+                  {m.helper}
+                </p>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Issues found + quick wins */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <SectionCard title="Issues Found">
+          <ul className="space-y-3">
+            <li className="flex items-center justify-between">
+              <span className="text-foreground flex items-center gap-2 text-sm">
+                <AlertOctagon className="text-destructive h-4 w-4" aria-hidden /> Critical
+              </span>
+              <span className="text-foreground font-medium tabular-nums">
+                {issuesSummary.critical}
+              </span>
+            </li>
+            <li className="flex items-center justify-between">
+              <span className="text-foreground flex items-center gap-2 text-sm">
+                <AlertTriangle className="text-warning h-4 w-4" aria-hidden /> Warnings
+              </span>
+              <span className="text-foreground font-medium tabular-nums">
+                {issuesSummary.warning}
+              </span>
+            </li>
+            <li className="flex items-center justify-between">
+              <span className="text-foreground flex items-center gap-2 text-sm">
+                <Info className="text-muted-foreground h-4 w-4" aria-hidden /> Info
+              </span>
+              <span className="text-foreground font-medium tabular-nums">{issuesSummary.info}</span>
+            </li>
+          </ul>
+        </SectionCard>
+
+        <SectionCard title="Quick Wins" description="High-impact fixes ranked by priority">
+          {quickWins.length === 0 ? (
+            <SeoEmptyState
+              icon={<Zap size={24} />}
+              title="No quick wins"
+              description="Great — no high-impact issues are waiting."
+            />
+          ) : (
+            <ul className="divide-border divide-y">
+              {quickWins.map((w) => {
+                const tone = impactTone(w.impact)
+                const toneCls =
+                  tone === 'poor'
+                    ? 'bg-destructive/10 text-destructive'
+                    : tone === 'fair'
+                      ? 'bg-warning/10 text-warning'
+                      : 'bg-success/10 text-success'
+                return (
+                  <li key={w.id} className="flex items-start justify-between gap-3 py-3 first:pt-0">
+                    <div className="min-w-0">
+                      <p className="text-foreground text-sm font-medium">{w.title}</p>
+                      <p className="text-muted-foreground mt-0.5 text-sm">{w.explanation}</p>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-2">
+                      <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${toneCls}`}>
+                        {w.impact}
+                      </span>
+                      {w.issueId && onOpenIssue && (
+                        <button
+                          onClick={() => onOpenIssue(w.issueId as string)}
+                          className="text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                        >
+                          Fix <ArrowRight className="h-3.5 w-3.5" aria-hidden />
+                        </button>
+                      )}
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </SectionCard>
+      </div>
+
+      {/* Search performance */}
+      <SectionCard title="Search Performance" description="Top pages by impressions (last 28 days)">
+        {!searchConsoleConnected ? (
+          <SeoEmptyState
+            icon={<BarChart3 size={24} />}
+            title="Search Console not connected"
+            description="Connect Google Search Console to see real impressions, clicks, CTR, and average position."
+            action={
+              onConnectSearchConsole ? (
+                <button className={btnSecondary} onClick={onConnectSearchConsole}>
+                  Connect Search Console
+                </button>
+              ) : undefined
+            }
+          />
+        ) : searchPerformance.length === 0 ? (
+          <SeoEmptyState title="No search performance data" />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" aria-label="Search performance">
+              <thead>
+                <tr className="text-muted-foreground border-border border-b text-left">
+                  <th className="py-2 pr-4 font-medium">Page</th>
+                  <th className="py-2 pr-4 text-right font-medium">Impressions</th>
+                  <th className="py-2 pr-4 text-right font-medium">Clicks</th>
+                  <th className="py-2 pr-4 text-right font-medium">CTR</th>
+                  <th className="py-2 text-right font-medium">Avg. Position</th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {searchPerformance.map((row) => (
+                  <tr key={row.url}>
+                    <td className="py-2 pr-4">
+                      <span className="text-foreground block font-medium">{row.title}</span>
+                      <span className="text-muted-foreground block truncate">{row.url}</span>
+                    </td>
+                    <td className="text-foreground py-2 pr-4 text-right tabular-nums">
+                      {row.impressions.toLocaleString()}
+                    </td>
+                    <td className="text-foreground py-2 pr-4 text-right tabular-nums">
+                      {row.clicks.toLocaleString()}
+                    </td>
+                    <td className="text-foreground py-2 pr-4 text-right tabular-nums">
+                      {(row.ctr * 100).toFixed(1)}%
+                    </td>
+                    <td className="text-foreground py-2 text-right tabular-nums">
+                      {row.averagePosition.toFixed(1)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </SectionCard>
+    </div>
+  )
+}