@quoin-cms/admin 0.1.0

package/src/lib/components/RecordTable.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+import { resolve } from '$lib/router/index.svelte.js'
+import { goto } from '$lib/router/index.svelte.js'
+import { cellComponents } from './cells/index.js'
+import type { CollectionSchema, FieldSchema } from '$lib/types/schema.js'
+import { ArrowUp, ArrowDown, Trash2 } from 'lucide-svelte'
+
+let {
+	collection,
+	records,
+	sort = '',
+	columnNames = null,
+	onSort,
+	onDelete,
+}: {
+	collection: CollectionSchema
+	records: Record<string, any>[]
+	sort: string
+	columnNames?: string[] | null
+	onSort: (field: string) => void
+	onDelete: (id: string) => void
+} = $props()
+
+function flatten(flds: FieldSchema[]): FieldSchema[] {
+	const out: FieldSchema[] = []
+	for (const f of flds) {
+		if ((f as any).type === 'tabs') {
+			for (const t of ((f as any).tabs ?? [])) out.push(...flatten(t.fields ?? []))
+			continue
+		}
+		if ((f as any).type === 'row') {
+			out.push(...flatten((f as any).fields ?? []))
+			continue
+		}
+		out.push(f)
+	}
+	return out
+}
+let flatFields = $derived(flatten(collection.fields))
+
+let columns = $derived.by(() => {
+	if (columnNames && columnNames.length) {
+		return columnNames
+			.map((name) => flatFields.find((f) => f.name === name))
+			.filter((f): f is FieldSchema => f !== undefined)
+	}
+	if (collection.admin?.defaultColumns?.length) {
+		return collection.admin.defaultColumns
+			.map((name) => flatFields.find((f) => f.name === name))
+			.filter((f): f is FieldSchema => f !== undefined)
+	}
+	return flatFields.filter((f) => !f.hidden).slice(0, 4)
+})
+
+let titleField = $derived(collection.admin?.useAsTitle || columns[0]?.name || 'id')
+
+let sortField = $derived(sort.startsWith('-') ? sort.slice(1) : sort)
+let sortDir = $derived(sort.startsWith('-') ? 'desc' : 'asc')
+
+function handleSort(fieldName: string) {
+	if (sortField === fieldName) {
+		onSort(sortDir === 'asc' ? `-${fieldName}` : fieldName)
+	} else {
+		onSort(fieldName)
+	}
+}
+</script>
+
+<div class="overflow-x-auto rounded-xl border border-border/60 bg-card shadow-sm">
+  <table class="w-full text-sm">
+    <thead>
+      <tr class="border-b border-border/60">
+        {#each columns as col}
+          <th class="px-4 py-3 text-left">
+            <button
+              class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+              onclick={() => handleSort(col.name)}
+            >
+              {col.label}
+              {#if sortField === col.name}
+                {#if sortDir === 'asc'}
+                  <ArrowUp class="h-3 w-3 text-primary" />
+                {:else}
+                  <ArrowDown class="h-3 w-3 text-primary" />
+                {/if}
+              {/if}
+            </button>
+          </th>
+        {/each}
+        <th class="w-12 px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground"></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#if records.length === 0}
+        <tr>
+          <td colspan={columns.length + 1} class="px-4 py-16 text-center">
+            <div class="flex flex-col items-center gap-2">
+              <div class="h-12 w-12 rounded-xl border-2 border-dashed border-border/80 flex items-center justify-center">
+                <span class="text-lg text-muted-foreground/40">0</span>
+              </div>
+              <p class="text-sm text-muted-foreground">No records found</p>
+            </div>
+          </td>
+        </tr>
+      {:else}
+        {#each records as record, i (record.id)}
+          <tr
+            class="cursor-pointer border-b border-border/40 transition-colors last:border-b-0 hover:bg-secondary/50"
+            onclick={() => goto(resolve(`/${collection.key}/${record.id}`))}
+          >
+            {#each columns as col}
+              <td class="px-4 py-3">
+                {#if col.name === titleField}
+                  <span class="font-medium text-foreground">
+                    {#if cellComponents[col.type]}
+                      {@const CellComponent = cellComponents[col.type]}
+                      <CellComponent
+                        value={record[col.name]}
+                        fieldSchema={col}
+                        {record}
+                      />
+                    {:else}
+                      {record[col.name] ?? '-'}
+                    {/if}
+                  </span>
+                {:else}
+                  <span class="text-muted-foreground">
+                    {#if cellComponents[col.type]}
+                      {@const CellComponent = cellComponents[col.type]}
+                      <CellComponent
+                        value={record[col.name]}
+                        fieldSchema={col}
+                        {record}
+                      />
+                    {:else}
+                      {record[col.name] ?? '-'}
+                    {/if}
+                  </span>
+                {/if}
+              </td>
+            {/each}
+            <td class="px-4 py-3 text-right">
+              <button
+                onclick={(e) => { e.stopPropagation(); onDelete(record.id) }}
+                class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+                title="Delete"
+              >
+                <Trash2 class="h-3.5 w-3.5" />
+              </button>
+            </td>
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+</div>

package/src/lib/components/cells/CheckboxCell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { Check, X } from 'lucide-svelte'
+let { value }: { value: any } = $props()
+</script>
+
+{#if value}
+  <Check class="h-4 w-4 text-green-600" />
+{:else}
+  <X class="h-4 w-4 text-muted-foreground" />
+{/if}

package/src/lib/components/cells/ColorCell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+let { value }: { value: any } = $props()
+</script>
+
+{#if value}
+  <div class="flex items-center gap-1.5">
+    <span
+      class="inline-block h-4 w-4 rounded border"
+      style="background-color: {value}"
+    ></span>
+    <span class="text-xs text-muted-foreground">{value}</span>
+  </div>
+{:else}
+  <span class="text-sm text-muted-foreground">-</span>
+{/if}

package/src/lib/components/cells/DateCell.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { formatDate } from '$lib/utils/format.js'
+let { value }: { value: any } = $props()
+</script>
+
+<span class="text-sm text-muted-foreground">
+  {value ? formatDate(String(value)) : '-'}
+</span>

package/src/lib/components/cells/RelationshipCell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+let { value, fieldSchema }: { value: any; fieldSchema: any } = $props()
+
+let display = $derived.by(() => {
+	if (!value) return '-'
+	if (fieldSchema?.relationType === 'manyToMany') {
+		if (Array.isArray(value)) {
+			return `${value.length} item${value.length !== 1 ? 's' : ''}`
+		}
+		return '-'
+	}
+	// BelongsTo - expanded object or just an ID
+	if (typeof value === 'object' && value !== null) {
+		return value.name || value.title || value.label || value.slug || value.id || '-'
+	}
+	return String(value)
+})
+</script>
+
+<span class="text-sm">{display}</span>

package/src/lib/components/cells/RichTextCell.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { truncate } from '$lib/utils/format.js'
+let { value }: { value: any } = $props()
+
+function extractText(node: any): string {
+	if (node == null) return ''
+	if (typeof node === 'string') return node
+	if (Array.isArray(node)) return node.map(extractText).join(' ')
+	if (typeof node === 'object') {
+		if (typeof node.text === 'string') return node.text
+		if (Array.isArray(node.content)) return node.content.map(extractText).join(' ')
+	}
+	return ''
+}
+
+let plain = $derived(extractText(value).replace(/\s+/g, ' ').trim())
+</script>
+
+<span class="text-sm" title={plain}>
+  {truncate(plain, 60) || '-'}
+</span>

package/src/lib/components/cells/SelectCell.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+let { value, record, fieldSchema }: { value: any; record?: Record<string, any>; fieldSchema?: any } = $props()
+
+let isScheduled = $derived(
+  fieldSchema?.name === 'status' &&
+    value === 'published' &&
+    record?.publishedAt &&
+    new Date(record.publishedAt) > new Date()
+)
+
+let badgeClass = $derived.by(() => {
+  if (isScheduled) return 'bg-yellow-100 text-yellow-800'
+  if (value === 'published') return 'bg-green-100 text-green-800'
+  if (value === 'draft') return 'bg-gray-100 text-gray-800'
+  if (value === 'archived') return 'bg-red-100 text-red-800'
+  return 'border'
+})
+</script>
+
+{#if value}
+  <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {badgeClass}">
+    {isScheduled ? 'Scheduled' : value}
+  </span>
+{:else}
+  <span class="text-sm text-muted-foreground">-</span>
+{/if}

package/src/lib/components/cells/TextCell.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { truncate } from '$lib/utils/format.js'
+let { value }: { value: any } = $props()
+</script>
+
+<span class="text-sm" title={String(value ?? '')}>
+  {truncate(String(value ?? ''), 60)}
+</span>

package/src/lib/components/cells/UploadCell.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+let { value, fieldSchema }: { value: any; fieldSchema: any } = $props()
+
+let display = $derived.by(() => {
+	if (!value) return '-'
+	if (fieldSchema?.multiple) {
+		if (Array.isArray(value)) {
+			return `${value.length} file${value.length !== 1 ? 's' : ''}`
+		}
+		return '-'
+	}
+	// Single upload - show filename or thumbnail
+	if (typeof value === 'object' && value !== null) {
+		return value.filename || '-'
+	}
+	return '-'
+})
+
+let isImage = $derived.by(() => {
+	if (!value || typeof value !== 'object' || fieldSchema?.multiple) return false
+	return value.mimeType?.startsWith('image/')
+})
+
+let imageUrl = $derived.by(() => {
+	if (!isImage || typeof value !== 'object') return ''
+	return value.url || ''
+})
+</script>
+
+{#if isImage && imageUrl}
+  <img src={imageUrl} alt="" class="h-8 w-8 rounded object-cover" />
+{:else}
+  <span class="text-sm text-muted-foreground">{display}</span>
+{/if}

package/src/lib/components/cells/index.ts

@@ -0,0 +1,28 @@
+import TextCell from './TextCell.svelte'
+import CheckboxCell from './CheckboxCell.svelte'
+import SelectCell from './SelectCell.svelte'
+import DateCell from './DateCell.svelte'
+import ColorCell from './ColorCell.svelte'
+import RelationshipCell from './RelationshipCell.svelte'
+import UploadCell from './UploadCell.svelte'
+import RichTextCell from './RichTextCell.svelte'
+import type { Component } from 'svelte'
+
+export const cellComponents: Record<string, Component<any>> = {
+	text: TextCell,
+	textarea: TextCell,
+	slug: TextCell,
+	email: TextCell,
+	number: TextCell,
+	select: SelectCell,
+	checkbox: CheckboxCell,
+	date: DateCell,
+	color: ColorCell,
+	richtext: RichTextCell,
+	relationship: RelationshipCell,
+	upload: UploadCell,
+	file: UploadCell,
+	json: TextCell,
+}
+
+export { TextCell, CheckboxCell, SelectCell, DateCell, ColorCell, RelationshipCell, UploadCell, RichTextCell }

package/src/lib/components/charts/TimeSeriesChart.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+type Point = { day: string; count: number }
+
+const tickFmt = new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' })
+const ttFmt = new Intl.DateTimeFormat('en', { weekday: 'short', month: 'short', day: 'numeric' })
+
+let {
+	data,
+	emptyMessage = 'No data for this range',
+	color = '#D97706',
+}: {
+	data: Point[]
+	emptyMessage?: string
+	color?: string
+} = $props()
+
+let hovered = $state<number | null>(null)
+
+const W = 800
+const H = 240
+const padL = 36
+const padR = 12
+const padT = 16
+const padB = 28
+const innerW = W - padL - padR
+const innerH = H - padT - padB
+
+const points = $derived(
+	data.map((p) => {
+		const date = new Date(p.day)
+		return { ...p, label: tickFmt.format(date), tooltip: ttFmt.format(date) }
+	}),
+)
+
+const total = $derived(points.reduce((s, p) => s + p.count, 0))
+const peak = $derived(points.length ? Math.max(...points.map((p) => p.count)) : 0)
+const avg = $derived(points.length ? Math.round(total / points.length) : 0)
+
+const yMax = $derived(niceCeiling(peak))
+const yTicks = $derived(genTicks(yMax, 4))
+
+function niceCeiling(v: number): number {
+	if (v <= 0) return 1
+	const exp = Math.pow(10, Math.floor(Math.log10(v)))
+	const f = v / exp
+	const nice = f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10
+	return nice * exp
+}
+function genTicks(max: number, count: number): number[] {
+	const step = max / count
+	return Array.from({ length: count + 1 }, (_, i) => Math.round(i * step))
+}
+
+function pX(i: number): number {
+	if (points.length <= 1) return padL + innerW / 2
+	return padL + (i / (points.length - 1)) * innerW
+}
+function pY(count: number): number {
+	return padT + innerH - (count / yMax) * innerH
+}
+function tickY(v: number): number {
+	return padT + innerH - (v / yMax) * innerH
+}
+
+const linePath = $derived(
+	points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${pX(i)} ${pY(p.count)}`).join(' '),
+)
+const areaPath = $derived(
+	points.length === 0
+		? ''
+		: `${linePath} L ${pX(points.length - 1)} ${padT + innerH} L ${pX(0)} ${padT + innerH} Z`,
+)
+
+const labelStep = $derived(Math.max(1, Math.ceil(points.length / 10)))
+</script>
+
+{#if data.length === 0}
+	<div
+		class="flex h-72 w-full items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/20 text-sm text-muted-foreground"
+	>
+		{emptyMessage}
+	</div>
+{:else}
+	<div class="flex flex-col gap-3">
+		<div class="flex items-baseline gap-5 px-1 text-[12px] text-muted-foreground">
+			<span><span class="font-medium text-foreground">{total.toLocaleString()}</span> total</span>
+			<span>peak <span class="font-medium text-foreground">{peak.toLocaleString()}</span></span>
+			<span>avg <span class="font-medium text-foreground">{avg.toLocaleString()}</span></span>
+		</div>
+		<div class="relative w-full">
+			<svg
+				viewBox="0 0 {W} {H}"
+				class="block h-64 w-full"
+				preserveAspectRatio="none"
+				onmouseleave={() => (hovered = null)}
+			>
+				<!-- Y grid + tick labels -->
+				{#each yTicks as t}
+					<line
+						x1={padL}
+						x2={W - padR}
+						y1={tickY(t)}
+						y2={tickY(t)}
+						stroke="currentColor"
+						stroke-opacity="0.08"
+					/>
+					<text
+						x={padL - 6}
+						y={tickY(t)}
+						dy="0.32em"
+						text-anchor="end"
+						class="fill-muted-foreground text-[10px]"
+					>{t}</text>
+				{/each}
+
+				<!-- Area fill -->
+				<path d={areaPath} fill={color} fill-opacity="0.15" />
+
+				<!-- Line -->
+				<path d={linePath} fill="none" stroke={color} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+
+				<!-- Points + hover hit areas -->
+				{#each points as p, i}
+					<circle cx={pX(i)} cy={pY(p.count)} r="3" fill={color} stroke="white" stroke-width="1.5" />
+					<rect
+						x={pX(i) - (innerW / Math.max(points.length - 1, 1)) / 2}
+						y={padT}
+						width={innerW / Math.max(points.length - 1, 1)}
+						height={innerH}
+						fill="transparent"
+						onmouseenter={() => (hovered = i)}
+					/>
+				{/each}
+
+				<!-- Hover guide -->
+				{#if hovered !== null}
+					<line
+						x1={pX(hovered)}
+						x2={pX(hovered)}
+						y1={padT}
+						y2={padT + innerH}
+						stroke={color}
+						stroke-opacity="0.35"
+						stroke-dasharray="3 3"
+					/>
+					<circle cx={pX(hovered)} cy={pY(points[hovered].count)} r="5" fill={color} stroke="white" stroke-width="2" />
+				{/if}
+
+				<!-- X-axis labels -->
+				{#each points as p, i}
+					{#if i % labelStep === 0 || i === points.length - 1}
+						<text
+							x={pX(i)}
+							y={H - padB / 3}
+							text-anchor="middle"
+							class="fill-muted-foreground text-[10px]"
+						>{p.label}</text>
+					{/if}
+				{/each}
+
+				<!-- Baseline -->
+				<line
+					x1={padL}
+					x2={W - padR}
+					y1={padT + innerH}
+					y2={padT + innerH}
+					stroke="currentColor"
+					stroke-opacity="0.2"
+				/>
+			</svg>
+
+			{#if hovered !== null}
+				{@const p = points[hovered]}
+				<div
+					class="pointer-events-none absolute -translate-x-1/2 -translate-y-full rounded-md bg-foreground px-2.5 py-1.5 text-[11px] leading-tight text-background shadow-lg"
+					style="left: {pX(hovered) / W * 100}%; top: {pY(p.count) / H * 100}%;"
+				>
+					<div class="font-semibold">{p.tooltip}</div>
+					<div>{p.count.toLocaleString()}</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}