Job card

A React block (a whole screen) in Beamline's Shop app.

A technician's repair order, phone-first. The vehicle, the customer and when it's due in words (due at, due in, overdue by how long); an offline copy says when it last synced. Tasks with their state; the open task shows estimated and logged time side by side with their own labels, its checklist, the clock, and every time entry (a clock span, or time added by hand with why), so logged time is never made up. Finishing a task while its clock runs asks what to do with the timer: stop it and finish, or keep it running for the next task. Internal notes and recommendations for the customer are separate labelled sections, and the customer preview shows exactly what the customer receives, never an internal note.

Use it for

A technician working one job on a phone or tablet: clocking tasks, ticking checklists, adding notes.
Anywhere logged time must come from a clock or a stated reason, and internal notes must never reach the customer.

Not for

A manager's board of every order (work-orders).
Timesheets across days (timesheet-review).

Anatomy

header: the product's mark, the order number, vehicle, plate and mileage, the customer, the due state in words
offline notice with the last sync
tasks: name, logged against estimated, state
the open task: estimated and logged, over the estimate, the clock, checklist, time entries, add time by hand, finish or reopen
finishing with the clock running: stop it and finish, or keep it running for the next task
notes: recommendations for the customer and internal notes (who sees each a hint on its heading), each added from a button that opens its box; the customer preview

States

due: soon (warning), overdue (danger), otherwise neutral
task: to do, started (warning), clock running (info), done (success)
over the estimate: the logged box tinted warning and says by how much
not estimated: said, never zero
offline: said with the last sync
refused save: the change is undone and the reason said
phone: tasks and notes on a switch, the task under the list
right to left: the layout mirrors
reduced motion: nothing animates

Keyboard

Tab through tasks, the clock, checklist, entries and notes; Enter or Space opens a task and presses buttons; Space ticks checklist items

Motion

Nothing moves; the running clock's minutes refresh every 30 seconds only while one runs.

Props

Prop	Type	Default	Description
`order` (required)	`RepairOrder`	—
`defaultTasks` (required)	`JobTask[]`	—
`defaultNotes` (required)	`JobNote[]`	—
`technician` (required)	`string`	—	The technician using it, named on what they add.
`defaultTaskId`	`string`	—
`offline`	`{ syncedAt: string; } \| null`	—	Working from a stale copy: when it last synced.
`now`	`string`	—
`onTaskChange`	`((task: JobTask) => Promise<unknown>)`	—	Save a task's change (clock, checklist, finish, time by hand); reject with the reason to keep it here.
`onNote`	`((note: JobNote) => Promise<unknown>)`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { JobCard } from "@beamline/job-card";

Get it

Job card is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Job cardComplete system · $49

A technician's repair order, phone-first.

Brakes under way on RO-4817

Due in 1 h 48 min. The brake job's clock has run since 10:05; estimated 1 h 30 min beside 1 h 22 min logged from two clock spans and 15 minutes added by hand with why. The oil change finished 5 minutes over its estimate. Finishing the brakes now asks what to do with the running clock. Recommendations for the customer and the shop's internal notes are apart; the customer preview shows only the recommendations.

0 × 0full

States

One state at a time: offline on a copy synced 30 minutes ago; overdue by 42 minutes; every task done, each reopenable; the shop system refusing a change, which stays here with the reason.