create-mithaq 0.1.1 → 0.2.0

package/template/templates/asas/src/seed.ts

@@ -1,26 +1,48 @@
 // Fills a database with a working organization's worth of rows, so the dashboard
 // can be tried with something in it.
 //
-//   DATABASE_URL=postgres://... bun run seed
+//   DATABASE_URL=postgres://... npm run seed
 //
-// Every row is written through the built asas's own operations, as the owner of
-// the organization named "Admin org", so access, validation, option lists and
-// the organization the runner fills apply exactly as they do to a person in the dashboard.
+// It fills the organization named SEED_ORGANIZATION that the user signing in as
+// SEED_EMAIL owns. SEED_EMAIL unset is the first user to sign up, and
+// SEED_ORGANIZATION unset the first organization that user owns. A development
+// tool only: nothing in production reads it.
+//
+// Every row is written through the built asas's own operations, as that
+// organization's owner, so access, validation, option lists and the
+// organization the runner fills apply exactly as they do to a person in the dashboard.
 // Running it twice adds nothing: each row is looked up by a key that does not
 // change between runs and is skipped where it is already there.
 import { createHmac } from 'node:crypto'
+import { organizations as mode } from '@asas/mithaq/auth/organizations'
+import { databaseOf } from './local-database.ts'
+// add-on: courses
 import type { RichTextNode, RichTextValue } from 'mithaq'
+// end add-on: courses
 
-const ORGANIZATION = 'Admin org'
-const OWNER = 'admin@admin.com'
+function refuse(reason: string): never {
+  console.error(`Refusing to seed: ${reason}`)
+  process.exit(1)
+}
 
 // The language falls back to the local development database when no URL is set,
 // which is right for the dev server and wrong here: a seed writes, so it runs
 // only against a database someone named. Checked before the build is imported,
 // since the import is what reads it.
