create-mithaq 0.0.0-stage → 0.2.0

package/template/apps/asas-backoffice/src/routes/(screens)/backoffice/types.ts

@@ -0,0 +1,163 @@
+// Written by `mithaq generate screens`. Do not edit.
+import type { ScreenClient as Client } from 'mithaq/admin'
+export type { PageClient } from 'mithaq/admin'
+export type UserValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  name: string
+  email: string
+  emailVerified: boolean
+  image: string | null
+  role: string | null
+  banned: boolean | null
+  banReason: string | null
+  banExpires: Date | null
+}
+export type OrganizationValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  name: string
+  slug: string
+  logo: string | null
+  metadata: string | null
+  names: string | null
+}
+export type MemberValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organizationId: string
+  userId: string
+  role: string
+  lastSeenAt: Date | null
+}
+export type CoursesValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organization: string
+  title: string
+  summary: string | null
+  fee: number | null
+  currency: 'SAR' | 'USD' | null
+  level: number | null
+  notifications: boolean | null
+  delivery: 'live' | 'recorded' | null
+  audience: 'beginner' | 'advanced' | null
+  accessCode: string | null
+  archived: boolean | null
+  topics: string[] | null
+  opensOn: string | null
+  archiveReason: string | null
+  tags: string[] | null
+  scheduledSessions: Values['sessions'][]
+  _status: 'draft' | 'published' | null
+  details: { root: Record<string, unknown> } | null
+  cover: unknown
+  selfEnroll: boolean | null
+}
+export type SessionsValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organization: string
+  course: string
+  startsAt: Date
+  capacity: number | null
+  venue: 'online' | 'campus' | null
+  format: 'workshop' | 'lecture' | null
+  archived: boolean | null
+  details: { root: Record<string, unknown> } | null
+  enrollments: Values['enrollments'][]
+  archiveReason: string | null
+}
+export type EnrollmentsValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organization: string
+  session: string
+  student: string
+  deletedAt: Date | null
+}
+export type TagsValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organization: string
+  name: Record<'ar' | 'en', string>
+}
+export type RolesValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organization: string
+  name: string
+  label: Record<'ar' | 'en', string>
+  permissions: string[]
+}
+export type MemberRolesValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organization: string
+  user: string
+  role: string
+}
+export type LocalUsersValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  email: string
+  hash: string
+  salt: string
+  sessions: string | null
+  loginAttempts: number | null
+  lockUntil: Date | null
+  resetPasswordToken: string | null
+  resetPasswordAttempts: number | null
+  resetPasswordExpiration: Date | null
+  _verified: boolean | null
+  _verificationToken: string | null
+}
+export type BackofficeLogValues = {
+  id: string
+  createdAt: Date
+  action: 'impersonate' | 'stopImpersonating' | 'setRole' | 'ban' | 'unban'
+  actor: string | null
+  actorEmail: string | null
+  target: string | null
+  targetEmail: string | null
+  previousRole: string | null
+  role: string | null
+  banReason: string | null
+}
+export type Values = {
+  user: UserValues
+  organization: OrganizationValues
+  member: MemberValues
+  courses: CoursesValues
+  sessions: SessionsValues
+  enrollments: EnrollmentsValues
+  tags: TagsValues
+  roles: RolesValues
+  memberRoles: MemberRolesValues
+  localUsers: LocalUsersValues
+  backofficeLog: BackofficeLogValues
+}
+export type Pages = {
+  user: 'list' | 'view'
+  organization: 'list' | 'view'
+  member: 'list' | 'view'
+  courses: 'list' | 'view'
+  sessions: 'list' | 'view'
+  enrollments: 'list' | 'view'
+  tags: 'list' | 'view'
+  roles: 'list' | 'view'
+  memberRoles: 'list' | 'view'
+  localUsers: 'list' | 'edit'
+  backofficeLog: 'list'
+}
+export type ScreenClient = Client<Pages>

package/template/apps/asas-backoffice/src/routes/(screens)/backoffice.$.tsx

