Car Service Calendar Block for React Aria

Edit FLEET: each vehicle has a name, a plate, the last service date as ISO, its lastKm, the current odo as digits and its history of visits. INTERVAL_MONTHS and INTERVAL_KM set the interval, SOON_DAYS and SOON_KM set when a service counts as due soon. The due date and distance, the bars and the status are all worked out from them.

Whichever is reached first. The sentence shows both ("Due in 12 days or 340 km") so you can see the nearer one, and the status is overdue when either is past, due soon when either is within 30 days or 1,000 km, and on schedule otherwise. The bars show how much of each interval is used.

Type a new reading; the distance left, the bar and the status follow at once. It cannot go below the odometer at the last service: leaving the box with a lower number puts that number back and says so in the status line.

It sets the last service to the fixed "now" and to the current odometer reading, so the next service is a year or 15,000 km on, and adds a row to that vehicle's history with the note "Marked in this demo". Nothing is saved or sent. To make it real, post the visit to your maintenance system from the handler and use its response to update the vehicle.

Status is a word with a glyph, never only a color, and the due sentence says it in plain numbers. The bars are named ("Time used", "Distance used") and their figures are written beside them. The odometer has a visible label, and the history is a disclosure with a count in its name.

The vehicles stack in one column, each cell keeping the same order: status, the two bars, the odometer, the last service and the history. Nothing needs to scroll sideways.