Mechanic Certification Runway Profile Block for React

Edit TESTS. Each has a code, a name and the ISO days it was issued and expires; leave both empty for a test that is not held. AS_OF is the day the page treats as today, and the axis runs from five years before it to five years after, so every bar sits on the same scale and the mark for today is always in the middle. The count, the tests still to take, the months to go and the due test count are all worked out from those days, so nothing is typed twice.

It dims, it does not hide. A test is due when it runs out within 365 days of AS_OF; with the switch on, every other test, including the ones not yet taken, turns to quiet text and a lighter bar while the due ones keep full weight, and the status line says how many are due and that the rest are dimmed. Because no row leaves, the panel keeps its height and nothing jumps. Change DUE_WITHIN to change the window.

Each bar runs from the day a test was passed to the day it runs out. The lighter part is time already used and the solid part is time to go, split at the mark for today, so a short solid bar means the test is close to running out. The bars are decorative: the dates and the months to go are written in the row, so nothing depends on seeing them.

No. The Vehicle Service Board, the tests and the technician are invented, and nothing is checked against a real register. The switch only changes how the list is drawn in this page. To make it real, load the tests from your own records and say where each one was checked.

The switch is named, the tests are a list, and each row reads as the code, the name, the two dates and the time to go in words. The status line is a polite live region present from the start, so turning the switch on says how many tests are due. Dimmed rows stay readable at full contrast, and nothing depends on colour. In a right-to-left layout the dates and counts keep their order, and the bars stay in time order.

Each row becomes two lines: the test and the time to go on the first, the bar full width under them. The year ruler above the bars is hidden below the small breakpoint, where the dates in each row say the same. The switch drops under the sentence in the header.