Service tasks

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

A fleet shop's maintenance setup. Tasks: active and archived, searchable, main tasks and their subtasks told apart in words, archiving refused while reminders use a task (said with how many); a task opened with its name (a duplicate refused), description, subtasks, default parts with quantities, the inspection it asks for and expected labour (unknown said), all said to be defaults that never mark parts used, and the provider codes grouped under it, where a code that moves from another task is said before saving. The meter field: set up beside the field as the driver meets it, where a required reading and a new photo hold back submitting, a reading below the last one is said, and a gallery photo from before the inspection doesn't count. Completion rules: what a work order needs to close (a meter reading with vehicle types excepted, every line done, the inspection, a repair priority, documents), for work orders opened after saving.

Use it for

Setting up a vehicle or equipment shop: the tasks it does, how outside providers' codes map to them, the inspection's meter reading and what closes a work order.
Anywhere an inspection must prove a fresh reading, and a policy change must not reach work already open.

Not for

Running the work orders themselves (shop-floor).
Planning stock and replenishment (production-plan).
A general settings page (settings).

Anatomy

header: the product's mark and the title
tabs: Tasks, Meter field, Completion rules
tasks list: Active and Archived with counts, search, each task with Task with N subtasks or Subtask of …, and reminders using it
task: name as the title (edits in place; a duplicate refused there), Archive or Restore (with why not), description (edits in place), inspection and expected labour as a line of facts (a menu and a number in place), subtasks and default parts as lists (a part's quantity in place, remove on hover or focus, Add from a menu), the defaults note as a hint, provider codes with add and remove and what moves, Save
meter field: label, help, required, second meter, new photo required (with what counts); beside it the field as the driver meets it: reading with unit, second reading or why not, Take the photo, Use a photo from the gallery, Submit inspection and what is still needed
completion rules: meter reading with the excepted vehicle types, every line done, inspection, repair priority, show documents, require documents, the note on open work orders, Save

States

task: active, archived; main with subtasks, subtask of others; archive refused while reminders use it; a duplicate name refused; unknown labour
codes: none; mapped; moving from another task (said); cancel (Discard) changes nothing
meter preview: reading missing; below the last reading; second meter absent; photo missing; gallery photo too old (said); fresh photo; submitted
rules: meter with exceptions; documents required turns showing them on
unsaved; saving; saved; refused with the reason (the draft kept)
look only: no fields or Save, the permission said
loading: shaped skeletons; no tasks: an empty state
phone: the list, then the task with Back; the meter setup over its preview
right to left: the layout mirrors
reduced motion: through the tokens

Keyboard

Arrows between the tabs; Tab through the list, the task's fields and its add selects, the preview's fields and buttons, the rules' switches, then Save

Motion

Nothing moves beyond the parts' own feedback. Nothing runs at rest.

Props

Prop	Type	Default	Description
`defaultTasks` (required)	`ServiceTask[]`	—
`partOptions`	`{ part: string; unit: string; }[]`	—
`inspectionOptions`	`string[]`	—
`providerCodes`	`ProviderCode[]`	—	Every provider code there is, mapped or not (a code belongs to one task at a time).
`defaultField` (required)	`MeterField`	—
`vehicle` (required)	`PreviewVehicle`	—
`defaultRules` (required)	`CompletionRules`	—
`vehicleTypes`	`string[]`	—
`onPhoto`	`((source: "camera" \| "gallery") => Promise<{ takenAt: string; }>)`	—	A photo from the camera now, or from the phone's gallery (an older file); your app reads when it was taken.
`inspectionStartedAt`	`string`	—	The time a new photo must be after (the inspection's start), ISO.
`onSaveTask`	`((task: ServiceTask) => Promise<unknown>)`	—
`onArchive`	`((taskId: string, archive: boolean) => Promise<unknown>)`	—
`onSaveField`	`((field: MeterField) => Promise<unknown>)`	—
`onSaveRules`	`((rules: CompletionRules) => Promise<unknown>)`	—
`defaultTab`	`"meter" \| "rules" \| "tasks"`	—
`defaultTaskId`	`string`	—
`canEdit`	`boolean`	—
`loading`	`boolean`	—
`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

Dependencies

lucide-react

Import

import { ServiceTasks } from "@beamline/service-tasks";

Get it

Service tasks 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

Service tasksComplete system · $49

A fleet shop's maintenance setup.

The oil service

The van oil service is made of three subtasks with default oil and filter, and QuickLube's QL-110 grouped under it. Archive is refused while 14 reminders use it. Add Metro Fleet Care's MF-2001 to group their oil jobs here too; adding MF-7731 says it moves from the brake job.

0 × 0full

States

One state at a time: the meter field beside the field as the driver meets it (a reading below the last one is said; a gallery photo from yesterday doesn't count); completion rules with trailers excepted from the meter reading; a save refused; looking without the permission; loading.