@@ -0,0 +1,17 @@
+// Written by `mithaq generate screens`. Do not edit.
+import { createFileRoute } from '@tanstack/react-router'
+import { ScreenNotFound, ScreenPageView, askedFor, pageHead, pageLoader } from '@/screens.tsx'
+import { files } from './backoffice/files.ts'
+
+export const Route = createFileRoute('/(screens)/backoffice/$')({
+  validateSearch: askedFor,
+  loader: ({ location, params }) => pageLoader({ screen: 'backoffice', files, path: params._splat ?? '', query: location.search, href: location.href }),
+  head: ({ loaderData, match }) => pageHead(loaderData, match.context),
+  notFoundComponent: () => <ScreenNotFound files={files} screen={'backoffice'} />,
+  component: Page,
+})
+
+function Page() {
+  const navigate = Route.useNavigate()
+  return <ScreenPageView files={files} data={Route.useLoaderData()} query={Route.useSearch()} onQuery={(search) => void navigate({ search })} />
+}

package/template/apps/asas-backoffice/src/routes/(screens)/backoffice.index.tsx

@@ -0,0 +1,10 @@
+// Written by `mithaq generate screens`. Do not edit.
+import { createFileRoute } from '@tanstack/react-router'
+import { ScreenPageView, askedFor, pageHead, pageLoader } from '@/screens.tsx'
+import { files } from './backoffice/files.ts'
+
+export const Route = createFileRoute('/(screens)/backoffice/')({
+  loader: ({ location }) => pageLoader({ screen: 'backoffice', files, path: '', query: {}, href: location.href }),
+  head: ({ loaderData, match }) => pageHead(loaderData, match.context),
+  component: () => <ScreenPageView files={files} data={Route.useLoaderData()} query={askedFor({})} onQuery={() => {}} />,
+})

package/template/apps/asas-backoffice/src/routes/(screens)/backoffice.tsx

@@ -0,0 +1,13 @@
+// Written by `mithaq generate screens`. Do not edit.
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { ScreenFrame, frameLoader } from '@/screens.tsx'
+import { files } from './backoffice/files.ts'
+
+export const Route = createFileRoute('/(screens)/backoffice')({
+  loader: ({ location }) => frameLoader({ screen: 'backoffice', files, href: location.href }),
+  component: () => (
+    <ScreenFrame files={files} data={Route.useLoaderData()}>
+      <Outlet />
+    </ScreenFrame>
+  ),
+})

package/template/apps/asas-backoffice/src/routes/__root.tsx

