@quoin-cms/admin 0.1.0

package/src/views/CustomPageView.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	/**
+	 * Renders a consumer-declared custom page for `/admin/pages/:slug`.
+	 *
+	 * The consumer's `admin.config.ts` registers pages like:
+	 *
+	 *     pages: {
+	 *       'ads-analytics': {
+	 *         path: './admin-overrides/pages/AdsAnalytics.svelte',
+	 *         nav: { label: 'Ads Analytics', icon: 'chart-bar', group: 'Insights' },
+	 *       }
+	 *     }
+	 *
+	 * This view:
+	 *   1. Reads :slug from the router
+	 *   2. Looks up config.pages[slug] — if missing, renders NotFound
+	 *   3. Dynamically imports the component via importMap and mounts it
+	 */
+
+	import { onMount } from 'svelte'
+	import type { Component } from 'svelte'
+	import { routeStore } from '$lib/router/index.svelte.js'
+	import { getQuoinContext, loadComponent } from '$lib/context.svelte.js'
+	import NotFoundView from './NotFoundView.svelte'
+
+	const ctx = getQuoinContext()
+	const slug = $derived(routeStore.params.slug ?? '')
+	const entry = $derived(ctx.config.pages[slug])
+
+	let component = $state<Component<any> | null>(null)
+	let loadError = $state<string | null>(null)
+
+	// Re-load when the slug changes (consumer navigates between custom pages).
+	$effect(() => {
+		component = null
+		loadError = null
+		if (!entry) return
+
+		loadComponent(entry.path, ctx.importMap)
+			.then((c) => {
+				component = c
+			})
+			.catch((err) => {
+				loadError = err instanceof Error ? err.message : String(err)
+				console.error(`[quoin:CustomPageView] Failed to load "${slug}":`, err)
+			})
+	})
+</script>
+
+{#if !entry}
+	<NotFoundView />
+{:else if loadError}
+	<div class="p-6 text-red-600">Failed to load page: {loadError}</div>
+{:else if component}
+	{@const PageComponent = component}
+	<PageComponent />
+{:else}
+	<div class="p-6 text-muted-foreground">Loading…</div>
+{/if}

package/src/views/DashboardView.svelte

@@ -0,0 +1,370 @@
+<script lang="ts">
+import { resolve } from '$lib/router/index.svelte.js'
+import RangeFilter from '$lib/components/RangeFilter.svelte'
+import KpiCard from '$lib/components/KpiCard.svelte'
+import TimeSeriesChart from '$lib/components/charts/TimeSeriesChart.svelte'
+import Slot from '$lib/Slot.svelte'
+
+type Range = '24h' | '7d' | '30d'
+
+type Bucket = { day: string; count: number }
+type RangeEnvelope = {
+	current: number
+	previous: number
+	buckets: Bucket[]
+}
+type TopAdRow = {
+	adId: string
+	title: string
+	impressions: number
+	clicks: number
+	ctr: number
+}
+type TopPostRow = {
+	postId: string
+	title: string
+	slug: string
+	impressions: number
+}
+type RecentPostRow = {
+	id: string
+	title: string
+	slug: string
+	_status: string
+	updatedAt: string
+	authorName: string
+}
+type PostsTopEnvelope = {
+	records: TopPostRow[]
+	publishedCurrent: number
+	publishedPrevious: number
+}
+
+let range = $state<Range>('7d')
+
+let imp = $state<RangeEnvelope | null>(null)
+let clk = $state<RangeEnvelope | null>(null)
+let postsTop = $state<PostsTopEnvelope | null>(null)
+let topAds = $state<TopAdRow[] | null>(null)
+let postsRecent = $state<RecentPostRow[] | null>(null)
+
+let adsForbidden = $state(false)
+let isLoading = $state(false)
+let networkErr = $state<string | null>(null)
+
+type SortKey = 'ctr' | 'impressions' | 'clicks' | 'title'
+let topAdsSort = $state<SortKey>('ctr')
+let topAdsDir = $state<'asc' | 'desc'>('desc')
+
+async function fetchJson<T>(url: string): Promise<{ ok: true; data: T } | { ok: false; status: number }> {
+	try {
+		const res = await fetch(url, { credentials: 'include' })
+		if (!res.ok) return { ok: false, status: res.status }
+		const data = (await res.json()) as T
+		return { ok: true, data }
+	} catch (_err) {
+		return { ok: false, status: 0 }
+	}
+}
+
+async function fetchAll(r: Range) {
+	isLoading = true
+	networkErr = null
+
+	const [impRes, clkRes, adsTopRes, postsTopRes, recentRes] = await Promise.all([
+		fetchJson<RangeEnvelope>(`/api/stats/ads/impressions?range=${r}`),
+		fetchJson<RangeEnvelope>(`/api/stats/ads/clicks?range=${r}`),
+		fetchJson<{ records: TopAdRow[] }>(`/api/stats/ads/top?range=${r}&limit=5`),
+		fetchJson<PostsTopEnvelope>(`/api/stats/posts/top?range=${r}&limit=5`),
+		fetchJson<{ records: RecentPostRow[] }>(`/api/stats/posts/recent?limit=10`),
+	])
+
+	// Ad endpoints may 403 for editor role — fall back gracefully.
+	const adsBlocked =
+		(impRes.ok === false && impRes.status === 403) ||
+		(clkRes.ok === false && clkRes.status === 403) ||
+		(adsTopRes.ok === false && adsTopRes.status === 403)
+	adsForbidden = adsBlocked
+
+	imp = impRes.ok ? impRes.data : null
+	clk = clkRes.ok ? clkRes.data : null
+	topAds = adsTopRes.ok ? adsTopRes.data.records : null
+	postsTop = postsTopRes.ok ? postsTopRes.data : null
+	postsRecent = recentRes.ok ? recentRes.data.records : null
+
+	isLoading = false
+}
+
+$effect(() => {
+	void fetchAll(range)
+})
+
+// CTR derivation — guard against div by zero.
+const ctrCurrent = $derived(
+	imp && imp.current > 0 && clk ? clk.current / imp.current : imp ? 0 : null,
+)
+const ctrPrevious = $derived(
+	imp && imp.previous > 0 && clk ? clk.previous / imp.previous : imp ? 0 : null,
+)
+
+const sortedTopAds = $derived.by(() => {
+	if (!topAds) return [] as TopAdRow[]
+	const arr = [...topAds]
+	const dir = topAdsDir === 'desc' ? -1 : 1
+	arr.sort((a, b) => {
+		const av = (a as Record<string, unknown>)[topAdsSort]
+		const bv = (b as Record<string, unknown>)[topAdsSort]
+		if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir
+		return String(av ?? '').localeCompare(String(bv ?? '')) * dir
+	})
+	return arr
+})
+
+function toggleSort(key: SortKey) {
+	if (topAdsSort === key) {
+		topAdsDir = topAdsDir === 'desc' ? 'asc' : 'desc'
+	} else {
+		topAdsSort = key
+		topAdsDir = 'desc'
+	}
+}
+
+// Relative time via native Intl.RelativeTimeFormat (no extra dep).
+const relFmt = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+function relativeFromNow(iso: string): string {
+	const then = new Date(iso).getTime()
+	if (Number.isNaN(then)) return iso
+	const diffMs = then - Date.now()
+	const abs = Math.abs(diffMs)
+	const min = 60_000,
+		hr = 3_600_000,
+		day = 86_400_000
+	if (abs < hr) return relFmt.format(Math.round(diffMs / min), 'minute')
+	if (abs < day) return relFmt.format(Math.round(diffMs / hr), 'hour')
+	if (abs < 30 * day) return relFmt.format(Math.round(diffMs / day), 'day')
+	if (abs < 365 * day) return relFmt.format(Math.round(diffMs / (30 * day)), 'month')
+	return relFmt.format(Math.round(diffMs / (365 * day)), 'year')
+}
+
+function ctrPct(value: number): string {
+	return (value * 100).toFixed(2) + '%'
+}
+</script>
+
+<div class="mx-auto max-w-7xl space-y-6">
+	<!-- Header + range filter -->
+	<header class="flex flex-wrap items-start justify-between gap-4">
+		<div>
+			<h1
+				class="text-2xl font-semibold tracking-tight"
+				style="font-family: var(--font-display);"
+			>
+				Welcome back
+			</h1>
+			<p class="mt-1 text-sm text-muted-foreground">Operational overview</p>
+		</div>
+		<div class="flex items-center gap-2">
+			<Slot name="dashboard.actions" />
+			<RangeFilter bind:value={range} />
+		</div>
+	</header>
+
+	{#if networkErr}
+		<div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+			{networkErr}
+		</div>
+	{/if}
+
+	<!-- KPI cards -->
+	<section class="grid grid-cols-1 gap-4 md:grid-cols-4">
+		{#if adsForbidden}
+			<div class="rounded-lg border border-border/60 bg-card p-4 shadow-sm">
+				<p class="text-sm font-medium text-muted-foreground">Total Impressions</p>
+				<p class="mt-2 text-3xl font-semibold tracking-tight text-muted-foreground">—</p>
+				<p class="mt-2 text-xs text-muted-foreground">Admin only</p>
+			</div>
+			<div class="rounded-lg border border-border/60 bg-card p-4 shadow-sm">
+				<p class="text-sm font-medium text-muted-foreground">Total Clicks</p>
+				<p class="mt-2 text-3xl font-semibold tracking-tight text-muted-foreground">—</p>
+				<p class="mt-2 text-xs text-muted-foreground">Admin only</p>
+			</div>
+			<div class="rounded-lg border border-border/60 bg-card p-4 shadow-sm">
+				<p class="text-sm font-medium text-muted-foreground">CTR</p>
+				<p class="mt-2 text-3xl font-semibold tracking-tight text-muted-foreground">—</p>
+				<p class="mt-2 text-xs text-muted-foreground">Admin only</p>
+			</div>
+		{:else}
+			<KpiCard
+				label="Total Impressions"
+				current={imp ? imp.current : null}
+				previous={imp ? imp.previous : null}
+				format="int"
+			/>
+			<KpiCard
+				label="Total Clicks"
+				current={clk ? clk.current : null}
+				previous={clk ? clk.previous : null}
+				format="int"
+			/>
+			<KpiCard
+				label="CTR"
+				current={ctrCurrent}
+				previous={ctrPrevious}
+				format="percent"
+			/>
+		{/if}
+		<KpiCard
+			label="Published Posts"
+			current={postsTop ? postsTop.publishedCurrent : null}
+			previous={postsTop ? postsTop.publishedPrevious : null}
+			format="int"
+		/>
+	</section>
+
+	<!-- Charts -->
+	<section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+		<div class="rounded-lg border border-border/60 bg-card p-4 shadow-sm">
+			<h3 class="mb-3 text-sm font-semibold">Impressions over time</h3>
+			{#if adsForbidden}
+				<div class="flex h-72 items-center justify-center text-sm text-muted-foreground">
+					Insufficient access
+				</div>
+			{:else}
+				<TimeSeriesChart data={imp ? imp.buckets : []} />
+			{/if}
+		</div>
+		<div class="rounded-lg border border-border/60 bg-card p-4 shadow-sm">
+			<h3 class="mb-3 text-sm font-semibold">Clicks over time</h3>
+			{#if adsForbidden}
+				<div class="flex h-72 items-center justify-center text-sm text-muted-foreground">
+					Insufficient access
+				</div>
+			{:else}
+				<TimeSeriesChart data={clk ? clk.buckets : []} />
+			{/if}
+		</div>
+	</section>
+
+	<!-- Tables: Top Ads / Top Posts / Recent Posts -->
+	<section class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+		<!-- Top Ads -->
+		<div class="rounded-lg border border-border/60 bg-card shadow-sm">
+			<header class="border-b border-border px-4 py-3">
+				<h3 class="text-sm font-semibold">Top Ads</h3>
+				<p class="text-xs text-muted-foreground">by CTR</p>
+			</header>
+			{#if adsForbidden}
+				<p class="px-4 py-8 text-center text-sm text-muted-foreground">Insufficient access</p>
+			{:else if !topAds || topAds.length === 0}
+				<p class="px-4 py-8 text-center text-sm text-muted-foreground">No data for this range</p>
+			{:else}
+				<table class="w-full text-sm">
+					<thead class="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+						<tr>
+							<th class="cursor-pointer px-3 py-2" onclick={() => toggleSort('title')}>Title</th>
+							<th class="cursor-pointer px-3 py-2 text-right" onclick={() => toggleSort('impressions')}>Imp</th>
+							<th class="cursor-pointer px-3 py-2 text-right" onclick={() => toggleSort('clicks')}>Clk</th>
+							<th class="cursor-pointer px-3 py-2 text-right" onclick={() => toggleSort('ctr')}>CTR</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each sortedTopAds as row (row.adId)}
+							<tr class="border-t border-border/60">
+								<td class="px-3 py-2 truncate max-w-[180px]">{row.title || '(untitled)'}</td>
+								<td class="px-3 py-2 text-right tabular-nums">{row.impressions}</td>
+								<td class="px-3 py-2 text-right tabular-nums">{row.clicks}</td>
+								<td class="px-3 py-2 text-right tabular-nums">{ctrPct(row.ctr)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</div>
+
+		<!-- Top Posts -->
+		<div class="rounded-lg border border-border/60 bg-card shadow-sm">
+			<header class="border-b border-border px-4 py-3">
+				<h3 class="text-sm font-semibold">Top Posts</h3>
+				<p class="text-xs text-muted-foreground">by impressions</p>
+			</header>
+			{#if !postsTop || postsTop.records.length === 0}
+				<p class="px-4 py-8 text-center text-sm text-muted-foreground">No data for this range</p>
+			{:else}
+				<table class="w-full text-sm">
+					<thead class="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+						<tr>
+							<th class="px-3 py-2">Title</th>
+							<th class="px-3 py-2">Slug</th>
+							<th class="px-3 py-2 text-right">Imp</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each postsTop.records as row (row.postId)}
+							<tr class="border-t border-border/60">
+								<td class="px-3 py-2 truncate max-w-[180px]">
+									<a
+										href={resolve(`/posts/${row.postId}`)}
+										class="text-primary hover:underline"
+									>
+										{row.title || '(untitled)'}
+									</a>
+								</td>
+								<td class="px-3 py-2 truncate max-w-[120px] text-muted-foreground">{row.slug}</td>
+								<td class="px-3 py-2 text-right tabular-nums">{row.impressions}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</div>
+
+		<!-- Recent Posts -->
+		<div class="rounded-lg border border-border/60 bg-card shadow-sm">
+			<header class="border-b border-border px-4 py-3">
+				<h3 class="text-sm font-semibold">Recent Posts</h3>
+				<p class="text-xs text-muted-foreground">last 10 updated</p>
+			</header>
+			{#if !postsRecent || postsRecent.length === 0}
+				<p class="px-4 py-8 text-center text-sm text-muted-foreground">No recent posts</p>
+			{:else}
+				<table class="w-full text-sm">
+					<thead class="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+						<tr>
+							<th class="px-3 py-2">Title</th>
+							<th class="px-3 py-2">Status</th>
+							<th class="px-3 py-2">Updated</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each postsRecent as row (row.id)}
+							<tr class="border-t border-border/60">
+								<td class="px-3 py-2 truncate max-w-[180px]">
+									<a
+										href={resolve(`/posts/${row.id}`)}
+										class="text-primary hover:underline"
+									>
+										{row.title || '(untitled)'}
+									</a>
+								</td>
+								<td class="px-3 py-2">
+									<span
+										class="inline-flex rounded px-2 py-0.5 text-xs font-medium {row._status === 'published'
+											? 'bg-green-100 text-green-800'
+											: 'bg-gray-100 text-gray-700'}"
+									>
+										{row._status}
+									</span>
+								</td>
+								<td class="px-3 py-2 text-xs text-muted-foreground">{relativeFromNow(row.updatedAt)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</div>
+	</section>
+
+	{#if isLoading}
+		<p class="text-center text-xs text-muted-foreground">Loading…</p>
+	{/if}
+</div>

package/src/views/GlobalEditView.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { page } from '$lib/router/index.svelte.js'
+import { schema } from '$lib/stores/schema.svelte.js'
+import { getGlobal, updateGlobal } from '$lib/api/globals.js'
+import DynamicForm from '$lib/components/DynamicForm.svelte'
+import { toast } from 'svelte-sonner'
+
+let globalKey = $derived(page.params.key ?? '')
+let globalSchema = $derived(schema.globals.find((g) => g.key === globalKey))
+
+let data = $state<Record<string, any>>({})
+let formData = $state<Record<string, any>>({})
+let isLoading = $state(true)
+let isSubmitting = $state(false)
+let errors = $state<Record<string, string>>({})
+
+// Fetch global data whenever key changes and schema is available
+$effect(() => {
+	if (globalKey && globalSchema) {
+		loadGlobal(globalKey)
+	}
+})
+
+async function loadGlobal(k: string) {
+	isLoading = true
+	const result = await getGlobal(k)
+	isLoading = false
+	if (result.ok) {
+		data = result.data
+		formData = { ...result.data }
+	} else {
+		toast.error(result.error)
+	}
+}
+
+async function handleSubmit() {
+	isSubmitting = true
+	errors = {}
+
+	const result = await updateGlobal(globalKey, formData)
+	isSubmitting = false
+
+	if (result.ok) {
+		data = result.data
+		formData = { ...result.data }
+		toast.success('Settings saved')
+	} else {
+		if (result.details) {
+			errors = result.details
+		}
+		toast.error(result.error)
+	}
+}
+</script>
+
+{#if !globalSchema}
+  <div class="flex h-full items-center justify-center">
+    <p class="text-muted-foreground">Loading...</p>
+  </div>
+{:else if isLoading}
+  <div class="flex h-full items-center justify-center">
+    <p class="text-muted-foreground">Loading...</p>
+  </div>
+{:else}
+  <header class="sticky top-0 z-10 border-b border-border bg-background">
+    <div class="flex items-center justify-between px-7 py-3.5">
+      <div class="flex min-w-0 items-center gap-2.5 text-[13px] text-muted-foreground">
+        <span class="font-medium text-foreground">{globalSchema.label}</span>
+      </div>
+      <button
+        type="button"
+        onclick={handleSubmit}
+        disabled={isSubmitting}
+        class="bg-primary px-4 py-2 text-xs font-semibold tracking-wide text-primary-foreground rounded-lg shadow-sm transition-colors hover:bg-primary/90 disabled:opacity-60"
+      >
+        {isSubmitting ? 'Saving…' : 'Save'}
+      </button>
+    </div>
+
+    <div class="px-7 pb-5 pt-5">
+      <h1 class="font-display text-[28px] font-semibold leading-tight tracking-tight text-foreground">
+        {globalSchema.label}
+      </h1>
+      {#if globalSchema.description}
+        <p class="mt-1 text-sm text-muted-foreground">{globalSchema.description}</p>
+      {/if}
+    </div>
+  </header>
+
+  <div class="px-7 py-8">
+    <div class="max-w-2xl">
+      <DynamicForm
+        fields={globalSchema.fields}
+        initialData={data}
+        {errors}
+        bind:formData
+      />
+    </div>
+  </div>
+{/if}