create-mithaq 0.1.1 → 0.2.0

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

@@ -1,13 +1,14 @@
 // Each action is the admin plugin's own route, drawn only where this actor holds its key
 // (`user.set-role`, `user.ban` or `user.impersonate`) and refused by the provider without it. None is
-// drawn on the viewer's own row, and on a staff member's, a person holding a platform role, only for a
+// drawn on the viewer's own row, and on a staff member's, a person holding a backoffice role, only for a
 // super admin; the server refuses both whatever is drawn. An action that lands asks the page behind
 // it to be read again through `mithaq:refresh`, so the page keeps its scroll.
 import { useState, type ReactNode } from 'react'
 import { holds, type CellProps, type MenuProps, type Row } from 'mithaq/admin'
 import { useAccess, useLocale, useRecord, useUser } from 'mithaq/admin/react'
-import { platformRoles } from '@asas/auth/platform-roles'
+import { backofficeRoles } from '@asas/mithaq/auth/backoffice-roles'
 import { authArm } from '@/api.ts'
+import { toast } from 'mithaq-admin/toast.tsx'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,15 +25,15 @@ import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 
-/** The names `set-role` accepts: the platform roles and the plugin's own `user`, which is none of them. */
-const roleNames = ['user', ...Object.keys(platformRoles)] as const
+/** The names `set-role` accepts: the backoffice roles and the plugin's own `user`, which is none of them. */
+const roleNames = ['user', ...Object.keys(backofficeRoles)] as const
 
 /** How long a ban lasts, in the seconds the plugin's `banExpiresIn` takes, or until it is lifted. */
 const banEnds = [
-  ['', 'platform.banUntilLifted', 'Until it is lifted'],
-  ['86400', 'platform.banDay', 'One day'],
-  ['604800', 'platform.banWeek', 'Seven days'],
-  ['2592000', 'platform.banMonth', 'Thirty days'],
+  ['', 'backoffice.banUntilLifted', 'Until it is lifted'],
+  ['86400', 'backoffice.banDay', 'One day'],
+  ['604800', 'backoffice.banWeek', 'Seven days'],
+  ['2592000', 'backoffice.banMonth', 'Thirty days'],
 ] as const
 
 type Action = 'set-role' | 'ban' | 'unban' | 'impersonate'
@@ -42,18 +43,18 @@ const choiceClass =
   'h-10 w-full rounded-none border border-transparent border-b-input bg-transparent px-0 text-sm outline-none focus-visible:border-b-ring [&>option]:bg-popover [&>option]:text-popover-foreground'
 
 const refusalsByCode: Record<string, [key: string, fallback: string]> = {
-  BANNED_USER: ['platform.refusedBanned', 'This person is banned, so they cannot be impersonated.'],
+  BANNED_USER: ['backoffice.refusedBanned', 'This person is banned, so they cannot be impersonated.'],
 }
 