@@ -0,0 +1,95 @@
+import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-router'
+import { DirectionProvider } from '@/components/ui/direction'
+export { locales } from '../copy.ts'
+import { dirOf, documentHead, localeOf, translator } from '../copy.ts'
+import { ThemeProvider } from 'mithaq-admin/theme.tsx'
+import { themeStorageKey } from '../theme.ts'
+import appCss from '../styles.css?url'
+
+// Puts the chosen theme on the document before first paint, which the provider's effect cannot do.
+// Also reloads a page restored from the back-forward cache, so Back after signing out asks the server again.
+const theme = `
+              (function() {
+                var storageKey = ${JSON.stringify(themeStorageKey)};
+                var defaultTheme = "system";
+                try {
+                  var theme = localStorage.getItem(storageKey) || defaultTheme;
+                  var systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+                  var root = document.documentElement;
+                  root.classList.remove("light", "dark");
+                  root.classList.add(theme === "system" ? systemTheme : theme);
+                } catch (e) {}
+                window.addEventListener("pageshow", function (event) {
+                  if (event.persisted) location.reload();
+                });
+              })()
+            `
+
+// A request context nothing registered is `never` in the router's types, so the shape is named and read
+// through a cast; `localeOf` turns it back into a declared locale.
+type FromRequest = { serverContext?: { locale?: unknown } }
+
+export const Route = createRootRoute({
+  // On the client the locale is read back off the `lang` the server wrote on `<html>`, so the hydrated tree
+  // matches the one sent. `localeOf` on both refuses a hand-edited `lang` like a hand-written cookie.
+  beforeLoad: (ctx) => {
+    const locale =
+      typeof document === 'undefined'
+        ? localeOf((ctx as unknown as FromRequest).serverContext?.locale as string | undefined)
+        : localeOf(document.documentElement.lang)
+    return { locale, dir: dirOf(locale), app: 'backoffice.brand' }
+  },
+  // The favicon stops the browser asking for a `/favicon.ico` nobody serves.
+  head: ({ match }) => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      ...documentHead(match.context, match._notFound ? (t) => t('admin.notFoundTitle', 'Page not found') : undefined).meta,
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }, { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
+  }),
+  // Without it the router draws a development-only placeholder and warns.
+  notFoundComponent: NotFound,
+  component: RootDocument,
+})
+
+/** The locale and direction of this request and the `t` resolved for it, read from the root route's context. */
+export const useCopy = () => {
+  const { dir, locale } = Route.useRouteContext()
+  return { dir, locale, t: translator(locale) }
+}
+
+function NotFound() {
+  const { t } = useCopy()
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center gap-4 px-4 text-center">
+      <h1 className="text-2xl font-bold tracking-tight">{t('admin.notFoundTitle', 'Page not found')}</h1>
+      <p className="text-muted-foreground text-sm">{t('admin.notFound', 'That page does not exist.')}</p>
+      {/* An anchor, because `/` is no route here. */}
+      <a className="text-foreground text-sm underline underline-offset-4" href="/">
+        {t('admin.goHome', 'Go to the home page')}
+      </a>
+    </main>
+  )
+}
+
+function RootDocument() {
+  const { dir, locale } = useCopy()
+  return (
+    <html lang={locale} dir={dir} suppressHydrationWarning>
+      <head>
+        <HeadContent />
+        {/* The string is this module's own and carries no request value, so writing it raw is safe. */}
+        <script dangerouslySetInnerHTML={{ __html: theme }} />
+      </head>
+      <body>
+        <DirectionProvider direction={dir}>
+          <ThemeProvider defaultTheme="system" storageKey={themeStorageKey}>
+            <Outlet />
+          </ThemeProvider>
+        </DirectionProvider>
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/template/apps/asas-backoffice/src/routes/api/$.ts

@@ -0,0 +1,34 @@
+import { createFileRoute } from '@tanstack/react-router'
+// Loads the types of the `server` route option; erased at build.
+import type {} from '@tanstack/start-client-core'
+import { asas, backofficeURL } from 'asas'
+
+// The backoffice reads every organization: a read of a kayan asks `tenant: 'all'`, which the runner
+// grants backoffice staff in this app alone and refuses anyone else. A global is one organization's row
+// and asks for none.
+const reads = new Set(asas.operations.filter((one) => one.effect === 'read' && !one.single).map((one) => `/api/${one.kayan}/${one.name}`))
+
+// The body is handed on unread, so the plug that answers bounds it before any session is looked at.
+const acrossTenants = (request: Request) => {
+  const url = new URL(request.url)
+  if (!reads.has(url.pathname)) return request
+  url.searchParams.set('tenant', 'all')
+  return new Request(url, { method: request.method, headers: request.headers, body: request.body, signal: request.signal, duplex: 'half' } as RequestInit)
+}
+
+// A write whose `Origin` is not BACKOFFICE_URL's is refused: the data plug checks no origin and leans on
+// the session cookie's `SameSite=Lax`, which the customer app's sibling subdomain passes, so this check
+// is the barrier between the two. Never the URL the request arrived on: behind a TLS proxy it is
+// http://, and its host is whatever the Host header said.
+const origin = new URL(backofficeURL).origin
+
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      ANY: async ({ request }) =>
+        request.method === 'GET' || request.method === 'HEAD' || request.headers.get('origin') === origin
+          ? asas.handler(acrossTenants(request))
+          : new Response('Forbidden', { status: 403 }),
+    },
+  },
+})

package/template/apps/asas-backoffice/src/routes/auth.create-first-user.tsx