-if (!process.env.DATABASE_URL) {
-  console.error('Refusing to seed: set DATABASE_URL to the database to fill. Nothing is seeded by default.')
-  process.exit(1)
+if (!process.env.DATABASE_URL) refuse('set DATABASE_URL to the database to fill. Nothing is seeded by default.')
+if (process.env.NODE_ENV === 'production') refuse('NODE_ENV is production, and the seed fills a development database only.')
+const { SEED_EMAIL, SEED_ORGANIZATION } = process.env
+// Without a name the seed picks whoever signed up first, which on a shared
+// database is someone's real organization. So it fills only this machine's
+// database by itself, and another only when told whose and told twice.
+const at = databaseOf(process.env.DATABASE_URL)
+if (!at) refuse('DATABASE_URL is not a connection string pg reads.')
+const { database, local } = at
+if (!local) {
+  if (!SEED_EMAIL) refuse(`DATABASE_URL names ${database}, which is not this machine. Name the owner whose organization to fill there with SEED_EMAIL, and set SEED_ALLOW_REMOTE=1.`)
+  if (process.env.SEED_ALLOW_REMOTE !== '1') {
+    refuse(`DATABASE_URL names ${database}, which is not this machine. Set SEED_ALLOW_REMOTE=1 to fill ${SEED_ORGANIZATION ? `the organization "${SEED_ORGANIZATION}"` : 'the first organization'} that ${SEED_EMAIL} owns there.`)
+  }
 }
 
 const { asas } = await import('./asas.ts')
@@ -38,6 +60,7 @@ const pick = <T>(list: readonly T[]) => list[Math.floor(random() * list.length)]
 const DAY = 86_400_000
 const now = Date.now()
 
+// add-on: courses
 /** One entry per course: the title it is found by on a later run, and a summary in the other locale. */
 const catalogue = [
   ['Introduction to Arabic calligraphy', 'مدخل إلى الخط العربي بأدواته وأساسياته', ['script']],
@@ -76,6 +99,7 @@ const courseDetails = (title: string, summary: string, topics: readonly string[]
 const topicNames: Record<string, string> = { script: 'الخط', grammar: 'النحو', recitation: 'التلاوة' }
 const sessionDetails = (format: 'workshop' | 'lecture') =>
   richText(block('paragraph', [words(format === 'workshop' ? 'A hands-on workshop.' : 'A lecture with questions at the end.')], { textFormat: 0, textStyle: '' }), block('paragraph', [words(format === 'workshop' ? 'ورشة عمل تطبيقية.' : 'محاضرة تتبعها أسئلة.')], { textFormat: 0, textStyle: '' }))
+// end add-on: courses
 
 /** A tag's name is copy a screen shows, so it is one string per locale, and a later run finds it by its English. */
 const tagNames = [
@@ -87,6 +111,7 @@ const tagNames = [
   { en: 'Children', ar: 'أطفال' },
 ]
 
+// add-on: roles
 /** Three custom roles, each labelled in every locale and holding keys the build's own catalog lists. */
 const customRoles = {
   teacher: {
@@ -103,6 +128,7 @@ const customRoles = {
     holds: (key: string) => /^enrollments\./.test(key) || /^(courses|sessions)\.(find|findByID|count|fields\.)/.test(key) || key === 'screen.dashboard',
   },
 }
+// end add-on: roles
 
 // The owner and the organization, read through the provider's own adapter:
 // the generated auth kayan answer no operation to anyone, so this is how a
@@ -112,7 +138,10 @@ type Row = Record<string, unknown> & { id: string }
 type AuthContext = {
   secret: string
   authCookies: { sessionToken: { name: string } }
-  adapter: { findMany(query: { model: string; where: { field: string; value: string }[] }): Promise<Row[]> }
+  adapter: {
+    findMany(query: { model: string; where?: { field: string; value: string }[]; limit?: number; sortBy?: { field: string; direction: 'asc' } }): Promise<Row[]>
+    create(query: { model: string; data: Record<string, unknown> }): Promise<Row>
+  }
   internalAdapter: {
     findUserByEmail(email: string): Promise<{ user: Row } | null>
     createSession(userId: string, dontRememberMe?: boolean, override?: Record<string, unknown>): Promise<{ token: string }>
@@ -121,21 +150,27 @@ type AuthContext = {
 }
 const auth = await server.$context
 
+const oldestFirst = { field: 'createdAt', direction: 'asc' } as const
+const owner = SEED_EMAIL
+  ? (await auth.internalAdapter.findUserByEmail(SEED_EMAIL))?.user
+  : (await auth.adapter.findMany({ model: 'user', limit: 1, sortBy: oldestFirst }))[0]
+// Where the first owner comes from: the first sign-up with many organizations, first-run otherwise.
+const makeOne = mode === 'many' ? 'Sign up in the tenant app and create an organization first.' : 'Set the app up on the tenant app\'s /auth/first-run first.'
+if (!owner) refuse(SEED_EMAIL ? `no user signs in as ${SEED_EMAIL}.` : `the database holds no user yet. ${makeOne}`)
+const owned = (await auth.adapter.findMany({ model: 'member', where: [{ field: 'userId', value: owner.id }], sortBy: oldestFirst }))
+  .filter((member) => String(member.role).split(',').includes('owner'))
+  .map((member) => String(member.organizationId))
 // A name is not unique, so the organization is the one of that name the owner
 // owns, and there has to be exactly one.
-const owner = (await auth.internalAdapter.findUserByEmail(OWNER))?.user
-const owned = owner
-  ? (await auth.adapter.findMany({ model: 'member', where: [{ field: 'userId', value: owner.id }] }))
-      .filter((member) => String(member.role).split(',').includes('owner'))
-      .map((member) => String(member.organizationId))
-  : []
-const organizations = (await auth.adapter.findMany({ model: 'organization', where: [{ field: 'name', value: ORGANIZATION }] }))
+const organizations = (await auth.adapter.findMany({ model: 'organization', where: [SEED_ORGANIZATION ? { field: 'name', value: SEED_ORGANIZATION } : { field: 'id', value: owned[0] ?? '' }] }))
   .filter((one) => owned.includes(one.id))
-if (!owner || organizations.length !== 1) {
-  console.error(`Refusing to seed: expected one organization named "${ORGANIZATION}" owned by ${OWNER}, found ${organizations.length}.`)
-  process.exit(1)
+if (organizations.length !== 1) {
+  refuse(SEED_ORGANIZATION
+    ? `${owner.email} owns ${organizations.length ? 'more than one' : 'no'} organization named "${SEED_ORGANIZATION}".`
+    : `${owner.email} owns no organization. ${makeOne}`)
 }
 const organization = organizations[0]!
+console.log(`Seeding the organization "${organization.name}" that ${owner.email} owns, in ${database}.`)
 const members = await auth.adapter.findMany({ model: 'member', where: [{ field: 'organizationId', value: organization.id }] })
 
 // A session of the owner's own, in that organization, which the provider
@@ -146,9 +181,32 @@ const { token } = await auth.internalAdapter.createSession(owner.id, true, { act
 const signature = createHmac('sha256', auth.secret).update(token).digest('base64')
 const headers = new Headers({ cookie: `${auth.authCookies.sessionToken.name}=${encodeURIComponent(`${token}.${signature}`)}` })
 
-const created = { tags: 0, courses: 0, sessions: 0, enrollments: 0, roles: 0, memberRoles: 0, settings: 0 }
+const created = {
+  tags: 0,
+  // add-on: courses
+  courses: 0,
+  sessions: 0,
+  enrollments: 0,
+  // end add-on: courses
+  // add-on: roles
+  roles: 0,
+  memberRoles: 0,
+  // end add-on: roles
+  // add-on: settings
+  settings: 0,
+  // end add-on: settings
+}
 /** The rows this run brought up to date rather than made. */
-const repaired = { roles: 0, tags: 0, tagColumns: 0, details: 0 }
+const repaired = {
+  tags: 0,
+  tagColumns: 0,
+  // add-on: courses
+  details: 0,
+  // end add-on: courses
+  // add-on: roles
+  roles: 0,
+  // end add-on: roles
+}
 const client = (asas.targets.drizzle as unknown as { db: { $client: { query(text: string, values?: unknown[]): Promise<{ rows: Record<string, unknown>[] }> } } }).db.$client
 
 try {
@@ -175,9 +233,15 @@ try {
     repaired.tagColumns = 1
   }
   const actor = await asas.auth.actor(headers)
-  if (!actor) throw new Error(`The session made for ${OWNER} did not authenticate.`)
+  if (!actor) throw new Error(`The session made for ${owner.email} did not authenticate.`)
   const options = { actor }
-  const { courses, sessions, enrollments, tags, roles, memberRoles } = asas.kayan
+  const { tags } = asas.kayan
+  // add-on: courses
+  const { courses, sessions, enrollments } = asas.kayan
+  // end add-on: courses
+  // add-on: roles
+  const { roles, memberRoles } = asas.kayan
+  // end add-on: roles
 
   const tagIds: string[] = []
   for (const name of tagNames) {
@@ -196,10 +260,11 @@ try {
     tagIds.push(found.id)
   }
 
+  // add-on: courses
   // What this run made and when each is said to have been made, for the one
   // write below that goes around the operations.
   const backdate: { table: 'courses' | 'enrollments'; id: string; at: Date }[] = []
-  const planned: { course: string; age: number; sessions: string[] }[] = []
+  const planned: { course: string; age: number; sessions: string[]; archived: boolean }[] = []
   for (const [index, [title, summary, topics]] of catalogue.entries()) {
     // Drawn whether or not the course is there, so every run draws the same plan.
     const age = 89 - index
@@ -218,15 +283,16 @@ try {
       notifications: random() < 0.7,
       opensOn: new Date(now - (age - 7) * DAY).toISOString().slice(0, 10),
       tags: tagIds.filter(() => random() < 0.35),
-      // Two of the twenty are archived, with the reason the archive form asks for.
-      ...(index % 9 === 8 && { archived: true, archiveReason: 'Replaced by a newer course.' }),
     }
     const sessionCount = 2 + Math.floor(random() * 5)
+    // Two of the twenty are archived, with the reason the archive form asks for.
+    const archived = index % 9 === 8
     const found = (await courses.operations.find({ where: { title: { equals: title } }, limit: 1 }, options)).docs[0]
     const course = found ?? (await courses.operations.create(input, options))
     if (!found) {
       created.courses++
       backdate.push({ table: 'courses', id: course.id, at: new Date(now - age * DAY) })
+      if (archived) await courses.operations.archive({ id: course.id, reason: 'Replaced by a newer course.' }, options)
     } else if (!found.details) {
       // A course seeded without details is given them, once.
       await courses.operations.update({ id: found.id, details: input.details }, options)
@@ -247,20 +313,40 @@ try {
       held.push((await sessions.operations.create({ ...session, details: sessionDetails(session.format) }, options)).id)
       created.sessions++
     }
-    planned.push({ course: course.id, age, sessions: held })
+    planned.push({ course: course.id, age, sessions: held, archived })
+  }
+
+  // Six students, made once by address, since a seat is held by someone holding
+  // the student role and an organization the seed starts from may hold none.
+  // They have no password, so nobody signs in as one, and are written past the
+  // sign-up hooks, since nobody signed up.
+  const students: string[] = []
+  for (let at = 1; at <= 6; at++) {
+    const email = `seed-student-${at}@example.invalid`
+    const user = (await auth.internalAdapter.findUserByEmail(email))?.user ?? await auth.adapter.create({ model: 'user', data: { email, name: `Student ${at}`, emailVerified: true, createdAt: new Date(), updatedAt: new Date() } })
+    const id = String(user.id)
+    if (!(await auth.adapter.findMany({ model: 'member', where: [{ field: 'organizationId', value: organization.id }, { field: 'userId', value: id }] })).length) {
+      await auth.adapter.create({ model: 'member', data: { organizationId: organization.id, userId: id, role: 'member', createdAt: new Date() } })
+    }
+    if (!(await memberRoles.operations.find({ where: { user: { equals: id }, role: { equals: 'student' } }, limit: 1 }, options)).docs.length) {
+      await memberRoles.operations.create({ user: id, role: 'student' }, options)
+      created.memberRoles++
+    }
+    students.push(id)
   }
 
   // Sixty enrollments, each on a session of its own drawn from every course's
-  // list and taken by the organization's members in turn, so one session and
-  // one student are the pair a later run finds it by. Each is said to have
-  // been made after its course was, more of them lately than long ago.
-  const pairs = planned.flatMap((one) => one.sessions.map((session) => ({ session, age: one.age })))
+  // list and taken by the students in turn, so one session and one student are
+  // the pair a later run finds it by. Each is said to have been made after its
+  // course was, more of them lately than long ago.
+  // An archived course's sessions take no new seat, so seats are drawn from the open courses alone.
+  const pairs = planned.filter((one) => !one.archived).flatMap((one) => one.sessions.map((session) => ({ session, age: one.age })))
   for (let at = pairs.length - 1; at > 0; at--) {
     const other = Math.floor(random() * (at + 1))
     ;[pairs[at], pairs[other]] = [pairs[other]!, pairs[at]!]
   }
   for (const [index, { session, age }] of pairs.slice(0, 60).entries()) {
-    const student = String(members[index % members.length]!.userId)
+    const student = students[index % students.length]!
     const at = new Date(now - Math.floor(random() ** 2 * age) * DAY - random() * DAY)
     const found = (await enrollments.operations.find({ where: { session: { equals: session }, student: { equals: student } }, limit: 1 }, options)).docs[0]
     if (found) continue
@@ -269,6 +355,17 @@ try {
     backdate.push({ table: 'enrollments', id: made.id, at })
   }
 
+  // `createdAt` is the application's, filled in by the create and refused from
+  // a caller, so no operation can say a row was made in the past. The
+  // dashboard's chart needs a past, so the rows this run just made, and only
+  // those, get one here with a plain update through the drizzle target's own
+  // connection, keyed on each row's id and this tenant.
+  for (const { table, id, at } of backdate) {
+    await client.query(`update "${table}" set "created_at" = $1 where "id" = $2 and "organization_id" = $3`, [at, id, organization.id])
+  }
+  // end add-on: courses
+
+  // add-on: roles
   // A role already there is brought to the keys it would be made with, so a
   // database seeded earlier is repaired by running the seed again. A row that
   // already holds exactly these keys is left alone, so a second run still
@@ -287,38 +384,43 @@ try {
   }
   // Each custom role given to a member in turn, the owner included: the
   // owner's own `administrator` already holds every key, so this widens nothing.
+  // A student takes none, so the students a run makes leave a later run's turns
+  // where the first run's were.
+  const studying = new Set((await memberRoles.operations.find({ where: { role: { equals: 'student' } }, limit: 0 }, options)).docs.map((one) => String(one.user)))
+  const staff = members.filter((one) => !studying.has(String(one.userId)))
+  const turns = staff.length ? staff : members
   for (const [index, role] of Object.keys(customRoles).entries()) {
-    const user = String(members[index % members.length]!.userId)
+    const user = String(turns[index % turns.length]!.userId)
     if ((await memberRoles.operations.find({ where: { user: { equals: user }, role: { equals: role } }, limit: 1 }, options)).docs.length) continue
     await memberRoles.operations.create({ user, role }, options)
     created.memberRoles++
   }
+  // end add-on: roles
 
+  // add-on: settings
   const { settings } = asas.global
   if (!(await settings.operations.findOne({}, options))) {
-    await settings.operations.update({ siteTitle: `${ORGANIZATION} Academy`, contactEmail: OWNER, maintenance: false }, options)
+    await settings.operations.update({ contactEmail: String(owner.email), maintenance: false }, options)
     created.settings++
   }
-
-  // `createdAt` is the application's, filled in by the create and refused from
-  // a caller, so no operation can say a row was made in the past. The
-  // dashboard's chart needs a past, so the rows this run just made, and only
-  // those, get one here with a plain update through the drizzle target's own
-  // connection, keyed on each row's id and this tenant.
-  for (const { table, id, at } of backdate) {
-    await client.query(`update "${table}" set "created_at" = $1 where "id" = $2 and "organization_id" = $3`, [at, id, organization.id])
-  }
+  // end add-on: settings
 
   const totals = {
     tags: (await tags.operations.count({}, options)).totalDocs,
+    // add-on: courses
     courses: (await courses.operations.count({}, options)).totalDocs,
     sessions: (await sessions.operations.count({}, options)).totalDocs,
     enrollments: (await enrollments.operations.count({}, options)).totalDocs,
+    // end add-on: courses
+    // add-on: roles
     roles: (await roles.operations.count({}, options)).totalDocs,
     memberRoles: (await memberRoles.operations.count({}, options)).totalDocs,
+    // end add-on: roles
+    // add-on: settings
     settings: (await settings.operations.findOne({}, options)) ? 1 : 0,
+    // end add-on: settings
   }
-  console.log(JSON.stringify({ organization: ORGANIZATION, created, repaired, totals }))
+  console.log(JSON.stringify({ organization: organization.name, created, repaired, totals }))
 } finally {
   await auth.internalAdapter.deleteSession(token)
   await asas.destroy()

package/template/templates/asas/src/{ui-platform → ui-backoffice}/home.tsx

@@ -1,4 +1,4 @@
-// What `/platform` itself draws: where staff start, inside the platform's
+// What `/backoffice` itself draws: where staff start, inside the backoffice'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
@@ -6,9 +6,9 @@
 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'
+import { BackofficeShell, iconOf } from '@asas/mithaq/ui/app-shell.tsx'
+import { KpiCard } from '@asas/mithaq/ui/kpi-card.tsx'
+import { navLabel } from '@asas/mithaq/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>> =>
@@ -24,14 +24,14 @@ export function Home({ loaderData: counts }: PageProps<Record<string, number | u
   const { locale, t } = useLocale()
   const screen = useScreen()
   return (
-    <PlatformShell
+    <BackofficeShell
       regions={{
-        header: <h1>{t('platform.title', 'Platform')}</h1>,
+        header: <h1>{t('backoffice.title', 'Backoffice')}</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>
+          <section data-dashboard="backoffice" className="@container grid gap-4">
+            <p className="text-muted-foreground">{t('backoffice.about', 'Every organization and every person on the backoffice, 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. */}
+                are the roomy ones of the backoffice'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 []

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

@@ -0,0 +1,121 @@
+// The list's cell for the `slug` column. Rename is drawn only where this actor holds
+// `organization.rename`, with many organizations alone (with one, the name lives in code), 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 'mithaq-admin/list-query.ts'
+import { endonym } from 'mithaq-admin/locale-menu.ts'
+import { defaultLocale, nameIn, organizationName, organizations } from '@asas/mithaq/auth/organizations'
+import { toast } from 'mithaq-admin/toast.tsx'
+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 = organizations === 'many' && holds(access, 'organization.rename')
+  // The default locale's name is the required `name` box, so only the others get optional boxes of their own.
+  const others = Object.keys(organizationName).filter((one) => one !== defaultLocale)
+  const members = holds(access, 'member.find') && screen.kayan.member?.pages.list !== undefined
+  const [open, setOpen] = useState(false)
+  const [refusal, setRefusal] = 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')
+    // An empty one falls back to `name`, so it is left out.
+    const names = { [defaultLocale]: name.trim(), ...Object.fromEntries(others.map((one) => [one, box(`name-${one}`).trim()]).filter(([, one]) => one)) }
+    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('backoffice.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/backoffice/organizations/update', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id, names, slug }),
+    })
+    if (!response.ok) {
+      const key = ((await response.json().catch(() => null)) as { data?: { key?: string } } | null)?.data?.key
+      return setRefusal((key && t(key)) ?? t('backoffice.refused', 'The backoffice refused that action.'))
+    }
+    window.dispatchEvent(new Event('mithaq:refresh'))
+    // A function, so a name holding `$&` is put in as written.
+    toast.success((t('backoffice.renamed', 'The organization is now named {name}.') ?? '').replace('{name}', () => name))
+    setOpen(false)
+  }
+  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('backoffice.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('backoffice.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('backoffice.rename', 'Rename')}</DialogTitle>
+              <DialogDescription>{t('backoffice.renameAbout', 'The new name and slug take the place of the old ones for everyone in this organization.')}</DialogDescription>
+            </DialogHeader>
+            <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>
+              {others.map((one) => (
+                <div key={one} className="grid gap-2">
+                  <Label htmlFor={`organization-name-${one}-${id}`}>{(t('backoffice.nameIn', 'Name in {language}, if it has one') ?? '').replace('{language}', () => endonym(one))}</Label>
+                  <Input id={`organization-name-${one}-${id}`} name={`name-${one}`} lang={one} dir="auto" defaultValue={nameIn({ name: '', names: row.names }, one)} />
+                </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 → ui-backoffice}/record-page.tsx

@@ -1,4 +1,4 @@
-// The platform's record page: the shared one under a link back to the list the
+// The backoffice'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.
@@ -6,12 +6,12 @@ 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'
+import { RecordPage } from '@asas/mithaq/ui/record-page.tsx'
+import { navLabel } from '@asas/mithaq/ui/screen-nav.tsx'
 
 export const regions = ['main', 'side', 'danger'] as const
 
-export function PlatformRecordPage(props: LayoutProps<readonly ['main', 'side', 'danger'], ReactNode>) {
+export function BackofficeRecordPage(props: LayoutProps<readonly ['main', 'side', 'danger'], ReactNode>) {
   const { locale, t } = useLocale()
   const screen = useScreen()
   const kayan = useKayan()

package/template/templates/asas/src/{ui-platform → ui-backoffice}/role-cells.tsx

@@ -1,13 +1,18 @@
-// The two role columns the platform lists, each named in the viewer's locale
+// The two role columns the backoffice lists, each named in the viewer's locale
 // where the column holds a slug, so an Arabic page reads no English word and
 // no slug for them.
+import type { CellProps } from 'mithaq/admin'
+import { useLocale } from 'mithaq/admin/react'
+import { listed } from 'mithaq-admin/format.tsx'
+// add-on: roles
 import { use } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import type { CellProps, Row } from 'mithaq/admin'
-import { ListContext, useClient, useLocale, useScreen } from 'mithaq/admin/react'
+import type { Row } from 'mithaq/admin'
+import { ListContext, useClient, useScreen } from 'mithaq/admin/react'
 import type { asas } from '../asas.ts'
-import { listed, refusalKeyOf } from '@/components/mithaq/controls.tsx'
-import { systemRoles } from '../roles.ts'
+import { refusalKeyOf } from 'mithaq-admin/refusal.ts'
+import { systemRoles } from '@asas/mithaq/roles/system-roles.ts'
+// end add-on: roles
 
 /**
  * A membership's role, which is the provider's own governance role, `owner`,
@@ -16,9 +21,10 @@ import { systemRoles } from '../roles.ts'
 export function MembershipRole({ value }: CellProps) {
   const { locale, t } = useLocale()
   if (typeof value !== 'string' || !value) return null
-  return listed(value.split(',').map((one) => t(`platform.membership.${one.trim()}`) ?? one.trim()), locale)
+  return listed(value.split(',').map((one) => t(`backoffice.membership.${one.trim()}`) ?? one.trim()), locale)
 }
 
+// add-on: roles
 /**
  * A business role an assignment names by its slug, by its label: a fixed
  * role's from its code, and a custom role's from its row of the assignment's own tenant, one read for
@@ -50,3 +56,4 @@ export function RoleName({ value, row }: CellProps) {
     : (custom?.find((one) => one.name === value && one.organization === row.organization)?.label as Record<string, string> | undefined)
   return label?.[locale] ?? value
 }
+// end add-on: roles