Tanstack Start
Maintenance & work ordersWork orders

Service work orders

Service work order list, add dialog, and detail page in the tenant console.

Open the list

  1. Navigate to /dashboard/work-order/service.
  2. Satisfy Work order permissions (view_vehicle or list_vehicle).

The page title is Service Work Order with a total count and Search on the table.

List columns

Typical columns include:

  • ID
  • Vehicle — name and plate with info icon styling
  • Assigned Vendor
  • Category
  • Priority
  • Created Date and Last Updated Date (formatted)
  • Status — badge styles for values such as Approved, In Progress, Pending, Waiting, Blocked
  • Actions — row menu with entries such as View, Edit, Approve, Reject, Assign vendor, Complete, Close, Delete (labels match the dropdown in your build)

📌 Note: Row action callbacks are no-ops in the reviewed sass-console file; menus render but do not navigate or call APIs.

Toolbar actions

  • Filter — button present in the layout (no filter panel wired in the reviewed route).
  • New Work Order — opens Add Work Order modal.

Open detail

Rows link to /dashboard/work-order/service/:workOrderId. The loader reads from mock detail data; missing ids return not found.

Add Work Order modal (two steps)

Step 1 — Work Order Information

Validated fields (addWorkOrderStep1Schema):

FieldRequiredRule
Select VehicleYesNon-empty string (vehicle id).
PriorityYesOne of: No Priority (none), Low, Medium, High, Critical.
Start dateYesDate; paired with end date.
End dateYesMust be on or after start date.
Assign a vendorYesNon-empty vendor id.
Select a templateYesNon-empty template id.
Work order noteNoOptional text.

Use Next to advance when step 1 validates.

Sections let you link issues, incidents, and service tasks via searchable multi-select lists. Entries come from mock link lists in the reviewed build. Selected ids are sent in the submit payload together with step 1.

Submit

Finish calls the parent onSubmit with:

  • step1 values
  • linkedIssueIds, linkedIncidentIds, linkedServiceTaskIds

In the default route, the handler only shows a success toast and does not persist to an API.

Detail page (dashboard)

The detail view includes:

  • Header with back to the list, status badge, vendor/vehicle summary, and action menus (resolve/reject modals exist in the component tree for some flows).
  • Linked maintenance navigation (issues, incidents, service tasks, replace parts) with list panels driven by mock detail models.
  • Cost and task UI sections from the mock detail structure.

Exact copy and iconography follow the work-order design components in your build.

On this page