@@ -0,0 +1,113 @@
+import { useState, type ComponentProps } from 'react'
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { authArm } from '../api.ts'
+import { AuthBox, AuthFrame, authGate, notAnEmail, useRefusal } from '../auth-frame.tsx'
+import { documentHead } from '../copy.ts'
+import { firstUser } from '../first-user.ts'
+import { useCopy } from './__root.tsx'
+
+export const Route = createFileRoute('/auth/create-first-user')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.createFirstUser')),
+  beforeLoad: async () => {
+    const state = await firstUser()
+    if (state.initialized) throw redirect({ to: '/auth/sign-in' })
+    return { code: state.code, password: (await authGate()).password }
+  },
+  component: CreateFirstUser,
+})
+
+function CreateFirstUser() {
+  const navigate = useNavigate()
+  const { t } = useCopy()
+  const refused = useRefusal()
+  const { code: asked, password: bounds } = Route.useRouteContext()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [code, setCode] = useState('')
+  const [pending, setPending] = useState(false)
+  const [refusal, setRefusal] = useState<string | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const required = t('auth.required', 'This field is required.')
+  const wrong = {
+    name: () => (name.trim() ? undefined : required),
+    email: () => (!email ? required : notAnEmail(email) ? t('auth.invalidEmail', 'Invalid email') : undefined),
+    password: () =>
+      !password ? required
+      : password.length < bounds.min ? t('auth.passwordTooShort', 'Password too short')
+      : password.length > bounds.max ? t('auth.passwordTooLong', 'Password too long')
+      : undefined,
+    confirmation: () => (!confirmation ? required : confirmation === password ? undefined : t('auth.passwordsDiffer', 'The two passwords are not the same.')),
+    code: () => (asked !== 'required' || code ? undefined : required),
+  }
+  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
+  const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'> & { description?: string }) => (
+    <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
+  )
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setLeft(new Set(Object.keys(wrong)))
+    if (Object.values(wrong).some((check) => check())) return
+    setPending(true)
+    setRefusal(null)
+    const made = await authArm('first-register', { name, email, password, ...(asked === 'required' && { code }) })
+    setPending(false)
+    if (!made.ok) return setRefusal(refused(made, t('auth.createFirstUserFailed', 'That administrator could not be created.')))
+    await navigate({ to: '/auth/sign-in' })
+  }
+
+  if (asked === 'unset') {
+    return (
+      <AuthFrame title={t('auth.createFirstUser', 'Create the first administrator')}>
+        <p className="text-sm" role="alert">
+          {t('auth.setupCodeUnset')}
+        </p>
+      </AuthFrame>
+    )
+  }
+  return (
+    <AuthFrame
+      title={t('auth.createFirstUser', 'Create the first administrator')}
+      description={t('auth.createFirstUserDescription', 'No one administers this backoffice yet. The account made here becomes its first administrator.')}
+    >
+      <form className="grid gap-4" noValidate onSubmit={submit}>
+        {box('name', t('auth.name', 'Name'), { autoComplete: 'name', onChange: (event) => setName(event.target.value), type: 'text', value: name })}
+        {box('email', t('auth.email', 'Email'), { autoComplete: 'email', onChange: (event) => setEmail(event.target.value), type: 'email', value: email })}
+        {box('password', t('auth.password', 'Password'), {
+          autoComplete: 'new-password',
+          description: t('auth.passwordRule', 'At least {count} characters.')!.replace('{count}', String(bounds.min)),
+          onChange: (event) => setPassword(event.target.value),
+          type: 'password',
+          value: password,
+        })}
+        {box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
+          autoComplete: 'new-password',
+          onChange: (event) => setConfirmation(event.target.value),
+          type: 'password',
+          value: confirmation,
+        })}
+        {asked === 'required'
+          ? box('code', t('auth.setupCode', 'Setup code'), {
+              autoComplete: 'off',
+              description: t('auth.setupCodeDescription', 'The SETUP_CODE this server was started with.'),
+              onChange: (event) => setCode(event.target.value),
+              type: 'password',
+              value: code,
+            })
+          : null}
+        {/* `role="alert"` so a refusal is spoken when it appears; nothing moves the focus to it. */}
+        {refusal && (
+          <p className="text-destructive text-sm" role="alert">
+            {refusal}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {pending ? t('auth.createFirstUserPending', 'Creating…') : t('auth.createFirstUserSubmit', 'Create the administrator')}
+        </Button>
+      </form>
+    </AuthFrame>
+  )
+}

package/template/apps/asas-backoffice/src/routes/auth.sign-in.tsx

