Onboarding

import * as React from "react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { NextStepPanel } from "./onboarding-01.client"
import { WORKSPACE_NAME, welcome } from "./onboarding-01.data"

/**
 * The first thing a new member sees: one framed card that greets them by
 * name, says what they walked into — the team, their role, what is already
 * assigned to them — and puts the one step worth doing next beside it, with
 * the link that does it. The steps behind that one wait their turn.
 *
 * A server component: it reads the person and their steps through
 * `./onboarding-01.data` and hands the steps to the island, which only keeps
 * track of which ones were set aside.
 */
export function Onboarding01() {
  const titleId = React.useId()
  const person = welcome()

  return (
    <section
      data-section="onboarding-01"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>
                Welcome to {WORKSPACE_NAME}, {person.firstName}
              </h2>
            </CardTitle>
            <CardDescription>The team you joined, and the one thing worth doing next.</CardDescription>
          </CardHeader>
          <CardContent className="grid p-0 md:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
            <div className="flex flex-col gap-6 border-b p-(--card-spacing) md:border-e md:border-b-0 md:p-6">
              <div className="flex items-center gap-3">
                <Avatar className="size-12">
                  <AvatarImage src={person.face} alt="" />
                  <AvatarFallback>{person.initials}</AvatarFallback>
                </Avatar>
                <div className="flex min-w-0 flex-col">
                  <p className="truncate text-sm font-semibold">{person.name}</p>
                  <p className="text-sm text-muted-foreground">
                    {person.role} since {person.joinedOn}
                  </p>
                </div>
              </div>

              <dl className="flex flex-col divide-y">
                {person.facts.map((fact) => (
                  <div
                    key={fact.label}
                    className="grid gap-1 py-3 first:pt-0 last:pb-0 sm:grid-cols-[8rem_minmax(0,1fr)] sm:gap-3"
                  >
                    <dt className="text-sm text-muted-foreground">{fact.label}</dt>
                    <dd className="flex flex-col gap-0.5">
                      <span className="text-sm font-medium tabular-nums">{fact.value}</span>
                      <span className="text-xs text-pretty text-muted-foreground">{fact.note}</span>
                    </dd>
                  </div>
                ))}
              </dl>
            </div>

            <NextStepPanel steps={person.steps} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default Onboarding01

"use client"

import * as React from "react"
import Link from "next/link"
import {
  ArrowRightIcon,
  CircleCheckIcon,
  FolderKanbanIcon,
  ListTodoIcon,
  ShieldCheckIcon,
  type LucideIcon,
} from "lucide-react"

import { Button, buttonVariants } from "@/components/ui/button"

import type { NextStep, NextStepIcon } from "./onboarding-01.data"

/** Icon vocabulary: a step names its icon, this file draws it. */
const ICONS: Record<NextStepIcon, LucideIcon> = {
  shield: ShieldCheckIcon,
  tasks: ListTodoIcon,
  projects: FolderKanbanIcon,
}

/**
 * One step at a time: the first one still open, why it is worth doing now and
 * the link that goes and does it. "Not now" sets it aside for this visit and
 * brings up the next; when every step has been set aside the panel says so
 * and offers them back. What changed is said in an always-mounted status
 * line, so a reader who is not looking at the panel hears which step came up.
 */
export function NextStepPanel({ steps }: { steps: NextStep[] }) {
  const headingId = React.useId()
  const [skipped, setSkipped] = React.useState<string[]>([])
  const [said, setSaid] = React.useState("")
  const restoreRef = React.useRef<HTMLButtonElement>(null)
  const skipRef = React.useRef<HTMLButtonElement>(null)
  const moved = React.useRef(false)

  const remaining = steps.filter((step) => !skipped.includes(step.id))
  const current = remaining[0]
  const after = remaining[1]

  // Setting the last step aside takes the "Not now" button away, and the
  // focus with it; it lands on the button that brings the steps back. The
  // steps coming back put it on "Not now" again.
  React.useEffect(() => {
    if (!moved.current) return
    moved.current = false
    ;(current ? skipRef.current : restoreRef.current)?.focus()
  }, [current])

  function skip() {
    if (!current) return
    moved.current = !after
    setSkipped((list) => [...list, current.id])
    setSaid(after ? `Set aside for now. Next: ${after.title}.` : "Set aside for now. That was the last step.")
  }

  function restore() {
    if (!steps.length) return
    moved.current = true
    setSkipped([])
    setSaid(`The steps are back. First: ${steps[0].title}.`)
  }

  // Nothing open at all — a second factor on and nothing assigned yet — is its
  // own state, not a list with every step set aside: there is nothing to bring back.
  if (!steps.length)
    return (
      <div data-slot="next-step" className="flex flex-col gap-5 p-(--card-spacing) md:p-6">
        <p className="type-eyebrow">Your next step</p>
        <div className="flex items-start gap-4">
          <span
            aria-hidden="true"
            className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-surface text-foreground ring-1 ring-border"
          >
            <CircleCheckIcon className="size-5" />
          </span>
          <div className="flex min-w-0 flex-col gap-1.5">
            <h3 className="text-base leading-6 font-semibold text-balance">Nothing needs you right now</h3>
            <p className="max-w-prose text-sm text-pretty text-muted-foreground">
              Your second factor is on and nothing is assigned to you yet. New steps show up here as work comes your
              way.
            </p>
          </div>
        </div>
      </div>
    )

  const Icon = current ? ICONS[current.icon] : CircleCheckIcon

  return (
    <div data-slot="next-step" className="flex flex-col gap-5 p-(--card-spacing) md:p-6">
      <div className="flex items-baseline justify-between gap-3">
        <p className="type-eyebrow">Your next step</p>
        {current ? (
          <p className="text-xs text-muted-foreground tabular-nums">
            {steps.indexOf(current) + 1} of {steps.length}
          </p>
        ) : null}
      </div>

      <div className="flex items-start gap-4">
        <span
          aria-hidden="true"
          className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-surface text-foreground ring-1 ring-border"
        >
          <Icon className="size-5" />
        </span>
        <div className="flex min-w-0 flex-col gap-1.5">
          <h3 id={headingId} className="text-base leading-6 font-semibold text-balance">
            {current ? current.title : "Nothing else needs you right now"}
          </h3>
          <p className="max-w-prose text-sm text-pretty text-muted-foreground">
            {current
              ? current.why
              : `You set ${steps.length === 1 ? "the step" : `all ${steps.length} steps`} aside for this visit. They stay in Settings whenever you want them.`}
          </p>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-2 sm:ps-14">
        {current ? (
          <>
            <Link href={current.href} aria-describedby={headingId} className={buttonVariants()}>
              {current.action}
              <ArrowRightIcon data-icon="inline-end" aria-hidden="true" />
            </Link>
            <Button ref={skipRef} type="button" variant="ghost" onClick={skip}>
              Not now
            </Button>
          </>
        ) : (
          <Button ref={restoreRef} type="button" variant="outline" onClick={restore}>
            Show the steps again
          </Button>
        )}
      </div>

      {current && after ? (
        <p className="border-t pt-4 text-xs text-muted-foreground sm:ps-14">
          After this: <span className="text-foreground">{after.title}</span>
        </p>
      ) : null}

      <p role="status" aria-live="polite" className="sr-only">
        {said}
      </p>
    </div>
  )
}

/**
 * What `onboarding-01` reads: the person the welcome is for — the workspace's
 * newest active member — what the workspace already holds for them, and the
 * steps still open to them, each one a question asked of `db`. A step is on
 * the list because the rows say it is undone: two-factor while their member
 * row has it off, their tasks while any assigned to them are open, their
 * projects while those tasks belong to some.
 *
 * Selectors only, reading `db` inside functions on the server. The island
 * takes the steps as plain props and never imports this module.
 */
import { getInitials } from "@/lib/format"
import { db, type Member } from "@/lib/sample-data"

/** The workspace the welcome is written for. */
export const WORKSPACE_NAME = "Northwind Analytics"

/** The icon a step is drawn with: vocabulary the island resolves, never a component here. */
export type NextStepIcon = "shield" | "tasks" | "projects"

/** One thing worth doing next, with where it is done. */
export type NextStep = {
  id: string
  icon: NextStepIcon
  title: string
  /** Why it is worth doing now, read off the rows. */
  why: string
  /** The words on the link that goes and does it. */
  action: string
  href: string
}

/** A figure beside the welcome: what it counts, and what it means for this person. */
export type WelcomeFact = { label: string; value: string; note: string }

export type Welcome = {
  name: string
  firstName: string
  initials: string
  face?: string
  /** The role as the workspace names it: "Member". */
  role: string
  joinedOn: string
  facts: WelcomeFact[]
  steps: NextStep[]
}

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
const SHORT_DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })

const plural = (count: number, one: string, many: string) => `${count} ${count === 1 ? one : many}`

/** Whose first day it is: the active member who joined most recently. The owner founded the place, so never them. */
export function newcomer(): Member {
  const active = db.members.all().filter((member) => member.status === "active" && member.role !== "owner")
  const newest = [...active].sort((a, b) => b.joinedAt.getTime() - a.joinedAt.getTime())[0]
  if (!newest) throw new Error("onboarding-01 welcomes the newest active member, and the workspace has none")
  return newest
}

/** "Farid Meyer and Iris Costa", "A, B and 2 more": a short list of names in a sentence. */
function nameList(names: string[]): string {
  if (names.length <= 2) return names.join(" and ")
  return `${names.slice(0, 2).join(", ")} and ${plural(names.length - 2, "other", "others")}`
}

/**
 * The welcome for the newest member: who they are in the workspace, three
 * facts about the team they joined, and every step still open to them, in
 * the order worth doing them.
 */
export function welcome(): Welcome {
  const person = newcomer()
  const members = db.members.all()
  const active = members.filter((member) => member.status === "active")
  const teammates = active.filter((member) => member.id !== person.id)
  const admins = teammates.filter((member) => member.role === "admin" || member.role === "owner")
  const role = db.roles.all().find((entry) => entry.name.toLowerCase() === person.role)

  const open = db.tasks
    .all()
    .filter((task) => task.assignee === person.id && task.status !== "done")
    .sort((a, b) => a.dueAt.getTime() - b.dueAt.getTime())
  const projects = db.projects.all().filter((project) => open.some((task) => task.projectId === project.id))
  const protectedCount = teammates.filter((member) => member.twoFactor).length

  const steps: NextStep[] = []
  if (!person.twoFactor)
    steps.push({
      id: "two-factor",
      icon: "shield",
      title: "Turn on two-factor authentication",
      why: `${protectedCount} of your ${plural(teammates.length, "teammate", "teammates")} already sign in with a second factor. It takes a minute with an authenticator app.`,
      action: "Turn it on",
      href: "/settings/security",
    })
  if (open.length > 0)
    steps.push({
      id: "tasks",
      icon: "tasks",
      title: `Pick up the ${plural(open.length, "task", "tasks")} assigned to you`,
      why: `The first is due ${SHORT_DAY.format(open[0].dueAt)}: “${open[0].title}”.`,
      action: "Open my tasks",
      href: "/projects/tasks",
    })
  if (projects.length > 0)
    steps.push({
      id: "projects",
      icon: "projects",
      title: `Meet the ${plural(projects.length, "project", "projects")} your work belongs to`,
      why: `${nameList(projects.map((project) => project.name))}: each has its timeline, its files and the people on it.`,
      action: "See my projects",
      href: "/projects",
    })

  return {
    name: person.name,
    firstName: person.name.split(" ")[0],
    initials: getInitials(person.name),
    face: person.avatarUrl,
    role: role?.name ?? person.role,
    joinedOn: DAY.format(person.joinedAt),
    facts: [
      {
        label: "Your team",
        value: plural(teammates.length, "person", "people"),
        note: `${plural(admins.length, "admin looks", "admins look")} after the workspace settings.`,
      },
      {
        label: "Your role",
        value: role?.name ?? person.role,
        note: role?.description ?? "",
      },
      {
        label: "Assigned to you",
        value: plural(open.length, "open task", "open tasks"),
        note: projects.length
          ? `Across ${plural(projects.length, "project", "projects")}.`
          : "Nothing is waiting on you yet.",
      },
    ],
    steps,
  }
}

