@quoin-cms/admin 0.1.0

package/src/views/AdsAnalyticsView.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+import { onMount } from 'svelte'
+import { toast } from 'svelte-sonner'
+import TimeSeriesChart from '$lib/components/charts/TimeSeriesChart.svelte'
+
+type SummaryRow = {
+	id: string
+	title: string
+	impressions: number
+	clicks: number
+	ctr: number
+	active: boolean
+}
+type DayPoint = { day: string; count: number }
+type SeriesPoint = { day: string; dayDate: Date; count: number }
+
+let summary = $state<SummaryRow[]>([])
+let impressionsByDay = $state<DayPoint[]>([])
+let clicksByDay = $state<DayPoint[]>([])
+let isLoading = $state(false)
+
+// Date range filter -- default last 30 days
+function isoDate(d: Date): string {
+	return d.toISOString().slice(0, 10)
+}
+const today = new Date()
+const thirtyAgo = new Date()
+thirtyAgo.setDate(today.getDate() - 30)
+
+let from = $state(isoDate(thirtyAgo))
+let to = $state(isoDate(today))
+
+let impressionsSeries = $derived<SeriesPoint[]>(
+	impressionsByDay.map((p) => ({ ...p, dayDate: new Date(p.day), count: Number(p.count) })),
+)
+let clicksSeries = $derived<SeriesPoint[]>(
+	clicksByDay.map((p) => ({ ...p, dayDate: new Date(p.day), count: Number(p.count) })),
+)
+
+function pickRangePreset(fromStr: string, toStr: string): string {
+	const fromD = new Date(fromStr)
+	const toD = new Date(toStr)
+	const diffDays = Math.round((toD.getTime() - fromD.getTime()) / (1000 * 60 * 60 * 24))
+	if (diffDays <= 1) return 'today'
+	if (diffDays <= 7) return '7d'
+	if (diffDays <= 30) return '30d'
+	return 'all'
+}
+
+async function fetchAnalytics() {
+	isLoading = true
+	const range = pickRangePreset(from, to)
+	try {
+		const res = await fetch(`/api/ads/analytics?range=${range}&from=${from}&to=${to}`, {
+			credentials: 'include',
+		})
+		if (!res.ok) {
+			toast.error(`Failed to load analytics (${res.status})`)
+			return
+		}
+		const data = await res.json()
+		summary = (data.summary ?? []) as SummaryRow[]
+		impressionsByDay = (data.impressionsByDay ?? []) as DayPoint[]
+		clicksByDay = (data.clicksByDay ?? []) as DayPoint[]
+	} catch (err) {
+		toast.error(`Network error: ${(err as Error).message}`)
+	} finally {
+		isLoading = false
+	}
+}
+
+onMount(() => {
+	fetchAnalytics()
+})
+
+function handleDateChange() {
+	fetchAnalytics()
+}
+</script>
+
+<div class="space-y-6">
+	<header class="flex items-center justify-between">
+		<div>
+			<h1 class="text-2xl font-semibold tracking-tight">Ad Analytics</h1>
+			<p class="text-sm text-muted-foreground">Impressions, clicks, and CTR per ad.</p>
+		</div>
+		<div class="flex items-end gap-3">
+			<label class="flex flex-col text-xs text-muted-foreground">
+				From
+				<input
+					type="date"
+					bind:value={from}
+					onchange={handleDateChange}
+					class="mt-1 h-9 rounded-md border border-border bg-card px-2 text-sm"
+				/>
+			</label>
+			<label class="flex flex-col text-xs text-muted-foreground">
+				To
+				<input
+					type="date"
+					bind:value={to}
+					onchange={handleDateChange}
+					class="mt-1 h-9 rounded-md border border-border bg-card px-2 text-sm"
+				/>
+			</label>
+		</div>
+	</header>
+
+	<section class="rounded-lg border border-border bg-card p-4">
+		<h2 class="mb-3 text-sm font-semibold">Daily Impressions</h2>
+		<TimeSeriesChart data={impressionsByDay} emptyMessage="No impressions in range." />
+	</section>
+
+	<section class="rounded-lg border border-border bg-card p-4">
+		<h2 class="mb-3 text-sm font-semibold">Daily Clicks</h2>
+		<TimeSeriesChart data={clicksByDay} emptyMessage="No clicks in range." />
+	</section>
+
+	<section class="rounded-lg border border-border bg-card">
+		<header class="border-b border-border px-4 py-3">
+			<h2 class="text-sm font-semibold">Per-Ad Summary</h2>
+		</header>
+		{#if isLoading}
+			<div class="flex justify-center py-12">
+				<div class="h-6 w-6 rounded-full border-2 border-primary/20 border-t-primary animate-spin"></div>
+			</div>
+		{:else if summary.length === 0}
+			<p class="px-4 py-8 text-center text-sm text-muted-foreground">No data for selected 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-4 py-2">Ad Title</th>
+						<th class="px-4 py-2 text-right">Impressions</th>
+						<th class="px-4 py-2 text-right">Clicks</th>
+						<th class="px-4 py-2 text-right">CTR %</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each summary as row}
+						<tr class="border-t border-border/60">
+							<td class="px-4 py-2">{row.title || '(untitled)'}</td>
+							<td class="px-4 py-2 text-right tabular-nums">{row.impressions}</td>
+							<td class="px-4 py-2 text-right tabular-nums">{row.clicks}</td>
+							<td class="px-4 py-2 text-right tabular-nums">{row.ctr}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</section>
+</div>

