@kelpie/ui 0.1.0

package/src/pages/auth/ResetPasswordPage.tsx

@@ -0,0 +1,124 @@
+import { MINIMUM_PASSWORD_LENGTH } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link, useSearchParams } from 'react-router'
+
+import { useConfirmPasswordReset } from '../../api/resources/session.ts'
+import { ErrorPanel } from '../../components/QueryState.tsx'
+import { SubmitButton, TextField } from './AuthForm.tsx'
+import { AuthLayout } from './AuthLayout.tsx'
+
+/**
+ * Where a reset email lands: `/reset-password?token=…`.
+ *
+ * The mockup has no page for this, because a mockup never sent the email. The
+ * token is in the URL rather than typed, so the form asks for the new password
+ * and nothing else.
+ *
+ * Success does not sign anyone in. The service ends every session the account
+ * had, which is the point of a reset when the account was stolen, so the only
+ * honest next step is the sign-in form.
+ */
+export function ResetPasswordPage(): React.JSX.Element {
+  const [searchParameters] = useSearchParams()
+  const token = searchParameters.get('token') ?? ''
+  const confirm = useConfirmPasswordReset()
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [localError, setLocalError] = useState<string | null>(null)
+  const [done, setDone] = useState(false)
+
+  const backToSignIn = (
+    <Link to="/login" className="font-medium text-accent hover:underline">
+      Back to sign in
+    </Link>
+  )
+
+  if (token.length === 0) {
+    return (
+      <AuthLayout title="This link is incomplete" footer={backToSignIn}>
+        <p className="mt-4 text-[13px] text-ink-muted">
+          It carries no reset token. Ask for a new link from{' '}
+          <Link to="/forgot-password" className="font-medium text-accent hover:underline">
+            Forgot password
+          </Link>
+          .
+        </p>
+      </AuthLayout>
+    )
+  }
+
+  if (done) {
+    return (
+      <AuthLayout title="Password changed" footer={backToSignIn}>
+        <p className="mt-4 text-[13px] text-ink-muted">
+          Every device that was signed in to this account has been signed out. Sign in again with
+          the new password.
+        </p>
+      </AuthLayout>
+    )
+  }
+
+  /** The two rules the browser can decide on its own, before spending the token. */
+  function localProblem(): string | null {
+    if (password.length < MINIMUM_PASSWORD_LENGTH) {
+      return `Password must be at least ${String(MINIMUM_PASSWORD_LENGTH)} characters.`
+    }
+
+    return password === confirmation ? null : 'Password and confirmation do not match.'
+  }
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    const problem = localProblem()
+
+    setLocalError(problem)
+
+    if (problem !== null) {
+      return
+    }
+
+    confirm
+      .runAsync({ token, password })
+      .then(() => {
+        setDone(true)
+      })
+      .catch(() => undefined)
+  }
+
+  return (
+    <AuthLayout
+      title="Choose a new password"
+      description="This link works once."
+      footer={backToSignIn}
+    >
+      <form onSubmit={submit} className="mt-5 space-y-3">
+        <TextField
+          label="New password"
+          type="password"
+          value={password}
+          onChange={setPassword}
+          autoComplete="new-password"
+          hint={`At least ${String(MINIMUM_PASSWORD_LENGTH)} characters.`}
+          required
+        />
+        <TextField
+          label="Confirm new password"
+          type="password"
+          value={confirmation}
+          onChange={setConfirmation}
+          autoComplete="new-password"
+          required
+        />
+        {localError !== null && <p className="text-[12px] text-danger">{localError}</p>}
+        {confirm.error !== null && <ErrorPanel error={confirm.error} />}
+        <SubmitButton
+          label="Set new password"
+          pendingLabel="Saving…"
+          isPending={confirm.isPending}
+        />
+      </form>
+    </AuthLayout>
+  )
+}

