@growth-labs/cms 0.1.0

package/src/ui/screens/DashboardScreen.tsx

@@ -0,0 +1,654 @@
+// src/ui/screens/DashboardScreen.tsx — Dashboard screen (P5 Task 9).
+//
+// Renders the four stat cards (Published, Subscribers, Reads, Avg read time),
+// the needs-attention queue, the activity feed, and the top-content table.
+//
+// All data comes from GET /admin/api/dashboard.  Provider-backed cards
+// (reads, avg-time, subscribers) honour the ProviderResult live/partial/empty
+// convention via selectKpiState/formatKpi.  First-party cards (published count,
+// needs-attention queue, activity feed) are live when the workspace has data.
+//
+// NO BData, NO mock numbers — honest live/partial/empty rendering only.
+// Broadsheet re-skin: serif stat values, .kicker eyebrows, .masthead-rule under
+// card titles, .pill status chips, and a .tbl "Top performing" table.
+
+import { useCallback, useEffect, useReducer } from 'react'
+import type { ProviderResult } from '../../providers/types.js'
+import { Icon } from '../icons.js'
+import { useWorkspace } from '../workspace-context.js'
+import {
+	formatKpi,
+	type KpiPending,
+	mergeTopContent,
+	type NeedsAttentionRow,
+	selectKpiState,
+	splitNeedsAttention,
+	type TopContentProvider,
+} from './render-state.js'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface DashboardScreenProps {
+	/** Open a content item in the editor (same seam as LibraryScreen). */
+	openDoc: (id: string | null) => void
+}
+
+// ---------------------------------------------------------------------------
+// Data shape returned by GET /admin/api/dashboard
+// ---------------------------------------------------------------------------
+
+interface ActivityRow {
+	id: string
+	user_id: string | null
+	action: string
+	target_id: string | null
+	target_title: string | null
+	type: string | null
+	created_at: number
+}
+
+interface DashboardPayload {
+	needsAttention: NeedsAttentionRow[]
+	publishedCount: number
+	activity: ProviderResult<ActivityRow[]>
+	reads: ProviderResult<Record<string, number>>
+	subscribers: ProviderResult<Record<string, number | null>>
+	topContent: ProviderResult<TopContentProvider[]>
+}
+
+// ---------------------------------------------------------------------------
+// Internal reducer
+// ---------------------------------------------------------------------------
+
+interface DashboardState {
+	loading: boolean
+	error: string | null
+	data: DashboardPayload | null
+}
+
+type DashboardAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; data: DashboardPayload }
+	| { type: 'fetch-error'; error: string }
+
+function init(): DashboardState {
+	return { loading: true, error: null, data: null }
+}
+
+function reducer(state: DashboardState, action: DashboardAction): DashboardState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, data: action.data }
+		case 'fetch-error':
+			return { loading: false, error: action.error, data: null }
+		default:
+			return state
+	}
+}
+
+// ---------------------------------------------------------------------------
+// DashboardScreen
+// ---------------------------------------------------------------------------
+
+export function DashboardScreen({ openDoc }: DashboardScreenProps) {
+	const { active } = useWorkspace()
+	const [s, dispatch] = useReducer(reducer, undefined, init)
+
+	const fetchData = useCallback(async () => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const res = await fetch('/admin/api/dashboard')
+			if (!res.ok) {
+				dispatch({ type: 'fetch-error', error: `${res.status} ${res.statusText}` })
+				return
+			}
+			const data = (await res.json()) as DashboardPayload
+			dispatch({ type: 'fetch-ok', data })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	useEffect(() => {
+		void fetchData()
+	}, [fetchData])
+
+	// ---- Greeting / masthead eyebrow -----
+
+	const today = new Date()
+	const greeting = greetingFor(today.getHours())
+	const dateLabel = today.toLocaleDateString(undefined, {
+		weekday: 'long',
+		month: 'long',
+		day: 'numeric',
+		year: 'numeric',
+	})
+	const siteName = active?.name ?? null
+
+	return (
+		<div className="page dashboard-screen fade-in">
+			{/* Masthead head: kicker date eyebrow + serif greeting + new-article action */}
+			<div className="page-head" style={{ flexWrap: 'wrap' }}>
+				<div style={{ minWidth: 0 }}>
+					<div className="kicker" style={{ marginBottom: 8 }}>
+						{dateLabel}
+						{siteName ? ` · ${siteName}` : ''}
+					</div>
+					<h1 className="page-title">
+						{greeting}
+						{siteName ? `, ${siteName}` : ''}
+					</h1>
+				</div>
+				<div style={{ display: 'flex', gap: 8 }}>
+					<button type="button" className="btn primary" onClick={() => openDoc(null)}>
+						<Icon name="plus" size={16} /> New article
+					</button>
+				</div>
+			</div>
+
+			{s.loading && (
+				<div className="kicker" style={{ color: 'var(--ink-muted)' }}>
+					Loading dashboard…
+				</div>
+			)}
+
+			{!s.loading && s.error && (
+				<div className="panel panel-pad" style={{ color: 'var(--red)', fontSize: 14 }}>
+					{s.error}
+					<button
+						type="button"
+						className="btn sm"
+						onClick={() => void fetchData()}
+						style={{ marginLeft: 12 }}
+					>
+						<Icon name="refresh" size={14} /> Retry
+					</button>
+				</div>
+			)}
+
+			{!s.loading && !s.error && s.data && <DashboardContent data={s.data} openDoc={openDoc} />}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// DashboardContent — main body once loaded
+// ---------------------------------------------------------------------------
+
+function DashboardContent({
+	data,
+	openDoc,
+}: {
+	data: DashboardPayload
+	openDoc: (id: string | null) => void
+}) {
+	const attnItems = splitNeedsAttention(data.needsAttention)
+
+	// Top content: merge provider reads with D1 titles (provider already has titles from route)
+	const providerTopItems: TopContentProvider[] = data.topContent.data ?? []
+	const topItems = mergeTopContent(providerTopItems, {}) // route already hydrated titles
+
+	return (
+		<>
+			{/* Stat cards row */}
+			<div className="grid-stats" style={{ marginBottom: 'var(--gap)' }}>
+				{/* Published · 7 days */}
+				<StatCard
+					label="Published · 7 days"
+					status="live"
+					value={String(data.publishedCount)}
+					note={null}
+				/>
+
+				{/* Subscribers */}
+				<ProviderStatCard
+					label="Subscribers"
+					result={data.subscribers}
+					valueKey="active"
+					fmt="num"
+					emptyNote="Connect LemonSqueezy"
+				/>
+
+				{/* Reads */}
+				<ProviderStatCard
+					label="Reads"
+					result={data.reads}
+					valueKey="reads"
+					fmt="num"
+					emptyNote="No analytics data"
+				/>
+
+				{/* Avg read time */}
+				<AvgReadCard result={data.reads} />
+			</div>
+
+			{/* Two-column: needs attention + activity feed */}
+			<div className="grid-split">
+				{/* Needs attention */}
+				<div className="panel" style={{ overflow: 'hidden' }}>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'space-between',
+							padding: '16px 18px 12px',
+						}}
+					>
+						<div className="card-title">Needs your attention</div>
+					</div>
+					<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+					{attnItems.length === 0 ? (
+						<EmptyBox message="Nothing needs attention right now." />
+					) : (
+						<div style={{ padding: '6px 8px 8px' }}>
+							{attnItems.map((item) => (
+								<AttentionRow key={item.id} item={item} onClick={() => openDoc(item.id)} />
+							))}
+						</div>
+					)}
+				</div>
+
+				{/* Activity feed */}
+				<div className="panel" style={{ overflow: 'hidden' }}>
+					<div className="card-title" style={{ padding: '16px 18px 12px' }}>
+						Recent activity
+					</div>
+					<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+					<ActivityFeed result={data.activity} />
+				</div>
+			</div>
+
+			{/* Top performing */}
+			<div className="panel" style={{ marginTop: 'var(--gap)', overflow: 'hidden' }}>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'space-between',
+						padding: '16px 18px 12px',
+					}}
+				>
+					<div className="card-title">Top performing this week</div>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+
+				{data.topContent.status === 'empty' || topItems.length === 0 ? (
+					<EmptyBox message="Top content will appear once the analytics provider is configured." />
+				) : (
+					<>
+						{data.topContent.status === 'partial' && (
+							<PartialBanner message="Reads data is partial — full analytics rollup pending." />
+						)}
+						<table className="tbl" style={{ marginTop: 4 }}>
+							<thead>
+								<tr>
+									<th style={{ paddingLeft: 18 }}>#</th>
+									<th>Title</th>
+									<th>Reads</th>
+								</tr>
+							</thead>
+							<tbody>
+								{topItems.map((item, i) => (
+									<tr key={item.id} onClick={() => openDoc(item.id)}>
+										<td
+											className="mono tnum"
+											style={{ paddingLeft: 18, color: 'var(--ink-faint)', fontSize: 13 }}
+										>
+											{String(i + 1).padStart(2, '0')}
+										</td>
+										<td style={{ maxWidth: 420 }}>
+											<div
+												style={{
+													fontWeight: 600,
+													color: 'var(--ink)',
+													whiteSpace: 'nowrap',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+												}}
+											>
+												{item.title ?? '(untitled)'}
+											</div>
+										</td>
+										<td className="tnum" style={{ fontWeight: 600 }}>
+											{item.reads !== null ? item.reads.toLocaleString('en-US') : '—'}
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</>
+				)}
+			</div>
+		</>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// StatCard — broadsheet stat card: kicker label + serif value + sub note.
+//
+// Sparklines/trend arrows are the prototype's signature device, but the live
+// dashboard payload carries no historical series or trend %, and this codebase
+// forbids mock numbers — so the card faithfully renders the kicker+serif device
+// with the honest live value and any partial/pending sub-note, no fabricated
+// trend.  (A series, if the route ever supplies one, drops straight into the
+// flex slot beside the value.)
+// ---------------------------------------------------------------------------
+
+function StatCard({
+	label,
+	status,
+	value,
+	note,
+}: {
+	label: string
+	status: 'live' | 'partial' | 'empty'
+	value: string | null
+	note: string | null
+}) {
+	const isEmpty = status === 'empty' || value === null
+	return (
+		<div className="panel panel-pad" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+			<div className="kicker">{label}</div>
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'flex-end',
+					justifyContent: 'space-between',
+					gap: 10,
+				}}
+			>
+				<div
+					className="serif tnum"
+					style={{
+						fontSize: 34,
+						fontWeight: 600,
+						lineHeight: 1,
+						color: isEmpty ? 'var(--ink-muted)' : 'var(--ink)',
+						whiteSpace: 'nowrap',
+					}}
+				>
+					{isEmpty ? '—' : value}
+				</div>
+			</div>
+			<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2, minHeight: 16 }}>
+				{status === 'partial' && (
+					<span
+						style={{
+							display: 'inline-flex',
+							alignItems: 'center',
+							gap: 3,
+							fontSize: 12,
+							fontWeight: 700,
+							color: 'var(--amber)',
+						}}
+					>
+						<Icon name="bolt" size={12} /> partial
+					</span>
+				)}
+				{note && <span style={{ fontSize: 12, color: 'var(--ink-muted)' }}>{note}</span>}
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// ProviderStatCard — card backed by a ProviderResult<Record<string, number | null>>
+// ---------------------------------------------------------------------------
+
+function ProviderStatCard({
+	label,
+	result,
+	valueKey,
+	fmt,
+	emptyNote,
+}: {
+	label: string
+	result: ProviderResult<Record<string, number | null>>
+	valueKey: string
+	fmt: 'num' | 'pct' | 'usd'
+	emptyNote: string
+}) {
+	const kpiStatus = selectKpiState(result)
+
+	if (kpiStatus === 'empty') {
+		return <StatCard label={label} status="empty" value={null} note={emptyNote} />
+	}
+
+	const raw = result.data?.[valueKey] ?? null
+	const formatted = formatKpi(raw, fmt)
+	const isPending =
+		formatted !== null && typeof formatted === 'object' && (formatted as KpiPending).pending
+
+	return (
+		<StatCard
+			label={label}
+			status={kpiStatus}
+			value={isPending ? null : (formatted as string)}
+			note={isPending ? '— pending backfill' : null}
+		/>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// AvgReadCard — special card for avg read time (seconds → "Xm Ys")
+// ---------------------------------------------------------------------------
+
+function AvgReadCard({ result }: { result: ProviderResult<Record<string, number>> }) {
+	const kpiStatus = selectKpiState(result)
+
+	if (kpiStatus === 'empty') {
+		return <StatCard label="Avg read time" status="empty" value={null} note="No analytics data" />
+	}
+
+	const secs = result.data?.avgReadSeconds ?? null
+	const display = secs === null ? null : formatAvgTime(secs)
+
+	return <StatCard label="Avg read time" status={kpiStatus} value={display} note={null} />
+}
+
+function formatAvgTime(secs: number): string {
+	const m = Math.floor(secs / 60)
+	const s = Math.floor(secs % 60)
+	if (m === 0) return `${s}s`
+	if (s === 0) return `${m}m`
+	return `${m}m ${s}s`
+}
+
+// ---------------------------------------------------------------------------
+// AttentionRow — broadsheet queue row: title + meta + status pill
+// ---------------------------------------------------------------------------
+
+const ATTN_META: Record<
+	ReturnType<typeof splitNeedsAttention>[number]['pill'],
+	{ label: string; icon: Parameters<typeof Icon>[0]['name'] }
+> = {
+	review: { label: 'In review', icon: 'eye' },
+	processing: { label: 'Processing', icon: 'refresh' },
+	scheduled: { label: 'Scheduled', icon: 'clock' },
+	draft: { label: 'Draft', icon: 'edit' },
+}
+
+function AttentionRow({
+	item,
+	onClick,
+}: {
+	item: ReturnType<typeof splitNeedsAttention>[number]
+	onClick: () => void
+}) {
+	const meta = ATTN_META[item.pill]
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				gap: 13,
+				padding: '11px 10px',
+				borderRadius: 9,
+				cursor: 'pointer',
+				width: '100%',
+				textAlign: 'left',
+				border: 0,
+				background: 'transparent',
+				font: 'inherit',
+				color: 'inherit',
+			}}
+			onMouseEnter={(e) => {
+				e.currentTarget.style.background = 'var(--hover)'
+			}}
+			onMouseLeave={(e) => {
+				e.currentTarget.style.background = 'transparent'
+			}}
+		>
+			<div
+				style={{
+					width: 42,
+					height: 42,
+					borderRadius: 8,
+					flex: 'none',
+					background: 'var(--field)',
+					border: '1px solid var(--border)',
+					display: 'grid',
+					placeItems: 'center',
+					color: 'var(--ink-muted)',
+				}}
+			>
+				<Icon name={item.type === 'video' ? 'video' : 'doc'} size={16} />
+			</div>
+			<div style={{ flex: 1, minWidth: 0 }}>
+				<div
+					style={{
+						fontSize: 14,
+						fontWeight: 600,
+						color: 'var(--ink)',
+						whiteSpace: 'nowrap',
+						overflow: 'hidden',
+						textOverflow: 'ellipsis',
+					}}
+				>
+					{item.title || '(Untitled)'}
+				</div>
+			</div>
+			<span className={`pill ${item.pill}`}>
+				<span className="pdot" />
+				{meta.label}
+			</span>
+		</button>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// ActivityFeed
+// ---------------------------------------------------------------------------
+
+function ActivityFeed({ result }: { result: ProviderResult<ActivityRow[]> }) {
+	if (result.status === 'empty' || result.data.length === 0) {
+		return <EmptyBox message="No activity yet. Activity appears after content is published." />
+	}
+
+	const rows = result.data
+
+	return (
+		<div style={{ padding: '10px 18px 16px' }}>
+			{rows.map((row, i) => (
+				<ActivityEntry key={row.id} row={row} last={i === rows.length - 1} />
+			))}
+		</div>
+	)
+}
+
+function ActivityEntry({ row, last }: { row: ActivityRow; last: boolean }) {
+	const when = row.created_at ? formatRelTime(row.created_at) : ''
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				gap: 11,
+				padding: '9px 0',
+				borderBottom: last ? 'none' : '1px solid var(--border-soft)',
+			}}
+		>
+			<Icon
+				name="checkCircle"
+				size={16}
+				style={{ color: 'var(--green)', flexShrink: 0, marginTop: 2 }}
+			/>
+			<div style={{ flex: 1, minWidth: 0 }}>
+				<div style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.45 }}>
+					{row.action}
+					{row.target_title ? (
+						<>
+							{' '}
+							<span style={{ color: 'var(--ink)' }}>“{row.target_title}”</span>
+						</>
+					) : null}
+				</div>
+				<div style={{ fontSize: 11, color: 'var(--ink-faint)', marginTop: 2 }}>{when}</div>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Helpers / micro-components
+// ---------------------------------------------------------------------------
+
+function EmptyBox({ message }: { message: string }) {
+	return (
+		<div
+			style={{
+				padding: '24px 18px',
+				textAlign: 'center',
+				fontSize: 13,
+				color: 'var(--ink-muted)',
+			}}
+		>
+			{message}
+		</div>
+	)
+}
+
+function PartialBanner({ message }: { message: string }) {
+	return (
+		<div
+			style={{
+				margin: '8px 18px 0',
+				padding: '6px 12px',
+				background: 'color-mix(in srgb, var(--amber) 8%, transparent)',
+				border: '1px solid color-mix(in srgb, var(--amber) 20%, transparent)',
+				borderRadius: 7,
+				fontSize: 12,
+				color: 'var(--amber)',
+				display: 'flex',
+				alignItems: 'center',
+				gap: 7,
+			}}
+		>
+			<Icon name="bolt" size={13} />
+			{message}
+		</div>
+	)
+}
+
+function greetingFor(hour: number): string {
+	if (hour < 12) return 'Good morning'
+	if (hour < 17) return 'Good afternoon'
+	return 'Good evening'
+}
+
+function formatRelTime(epochSecs: number): string {
+	const diff = Date.now() / 1000 - epochSecs
+	if (diff < 60) return 'just now'
+	if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+	if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+	return new Date(epochSecs * 1000).toLocaleDateString(undefined, {
+		month: 'short',
+		day: 'numeric',
+	})
+}