@@ -0,0 +1,77 @@
+import { useState, type ComponentProps } from 'react'
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { authArm } from '../api.ts'
+import { AuthBox, AuthFrame, authGate, notAnEmail, redirectSearch, useRefusal } from '../auth-frame.tsx'
+import { documentHead } from '../copy.ts'
+import { firstUser } from '../first-user.ts'
+import { useCopy } from './__root.tsx'
+import { landing } from '../redirect.ts'
+
+export const Route = createFileRoute('/auth/sign-in')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.signIn')),
+  validateSearch: redirectSearch,
+  // Nobody can sign in to a backoffice no one administers yet.
+  beforeLoad: async () => {
+    if (!(await firstUser()).initialized) throw redirect({ href: '/auth/create-first-user' })
+  },
+  component: SignIn,
+})
+
+function SignIn() {
+  const navigate = useNavigate()
+  const { t } = useCopy()
+  const search = Route.useSearch()
+  const refused = useRefusal()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [refusal, setRefusal] = useState<string | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const required = t('auth.required', 'This field is required.')
+  const wrong = {
+    email: () => (!email ? required : notAnEmail(email) ? t('auth.invalidEmail', 'Invalid email') : undefined),
+    password: () => (password ? undefined : required),
+  }
+  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
+  const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'>) => (
+    <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
+  )
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setLeft(new Set(Object.keys(wrong)))
+    if (Object.values(wrong).some((check) => check())) return
+    setPending(true)
+    setRefusal(null)
+    const answered = await authArm('sign-in/email', { email, password })
+    // Our own sentence for the provider's code, not its English `message`: a refusal is copy and carries a string per locale.
+    if (!answered.ok) {
+      setPending(false)
+      return setRefusal(refused(answered, t('auth.failed', 'That sign-in did not work.')))
+    }
+
+    setPending(false)
+
+    // A navigation, not a reload, so the screen's loader runs with the cookie just set.
+    await navigate({ href: landing({ asked: search.redirect, screens: (await authGate()).screens }) })
+  }
+
+  return (
+    <AuthFrame title={t('auth.signIn', 'Sign in')} description={t('auth.signInBackofficeDescription', 'Sign in to reach the backoffice.')}>
+      <form className="grid gap-4" noValidate onSubmit={submit}>
+        {box('email', t('auth.email', 'Email'), { autoComplete: 'email', onChange: (event) => setEmail(event.target.value), type: 'email', value: email })}
+        {box('password', t('auth.password', 'Password'), { autoComplete: 'current-password', onChange: (event) => setPassword(event.target.value), type: 'password', value: password })}
+        {/* `role="alert"` so a refusal is spoken when it appears; nothing moves the focus to it. */}
+        {refusal && (
+          <p className="text-destructive text-sm" role="alert">
+            {refusal}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {pending ? t('auth.signInPending', 'Signing in…') : t('auth.signIn', 'Sign in')}
+        </Button>
+      </form>
+    </AuthFrame>
+  )
+}

package/template/apps/asas-backoffice/src/routes/unauthorized.tsx

@@ -0,0 +1,134 @@
+import { Fragment, useState, type ReactNode } from 'react'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { authArm } from '../api.ts'
+import { AuthFrame, useRefusal } from '../auth-frame.tsx'
+import { documentHead } from '../copy.ts'
+import { NoOrganization } from '../no-organization.tsx'
+import { ImpersonationBar, loadEnterable } from '../screens.tsx'
+import { useCopy } from './__root.tsx'
+
+/**
+ * Where someone sent here from a screen their role does not open goes without being asked: the one screen it does
+ * open. A page refused inside that screen is said instead, and so is an impersonation, whose bar is the way out.
+ */
+export const onwardOf = ({ screens, refused, impersonating }: { screens: readonly { path: string }[]; refused?: unknown; impersonating?: unknown }) =>
+  !refused && !impersonating && screens.length === 1 ? screens[0]!.path : undefined
+
+export const Route = createFileRoute('/unauthorized')({
+  // The path a screen refused; the server only matches it against the build's pages.
+  validateSearch: (search: Record<string, unknown>): { from?: string } => (typeof search.from === 'string' ? { from: search.from } : {}),
+  loaderDeps: ({ search }) => ({ from: search.from }),
+  loader: async ({ deps, context }) => {
+    const entered = await loadEnterable({ data: { from: deps.from, locale: context.locale } })
+    // Carries this page's own path so a visitor whose session expired lands back here after signing in.
+    if (!entered) throw redirect({ to: '/auth/sign-in', search: { redirect: '/unauthorized' } })
+    const onward = onwardOf(entered)
+    if (onward) throw redirect({ href: onward })
+    return entered
+  },
+  // After the loader, so its data's type is inferred before this reads it.
+  head: ({ match, loaderData }) => documentHead(match.context, (t) => (loaderData?.screens.length === 0 ? t('auth.noAccess') : t('auth.unauthorized'))),
+  component: Unauthorized,
+})
+
+function Unauthorized() {
+  const { t } = useCopy()
+  const { screens, refused, email, impersonating, organizations = [], others = [] } = Route.useLoaderData()
+  const refusal = useRefusal()
+  const [switching, setSwitching] = useState<string>()
+  const [failed, setFailed] = useState<string>()
+  // The slug sits beside the name where another membership shares the name.
+  const memberships = [...organizations, ...others]
+  const named = (one: { id: string; name: string; slug?: string }): ReactNode =>
+    one.slug && memberships.some((other) => other.id !== one.id && other.name === one.name) ? (
+      <>
+        {one.name} <span dir="ltr" data-slug="" className="text-muted-foreground text-xs font-normal">{one.slug}</span>
+      </>
+    ) : (
+      one.name
+    )
+  // Each name is isolated so an email or Latin name in an Arabic sentence keeps
+  // its order, and is one inline box that wraps whole, so a long address never
+  // runs past the card on a phone.
+  const whole = 'inline-block max-w-full [overflow-wrap:anywhere]'
+  const said = (text: string | undefined) =>
+    text!.split(/(\{email\}|\{organization\}|\{page\})/).map((part, at) =>
+      part === '{email}' ? <bdi key={at} className={whole}>{email}</bdi>
+      : part === '{organization}' ? <bdi key={at}>{organizations.map((one, index) => <Fragment key={one.id}>{index ? ', ' : ''}<span className={whole}>{named(one)}</span></Fragment>)}</bdi>
+      : part === '{page}' ? <bdi key={at}>{refused?.page}</bdi>
+      : part)
+  const link = 'text-foreground underline underline-offset-4'
+  // Someone who belongs to no organization is shown the ways into one, which the app draws.
+  const unplaced = !refused && !screens.length && !organizations.length && !others.length && !impersonating
+  const screenName = (name: string) => t(`screens.${name}`, name) ?? name
+  return (
+    <AuthFrame
+      title={screens.length ? t('auth.unauthorized', 'Choose where to go') : t('auth.noAccess', 'Your account has no access yet')}
+      description={
+        <span data-no-access={screens.length ? undefined : ''}>
+          {refused
+            ? said(t('auth.unauthorizedPage', 'Your role does not open that page: {page}.'))
+            : screens.length
+              ? t('auth.unauthorizedDescription', 'This page isn\'t part of your account. Where would you like to go?')
+              : organizations.length
+                ? said(t('auth.noAccessDescription', '{email} is a member of {organization} and holds no role that opens a screen here. Ask an administrator of {organization} to give you one.'))
+                : said(t('auth.noOrganization', '{email} belongs to no organization yet.'))}
+        </span>
+      }
+    >
+      <div className="grid gap-4">
+        {/* Stopping impersonation is the way out in place of Sign out. */}
+        {impersonating ? <ImpersonationBar name={impersonating} /> : null}
+        {refused ? (
+          <a className={link} href={refused.screen.path}>
+            {(t('auth.backTo', 'Back to {screen}') ?? 'Back to {screen}').replace('{screen}', () => screenName(refused.screen.name))}
+          </a>
+        ) : screens.length ? (
+          <div className="grid gap-2">
+            {screens.map((screen) => (
+              // An anchor: the path is the screen's own data, not a route the router knows.
+              <Button key={screen.name} nativeButton={false} className="max-sm:h-11" render={<a href={screen.path} />}>
+                {screenName(screen.name)}
+              </Button>
+            ))}
+          </div>
+        ) : unplaced ? (
+          <NoOrganization email={email} />
+        ) : null}
+        {/* So a switch into an organization where the actor holds no role is not a dead end. */}
+        {others.map((one) => (
+          <Button
+            key={one.id}
+            type="button"
+            variant="secondary"
+            data-switch-organization={one.id}
+            // Busy while it runs, so a second press sends nothing.
+            disabled={switching !== undefined}
+            aria-busy={switching === one.id || undefined}
+            onClick={() => {
+              setSwitching(one.id)
+              setFailed(undefined)
+              void authArm('organization/set-active', { organizationId: one.id }).then((answer) => {
+                if (answer.ok) return window.location.assign('/auth/sign-in')
+                setSwitching(undefined)
+                setFailed(refusal(answer, t('auth.requestFailed', 'That request did not work.')))
+              })
+            }}
+          >
+            {/* One box, so the button's gap does not open beside the name. */}
+            <span>{(t('auth.switchTo', 'Switch to {organization}') ?? 'Switch to {organization}').split(/(\{organization\})/).map((part, at) => (part === '{organization}' ? <bdi key={at}>{named(one)}</bdi> : part))}</span>
+          </Button>
+        ))}
+        {failed ? <p role="alert" className="text-destructive text-sm">{failed}</p> : null}
+        {/* `replace`, so Back does not return to the page signed out of. */}
+        {impersonating ? null : (
+          <Button type="button" variant="outline" className="max-sm:h-11" onClick={() => void authArm('sign-out').then(() => window.location.replace('/auth/sign-in'))}>
+            {t('admin.signOut', 'Sign out')}
+          </Button>
+        )}
+      </div>
+    </AuthFrame>
+  )
+}
+// mithaq-admin 0.0.0 81d25978cdacbb38254854b0f64b738946ee27baca06a952aed51d35e6fb10af