package/src/pages/auth/SignInPage.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link, useNavigate, useSearchParams } from 'react-router'
+
+import { useLogIn } from '../../api/resources/session.ts'
+import { ErrorPanel } from '../../components/QueryState.tsx'
+import { SubmitButton, TextField } from './AuthForm.tsx'
+import { AuthLayout } from './AuthLayout.tsx'
+
+/**
+ * Sign in, against `POST /v1/auth/login`.
+ *
+ * Where the browser goes afterwards is not always the app. An invitation link
+ * sends its token through `?next=`, and dropping it would land the invitee on
+ * People with the invitation still unaccepted.
+ */
+
+/**
+ * Only a path within this app. An absolute URL in `?next=` would turn the
+ * sign-in form into an open redirect.
+ */
+function safeNext(value: string | null): string {
+  return value !== null && value.startsWith('/') && !value.startsWith('//') ? value : '/dashboard'
+}
+
+export function SignInPage(): React.JSX.Element {
+  const navigate = useNavigate()
+  const [searchParameters] = useSearchParams()
+  const logIn = useLogIn()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const next = safeNext(searchParameters.get('next'))
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    logIn
+      .runAsync({ email: email.trim(), password })
+      .then(() => navigate(next, { replace: true }))
+      .catch(() => undefined)
+  }
+
+  return (
+    <AuthLayout
+      title="Sign in"
+      footer={
+        <div className="flex flex-col gap-1.5">
+          <Link to="/forgot-password" className="font-medium text-accent hover:underline">
+            Forgot password?
+          </Link>
+          <span className="text-ink-muted">
+            No account?{' '}
+            <Link to="/signup" className="font-medium text-accent hover:underline">
+              Sign up
+            </Link>
+          </span>
+        </div>
+      }
+    >
+      <form onSubmit={submit} className="mt-5 space-y-3">
+        <TextField
+          label="Email"
+          type="email"
+          value={email}
+          onChange={setEmail}
+          autoComplete="email"
+          required
+        />
+        <TextField
+          label="Password"
+          type="password"
+          value={password}
+          onChange={setPassword}
+          autoComplete="current-password"
+          required
+        />
+        {logIn.error !== null && <ErrorPanel error={logIn.error} />}
+        <SubmitButton label="Sign in" pendingLabel="Signing in…" isPending={logIn.isPending} />
+      </form>
+    </AuthLayout>
+  )
+}

package/src/pages/auth/SignUpPage.tsx

@@ -0,0 +1,93 @@
+import { MINIMUM_PASSWORD_LENGTH } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link, useNavigate } from 'react-router'
+
+import { useSignUp } from '../../api/resources/session.ts'
+import { ErrorPanel } from '../../components/QueryState.tsx'
+import { SubmitButton, TextField } from './AuthForm.tsx'
+import { AuthLayout } from './AuthLayout.tsx'
+
+/**
+ * Creating an account, against `POST /v1/auth/signup`.
+ *
+ * Signup makes the user and nothing else, per `onboarding.md`, so success lands
+ * on the first onboarding step rather than in the app. The response sets the
+ * session cookie, which is why the next page can already write.
+ *
+ * The mockup collected this into `sessionStorage` and committed the lot at the
+ * end of the wizard. Here each step commits as it is finished: a draft account
+ * held in the browser is one an interrupted signup loses.
+ */
+export function SignUpPage(): React.JSX.Element {
+  const navigate = useNavigate()
+  const signUp = useSignUp()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [localError, setLocalError] = useState<string | null>(null)
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    // Checked here as well as by the service so the rule is stated before a
+    // submission rather than as a rejection afterwards.
+    if (password.length < MINIMUM_PASSWORD_LENGTH) {
+      setLocalError(`Password must be at least ${String(MINIMUM_PASSWORD_LENGTH)} characters.`)
+
+      return
+    }
+
+    setLocalError(null)
+
+    signUp
+      .runAsync({ name: name.trim(), email: email.trim(), password })
+      .then(() => navigate('/onboarding/workspace', { replace: true }))
+      .catch(() => undefined)
+  }
+
+  return (
+    <AuthLayout
+      title="Create account"
+      description="Next you will create a workspace for your company."
+      footer={
+        <span className="text-ink-muted">
+          Already have an account?{' '}
+          <Link to="/login" className="font-medium text-accent hover:underline">
+            Sign in
+          </Link>
+        </span>
+      }
+    >
+      <form onSubmit={submit} className="mt-5 space-y-3">
+        <TextField
+          label="Your name"
+          value={name}
+          onChange={setName}
+          autoComplete="name"
+          required
+        />
+        <TextField
+          label="Email"
+          type="email"
+          value={email}
+          onChange={setEmail}
+          autoComplete="email"
+          required
+        />
+        <TextField
+          label="Password"
+          type="password"
+          value={password}
+          onChange={setPassword}
+          autoComplete="new-password"
+          hint={`At least ${String(MINIMUM_PASSWORD_LENGTH)} characters.`}
+          required
+        />
+        {localError !== null && <p className="text-[12px] text-danger">{localError}</p>}
+        {signUp.error !== null && <ErrorPanel error={signUp.error} />}
+        <SubmitButton label="Continue" pendingLabel="Creating…" isPending={signUp.isPending} />
+      </form>
+    </AuthLayout>
+  )
+}

