kilo-cms 0.1.0

package/src/admin/DashboardBuilder.tsx

@@ -0,0 +1,284 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import * as echarts from 'echarts'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { EditorSkeleton } from './EditorSkeleton'
+import { Button } from './Button'
+import { SelectField, TextField } from './Field'
+import {
+  type DashboardConfig,
+  type DashboardMetric,
+  type DashboardSize,
+  type DashboardSource,
+  type DashboardVisual,
+  type DashboardWidget,
+} from '../dashboard'
+
+// Resolved server-side (the registry is never populated on the client, `defineKiloConfig()` is
+// server-only) and passed down as a prop — same pattern as `CollectionRecordEditor`'s `config`.
+type DashboardSourceOption = { value: DashboardSource; label: string; fields: string[] }
+
+type Result = { value?: number; data?: Array<{ name: string; value: number }> }
+
+const metricOptions = [
+  { value: 'count', label: 'Count of records' },
+  { value: 'true', label: 'Count where true' },
+  { value: 'false', label: 'Count where false' },
+  { value: 'sum', label: 'Sum of a number' },
+  { value: 'avg', label: 'Average of a number' },
+]
+const visualOptions = [
+  { value: 'number', label: 'Big number' },
+  { value: 'bar', label: 'Bar chart' },
+  { value: 'line', label: 'Line chart' },
+  { value: 'donut', label: 'Donut chart' },
+  { value: 'table', label: 'Table' },
+]
+const sizeOptions = [
+  { value: 'small', label: 'Small' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'large', label: 'Large (full width)' },
+]
+
+function Chart({ visual, data }: { visual: 'bar' | 'line' | 'donut'; data: Array<{ name: string; value: number }> }) {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!ref.current) return
+    const chart = echarts.init(ref.current)
+    const names = data.map((item) => item.name)
+    const values = data.map((item) => item.value)
+    chart.setOption(
+      visual === 'donut'
+        ? { tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: ['40%', '70%'], data: data.map((item) => ({ name: item.name, value: item.value })), label: { fontSize: 11 } }] }
+        : {
+            grid: { left: 8, right: 8, top: 8, bottom: 24, containLabel: true },
+            tooltip: { trigger: 'axis' },
+            xAxis: { type: 'category', data: names, axisLabel: { fontSize: 10 } },
+            yAxis: { type: 'value', axisLabel: { fontSize: 10 } },
+            series: [{ type: visual, data: values, itemStyle: { color: '#c8ff4d' }, lineStyle: { color: '#c8ff4d' }, smooth: visual === 'line' }],
+          },
+    )
+    const observer = new ResizeObserver(() => chart.resize())
+    observer.observe(ref.current)
+    return () => { observer.disconnect(); chart.dispose() }
+  }, [visual, data])
+  return <div ref={ref} className="cms-dashboard-chart" />
+}
+
+function Widget({ widget }: { widget: DashboardWidget }) {
+  const [result, setResult] = useState<Result | null>(null)
+  useEffect(() => {
+    setResult(null)
+    fetch('/api/admin/dashboard/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(widget) })
+      .then((response) => (response.ok ? response.json() : null))
+      .then(setResult)
+      .catch(() => setResult(null))
+  }, [widget])
+  const data = result?.data ?? []
+  const max = Math.max(...data.map((item) => item.value), 1)
+  return (
+    <article className="cms-dashboard-widget">
+      <header>
+        <strong>{widget.title}</strong>
+        <span>{widget.source}</span>
+      </header>
+      {result === null ? (
+        <p className="cms-dashboard-loading">Loading data…</p>
+      ) : widget.visual === 'number' ? (
+        <div className="cms-dashboard-number">{result.value ?? 0}</div>
+      ) : widget.visual === 'table' ? (
+        <div className="cms-dashboard-widget-table">
+          {data.map((item) => (
+            <div key={item.name}>
+              <span>{item.name}</span>
+              <strong>{item.value}</strong>
+            </div>
+          ))}
+        </div>
+      ) : widget.visual === 'bar' && data.length <= 1 ? (
+        <div className="cms-dashboard-bars">
+          {data.map((item) => (
+            <div className="cms-dashboard-bar-row" key={item.name}>
+              <span>{item.name}</span>
+              <div><i style={{ width: `${Math.max((item.value / max) * 100, 4)}%` }} /></div>
+              <strong>{item.value}</strong>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <Chart visual={widget.visual} data={data} />
+      )}
+    </article>
+  )
+}
+
+function WidgetConfig({ widget, dashboardSources, onChange, onRemove, onMove, canMoveUp, canMoveDown }: {
+  widget: DashboardWidget
+  dashboardSources: DashboardSourceOption[]
+  onChange: (patch: Partial<DashboardWidget>) => void
+  onRemove: () => void
+  onMove: (direction: 'up' | 'down') => void
+  canMoveUp: boolean
+  canMoveDown: boolean
+}) {
+  const source = dashboardSources.find((item) => item.value === widget.source) ?? dashboardSources[0]
+  if (!source) return null
+  const needsField = widget.metric !== 'count'
+  const fieldOptions = [{ value: '', label: 'Choose a field' }, ...source.fields.map((field) => ({ value: field, label: field }))]
+  const groupByOptions = [{ value: '', label: 'One total value' }, ...source.fields.map((field) => ({ value: field, label: field }))]
+
+  return (
+    <article className="cms-dashboard-widget-config">
+      <header>
+        <div>
+          <span className="cms-dashboard-config-kicker">Widget</span>
+          <strong>Configure this card</strong>
+        </div>
+        <div className="cms-dashboard-config-actions">
+          <Button variant="secondary" iconOnly compact disabled={!canMoveUp} onClick={() => onMove('up')} aria-label="Move up" icon="↑" />
+          <Button variant="secondary" iconOnly compact disabled={!canMoveDown} onClick={() => onMove('down')} aria-label="Move down" icon="↓" />
+          <Button variant="negative" compact onClick={onRemove}>Remove</Button>
+        </div>
+      </header>
+      <div className="cms-dashboard-config-grid">
+        <TextField label="Title" value={widget.title} onChange={(event) => onChange({ title: event.target.value })} placeholder="e.g. Published projects" />
+        <SelectField label="Content source" value={widget.source} options={dashboardSources.map((item) => ({ value: item.value, label: item.label }))} onChange={(event) => onChange({ source: event.target.value as DashboardSource, groupBy: undefined, field: undefined })} />
+        <SelectField label="Measure" value={widget.metric} options={metricOptions} onChange={(event) => onChange({ metric: event.target.value as DashboardMetric })} />
+        {needsField && <SelectField label="Field" value={widget.field ?? ''} options={fieldOptions} onChange={(event) => onChange({ field: event.target.value || undefined })} />}
+        <SelectField label="Break down by" value={widget.groupBy ?? ''} options={groupByOptions} onChange={(event) => onChange({ groupBy: event.target.value || undefined })} />
+        <SelectField label="Display as" value={widget.visual} options={visualOptions} onChange={(event) => onChange({ visual: event.target.value as DashboardVisual })} />
+        <SelectField label="Size" value={widget.size} options={sizeOptions} onChange={(event) => onChange({ size: event.target.value as DashboardSize })} />
+        <TextField label="Show top" type="number" min="1" max="20" value={widget.limit} onChange={(event) => onChange({ limit: Math.max(1, Math.min(20, Number(event.target.value) || 1)) })} />
+      </div>
+      <p className="cms-dashboard-config-help">
+        {widget.metric === 'count' && !widget.groupBy
+          ? 'Shows one total count for the selected content source.'
+          : widget.groupBy
+            ? `Groups records by ${widget.groupBy} and shows the highest values first.`
+            : 'Choose a field to calculate the selected measure.'}
+      </p>
+    </article>
+  )
+}
+
+export function DashboardBuilder({ userName, canUpdate, dashboardSources }: { userName: string; canUpdate: boolean; dashboardSources: DashboardSourceOption[] }) {
+  const [config, setConfig] = useState<DashboardConfig | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [editing, setEditing] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState('')
+
+  useEffect(() => {
+    fetch('/api/admin/dashboard')
+      .then((response) => (response.ok ? response.json() : Promise.reject(new Error('dashboard request failed'))))
+      .then((data) => setConfig(data))
+      .catch(() => { setConfig({ widgets: [] }); setMessage('Could not load dashboard configuration.') })
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading || !config) return <main className="cms-dashboard"><CmsSidebar active="dashboard" userName={userName} /><section className="cms-content"><EditorHeader compact title="Dashboard" meta="Loading…" /><EditorSkeleton sections={1} /></section></main>
+
+  function addWidget() {
+    const id = crypto.randomUUID()
+    const source = dashboardSources[0]?.value ?? ''
+    setConfig((current) => current ? ({ widgets: [...current.widgets, { id, title: 'New widget', source, metric: 'count', visual: 'number', limit: 5, size: 'medium' }] }) : current)
+  }
+  function updateWidget(id: string, patch: Partial<DashboardWidget>) {
+    setConfig((current) => current ? ({ widgets: current.widgets.map((widget) => (widget.id === id ? { ...widget, ...patch } : widget)) }) : current)
+  }
+  function removeWidget(id: string) {
+    setConfig((current) => current ? ({ widgets: current.widgets.filter((widget) => widget.id !== id) }) : current)
+  }
+  function moveWidget(id: string, direction: 'up' | 'down') {
+    setConfig((current) => {
+      if (!current) return current
+      const index = current.widgets.findIndex((widget) => widget.id === id)
+      const target = direction === 'up' ? index - 1 : index + 1
+      if (index < 0 || target < 0 || target >= current.widgets.length) return current
+      const widgets = [...current.widgets]
+      ;[widgets[index], widgets[target]] = [widgets[target], widgets[index]]
+      return { widgets }
+    })
+  }
+  async function save() {
+    setSaving(true)
+    setMessage('')
+    const response = await fetch('/api/admin/dashboard', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(config) })
+    setSaving(false)
+    if (!response.ok) { setMessage('Could not save dashboard.'); return }
+    setEditing(false)
+    setMessage('Dashboard saved.')
+  }
+
+  return (
+    <main className="cms-dashboard">
+      <CmsSidebar active="dashboard" userName={userName} />
+      <section className="cms-content">
+        <EditorHeader
+          compact
+          title="Dashboard"
+          meta={`${config.widgets.length} widgets`}
+          actions={canUpdate ? <Button variant={editing ? 'secondary' : 'positive'} type="button" onClick={() => setEditing((value) => !value)} icon="↗">{editing ? 'Close builder' : 'Build dashboard'}</Button> : undefined}
+        />
+        {message && <p className="cms-dashboard-message">{message}</p>}
+        {!config.widgets.length && (
+          <div className="cms-dashboard-intro">
+            <div>
+              <p className="section-label">Workspace overview</p>
+              <h2>See what is happening across your content.</h2>
+              <p>Build a dashboard from your Services, Projects, and Blog data. Choose what to measure, group it, and decide how it should look.</p>
+            </div>
+          </div>
+        )}
+        {editing && (
+          <section className="cms-dashboard-builder">
+            <div className="cms-dashboard-builder-head">
+              <div>
+                <p className="section-label">Dashboard builder</p>
+                <h3>Configure your widgets</h3>
+                <p>Each widget is a small question about your content. Add a widget, choose its source and measure, then save.</p>
+              </div>
+              <div className="cms-dashboard-builder-actions">
+                <Button variant="positive" type="button" onClick={addWidget}>+ Add widget</Button>
+                <Button variant="primary" type="button" disabled={saving} onClick={() => void save()}>{saving ? 'Saving…' : 'Save dashboard'}</Button>
+              </div>
+            </div>
+            <div className="cms-dashboard-config-list">
+              {config.widgets.map((widget, index) => (
+                <WidgetConfig
+                  key={widget.id}
+                  widget={widget}
+                  dashboardSources={dashboardSources}
+                  onChange={(patch) => updateWidget(widget.id, patch)}
+                  onRemove={() => removeWidget(widget.id)}
+                  onMove={(direction) => moveWidget(widget.id, direction)}
+                  canMoveUp={index > 0}
+                  canMoveDown={index < config.widgets.length - 1}
+                />
+              ))}
+              {!config.widgets.length && <p className="cms-empty-state">No widgets yet. Add your first widget above.</p>}
+            </div>
+          </section>
+        )}
+        <section className="cms-dashboard-preview">
+          <div className="cms-dashboard-preview-head">
+            <div>
+              <p className="section-label">{editing ? 'Live preview' : 'Dashboard'}</p>
+              <h3>{editing ? 'This is how your dashboard will look' : 'Content overview'}</h3>
+            </div>
+          </div>
+          <div className="cms-dashboard-grid">
+            {config.widgets.map((widget) => (
+              <div key={widget.id} className={`cms-dashboard-cell cms-dashboard-cell--${widget.size}`}>
+                <Widget widget={widget} />
+              </div>
+            ))}
+            {!config.widgets.length && <p className="cms-empty-state">No widgets yet.</p>}
+          </div>
+        </section>
+      </section>
+    </main>
+  )
+}

package/src/admin/DragHandle.tsx

@@ -0,0 +1,3 @@
+export function DragHandle() {
+  return <svg viewBox="0 0 12 16" aria-hidden="true"><circle cx="3" cy="2" r="1.4" /><circle cx="9" cy="2" r="1.4" /><circle cx="3" cy="8" r="1.4" /><circle cx="9" cy="8" r="1.4" /><circle cx="3" cy="14" r="1.4" /><circle cx="9" cy="14" r="1.4" /></svg>
+}