create-mithaq 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,145 @@
+// 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
+}
+export type MemberValues = {
+  id: string
+  updatedAt: Date
+  createdAt: Date
+  organizationId: string
+  userId: string
+  role: string
+}
+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
+}
+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'][]
+}
+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 Values = {
+  user: UserValues
+  organization: OrganizationValues
+  member: MemberValues
+  courses: CoursesValues
+  sessions: SessionsValues
+  enrollments: EnrollmentsValues
+  tags: TagsValues
+  roles: RolesValues
+  memberRoles: MemberRolesValues
+  localUsers: LocalUsersValues
+}
+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'
+}
+export type ScreenClient = Client<Pages>

package/template/apps/asas-platform/src/routes/(screens)/platform.$.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 './platform/files.ts'
+
+export const Route = createFileRoute('/(screens)/platform/$')({
+  validateSearch: askedFor,
+  loader: ({ location, params }) => pageLoader({ screen: 'platform', files, path: params._splat ?? '', query: location.search, href: location.href }),
+  head: ({ loaderData, match }) => pageHead(loaderData, match.context),
+  notFoundComponent: () => <ScreenNotFound files={files} screen={'platform'} />,
+  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-platform/src/routes/(screens)/platform.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 './platform/files.ts'
+
+export const Route = createFileRoute('/(screens)/platform/')({
+  loader: ({ location }) => pageLoader({ screen: 'platform', 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-platform/src/routes/(screens)/platform.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 './platform/files.ts'
+
+export const Route = createFileRoute('/(screens)/platform')({
+  loader: ({ location }) => frameLoader({ screen: 'platform', files, href: location.href }),
+  component: () => (
+    <ScreenFrame files={files} data={Route.useLoaderData()}>
+      <Outlet />
+    </ScreenFrame>
+  ),
+})

package/template/apps/asas-platform/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 '../components/mithaq/nav.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: 'platform.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-platform/src/routes/api/$.ts

@@ -0,0 +1,30 @@
+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 } from 'asas'
+
+// The platform reads every organization: a read of a kayan asks `tenant: 'all'`, which the runner
+// grants platform 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}`))
+
+const acrossTenants = async (request: Request) => {
+  const url = new URL(request.url)
+  if (!reads.has(url.pathname)) return request
+  url.searchParams.set('tenant', 'all')
+  const body = request.method === 'GET' || request.method === 'HEAD' ? undefined : await request.text()
+  return new Request(url, { method: request.method, headers: request.headers, body })
+}
+
+// A write whose `Origin` is not this app's own is refused: the data plug checks no origin and leans on
+// the session cookie's `SameSite=Lax`, which a sibling origin of the same site passes.
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      ANY: async ({ request }) =>
+        request.method === 'GET' || request.method === 'HEAD' || request.headers.get('origin') === new URL(request.url).origin
+          ? asas.handler(await acrossTenants(request))
+          : new Response('Forbidden', { status: 403 }),
+    },
+  },
+})

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

@@ -0,0 +1,72 @@
+import { useState, type ComponentProps } from 'react'
+import { createFileRoute, 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 { useCopy } from './__root.tsx'
+import { wanted } from '../redirect.ts'
+
+export const Route = createFileRoute('/auth/sign-in')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.signIn')),
+  validateSearch: redirectSearch,
+  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({ to: wanted({ asked: search.redirect, home: (await authGate()).home.path }) })
+  }
+
+  return (
+    <AuthFrame title={t('auth.signIn', 'Sign in')} description={t('auth.signInPlatformDescription', 'Sign in to reach the platform.')}>
+      <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-platform/src/routes/unauthorized.tsx

@@ -0,0 +1,122 @@
+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 { ImpersonationBar, loadEnterable } from '../screens.tsx'
+import { useCopy } from './__root.tsx'
+
+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' } })
+    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'
+  const screenName = (name: string) => t(`screens.${name}`, name) ?? name
+  return (
+    <AuthFrame
+      title={screens.length ? t('auth.unauthorized', 'Not for your role') : 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', 'Your role does not open that screen. These are the screens it opens:')
+              : 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. Ask an administrator to invite you.'))}
+        </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 ? (
+          <ul className="grid gap-2">
+            {screens.map((screen) => (
+              <li key={screen.name}>
+                {/* An anchor: the path is the screen's own data, not a route the router knows. */}
+                <a className={link} href={screen.path}>
+                  {screenName(screen.name)}
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : 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 b06d8d335d306c07556f8f2b81fba20ba7ded198 3c5c304b3892c56759bf780f155ef3aa154ce3cc954e3d240b3537cdd97da735

package/template/apps/asas-platform/src/screen-form.tsx

@@ -0,0 +1,34 @@
+import { useBlocker, useRouter } from '@tanstack/react-router'
+import { useState, type ReactElement } from 'react'
+import { Form, type FormProps } from './components/mithaq/form.tsx'
+
+/**
+ * A kayan's form on a screen's page. A create moves to the new row's edit page, a delete to the list.
+ * While the form holds a change the router blocks navigation and the form asks its discard question.
+ */
+export function ScreenForm({ edit, list, ...props }: Omit<FormProps, 'onDone' | 'onDirty' | 'onCancel' | 'blocked'> & {
+  /** The href of a row's edit page, or nothing where the kayan has none. */
+  edit: (id: string) => string | undefined
+  /** The href of the kayan's list, or nothing where it has none. */
+  list?: string
+}): ReactElement {
+  const router = useRouter()
+  const [dirty, setDirty] = useState(false)
+  const blocker = useBlocker({ shouldBlockFn: () => dirty, withResolver: true, enableBeforeUnload: false })
+  // `ignoreBlocker`: the form reports clean only on the render after the save.
+  const go = (href: string | undefined) => void (href ? router.navigate({ href, ignoreBlocker: true }) : router.invalidate())
+  const landing = (row: unknown, effect?: string) => {
+    const id = (row as { id?: unknown } | null | undefined)?.id
+    return effect === 'delete' ? list : effect === 'create' && id !== undefined ? edit(String(id)) : undefined
+  }
+  return (
+    <Form
+      {...props}
+      onDirty={setDirty}
+      onDone={(row, effect) => go(landing(row, effect))}
+      onCancel={list ? () => go(list) : undefined}
+      blocked={blocker.status === 'blocked' ? blocker : undefined}
+    />
+  )
+}
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 7284b5e97770fd0c395fafa0b7459cab4ceb458e4bc982dc8233894126116170