import * as React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { SetupChecklist } from "./onboarding-02.client"
import { WORKSPACE_NAME, runStep, setupSteps, type StepId } from "./onboarding-02.data"

/**
 * The owner's checklist before the rest of the company is let in: six checks
 * against the workspace as it stands, in one framed card. Each check's circle
 * is filled by the store, never by a click on it; three can be finished from
 * the card, and the other three open the page where they are done.
 *
 * A server component. It reads the checks through `./onboarding-02.data` and
 * hands the island `run`, a server function defined here: it does one step
 * against the rows it re-reads, and answers with the list read again.
 */
export function Onboarding02() {
  const titleId = React.useId()

  async function run(id: StepId) {
    "use server"
    return runStep(id)
  }

  return (
    <section
      data-section="onboarding-02"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Get {WORKSPACE_NAME} ready for everyone</h2>
            </CardTitle>
            <CardDescription>
              Six checks against the workspace as it stands. A step with a button can be finished from here.
            </CardDescription>
          </CardHeader>
          <CardContent className="md:p-6">
            <SetupChecklist initial={setupSteps()} run={run} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default Onboarding02

"use client"

import * as React from "react"
import Link from "next/link"
import { CircleCheckIcon } from "lucide-react"

import { AsyncButton } from "@/components/ui/async-button"
import { buttonVariants } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { OnboardingChecklist } from "@/components/ui/onboarding-checklist"

import type { Result, SetupStep, StepId } from "./onboarding-02.data"

export type RunStep = (id: StepId) => Promise<Result<{ message: string; steps: SetupStep[] }>>

/**
 * The checklist, with nothing to tick by hand: a step's circle fills when the
 * store says it is done. A step that can be done from here carries a button
 * that runs it on the server; the answer brings the whole list back read
 * again, so the bar only moves when the rows did. One that has to be done on
 * its own page carries a link there. What a run did is said in the status
 * line under the list; a refusal opens a danger callout in the same place,
 * naming the step, and the two never share a slot.
 */
export function SetupChecklist({ initial, run }: { initial: SetupStep[]; run: RunStep }) {
  const [steps, setSteps] = React.useState(initial)
  const [said, setSaid] = React.useState("")
  const [refusal, setRefusal] = React.useState<{ step: string; message: string } | null>(null)
  const listRef = React.useRef<HTMLDivElement>(null)
  const landFocus = React.useRef(false)

  // A finished step loses its button, and the focus with it: it goes on to the
  // next thing there is to do, or to the list once nothing is left.
  React.useEffect(() => {
    if (!landFocus.current) return
    landFocus.current = false
    const next = listRef.current?.querySelector<HTMLElement>(
      "[data-slot=onboarding-checklist-action] :is(a, button, [role=link])"
    )
    ;(next ?? listRef.current)?.focus()
  }, [steps])

  async function complete(step: SetupStep) {
    setRefusal(null)
    // The AsyncButton frees itself whatever happens; a call that never reached
    // the server is this card's to report, in the same callout as a refusal.
    let result: Awaited<ReturnType<RunStep>>
    try {
      result = await run(step.id)
    } catch {
      result = { ok: false, error: { code: "network", message: "The step did not reach the server. Try again." } }
    }
    if (!result.ok) {
      setSaid("")
      setRefusal({ step: step.title, message: result.error.message })
      return
    }
    const passing = result.data.steps.filter((entry) => entry.done).length
    landFocus.current = true
    setSteps(result.data.steps)
    setSaid(`${result.data.message} ${passing} of ${result.data.steps.length} checks pass.`)
  }

  function action(step: SetupStep) {
    if (!step.action) return undefined
    // The label alone ("Resend it") says what, not which step: the step's title
    // rides along for a screen reader.
    const which = <span className="sr-only">: {step.title}</span>
    if (step.action.kind === "link")
      return (
        <Link href={step.action.href} className={buttonVariants({ variant: "outline", size: "sm" })}>
          {step.action.label}
          {which}
        </Link>
      )
    return (
      <AsyncButton type="button" variant="outline" size="sm" onClick={() => complete(step)}>
        {step.action.label}
        {which}
      </AsyncButton>
    )
  }

  return (
    <div className="flex flex-col gap-4">
      <div ref={listRef} role="group" tabIndex={-1} aria-label="Setup steps" className="rounded-md outline-none">
        <OnboardingChecklist
          title="Ready for everyone"
          className="gap-4 rounded-none border-0 p-0"
          steps={steps.map((step) => ({
            id: step.id,
            title: step.title,
            description: step.status,
            done: step.done,
            action: action(step),
          }))}
        />
      </div>

      {refusal ? (
        <Callout variant="danger" role="alert" title={`Couldn’t finish “${refusal.step}”`}>
          {refusal.message}
        </Callout>
      ) : null}
      <p role="status" aria-live="polite" className="flex min-h-5 items-start gap-2 text-sm">
        {said ? (
          <>
            <CircleCheckIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-success" />
            {said}
          </>
        ) : null}
      </p>
    </div>
  )
}

/**
 * What `onboarding-02` reads and the three things it can do: six checks the
 * workspace owner runs before everyone else is let in, each answered by the
 * rows as they stand — whether the team has joined, whether an invitation has
 * been left unanswered or has lapsed, whether an API key was made and never
 * used, and how many people sign in with a second factor. Nothing on the list
 * is ticked by hand: a step is done when `db` says so, and `runStep` is what
 * changes `db` for the three that can be done from here.
 *
 * Selectors and the one write, reading `db` inside functions on the server.
 * The island takes the steps as plain props and calls the server function its
 * section hands it; it never imports this module.
 */
import { REFERENCE_DATE, db, type Result } from "@/lib/sample-data"

export type { Result }

/** The workspace the checks are run against. */
export const WORKSPACE_NAME = "Northwind Analytics"

/** How long an invitation may sit unanswered before it is worth sending again, in days. */
export const STALE_DAYS = 3

/** How long a resent invitation stays good for, in days. */
export const RESENT_FOR_DAYS = 14

const DAY_MS = 86_400_000

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })

export type StepId = "workspace" | "team" | "unanswered" | "expired" | "unused-keys" | "two-factor"

/** The steps `runStep` can finish from the card: the rest are done where their work is. */
export const RUNNABLE: readonly StepId[] = ["unanswered", "expired", "unused-keys"]

/** What finishes a step: a press here, or a link to the page where it is done. */
export type StepAction = { kind: "run"; label: string } | { kind: "link"; label: string; href: string }

export type SetupStep = {
  id: StepId
  title: string
  /** Where the workspace stands on it, in a sentence read off the rows. */
  status: string
  done: boolean
  /** Only while the step is undone. */
  action?: StepAction
}

const plural = (count: number, one: string, many: string) => `${count} ${count === 1 ? one : many}`

/** "A and B", "A, B and C". */
function listed(items: string[]): string {
  return items.length <= 1 ? items.join("") : `${items.slice(0, -1).join(", ")} and ${items.at(-1)}`
}

/** The invitations still open that went out more than `STALE_DAYS` ago. */
function unanswered() {
  const cutoff = REFERENCE_DATE.getTime() - STALE_DAYS * DAY_MS
  return db.invitations
    .all()
    .filter((invitation) => invitation.status === "pending" && invitation.sentAt.getTime() < cutoff)
}

const expired = () => db.invitations.all().filter((invitation) => invitation.status === "expired")
const unusedKeys = () => db.apiKeys.all().filter((key) => key.status === "active" && !key.lastUsedAt)

/** The six checks, in the order an owner runs them, each answered by the rows as they are now. */
export function setupSteps(): SetupStep[] {
  const members = db.members.all()
  const owner = members.find((member) => member.role === "owner")
  const active = members.filter((member) => member.status === "active")
  const open = db.invitations.all().filter((invitation) => invitation.status === "pending")
  const waiting = unanswered()
  const lapsed = expired()
  const keys = unusedKeys()
  const protectedCount = active.filter((member) => member.twoFactor).length
  const waited = (sentAt: Date) => Math.floor((REFERENCE_DATE.getTime() - sentAt.getTime()) / DAY_MS)

  return [
    {
      id: "workspace",
      title: "Create the workspace",
      status: owner
        ? `${WORKSPACE_NAME}, set up by ${owner.name} on ${DAY.format(owner.joinedAt)}.`
        : `${WORKSPACE_NAME} has no owner.`,
      done: Boolean(owner),
    },
    {
      id: "team",
      title: "Invite your team",
      status: `${plural(active.length, "person is", "people are")} in the workspace; ${plural(open.length, "invitation is", "invitations are")} still open.`,
      done: active.length > 1,
      ...(active.length > 1 ? {} : { action: { kind: "link" as const, label: "Invite", href: "/settings/members" } }),
    },
    {
      id: "unanswered",
      title: "Nudge the invitations nobody has answered",
      status: waiting.length
        ? `${listed(waiting.map((invitation) => `${invitation.email} has waited ${plural(waited(invitation.sentAt), "day", "days")}`))}.`
        : `Every open invitation went out in the last ${STALE_DAYS} days.`,
      done: waiting.length === 0,
      ...(waiting.length
        ? { action: { kind: "run" as const, label: waiting.length === 1 ? "Resend it" : `Resend ${waiting.length}` } }
        : {}),
    },
    {
      id: "expired",
      title: "Clear out invitations that lapsed",
      status: lapsed.length
        ? `${plural(lapsed.length, "invitation", "invitations")} ran out before anyone answered.`
        : "No invitation has lapsed.",
      done: lapsed.length === 0,
      ...(lapsed.length ? { action: { kind: "run" as const, label: `Remove ${lapsed.length}` } } : {}),
    },
    {
      id: "unused-keys",
      title: "Revoke the API keys nobody has used",
      status: keys.length
        ? `${listed(keys.map((key) => `“${key.name}”`))} ${keys.length === 1 ? "was" : "were"} made and never used.`
        : "Every active key has been used.",
      done: keys.length === 0,
      ...(keys.length ? { action: { kind: "run" as const, label: `Revoke ${keys.length}` } } : {}),
    },
    {
      id: "two-factor",
      title: "Have everyone sign in with two-factor",
      status: `${protectedCount} of ${plural(active.length, "person has", "people have")} a second factor on.`,
      done: protectedCount === active.length,
      ...(protectedCount === active.length
        ? {}
        : { action: { kind: "link" as const, label: "Require it", href: "/settings/security" } }),
    },
  ]
}

const refuse = (code: string, message: string): Result<never> => ({ ok: false, error: { code, message } })

/**
 * Does one step from the card, re-reading the rows it acts on rather than
 * trusting the list the reader was shown: an invitation someone else resent,
 * or a key someone used in the meantime, is left alone. Answers with what it
 * did and the whole list read again, so the progress the reader sees is the
 * store's. The id arrives as the page sent it, so anything that is not one of
 * the three runnable ids — whatever its shape — is refused.
 */