package/src/pages/candidateFields.tsx

@@ -0,0 +1,175 @@
+import {
+  CANDIDATE_STATUS_LABELS,
+  CANDIDATE_STATUSES,
+  FIRST_INTERVIEW_STAGE,
+  INTERVIEW_STAGE_LABELS,
+  INTERVIEW_STAGES,
+} from '@kelpie/schemas'
+import type { Candidate, CandidateInput, CandidateStatus, InterviewStage } from '@kelpie/schemas'
+import { useState } from 'react'
+
+import { usePatch } from '../api/resource.ts'
+import type { PatchResult } from '../api/resource.ts'
+import { usePeople } from '../api/resources/people.ts'
+import { useUpdateCandidate } from '../api/resources/candidates.ts'
+import { Chip } from '../components/Chip.tsx'
+import type { ChipTone } from '../components/Chip.tsx'
+import { EntitySearch } from '../components/EntitySearch.tsx'
+import { InlineEdit } from '../components/InlineEdit.tsx'
+import { ErrorPanel } from '../components/QueryState.tsx'
+
+/**
+ * The three editable fields of a candidacy, shared by the Role page and the
+ * person's Hiring tab.
+ *
+ * Both pages draw them differently — a row of chips on one, a labelled grid on
+ * the other, which is how the mockup draws them — so what is shared is the
+ * editing rather than the layout.
+ *
+ * None of these knows the rule tying stage to status. Setting a status away from
+ * `in_process` clears the stage server-side and setting it back restores the
+ * first one, so a page sends the one field the user touched and renders whatever
+ * comes back.
+ */
+
+const STATUS_OPTIONS = CANDIDATE_STATUSES.map((status) => ({
+  value: status,
+  label: CANDIDATE_STATUS_LABELS[status],
+}))
+
+const STAGE_OPTIONS = INTERVIEW_STAGES.map((stage) => ({
+  value: stage,
+  label: INTERVIEW_STAGE_LABELS[stage],
+}))
+
+const STATUS_TONES: Readonly<Record<CandidateStatus, ChipTone>> = {
+  hired: 'success',
+  in_process: 'accent',
+  nurture: 'warning',
+  passed: 'danger',
+  withdrawn: 'danger',
+}
+
+function useCandidatePatch(candidate: Candidate): PatchResult<CandidateInput> {
+  return usePatch(useUpdateCandidate, candidate)
+}
+
+export interface CandidateFieldProps {
+  readonly candidate: Candidate
+  /** Rendered instead of the chip where the surrounding page uses plain text. */
+  readonly plain?: boolean
+}
+
+export function CandidateStatusField({
+  candidate,
+  plain = false,
+}: CandidateFieldProps): React.JSX.Element {
+  const { patch, error } = useCandidatePatch(candidate)
+
+  return (
+    <div className="inline-flex flex-col gap-1">
+      <InlineEdit
+        value={candidate.status}
+        onChange={(value) => {
+          patch({ status: value as CandidateStatus })
+        }}
+        options={STATUS_OPTIONS}
+        display={
+          plain ? (
+            <span className="px-1 text-[13px]">{CANDIDATE_STATUS_LABELS[candidate.status]}</span>
+          ) : (
+            <Chip tone={STATUS_TONES[candidate.status]}>
+              {CANDIDATE_STATUS_LABELS[candidate.status]}
+            </Chip>
+          )
+        }
+        displayClassName={plain ? 'not-italic text-[13px]' : 'not-italic inline-flex'}
+        className={plain ? '' : '!w-auto'}
+      />
+      {error !== null && <ErrorPanel error={error} />}
+    </div>
+  )
+}
+
+export function CandidateStageField({
+  candidate,
+  plain = false,
+}: CandidateFieldProps): React.JSX.Element {
+  const { patch, error } = useCandidatePatch(candidate)
+  const stage = candidate.interviewStage ?? FIRST_INTERVIEW_STAGE
+
+  return (
+    <div className="inline-flex flex-col gap-1">
+      <InlineEdit
+        value={stage}
+        onChange={(value) => {
+          patch({ interviewStage: value as InterviewStage })
+        }}
+        options={STAGE_OPTIONS}
+        display={
+          plain ? (
+            <span className="px-1 text-[13px]">{INTERVIEW_STAGE_LABELS[stage]}</span>
+          ) : (
+            <span className="text-[12px] text-ink-muted">{INTERVIEW_STAGE_LABELS[stage]}</span>
+          )
+        }
+        displayClassName={plain ? 'not-italic text-[13px]' : 'not-italic'}
+        className={plain ? '' : '!w-auto'}
+      />
+      {error !== null && <ErrorPanel error={error} />}
+    </div>
+  )
+}
+
+export interface CandidateReferrerFieldProps {
+  readonly candidate: Candidate
+  /** The referrer's name when it is already on the page, so the picker shows it. */
+  readonly referrerName: string | undefined
+}
+
+/**
+ * Who vouched for this candidate.
+ *
+ * The candidate themselves is filtered out of the options: the API refuses a
+ * self-referral with a `422`, and offering a choice that cannot be made is worse
+ * than not offering it.
+ */
+export function CandidateReferrerField({
+  candidate,
+  referrerName,
+}: CandidateReferrerFieldProps): React.JSX.Element {
+  const { patch, error } = useCandidatePatch(candidate)
+  const [search, setSearch] = useState('')
+  const searchable = usePeople({ term: search.trim().length > 0 ? search.trim() : undefined })
+
+  const options = [
+    ...(candidate.referrerPersonId === null
+      ? []
+      : [{ id: candidate.referrerPersonId, label: referrerName ?? candidate.referrerPersonId }]),
+    ...searchable.records
+      .filter(
+        (person) => person.id !== candidate.personId && person.id !== candidate.referrerPersonId,
+      )
+      .map((person) => ({
+        id: person.id,
+        label: person.name,
+        meta: person.email ?? undefined,
+      })),
+  ]
+
+  return (
+    <div className="flex flex-col gap-1">
+      <EntitySearch
+        options={options}
+        value={candidate.referrerPersonId ?? ''}
+        onChange={(referrerPersonId) => {
+          patch({ referrerPersonId: referrerPersonId.length > 0 ? referrerPersonId : null })
+        }}
+        onQueryChange={setSearch}
+        placeholder="Search people…"
+        emptyMessage="No people match"
+      />
+      {error !== null && <ErrorPanel error={error} />}
+    </div>
+  )
+}