-const usePlatformRoleLabel = () => {
+const useBackofficeRoleLabel = () => {
   const { locale, t } = useLocale()
   return (one: string) =>
-    Object.hasOwn(platformRoles, one) ? platformRoles[one as keyof typeof platformRoles].label[locale === 'ar' ? 'ar' : 'en'] : t('platform.noRole', 'No platform role')
+    Object.hasOwn(backofficeRoles, one) ? backofficeRoles[one as keyof typeof backofficeRoles].label[locale === 'ar' ? 'ar' : 'en'] : t('backoffice.noRole', 'No backoffice role')
 }
 
-/** A person's platform roles as badges, each by its label, which a record page draws where the column holds the slugs. */
-export function PlatformRole({ value }: Pick<CellProps, 'value'>) {
-  const labelOf = usePlatformRoleLabel()
+/** A person's backoffice roles as badges, each by its label, which a record page draws where the column holds the slugs. */
+export function BackofficeRole({ value }: Pick<CellProps, 'value'>) {
+  const labelOf = useBackofficeRoleLabel()
   const role = typeof value === 'string' && value ? value : 'user'
   return (
     <span className="inline-flex flex-wrap gap-1">
@@ -71,7 +72,7 @@ const usePerson = (row: Row) => {
   const viewer = useUser()
   const role = typeof row.role === 'string' && row.role ? row.role : 'user'
   const own = typeof row.email === 'string' && row.email === viewer.email
-  const staff = role.split(',').some((one) => Object.hasOwn(platformRoles, one.trim()))
+  const staff = role.split(',').some((one) => Object.hasOwn(backofficeRoles, one.trim()))
   // None on the viewer's own row, and on a staff member's only for a super
   // admin; the server refuses both whatever is drawn.
   const acts = !own && (!staff || access.permissions === '*')
@@ -86,19 +87,18 @@ const usePerson = (row: Row) => {
 
 const useNames = () => {
   const { t } = useLocale()
-  return { 'set-role': t('platform.setRole', 'Set role'), ban: t('platform.ban', 'Ban'), unban: t('platform.unban', 'Unban'), impersonate: t('platform.impersonate', 'Impersonate') }
+  return { 'set-role': t('backoffice.setRole', 'Set role'), ban: t('backoffice.ban', 'Ban'), unban: t('backoffice.unban', 'Unban'), impersonate: t('backoffice.impersonate', 'Impersonate') }
 }
 
 function PersonDialog({ row, action, onClose }: { row: Row; action: Action; onClose: () => void }) {
   const { t } = useLocale()
   const names = useNames()
-  const labelOf = usePlatformRoleLabel()
+  const labelOf = useBackofficeRoleLabel()
   const { role } = usePerson(row)
   const [chosen, setChosen] = useState(role)
   const [reason, setReason] = useState('')
   const [ends, setEnds] = useState('')
   const [refusal, setRefusal] = useState<string>()
-  const [done, setDone] = useState<string>()
   const [busy, setBusy] = useState(false)
   const userId = String(row.id ?? '')
   const name = String(row.name || row.email || '')
@@ -115,43 +115,43 @@ function PersonDialog({ row, action, onClose }: { row: Row; action: Action; onCl
     // refusal in the viewer's locale; the detail stays in the answer's body.
     if (!answered.ok) {
       const known = refusalsByCode[String(answered.body?.code)]
-      return setRefusal(known ? t(known[0], known[1]) : t('platform.refused', 'The platform refused that action.'))
+      return setRefusal(known ? t(known[0], known[1]) : t('backoffice.refused', 'The backoffice refused that action.'))
     }
-    // The platform answers a one-time link into the tenant app, which trades it for the impersonated
+    // The backoffice answers a one-time link into the tenant app, which trades it for the impersonated
     // session under its own cookie.
     if (action === 'impersonate') {
       onClose()
       return window.location.assign(String(answered.body?.url))
     }
     window.dispatchEvent(new Event('mithaq:refresh'))
-    setDone(landed[action])
+    toast.success(landed[action])
+    onClose()
   }
   // Functions, so a name holding `$&` is put in as written and never read as a pattern.
   const fill = (text: string | undefined) => (text ?? '').replace('{name}', () => name).replace('{role}', () => labelOf(chosen) ?? chosen)
   const said = {
     // Asked only once another role is picked: the dialog opens on the role
     // the person holds, which there is nothing to give.
-    'set-role': fill(chosen === role ? t('platform.pickRole', 'Pick another platform role for {name}.') : t('platform.confirmRole', 'Give {name} the platform role "{role}"?')),
-    ban: fill(t('platform.confirmBan', 'Ban {name}? They are signed out of both apps and cannot sign in until the ban ends.')),
-    unban: fill(t('platform.confirmUnban', 'Lift the ban on {name}? They can sign in again.')),
-    impersonate: fill(t('platform.confirmImpersonate', 'Impersonate {name}? You act as them in the tenant app until you stop.')),
+    'set-role': fill(chosen === role ? t('backoffice.pickRole', 'Pick another backoffice role for {name}.') : t('backoffice.confirmRole', 'Give {name} the backoffice role "{role}"?')),
+    ban: fill(t('backoffice.confirmBan', 'Ban {name}? They are signed out of both apps and cannot sign in until the ban ends.')),
+    unban: fill(t('backoffice.confirmUnban', 'Lift the ban on {name}? They can sign in again.')),
+    impersonate: fill(t('backoffice.confirmImpersonate', 'Impersonate {name}? You act as them in the tenant app until you stop.')),
   }[action]
   const landed = {
-    'set-role': fill(t('platform.roleSet', '{name} now holds the platform role "{role}".')),
-    ban: fill(t('platform.banned', '{name} is banned.')),
-    unban: fill(t('platform.unbanned', 'The ban on {name} is lifted.')),
+    'set-role': fill(t('backoffice.roleSet', '{name} now holds the backoffice role "{role}".')),
+    ban: fill(t('backoffice.banned', '{name} is banned.')),
+    unban: fill(t('backoffice.unbanned', 'The ban on {name} is lifted.')),
   }
   return (
     <AlertDialog open onOpenChange={(open) => !open && onClose()}>
       <AlertDialogContent data-person={userId}>
         <AlertDialogHeader>
           <AlertDialogTitle>{names[action]}</AlertDialogTitle>
-          {/* Polite, and drawn before and after the action lands, so the sentence it lands with is read out. */}
-          <AlertDialogDescription aria-live="polite">{done ?? said}</AlertDialogDescription>
+          <AlertDialogDescription>{said}</AlertDialogDescription>
         </AlertDialogHeader>
-        {done ? null : action === 'set-role' ? (
+        {action === 'set-role' ? (
           <div className="grid gap-2">
-            <Label htmlFor={`role-${userId}`}>{t('platform.role', 'Platform role')}</Label>
+            <Label htmlFor={`role-${userId}`}>{t('backoffice.role', 'Backoffice role')}</Label>
             <select
               id={`role-${userId}`}
               data-role="chosen"
@@ -167,20 +167,20 @@ function PersonDialog({ row, action, onClose }: { row: Row; action: Action; onCl
             </select>
           </div>
         ) : null}
-        {!done && action === 'ban' ? (
+        {action === 'ban' ? (
           <div className="grid gap-3">
             <div className="grid gap-2">
-              <Label htmlFor={`ban-reason-${userId}`}>{t('platform.banReason', 'Reason')}</Label>
+              <Label htmlFor={`ban-reason-${userId}`}>{t('backoffice.banReason', 'Reason')}</Label>
               {/* Required, and said so while it is empty, since Ban stays off until a reason is given. */}
               <Input id={`ban-reason-${userId}`} data-ban="reason" required aria-required maxLength={200} aria-describedby={reason.trim() ? undefined : `ban-reason-${userId}-needed`} value={reason} onChange={(event) => setReason(event.target.value)} />
               {reason.trim() ? null : (
                 <p id={`ban-reason-${userId}-needed`} className="text-muted-foreground text-sm">
-                  {t('platform.banReasonNeeded', 'A ban needs a reason.')}
+                  {t('backoffice.banReasonNeeded', 'A ban needs a reason.')}
                 </p>
               )}
             </div>
             <div className="grid gap-2">
-              <Label htmlFor={`ban-ends-${userId}`}>{t('platform.banEnds', 'Ban lasts')}</Label>
+              <Label htmlFor={`ban-ends-${userId}`}>{t('backoffice.banEnds', 'Ban lasts')}</Label>
               <select
                 id={`ban-ends-${userId}`}
                 data-ban="ends"
@@ -197,23 +197,21 @@ function PersonDialog({ row, action, onClose }: { row: Row; action: Action; onCl
             </div>
           </div>
         ) : null}
-        {refusal && !done ? (
+        {refusal ? (
           <p role="alert" className="text-sm text-destructive">
             {refusal}
           </p>
         ) : null}
         <AlertDialogFooter className="max-sm:[&_button]:h-11">
-          <AlertDialogCancel data-button="close">{done ? t('admin.close', 'Close') : t('admin.cancel', 'Cancel')}</AlertDialogCancel>
-          {done ? null : (
-            <AlertDialogAction
-              data-button="confirm"
-              variant={action === 'ban' ? 'destructive' : 'default'}
-              disabled={busy || (action === 'ban' && !reason.trim()) || (action === 'set-role' && chosen === role)}
-              onClick={() => void send()}
-            >
-              {names[action]}
-            </AlertDialogAction>
-          )}
+          <AlertDialogCancel data-button="close">{t('admin.cancel', 'Cancel')}</AlertDialogCancel>
+          <AlertDialogAction
+            data-button="confirm"
+            variant={action === 'ban' ? 'destructive' : 'default'}
+            disabled={busy || (action === 'ban' && !reason.trim()) || (action === 'set-role' && chosen === role)}
+            onClick={() => void send()}
+          >
+            {names[action]}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

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

@@ -12,9 +12,10 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { counted, formatDate } from '@/components/mithaq/controls.tsx'
-import { AppShell } from '../ui/app-shell.tsx'
-import { KpiCard } from '../ui/kpi-card.tsx'
+import { counted, formatDate } from 'mithaq-admin/format.tsx'
+import { AppShell } from '@asas/mithaq/ui/app-shell.tsx'
+import { KpiCard } from '@asas/mithaq/ui/kpi-card.tsx'
+import { MembersCard, membersFigures, type MembersFigures } from './members-card.tsx'
 
 const ranges = [7, 30, 90] as const
 type Range = (typeof ranges)[number]
@@ -51,6 +52,8 @@ export type Figures = {
   perDay?: Record<string, number>
   /** The next sessions to start, each beside its course's title, where the actor reads sessions. */
   upcoming?: { id: string; course: string; startsAt: string; venue?: string; capacity?: number }[]
+  /** Who works here and the roles they hold, where the actor may list members. */
+  members?: MembersFigures
 }
 
 /** How many sessions the home's table lists, which is a card's worth. */
@@ -78,7 +81,7 @@ export const loader = async (tools: LoaderTools): Promise<Figures> => {
   // row where the actor holds `findVersions`, so the card and the list count one
   // set, a course nobody has published yet among it.
   const draft = access.collections?.courses?.operations?.findVersions === true
-  const [rows, enrollments, recent, next] = await Promise.all([
+  const [rows, enrollments, recent, next, members] = await Promise.all([
     readAll({ tools, kayan: 'courses', draft }),
     reads ? (client({ kayan: 'enrollments', operation: 'count', input: {} }) as Promise<{ totalDocs: number }>) : undefined,
     reads ? readAll({ tools, kayan: 'enrollments', where: { createdAt: { greater_than_equal: since } } }) : undefined,
@@ -89,6 +92,7 @@ export const loader = async (tools: LoaderTools): Promise<Figures> => {
         input: { where: { startsAt: { greater_than_equal: new Date().toISOString() } }, sort: 'startsAt', limit: Math.min(upcomingLimit, tools.maxLimit), depth: 0 },
       }) as Promise<{ docs: Row[] }>)
       : undefined,
+    membersFigures(tools),
   ])
   const titles = new Map(rows.map((course) => [String(course.id), String(course.title ?? course.id)]))
   const fees: Record<string, number> = {}
@@ -104,6 +108,7 @@ export const loader = async (tools: LoaderTools): Promise<Figures> => {
     perDay[key] = (perDay[key] ?? 0) + 1
   }
   return {
+    ...(members && { members }),
     courses: rows.length,
     open: open.length,
     ...(readsFees && { fees: Object.entries(fees) }),
@@ -210,6 +215,7 @@ export function Dashboard({ loaderData: figures }: PageProps<Figures>) {
                   />
                 </>
               ) : null}
+              {figures?.members ? <MembersCard figures={figures.members} href={`${screen.path}/members`} /> : null}
             </div>
             {reads ? (
               <Card data-chart-card="enrollments">

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

@@ -0,0 +1,73 @@
+// What `/dashboard` itself draws where the courses add-on, whose home counts
+// its catalogue, is not there: a figure card for each list the nav offers the
+// viewer, with how many rows of it they may read and a link to it, and with the
+// roles add-on who works here and the roles they hold. A list
+// whose count the viewer may not read, or whose count failed, shows a dash.
+import type { LoaderTools, PageProps } from 'mithaq/admin'
+import { useLocale, useScreen } from 'mithaq/admin/react'
+import { AppShell, 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'
+// add-on: roles
+import { MembersCard, membersFigures } from './members-card.tsx'
+// end add-on: roles
+
+/** How many rows of each kayan the viewer may count, read as the viewer, keyed by its kayan. */
+const countsOf = 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 const loader = async (tools: LoaderTools) => ({
+  counts: await countsOf(tools),
+  // add-on: roles
+  // Who works here, where the viewer may list members.
+  members: await membersFigures(tools),
+  // end add-on: roles
+})
+
+export function Home({ loaderData }: PageProps<Awaited<ReturnType<typeof loader>>>) {
+  const counts = loaderData?.counts
+  const { locale, t } = useLocale()
+  const screen = useScreen()
+  // add-on: roles
+  const members = loaderData?.members ? <MembersCard figures={loaderData.members} href={`${screen.path}/members`} /> : null
+  // end add-on: roles
+  // without add-on: roles
+  // const members = null
+  // end without add-on: roles
+  return (
+    <AppShell
+      regions={{
+        header: <h1>{t('dashboard.dashboard', 'Dashboard')}</h1>,
+        main: (
+          <section data-dashboard="dashboard" className="@container grid gap-4">
+            <p className="text-muted-foreground">{t('dashboard.dashboardAboutCatalogue', 'What this organization holds.')}</p>
+            <div className="grid grid-cols-2 items-start gap-4 @2xl:grid-cols-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)}
+                    footer={<a href={`${screen.path}${entry.path}`} className="text-foreground inline-flex items-center hover:underline max-sm:min-h-11">{t('portal.open', 'Open the list')}</a>}
+                  />,
+                ]
+              })}
+              {members}
+            </div>
+          </section>
+        ),
+      }}
+    />
+  )
+}

package/template/templates/asas/src/ui-dashboard/members-card.tsx

@@ -0,0 +1,147 @@
+// What the Members page and the dashboard's Members card both read: the members of the viewer's organization with their
+// roles, and the roles a member may hold, read as the viewer. Its own module, so the dashboard's home carries the card
+// and not the page.
+import { Users } from 'lucide-react'
+import { holds, type LoaderTools } from 'mithaq/admin'
+import { useLocale } from 'mithaq/admin/react'
+import { isOwner, OWNER_ROLE } from '@asas/mithaq/roles/grants.ts'
+import { tenantRoles } from '@asas/mithaq/roles/tenant-roles.ts'
+import { KpiCard } from '@asas/mithaq/ui/kpi-card.tsx'
+
+/**
+ * One member as the page draws it: each role assignment by its row, whether they own the organization, which holds
+ * `administrator` whatever the rows say, and when they were last seen, where the viewer may read it.
+ */
+export type Member = { userId: string; name: string; email: string; joined: string; lastSeen?: string; owner: boolean; roles: { id: string; role: string }[] }
+/**
+ * One role the drawer offers: its label in every locale, whether this project ships it, and its keys, which a fixed role's
+ * code always says and a custom role's row says where the viewer may read them.
+ */
+export type Role = { name: string; label?: Readonly<Record<string, string>>; fixed: boolean; permissions?: readonly string[] }
+/** An ISO timestamp, or `''` for a value that does not parse: `toISOString()` throws on an invalid date, and a row with no readable date is still worth drawing. */
+export const isoOf = (value: unknown): string => {
+  const when = new Date(value as string)
+  return value === null || value === undefined || Number.isNaN(when.getTime()) ? '' : when.toISOString()
+}
+
+/**
+ * Every row of a read that answers a page at a time, read until the total is reached: an organization outgrows any one
+ * page, and a page that drew the first hundred would leave the rest out without a word.
+ *
+ * The pages are offsets, so a row added or removed between two reads shifts the next page: a row then comes back twice,
+ * and is kept once by `key`, or is missed until the page loads again.
+ */
+// ponytail: every member is read and drawn at once, by offset; page the table itself, by a cursor, once an organization's size makes the page slow.
+export const everyPage = async <Row,>({ read, key }: { read: (offset: number) => Promise<{ rows: Row[]; total: number }>; key: (row: Row) => string }): Promise<Row[]> => {
+  const rows = new Map<string, Row>()
+  for (let offset = 0; ; ) {
+    const page = await read(offset)
+    for (const row of page.rows) if (!rows.has(key(row))) rows.set(key(row), row)
+    offset += page.rows.length
+    if (!page.rows.length || offset >= page.total) return [...rows.values()]
+  }
+}
+
+/** The members with their roles, and the roles a member may hold: what the page and the dashboard's card both read. */
+export const readMembers = async ({ access, client, request, maxLimit }: LoaderTools): Promise<{ members: Member[]; roles: Role[] }> => {
+  const [members, assignments, roles] = await Promise.all([
+    everyPage({
+      key: (member) => member.userId,
+      read: async (offset: number) => {
+        // In id order, which no change to a member's other columns reorders.
+        const response = await request(`/api/auth/user/organization/list-members?limit=${maxLimit}&offset=${offset}&sortBy=id`)
+        if (!response.ok) throw new Error(`list-members answered ${response.status}`)
+        const page = (await response.json()) as { members: { userId: string; role: string; createdAt: string; lastSeenAt?: string | null; user: { name: string; email: string } }[]; total: number }
+        return { rows: page.members, total: page.total }
+      },
+    }),
+    // The page is served on `member.find`, so a viewer may list the members
+    // and not read who holds which role.
+    holds(access, 'memberRoles.find')
+      ? everyPage({
+          key: (row) => row.id,
+          read: async (offset: number) => {
+            const page = (await client({ kayan: 'memberRoles', operation: 'find', input: { limit: maxLimit, page: Math.ceil(offset / maxLimit) + 1, depth: 0 } })) as { docs: { id: string; user: string; role: string }[]; totalDocs: number }
+            return { rows: page.docs, total: page.totalDocs }
+          },
+        })
+      : [],
+    // Asked only of a viewer the report lets read roles, so the page still
+    // draws for one who may read the assignments and not the roles.
+    holds(access, 'roles.find')
+      ? (client({ kayan: 'roles', operation: 'find', input: { limit: maxLimit, depth: 0, sort: 'name' } }) as Promise<{ docs: { name: string; label?: Record<string, string> | null; permissions?: unknown }[] }>)
+      : { docs: [] },
+  ])
+  return {
+    members: [...members].sort((a, b) => a.createdAt.localeCompare(b.createdAt)).map((member) => ({
+      userId: member.userId,
+      name: member.user.name,
+      email: member.user.email,
+      joined: isoOf(member.createdAt),
+      // Answered only to a viewer holding the column's key; the server leaves it out for anyone else.
+      ...(member.lastSeenAt && { lastSeen: isoOf(member.lastSeenAt) }),
+      owner: isOwner(member.role),
+      roles: assignments.filter((row) => row.user === member.userId).map((row) => ({ id: String(row.id), role: row.role })),
+    })),
+    roles: [
+      ...Object.entries(tenantRoles).map(([name, role]): Role => ({ name, label: role.label, fixed: true, permissions: role.permissions === '*' ? ['*'] : role.permissions })),
+      ...roles.docs.map((row): Role => ({
+        name: row.name,
+        ...(row.label && { label: row.label }),
+        fixed: false,
+        ...(Array.isArray(row.permissions) && { permissions: row.permissions as string[] }),
+      })),
+    ],
+  }
+}
+
+/** The dashboard's Members card: how many work here and, to a reader of the assignments, how many hold each role. */
+export type MembersFigures = { total: number; held?: { role: string; label?: Readonly<Record<string, string>>; count: number }[] }
+
+/**
+ * The card's figures, read as the viewer, and nothing for a viewer who may not list the members or whose read failed,
+ * so the home still draws. An owner holds `administrator` whatever the rows say, as the server reads them.
+ */
+export const membersFigures = async (tools: LoaderTools): Promise<MembersFigures | undefined> => {
+  if (!holds(tools.access, 'member.find')) return undefined
+  const read = await readMembers(tools).catch(() => undefined)
+  if (!read) return undefined
+  if (!holds(tools.access, 'memberRoles.find')) return { total: read.members.length }
+  const counts = new Map<string, number>()
+  for (const member of read.members) {
+    for (const role of new Set([...member.roles.map((one) => one.role), ...(member.owner ? [OWNER_ROLE] : [])])) counts.set(role, (counts.get(role) ?? 0) + 1)
+  }
+  const order = read.roles.map((role) => role.name)
+  return {
+    total: read.members.length,
+    held: [...counts]
+      .sort(([a], [b]) => (order.indexOf(a) >>> 0) - (order.indexOf(b) >>> 0))
+      .map(([role, count]) => {
+        const label = read.roles.find((one) => one.name === role)?.label
+        return { role, ...(label && { label }), count }
+      }),
+  }
+}
+
+export function MembersCard({ figures, href }: { figures: MembersFigures; href: string }) {
+  const { locale, t } = useLocale()
+  const number = new Intl.NumberFormat(locale)
+  return (
+    <KpiCard
+      kpi="members"
+      icon={<Users className="size-4" />}
+      title={t('dashboard.members', 'Members')}
+      value={number.format(figures.total)}
+      footer={
+        <span className="grid gap-1">
+          {figures.held?.length ? (
+            <span data-members-held="">
+              {figures.held.map((one) => `${number.format(one.count)} ${one.label?.[locale] ?? one.role}`).join(' · ')}
+            </span>
+          ) : null}
+          <a href={href} className="text-foreground inline-flex items-center hover:underline max-sm:min-h-11">{t('portal.open', 'Open the list')}</a>
+        </span>
+      }
+    />
+  )
+}