kilo-cms 0.1.0

package/src/admin/UserEditor.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { SelectField, TextField } from './Field'
+import { useToast } from './Toast'
+import { EditorSkeleton } from './EditorSkeleton'
+import { Button } from './Button'
+
+type RoleRow = { id: string; name: string }
+type UserRow = { id: string; name: string; email: string; role: string }
+
+export function UserEditor({ id, userName }: { id: string; userName: string }) {
+  const router = useRouter()
+  const toast = useToast()
+  const isNew = id === 'new'
+  const [roles, setRoles] = useState<RoleRow[]>([])
+  const [form, setForm] = useState({ name: '', email: '', password: '', role: '' })
+  const [loading, setLoading] = useState(!isNew)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/admin/roles').then((response) => response.ok ? response.json() : []).then((data: RoleRow[]) => {
+      setRoles(data)
+      setForm((current) => current.role ? current : { ...current, role: data[0]?.id ?? '' })
+    })
+    if (isNew) { setLoading(false); return }
+    fetch(`/api/admin/users/${id}`).then((response) => response.ok ? response.json() : null).then((data: UserRow | null) => { if (data) setForm({ name: data.name, email: data.email, password: '', role: data.role }) }).finally(() => setLoading(false))
+  }, [id, isNew])
+
+  async function save() {
+    if (!form.name.trim() || !form.email.trim() || !form.role) { toast.error('Fill in name, email, and role.'); return }
+    if (isNew && form.password.length < 12) { toast.error('Password needs at least 12 characters.'); return }
+    setSaving(true)
+    try {
+      if (isNew) {
+        const response = await fetch('/api/admin/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) })
+        const data = await response.json()
+        if (!response.ok) throw new Error(data.error)
+        toast.success('User created.')
+        router.push('/admin/users')
+      } else {
+        const response = await fetch(`/api/admin/users/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: form.name, email: form.email, role: form.role }) })
+        const data = await response.json()
+        if (!response.ok) throw new Error(data.error)
+        toast.success('User updated.')
+      }
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not save user') } finally { setSaving(false) }
+  }
+
+  return <main className="cms-dashboard"><CmsSidebar active="users" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title={isNew ? 'New user' : form.name || 'Edit user'} backHref="/admin/users" backLabel="All users" />
+    {loading ? <EditorSkeleton sections={1} /> : <div className="cms-editor-layout"><div className="cms-editor-form">
+      <section className="cms-section">
+        <TextField label="Name" value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} />
+        <TextField label="Email" type="email" value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
+        {isNew && <TextField label="Password" type="password" hint="At least 12 characters" value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} />}
+        <SelectField label="Role" value={form.role} onChange={(event) => setForm({ ...form, role: event.target.value })} options={roles.map((role) => ({ value: role.id, label: role.name }))} />
+      </section>
+    </div><aside className="cms-editor-sidebar"><Button variant="positive" type="button" onClick={() => void save()} disabled={saving} icon="↗">{saving ? 'Saving…' : isNew ? 'Create user' : 'Save changes'}</Button></aside></div>}
+  </section></main>
+}

package/src/admin/UsersEditor.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { ListingSkeleton } from './ListingView'
+import { Button } from './Button'
+
+type UserRow = { id: string; name: string; email: string; role: string }
+type RoleRow = { id: string; name: string }
+
+export function UsersEditor({ userName }: { userName: string }) {
+  const [users, setUsers] = useState<UserRow[]>([])
+  const [roles, setRoles] = useState<RoleRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [q, setQ] = useState('')
+
+  useEffect(() => {
+    Promise.all([
+      fetch('/api/admin/users').then((response) => response.ok ? response.json() : []),
+      fetch('/api/admin/roles').then((response) => response.ok ? response.json() : []),
+    ]).then(([usersData, rolesData]) => { setUsers(usersData); setRoles(rolesData) }).finally(() => setLoading(false))
+  }, [])
+
+  function roleName(id: string) { return roles.find((role) => role.id === id)?.name ?? id }
+  const filtered = q ? users.filter((row) => row.name.toLowerCase().includes(q.toLowerCase()) || row.email.toLowerCase().includes(q.toLowerCase())) : users
+
+  return <main className="cms-dashboard"><CmsSidebar active="users" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="Users" meta={`${users.length} users`} actions={<Button variant="positive" href="/admin/users/new" icon="↗">Add user</Button>} />
+    <div className="cms-filter-bar">
+      <input className="cms-search-input" value={q} onChange={(event) => setQ(event.target.value)} placeholder="Search users…" />
+    </div>
+    {loading ? <ListingSkeleton view="table" columnCount={3} /> : <div className="cms-table-wrap"><table className="cms-table"><thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead><tbody>
+      {filtered.map((row) => <tr key={row.id}><td><a className="cms-row-title" href={`/admin/users/${row.id}`}><strong>{row.name}</strong></a></td><td>{row.email}</td><td>{roleName(row.role)}</td></tr>)}
+    </tbody></table>{!filtered.length && <p className="cms-empty-state">No users match your search.</p>}</div>}
+  </section></main>
+}

package/src/admin/WebhooksEditor.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { EditorHeader } from './EditorHeader'
+import { TextField, ToggleField } from './Field'
+import { CmsSidebar } from './CmsSidebar'
+import { useToast } from './Toast'
+import { formatDateTime } from '../format'
+import { ListingSkeleton } from './ListingView'
+import { Button } from './Button'
+import { webhookEventGroups } from '../webhook-events'
+
+type WebhookRow = { id: string; name: string; url: string; events: string[]; enabled: boolean; createdAt: string }
+type Delivery = { id: string; event: string; statusCode: number | null; success: boolean; error: string | null; createdAt: string }
+type WebhookDetail = WebhookRow & { secret: string; deliveries: Delivery[] }
+
+function emptyForm() { return { name: '', url: '', events: [] as string[], enabled: true } }
+
+export function WebhooksEditor({ userName }: { userName: string }) {
+  const toast = useToast()
+  const [webhooks, setWebhooks] = useState<WebhookRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [form, setForm] = useState(emptyForm())
+  const [creating, setCreating] = useState(false)
+  const [newSecret, setNewSecret] = useState<string | null>(null)
+  const [selected, setSelected] = useState<WebhookDetail | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  function load() { setLoading(true); fetch('/api/admin/webhooks').then((response) => response.ok ? response.json() : []).then(setWebhooks).finally(() => setLoading(false)) }
+  useEffect(() => { load() }, [])
+
+  function toggleEvent(event: string) { setForm((current) => ({ ...current, events: current.events.includes(event) ? current.events.filter((item) => item !== event) : [...current.events, event] })) }
+
+  async function create() {
+    if (!form.name.trim() || !form.url.trim()) { toast.error('Give the webhook a name and URL.'); return }
+    setCreating(true)
+    try {
+      const response = await fetch('/api/admin/webhooks', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      setNewSecret(data.secret)
+      setForm(emptyForm())
+      load()
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not create webhook') } finally { setCreating(false) }
+  }
+
+  async function openWebhook(id: string) {
+    const response = await fetch(`/api/admin/webhooks/${id}`)
+    if (response.ok) setSelected(await response.json())
+  }
+
+  async function saveSelected() {
+    if (!selected) return
+    setSaving(true)
+    try {
+      const response = await fetch(`/api/admin/webhooks/${selected.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: selected.name, url: selected.url, events: selected.events, enabled: selected.enabled }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      toast.success('Webhook saved.')
+      load()
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not save webhook') } finally { setSaving(false) }
+  }
+
+  async function remove(webhook: WebhookRow) {
+    if (!confirm(`Delete webhook "${webhook.name}"?`)) return
+    const response = await fetch(`/api/admin/webhooks/${webhook.id}`, { method: 'DELETE' })
+    if (response.ok) { toast.success('Webhook deleted.'); setSelected(null); load() } else toast.error('Could not delete webhook.')
+  }
+
+  return <main className="cms-dashboard"><CmsSidebar active="settings" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="Webhooks" backHref="/admin/dashboard" backLabel="Dashboard" />
+    <div className="cms-editor-layout"><div className="cms-editor-form">
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">New webhook</p><p>Fires a signed POST request when the selected events happen. Verify deliveries with the <code>X-Webhook-Signature</code> header (HMAC-SHA256 of the body using the webhook&rsquo;s secret).</p></div>
+        {newSecret && <div className="cms-ai-note" role="status"><strong>{newSecret}</strong><p>This is the signing secret — copy it now, it won&rsquo;t be shown in full again outside this webhook&rsquo;s detail view.</p><Button variant="ghost" compact onClick={() => setNewSecret(null)}>Dismiss</Button></div>}
+        <div className="cms-two-columns">
+          <TextField label="Name" value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} placeholder="e.g. Marketing CMS sync" />
+          <TextField label="URL" type="url" value={form.url} onChange={(event) => setForm((current) => ({ ...current, url: event.target.value }))} placeholder="https://example.com/webhooks/cms" />
+        </div>
+        {webhookEventGroups.map((group) => <div className="cms-checkbox-group-block" key={group.label}><p className="section-label">{group.label}</p><div className="cms-permission-grid">{group.events.map((event) => <label key={event} className="cms-permission-item"><input type="checkbox" checked={form.events.includes(event)} onChange={() => toggleEvent(event)} />{event}</label>)}</div></div>)}
+        <Button variant="positive" type="button" disabled={creating} onClick={() => void create()} icon="↗">{creating ? 'Creating…' : 'Create webhook'}</Button>
+      </section>
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">Existing webhooks</p></div>
+        {loading ? <ListingSkeleton view="table" columnCount={5} /> : <div className="cms-table-wrap"><table className="cms-table"><thead><tr><th>Name</th><th>URL</th><th>Events</th><th>Status</th><th /></tr></thead><tbody>
+          {webhooks.map((webhook) => <tr key={webhook.id}>
+            <td><a className="cms-row-title" href="#" onClick={(event) => { event.preventDefault(); void openWebhook(webhook.id) }}><strong>{webhook.name}</strong></a></td>
+            <td><span className="cms-table-id">{webhook.url}</span></td>
+            <td>{webhook.events.length}</td>
+            <td>{webhook.enabled ? 'Enabled' : 'Disabled'}</td>
+            <td><Button variant="negative" compact type="button" onClick={() => void remove(webhook)}>Delete</Button></td>
+          </tr>)}
+        </tbody></table>{!webhooks.length && <p className="cms-empty-state">No webhooks yet.</p>}</div>}
+      </section>
+      {selected && <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">Edit webhook</p><p>Secret: <code>{selected.secret}</code></p></div>
+        <div className="cms-two-columns">
+          <TextField label="Name" value={selected.name} onChange={(event) => setSelected({ ...selected, name: event.target.value })} />
+          <TextField label="URL" type="url" value={selected.url} onChange={(event) => setSelected({ ...selected, url: event.target.value })} />
+        </div>
+        <ToggleField label="Enabled" checked={selected.enabled} onChange={(checked) => setSelected({ ...selected, enabled: checked })} />
+        {webhookEventGroups.map((group) => <div className="cms-checkbox-group-block" key={group.label}><p className="section-label">{group.label}</p><div className="cms-permission-grid">{group.events.map((event) => <label key={event} className="cms-permission-item"><input type="checkbox" checked={selected.events.includes(event)} onChange={() => setSelected({ ...selected, events: selected.events.includes(event) ? selected.events.filter((item) => item !== event) : [...selected.events, event] })} />{event}</label>)}</div></div>)}
+        <Button variant="primary" type="button" disabled={saving} onClick={() => void saveSelected()} icon="↗">{saving ? 'Saving…' : 'Save changes'}</Button>
+        <div className="cms-section-heading"><p className="section-label">Recent deliveries</p></div>
+        {selected.deliveries.length ? <div className="cms-table-wrap"><table className="cms-table"><thead><tr><th>Event</th><th>Status</th><th>When</th></tr></thead><tbody>
+          {selected.deliveries.map((delivery) => <tr key={delivery.id}>
+            <td>{delivery.event}</td>
+            <td>{delivery.success ? `OK (${delivery.statusCode})` : delivery.error ?? `Failed (${delivery.statusCode ?? '—'})`}</td>
+            <td>{formatDateTime(delivery.createdAt)}</td>
+          </tr>)}
+        </tbody></table></div> : <p className="cms-empty-state">No deliveries yet.</p>}
+      </section>}
+    </div></div>
+  </section></main>
+}