package/src/pages/dashboard/DashboardPage.tsx

@@ -0,0 +1,108 @@
+import type { Dashboard } from '@kelpie/schemas'
+
+import { useDashboard } from '../../api/resources/dashboard.ts'
+import { useMembers } from '../../api/resources/members.ts'
+import { useWorkspace } from '../../api/resources/workspace.ts'
+import { AgentTasks } from '../../components/AgentTasks.tsx'
+import { PageHeader } from '../../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { attentionRows, briefLines } from './attention.ts'
+import { ActivityFeed, AttentionList, DecisionsList, NotesList } from './sections.tsx'
+
+/**
+ * The workspace home: what is open, what is late, and what happened lately.
+ *
+ * One request, not seven. `GET /v1/dashboard` answers the whole page, with the
+ * name of every record it points at already resolved, so this file holds no
+ * fetching beyond the two directories the shell needs anyway — the workspace,
+ * for its name, and the team, to turn an author id into a person.
+ */
+
+/** The heading date, written in the workspace's own day rather than the browser's. */
+function briefHeading(dashboard: Dashboard): string {
+  return new Intl.DateTimeFormat('en-AU', {
+    weekday: 'long',
+    month: 'short',
+    day: 'numeric',
+    timeZone: dashboard.timezone,
+  }).format(dashboard.generatedAt)
+}
+
+export function DashboardPage(): React.JSX.Element {
+  const { dashboard, isLoading, error } = useDashboard()
+  const { workspace } = useWorkspace()
+  const { nameById } = useMembers()
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader title="Dashboard" description="What needs attention across this workspace." />
+
+      {error !== null && <ErrorPanel error={error} />}
+      {isLoading && <LoadingPanel label="Loading the workspace…" />}
+
+      {dashboard !== undefined && (
+        <DashboardBody
+          dashboard={dashboard}
+          workspaceId={workspace?.id}
+          workspaceName={workspace?.name ?? 'This workspace'}
+          nameById={nameById}
+        />
+      )}
+    </div>
+  )
+}
+
+function DashboardBody({
+  dashboard,
+  workspaceId,
+  workspaceName,
+  nameById,
+}: {
+  readonly dashboard: Dashboard
+  readonly workspaceId: string | undefined
+  readonly workspaceName: string
+  readonly nameById: ReadonlyMap<string, string>
+}): React.JSX.Element {
+  // `generatedAt` rather than a fresh `new Date()`: every relative time on the
+  // page is then measured from the same instant the counts were, so a tab left
+  // open does not creep towards "2 hours ago" on rows that never moved.
+  const now = dashboard.generatedAt
+
+  return (
+    <div>
+      <section className="mb-8 border-b border-border pb-6">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <p className="text-[11px] text-ink-faint">Daily brief</p>
+            <h2 className="mt-0.5 text-[15px] font-semibold tracking-tight text-ink">
+              {workspaceName} · {briefHeading(dashboard)}
+            </h2>
+            <p className="mt-1 text-[12px] text-ink-muted">
+              Assembled from overdue Plans, partnership touchpoints, and contacts going cold.
+            </p>
+          </div>
+          {workspaceId !== undefined && (
+            <AgentTasks targetType="workspace" targetId={workspaceId} targetLabel={workspaceName} />
+          )}
+        </div>
+        <ul className="mt-4 space-y-1.5">
+          {briefLines(dashboard).map((line) => (
+            <li key={line} className="flex gap-2 text-[13px] leading-relaxed text-ink">
+              <span className="mt-[9px] h-1 w-1 shrink-0 rounded-full bg-accent" />
+              <span>{line}</span>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <div className="mb-8 grid gap-8 lg:grid-cols-2">
+        <AttentionList rows={attentionRows(dashboard)} />
+        <ActivityFeed activities={dashboard.recentActivity} nameById={nameById} now={now} />
+      </div>
+      <div className="grid gap-8 lg:grid-cols-2">
+        <NotesList notes={dashboard.recentNotes} nameById={nameById} now={now} />
+        <DecisionsList decisions={dashboard.recentDecisions} nameById={nameById} />
+      </div>
+    </div>
+  )
+}