export async function runStep(id: unknown): Promise<Result<{ message: string; steps: SetupStep[] }>> {
  if (typeof id !== "string" || !RUNNABLE.includes(id as StepId))
    return refuse("not_here", "That step is done on its own page, not from this card.")

  if (id === "unanswered") {
    const waiting = unanswered()
    if (!waiting.length)
      return refuse(
        "nothing_to_do",
        `Nothing to resend: every open invitation went out in the last ${STALE_DAYS} days.`
      )
    for (const invitation of waiting) {
      const saved = await db.invitations.update(invitation.id, {
        sentAt: REFERENCE_DATE,
        expiresAt: new Date(REFERENCE_DATE.getTime() + RESENT_FOR_DAYS * DAY_MS),
      })
      if (!saved.ok) return saved
    }
    return {
      ok: true,
      data: {
        message: `Resent ${plural(waiting.length, "invitation", "invitations")}, good for ${RESENT_FOR_DAYS} more days.`,
        steps: setupSteps(),
      },
    }
  }

  if (id === "expired") {
    const lapsed = expired()
    if (!lapsed.length) return refuse("nothing_to_do", "Nothing to remove: no invitation has lapsed.")
    for (const invitation of lapsed) {
      const saved = await db.invitations.update(invitation.id, { status: "revoked" })
      if (!saved.ok) return saved
    }
    return {
      ok: true,
      data: {
        message: `Removed ${plural(lapsed.length, "lapsed invitation", "lapsed invitations")}.`,
        steps: setupSteps(),
      },
    }
  }

  const keys = unusedKeys()
  if (!keys.length) return refuse("nothing_to_do", "Nothing to revoke: every active key has been used.")
  for (const key of keys) {
    const saved = await db.apiKeys.update(key.id, { status: "revoked" })
    if (!saved.ok) return saved
  }
  return {
    ok: true,
    data: { message: `Revoked ${plural(keys.length, "key", "keys")} nobody had used.`, steps: setupSteps() },
  }
}

import * as React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { WorkspaceSetup } from "./onboarding-03.client"
import {
  APP_HOST,
  MAX_INVITES,
  checkAddress,
  createWorkspace,
  inviteRoles,
  type NewWorkspace,
} from "./onboarding-03.data"

/**
 * A new workspace in three steps, in one framed card: its name and the
 * address that follows the name, the people to invite with a role each, and
 * a review before anything is created. The stepper sits across the top of
 * the sheet; the step under it is a form of its own.
 *
 * A server component. It reads the roles through `./onboarding-03.data`,
 * draws what each one can do, and hands the island two server functions
 * defined here: `check`, which asks whether an address is free, and `create`,
 * which checks everything again before it answers.
 */
