convert to swedish

.bruno/API/api-admissions.bru

@@ -0,0 +1,15 @@
+meta {
+  name: /api/admissions
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{base_url}}/api/admissions
+  body: none
+  auth: none
+}
+
+headers {
+  Accept: application/json
+}

.bruno/API/api-balances.bru

@@ -1,7 +1,7 @@
 meta {
   name: /api/balances
   type: http
-  seq: 15
+  seq: 3
 }
 
 get {
@@ -12,4 +12,5 @@ get {
 
 settings {
   encodeUrl: true
+  timeout: 0
 }

.bruno/API/api-entries--id.bru

@@ -1,7 +1,7 @@
 meta {
   name: /api/entries/:id
   type: http
-  seq: 4
+  seq: 5
 }
 
 get {

.bruno/API/api-entries.bru

@@ -1,7 +1,7 @@
 meta {
   name: /api/entries
   type: http
-  seq: 3
+  seq: 4
 }
 
 get {

.bruno/API/api-errors.bru

@@ -0,0 +1,20 @@
+meta {
+  name: /api/errors
+  type: http
+  seq: 22
+}
+
+delete {
+  url: {{base_url}}/api/errors?id=4
+  body: none
+  auth: inherit
+}
+
+params:query {
+  id: 4
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

.bruno/API/api-financial-years.bru

@@ -1,7 +1,7 @@
 meta {
   name: /api/financial-years
   type: http
-  seq: 5
+  seq: 6
 }
 
 get {

.bruno/API/api-invites.bru

@@ -0,0 +1,15 @@
+meta {
+  name: /api/invites
+  type: http
+  seq: 10
+}
+
+get {
+  url: {{base_url}}/api/invites
+  body: none
+  auth: none
+}
+
+headers {
+  Accept: application/json
+}

.bruno/API/api-invoices--id.bru

@@ -11,7 +11,7 @@ get {
 }
 
 params:path {
-  id: 1000
+  id: 10
 }
 
 settings {

.bruno/API/api-invoices-total-amount.bru

@@ -1,15 +1,20 @@
 meta {
   name: /api/invoices/total-amount
   type: http
-  seq: 12
+  seq: 9
 }
 
 get {
-  url: {{base_url}}/api/invoices/total-amount
+  url: {{base_url}}/api/invoices/total-amount?supplier=150
   body: none
   auth: inherit
 }
 
+params:query {
+  supplier: 150
+}
+
 settings {
   encodeUrl: true
+  timeout: 0
 }

.bruno/API/api-invoices.bru

@@ -0,0 +1,22 @@
+meta {
+  name: /api/invoices
+  type: http
+  seq: 7
+}
+
+get {
+  url: {{base_url}}/api/invoices?limit=2&supplierId=10
+  body: none
+  auth: inherit
+}
+
+params:query {
+  limit: 2
+  supplierId: 10
+  ~year: 2015
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

.bruno/API/api-journals.bru

@@ -1,11 +1,11 @@
 meta {
-  name: /api/invoices
+  name: /api/journals
   type: http
-  seq: 8
+  seq: 21
 }
 
 get {
-  url: {{base_url}}/api/invoices
+  url: {{base_url}}/api/journals
   body: none
   auth: inherit
 }

.bruno/API/api-objects--id-transactions.bru

@@ -0,0 +1,20 @@
+meta {
+  name: /api/objects/:id/transactions
+  type: http
+  seq: 12
+}
+
+get {
+  url: {{base_url}}/api/objects/:id/transactions
+  body: none
+  auth: inherit
+}
+
+params:path {
+  id: 10
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

.bruno/API/api-objects.bru

@@ -1,7 +1,7 @@
 meta {
   name: /api/objects
   type: http
-  seq: 7
+  seq: 11
 }
 
 get {

.bruno/API/api-results--year.bru

@@ -1,15 +1,19 @@
 meta {
   name: /api/results/:year
   type: http
-  seq: 12
+  seq: 14
 }
 
 get {
-  url: {{base_url}}/api/results/2018
+  url: {{base_url}}/api/results/:year
   body: none
   auth: inherit
 }
 
+params:path {
+  year: 2017
+}
+
 settings {
   encodeUrl: true
   timeout: 0

.bruno/API/api-results.bru

@@ -1,7 +1,7 @@
 meta {
   name: /api/results
   type: http
-  seq: 11
+  seq: 13
 }
 
 get {

.bruno/API/api-roles.bru

@@ -0,0 +1,15 @@
+meta {
+  name: /api/roles
+  type: http
+  seq: 15
+}
+
+get {
+  url: {{base_url}}/api/roles
+  body: none
+  auth: none
+}
+
+headers {
+  Accept: application/json
+}

.bruno/API/api-suppliers--id.bru

@@ -1,15 +1,19 @@
 meta {
-  name: /api/objects/:id
+  name: /api/suppliers/:id
   type: http
-  seq: 6
+  seq: 17
 }
 
 get {
-  url: {{base_url}}/api/objects/10
+  url: {{base_url}}/api/suppliers/:id
   body: none
   auth: inherit
 }
 
+params:path {
+  id: 105
+}
+
 settings {
   encodeUrl: true
   timeout: 0

.bruno/API/api-suppliers-merge.bru

@@ -1,15 +1,26 @@
 meta {
   name: /api/suppliers/merge
   type: http
-  seq: 13
+  seq: 18
 }
 
 post {
   url: {{base_url}}/api/suppliers/merge
-  body: none
+  body: json
   auth: inherit
 }
 
+body:json {
+  {
+    "ids": [ 105, 203 ]
+  }
+}
+
+body:multipart-form {
+  ids: [
+}
+
 settings {
   encodeUrl: true
+  timeout: 0
 }

.bruno/API/api-suppliers.bru

@@ -1,11 +1,11 @@
 meta {
   name: /api/suppliers
   type: http
-  seq: 10
+  seq: 16
 }
 
 get {
-  url: {{base_url}}/
+  url: {{base_url}}/api/suppliers
   body: none
   auth: inherit
 }

.bruno/API/api-transactions.bru

@@ -0,0 +1,21 @@
+meta {
+  name: /api/transactions
+  type: http
+  seq: 19
+}
+
+get {
+  url: {{base_url}}/api/transactions?year=2020
+  body: none
+  auth: inherit
+}
+
+params:query {
+  year: 2020
+  ~accountNumber: 4800
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

.bruno/API/api-users.bru

@@ -0,0 +1,15 @@
+meta {
+  name: /api/users
+  type: http
+  seq: 20
+}
+
+get {
+  url: {{base_url}}/api/users
+  body: none
+  auth: none
+}
+
+headers {
+  Accept: application/json
+}

.bruno/API/folder.bru

@@ -0,0 +1,8 @@
+meta {
+  name: API
+  seq: 2
+}
+
+auth {
+  mode: inherit
+}

.bruno/Auth/Login.bru

@@ -0,0 +1,18 @@
+meta {
+  name: Login
+  type: http
+  seq: 1
+}
+
+post {
+  url: {{base_url}}/auth/login
+  body: json
+  auth: none
+}
+
+body:json {
+  {
+    "email": "linus.miller@bitmill.io",
+    "password": "rasmus"
+  }
+}

.bruno/Auth/Logout.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Logout
+  type: http
+  seq: 2
+}
+
+get {
+  url: {{base_url}}/auth/logout
+  body: none
+  auth: none
+}

.bruno/Auth/auth-register.bru

@@ -0,0 +1,34 @@
+meta {
+  name: /auth/register
+  type: http
+  seq: 3
+}
+
+post {
+  url: {{base_url}}/auth/register
+  body: json
+  auth: inherit
+}
+
+body:json {
+  {
+    "email": "linus.k.miller@gmail.com",
+    "password": "rasmus",
+    "inviteEmail": "linus.k.miller@gmail.com",
+    "inviteToken": "1502f035584e09870aab05611161a636f88fb08ccba745850a0430f2bb5b3d8c"
+  }
+}
+
+body:form-urlencoded {
+  email: linus.k.miller@gmail.com
+  password: rasmus
+}
+
+body:multipart-form {
+  linus.k.miller@gmail.com: 
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

.bruno/BRF/api-transactions.bru

@@ -1,15 +0,0 @@
-meta {
-  name: /api/transactions
-  type: http
-  seq: 14
-}
-
-get {
-  url: {{base_url}}/api/transactions
-  body: none
-  auth: inherit
-}
-
-settings {
-  encodeUrl: true
-}

.env.development

@@ -1,16 +1,16 @@
 NODE_ENV=development
-DOMAIN=bitmill.io
+DOMAIN=brf.lkm.nu
 PROTOCOL=https
 HOSTNAME=brf.local
 PORT=null
 FASTIFY_HOST=0.0.0.0
-FASTIFY_PORT=1337
+FASTIFY_PORT=3080
 LOG_LEVEL=debug
 LOG_STREAM=console
 PGHOST=postgres
 PGPORT=5432
-PGDATABASE=brf_books
-PGUSER=brf_books
-PGPASSWORD=brf_books
+PGDATABASE=brf
+PGUSER=brf
+PGPASSWORD=brf
 REDIS_HOST=redis
 VITE_HMR_PROXY=true

.env.production

@@ -0,0 +1,13 @@
+NODE_ENV=production
+DOMAIN=brf.lkm.nu
+PROTOCOL=https
+HOSTNAME=brf.lkm.nu
+PORT=null
+FASTIFY_HOST=localhost
+FASTIFY_PORT=3080
+LOG_LEVEL=debug
+LOG_STREAM=console
+PGHOST=/run/postgresql
+PGDATABASE=brf
+REDIS_HOST=/run/redis/redis.sock
+VITE_HMR_PROXY=false

.env.testing

@@ -0,0 +1,17 @@
+NODE_ENV=testing
+DOMAIN=brf.lkm.nu
+PROTOCOL=https
+HOSTNAME=brf.local
+PORT=null
+FASTIFY_HOST=0.0.0.0
+FASTIFY_PORT=1337
+LOG_LEVEL=debug
+LOG_STREAM=console
+PGHOST=localhost
+PGPORT=5432
+PGDATABASE=brf
+PGUSER=brf
+PGPASSWORD=brf
+REDIS_HOST=null
+VITE_HMR_PROXY=false
+MAILGUN_API_KEY=not_a_valid_key

Dockerfile

@@ -13,8 +13,8 @@ RUN groupmod -g $GID node
 RUN usermod -u $UID -g node node
 
 USER node
-RUN mkdir /home/node/brf_books
-WORKDIR /home/node/brf_books
+RUN mkdir /home/node/brf
+WORKDIR /home/node/brf
 
 COPY --chown=node pnpm-lock.yaml package.json .
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile

bin/add_fisken_invoices.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import path from 'node:path'
-import knex from '../server/lib/knex.ts'
+import db from '../server/lib/kysely.ts'
 
 const dirs = process.argv.slice(2)
 
@@ -12,7 +12,7 @@ for await (const dir of dirs) {
   await readdir(dir)
 }
 
-knex.destroy()
+db.destroy()
 
 async function readdir(dir: string) {
   const files = (await fs.readdir(dir)).toSorted((a: string, b: string) => {
@@ -26,7 +26,7 @@ async function readdir(dir: string) {
     }
   })
 
-  const trx = await knex.transaction()
+  const trx = await db.startTransaction().execute()
 
   for await (const originalFilename of files) {
     const result = originalFilename.match(rFileName)
@@ -37,15 +37,21 @@ async function readdir(dir: string) {
 
     const [, fiskenNumber, invoiceDate, supplierName] = result
 
-    let supplier = await trx('supplier').first('*').where('name', supplierName)
+    let supplier = await trx.selectFrom('supplier').selectAll().where('name', '=', supplierName).executeTakeFirst()
 
     if (!supplier) {
-      supplier = (await trx('supplier').insert({ name: supplierName, supplierTypeId: 1 }).returning('*'))[0]
+      supplier = await trx
+        .insertInto('supplier')
+        .values({ name: supplierName, supplierTypeId: 1 })
+        .returningAll()
+        .executeTakeFirstOrThrow()
     }
 
-    const invoice = (
-      await trx('invoice').insert({ fiskenNumber, invoiceDate, supplierId: supplier.id }).returning('*')
-    )[0]
+    const invoice = await trx
+      .insertInto('invoice')
+      .values({ fiskenNumber: parseInt(fiskenNumber), invoiceDate, supplierId: supplier.id })
+      .returningAll()
+      .executeTakeFirstOrThrow()
 
     const ext = path.extname(originalFilename)
     const filename = `${invoiceDate}_fisken_${fiskenNumber}_${supplierName.split(/[\s/]/).join('_').split(/[']/).join('')}${ext}`
@@ -58,9 +64,9 @@ async function readdir(dir: string) {
       console.info('ALREADY EXISTS: ' + filename)
     }
 
-    const file = (await trx('file').insert({ filename }).returning('id'))[0]
-    await trx('filesToInvoice').insert({ fileId: file.id, invoiceId: invoice.id })
+    const file = await trx.insertInto('file').values({ filename }).returning('id').executeTakeFirstOrThrow()
+    await trx.insertInto('filesToInvoice').values({ fileId: file.id, invoiceId: invoice.id }).execute()
   }
 
-  await trx.commit()
+  await trx.commit().execute()
 }

bin/add_phm_invoices.ts

@@ -1,52 +1,56 @@
 import fs from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import path from 'node:path'
-import knex from '../server/lib/knex.ts'
+import db from '../server/lib/kysely.ts'
 import { csvParseRows } from 'd3-dsv'
 
 const csvFilename = process.argv[2]
 const csvString = await fs.readFile(csvFilename, { encoding: 'utf8' })
 const rows = csvParseRows(csvString)
 
-const trx = await knex.transaction()
+const trx = await db.startTransaction().execute()
 
 for (const row of rows.toReversed()) {
   const [
     phmNumber,
-    // type,
-    // supplierId,
+    _type,
+    _supplierId,
     supplierName,
     invoiceDate,
     dueDate,
     invoiceNumber,
     ocr,
     amount,
-    // vat,
-    // balance,
-    // currency,
-    // status,
+    _vat,
+    _balance,
+    _currency,
+    _status,
     filesString,
   ] = row
 
-  let supplier = await trx('supplier').first('*').where('name', supplierName)
+  let supplier = await trx.selectFrom('supplier').selectAll().where('name', '=', supplierName).executeTakeFirst()
 
   if (!supplier) {
-    supplier = (await trx('supplier').insert({ name: supplierName, supplierTypeId: 1 }).returning('*'))[0]
+    supplier = await trx
+      .insertInto('supplier')
+      .values({ name: supplierName, supplierTypeId: 1 })
+      .returningAll()
+      .executeTakeFirstOrThrow()
   }
 
-  const invoice = (
-    await trx('invoice')
-      .insert({
+  const invoice = await trx
+    .insertInto('invoice')
+    .values({
       invoiceDate,
       supplierId: supplier.id,
       dueDate,
       ocr,
       invoiceNumber,
-        phmNumber,
+      phmNumber: parseInt(phmNumber),
       amount,
     })
     .returning('id')
-  )[0]
+    .executeTakeFirstOrThrow()
 
   const filenames = filesString.split(',').map((filename) => filename.trim())
 
@@ -63,11 +67,11 @@ for (const row of rows.toReversed()) {
       console.info('ALREADY EXISTS: ' + filename)
     }
 
-    const file = (await trx('file').insert({ filename }).returning('id'))[0]
-    await trx('filesToInvoice').insert({ fileId: file.id, invoiceId: invoice.id })
+    const file = await trx.insertInto('file').values({ filename }).returning('id').executeTakeFirstOrThrow()
+    await trx.insertInto('filesToInvoice').values({ fileId: file.id, invoiceId: invoice.id }).execute()
   }
 }
 
-trx.commit()
+await trx.commit().execute()
 
-knex.destroy()
+db.destroy()

bin/parse_file.ts

@@ -1,6 +1,6 @@
 import fs from 'fs/promises'
 import parseStream from '../server/lib/parse_stream.ts'
-import knex from '../server/lib/knex.ts'
+import db from '../server/lib/kysely.ts'
 
 for await (const file of process.argv.slice(2)) {
   const fh = await fs.open(file)
@@ -12,4 +12,4 @@ for await (const file of process.argv.slice(2)) {
   await fh.close()
 }
 
-knex.destroy()
+db.destroy()

client/admin/client.ts

@@ -0,0 +1,7 @@
+import './styles/main.scss'
+import { h, render } from 'preact'
+import App from './components/app.tsx'
+
+const state = typeof __STATE__ === 'undefined' ? { user: null } : __STATE__
+
+render(h(App, { state }), document.body)

client/admin/components/admission_form.tsx

@@ -0,0 +1,90 @@
+import { h, type FunctionComponent, type TargetedSubmitEvent } from 'preact'
+import { useCallback } from 'preact/hooks'
+import rek, { type FetchError } from 'rek'
+
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import serializeForm from '../../shared/utils/serialize_form.ts'
+import Button from './button.tsx'
+import Checkbox from './checkbox.tsx'
+import Input from './input.tsx'
+import Message from './message.tsx'
+import sutil from './utility.module.scss'
+
+const AdmissionForm: FunctionComponent<{
+  admission?: ANY
+  onCancel?: ANY
+  onCreate?: ANY
+  onUpdate?: ANY
+  roles?: ANY[]
+}> = ({ admission, onCancel, onCreate, onUpdate, roles }) => {
+  const [{ error, pending, success }, actions] = useRequestState<FetchError>()
+
+  const create = useCallback(async (e: TargetedSubmitEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    actions.pending()
+
+    try {
+      const form = e.currentTarget
+
+      const result = await rek[admission ? 'patch' : 'post'](
+        `/api/admissions${admission ? '/' + admission.id : ''}`,
+        serializeForm(form),
+      )
+
+      actions.success()
+
+      if (admission) {
+        onUpdate?.(result)
+      } else {
+        form.reset()
+        onCreate?.(result)
+      }
+    } catch (err) {
+      actions.error(err as FetchError)
+    }
+  }, [])
+
+  return (
+    <form onSubmit={create}>
+      {success && (
+        <Message type='success' dismiss={actions.reset}>
+          Admission {admission ? 'updated' : 'created'}!
+        </Message>
+      )}
+      {error && (
+        <Message type='error' dismiss={actions.reset}>
+          {error.status || 500} {error.body?.message || error.message}
+        </Message>
+      )}
+
+      <Input name='regex' label='Regex' type='text' defaultValue={admission?.regex} required />
+      {roles && (
+        <div>
+          {roles.map((role) => (
+            <Checkbox
+              key={role.id}
+              name='roles'
+              label={role.name}
+              value={role.id}
+              defaultChecked={!!admission?.roles.find((r: ANY) => r.id === role.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      <div className={sutil.row}>
+        <Button disabled={pending} type='submit'>
+          {admission ? 'Update' : 'Create'}
+        </Button>
+        {onCancel && (
+          <Button disabled={pending} onClick={onCancel} type='button'>
+            Cancel
+          </Button>
+        )}
+      </div>
+    </form>
+  )
+}
+
+export default AdmissionForm

client/admin/components/admissions_page.tsx

@@ -0,0 +1,83 @@
+import { h } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { route } from 'preact-router'
+import rek, { FetchError } from 'rek'
+
+import { useNotifications } from '../contexts/notifications.tsx'
+import useItemsReducer from '../hooks/use_items_reducer.ts'
+import AdmissionForm from './admission_form.tsx'
+import Modal from './modal.tsx'
+import AdmissionsTable from './admissions_table.tsx'
+import PageHeader from './page_header.tsx'
+import Section from './section.tsx'
+
+const AdmissionsPage = () => {
+  const { notify } = useNotifications()
+  const [admissions, actions] = useItemsReducer()
+  const [roles, setRoles] = useState()
+  const [editing, setEditing] = useState(null)
+
+  useEffect(() => {
+    Promise.all([rek('/api/admissions' + location.search), rek('/api/roles')]).then(([admissions, roles]) => {
+      setRoles(roles)
+      actions.reset(admissions)
+    })
+  }, [location.search])
+
+  const onDelete = useCallback(async (id: number) => {
+    if (confirm(`Delete admission ${id}?`)) {
+      try {
+        await rek.delete(`/api/admissions/${id}`)
+
+        actions.del(id)
+
+        notify.success(`Admission ${id} deleted`)
+      } catch (err) {
+        notify.error((err as FetchError).body?.message || (err as FetchError).toString())
+      }
+    }
+  }, [])
+
+  const onSortBy = useCallback((column: string) => {
+    const searchParams = new URLSearchParams(location.search)
+
+    const newSort = (searchParams.get('sort') || 'id') === column ? '-' + column : column
+
+    route(location.pathname + (newSort !== 'id' ? `?sort=${newSort}` : ''))
+  }, [])
+
+  return (
+    <section>
+      <PageHeader>Admissions</PageHeader>
+
+      <Section maxWidth='50%'>
+        <Section.Heading>Create New Admission</Section.Heading>
+
+        <Section.Body>
+          <AdmissionForm onCreate={actions.add} roles={roles} />
+        </Section.Body>
+      </Section>
+
+      <Section>
+        <Section.Heading>List</Section.Heading>
+
+        <Section.Body noPadding>
+          <AdmissionsTable admissions={admissions} onDelete={onDelete} onEdit={setEditing} onSortBy={onSortBy} />
+        </Section.Body>
+      </Section>
+
+      {editing != null && (
+        <Modal onClose={() => setEditing(null)}>
+          <AdmissionForm
+            onCancel={() => setEditing(null)}
+            onUpdate={(admission: ANY) => actions.update(admission.id, admission)}
+            admission={admissions.find((admission) => admission.id === editing)}
+            roles={roles}
+          />
+        </Modal>
+      )}
+    </section>
+  )
+}
+
+export default AdmissionsPage

client/admin/components/admissions_table.tsx

@@ -0,0 +1,50 @@
+import { h, type FunctionComponent } from 'preact'
+import Button from './button.tsx'
+import { Table, Td, Th } from './table.tsx'
+
+const AdmissionsTable: FunctionComponent<{ admissions: ANY[]; onDelete: ANY; onEdit: ANY; onSortBy: ANY }> = ({
+  admissions,
+  onDelete,
+  onEdit,
+  onSortBy,
+}) => (
+  <Table onSortBy={onSortBy}>
+    <thead>
+      <tr>
+        <Th sort='id'>ID</Th>
+        <Th sort='regex'>RegExp</Th>
+        <th>Roles</th>
+        <Th sort>Created At</Th>
+        <th>Created By</th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      {admissions?.length ? (
+        admissions.map((admission) => (
+          <tr key={admission.id}>
+            <td>{admission.id}</td>
+            <td>{admission.regex}</td>
+            <td>{admission.roles.map((role: ANY) => role.name).join(', ')}</td>
+            <td>{admission.createdAt}</td>
+            <td>{admission.createdBy?.email}</td>
+            <Td buttons>
+              <Button size='small' icon='edit' onClick={() => onEdit(admission.id)}>
+                Edit
+              </Button>{' '}
+              <Button size='small' icon='delete' color='red' onClick={() => onDelete(admission.id)}>
+                Delete
+              </Button>
+            </Td>
+          </tr>
+        ))
+      ) : (
+        <tr>
+          <td colSpan={6}>No admissions found</td>
+        </tr>
+      )}
+    </tbody>
+  </Table>
+)
+
+export default AdmissionsTable

client/admin/components/app.module.scss

@@ -0,0 +1,53 @@
+@use 'sass:color';
+@use '../styles/variables' as v;
+
+.base {
+  display: grid;
+  min-height: 100vh;
+  grid-template-columns: v.$aside-width auto;
+  grid-template-rows: v.$header-height auto v.$footer-height;
+}
+
+.logo {
+  color: white;
+  font-weight: bold;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  background: color.scale(v.$color-1, $alpha: -30%);
+  z-index: 2;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.header {
+  background: v.$header-bg;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: v.$gutter;
+}
+
+.aside {
+  z-index: 1;
+  background: v.$aside-bg;
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+  padding-top: v.$header-height;
+}
+
+.main {
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+  background: v.$main-bg;
+  padding: v.$gutter;
+}
+
+.footer {
+  background: v.$footer-bg;
+  grid-column: 2 / 3;
+  grid-row: 3 / 4;
+}

client/admin/components/app.tsx

@@ -0,0 +1,55 @@
+import { h, type FunctionComponent } from 'preact'
+import { useState } from 'preact/hooks'
+import { Router } from 'preact-router'
+
+import CurrentUserContext from '../contexts/current_user.ts'
+import { NotificationsProvider } from '../contexts/notifications.tsx'
+import routes from '../routes.ts'
+
+import Route from './route.tsx'
+
+import CurrentUser from './current_user.tsx'
+import Navigation from './navigation.tsx'
+import Notifications from './notifications.tsx'
+import NotFoundPage from './not_found_page.tsx'
+import s from './app.module.scss'
+
+const App: FunctionComponent<{ state: ANY }> = ({ state }) => {
+  const [user, setUser] = useState(state.user)
+
+  return (
+    <NotificationsProvider defaultTimeout={15e3}>
+      <CurrentUserContext.Provider value={{ user, setUser }}>
+        <div className={s.base}>
+          <a href='/admin' className={s.logo}>
+            Carson Admin
+          </a>
+
+          <header className={s.header}>
+            <CurrentUser className={s.currentUser} />
+          </header>
+
+          {user && (
+            <aside className={s.aside}>
+              <Navigation base='/admin' routes={routes} />
+            </aside>
+          )}
+
+          <main className={s.main}>
+            <Router>
+              {routes
+                ?.flatMap((route) => route.routes || route)
+                .map(({ auth, component, path }) => (
+                  <Route key={path} path={'/admin' + path} component={component} auth={auth} />
+                ))}
+              <NotFoundPage default />
+            </Router>
+          </main>
+          <Notifications />
+        </div>
+      </CurrentUserContext.Provider>
+    </NotificationsProvider>
+  )
+}
+
+export default App

client/admin/components/button.module.scss

@@ -0,0 +1,120 @@
+@use 'sass:color';
+@use '../styles/variables' as v;
+
+$horizontal-padding-small: 20px;
+$horizontal-padding: 32px;
+$icon-size: 22px;
+$icon-size-small: 18px;
+
+.base {
+  display: inline-block;
+  cursor: pointer;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  transition: all 0.5s;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  line-height: 1;
+  padding: 12px 24px;
+
+  &:has(.icon) {
+    padding: 12px;
+  }
+
+  &:disabled {
+    background: #ccc !important;
+    cursor: default;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}
+
+.icon {
+  display: block;
+  height: $icon-size;
+  width: $icon-size;
+  mask: no-repeat center / contain;
+  background: white;
+
+  .small & {
+    height: $icon-size-small;
+    width: $icon-size-small;
+  }
+}
+
+// default
+.blue {
+  background: v.$color-blue;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: v.$color-blue-dark;
+  }
+}
+
+.red {
+  background: v.$color-red;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: v.$color-red-dark;
+  }
+}
+
+.orange {
+  background: v.$color-orange;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: color.adjust(v.$color-orange, $lightness: -20%);
+  }
+}
+
+.small {
+  &:not(:has(.icon)) {
+    height: v.$button-height-small;
+    line-height: v.$button-height-small;
+    padding: 0 $horizontal-padding-small;
+  }
+
+  &:has(.icon) {
+    padding: 10px;
+
+    img {
+      display: block;
+      height: 18px;
+    }
+  }
+}
+
+.white {
+  background: white;
+  color: v.$color-blue;
+  border: 1px solid v.$color-blue;
+  line-height: v.$button-height - 2px;
+  padding: 0 $horizontal-padding - 1px;
+
+  &.red {
+    color: v.$color-red;
+    border: 1px solid v.$color-red;
+  }
+
+  &:hover {
+    background: #ccc;
+  }
+
+  &.small {
+    line-height: v.$button-height-small - 2px;
+    padding: 0 $horizontal-padding-small - 1px;
+  }
+}

client/admin/components/button.tsx

@@ -0,0 +1,17 @@
+import buttonFactory from '../../shared/components/button_factory.tsx'
+
+import deleteIcon from '../images/icon-delete.svg'
+import editIcon from '../images/icon-edit.svg'
+
+import styles from './button.module.scss'
+
+const defaults = {
+  color: 'blue',
+}
+
+const icons = {
+  delete: deleteIcon,
+  edit: editIcon,
+}
+
+export default buttonFactory({ defaults, icons, styles })

client/admin/components/change_password_form.tsx

@@ -0,0 +1,52 @@
+import { h, type FunctionComponent } from 'preact'
+import { useCallback } from 'preact/hooks'
+import rek, { type FetchError } from 'rek'
+
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import Button from './button.tsx'
+import Input from './input.tsx'
+import Message from './message.tsx'
+
+const ChangePasswordForm: FunctionComponent = () => {
+  const [{ error, pending, success }, actions] = useRequestState<FetchError>()
+
+  const changePassword = useCallback(async (e: SubmitEvent & { currentTarget: HTMLFormElement }) => {
+    e.preventDefault()
+
+    actions.pending()
+
+    try {
+      const params = new URLSearchParams(location.search)
+
+      await rek.post('/auth/change-password', {
+        password: e.currentTarget.password.value,
+        token: params.get('token'),
+        email: params.get('email'),
+      })
+
+      actions.success()
+    } catch (err) {
+      actions.error(err as FetchError)
+    }
+  }, [])
+
+  return success ? (
+    <Message type='success' noMargin>
+      Password changed! Head over to <a href='/admin/login'>the login page</a> to try it out!
+    </Message>
+  ) : (
+    <form onSubmit={changePassword}>
+      {error && (
+        <Message type='error'>
+          {error.status}: {error.body?.message || error.message}
+        </Message>
+      )}
+
+      <Input name='password' label='Password' type='password' required />
+      <Input name='confirmPassword' label='Confirm Password' type='password' sameAs='password' required />
+      <Button disabled={pending}>Change Password</Button>
+    </form>
+  )
+}
+
+export default ChangePasswordForm

client/admin/components/change_password_page.tsx

@@ -0,0 +1,19 @@
+import { h } from 'preact'
+import ChangePasswordForm from './change_password_form.tsx'
+
+import PageHeader from './page_header.tsx'
+import Section from './section.tsx'
+
+const ChangePasswordPage = () => (
+  <section>
+    <PageHeader>Change Password</PageHeader>
+
+    <Section maxWidth='400px'>
+      <Section.Body>
+        <ChangePasswordForm />
+      </Section.Body>
+    </Section>
+  </section>
+)
+
+export default ChangePasswordPage

client/admin/components/checkbox.module.scss

@@ -0,0 +1,15 @@
+.base {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+
+.element {
+  display: block;
+  margin: 0;
+}
+
+.label {
+  display: block;
+  margin-left: 8px;
+}

client/admin/components/checkbox.tsx

@@ -0,0 +1,4 @@
+import checkboxFactory from '../../shared/components/checkbox_factory.tsx'
+import styles from './checkbox.module.scss'
+
+export default checkboxFactory(styles)

client/admin/components/current_user.module.scss

@@ -0,0 +1,25 @@
+@use '../styles/variables' as v;
+
+.base {
+  color: white;
+  display: flex;
+}
+
+.links {
+  display: flex;
+  margin-left: v.$gutter;
+
+  a {
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:not(:last-child):after {
+      content: '\00a0|\00a0';
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

client/admin/components/current_user.tsx

@@ -0,0 +1,32 @@
+import { h, type FunctionComponent } from 'preact'
+import cn from 'classnames'
+
+import { useCurrentUser } from '../contexts/current_user.ts'
+import s from './current_user.module.scss'
+
+const CurrentUser: FunctionComponent<{ className?: string }> = ({ className }) => {
+  const { user } = useCurrentUser()
+
+  return user ? (
+    <div className={cn(s.base, className)}>
+      <div className={s.email}>{user.email}</div>
+
+      <div className={s.links}>
+        <a href='/auth/logout' data-native>
+          Logout
+        </a>
+      </div>
+    </div>
+  ) : (
+    <div className={cn(s.base, className)}>
+      <p>You are not logged in</p>
+
+      <div className={s.links}>
+        <a href='/admin/login'>Login</a>
+        <a href='/admin/register'>Register</a>
+      </div>
+    </div>
+  )
+}
+
+export default CurrentUser

client/admin/components/error_details.module.scss

@@ -0,0 +1,12 @@
+.base {
+  width: calc(100% - 30px);
+  max-width: 1024px;
+  overflow: hidden;
+}
+
+.headers {
+  pre {
+    overflow-x: auto;
+    overflow-y: visible;
+  }
+}

client/admin/components/error_details.tsx

@@ -0,0 +1,41 @@
+import { h, type FunctionComponent } from 'preact'
+// @ts-ignore
+import Format from 'easy-tz/format'
+import { omit } from 'lowline'
+import Section from './section.tsx'
+import s from './error_details.module.scss'
+
+const format = Format.bind(null, null, 'YYYY.MM.DD\nHH:mm:ss')
+
+const ErrorDetails: FunctionComponent<{ error: ANY }> = ({ error }) => {
+  return (
+    <Section className={s.base}>
+      <Section.Heading>
+        {error.id} : {error.statusCode} : {error.type}
+      </Section.Heading>
+      <Section.Body>
+        <div>{error.message}</div>
+        <div>{format(error.createdAt)}</div>
+        <div className={s.details}>
+          <h2>Details</h2>
+          <pre>{JSON.stringify(omit(error.details, ['stack', 'message', 'type']), null, '  ')}</pre>
+        </div>
+        <div className={s.stack}>
+          <h2>Stack</h2>
+          <pre>{error.stack}</pre>
+        </div>
+        <div className={s.method}>
+          {error.method} {error.path}
+        </div>
+        <div className={s.headers}>
+          <h2>Headers</h2>
+          <pre>{JSON.stringify(error.headers, null, '  ')}</pre>
+        </div>
+        <div>{error.ip}</div>
+        <div className={s.reqId}>{error.reqId}</div>
+      </Section.Body>
+    </Section>
+  )
+}
+
+export default ErrorDetails

client/admin/components/errors_page.module.scss

@@ -0,0 +1,20 @@
+@use 'sass:math';
+@use '../styles/variables' as v;
+
+.top {
+  display: flex;
+  align-items: flex-end;
+}
+
+.search {
+  flex: 1 0 auto;
+}
+
+.delete {
+  flex: 0 0 auto;
+  margin: 0 0 v.$gutter v.$gutter;
+
+  > button:not(:last-child) {
+    margin-right: math.div(v.$gutter, 4);
+  }
+}

client/admin/components/errors_page.tsx

@@ -0,0 +1,150 @@
+import { h } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { route } from 'preact-router'
+import rek, { type FetchError } from 'rek'
+import { pick } from 'lowline'
+
+import { useNotifications } from '../contexts/notifications.tsx'
+import useItemsReducer from '../hooks/use_items_reducer.ts'
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import Button from './button.tsx'
+import ErrorDetails from './error_details.tsx'
+import ErrorsSearchForm from './errors_search_form.tsx'
+import ErrorsTable from './errors_table.tsx'
+import Modal from './modal.tsx'
+import PageHeader from './page_header.tsx'
+import Pagination from './pagination.tsx'
+import Section from './section.tsx'
+
+import s from './errors_page.module.scss'
+
+const defaultSort = '-id'
+
+export default function ErrorsPage() {
+  const { notify } = useNotifications()
+  const [{ pending }, request] = useRequestState()
+  const [pagination, setPagination] = useState({})
+  const [errors, items] = useItemsReducer()
+  const [selected, setSelected] = useState(null)
+
+  useEffect(() => {
+    fetch()
+  }, [location.search])
+
+  const fetch = useCallback(async () => {
+    try {
+      const { items: errors, ...pagination } = await rek(`/api/errors${location.search}`)
+
+      items.reset(errors)
+      setPagination(pagination)
+    } catch (err) {
+      notify.error((err as FetchError).body?.message || (err as FetchError).message)
+    }
+  }, [])
+
+  const onSearchSubmit = useCallback(
+    (query: ANY) => {
+      const currentParams = new URLSearchParams(location.search)
+
+      if (currentParams.has('sort')) query = { ...query, sort: currentParams.get('sort') }
+
+      route(location.pathname + (Object.keys(query).length ? '?' + new URLSearchParams(query) : ''))
+    },
+    [location.search],
+  )
+
+  const onSortBy = useCallback((column: string) => {
+    const searchParams = new URLSearchParams(location.search)
+
+    searchParams.delete('offset')
+
+    searchParams.set('sort', (searchParams.get('sort') || defaultSort) === column ? '-' + column : column)
+
+    route(location.pathname + '?' + searchParams)
+  }, [])
+
+  const onDelete = useCallback(async (id: number) => {
+    if (confirm(`Sure you want to remove error #${id}`)) {
+      try {
+        request.pending()
+
+        await rek.delete(`/api/errors/${id}`)
+
+        fetch()
+
+        notify.success(`Successfully deleted error #${id}`)
+      } catch {
+        notify.error(`Failed to delete error #${id}`)
+      }
+
+      request.reset()
+    }
+  }, [])
+
+  const deleteErrors = useCallback(
+    async (page: ANY) => {
+      if (confirm(page ? 'Delete errors on page?' : 'Delete all filtered errors?')) {
+        try {
+          request.pending()
+
+          await rek.delete('/api/errors', {
+            searchParams: page ? { id: errors.map((error) => error.id).join(',') } : location.search,
+          })
+
+          fetch()
+
+          notify.success(page ? 'Errors on page deleted' : 'All filtered errors deleted')
+        } catch (err) {
+          notify.error(`Error deleting errors: ${(err as FetchError).body?.message || (err as FetchError).message}`)
+        }
+
+        request.reset()
+      }
+    },
+    [errors],
+  )
+
+  return (
+    <section>
+      <PageHeader>Errors</PageHeader>
+
+      <Section>
+        <Section.Heading>List</Section.Heading>
+
+        <Section.Body className={s.top}>
+          <ErrorsSearchForm className={s.search} onSubmit={onSearchSubmit} />
+
+          <div className={s.delete}>
+            <Button color='red' className={s.button} onClick={() => deleteErrors(true)}>
+              Delete Page
+            </Button>
+            <Button color='red' className={s.button} onClick={() => deleteErrors(false)}>
+              Delete All
+            </Button>
+          </div>
+        </Section.Body>
+
+        <Section.Body noPadding>
+          <Pagination {...pagination} {...pick(location, 'search', 'pathname')} />
+
+          <ErrorsTable
+            defaultSort={defaultSort}
+            errors={errors}
+            onDelete={onDelete}
+            onSelect={setSelected}
+            pending={pending}
+            onSortBy={onSortBy}
+          />
+
+          <Pagination {...pagination} {...pick(location, 'search', 'pathname')} />
+        </Section.Body>
+      </Section>
+
+      {selected != null && (
+        <Modal onClose={() => setSelected(null)}>
+          <ErrorDetails error={errors.find((error) => error.id === selected)} />
+        </Modal>
+      )}
+    </section>
+  )
+}

client/admin/components/errors_search_form.module.scss

@@ -0,0 +1,7 @@
+@use '../styles/variables' as v;
+
+.button {
+  align-self: end;
+  flex: 0 0 auto;
+  margin-bottom: v.$gutter;
+}

client/admin/components/errors_search_form.tsx

@@ -0,0 +1,31 @@
+import { h, type FunctionComponent } from 'preact'
+import { useCallback } from 'preact/hooks'
+
+import serializeForm from '../../shared/utils/serialize_form.ts'
+import Input from './input.tsx'
+import Button from './button.tsx'
+
+import s from './errors_search_form.module.scss'
+import sutil from './utility.module.scss'
+
+const ErrorsSearchForm: FunctionComponent<{ className?: string; onSubmit: ANY }> = ({ onSubmit, className }) => {
+  const searchParams = new URLSearchParams(location.search)
+
+  const onSubmitHandler = useCallback((e: SubmitEvent & { currentTarget: HTMLFormElement }) => {
+    e.preventDefault()
+
+    onSubmit(serializeForm(e.currentTarget))
+  }, [])
+
+  return (
+    <form onSubmit={onSubmitHandler} className={className}>
+      <div className={sutil.row}>
+        <Input label='Status Code' name='statusCode' defaultValue={searchParams.get('statusCode')} />
+        <Input label='Type' name='type' defaultValue={searchParams.get('type')} />
+        <Button className={s.button}>Search</Button>
+      </div>
+    </form>
+  )
+}
+
+export default ErrorsSearchForm

client/admin/components/errors_table.module.scss

@@ -0,0 +1,31 @@
+.base {
+  td {
+    &.id {
+      width: 35px;
+    }
+
+    &.statusCode {
+      width: 50px;
+    }
+
+    &.method {
+      width: 72px;
+    }
+
+    &.path {
+      max-width: 120px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &.controls {
+      padding: 0 12px;
+      width: 87px;
+      max-width: none;
+    }
+  }
+
+  > tbody > tr {
+    cursor: pointer;
+  }
+}

client/admin/components/errors_table.tsx

@@ -0,0 +1,76 @@
+import { h, type FunctionComponent } from 'preact'
+// eslint-disable-next-line import/no-unresolved
+// @ts-ignore
+import Format from 'easy-tz/format'
+// @ts-ignore
+import suppress from '@domp/suppress'
+
+import Button from './button.tsx'
+import { Table, Th } from './table.tsx'
+import s from './errors_table.module.scss'
+
+const format = Format.bind(null, null, 'YYYY.MM.DD\nHH:mm:ss')
+
+const ErrorsTable: FunctionComponent<{
+  defaultSort: string
+  errors: ANY[]
+  onDelete?: ANY
+  onSelect?: ANY
+  onSortBy?: ANY
+  pending?: boolean
+}> = ({ defaultSort, errors, onDelete, onSelect, onSortBy, pending }) => {
+  return (
+    <Table className={s.base} defaultSort={defaultSort} onSortBy={onSortBy}>
+      <thead>
+        <tr>
+          <Th sort='id'>ID</Th>
+          <Th sort>CreatedAt</Th>
+          <Th sort='statusCode'>Status</Th>
+          <Th sort>Type</Th>
+          <Th sort>Message</Th>
+          <Th sort>Method</Th>
+          <Th sort>Path</Th>
+          <Th sort='ip'>IP</Th>
+          <Th sort>ReqId</Th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {errors?.length ? (
+          errors.map((error) => (
+            <tr key={error.id} onClick={() => onSelect(error.id)}>
+              <td className={s.id}>{error.id}</td>
+              <td>{format(error.createdAt)}</td>
+              <td className={s.statusCode}>{error.statusCode}</td>
+              <td>{error.type}</td>
+              <td>{error.message.slice(0, 255)}</td>
+              <td className={s.method}>{error.method}</td>
+              <td className={s.path}>{error.path}</td>
+              <td>{error.ip}</td>
+              <td className={s.reqId}>{error.reqId}</td>
+              <td className={s.controls}>
+                <Button
+                  size='small'
+                  disabled={pending}
+                  color='red'
+                  onClick={(e) => {
+                    suppress(e)
+                    onDelete(error.id)
+                  }}
+                >
+                  Delete
+                </Button>
+              </td>
+            </tr>
+          ))
+        ) : (
+          <tr>
+            <td colSpan={6}>No errors found</td>
+          </tr>
+        )}
+      </tbody>
+    </Table>
+  )
+}
+
+export default ErrorsTable

client/admin/components/forgot_password_form.tsx

@@ -0,0 +1,47 @@
+import { h, type FunctionComponent } from 'preact'
+import { useCallback } from 'preact/hooks'
+import rek, { type FetchError } from 'rek'
+
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import Button from './button.tsx'
+import Input from './input.tsx'
+import Message from './message.tsx'
+
+const ForgotPasswordForm: FunctionComponent = () => {
+  const [{ error, pending, success }, actions] = useRequestState<FetchError>()
+
+  const forgotPassword = useCallback(async (e: SubmitEvent & { currentTarget: HTMLFormElement }) => {
+    e.preventDefault()
+
+    actions.pending()
+
+    try {
+      await rek.post('/auth/reset-password', {
+        email: e.currentTarget.email.value,
+      })
+
+      actions.success()
+    } catch (err) {
+      actions.error(err as FetchError)
+    }
+  }, [])
+
+  return success ? (
+    <Message type='success' noMargin>
+      Success! Check your inbox to choose a new password.
+    </Message>
+  ) : (
+    <form onSubmit={forgotPassword}>
+      {error && (
+        <Message type='error'>
+          {error.status}: {error.body?.message || error.message}
+        </Message>
+      )}
+
+      <Input name='email' label='Email' type='email' required />
+      <Button disabled={pending}>Forgot Password</Button>
+    </form>
+  )
+}
+
+export default ForgotPasswordForm

client/admin/components/forgot_password_page.tsx

@@ -0,0 +1,19 @@
+import { h } from 'preact'
+import ForgotPasswordForm from './forgot_password_form.tsx'
+
+import PageHeader from './page_header.tsx'
+import Section from './section.tsx'
+
+const ForgotPasswordPage = () => (
+  <section>
+    <PageHeader>Forgot Password</PageHeader>
+
+    <Section maxWidth='400px'>
+      <Section.Body>
+        <ForgotPasswordForm />
+      </Section.Body>
+    </Section>
+  </section>
+)
+
+export default ForgotPasswordPage

client/admin/components/form.module.scss

@@ -0,0 +1,21 @@
+.row {
+  display: flex;
+  width: 100%;
+
+  > * {
+    flex: 1 0 0px;
+
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+
+  > :not(:last-child) {
+    margin-right: 8px;
+  }
+}

client/admin/components/input.module.scss

@@ -0,0 +1,70 @@
+@use 'sass:color';
+@use '../styles/variables' as v;
+
+.base {
+  display: flex;
+  flex-direction: column;
+
+  &:not(:last-child):not(.noMargin) {
+    margin-bottom: v.$gutter;
+  }
+}
+
+.label {
+  order: 1;
+  font-weight: bold;
+  margin-bottom: v.$form-label-margin;
+
+  &:has(input:invalid) {
+    color: v.$form-invalid-color;
+  }
+
+  &:has(input:valid) {
+    color: v.$form-valid-color;
+  }
+}
+
+.element {
+  order: 2;
+  width: 100%;
+  box-shadow: none;
+  border: 1px solid v.$form-border-color;
+  padding: v.$form-element-padding;
+  font-family: v.$body-font-family;
+  background: white;
+
+  &:focus {
+    outline: none;
+    border-color: v.$color-blue;
+    box-shadow: 0 0 5px 0px color.scale(v.$color-blue, $alpha: -20%);
+  }
+
+  .touched &:invalid {
+    border-color: v.$form-invalid-color;
+
+    ~ .label {
+      color: v.$form-invalid-color;
+    }
+
+    &:focus {
+      box-shadow: 0 0 5px 0px color.scale(v.$form-invalid-color, $alpha: -20%);
+    }
+  }
+
+  .touched &:valid {
+    border-color: v.$form-valid-color;
+
+    ~ .label {
+      color: v.$form-valid-color;
+    }
+
+    &:focus {
+      box-shadow: 0 0 5px 0px color.scale(v.$form-valid-color, $alpha: -20%);
+    }
+  }
+}
+
+.errorLabel {
+  color: v.$form-invalid-color;
+  margin-top: v.$form-label-margin;
+}

client/admin/components/input.tsx

@@ -0,0 +1,5 @@
+import inputFactory from '../../shared/components/input_factory.tsx'
+
+import s from './input.module.scss'
+
+export default inputFactory(s)

client/admin/components/invite_form.tsx

@@ -0,0 +1,55 @@
+import { h, type FunctionComponent, type TargetedSubmitEvent } from 'preact'
+import { useCallback } from 'preact/hooks'
+import rek, { type FetchError } from 'rek'
+
+import serializeForm from '../../shared/utils/serialize_form.ts'
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import Button from './button.tsx'
+import Checkbox from './checkbox.tsx'
+import Input from './input.tsx'
+import Message from './message.tsx'
+
+const InviteForm: FunctionComponent<{ onCreate?: ANY; roles?: ANY[] }> = ({ onCreate, roles }) => {
+  const [{ error, pending, success }, actions] = useRequestState<FetchError>()
+
+  const create = useCallback(async (e: TargetedSubmitEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    actions.pending()
+
+    try {
+      const form = e.currentTarget
+      const result = await rek.post('/api/invites', serializeForm(form))
+
+      form.reset()
+      actions.success()
+      onCreate?.(result)
+    } catch (err) {
+      actions.error(err as FetchError)
+    }
+  }, [])
+
+  return (
+    <form onSubmit={create}>
+      {success && <Message type='success'>Invite sent!</Message>}
+      {error && (
+        <Message type='error'>
+          {error.status || 500} {error.body?.message || error.message}
+        </Message>
+      )}
+
+      <Input name='email' label='Email' type='email' required />
+      {roles && (
+        <div>
+          {roles.map((role) => (
+            <Checkbox key={role.id} name='roles' label={role.name} value={role.id} />
+          ))}
+        </div>
+      )}
+
+      <Button disabled={pending}>Create</Button>
+    </form>
+  )
+}
+
+export default InviteForm

client/admin/components/invites_page.module.scss

@@ -0,0 +1,11 @@
+@use '../styles/variables' as v;
+
+.row {
+  display: flex;
+  align-items: flex-start;
+}
+
+.left {
+  flex: 0 0 400px;
+  margin-right: v.$gutter;
+}

client/admin/components/invites_page.tsx

@@ -0,0 +1,74 @@
+import { h } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { route } from 'preact-router'
+import rek, { type FetchError } from 'rek'
+
+import { useNotifications } from '../contexts/notifications.tsx'
+import useItemsReducer from '../hooks/use_items_reducer.ts'
+import InviteForm from './invite_form.tsx'
+import InvitesTable from './invites_table.tsx'
+import PageHeader from './page_header.tsx'
+import Section from './section.tsx'
+
+import s from './invites_page.module.scss'
+
+const InvitesPage = () => {
+  const { notify } = useNotifications()
+  const [invites, actions] = useItemsReducer()
+  const [roles, setRoles] = useState()
+
+  useEffect(() => {
+    Promise.all([rek('/api/invites' + location.search), rek('/api/roles')]).then(([invites, roles]) => {
+      setRoles(roles)
+      actions.reset(invites)
+    })
+  }, [location.search])
+
+  const onDelete = useCallback(async (id: number) => {
+    if (confirm(`Delete invite ${id}?`)) {
+      try {
+        await rek.delete(`/api/invites/${id}`)
+
+        actions.del(id)
+
+        notify.success(`Invite ${id} deleted`)
+      } catch (err) {
+        notify.error((err as FetchError).body?.message || (err as FetchError).toString())
+      }
+    }
+  }, [])
+
+  const onSortBy = useCallback((column: string) => {
+    const searchParams = new URLSearchParams(location.search)
+
+    const newSort = (searchParams.get('sort') || 'id') === column ? '-' + column : column
+
+    route(location.pathname + (newSort !== 'id' ? `?sort=${newSort}` : ''))
+  }, [])
+
+  return (
+    <section>
+      <PageHeader>Invites</PageHeader>
+
+      <div className={s.row}>
+        <Section className={s.left}>
+          <Section.Heading>Create New Invite</Section.Heading>
+
+          <Section.Body>
+            <InviteForm onCreate={actions.add} roles={roles} />
+          </Section.Body>
+        </Section>
+      </div>
+
+      <Section>
+        <Section.Heading>List</Section.Heading>
+
+        <Section.Body noPadding>
+          <InvitesTable invites={invites} onDelete={onDelete} onSortBy={onSortBy} />
+        </Section.Body>
+      </Section>
+    </section>
+  )
+}
+
+export default InvitesPage

client/admin/components/invites_table.tsx

@@ -0,0 +1,52 @@
+import { h, type FunctionComponent } from 'preact'
+import Button from './button.tsx'
+import { Table, Td, Th } from './table.tsx'
+
+const InvitesTable: FunctionComponent<{ invites: ANY[]; onDelete?: ANY; onSortBy?: ANY }> = ({
+  invites,
+  onDelete,
+  onSortBy,
+}) => (
+  <Table onSortBy={onSortBy}>
+    <thead>
+      <tr>
+        <Th sort='id'>ID</Th>
+        <Th sort>Email</Th>
+        <Th sort>Token</Th>
+        <Th>Roles</Th>
+        <Th sort>Created At</Th>
+        <Th>Created By</Th>
+        <Th sort>Consumed At</Th>
+        <Th>Consumed By</Th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      {invites?.length ? (
+        invites.map((invite) => (
+          <tr key={invite.id}>
+            <td>{invite.id}</td>
+            <td>{invite.email}</td>
+            <td>{invite.token}</td>
+            <td>{invite.roles.map((role: ANY) => role.name).join(', ')}</td>
+            <td>{invite.createdAt}</td>
+            <td>{invite.createdBy?.email}</td>
+            <td>{invite.consumedAt}</td>
+            <td>{invite.consumedBy?.email}</td>
+            <Td buttons>
+              <Button size='small' icon='delete' color='red' onClick={() => onDelete(invite.id)}>
+                Delete
+              </Button>
+            </Td>
+          </tr>
+        ))
+      ) : (
+        <tr>
+          <td colSpan={8}>No invites found</td>
+        </tr>
+      )}
+    </tbody>
+  </Table>
+)
+
+export default InvitesTable

client/admin/components/login_form.module.scss

@@ -0,0 +1,11 @@
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.links {
+  li:not(:last-child) {
+    padding-bottom: 4px;
+  }
+}

client/admin/components/login_form.tsx

@@ -0,0 +1,69 @@
+import { h, type FunctionComponent, type TargetedSubmitEvent } from 'preact'
+import type { FetchError } from 'rek'
+import { useCallback } from 'preact/hooks'
+import { useCurrentUser } from '../contexts/current_user.ts'
+import rek from 'rek'
+
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import Button from './button.tsx'
+import Input from './input.tsx'
+import Message from './message.tsx'
+import s from './login_form.module.scss'
+
+const LoginForm: FunctionComponent = () => {
+  const [{ error, pending }, actions] = useRequestState<FetchError>()
+  const { setUser } = useCurrentUser()
+
+  const login = useCallback(async (e: TargetedSubmitEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    actions.pending()
+
+    const form = e.currentTarget
+
+    try {
+      const result = await rek.post('/auth/login', {
+        email: form.email.value,
+        password: form.password.value,
+      })
+
+      actions.success()
+      setUser(result)
+    } catch (err) {
+      actions.error(err as FetchError)
+    }
+  }, [])
+
+  return (
+    <form onSubmit={login}>
+      {error && <Message type='error'>Error: {error.body?.message || error.message}</Message>}
+
+      <Input name='email' label='Email' placeholder='Email' type='email' autoFocus required />
+      <Input
+        type='password'
+        label='Password'
+        name='password'
+        placeholder='Password'
+        autoComplete='current-password'
+        required
+      />
+
+      <div className={s.footer}>
+        <ul className={s.links}>
+          <li>
+            <a href='/admin/forgot-password'>Forgot your password?</a>
+          </li>
+          <li>
+            <a href='/admin/register'>No account? Register a new</a>
+          </li>
+        </ul>
+
+        <Button type='submit' disabled={pending}>
+          Login
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export default LoginForm

client/admin/components/login_page.tsx

@@ -0,0 +1,18 @@
+import { h } from 'preact'
+import LoginForm from './login_form.tsx'
+import PageHeader from './page_header.tsx'
+import Section from './section.tsx'
+
+const LoginPage = () => (
+  <section>
+    <PageHeader>Login</PageHeader>
+
+    <Section maxWidth='400px'>
+      <Section.Body>
+        <LoginForm />
+      </Section.Body>
+    </Section>
+  </section>
+)
+
+export default LoginPage

client/admin/components/message.module.scss

@@ -0,0 +1,32 @@
+@use '../styles/variables' as v;
+
+.base {
+  padding: 16px;
+  font-weight: bold;
+  display: flex;
+  border-left: 5px solid transparent;
+  margin-bottom: 20px;
+  justify-content: space-between;
+
+  &.noMargin {
+    margin-bottom: 0;
+  }
+}
+
+.normal {
+  color: v.$color-blue-dark;
+  background: v.$color-blue-light;
+  border-color: v.$color-blue-dark;
+}
+
+.error {
+  color: v.$color-red-dark;
+  background: v.$color-red-light;
+  border-color: v.$color-red-dark;
+}
+
+.success {
+  color: v.$color-green-dark;
+  background: v.$color-green-light;
+  border-color: v.$color-green-dark;
+}

client/admin/components/message.tsx

@@ -0,0 +1,4 @@
+import s from './message.module.scss'
+import messageFactory from '../../shared/components/message_factory.tsx'
+
+export default messageFactory(s)

client/admin/components/modal.module.scss

@@ -0,0 +1,35 @@
+.overlay {
+  position: fixed;
+  z-index: 1999;
+  background: rgba(0, 0, 0, 0.5);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.base {
+  position: relative;
+  background: #fff;
+}
+
+.closeButton {
+  position: absolute;
+  right: 20px;
+  top: 5px;
+  display: block;
+  padding: 5px;
+  border: 1px solid black;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.content {
+  padding: 40px;
+  max-height: calc(100vh - 80px);
+  max-width: calc(100vw - 80px);
+  overflow-y: auto;
+}

client/admin/components/modal.tsx

@@ -0,0 +1,41 @@
+import { h, type FunctionComponent } from 'preact'
+import { useEffect } from 'preact/hooks'
+import Portal from '../../shared/components/portal.tsx'
+import disableScroll from '../../shared/utils/disable_scroll.ts'
+import stopPropagation from '../../shared/utils/stop_propagation.ts'
+import Button from './button.tsx'
+import s from './modal.module.scss'
+
+const Modal: FunctionComponent<{ onClose?: (e: ANY) => void }> = ({ children, onClose }) => {
+  useEffect(() => {
+    function onKeyUp(e: ANY) {
+      if (e.keyCode === 27) onClose!(e)
+    }
+
+    disableScroll.disable()
+
+    if (onClose) addEventListener('keyup', onKeyUp)
+
+    return () => {
+      disableScroll.enable()
+      removeEventListener('keyup', onKeyUp)
+    }
+  }, [])
+
+  return (
+    <Portal>
+      <div className={s.overlay} onClick={onClose}>
+        <div className={s.base} onClick={stopPropagation}>
+          {onClose && (
+            <Button onClick={onClose} className={s.closeButton}>
+              X
+            </Button>
+          )}
+          <div className={s.content}>{children}</div>
+        </div>
+      </div>
+    </Portal>
+  )
+}
+
+export default Modal

client/admin/components/navigation.module.scss

@@ -0,0 +1,122 @@
+@use 'sass:color';
+@use '../styles/variables' as v;
+
+$transition-time: 0.3s;
+$item-padding: 16px;
+
+.base {
+  margin-top: v.$gutter * 2;
+  position: relative;
+}
+
+.itemBase {
+  position: relative;
+  display: block;
+
+  > a {
+    position: relative;
+    text-decoration: none;
+    display: block;
+    color: #b8c7ce;
+    padding: $item-padding $item-padding $item-padding $item-padding + 6px;
+  }
+
+  &:hover,
+  &.current {
+    background: #1e282c;
+
+    > a {
+      color: white;
+    }
+  }
+
+  &.current {
+    > a {
+      &:before {
+        width: 6px;
+      }
+    }
+  }
+}
+
+.groupBase {
+  display: block;
+  background: #2c3b41;
+
+  .items {
+    transition: height $transition-time;
+    overflow: hidden;
+  }
+
+  .itemBase {
+    > a {
+      color: #8aa4af;
+      padding: $item-padding $item-padding $item-padding $item-padding + 6px;
+    }
+
+    &:hover,
+    &.current {
+      > a {
+        background: color.adjust(#2c3b41, $lightness: 5%);
+        color: white;
+      }
+    }
+  }
+
+  &:not(.visible) > .items {
+    height: 0 !important;
+  }
+}
+
+.groupTop {
+  align-items: center;
+  background: v.$aside-bg;
+  display: flex;
+  justify-content: space-between;
+  padding: $item-padding $item-padding $item-padding $item-padding + 6px;
+  position: relative;
+  color: #b8c7ce;
+
+  &:hover,
+  .visible &,
+  .current & {
+    background: #1e282c;
+    cursor: pointer;
+    color: white;
+  }
+
+  .current &:before {
+    width: 6px;
+  }
+}
+
+.groupTop,
+.itemBase > a {
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    background: v.$color-blue;
+    transition: width $transition-time;
+  }
+}
+
+.groupTitle {
+  display: block;
+}
+
+.groupIcon {
+  &:before {
+    display: block;
+    content: '+';
+
+    .visible &,
+    .current & {
+      content: '-';
+    }
+  }
+}

client/admin/components/navigation.tsx

@@ -0,0 +1,51 @@
+import { h, type FunctionComponent } from 'preact'
+import { useRouter } from 'preact-router'
+
+import NavigationItem from './navigation_item.tsx'
+import NavigationGroup from './navigation_group.tsx'
+import s from './navigation.module.scss'
+
+import type { Route } from '../../../shared/types.ts'
+
+type NavigationProps = {
+  base: string
+  routes: Route[]
+}
+
+const Navigation: FunctionComponent<NavigationProps> = ({ base, routes }) => {
+  const [{ url }] = useRouter()
+
+  const currentPath = base ? url.slice(base.length) : url
+
+  return (
+    <nav className={s.base}>
+      <ul>
+        {routes
+          .filter(({ nav }) => nav !== false)
+          .map(({ path, title, routes }) =>
+            routes ? (
+              <NavigationGroup
+                key={path}
+                base={base}
+                currentPath={currentPath}
+                path={path}
+                title={title}
+                routes={routes}
+              />
+            ) : (
+              <NavigationItem
+                key={path}
+                base={base}
+                currentPath={currentPath}
+                path={path}
+                title={title}
+                name={title.toLowerCase()}
+              />
+            ),
+          )}
+      </ul>
+    </nav>
+  )
+}
+
+export default Navigation

client/admin/components/navigation_group.tsx

@@ -0,0 +1,72 @@
+import { h, type FunctionComponent } from 'preact'
+import { useEffect, useReducer, useRef } from 'preact/hooks'
+import cn from 'classnames'
+
+import NavigationItem from './navigation_item.tsx'
+import s from './navigation.module.scss'
+
+import type { Route } from '../../../shared/types.ts'
+
+type NavigationGroupProps = {
+  base: string
+  currentPath: string
+  path: string
+  routes: Route[]
+  title: string
+}
+
+const NavigationGroup: FunctionComponent<NavigationGroupProps> = ({ base, currentPath, path, routes, title }) => {
+  const itemsRef = useRef<HTMLUListElement | null>(null)
+  const [visible, toggle] = useReducer((visible, force) => (typeof force === 'boolean' ? force : !visible), false)
+  const current = currentPath === path || (path !== '/' && currentPath.startsWith(path))
+
+  useEffect(() => {
+    itemsRef.current!.style.height = itemsRef.current!.scrollHeight + 'px'
+  }, [])
+
+  useEffect(() => {
+    toggle(false)
+  }, [currentPath])
+
+  return (
+    <li
+      className={cn(s.groupBase, {
+        [s.visible]: current || visible,
+        [s.current]: current,
+      })}
+    >
+      <div className={s.groupTop} onClick={toggle}>
+        <span className={s.groupTitle}>{title}</span>
+        <div className={s.groupIcon} />
+      </div>
+
+      <ul ref={itemsRef} className={s.items}>
+        {routes
+          .filter(({ nav }) => nav !== false)
+          .map(({ path, title, routes }) =>
+            routes ? (
+              <NavigationGroup
+                key={path}
+                base={base}
+                currentPath={currentPath}
+                path={path}
+                title={title}
+                routes={routes}
+              />
+            ) : (
+              <NavigationItem
+                key={path}
+                base={base}
+                currentPath={currentPath}
+                path={path}
+                title={title}
+                name={title.toLowerCase()}
+              />
+            ),
+          )}
+      </ul>
+    </li>
+  )
+}
+
+export default NavigationGroup

client/admin/components/navigation_item.tsx

@@ -0,0 +1,42 @@
+import { h, type FunctionComponent } from 'preact'
+import cn from 'classnames'
+
+import s from './navigation.module.scss'
+
+const NavigationItem: FunctionComponent<{
+  base: string
+  currentPath: string
+  name: string
+  path: string
+  routes?: ANY[]
+  title: string
+}> = ({ base = '', currentPath, name, title, path, routes }) => (
+  <li
+    className={cn(s.itemBase, name, {
+      [s.current]: currentPath && (currentPath === path || (path !== '/' && currentPath.startsWith(path))),
+    })}
+  >
+    <a href={base + path}>
+      <span>{title}</span>
+    </a>
+
+    {routes && (
+      <ul className={s.sub}>
+        {routes.map(
+          (route) =>
+            route.nav !== false && (
+              <NavigationItem
+                key={route.name}
+                base={base}
+                currentPath={currentPath}
+                path={path + route.path}
+                {...route}
+              />
+            ),
+        )}
+      </ul>
+    )}
+  </li>
+)
+
+export default NavigationItem

client/admin/components/not_found_page.tsx

@@ -0,0 +1,13 @@
+import { h, type FunctionComponent } from 'preact'
+import type { RoutableProps } from 'preact-router'
+
+const NotFoundPage: FunctionComponent<RoutableProps> = () => (
+  <section>
+    <h1>Not Found :(</h1>
+    <p>
+      Try the <a href='/admin'>Start Page</a>
+    </p>
+  </section>
+)
+
+export default NotFoundPage

client/admin/components/notifications.module.scss

@@ -0,0 +1,15 @@
+.base {
+  position: fixed;
+  z-index: 4000;
+  top: 15px;
+  left: 50%;
+  width: calc(100% - 30px);
+  max-width: 800px;
+  transform: translateX(-50%);
+}
+
+.notification {
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+}

client/admin/components/notifications.tsx

@@ -0,0 +1,19 @@
+import { h } from 'preact'
+
+import { useNotifications } from '../contexts/notifications.tsx'
+import Message from './message.tsx'
+import s from './notifications.module.scss'
+
+export default function Notifications() {
+  const { notifications } = useNotifications()
+
+  return (
+    <div className={s.base}>
+      {notifications.map(({ id, dismiss, message, type }) => (
+        <Message key={id} className={s.notification} type={type} dismiss={dismiss} noMargin>
+          {message}
+        </Message>
+      ))}
+    </div>
+  )
+}

client/admin/components/object_table.module.scss

@@ -0,0 +1,15 @@
+@use '../styles/variables' as v;
+
+.row {
+  &:not(:last-child) {
+    border-bottom: 1px solid v.$color-light-grey;
+  }
+}
+
+.cell {
+  padding: 4px 0;
+
+  &.key {
+    padding-right: 8px;
+  }
+}

client/admin/components/object_table.tsx

@@ -0,0 +1,21 @@
+import cn from 'classnames'
+import { h, type FunctionComponent } from 'preact'
+import styles from './object_table.module.scss'
+
+const ObjectTable: FunctionComponent<{ styles?: Record<string, string>; object: Record<string, any> }> = ({
+  styles: s = styles,
+  object,
+}) => (
+  <table className={s.base}>
+    <tbody>
+      {Object.entries(object).map(([key, value]) => (
+        <tr key={key} className={s.row}>
+          <td className={cn(s.cell, s.key)}>{key}</td>
+          <td className={cn(s.cell, s.value)}>{value}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)
+
+export default ObjectTable

client/admin/components/page_header.module.scss

@@ -0,0 +1,10 @@
+.base {
+  width: 100%;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.heading {
+  font-size: 24px;
+}

client/admin/components/page_header.tsx

@@ -0,0 +1,12 @@
+import { h, type FunctionComponent } from 'preact'
+import cn from 'classnames'
+
+import s from './page_header.module.scss'
+
+const PageHeader: FunctionComponent<{ className?: string }> = ({ children, className }) => (
+  <div className={cn(s.base, className)}>
+    <h1 className={s.heading}>{children}</h1>
+  </div>
+)
+
+export default PageHeader

client/admin/components/pagination.module.scss

@@ -0,0 +1,63 @@
+@use '../styles/variables' as v;
+@use '../../shared/styles/breakpoints';
+@use '../../shared/styles/utils';
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.results {
+  padding: 3px 9px 0 0;
+
+  > .number {
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+}
+
+.pages {
+  display: flex;
+
+  > li {
+    display: block;
+  }
+}
+
+.page,
+.prev,
+.next {
+  > a {
+    display: block;
+    padding: 6px 12px;
+    margin-left: -1px;
+    line-height: 1.42857143;
+    color: #666;
+    text-decoration: none;
+    background-color: #fafafa;
+    border: 1px solid #ddd;
+
+    &[href='javascript:;'] {
+      cursor: not-allowed;
+    }
+  }
+
+  &.currentPage {
+    > a {
+      color: white;
+      background: v.$color-blue;
+    }
+  }
+}
+
+.prev a {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.next a {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}

client/admin/components/pagination.tsx

@@ -0,0 +1,103 @@
+import { h, Fragment, type FunctionComponent } from 'preact'
+import type { ForwardedRef } from 'preact/compat'
+import cn from 'classnames'
+
+import s from './pagination.module.scss'
+
+function getPages({
+  pathname,
+  search,
+  totalCount,
+  limit,
+  offset,
+}: {
+  pathname: string
+  search: string
+  totalCount: number
+  limit: number
+  offset: number
+}) {
+  const pages = []
+  const searchParams = new URLSearchParams(search)
+  const last = Math.floor(totalCount / limit)
+  const current = offset / limit
+
+  for (let i = 0; i <= last; i++) {
+    if (i === 0) searchParams.delete('offset')
+    else searchParams.set('offset', (limit * i) as unknown as string)
+
+    const query = searchParams.toString()
+
+    // TODO should all pages have a rel attribute?
+    pages.push({
+      path: pathname + (query ? '?' + query : ''),
+      index: i,
+      current: i === current,
+    })
+  }
+
+  return {
+    current,
+    firstItemCount: totalCount ? offset + 1 : 0,
+    last,
+    lastItemCount: Math.min(offset + limit, totalCount),
+    next: pages[current + 1],
+    pages,
+    prev: pages[current - 1],
+    totalCount,
+  }
+}
+
+type PaginationProps = {
+  className?: string
+  forwardRef: ForwardedRef<HTMLDivElement>
+  pathname: string
+  search: string
+  totalCount: number
+  limit: number
+  offset: number
+}
+
+const Pagination: FunctionComponent<PaginationProps> = (props) => {
+  const { current, last, firstItemCount, lastItemCount, totalCount, pages, prev, next } = getPages(props)
+
+  const start = current + 3 > last ? Math.max(last - 6, 0) : Math.max(current - 3, 0)
+  const end = start + 7
+
+  return (
+    <div className={cn(s.pagination, props.className)} ref={props.forwardRef}>
+      <div className={s.results}>
+        Showing <span className={cn(s.first, s.number)}>{firstItemCount}</span> to{' '}
+        <span className={cn(s.last, s.number)}>{lastItemCount || 0}</span> of{' '}
+        <span className={cn(s.total, s.number)}>{totalCount || 0}</span> entries
+      </div>
+      <ul className={s.pages}>
+        {totalCount > 0 && (
+          <Fragment>
+            <li className={s.prev}>
+              <a href={prev?.path || 'javascript:;'} rel={prev && 'prev'} className={s.nav} title='Previous Page'>
+                Previous
+              </a>
+            </li>
+
+            {pages.slice(start, end).map((page) => (
+              <li key={page.index} className={cn(s.page, page.current && s.currentPage)}>
+                <a href={page.path} className={s.nav} title={`Sida ${page.index + 1}`}>
+                  {page.index + 1}
+                </a>
+              </li>
+            ))}
+
+            <li className={s.next}>
+              <a href={next?.path || 'javascript:;'} rel={next && 'next'} className={s.nav} title='Next Page'>
+                Next
+              </a>
+            </li>
+          </Fragment>
+        )}
+      </ul>
+    </div>
+  )
+}
+
+export default Pagination

client/admin/components/process.tsx

@@ -0,0 +1,42 @@
+import { h, type FunctionComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import _ from 'lodash'
+import rek from 'rek'
+import ObjectTable from './object_table.tsx'
+import { Table, Td } from './table.tsx'
+
+const Process: FunctionComponent<{ os?: ANY }> = ({ os }) => {
+  const [process, setProcess] = useState<{
+    os: Record<string, string | string[]>
+    process: Record<string, Record<string, string> | string[]>
+  } | null>(null)
+
+  useEffect(() => {
+    rek('/api/process').then(setProcess)
+  }, [])
+
+  return (
+    process && (
+      <Table>
+        <tbody>
+          {Object.entries(process[os ? 'os' : 'process']).map(([key, value]) => (
+            <tr key={key}>
+              <Td>{key}</Td>
+              <Td>
+                {Array.isArray(value) ? (
+                  value.join(', ')
+                ) : _.isPlainObject(value) ? (
+                  <ObjectTable object={value} />
+                ) : (
+                  value
+                )}
+              </Td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    )
+  )
+}
+
+export default Process

client/admin/components/register_form.tsx

@@ -0,0 +1,61 @@
+import { h, type TargetedSubmitEvent } from 'preact'
+import { useCallback } from 'preact/hooks'
+import rek, { type FetchError } from 'rek'
+
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import Button from './button.tsx'
+import Input from './input.tsx'
+import Message from './message.tsx'
+
+const RegisterForm = () => {
+  const [{ error, pending, success }, actions] = useRequestState<FetchError>()
+
+  const params = location.search ? new URLSearchParams(location.search) : null
+
+  const register = useCallback(async (e: TargetedSubmitEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    actions.pending()
+
+    const form = e.currentTarget
+
+    try {
+      await rek.post('/auth/register', {
+        email: form.email.value,
+        password: form.password.value,
+        ...(params
+          ? {
+              inviteEmail: params.get('email'),
+              inviteToken: params.get('token'),
+            }
+          : {}),
+      })
+
+      actions.success()
+    } catch (err) {
+      actions.error(err as FetchError)
+    }
+  }, [])
+
+  return success ? (
+    <Message type='success' noMargin>
+      Success! Go to <a href='/admin/login'>login</a>.
+    </Message>
+  ) : (
+    <form onSubmit={register}>
+      {error && (
+        <Message type='error'>
+          {error.status}: {error.body?.message || error.message}
+        </Message>
+      )}
+
+      <Input name='email' label='Email' type='email' defaultValue={params?.get('email')} required />
+      <Input name='password' label='Password' type='password' required />
+      <Input name='confirmPassword' label='Confirm Password' type='password' sameAs='password' required />
+
+      <Button disabled={pending}>Register</Button>
+    </form>
+  )
+}
+
+export default RegisterForm

client/admin/components/register_page.tsx

@@ -0,0 +1,18 @@
+import { h } from 'preact'
+import PageHeader from './page_header.tsx'
+import RegisterForm from './register_form.tsx'
+import Section from './section.tsx'
+
+const RegisterPage = () => (
+  <section>
+    <PageHeader>Register</PageHeader>
+
+    <Section maxWidth='400px'>
+      <Section.Body>
+        <RegisterForm />
+      </Section.Body>
+    </Section>
+  </section>
+)
+
+export default RegisterPage

client/admin/components/role_form.tsx

@@ -0,0 +1,68 @@
+import { h, type FunctionComponent, type TargetedSubmitEvent } from 'preact'
+import { useCallback } from 'preact/hooks'
+import rek, { type FetchError } from 'rek'
+
+import useRequestState from '../../shared/hooks/use_request_state.ts'
+import serializeForm from '../../shared/utils/serialize_form.ts'
+import Button from './button.tsx'
+import Input from './input.tsx'
+import Message from './message.tsx'
+import sutil from './utility.module.scss'
+
+const RoleForm: FunctionComponent<{ role?: ANY; onCancel?: ANY; onCreate?: ANY; onUpdate?: ANY }> = ({
+  role,
+  onCancel,
+  onCreate,
+  onUpdate,
+}) => {
+  const [{ error, pending, success }, actions] = useRequestState<FetchError>()
+
+  const create = useCallback(async (e: TargetedSubmitEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    actions.pending()
+
+    try {
+      const form = e.currentTarget
+
+      const result = await rek[role ? 'patch' : 'post'](`/api/roles${role ? '/' + role.id : ''}`, serializeForm(form))
+
+      actions.success()
+
+      if (role) {
+        onUpdate?.(result)
+      } else {
+        form.reset()
+        onCreate?.(result)
+      }
+    } catch (err) {
+      actions.error(err as FetchError)
+    }
+  }, [])
+
+  return (
+    <form onSubmit={create}>
+      {success && <Message type='success'>Role {role ? 'updated' : 'created'}!</Message>}
+      {error && (
+        <Message type='error'>
+          {error.status || 500} {error.body?.message || error.message}
+        </Message>
+      )}
+
+      <Input name='name' label='Name' type='text' defaultValue={role?.name} required />
+
+      <div className={sutil.row}>
+        <Button disabled={pending} type='submit'>
+          {role ? 'Update' : 'Create'}
+        </Button>
+        {onCancel && (
+          <Button disabled={pending} onClick={onCancel} type='button'>
+            Cancel
+          </Button>
+        )}
+      </div>
+    </form>
+  )
+}
+
+export default RoleForm

client/admin/components/roles_page.tsx

@@ -0,0 +1,88 @@
+import { h } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { route } from 'preact-router'
+import rek, { type FetchError } from 'rek'
+import type { Selectable } from 'kysely'
+
+import { useNotifications } from '../contexts/notifications.tsx'
+import useItemsReducer from '../hooks/use_items_reducer.ts'
+import RoleForm from './role_form.tsx'
+import Modal from './modal.tsx'
+import RolesTable from './roles_table.tsx'
+import PageHeader from './page_header.tsx'
+import Section from './section.tsx'
+
+import type { Role } from '../../../shared/types.db.ts'
+
+const RolesPage = () => {
+  const { notify } = useNotifications()
+  const [roles, actions] = useItemsReducer<Selectable<Role>>()
+  const [edit, setEdit] = useState<Selectable<Role> | null | undefined>(null)
+
+  useEffect(() => {
+    rek('/api/roles' + location.search).then(actions.reset)
+  }, [location.search])
+
+  const onDelete = useCallback(async (id: number) => {
+    if (confirm(`Delete role ${id}?`)) {
+      try {
+        await rek.delete(`/api/roles/${id}`)
+
+        actions.del(id)
+
+        notify.success(`Role ${id} deleted`)
+      } catch (err) {
+        notify.error((err as FetchError).body?.message || (err as FetchError).toString())
+      }
+    }
+  }, [])
+
+  const onEdit = useCallback(
+    async (id: number) => {
+      setEdit(id ? roles.find((role) => role.id === id) : null)
+    },
+    [roles],
+  )
+
+  const onSortBy = useCallback((column: string | null) => {
+    const searchParams = new URLSearchParams(location.search)
+
+    const newSort = (searchParams.get('sort') || 'id') === column ? '-' + column : column
+
+    route(location.pathname + (newSort !== 'id' ? `?sort=${newSort}` : ''))
+  }, [])
+
+  return (
+    <section>
+      <PageHeader>Roles</PageHeader>
+
+      <Section maxWidth='50%'>
+        <Section.Heading>Create New Role</Section.Heading>
+
+        <Section.Body>
+          <RoleForm onCreate={actions.add} />
+        </Section.Body>
+      </Section>
+
+      <Section>
+        <Section.Heading>List</Section.Heading>
+
+        <Section.Body noPadding>
+          <RolesTable roles={roles} onDelete={onDelete} onEdit={onEdit} onSortBy={onSortBy} />
+        </Section.Body>
+      </Section>
+
+      {edit != null && (
+        <Modal onClose={() => setEdit(null)}>
+          <RoleForm
+            onCancel={() => setEdit(null)}
+            onUpdate={(role: ANY) => actions.update(role.id, role)}
+            role={edit}
+          />
+        </Modal>
+      )}
+    </section>
+  )
+}
+
+export default RolesPage

client/admin/components/roles_table.tsx

@@ -0,0 +1,48 @@
+import { h, type FunctionComponent } from 'preact'
+import Button from './button.tsx'
+import { Table, Td, Th } from './table.tsx'
+
+const RolesTable: FunctionComponent<{ roles?: ANY[]; onDelete?: ANY; onEdit?: ANY; onSortBy?: ANY }> = ({
+  roles,
+  onDelete,
+  onEdit,
+  onSortBy,
+}) => (
+  <Table onSortBy={onSortBy}>
+    <thead>
+      <tr>
+        <Th sort='id'>ID</Th>
+        <Th sort>Name</Th>
+        <Th sort>Created At</Th>
+        <th>Created By</th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      {roles?.length ? (
+        roles.map((role) => (
+          <tr key={role.id}>
+            <td>{role.id}</td>
+            <td>{role.name}</td>
+            <td>{role.createdAt}</td>
+            <td>{role.createdBy?.email}</td>
+            <Td buttons>
+              <Button size='small' icon='edit' onClick={() => onEdit(role.id)}>
+                Edit
+              </Button>{' '}
+              <Button size='small' icon='delete' color='red' onClick={() => onDelete(role.id)}>
+                Delete
+              </Button>
+            </Td>
+          </tr>
+        ))
+      ) : (
+        <tr>
+          <td colSpan={5}>No roles found</td>
+        </tr>
+      )}
+    </tbody>
+  </Table>
+)
+
+export default RolesTable

client/admin/components/route.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import { h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { route } from 'preact-router'
+import { useCurrentUser } from '../contexts/current_user.ts'
+
+/** @type {import('preact').FunctionComponent<{ auth: boolean, path: string, component: () => any, loadComponent: boolean}} Page */
+const Route = ({ auth, path, component, loadComponent = true }) => {
+  const [Component, setComponent] = useState(null)
+  const { user } = useCurrentUser()
+
+  useEffect(async () => {
+    if (auth ? !user : user) return route(user ? '/admin' : '/admin/login', true)
+
+    const loadedComponent = loadComponent ? (await component()).default : component
+
+    // Wrapping in arrow function is required since loadedComponent is a function
+    // and setComponent will call functions passed to it
+    setComponent(() => loadedComponent)
+  }, [user])
+
+  return Component && <Component path={path} />
+}
+
+export default Route

client/admin/components/row.module.scss

@@ -0,0 +1,9 @@
+@use '../../shared/styles/flex';
+
+.row {
+  display: flex;
+
+  > * {
+    @include flex.simple-cell($gutter: 12px);
+  }
+}

client/admin/components/row.tsx

@@ -0,0 +1,14 @@
+import { h, type FunctionComponent, type JSX } from 'preact'
+import s from './row.module.scss'
+
+const Row: FunctionComponent<{ tag?: keyof JSX.IntrinsicElements }> = ({ children, tag: Tag = 'div' }) => (
+  <Tag className={s.row}>{children}</Tag>
+)
+
+export default Row
+
+export const Cell: FunctionComponent<{ grow?: string; tag?: keyof JSX.IntrinsicElements }> = ({
+  children,
+  grow,
+  tag: Tag = 'div',
+}) => <Tag style={{ flexGrow: grow }}>{children}</Tag>

client/admin/components/section.module.scss

@@ -0,0 +1,26 @@
+@use '../styles/variables' as v;
+
+.base {
+  border-top: 3px solid v.$color-blue;
+  background: white;
+  margin-bottom: v.$gutter;
+}
+
+.heading {
+  padding: 12px;
+  font-size: 18px;
+  color: #444;
+}
+
+.body {
+  padding: 12px;
+
+  &.noPadding {
+    padding: 0;
+  }
+}
+
+.footer {
+  border-top: 1px solid v.$color-light-grey;
+  padding: 12px;
+}

client/admin/components/section.tsx

@@ -0,0 +1,36 @@
+import { h, type FunctionComponent } from 'preact'
+import cn from 'classnames'
+
+import s from './section.module.scss'
+
+const Section: FunctionComponent<{ className?: string; maxWidth?: string; minWidth?: string }> & {
+  Body: typeof SectionBody
+  Footer: typeof SectionFooter
+  Heading: typeof SectionHeading
+} = ({ children, className, maxWidth, minWidth }) => (
+  <section className={cn(s.base, className)} style={{ maxWidth, minWidth }}>
+    {children}
+  </section>
+)
+
+const SectionBody: FunctionComponent<{ className?: string; noPadding?: boolean }> = ({
+  children,
+  className,
+  noPadding,
+}) => <div className={cn(s.body, noPadding && s.noPadding, className)}>{children}</div>
+
+Section.Body = SectionBody
+
+const SectionHeading: FunctionComponent<{ className?: string }> = ({ children, className }) => (
+  <h1 className={cn(s.heading, className)}>{children}</h1>
+)
+
+Section.Heading = SectionHeading
+
+const SectionFooter: FunctionComponent<{ className?: string }> = ({ children, className }) => (
+  <div className={cn(s.footer, className)}>{children}</div>
+)
+
+Section.Footer = SectionFooter
+
+export default Section

client/admin/components/select.tsx

@@ -0,0 +1,4 @@
+import selectFactory from '../../shared/components/select_factory.tsx'
+import styles from './input.module.scss'
+
+export default selectFactory({ styles })

client/admin/components/start_page.tsx

@@ -0,0 +1,36 @@
+import { h } from 'preact'
+import PageHeader from './page_header.tsx'
+import Row from './row.tsx'
+import Process from './process.tsx'
+import Section from './section.tsx'
+
+/** @type {import('preact').FunctionComponent} StartPage */
+const StartPage = () => (
+  <section>
+    <PageHeader>Start Page</PageHeader>
+
+    <Section>
+      <Section.Body>
+        <p>Welcome. You are in good company.</p>
+      </Section.Body>
+    </Section>
+
+    <Row>
+      <Section>
+        <Section.Heading>Process</Section.Heading>
+        <Section.Body>
+          <Process />
+        </Section.Body>
+      </Section>
+
+      <Section>
+        <Section.Heading>Os</Section.Heading>
+        <Section.Body>
+          <Process os />
+        </Section.Body>
+      </Section>
+    </Row>
+  </section>
+)
+
+export default StartPage