package/src/views/CollectionEditView.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+import { page } from '$lib/router/index.svelte.js'
+import { goto } from '$lib/router/index.svelte.js'
+import { resolve } from '$lib/router/index.svelte.js'
+import { schema, getCollectionByKey } from '$lib/stores/schema.svelte.js'
+import { getRecord, updateRecord, deleteRecord, acquireLock, releaseLock } from '$lib/api/records.js'
+import DocumentEditLayout from '$lib/components/DocumentEditLayout.svelte'
+import DeleteDialog from '$lib/components/DeleteDialog.svelte'
+import { toast } from 'svelte-sonner'
+import { onMount, onDestroy } from 'svelte'
+
+let collectionKey = $derived(page.params.collection ?? '')
+let id = $derived(page.params.id ?? '')
+let collection = $derived(getCollectionByKey(schema.collections, collectionKey))
+
+let record = $state<Record<string, any> | null>(null)
+let isLoading = $state(true)
+let isSubmitting = $state(false)
+let errors = $state<Record<string, string>>({})
+let deleteDialogOpen = $state(false)
+let isDeleting = $state(false)
+let lockInfo = $state<{ userName: string } | null>(null)
+let lockRefreshInterval: ReturnType<typeof setInterval> | undefined
+
+onMount(async () => {
+	const hasDrafts = collection?.versions?.drafts != null
+	const result = await getRecord(collectionKey, id, '*', { draft: hasDrafts })
+	isLoading = false
+	if (result.ok) {
+		record = result.data
+
+		// Acquire document lock
+		const lockResult = await acquireLock(collectionKey, id)
+		if (lockResult.ok && lockResult.data.locked && lockResult.data.lock) {
+			lockInfo = { userName: lockResult.data.lock.userName }
+		}
+		// Refresh lock every 2 minutes
+		lockRefreshInterval = setInterval(async () => {
+			await acquireLock(collectionKey, id)
+		}, 2 * 60 * 1000)
+	} else {
+		toast.error(result.error)
+	}
+})
+
+onDestroy(() => {
+	if (lockRefreshInterval) clearInterval(lockRefreshInterval)
+	releaseLock(collectionKey, id)
+})
+
+async function handleSave(data: Record<string, any>) {
+	isSubmitting = true
+	errors = {}
+	const isDraft = data._status === 'draft'
+	const result = await updateRecord(collectionKey, id, data, { draft: isDraft })
+	isSubmitting = false
+	if (result.ok) {
+		record = result.data
+		toast.success('Record updated')
+	} else {
+		if (result.details) errors = result.details
+		toast.error(result.error)
+	}
+}
+
+async function handleDelete() {
+	isDeleting = true
+	const result = await deleteRecord(collectionKey, id)
+	isDeleting = false
+	deleteDialogOpen = false
+	if (result.ok) {
+		toast.success('Record deleted')
+		await goto(resolve(`/${collectionKey}`))
+	} else {
+		toast.error(result.error)
+	}
+}
+</script>
+
+{#if !collection}
+	<div class="flex h-full items-center justify-center">
+		<p class="text-muted-foreground">Collection not found</p>
+	</div>
+{:else if isLoading}
+	<div class="flex h-full items-center justify-center">
+		<div class="flex flex-col items-center gap-3">
+			<div class="h-6 w-6 rounded-full border-2 border-primary/20 border-t-primary animate-spin-slow"></div>
+			<p class="text-sm text-muted-foreground">Loading...</p>
+		</div>
+	</div>
+{:else if !record}
+	<div class="flex h-full items-center justify-center">
+		<p class="text-muted-foreground">Record not found</p>
+	</div>
+{:else}
+	{#if lockInfo}
+		<div class="border-b border-amber-200 bg-amber-50 px-7 py-2.5 text-sm text-amber-800">
+			This document is being edited by <strong>{lockInfo.userName}</strong>. Your changes may be overwritten.
+		</div>
+	{/if}
+	<DocumentEditLayout
+		{collection}
+		{record}
+		mode="edit"
+		{isSubmitting}
+		{errors}
+		onSave={handleSave}
+	/>
+
+	<DeleteDialog
+		bind:open={deleteDialogOpen}
+		title="Delete {collection.label}"
+		description="Are you sure you want to delete this record? This action cannot be undone."
+		{isDeleting}
+		onConfirm={handleDelete}
+	/>
+{/if}

package/src/views/CollectionListView.svelte

@@ -0,0 +1,347 @@
+<script lang="ts">
+import { page } from '$lib/router/index.svelte.js'
+import { schema, getCollectionByKey } from '$lib/stores/schema.svelte.js'
+import { listRecords, deleteRecord } from '$lib/api/records.js'
+import RecordTable from '$lib/components/RecordTable.svelte'
+import RecordGrid from '$lib/components/RecordGrid.svelte'
+import Pagination from '$lib/components/Pagination.svelte'
+import DeleteDialog from '$lib/components/DeleteDialog.svelte'
+import { toast } from 'svelte-sonner'
+import { Search, Download, Columns3, ChevronUp, ChevronDown, LayoutGrid, List } from 'lucide-svelte'
+
+type ViewMode = 'list' | 'grid'
+
+let collectionKey = $derived(page.params.collection ?? '')
+let collection = $derived(getCollectionByKey(schema.collections, collectionKey))
+
+let records = $state<Record<string, any>[]>([])
+let currentPage = $state(1)
+let totalPages = $state(1)
+let totalRecords = $state(0)
+let perPage = $state(20)
+let sort = $state('')
+let searchQuery = $state('')
+let isLoading = $state(false)
+
+let deleteDialogOpen = $state(false)
+let deleteTargetId = $state('')
+let isDeleting = $state(false)
+
+let searchTimeout: ReturnType<typeof setTimeout>
+
+let visibleColumns = $state<string[] | null>(null)
+let loadedKey = $state<string | null>(null)
+let columnPickerOpen = $state(false)
+let viewMode = $state<ViewMode>('list')
+
+function hasImageField(flds: any[]): boolean {
+  return flattenFields(flds).some((f: any) => f.type === 'file' || f.type === 'upload')
+}
+
+$effect(() => {
+  if (!collection) return
+  if (typeof localStorage !== 'undefined') {
+    const stored = localStorage.getItem(`view:${collectionKey}`)
+    if (stored === 'grid' || stored === 'list') {
+      viewMode = stored
+      return
+    }
+  }
+  viewMode = collectionKey === 'media' ? 'grid' : 'list'
+})
+
+function setViewMode(mode: ViewMode) {
+  viewMode = mode
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(`view:${collectionKey}`, mode)
+  }
+}
+
+function flattenFields(flds: any[]): any[] {
+	const out: any[] = []
+	for (const f of flds) {
+		if (f.type === 'tabs') {
+			for (const t of (f.tabs ?? [])) out.push(...flattenFields(t.fields ?? []))
+			continue
+		}
+		out.push(f)
+	}
+	return out
+}
+let allFields = $derived(collection ? flattenFields(collection.fields).filter((f: any) => !f.hidden) : [])
+
+$effect(() => {
+	if (!collection) return
+	if (loadedKey === collectionKey) return
+	const stored = typeof localStorage !== 'undefined'
+		? localStorage.getItem(`cols:${collectionKey}`)
+		: null
+	if (stored) {
+		try { visibleColumns = JSON.parse(stored) } catch { visibleColumns = null }
+	}
+	if (!visibleColumns || !visibleColumns.length) {
+		visibleColumns = collection.admin?.defaultColumns?.length
+			? [...collection.admin.defaultColumns]
+			: flattenFields(collection.fields).filter((f: any) => !f.hidden).slice(0, 4).map((f: any) => f.name)
+	}
+	loadedKey = collectionKey
+})
+
+function persistColumns(next: string[]) {
+	visibleColumns = next
+	if (typeof localStorage !== 'undefined') {
+		localStorage.setItem(`cols:${collectionKey}`, JSON.stringify(next))
+	}
+}
+
+function toggleColumn(name: string) {
+	const curr = visibleColumns ?? []
+	persistColumns(curr.includes(name) ? curr.filter((n) => n !== name) : [...curr, name])
+}
+
+function moveColumn(name: string, dir: -1 | 1) {
+	const curr = [...(visibleColumns ?? [])]
+	const i = curr.indexOf(name)
+	if (i < 0) return
+	const j = i + dir
+	if (j < 0 || j >= curr.length) return
+	;[curr[i], curr[j]] = [curr[j], curr[i]]
+	persistColumns(curr)
+}
+
+let orderedFields = $derived.by(() => {
+	const selected = (visibleColumns ?? [])
+		.map((n) => allFields.find((f: any) => f.name === n))
+		.filter(Boolean)
+	const rest = allFields.filter((f: any) => !(visibleColumns ?? []).includes(f.name))
+	return [...selected, ...rest]
+})
+
+$effect(() => {
+	if (collection) {
+		fetchRecords()
+	}
+})
+
+async function fetchRecords() {
+	if (!collection) return
+	isLoading = true
+
+	const defaultSort = collection.admin?.defaultSort || '-createdAt'
+	const relationshipFields = collection.fields
+		.filter((f) => f.type === 'relationship')
+		.map((f) => f.name)
+	const result = await listRecords(collectionKey, {
+		page: currentPage,
+		perPage,
+		sort: sort || defaultSort,
+		search: searchQuery || undefined,
+		expand: relationshipFields.length ? relationshipFields.join(',') : undefined,
+	})
+
+	isLoading = false
+	if (result.ok) {
+		records = result.data.records
+		totalPages = result.data.totalPages
+		totalRecords = result.data.totalRecords
+	} else {
+		toast.error(result.error)
+	}
+}
+
+function handleSearch(e: Event) {
+	const target = e.target as HTMLInputElement
+	searchQuery = target.value
+	clearTimeout(searchTimeout)
+	searchTimeout = setTimeout(() => {
+		currentPage = 1
+		fetchRecords()
+	}, 300)
+}
+
+function handleSort(newSort: string) {
+	sort = newSort
+	currentPage = 1
+	fetchRecords()
+}
+
+function handlePageChange(newPage: number) {
+	currentPage = newPage
+	fetchRecords()
+}
+
+function handleDeleteClick(id: string) {
+	deleteTargetId = id
+	deleteDialogOpen = true
+}
+
+async function confirmDelete() {
+	isDeleting = true
+	const result = await deleteRecord(collectionKey, deleteTargetId)
+	isDeleting = false
+	deleteDialogOpen = false
+
+	if (result.ok) {
+		toast.success('Record deleted')
+		await fetchRecords()
+	} else {
+		toast.error(result.error)
+	}
+}
+</script>
+
+{#if !collection}
+  <div class="flex h-full items-center justify-center">
+    <p class="text-muted-foreground">Collection not found</p>
+  </div>
+{:else}
+  <div class="space-y-5">
+    <!-- Toolbar: search + collection-specific actions -->
+    <div class="flex items-center justify-between gap-3">
+      <div class="relative w-full max-w-sm">
+        <Search class="absolute left-3.5 top-3 h-4 w-4 text-muted-foreground/60" />
+        <input
+          type="text"
+          value={searchQuery}
+          oninput={handleSearch}
+          class="h-10 w-full rounded-lg border border-border/80 bg-card pl-10 pr-4 text-sm shadow-sm transition-all placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"
+          placeholder="Search {collection.labelPlural || collection.label}..."
+        />
+      </div>
+      {#if hasImageField(collection.fields)}
+        <div class="inline-flex items-center gap-0.5 rounded-lg border border-border/80 bg-card p-0.5 shadow-sm">
+          <button
+            type="button"
+            onclick={() => setViewMode('list')}
+            class="inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors {viewMode === 'list' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:bg-secondary/60'}"
+            title="List view"
+          >
+            <List class="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            onclick={() => setViewMode('grid')}
+            class="inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors {viewMode === 'grid' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:bg-secondary/60'}"
+            title="Grid view"
+          >
+            <LayoutGrid class="h-4 w-4" />
+          </button>
+        </div>
+      {/if}
+      <div class="relative">
+        <button
+          type="button"
+          onclick={() => (columnPickerOpen = !columnPickerOpen)}
+          class="inline-flex items-center gap-2 rounded-lg border border-border/80 bg-card px-3 py-2 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-secondary"
+        >
+          <Columns3 class="h-4 w-4" />
+          Columns
+        </button>
+        {#if columnPickerOpen}
+          <div
+            class="absolute right-0 z-20 mt-2 w-56 rounded-lg border border-border/80 bg-card p-2 shadow-lg"
+            onmouseleave={() => (columnPickerOpen = false)}
+            role="menu"
+          >
+            {#each orderedFields as f, idx (f.name)}
+              {@const checked = (visibleColumns ?? []).includes(f.name)}
+              {@const pos = (visibleColumns ?? []).indexOf(f.name)}
+              <div class="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-secondary">
+                <label class="flex flex-1 cursor-pointer items-center gap-2 px-1 py-1 text-sm">
+                  <input
+                    type="checkbox"
+                    {checked}
+                    onchange={() => toggleColumn(f.name)}
+                  />
+                  <span>{f.label ?? f.name}</span>
+                </label>
+                {#if checked}
+                  <button
+                    type="button"
+                    class="rounded p-0.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
+                    disabled={pos <= 0}
+                    onclick={() => moveColumn(f.name, -1)}
+                    title="Move up"
+                  >
+                    <ChevronUp class="h-3.5 w-3.5" />
+                  </button>
+                  <button
+                    type="button"
+                    class="rounded p-0.5 text-muted-foreground hover:bg-muted disabled:opacity-30"
+                    disabled={pos >= (visibleColumns ?? []).length - 1}
+                    onclick={() => moveColumn(f.name, 1)}
+                    title="Move down"
+                  >
+                    <ChevronDown class="h-3.5 w-3.5" />
+                  </button>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+      {#if collectionKey === 'subscribers'}
+        <a
+          href="/api/subscribers/export.csv"
+          download
+          class="inline-flex items-center gap-2 rounded-lg bg-brand-red px-3 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:opacity-90"
+        >
+          <Download class="h-4 w-4" />
+          Export CSV
+        </a>
+      {/if}
+    </div>
+
+    <!-- Top pagination -->
+    <Pagination
+      page={currentPage}
+      {totalPages}
+      {totalRecords}
+      {perPage}
+      onPageChange={handlePageChange}
+      class="border-b border-border/60"
+    />
+
+    <!-- Table -->
+    {#if isLoading}
+      <div class="flex justify-center py-16">
+        <div class="flex flex-col items-center gap-3">
+          <div class="h-6 w-6 rounded-full border-2 border-primary/20 border-t-primary animate-spin-slow"></div>
+          <p class="text-sm text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    {:else if viewMode === 'grid'}
+      <RecordGrid
+        {collection}
+        {records}
+        onDelete={handleDeleteClick}
+      />
+    {:else}
+      <RecordTable
+        {collection}
+        {records}
+        {sort}
+        columnNames={visibleColumns}
+        onSort={handleSort}
+        onDelete={handleDeleteClick}
+      />
+    {/if}
+
+    <!-- Bottom pagination -->
+    <Pagination
+      page={currentPage}
+      {totalPages}
+      {totalRecords}
+      {perPage}
+      onPageChange={handlePageChange}
+    />
+  </div>
+
+  <DeleteDialog
+    bind:open={deleteDialogOpen}
+    title="Delete Record"
+    description="Are you sure you want to delete this record? This action cannot be undone."
+    {isDeleting}
+    onConfirm={confirmDelete}
+  />
+{/if}

package/src/views/CollectionNewView.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+import { page } from '$lib/router/index.svelte.js'
+import { goto } from '$lib/router/index.svelte.js'
+import { resolve } from '$lib/router/index.svelte.js'
+import { schema, getCollectionByKey } from '$lib/stores/schema.svelte.js'
+import { createRecord } from '$lib/api/records.js'
+import DocumentEditLayout from '$lib/components/DocumentEditLayout.svelte'
+import { toast } from 'svelte-sonner'
+import { onMount } from 'svelte'
+
+let collectionKey = $derived(page.params.collection ?? '')
+let collection = $derived(getCollectionByKey(schema.collections, collectionKey))
+
+let isSubmitting = $state(false)
+let errors = $state<Record<string, string>>({})
+let autoCreating = $state(false)
+
+// If autosave is enabled, auto-create a draft to get an ID so autosave works
+onMount(async () => {
+	if (!collection) return
+	const hasAutosave = collection.versions?.drafts?.autosave != null
+	if (hasAutosave) {
+		autoCreating = true
+		const result = await createRecord(collectionKey, { _status: 'draft' }, { draft: true })
+		autoCreating = false
+		if (result.ok && result.data.id) {
+			await goto(resolve(`/${collectionKey}/${result.data.id}`), { replaceState: true })
+		}
+	}
+})
+
+async function handleSave(data: Record<string, any>) {
+	if (!collection) return
+	isSubmitting = true
+	errors = {}
+	const isDraft = data._status === 'draft'
+	const result = await createRecord(collectionKey, data, { draft: isDraft })
+	isSubmitting = false
+	if (result.ok) {
+		toast.success('Record created')
+		await goto(resolve(`/${collectionKey}/${result.data.id}`))
+	} else {
+		if (result.details) errors = result.details
+		toast.error(result.error)
+	}
+}
+</script>
+
+{#if !collection}
+	<div class="flex h-full items-center justify-center">
+		<p class="text-muted-foreground">Collection not found</p>
+	</div>
+{:else if autoCreating}
+	<div class="flex h-full items-center justify-center">
+		<div class="flex flex-col items-center gap-3">
+			<div class="h-6 w-6 rounded-full border-2 border-primary/20 border-t-primary animate-spin-slow"></div>
+			<p class="text-sm text-muted-foreground">Creating draft...</p>
+		</div>
+	</div>
+{:else}
+	<DocumentEditLayout
+		{collection}
+		mode="create"
+		{isSubmitting}
+		{errors}
+		onSave={handleSave}
+	/>
+{/if}