create-mithaq 0.0.0-stage → 0.1.1

package/template/templates/asas/src/ui-dashboard/versions.tsx

@@ -0,0 +1,432 @@
+// The versions are read in the browser, as the viewer, from the kayan's own
+// `findVersions`, which answers only the versions of rows the viewer reads, each
+// cut to the columns it reads. The page draws this only for an actor holding that
+// key, and the restore only for one holding `restoreVersion`; the server refuses
+// either to anyone else whatever the page drew.
+import { useContext, useEffect, useMemo, useState } from 'react'
+import { same, type ClientField, type ComponentProps, type Row } from 'mithaq/admin'
+import { FormContext, useAccess, useClient, useKayan, useLocale, useRecord, useScreen } from 'mithaq/admin/react'
+import { empty } from '../audit-log/sink.ts'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { blocksOf, cellFor, richTextPlainText } from '@/components/mithaq/cells.tsx'
+import { formatDate, labelFor, refusalKeyOf, titleOf, type FindApi, type FoundPage } from '@/components/mithaq/controls.tsx'
+import { endonym } from '@/components/mithaq/nav.tsx'
+import { CloseButton } from '@/components/mithaq/nodes.tsx'
+import { useRelationshipTitles } from '@/components/mithaq/relationship-cell.tsx'
+
+/** One version as `findVersions` answers it. */
+export type Version = {
+  id: string
+  latest: boolean
+  autosave: boolean
+  updatedAt: string | Date
+  version: Row
+}
+
+/** How many versions one read asks for, and how many more each "Show older" adds. */
+const page = 10
+
+/** The four status labels, each under its `version` key with the English it falls back to. */
+const labels = {
+  currentDraft: 'Current draft',
+  draft: 'Draft',
+  currentlyPublished: 'Currently published',
+  previouslyPublished: 'Previously published',
+} as const
+
+/**
+ * Which of the four labels a version wears, over the row's versions newest first.
+ * A draft is the current draft when it is the latest version, since then no
+ * published version is newer than it. A published version is the currently
+ * published one when it is the newest published version: the row always holds the
+ * last published copy and nothing unpublishes it. The newest page is always read
+ * first, so that version is on it whenever any published version is.
+ */
+const labelOf = (version: Version, versions: readonly Version[]): keyof typeof labels | undefined =>
+  // A reader without the `_status` column gets it cut from every version, and
+  // a status nobody can read is no status to draw.
+  !('_status' in version.version)
+    ? undefined
+    : version.version._status === 'draft'
+      ? version.latest ? 'currentDraft' : 'draft'
+      : version.id === versions.find((one) => one.version._status !== 'draft')?.id ? 'currentlyPublished' : 'previouslyPublished'
+
+/** The columns every kayan of this project carries and no person edits, and the status the pill already says. */
+const technical = new Set(['id', 'organization', 'createdAt', 'updatedAt', '_status'])
+
+/**
+ * The words of each block of `side`, and whether `other` holds no block of the
+ * same value, as a block is the unit a person reads a rich text change by. A block
+ * is held by its whole value, so one whose format or link changed is marked though
+ * its words did not.
+ */
+const changedBlocks = ({ side, other }: { side: unknown; other: unknown }) => {
+  const left = new Map<string, number>()
+  for (const block of blocksOf(other)) {
+    const key = JSON.stringify(block)
+    left.set(key, (left.get(key) ?? 0) + 1)
+  }
+  return blocksOf(side).flatMap((block) => {
+    const key = JSON.stringify(block)
+    const held = left.get(key) ?? 0
+    if (held) left.set(key, held - 1)
+    const text = richTextPlainText(block).trim()
+    return text ? [{ text, changed: held === 0 }] : []
+  })
+}
+
+const entriesOf = (value: unknown) => (value && typeof value === 'object' && !Array.isArray(value) ? Object.keys(value) : [])
+
+/**
+ * The panel an edit page names as a component node. It reads the row the page
+ * draws and its kayan off the screen, so one file serves every kayan that keeps
+ * drafts.
+ */
+export function Versions(_: ComponentProps) {
+  const { t, locale } = useLocale()
+  const kayan = useKayan()
+  const record = useRecord()
+  const client = useClient()
+  const id = record?.id === undefined ? undefined : String(record.id)
+  // How many saves have landed on the form this panel sits in, an autosave
+  // included. A draft save never moves the row's own `updatedAt`, so this is what
+  // tells a panel that stayed mounted through one that its list is stale.
+  const saves = useContext(FormContext)?.saves ?? 0
+  // The row as this page last drew it: a save moves its `updatedAt` or bumps
+  // `saves`, and the panel reads its versions again.
+  const seen = `${id}@${String(record?.updatedAt ?? '')}@${saves}`
+  const [limit, setLimit] = useState(page)
+  const [read, setRead] = useState<{ seen: string; docs: Version[]; more: boolean } | { seen: string; failed: true }>()
+  const [opened, setOpened] = useState<Version>()
+
+  // The client is left out of the dependencies: the host makes a new one on every
+  // render, so following it would read the same page again on every render.
+  useEffect(() => {
+    if (!id) return
+    let live = true
+    ;(client({ kayan: kayan.name, operation: 'findVersions', input: { where: { parent: { equals: id } }, sort: '-updatedAt', limit } }) as Promise<{ docs: Version[]; hasNextPage: boolean }>).then(
+      (found) => live && setRead({ seen, docs: found.docs, more: found.hasNextPage }),
+      () => live && setRead({ seen, failed: true }),
+    )
+    return () => {
+      live = false
+    }
+  }, [kayan.name, seen, limit])
+
+  const shown = read?.seen === seen ? read : undefined
+  const when = (at: string | Date) => formatDate({ value: at, locale }) ?? String(at)
+  return (
+    <div data-panel="versions" className="grid gap-4">
+      {shown === undefined ? (
+        <p className="text-muted-foreground text-sm">{t('version.loading', 'Loading versions…')}</p>
+      ) : 'failed' in shown ? (
+        <p role="alert" className="text-destructive text-sm">{t('version.failed', 'The versions could not be read.')}</p>
+      ) : !shown.docs.length ? (
+        <p className="text-muted-foreground text-sm">{t('version.none', 'No versions yet.')}</p>
+      ) : (
+        <>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('version.updatedAt', 'Updated at')}</TableHead>
+                <TableHead>{t('version.status', 'Status')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {shown.docs.map((version) => (
+                <TableRow key={version.id} data-version={version.id}>
+                  <TableCell>
+                    {/* Underlined and in the link colour at rest, since a phone has
+                        no hover to show that the date opens the comparison, and
+                        44 pixels tall. */}
+                    <button type="button" data-button="open-version" className="text-primary inline-flex min-h-11 cursor-pointer items-center underline underline-offset-4" onClick={() => setOpened(version)}>
+                      <time dateTime={new Date(version.updatedAt).toISOString()}>{when(version.updatedAt)}</time>
+                    </button>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {version.autosave ? <Badge variant="outline">{t('version.autosave', 'Autosave')}</Badge> : null}
+                      <Pill version={version} versions={shown.docs} />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+          {shown.more ? (
+            <Button type="button" variant="outline" size="sm" onClick={() => setLimit(limit + page)}>
+              {t('version.more', 'Show older')}
+            </Button>
+          ) : null}
+          {opened && id ? <Compare key={opened.id} version={opened} versions={shown.docs} parent={id} onClose={() => setOpened(undefined)} /> : null}
+        </>
+      )}
+    </div>
+  )
+}
+
+/** A version's status pill, the currently published one standing out. */
+function Pill({ version, versions }: { version: Version; versions: readonly Version[] }) {
+  const { t } = useLocale()
+  const label = labelOf(version, versions)
+  return label ? <Badge variant={label === 'currentlyPublished' ? 'default' : 'outline'}>{t(`version.${label}`, labels[label])}</Badge> : null
+}
+
+/**
+ * The sheet over the list: the version, and the one it is compared against, by
+ * default the newest one older than it, field by field, each value drawn by the
+ * field's own cell and a localized field one row per locale, modified fields only
+ * until the viewer asks for all. A column the viewer may not read is in neither
+ * snapshot, so it draws no row.
+ */
+function Compare({ version, versions, parent, onClose }: { version: Version; versions: readonly Version[]; parent: string; onClose: () => void }) {
+  const { t, locale, dir } = useLocale()
+  const kayan = useKayan()
+  const client = useClient()
+  const screen = useScreen()
+  const restores = useAccess().collections?.[kayan.name]?.operations?.restoreVersion === true
+  /** Whether the kayan's restore takes `expectedUpdatedAt`, as the form this panel sits in says. */
+  const takes = useContext(FormContext)?.expectedUpdatedAtOn?.includes('restoreVersion') === true
+  /** The version compared against, or `''` for the one before. */
+  const [against, setAgainst] = useState('')
+  const [modifiedOnly, setModifiedOnly] = useState(true)
+  /** The version before this one, read once: the list holds every other version a person may pick. */
+  const [prior, setPrior] = useState<{ version: Version | null } | { failed: true }>()
+  /** The restore waiting on its confirm, and whether it restores as a draft. */
+  const [confirming, setConfirming] = useState<{ draft: boolean }>()
+  const [restoring, setRestoring] = useState(false)
+  /** A restore the server refused, drawn in the sheet, which stays open. */
+  const [restoreFailed, setRestoreFailed] = useState<unknown>(undefined)
+
+  useEffect(() => {
+    let live = true
+    const older = { and: [{ parent: { equals: parent } }, { updatedAt: { less_than: new Date(version.updatedAt).toISOString() } }] }
+    ;(client({ kayan: kayan.name, operation: 'findVersions', input: { where: older, sort: '-updatedAt', limit: 1 } }) as Promise<{ docs: Version[] }>).then(
+      (found) => live && setPrior({ version: found.docs[0] ?? null }),
+      () => live && setPrior({ failed: true }),
+    )
+    return () => {
+      live = false
+    }
+  }, [version.id])
+
+  const previous = prior && 'version' in prior ? prior.version : null
+  const from = against ? versions.find((one) => one.id === against) ?? null : previous
+  const rows = kayan.fields
+    .filter((field) => field.kind !== 'join' && !technical.has(field.name) && (field.name in version.version || (!!from && field.name in from.version)))
+    .flatMap((field): { key: string; field: ClientField; before: unknown; after: unknown; code?: string }[] => {
+      const before = from?.version[field.name]
+      const after = version.version[field.name]
+      if (field.rules.localized !== true) return [{ key: field.name, field, before, after }]
+      // Each locale's value alone, drawn by the field's cell as a plain value.
+      const plain: ClientField = { ...field, rules: { ...field.rules, localized: false } }
+      const codes = [...new Set([...entriesOf(before), ...entriesOf(after)])]
+      return codes.map((code) => ({
+        key: `${field.name}.${code}`,
+        field: plain,
+        before: (before as Record<string, unknown> | undefined)?.[code],
+        after: (after as Record<string, unknown> | undefined)?.[code],
+        code,
+      }))
+    })
+    // Whether the two sides differ, once per row, which both the filter and the row's mark read.
+    .map((row) => ({ ...row, changed: !(same(row.before, row.after) || (empty(row.before) && empty(row.after))) }))
+    .filter((row) => !modifiedOnly || row.changed)
+
+  // Every kayan this screen crosses, so a relationship's value is named the way
+  // the list names it.
+  const kayans = useMemo(() => Object.values(screen.kayan), [screen])
+  const api = useMemo<FindApi>(
+    () => Object.fromEntries(kayans.map((one) => [one.name, { find: (input: Row) => client({ kayan: one.name, operation: 'find', input }) as Promise<FoundPage> }])),
+    [kayans],
+  )
+  const titles = useRelationshipTitles({ fields: kayan.fields, docs: [version.version, from?.version ?? {}], context: { api, client: kayans, locale } })
+  const copy = { t, locale }
+  // A rich text value whole, a block to a line, where its list cell draws the
+  // first block alone: a change further down would read as no change. A block the
+  // other side does not hold is marked, as removed (`del`) on the side compared
+  // against and as added (`ins`) on the side viewed: struck through and underlined
+  // as well as tinted, so the mark does not rest on colour alone.
+  const drawn = (field: ClientField, value: unknown, other: unknown, mark: 'del' | 'ins') => {
+    if (empty(value)) return '—'
+    if (field.kind !== 'richText') return cellFor(field)({ kayan, field, value, t, locale, titles })
+    const blocks = changedBlocks({ side: value, other })
+    // A value of images or empty blocks alone has no words, and reads as empty.
+    if (!blocks.length) return '—'
+    return blocks.map(({ text, changed }, at) => {
+      const Mark = mark
+      return <p key={at} dir="auto" className="whitespace-pre-line">{changed ? <Mark data-block-changed="" className={mark === 'del' ? 'bg-destructive/15 line-through' : 'bg-primary/15 underline'}>{text}</Mark> : text}</p>
+    })
+  }
+  const when = (at: string | Date) => formatDate({ value: at, locale }) ?? String(at)
+  const named = (one: Version) => {
+    const label = labelOf(one, versions)
+    return label ? `${when(one.updatedAt)} · ${t(`version.${label}`, labels[label])}` : when(one.updatedAt)
+  }
+  const options = [
+    // With its date, so the select says which version it compares against.
+    { value: '', label: previous ? `${t('version.previousVersion', 'Previous version')} · ${when(previous.updatedAt)}` : (t('version.previousVersion', 'Previous version') ?? '') },
+    // The version before is offered once, as "Previous version".
+    ...versions.filter((one) => one.id !== version.id && one.id !== previous?.id).map((one) => ({ value: one.id, label: named(one) })),
+  ]
+
+  /**
+   * Puts the version back, onto the row or as a new draft, and draws the page
+   * again from the server, so the form reads what the restore wrote. A refused or
+   * failed restore keeps the sheet open and draws its own sentence and the
+   * server's (`refusalKeyOf`, which the form's own banner reads the same way).
+   */
+  const restore = async (draft: boolean) => {
+    setRestoring(true)
+    setRestoreFailed(undefined)
+    try {
+      // The instant of the latest version this panel read, where the kayan's
+      // restore takes it, so a restore over a newer draft another person saved
+      // since is refused 409 rather than burying it.
+      const read = takes ? versions.find((one) => one.latest)?.version.updatedAt : undefined
+      await client({ kayan: kayan.name, operation: 'restoreVersion', input: { id: version.id, ...(read !== undefined && { expectedUpdatedAt: read }) }, draft })
+      window.location.reload()
+    } catch (thrown) {
+      setRestoring(false)
+      setConfirming(undefined)
+      setRestoreFailed(thrown)
+    }
+  }
+  const restoreFailedKey = restoreFailed === undefined ? undefined : refusalKeyOf(restoreFailed)
+
+  return (
+    <Sheet open onOpenChange={(open) => !open && onClose()}>
+      {/* The primitive's `data-[side=*]:w-3/4` is outranked by naming the same
+          side, so the sheet is the phone's whole width. */}
+      <SheetContent showCloseButton={false} side={dir === 'rtl' ? 'left' : 'right'} className="w-full overflow-y-auto data-[side=left]:w-full data-[side=right]:w-full data-[side=left]:sm:max-w-2xl data-[side=right]:sm:max-w-2xl">
+        <SheetHeader>
+          <SheetTitle>{t('version.compareVersions', 'Compare versions')}</SheetTitle>
+        </SheetHeader>
+        <div className="grid gap-4 px-4">
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="grid gap-1.5">
+              <span className="text-muted-foreground text-xs">{t('version.comparingAgainst', 'Comparing against')}</span>
+              <Select value={against} disabled={prior === undefined} onValueChange={(value) => setAgainst(String(value ?? ''))}>
+                <SelectTrigger className="w-full max-sm:data-[size=default]:h-11"><SelectValue>{options.find((one) => one.value === against)?.label}</SelectValue></SelectTrigger>
+                <SelectContent>
+                  {options.map((one) => (
+                    <SelectItem key={one.value} value={one.value}>{one.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-1.5">
+              <span className="text-muted-foreground text-xs">{t('version.currentlyViewing', 'Currently viewing')}</span>
+              <div className="flex flex-wrap items-center gap-1 text-sm">
+                <time dateTime={new Date(version.updatedAt).toISOString()}>{when(version.updatedAt)}</time>
+                {version.autosave ? <Badge variant="outline">{t('version.autosave', 'Autosave')}</Badge> : null}
+                <Pill version={version} versions={versions} />
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox id={`${version.id}-modified-only`} data-modified-only checked={modifiedOnly} onCheckedChange={(checked) => setModifiedOnly(checked === true)} />
+            <Label htmlFor={`${version.id}-modified-only`}>{t('version.modifiedOnly', 'Modified only')}</Label>
+          </div>
+          {prior === undefined ? (
+            <p className="text-muted-foreground text-sm">{t('version.loading', 'Loading versions…')}</p>
+          ) : 'failed' in prior && !against ? (
+            <p role="alert" className="text-destructive text-sm">{t('version.failed', 'The versions could not be read.')}</p>
+          ) : !rows.length ? (
+            <p className="text-muted-foreground text-sm">{t('auditLog.none', 'No field you may read changed.')}</p>
+          ) : (
+            <ul className="grid gap-3 text-sm">
+              {/* Which side is which, over the two columns, since on a phone
+                  the two labels above stack in one. */}
+              <li aria-hidden="true" className="text-muted-foreground grid grid-cols-2 gap-2 text-xs">
+                <span>{t('version.comparingAgainst', 'Comparing against')}</span>
+                <span>{t('version.currentlyViewing', 'Currently viewing')}</span>
+              </li>
+              {rows.map((row) => {
+                // What the "Modified only" filter keeps, so with every field shown
+                // the rows that differ say so in words and in a rule at their start.
+                const { changed } = row
+                return (
+                  <li key={row.key} data-diff={row.key} data-changed={changed ? '' : undefined} className={changed ? 'border-primary grid gap-1 border-s-2 ps-2' : 'grid gap-1'}>
+                    <span className="flex items-center gap-1.5 font-medium">
+                      {labelFor({ kayan, field: row.field, copy })}
+                      {row.code ? <Badge variant="outline">{endonym(row.code)}</Badge> : null}
+                      {changed && !modifiedOnly ? <Badge data-badge="changed">{t('version.fieldChanged', 'Changed')}</Badge> : null}
+                    </span>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div data-before className="bg-muted/50 min-w-0 rounded-md px-2 py-1 break-words">{drawn(row.field, row.before, row.after, 'del')}</div>
+                      <div data-after className="bg-muted min-w-0 rounded-md px-2 py-1 break-words">{drawn(row.field, row.after, row.before, 'ins')}</div>
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+          {restoreFailed !== undefined ? (
+            <>
+              <p role="alert" className="rounded-md border border-destructive/50 px-3 py-2 text-sm text-destructive">
+                {t('version.problemRestoringVersion', 'There was a problem restoring this version')}
+              </p>
+              {restoreFailedKey ? (
+                <p role="alert" className="rounded-md border border-destructive/50 px-3 py-2 text-sm text-destructive">
+                  {t(restoreFailedKey, restoreFailedKey)}
+                </p>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+        {restores && labelOf(version, versions) !== 'currentlyPublished' ? (
+          // Not offered for the version the row already holds, where a restore would add a version and an
+          // activity line and change nothing. Sticky at the popup's foot, so Restore stays in reach however long the diff is.
+          <SheetFooter className="bg-inherit sticky bottom-0 flex-row flex-wrap justify-end border-t">
+            {'_status' in version.version && version.version._status !== 'draft' ? (
+              <Button type="button" variant="outline" className="max-sm:h-11" data-button="restore-as-draft" disabled={restoring} onClick={() => setConfirming({ draft: true })}>
+                {t('version.restoreAsDraft', 'Restore as draft')}
+              </Button>
+            ) : null}
+            <Button type="button" className="max-sm:h-11" data-button="restore" disabled={restoring} onClick={() => setConfirming({ draft: false })}>
+              {t('version.restoreThisVersion', 'Restore this version')}
+            </Button>
+          </SheetFooter>
+        ) : null}
+        <AlertDialog open={!!confirming} onOpenChange={(open) => !open && setConfirming(undefined)}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t('version.confirmVersionRestoration', 'Confirm version restoration')}</AlertDialogTitle>
+              <AlertDialogDescription>
+                {(t('version.aboutToRestore', 'You are about to restore this {label} to the state it was in on {versionDate}.') ?? '')
+                  .replace('{label}', titleOf({ kayan, copy }))
+                  .replace('{versionDate}', when(version.updatedAt))}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter className="max-sm:[&_button]:h-11">
+              <AlertDialogCancel>{t('admin.cancel', 'Cancel')}</AlertDialogCancel>
+              <AlertDialogAction data-button="confirm-restore" disabled={restoring} onClick={() => confirming && void restore(confirming.draft)}>
+                {confirming?.draft ? t('version.restoreAsDraft', 'Restore as draft') : t('version.restore', 'Restore')}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+        {/* The registry's close, named in the page's language, in place of the
+            primitive's English one. */}
+        <CloseButton Close={SheetClose} label={t('admin.close', 'Close') ?? 'Close'} />
+      </SheetContent>
+    </Sheet>
+  )
+}

package/template/templates/asas/src/ui-platform/home.tsx

@@ -0,0 +1,63 @@
+// What `/platform` itself draws: where staff start, inside the platform's
+// shell, with the figure card the dashboard and the portal homes draw for each
+// list the nav offers the viewer, with how many rows of it they may read across
+// every organization and a link to it. A list whose count the viewer may not
+// read, or whose count failed, shows a dash.
+import { ArrowRight } from 'lucide-react'
+import type { LoaderTools, PageProps } from 'mithaq/admin'
+import { useLocale, useScreen } from 'mithaq/admin/react'
+import { PlatformShell, iconOf } from '../ui/app-shell.tsx'
+import { KpiCard } from '../ui/kpi-card.tsx'
+import { navLabel } from '../ui/screen-nav.tsx'
+
+/** How many rows of each kayan the viewer may count, read as the viewer, keyed by its kayan. */
+export const loader = async ({ client, access }: LoaderTools): Promise<Record<string, number | undefined>> =>
+  Object.fromEntries(
+    await Promise.all(
+      Object.entries(access.collections ?? {})
+        .filter(([, one]) => one?.operations?.count === true)
+        .map(async ([kayan]) => [kayan, await (client({ kayan, operation: 'count', input: {} }) as Promise<{ totalDocs: number }>).then((found) => found.totalDocs).catch(() => undefined)] as const),
+    ),
+  )
+
+export function Home({ loaderData: counts }: PageProps<Record<string, number | undefined>>) {
+  const { locale, t } = useLocale()
+  const screen = useScreen()
+  return (
+    <PlatformShell
+      regions={{
+        header: <h1>{t('platform.title', 'Platform')}</h1>,
+        main: (
+          <section data-dashboard="platform" className="@container grid gap-4">
+            <p className="text-muted-foreground">{t('platform.about', 'Every organization and every person on the platform, for its staff.')}</p>
+            {/* Cards as tall as their content, the figure and the link: the card's own padding and gap
+                are the roomy ones of the platform's style, which a count and one link do not need. */}
+            <div className="grid grid-cols-2 items-start gap-4 @2xl:grid-cols-3 @5xl:grid-cols-4 [&_[data-slot=card]]:[--card-spacing:--spacing(4)]">
+              {screen.nav.flatMap((entry) => {
+                if (!entry.kayan) return []
+                const Icon = iconOf(entry.path)
+                const counted = counts?.[entry.kayan]
+                return [
+                  <KpiCard
+                    key={entry.kayan}
+                    kpi={entry.kayan}
+                    icon={<Icon className="size-4" />}
+                    title={navLabel({ entry, screen, locale, t })}
+                    value={counted === undefined ? '—' : new Intl.NumberFormat(locale).format(counted)}
+                    // Underlined, with an arrow that follows the reading direction, so it reads as a link.
+                    footer={
+                      <a href={`${screen.path}${entry.path}`} className="text-foreground inline-flex items-center gap-1 underline underline-offset-4 max-sm:min-h-11">
+                        {t('portal.open', 'Open the list')}
+                        <ArrowRight className="size-3.5 rtl:-scale-x-100" aria-hidden="true" />
+                      </a>
+                    }
+                  />,
+                ]
+              })}
+            </div>
+          </section>
+        ),
+      }}
+    />
+  )
+}

package/template/templates/asas/src/ui-platform/organization-actions.tsx

@@ -0,0 +1,114 @@
+// The list's cell for the `slug` column. Rename is drawn only where this actor holds
+// `organization.rename`, and members only where this actor reads them; the route refuses a rename
+// without the key. A rename that lands asks the list behind it to be read again through
+// `mithaq:refresh`, so the list keeps its scroll.
+import { useState, type FormEvent } from 'react'
+import { holds, type CellProps } from 'mithaq/admin'
+import { useAccess, useLocale, useScreen } from 'mithaq/admin/react'
+import { writeQuery } from '@/components/mithaq/list-query.ts'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const slugShape = /^[a-z0-9]+(-[a-z0-9]+)*$/
+
+export function OrganizationActions({ value, row }: CellProps) {
+  const { t } = useLocale()
+  const access = useAccess()
+  const screen = useScreen()
+  const renames = holds(access, 'organization.rename')
+  const members = holds(access, 'member.find') && screen.kayan.member?.pages.list !== undefined
+  const [open, setOpen] = useState(false)
+  const [refusal, setRefusal] = useState<string>()
+  const [done, setDone] = useState<string>()
+  /** Said here rather than by the browser's own bubble, which is in the browser's language. */
+  const [wrong, setWrong] = useState<{ name?: string; slug?: string }>({})
+  const id = String(row.id ?? '')
+  const save = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const box = (key: string) => (event.currentTarget.elements.namedItem(key) as HTMLInputElement | null)?.value ?? ''
+    const name = box('name')
+    const slug = box('slug')
+    const found = {
+      name: name.trim() ? undefined : t('organization.name.required', 'This field is required.'),
+      slug: !slug ? t('organization.slug.required', 'This field is required.') : slugShape.test(slug) ? undefined : t('platform.slugPattern', 'A slug is lowercase letters and digits joined by single dashes, such as admin-org.'),
+    }
+    setWrong(found)
+    if (found.name || found.slug) return
+    const response = await fetch('/api/platform/organizations/update', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id, name, slug }),
+    })
+    if (!response.ok) {
+      const key = ((await response.json().catch(() => null)) as { data?: { key?: string } } | null)?.data?.key
+      return setRefusal((key && t(key)) ?? t('platform.refused', 'The platform refused that action.'))
+    }
+    window.dispatchEvent(new Event('mithaq:refresh'))
+    // A function, so a name holding `$&` is put in as written.
+    setDone((t('platform.renamed', 'The organization is now named {name}.') ?? '').replace('{name}', () => name))
+  }
+  return (
+    <div data-organization={id} className="flex items-center gap-2 whitespace-nowrap">
+      {/* An identifier, read left to right in either locale. */}
+      <span dir="ltr">{String(value ?? '')}</span>
+      {renames ? (
+        <Button size="sm" variant="outline" className="max-sm:h-11" data-action="rename" onClick={() => setOpen(true)}>
+          {t('platform.rename', 'Rename')}
+        </Button>
+      ) : null}
+      {members ? (
+        <Button
+          size="sm"
+          variant="outline"
+          className="max-sm:h-11"
+          data-action="members"
+          nativeButton={false}
+          render={<a href={`${screen.path}${screen.kayan.member!.pages.list!.path}?${new URLSearchParams(writeQuery({ where: { or: [{ and: [{ organizationId: { equals: id } }] }] } }))}`} />}
+        >
+          {t('platform.members', 'Members')}
+        </Button>
+      ) : null}
+      {open ? (
+        <Dialog open onOpenChange={setOpen}>
+          {/* Cancel is the way out, so the primitive's own close, named in
+              English alone, is not drawn beside it. */}
+          <DialogContent showCloseButton={false}>
+            <DialogHeader>
+              <DialogTitle>{t('platform.rename', 'Rename')}</DialogTitle>
+              <DialogDescription aria-live="polite">{done ?? t('platform.renameAbout', 'The new name and slug take the place of the old ones for everyone in this organization.')}</DialogDescription>
+            </DialogHeader>
+            {done ? (
+              <DialogFooter>
+                <DialogClose render={<Button type="button" variant="outline" />}>{t('admin.close', 'Close')}</DialogClose>
+              </DialogFooter>
+            ) : (
+              <form noValidate onSubmit={(event) => void save(event)} className="grid gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor={`organization-name-${id}`}>{t('organization.name', 'Name')}</Label>
+                  <Input id={`organization-name-${id}`} name="name" required aria-required dir="auto" defaultValue={String(row.name ?? '')} aria-invalid={wrong.name ? true : undefined} aria-describedby={wrong.name ? `organization-name-${id}-error` : undefined} />
+                  {wrong.name ? <p id={`organization-name-${id}-error`} role="alert" className="text-sm text-destructive">{wrong.name}</p> : null}
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor={`organization-slug-${id}`}>{t('organization.slug', 'Slug')}</Label>
+                  <Input id={`organization-slug-${id}`} name="slug" required aria-required dir="ltr" pattern={slugShape.source.slice(1, -1)} defaultValue={String(value ?? '')} aria-invalid={wrong.slug ? true : undefined} aria-describedby={wrong.slug ? `organization-slug-${id}-error` : undefined} />
+                  {wrong.slug ? <p id={`organization-slug-${id}-error`} role="alert" className="text-sm text-destructive">{wrong.slug}</p> : null}
+                </div>
+                {refusal ? (
+                  <p role="alert" className="text-sm text-destructive">
+                    {refusal}
+                  </p>
+                ) : null}
+                <DialogFooter>
+                  <DialogClose render={<Button type="button" variant="outline" />}>{t('admin.cancel', 'Cancel')}</DialogClose>
+                  <Button type="submit">{t('admin.save', 'Save')}</Button>
+                </DialogFooter>
+              </form>
+            )}
+          </DialogContent>
+        </Dialog>
+      ) : null}
+    </div>
+  )
+}

package/template/templates/asas/src/ui-platform/record-page.tsx

@@ -0,0 +1,30 @@
+// The platform's record page: the shared one under a link back to the list the
+// record belongs to, so a person's page, an organization's and a role's are never
+// a dead end. The link is named as the nav names the list, which is already the
+// viewer's own word for it.
+import type { ReactNode } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import type { LayoutProps } from 'mithaq/admin'
+import { useKayan, useLocale, useScreen } from 'mithaq/admin/react'
+import { RecordPage } from '../ui/record-page.tsx'
+import { navLabel } from '../ui/screen-nav.tsx'
+
+export const regions = ['main', 'side', 'danger'] as const
+
+export function PlatformRecordPage(props: LayoutProps<readonly ['main', 'side', 'danger'], ReactNode>) {
+  const { locale, t } = useLocale()
+  const screen = useScreen()
+  const kayan = useKayan()
+  const list = screen.nav.find((entry) => entry.kayan === kayan.name)
+  return (
+    <div className="grid gap-4">
+      {list ? (
+        <a href={`${screen.path}${list.path}`} data-back="" className="inline-flex w-fit items-center gap-1.5 text-sm underline underline-offset-4 max-sm:min-h-11">
+          <ArrowLeft className="size-4 rtl:-scale-x-100" aria-hidden="true" />
+          <span>{navLabel({ entry: list, screen, locale, t })}</span>
+        </a>
+      ) : null}
+      <RecordPage {...props} />
+    </div>
+  )
+}