refactor: separate components

frontend/src/app/AuthenticatedApp.tsx

@@ -5,7 +5,7 @@ import { AppFooter } from '../components/layout/AppFooter'
 import { GoGuessHeader } from '../components/layout/GoGuessHeader'
 import { WorkspaceUtilities } from '../components/layout/WorkspaceUtilities'
 import { NotFound } from '../components/ui/NotFound'
-import { CalendarPage, InboxPage, ScheduledInterviewPage } from '../features/interviews'
+import { InboxPage, ScheduledInterviewPage } from '../features/interviews'
 import { CreateJobPage, JobDetailPage, JobsPage } from '../features/jobs'
 import {
   CreateParticipantPage,
@@ -13,7 +13,7 @@ import {
   ParticipantsPage,
 } from '../features/participants'
 import { QuestionLibraryPage, QuestionPage } from '../features/questions'
-import { ProfilePage, UsersPage } from '../features/users'
+import {CalendarPage, ProfilePage, UsersPage} from '../features/users'
 
 export function AuthenticatedApp({ onLogout }: { onLogout: () => void }) {
   const [open, setOpen] = useState(false)

frontend/src/components/actions/errorMessage.ts

@@ -5,3 +5,9 @@ export function errorMessage(error: unknown) {
     ? error.message
     : 'Something went wrong'
 }
+
+export function message(error: unknown) {
+  return error instanceof ApiError || error instanceof Error
+      ? error.message
+      : 'Something went wrong'
+}

frontend/src/components/actions/index.ts

@@ -1,4 +1,4 @@
 export { useAuthSession } from './Account'
 export { ErrorAlert } from './ErrorAlert'
-export { errorMessage } from './errorMessage'
+export { errorMessage, message } from './errorMessage'
 export { Loading } from './Loading'

frontend/src/components/layout/SideBar.tsx

@@ -43,7 +43,6 @@ export function SideBar({
           icon={<CircleHelp size={20} />}
           close={close}
         />
-        <NavItem to="/calendar" label="Calendar" icon={<CalendarDays size={20} />} close={close} />
         <NavItem to="/users" label="Users" icon={<UserRound size={20} />} close={close} />
       </nav>
       <div className="sidebar-bottom">

frontend/src/components/layout/WorkspaceUtilities.tsx

@@ -1,14 +1,18 @@
-import { Inbox } from 'lucide-react'
+import {CalendarDays, Inbox, Mail} from 'lucide-react'
-import { NavLink } from 'react-router-dom'
+import {NavLink} from 'react-router-dom'
-import type { User } from '../../types'
+import type {User} from '../../types'
 
-export function WorkspaceUtilities({ user }: { user: User | null }) {
+export function WorkspaceUtilities({user}: { user: User | null }) {
     const profileLabel = user?.displayName || user?.email || 'Profile'
     return (
         <nav className="workspace-utilities" aria-label="Account navigation">
             <NavLink className="utility-link" to="/inbox">
-        <Inbox size={18} aria-hidden="true" />
+                <Mail size={18} aria-hidden="true"/>
-        <span>Inbox</span>
+                <span>Invitations</span>
+            </NavLink>
+            <NavLink className="utility-link" to="/calendar">
+                <CalendarDays size={18} aria-hidden="true"/>
+                <span>Calendar</span>
             </NavLink>
             <NavLink className="utility-link profile-utility" to="/profile">
                 <span className="avatar tiny" aria-hidden="true">

frontend/src/components/ui/PageHeader.tsx

@@ -15,7 +15,6 @@ export function PageHeader({
     <header className="page-header">
       <div>
         <span className="eyebrow">{eyebrow}</span>
-        <h1>{title}</h1>
         {description && <p>{description}</p>}
       </div>
       {action}

frontend/src/config/navigation.ts

@@ -15,13 +15,13 @@ export const footerLinkGroups: FooterLinkGroup[] = [
       { label: 'Jobs', href: '/jobs' },
       { label: 'Participants', href: '/participants' },
       { label: 'Question library', href: '/questions' },
-      { label: 'Calendar', href: '/calendar' },
     ],
   },
   {
     title: 'Useful links',
     links: [
       { label: 'Your inbox', href: '/inbox' },
+      { label: 'Calendar', href: '/calendar' },
       { label: 'Your profile', href: '/profile' },
       { label: 'Interview team', href: '/users' },
     ],

frontend/src/features/interviews/index.ts

@@ -1,2 +1,2 @@
-export { CalendarPage, InboxPage, ParticipantMeetingPage, ScheduledInterviewPage } from './pages'
+export { InboxPage, ParticipantMeetingPage, ScheduledInterviewPage } from './pages'
 export { ScheduleInterviewForm } from './components/ScheduleInterviewForm'

frontend/src/features/interviews/pages.tsx

@@ -1,16 +1,11 @@
-import { Check, Copy, UsersRound, X } from 'lucide-react'
+import {Check, Copy, UsersRound, X} from 'lucide-react'
-import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import {type FormEvent, useEffect, useState} from 'react'
-import { Link, useParams } from 'react-router-dom'
+import {Link, useParams} from 'react-router-dom'
-import { api, ApiError } from '../../api/client'
+import {api} from '../../api/client'
-import type { ParticipantMeeting, ScheduledInterview } from '../../types'
+import type {ParticipantMeeting, ScheduledInterview} from '../../types'
-import { ErrorAlert, Loading } from '../../components/ui/AsyncState'
+import {ErrorAlert, Loading} from '../../components/ui/AsyncState'
-import { DateAndPlace, InterviewCard } from './components/InterviewCard'
+import {DateAndPlace, InterviewCard} from './components/InterviewCard'
-
+import {message} from "../../components/actions";
-function message(error: unknown) {
-  return error instanceof ApiError || error instanceof Error
-    ? error.message
-    : 'Something went wrong'
-}
 
 export function InboxPage() {
     const [items, setItems] = useState<ScheduledInterview[]>([])
@@ -44,9 +39,9 @@ export function InboxPage() {
                     <p>Respond to interview invitations assigned to you.</p>
                 </div>
             </header>
-      {error && <ErrorAlert error={error} />}
+            {error && <ErrorAlert error={error}/>}
             {loading ? (
-        <Loading />
+                <Loading/>
             ) : (
                 <section className="meeting-list">
                     {items.map((item) => (
@@ -57,14 +52,14 @@ export function InboxPage() {
                                     type="button"
                                     onClick={() => void respond(item.id, 'accepted')}
                                 >
-                  <Check size={17} /> Accept
+                                    <Check size={17}/> Accept
                                 </button>
                                 <button
                                     className="button secondary danger"
                                     type="button"
                                     onClick={() => void respond(item.id, 'declined')}
                                 >
-                  <X size={17} /> Decline
+                                    <X size={17}/> Decline
                                 </button>
                             </div>
                         </InterviewCard>
@@ -81,62 +76,6 @@ export function InboxPage() {
     )
 }
 
-export function CalendarPage() {
-  const [items, setItems] = useState<ScheduledInterview[]>([])
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(true)
-  useEffect(() => {
-    void api
-      .calendar()
-      .then(setItems)
-      .catch((value) => setError(message(value)))
-      .finally(() => setLoading(false))
-  }, [])
-  const groups = useMemo(() => {
-    return [...items]
-      .sort((a, b) => a.startsAt.localeCompare(b.startsAt))
-      .reduce<Record<string, ScheduledInterview[]>>((result, item) => {
-        const key = new Date(item.startsAt).toLocaleDateString(undefined, {
-          weekday: 'long',
-          month: 'long',
-          day: 'numeric',
-          year: 'numeric',
-        })
-        ;(result[key] ??= []).push(item)
-        return result
-      }, {})
-  }, [items])
-  return (
-    <>
-      <header className="page-header">
-        <div>
-          <span className="eyebrow">Schedule</span>
-          <h1>Calendar</h1>
-          <p>Your accepted and organized interviews, grouped by date.</p>
-        </div>
-      </header>
-      {error && <ErrorAlert error={error} />}
-      {loading ? (
-        <Loading />
-      ) : (
-        Object.entries(groups).map(([date, interviews]) => (
-          <section className="calendar-day" key={date}>
-            <h2>{date}</h2>
-            <div className="meeting-list">
-              {interviews.map((item) => (
-                <InterviewCard interview={item} key={item.id}>
-                  <Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
-                    Open session
-                  </Link>
-                </InterviewCard>
-              ))}
-            </div>
-          </section>
-        ))
-      )}
-    </>
-  )
-}
 
 export function ScheduledInterviewPage() {
     const id = Number(useParams().id)
@@ -180,7 +119,7 @@ export function ScheduledInterviewPage() {
                     if (event.type === 'document.updated') {
                         setDocument(event.sharedDocument)
                         setInterview((current) =>
-              current ? { ...current, sharedDocument: event.sharedDocument } : current,
+                            current ? {...current, sharedDocument: event.sharedDocument} : current,
                         )
                     }
                 },
@@ -241,8 +180,8 @@ export function ScheduledInterviewPage() {
         }
     }
 
-  if (!interview && !error) return <Loading />
+    if (!interview && !error) return <Loading/>
-  if (!interview) return <ErrorAlert error={error} />
+    if (!interview) return <ErrorAlert error={error}/>
     return (
         <>
             <Link className="back-link" to="/calendar">
@@ -256,8 +195,8 @@ export function ScheduledInterviewPage() {
                 </div>
                 <span className={`status status-${interview.status}`}>{interview.status}</span>
             </header>
-      {error && <ErrorAlert error={error} />}
+            {error && <ErrorAlert error={error}/>}
-      <DateAndPlace interview={interview} />
+            <DateAndPlace interview={interview}/>
             <div className="session-actions">
                 <button
                     className="button secondary"
@@ -265,7 +204,7 @@ export function ScheduledInterviewPage() {
                     onClick={() => void copyParticipantLink(interview.candidateUrl)}
                     aria-label="Copy participant interview link"
                 >
-          {linkCopied ? <Check size={17} /> : <Copy size={17} />}
+                    {linkCopied ? <Check size={17}/> : <Copy size={17}/>}
                     {linkCopied ? 'Link copied' : 'Copy participant link'}
                 </button>
                 {interview.status !== 'started' && interview.status !== 'completed' && (
@@ -356,7 +295,7 @@ export function ScheduledInterviewPage() {
                 <div className="user-list">
                     {interview.attendees.map((attendee) => (
                         <article className="user-row" key={attendee.userId}>
-              <UsersRound />
+                            <UsersRound/>
                             <div>
                                 <strong>{attendee.displayName}</strong>
                                 <small>{attendee.email}</small>
@@ -385,7 +324,7 @@ export function ParticipantMeetingPage() {
                     if (event.type !== 'document.updated') return
                     latestDocument = event.sharedDocument
                     setMeeting((current) =>
-            current ? { ...current, sharedDocument: event.sharedDocument } : current,
+                        current ? {...current, sharedDocument: event.sharedDocument} : current,
                     )
                 },
                 controller.signal,
@@ -427,12 +366,12 @@ export function ParticipantMeetingPage() {
             </header>
             {!meeting && !error && (
                 <section className="interview-card">
-          <Loading />
+                    <Loading/>
                 </section>
             )}
             {error && (
                 <section className="interview-card">
-          <ErrorAlert error={error} />
+                    <ErrorAlert error={error}/>
                 </section>
             )}
             {meeting && (
@@ -441,7 +380,7 @@ export function ParticipantMeetingPage() {
                     <h1>{meeting.jobTitle}</h1>
                     <p>Welcome, {meeting.participantName}.</p>
                     <span className={`status status-${meeting.status}`}>{meeting.status}</span>
-          <DateAndPlace interview={meeting} />
+                    <DateAndPlace interview={meeting}/>
                     <section className="public-document" aria-labelledby="shared-document-title">
                         <h2 id="shared-document-title">Shared documentation</h2>
                         <div>{meeting.sharedDocument || 'No shared documentation has been added yet.'}</div>

frontend/src/features/jobs/pages.tsx

@@ -12,30 +12,22 @@ import {
     Trash2,
     X,
 } from 'lucide-react'
-import { type FormEvent, type ReactNode, useEffect, useState } from 'react'
+import {type ReactNode, SyntheticEvent, useEffect, useState} from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import {Link, useNavigate, useParams} from 'react-router-dom'
-import { api } from '../../api/client'
+import {api} from '../../api/client'
-import { ErrorAlert, errorMessage, Loading } from '../../components/actions'
+import {ErrorAlert, errorMessage, Loading} from '../../components/actions'
-import { FormActions, FormField } from '../../components/form'
+import {FormActions, FormField} from '../../components/form'
-import { EmptyState, Fact, Metric, StatusBadge } from '../../components/ui/Display'
+import {EmptyState, Fact, Metric, StatusBadge} from '../../components/ui/Display'
-import { NotFound } from '../../components/ui/NotFound'
+import {NotFound} from '../../components/ui/NotFound'
-import { PageHeader } from '../../components/ui/PageHeader'
+import {PageHeader} from '../../components/ui/PageHeader'
-import { useData } from '../../app/useData'
+import {useData} from '../../app/useData'
-import { CodePanel } from '../assessments/CodeReview'
+import {CodePanel} from '../assessments/CodeReview'
-import { ScheduleInterviewForm } from '../interviews'
+import {ScheduleInterviewForm} from '../interviews'
-import { Avatar, SkillList } from '../participants'
+import {Avatar, SkillList} from '../participants'
-import type {
+import type {CandidateMatch, Interview, Invitation, Job, JobStatus, Question, ScheduledInterview,} from '../../types'
-  CandidateMatch,
-  Interview,
-  Invitation,
-  Job,
-  JobStatus,
-  Question,
-  ScheduledInterview,
-} from '../../types'
 
 export function JobsPage() {
-  const { jobs, loading, error, reload } = useData()
+    const {jobs, loading, error, reload, participants} = useData()
     const [query, setQuery] = useState('')
     const filtered = jobs.filter((job) =>
         `${job.title} ${job.position} ${job.seniority} ${job.labels.join(' ')}`
@@ -50,14 +42,14 @@ export function JobsPage() {
                 description="Create roles, build assessments, and compare candidate fit."
                 action={
                     <Link to="/jobs/new" className="button primary">
-            <Plus size={18} /> Create job
+                        <Plus size={18}/> Create job
                     </Link>
                 }
             />
-      {error && <ErrorAlert message={error} retry={reload} />}
+            {error && <ErrorAlert message={error} retry={reload}/>}
             <section className="metrics">
-        <Metric label="Job postings" value={String(jobs.length)} />
+                <Metric label="Job postings" value={String(jobs.length)}/>
-        <Metric label="Participants" value="—" />
+                <Metric label="Participants" value={String(participants.length)}/>
                 <Metric
                     label="Assessments"
                     value={String(jobs.reduce((sum, job) => sum + job.questions.length, 0))}
@@ -66,7 +58,7 @@ export function JobsPage() {
             <section className="card">
                 <div className="toolbar">
                     <label className="search-field">
-            <Search size={18} />
+                        <Search size={18}/>
                         <span className="sr-only">Search jobs</span>
                         <input
                             value={query}
@@ -77,7 +69,7 @@ export function JobsPage() {
                     <span className="result-count">{filtered.length} jobs</span>
                 </div>
                 {loading ? (
-          <Loading />
+                    <Loading/>
                 ) : (
                     <div className="table-wrap">
                         <table>
@@ -103,11 +95,11 @@ export function JobsPage() {
                                         <small>{job.labels.join(' · ') || 'No labels'}</small>
                                     </td>
                                     <td>
-                      <StatusBadge value={job.seniority} />
+                                        <StatusBadge value={job.seniority}/>
                                     </td>
                                     <td>{job.position}</td>
                                     <td>
-                      <StatusBadge value={job.status} />
+                                        <StatusBadge value={job.status}/>
                                     </td>
                                     <td>{job.questions.length}</td>
                                     <td>
@@ -116,7 +108,7 @@ export function JobsPage() {
                                             to={`/jobs/${job.id}`}
                                             aria-label={`View ${job.title}`}
                                         >
-                        <ChevronRight />
+                                            <ChevronRight/>
                                         </Link>
                                     </td>
                                 </tr>
@@ -126,7 +118,7 @@ export function JobsPage() {
                     </div>
                 )}
                 {!loading && !filtered.length && !error && (
-          <EmptyState title="No jobs found" description="Create a job or adjust your search." />
+                    <EmptyState title="No jobs found" description="Create a job or adjust your search."/>
                 )}
             </section>
         </>
@@ -191,14 +183,14 @@ export function JobDetailPage() {
             active = false
         }
     }, [id])
-  if (loading) return <Loading />
+    if (loading) return <Loading/>
-  if (error) return <ErrorAlert message={error} retry={load} />
+    if (error) return <ErrorAlert message={error} retry={load}/>
-  if (!job) return <NotFound />
+    if (!job) return <NotFound/>
 
     return (
         <>
             <Link className="back-link" to="/jobs">
-        <ArrowLeft size={17} /> All jobs
+                <ArrowLeft size={17}/> All jobs
             </Link>
             <PageHeader
                 eyebrow={`${job.seniority} · ${job.position}`}
@@ -230,24 +222,24 @@ export function JobDetailPage() {
                         <h2>About the role</h2>
                         <p>{job.description}</p>
                         <h3>Required skills</h3>
-            <SkillList skills={job.requiredSkills} />
+                        <SkillList skills={job.requiredSkills}/>
                         <h3>Additional skills</h3>
-            <SkillList skills={job.additionalSkills} />
+                        <SkillList skills={job.additionalSkills}/>
                     </section>
                     <aside className="card facts">
                         <h2>Job details</h2>
-            <Fact label="Seniority" value={job.seniority} />
+                        <Fact label="Seniority" value={job.seniority}/>
-            <Fact label="Position" value={job.position} />
+                        <Fact label="Position" value={job.position}/>
-            <Fact label="Status" value={job.status} />
+                        <Fact label="Status" value={job.status}/>
-            <Fact label="Duration" value={`${job.durationMinutes} minutes`} />
+                        <Fact label="Duration" value={`${job.durationMinutes} minutes`}/>
-            <Fact label="Labels" value={job.labels.join(', ') || 'None'} />
+                        <Fact label="Labels" value={job.labels.join(', ') || 'None'}/>
-            <Fact label="Created" value={new Date(job.createdAt).toLocaleDateString()} />
+                        <Fact label="Created" value={new Date(job.createdAt).toLocaleDateString()}/>
-            <JobSettings job={job} onUpdated={setJob} />
+                        <JobSettings job={job} onUpdated={setJob}/>
                     </aside>
                 </div>
             )}
-      {tab === 'questions' && <JobQuestionsView job={job} onUpdated={setJob} />}
+            {tab === 'questions' && <JobQuestionsView job={job} onUpdated={setJob}/>}
-      {tab === 'candidates' && <CandidateMatchView matches={matches} />}
+            {tab === 'candidates' && <CandidateMatchView matches={matches}/>}
             {tab === 'invitations' && (
                 <InvitationsView
                     job={job}
@@ -267,18 +259,18 @@ export function JobDetailPage() {
     )
 }
 
-function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => void }) {
+function JobSettings({job, onUpdated}: { job: Job; onUpdated: (job: Job) => void }) {
     const [status, setStatus] = useState<JobStatus>(job.status)
     const [durationMinutes, setDurationMinutes] = useState(job.durationMinutes)
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
 
-  async function save(event: FormEvent) {
+    async function save(event: SyntheticEvent<HTMLFormElement>) {
         event.preventDefault()
         setSaving(true)
         setError('')
         try {
-      onUpdated(await api.jobs.update(job.id, { status, durationMinutes }))
+            onUpdated(await api.jobs.update(job.id, {status, durationMinutes}))
         } catch (requestError) {
             setError(errorMessage(requestError))
         } finally {
@@ -309,7 +301,7 @@ function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => vo
                     onChange={(event) => setDurationMinutes(Number(event.target.value))}
                 />
             </FormField>
-      {error && <ErrorAlert message={error} />}
+            {error && <ErrorAlert message={error}/>}
             <button className="button secondary wide" type="submit" disabled={saving}>
                 {saving ? 'Saving…' : 'Save interview settings'}
             </button>
@@ -317,7 +309,7 @@ function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => vo
     )
 }
 
-function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => void }) {
+function JobQuestionsView({job, onUpdated}: { job: Job; onUpdated: (job: Job) => void }) {
     const [query, setQuery] = useState('')
     const [results, setResults] = useState<Question[]>([])
     const [error, setError] = useState('')
@@ -345,7 +337,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
         setError('')
         try {
             await api.jobs.attachQuestion(job.id, question.id)
-      onUpdated({ ...job, questions: [...job.questions, question] })
+            onUpdated({...job, questions: [...job.questions, question]})
         } catch (requestError) {
             setError(errorMessage(requestError))
         }
@@ -386,7 +378,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
                                     onClick={() => void detach(question)}
                                     aria-label={`Detach ${question.text}`}
                                 >
-                  <Trash2 size={16} /> Detach
+                                    <Trash2 size={16}/> Detach
                                 </button>
                             }
                         />
@@ -411,7 +403,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
                 </div>
                 <div className="panel-padding">
                     <label className="search-field">
-            <Search size={18} />
+                        <Search size={18}/>
                         <span className="sr-only">Search question library</span>
                         <input
                             value={query}
@@ -419,7 +411,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
                             placeholder="Search question library…"
                         />
                     </label>
-          {error && <ErrorAlert message={error} />}
+                    {error && <ErrorAlert message={error}/>}
                 </div>
                 <div className="question-list compact">
                     {results
@@ -434,7 +426,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
                                         type="button"
                                         onClick={() => void attach(question)}
                                     >
-                    <Plus size={16} /> Attach
+                                        <Plus size={16}/> Attach
                                     </button>
                                 }
                             />
@@ -453,7 +445,7 @@ function InvitationsView({
                              onInvited,
                              onInvitationUpdated,
                              onScheduled,
-}: {
+                         }: {
     job: Job
     matches: CandidateMatch[]
     invitations: Invitation[]
@@ -511,9 +503,9 @@ function InvitationsView({
                 </div>
             </div>
             <div className="eligible-list">
-        {eligible.map(({ participant }) => (
+                {eligible.map(({participant}) => (
                     <article className="eligible-row" key={participant.id}>
-            <Avatar person={participant} />
+                        <Avatar person={participant}/>
                         <div>
                             <strong>
                                 {participant.firstName} {participant.lastName}
@@ -526,14 +518,14 @@ function InvitationsView({
                             disabled={sendingId === participant.id}
                             onClick={() => void send(participant.id)}
                         >
-              <Send size={16} />{' '}
+                            <Send size={16}/>{' '}
                             {sendingId === participant.id ? 'Generating…' : 'Generate invitation'}
                         </button>
                     </article>
                 ))}
                 {!eligible.length && <p className="muted">All eligible candidates have been invited.</p>}
             </div>
-      {error && <ErrorAlert message={error} />}
+            {error && <ErrorAlert message={error}/>}
             <div className="invitation-list">
                 {invitations.map((invitation) => (
                     <article className="invitation-row" key={invitation.id}>
@@ -541,7 +533,7 @@ function InvitationsView({
                             <strong>{invitation.participantName}</strong>
                             <small>{invitation.participantEmail}</small>
                         </div>
-            <StatusBadge value={invitation.status} />
+                        <StatusBadge value={invitation.status}/>
                         <code>{invitation.participantUrl}</code>
                         <button
                             className="button secondary"
@@ -549,7 +541,7 @@ function InvitationsView({
                             onClick={() => void copy(invitation.participantUrl)}
                             aria-label={`Copy interview URL for ${invitation.participantName}`}
                         >
-              <Copy size={16} /> Copy URL
+                            <Copy size={16}/> Copy URL
                         </button>
                         {['accepted', 'completed'].includes(invitation.status) && (
                             <button
@@ -564,7 +556,7 @@ function InvitationsView({
                     </article>
                 ))}
                 {!invitations.length && (
-          <EmptyState title="No invitations" description="Invite a candidate to this interview." />
+                    <EmptyState title="No invitations" description="Invite a candidate to this interview."/>
                 )}
             </div>
             {review && (
@@ -573,7 +565,7 @@ function InvitationsView({
                     onClose={() => setReview(undefined)}
                     onOutcome={(invitation) => {
                         onInvitationUpdated(invitation)
-            setReview((current) => current && { ...current, invitation })
+                        setReview((current) => current && {...current, invitation})
                     }}
                 />
             )}
@@ -604,7 +596,7 @@ function InvitationsView({
                             key={invitation.id}
                             onClick={() => setScheduling(invitation)}
                         >
-              <CalendarDays size={17} /> Schedule {invitation.participantName}
+                            <CalendarDays size={17}/> Schedule {invitation.participantName}
                         </button>
                     ))}
                 {scheduledInterviews.map((interview) => (
@@ -619,7 +611,7 @@ function InvitationsView({
                 {new Date(interview.startsAt).toLocaleString()} · {interview.location}
               </small>
             </span>
-            <StatusBadge value={interview.status} />
+                        <StatusBadge value={interview.status}/>
                     </Link>
                 ))}
             </div>
@@ -631,7 +623,7 @@ function InvitationAnswerReview({
                                     interview,
                                     onClose,
                                     onOutcome,
-}: {
+                                }: {
     interview: Interview
     onClose: () => void
     onOutcome: (invitation: Invitation) => void
@@ -677,7 +669,7 @@ function InvitationAnswerReview({
                             disabled={saving}
                             onClick={() => void decide('passed')}
                         >
-              <Check size={18} /> Pass candidate
+                            <Check size={18}/> Pass candidate
                         </button>
                         <button
                             className="button fail"
@@ -685,14 +677,14 @@ function InvitationAnswerReview({
                             disabled={saving}
                             onClick={() => void decide('failed')}
                         >
-              <X size={18} /> Fail candidate
+                            <X size={18}/> Fail candidate
                         </button>
-            {interview.invitation.outcome && <StatusBadge value={interview.invitation.outcome} />}
+                        {interview.invitation.outcome && <StatusBadge value={interview.invitation.outcome}/>}
                     </div>
                 )}
-        {error && <ErrorAlert message={error} />}
+                {error && <ErrorAlert message={error}/>}
                 <div className="review-heading-actions">
-          <StatusBadge value={interview.invitation.status} />
+                    <StatusBadge value={interview.invitation.status}/>
                     <button className="button ghost" type="button" onClick={onClose}>
                         Close review
                     </button>
@@ -708,7 +700,7 @@ function InvitationAnswerReview({
                                 <span className="question-type">{question.type.replace('_', ' ')}</span>
                                 <h3>{question.text}</h3>
                                 {question.type === 'code_review' && question.codeSnippet && (
-                  <CodePanel codeSnippet={question.codeSnippet} />
+                                    <CodePanel codeSnippet={question.codeSnippet}/>
                                 )}
                                 {(question.type === 'multiple_choice' || question.type === 'radio') &&
                                     question.options.length > 0 && (
@@ -741,18 +733,18 @@ export function QuestionRow({
                                 question,
                                 number,
                                 action,
-}: {
+                            }: {
     question: Question
     number?: number
     action?: ReactNode
 }) {
     return (
         <article className="question-row">
-      {number ? <span className="question-number">{number}</span> : <CircleHelp size={22} />}
+            {number ? <span className="question-number">{number}</span> : <CircleHelp size={22}/>}
             <div>
                 <div className="question-meta">
                     <h3>{question.type.replace('_', ' ')}</h3>
-          {question.deprecated && <StatusBadge value="deprecated" />}
+                    {question.deprecated && <StatusBadge value="deprecated"/>}
                 </div>
                 <p>{question.text}</p>
                 {question.options.length > 0 && <small>{question.options.join(' · ')}</small>}
@@ -773,7 +765,7 @@ export function QuestionRow({
     )
 }
 
-function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
+function CandidateMatchView({matches}: { matches: CandidateMatch[] }) {
     return (
         <section className="card">
             <div className="section-heading">
@@ -782,14 +774,14 @@ function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
                     <p>Trait alignment calculated by the API.</p>
                 </div>
                 <span className="ai-label">
-          <Sparkles size={16} /> Match insight
+          <Sparkles size={16}/> Match insight
         </span>
             </div>
             <div className="match-list">
                 {matches.map((match, index) => (
                     <article className="match-card" key={match.participant.id}>
                         <span className="rank">{index + 1}</span>
-            <Avatar person={match.participant} />
+                        <Avatar person={match.participant}/>
                         <div className="match-person">
                             <Link to={`/participants/${match.participant.id}`}>
                                 {match.participant.firstName} {match.participant.lastName}
@@ -802,7 +794,7 @@ function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
                                 <strong>{match.matchedTraits.length}</strong>
                             </div>
                             <span className="score-track">
-                <span style={{ width: `${Math.min(match.score, 100)}%` }} />
+                <span style={{width: `${Math.min(match.score, 100)}%`}}/>
               </span>
                         </div>
                         <div className="score">
@@ -829,12 +821,12 @@ function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
 }
 
 export function CreateJobPage() {
-  const { createJob } = useData()
+    const {createJob} = useData()
     const navigate = useNavigate()
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
 
-  async function submit(event: FormEvent<HTMLFormElement>) {
+    async function submit(event: SyntheticEvent<HTMLFormElement>) {
         event.preventDefault()
         setSaving(true)
         setError('')
@@ -864,7 +856,7 @@ export function CreateJobPage() {
     return (
         <>
             <Link className="back-link" to="/jobs">
-        <ArrowLeft size={17} /> Cancel
+                <ArrowLeft size={17}/> Cancel
             </Link>
             <PageHeader
                 eyebrow="New posting"
@@ -876,33 +868,33 @@ export function CreateJobPage() {
                     <h2>Role information</h2>
                     <div className="form-grid">
                         <FormField label="Job title" htmlFor="title">
-              <input id="title" name="title" required />
+                            <input id="title" name="title" required/>
                         </FormField>
                         <FormField label="Position" htmlFor="position">
-              <input id="position" name="position" required placeholder="e.g. Backend Engineer" />
+                            <input id="position" name="position" required placeholder="e.g. Backend Engineer"/>
                         </FormField>
                         <FormField label="Seniority" htmlFor="seniority">
-              <input id="seniority" name="seniority" required placeholder="e.g. Senior" />
+                            <input id="seniority" name="seniority" required placeholder="e.g. Senior"/>
                         </FormField>
                         <FormField label="Labels" htmlFor="labels" hint="Comma separated">
-              <input id="labels" name="labels" />
+                            <input id="labels" name="labels"/>
                         </FormField>
                     </div>
                 </div>
                 <div className="form-section">
                     <h2>Role profile</h2>
                     <FormField label="Description" htmlFor="description">
-            <textarea id="description" name="description" required rows={7} />
+                        <textarea id="description" name="description" required rows={7}/>
                     </FormField>
                     <FormField label="Required skills" htmlFor="requiredSkills" hint="Comma separated">
-            <input id="requiredSkills" name="requiredSkills" required />
+                        <input id="requiredSkills" name="requiredSkills" required/>
                     </FormField>
                     <FormField label="Additional skills" htmlFor="additionalSkills" hint="Comma separated">
-            <input id="additionalSkills" name="additionalSkills" />
+                        <input id="additionalSkills" name="additionalSkills"/>
                     </FormField>
                 </div>
-        {error && <ErrorAlert message={error} />}
+                {error && <ErrorAlert message={error}/>}
-        <FormActions saving={saving} cancelTo="/jobs" label="Create job" />
+                <FormActions saving={saving} cancelTo="/jobs" label="Create job"/>
             </form>
         </>
     )

frontend/src/features/users/CalendarPage.tsx

@@ -0,0 +1,62 @@
+import {ScheduledInterview} from "../../types";
+import {useEffect, useMemo, useState} from "react";
+import {message} from "../../components/actions";
+import {api} from "../../api/client";
+import {ErrorAlert, Loading} from "../../components/ui/AsyncState";
+import {InterviewCard} from "../interviews/components/InterviewCard";
+import {Link} from "react-router-dom";
+
+export function CalendarPage() {
+    const [items, setItems] = useState<ScheduledInterview[]>([])
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(true)
+    useEffect(() => {
+        void api
+            .calendar()
+            .then(setItems)
+            .catch((value) => setError(message(value)))
+            .finally(() => setLoading(false))
+    }, [])
+    const groups = useMemo(() => {
+        return [...items]
+            .sort((a, b) => a.startsAt.localeCompare(b.startsAt))
+            .reduce<Record<string, ScheduledInterview[]>>((result, item) => {
+                const key = new Date(item.startsAt).toLocaleDateString(undefined, {
+                        weekday: 'long',
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric',
+                    })
+                ;(result[key] ??= []).push(item)
+                return result
+            }, {})
+    }, [items])
+    return (
+        <>
+            <header className="page-header">
+                <div>
+                    <span className="eyebrow">Schedule</span>
+                </div>
+            </header>
+            {error && <ErrorAlert error={error}/>}
+            {loading ? (
+                <Loading/>
+            ) : (
+                Object.entries(groups).map(([date, interviews]) => (
+                    <section className="calendar-day" key={date}>
+                        <h2>{date}</h2>
+                        <div className="meeting-list">
+                            {interviews.map((item) => (
+                                <InterviewCard interview={item} key={item.id}>
+                                    <Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
+                                        Open session
+                                    </Link>
+                                </InterviewCard>
+                            ))}
+                        </div>
+                    </section>
+                ))
+            )}
+        </>
+    )
+}

frontend/src/features/users/index.ts

@@ -1,2 +1,3 @@
-export { ProfilePage } from './ProfilePage'
+export {ProfilePage} from './ProfilePage';
-export { UsersPage } from './UsersPage'
+export {UsersPage} from './UsersPage';
+export {CalendarPage} from './CalendarPage';