export function Onboarding03() {
  const titleId = React.useId()
  const roles = inviteRoles()

  async function check(slug: string) {
    "use server"
    return checkAddress(slug)
  }

  async function create(input: NewWorkspace) {
    "use server"
    return createWorkspace(input)
  }

  return (
    <section
      data-section="onboarding-03"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        {/* A wizard reads at a wizard's width: the card holds to one comfortable
            column and sits in the middle of the band. */}
        <Card className="mx-auto max-w-3xl">
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Set up a workspace</h2>
            </CardTitle>
            <CardDescription>Three steps. Everything you type stays put when you go back.</CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <WorkspaceSetup
              host={APP_HOST}
              roles={roles}
              maxInvites={MAX_INVITES}
              check={check}
              create={create}
              roleGuide={
                <dl className="grid max-w-2xl gap-3 border-t pt-4 text-xs sm:grid-cols-3">
                  {roles.map((role) => (
                    <div key={role.value} className="flex flex-col gap-0.5">
                      <dt className="font-medium">{role.label}</dt>
                      <dd className="text-pretty text-muted-foreground">{role.description}</dd>
                    </div>
                  ))}
                </dl>
              }
            />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default Onboarding03

"use client"

import * as React from "react"
import Link from "next/link"
import { CircleCheckIcon, PlusIcon, XIcon } from "lucide-react"

import { isEmail } from "@/lib/validation"
import { Button, buttonVariants } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { Spinner } from "@/components/ui/spinner"
import { Stepper, StepperActions, type Step } from "@/components/ui/stepper"

import type { Created, Invite, InviteRole, NewWorkspace, Result } from "./onboarding-03.data"

const STEPS: Step[] = [
  { id: "name", title: "Name", description: "What to call it" },
  { id: "members", title: "Members", description: "Who will use it", optional: true },
  { id: "review", title: "Review", description: "Check and create" },
]

const HEADINGS = ["Name the workspace", "Invite the people who will use it", "Check it, then create it"]

const SLUG = /^[a-z](?:[a-z0-9]|-(?=[a-z0-9])){2,31}$/
const SLUG_RULE = "Use 3 to 32 lowercase letters, numbers and dashes, starting with a letter."

/** "Northwind Labs" → "northwind-labs": the address a name suggests, until the reader writes their own. */
function suggest(name: string): string {
  const slug = name
    .normalize("NFD")
    .replace(/[̀-ͯ]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
  return slug.replace(/^-+/, "").slice(0, 32).replace(/-+$/, "")
}

/** Which step holds the field a message is about. */
const stepOf = (field: string) => (field === "name" || field === "slug" ? 0 : field.startsWith("invite-") ? 1 : 2)

const plural = (count: number) => `${count} ${count === 1 ? "invitation is" : "invitations are"}`

type Row = Invite & { key: number }

export type WorkspaceSetupProps = {
  host: string
  roles: InviteRole[]
  /** What each role can do, drawn by the section under the invitations. */
  roleGuide?: React.ReactNode
  /** How many people the list can hold; the server refuses more. */
  maxInvites?: number
  /** Whether an address can be had; asked when the first step is left. */
  check: (slug: string) => Promise<Result<{ slug: string }>>
  create: (input: NewWorkspace) => Promise<Result<Created>>
}

/**
 * Three steps — the name and its address, the people to invite, a review —
 * with everything the reader typed held here, so Back and a press on a
 * finished step never lose a word. The step being worked on is the stepper's
 * `aria-current="step"`; each move puts the focus on the step's heading and
 * says where the reader is in the status line. The address is checked against
 * the host when the first step is left, and everything is checked again when
 * the workspace is created: a refusal about a field takes the reader back to
 * the step that holds it, with the message under the field.
 */
export function WorkspaceSetup({ host, roles, roleGuide, maxInvites = 50, check, create }: WorkspaceSetupProps) {
  const uid = React.useId()
  const id = (field: string) => `${uid}-${field}`
  const [step, setStep] = React.useState(0)
  const [name, setName] = React.useState("")
  const [ownSlug, setOwnSlug] = React.useState<string | null>(null)
  const [rows, setRows] = React.useState<Row[]>([{ key: 0, email: "", role: "member" }])
  const [errors, setErrors] = React.useState<Record<string, string>>({})
  const [refusal, setRefusal] = React.useState<{ title: string; message: string } | null>(null)
  const [pending, setPending] = React.useState(false)
  const [created, setCreated] = React.useState<Created | null>(null)
  const [said, setSaid] = React.useState("")
  const heading = React.useRef<HTMLHeadingElement>(null)
  const focusNext = React.useRef<string | null>(null)
  const nextKey = React.useRef(1)

  const slug = ownSlug ?? suggest(name)
  const invites = rows.filter((row) => row.email.trim())
  const roleName = (value: Invite["role"]) => roles.find((role) => role.value === value)?.label ?? value

  React.useEffect(() => {
    const target = focusNext.current
    if (!target) return
    focusNext.current = null
    ;(target === "heading" ? heading.current : document.getElementById(id(target)))?.focus()
  })

  function go(to: number) {
    setStep(to)
    setRefusal(null)
    focusNext.current = "heading"
    setSaid(`Step ${to + 1} of ${STEPS.length}: ${STEPS[to].title}.`)
  }

  /** Shows what was found under the fields it is about and puts the focus on the first; true when anything was. */
  function refuse(found: Record<string, string>) {
    setErrors(found)
    const first = Object.keys(found)[0]
    if (first) focusNext.current = first
    return Boolean(first)
  }

  function problems(at: number): Record<string, string> {
    const found: Record<string, string> = {}
    if (at === 0 && !name.trim()) found.name = "Give the workspace a name."
    if (at === 0 && !SLUG.test(slug)) found.slug = SLUG_RULE
    const seen = new Set<string>()
    if (at === 1)
      rows.forEach((row, index) => {
        const email = row.email.trim().toLowerCase()
        if (email && (email.length > 254 || !isEmail(email)))
          found[`invite-${index}`] = "Enter an address like name@example.com."
        else if (email && seen.has(email)) found[`invite-${index}`] = "That address is on the list already."
        seen.add(email)
      })
    return found
  }

  async function next() {
    if (pending || refuse(problems(step))) return
    setRefusal(null)
    // A call that never reaches the server is refused like any other, in the
    // callout, and the button is freed whatever happened.
    if (step === 0) {
      setPending(true)
      let checked: Result<{ slug: string }>
      try {
        checked = await check(slug)
      } catch {
        const message = "The check did not reach the server. Try again."
        return setRefusal({ title: "The address was not checked", message })
      } finally {
        setPending(false)
      }
      if (!checked.ok) return refuse({ [checked.error.field ?? "slug"]: checked.error.message })
    }
    if (step < 2) return go(step + 1)

    setPending(true)
    let result: Result<Created>
    try {
      result = await create({ name, slug, invites: rows.map(({ email, role }) => ({ email, role })) })
    } catch {
      const message = "The request did not reach the server. Try again."
      return setRefusal({ title: "The workspace was not created", message })
    } finally {
      setPending(false)
    }
    if (result.ok) {
      setCreated(result.data)
      focusNext.current = "heading"
      const count = result.data.invites.length
      return setSaid(
        `${result.data.name} is ready at ${result.data.url}.${count ? ` ${plural(count)} on the way.` : ""}`
      )
    }
    const field = result.error.field
    if (!field) return setRefusal({ title: "The workspace was not created", message: result.error.message })
    go(stepOf(field))
    refuse({ [field]: result.error.message })
  }

  function edit(key: number, patch: Partial<Invite>, field?: string) {
    setRows((list) => list.map((row) => (row.key === key ? { ...row, ...patch } : row)))
    if (field && errors[field])
      setErrors((all) => Object.fromEntries(Object.entries(all).filter(([key]) => key !== field)))
  }

  /** Takes a row off the list; the focus goes to the row that takes its place, or the one before. */
  function remove(index: number) {
    const gone = rows[index]
    const left = rows.length - 1
    setRows((list) => list.filter((row) => row.key !== gone.key))
    setErrors({})
    focusNext.current = `invite-${Math.min(index, left - 1)}`
    setSaid(
      `Removed ${gone.email.trim() || `person ${index + 1}`}. ${left} ${left === 1 ? "person" : "people"} left on the list.`
    )
  }

  /** What a control needs to be found, marked and described: its id, its state and the words that say why. */
  const wire = (field: string, hint = false) => ({
    id: id(field),
    "aria-invalid": errors[field] ? (true as const) : undefined,
    "aria-describedby":
      [hint ? id(`${field}-hint`) : "", errors[field] ? id(`${field}-error`) : ""].filter(Boolean).join(" ") ||
      undefined,
  })
  const error = (field: string) =>
    errors[field] ? <FieldError id={id(`${field}-error`)}>{errors[field]}</FieldError> : null
  const required = <span className="font-normal text-muted-foreground">(required)</span>

  const done = created ? (
    <div className="flex flex-col items-start gap-4 p-(--card-spacing) md:p-6">
      <CircleCheckIcon aria-hidden="true" className="size-6 text-success" />
      <h3 ref={heading} tabIndex={-1} className="text-base font-semibold outline-none">
        {created.name} is ready
      </h3>
      <p className="max-w-prose text-sm text-muted-foreground">
        It lives at <span className="font-mono text-foreground">{created.url}</span>.{" "}
        {created.invites.length
          ? `${plural(created.invites.length)} on the way; each is good for 14 days.`
          : "Invite people from Settings whenever you are ready."}
      </p>
      <Link href={`/${created.slug}`} className={buttonVariants()}>
        Open {created.name}
      </Link>
    </div>
  ) : null

  return (
    <div data-slot="workspace-setup">
      {done ?? (
        <form
          noValidate
          onSubmit={(event) => {
            event.preventDefault()
            void next()
          }}
        >
          <nav aria-label="Workspace setup progress" className="border-b p-(--card-spacing) md:px-6">
            <Stepper steps={STEPS} activeStep={step} onStepClick={go} />
          </nav>

          <div className="flex flex-col gap-5 p-(--card-spacing) md:p-6">
            <h3 ref={heading} tabIndex={-1} className="text-sm font-semibold outline-none">
              {HEADINGS[step]}
            </h3>

            {step === 0 ? (
              <div className="grid max-w-xl gap-5">
                <Field data-invalid={Boolean(errors.name) || undefined}>
                  <FieldLabel htmlFor={id("name")}>Workspace name {required}</FieldLabel>
                  <Input
                    {...wire("name")}
                    value={name}
                    required
                    autoComplete="organization"
                    placeholder="Northwind Labs"
                    onChange={(event) => {
                      setName(event.target.value)
                      setErrors({})
                    }}
                  />
                  {error("name")}
                </Field>
                <Field data-invalid={Boolean(errors.slug) || undefined}>
                  <FieldLabel htmlFor={id("slug")}>Workspace URL {required}</FieldLabel>
                  <InputGroup>
                    <InputGroupAddon>
                      <InputGroupText className="font-mono">{host}/</InputGroupText>
                    </InputGroupAddon>
                    <InputGroupInput
                      {...wire("slug", true)}
                      value={slug}
                      required
                      spellCheck={false}
                      autoComplete="off"
                      className="font-mono"
                      placeholder="northwind-labs"
                      onChange={(event) => {
                        setOwnSlug(event.target.value.toLowerCase())
                        setErrors({})
                      }}
                    />
                  </InputGroup>
                  <FieldDescription id={id("slug-hint")}>
                    {ownSlug === null
                      ? "Follows the name until you change it."
                      : "Yours now; the name no longer changes it."}{" "}
                    {SLUG_RULE}
                  </FieldDescription>
                  {error("slug")}
                </Field>
              </div>
            ) : null}

            {step === 1 ? (
              <div className="flex flex-col gap-4">
                <ul className="flex max-w-2xl flex-col gap-3">
                  {rows.map((row, index) => (
                    <li
                      key={row.key}
                      className="grid grid-cols-[minmax(0,1fr)_auto] gap-2 sm:grid-cols-[minmax(0,1fr)_9rem_auto]"
                    >
                      <Input
                        {...wire(`invite-${index}`)}
                        type="email"
                        value={row.email}
                        placeholder="name@example.com"
                        autoComplete="off"
                        aria-label={`Email address, person ${index + 1}`}
                        onChange={(event) => edit(row.key, { email: event.target.value }, `invite-${index}`)}
                      />
                      <NativeSelect
                        className="order-3 w-full max-sm:col-span-2 sm:order-none"
                        value={row.role}
                        aria-label={`Role, person ${index + 1}`}
                        onChange={(event) => edit(row.key, { role: event.target.value as Invite["role"] })}
                      >
                        {roles.map((role) => (
                          <NativeSelectOption key={role.value} value={role.value}>
                            {role.label}
                          </NativeSelectOption>
                        ))}
                      </NativeSelect>
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        aria-label={`Remove person ${index + 1}`}
                        disabled={rows.length === 1}
                        onClick={() => remove(index)}
                      >
                        <XIcon aria-hidden="true" />
                      </Button>
                      {errors[`invite-${index}`] ? (
                        <div className="order-4 col-span-full sm:order-none">{error(`invite-${index}`)}</div>
                      ) : null}
                    </li>
                  ))}
                </ul>
                {rows.length < maxInvites ? (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="self-start"
                    onClick={() => {
                      focusNext.current = `invite-${rows.length}`
                      setRows((list) => [...list, { key: nextKey.current++, email: "", role: "member" }])
                    }}
                  >
                    <PlusIcon aria-hidden="true" data-icon="inline-start" />
                    Add another person
                  </Button>
                ) : (
                  <p className="text-sm text-muted-foreground">
                    A new workspace starts with {maxInvites} invitations at most. Invite the rest from Settings.
                  </p>
                )}
                {roleGuide}
              </div>
            ) : null}

            {step === 2 ? (
              <dl className="grid max-w-2xl divide-y text-sm">
                {[
                  ["Name", name.trim()],
                  ["Address", <span key="url" className="font-mono">{`${host}/${slug}`}</span>],
                  [
                    "Invitations",
                    invites.length
                      ? invites.map((row) => `${row.email.trim()} (${roleName(row.role)})`).join(", ")
                      : "Nobody yet: invite people from Settings later.",
                  ],
                ].map(([term, value]) => (
                  <div
                    key={String(term)}
                    className="grid gap-1 py-3 first:pt-0 sm:grid-cols-[7rem_minmax(0,1fr)] sm:gap-3"
                  >
                    <dt className="text-muted-foreground">{term}</dt>
                    <dd className="break-words">{value}</dd>
                  </div>
                ))}
              </dl>
            ) : null}

            {refusal ? (
              <Callout variant="danger" role="alert" title={refusal.title}>
                {refusal.message}
              </Callout>
            ) : null}

            <StepperActions className="border-t pt-4" onBack={step > 0 ? () => go(step - 1) : undefined}>
              {/* A real submit, so Enter in a field moves on as the button does. */}
              <Button type="submit" disabled={pending} focusableWhenDisabled aria-busy={pending || undefined}>
                {pending ? <Spinner aria-hidden="true" /> : null}
                {step === 2 ? "Create workspace" : step === 1 && !invites.length ? "Skip for now" : "Continue"}
              </Button>
            </StepperActions>
          </div>
        </form>
      )}
      {/* Always mounted, so each move and the creation itself are announced as they happen. */}
      <p role="status" aria-live="polite" className="sr-only">
        {said}
      </p>
    </div>
  )
}

/**
 * What `onboarding-03` reads and checks: the roles a new workspace can hand
 * out, as `db.roles` describes them, and the addresses already taken on the
 * host — every company on the books has its own workspace there, so its slug
 * is spoken for. `checkAddress` and `createWorkspace` are what the section's
 * server functions call: every rule the island checks as the reader types is
 * checked again here, against the input as it arrives, because the island's
 * checks are a courtesy and these are the ones that count.
 *
 * Selectors and checks, reading `db` inside functions on the server. The
 * island takes the roles as plain props and never imports this module.
 */
import { isEmail } from "@/lib/validation"
import { db, type Result } from "@/lib/sample-data"

export type { Result }

/** Where every workspace lives: `app.northwind.example/<slug>`. */
export const APP_HOST = "app.northwind.example"

/** A role a new member can be given: the three `db.roles` a workspace invites with. */
export type InviteRole = { value: "admin" | "member" | "viewer"; label: string; description: string }

export type Invite = { email: string; role: InviteRole["value"] }

export type NewWorkspace = { name: string; slug: string; invites: Invite[] }

/** What a created workspace says back: where it lives and who is on their way. */
export type Created = { name: string; slug: string; url: string; invites: Invite[] }

/** Lowercase letters, numbers and single dashes, starting with a letter: 3 to 32 of them. */
const SLUG = /^[a-z](?:[a-z0-9]|-(?=[a-z0-9])){2,31}$/

const INVITABLE: InviteRole["value"][] = ["admin", "member", "viewer"]

/** The most invitations a new workspace starts with; the rest are sent from Settings. */
export const MAX_INVITES = 50

/**
 * The first path segments the app keeps for its own pages. A workspace at one
 * of them would sit where `app.northwind.example/settings` or `/projects` already is,
 * so no workspace can have them.
 */
export const RESERVED_SLUGS: readonly string[] = [
  "account",
  "admin",
  "api",
  "billing",
  "forgot-password",
  "help",
  "invitations",
  "members",
  "new",
  "projects",
  "settings",
  "sign-in",
  "sign-out",
  "sign-up",
]

/** The longest an address can be (RFC 5321), checked before any pattern sees it. */
const MAX_EMAIL = 254

const isRecord = (value: unknown): value is Record<string, unknown> =>
  typeof value === "object" && value !== null && !Array.isArray(value)

/** The roles on offer, in order of reach, each with what `db.roles` says it can do. */
export function inviteRoles(): InviteRole[] {
  const roles = db.roles.all()
  return INVITABLE.flatMap((value) => {
    const role = roles.find((entry) => entry.name.toLowerCase() === value)
    return role ? [{ value, label: role.name, description: role.description }] : []
  })
}

/** "Blue Harbor Labs" → "blue-harbor-labs": how a company's name becomes its address. */
function slugOf(company: string): string {
  return company
    .normalize("NFD")
    .replace(/[̀-ͯ]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
}

/** Every address already spoken for: one per company on the books. */
export function takenSlugs(): Set<string> {
  return new Set(db.customers.all().map((customer) => slugOf(customer.company)))
}

const refuse = (code: string, message: string, field?: string): Result<never> => ({
  ok: false,
  error: { code, message, ...(field ? { field } : {}) },
})

/**
 * Whether an address can be had: a string, well formed, not one of the app's
 * own pages, and nobody's already. Suggests the first free one when it is
 * taken. The slug arrives as the page sent it, so its type and length are
 * checked before the pattern sees it.
 */
export async function checkAddress(slug: unknown): Promise<Result<{ slug: string }>> {
  if (typeof slug !== "string" || slug.length > 32 || !SLUG.test(slug))
    return refuse("invalid_input", "Use 3 to 32 lowercase letters, numbers and dashes, starting with a letter.", "slug")
  if (RESERVED_SLUGS.includes(slug))
    return refuse("reserved", `${APP_HOST}/${slug} is one of Northwind's own pages. Pick another address.`, "slug")
  const taken = takenSlugs()
  if (!taken.has(slug)) return { ok: true, data: { slug } }
  let suffix = 2
  while (taken.has(`${slug}-${suffix}`)) suffix++
  return refuse("taken", `${APP_HOST}/${slug} is taken. ${APP_HOST}/${slug}-${suffix} is free.`, "slug")
}

/**
 * Creates the workspace from what the reader typed, checking all of it again:
 * the name, the address, and every invitation — a malformed address or one
 * listed twice is refused on the row that holds it (`field` is `invite-<n>`),
 * and a role the workspace does not hand out is refused outright. The input
 * arrives as the page sent it, so every part of it is checked for its shape
 * first: anything else is refused as a Result, never thrown.
 */
export async function createWorkspace(input: unknown): Promise<Result<Created>> {
  if (!isRecord(input) || !Array.isArray(input.invites))
    return refuse("invalid_input", "Send a name, an address and a list of invitations.")
  if (typeof input.name !== "string") return refuse("invalid_input", "Give the workspace a name.", "name")
  const name = input.name.trim()
  if (!name) return refuse("invalid_input", "Give the workspace a name.", "name")
  if (name.length > 48) return refuse("invalid_input", "Keep the name to 48 characters.", "name")

  const address = await checkAddress(input.slug)
  if (!address.ok) return address
  const { slug } = address.data

  if (input.invites.length > MAX_INVITES)
    return refuse(
      "too_many",
      `A new workspace starts with ${MAX_INVITES} invitations at most. Invite the rest from Settings once it exists.`
    )
  const seen = new Set<string>()
  const invites: Invite[] = []
  for (const [index, invite] of input.invites.entries()) {
    const field = `invite-${index}`
    if (!isRecord(invite) || typeof invite.email !== "string")
      return refuse("invalid_input", "Enter an address like name@example.com.", field)
    const email = invite.email.trim().toLowerCase()
    if (!email) continue
    if (email.length > MAX_EMAIL || !isEmail(email))
      return refuse("invalid_input", "Enter an address like name@example.com.", field)
    if (seen.has(email)) return refuse("duplicate", "That address is on the list already.", field)
    const role = INVITABLE.find((value) => value === invite.role)
    if (!role) return refuse("invalid_input", "Pick a role for this person.", field)
    seen.add(email)
    invites.push({ email, role })
  }

  // Nothing is stored here: this is where your own store creates the workspace
  // row and sends the invitations. The demo answers as if it had.
  return { ok: true, data: { name, slug, url: `${APP_HOST}/${slug}`, invites } }
}