Electrician Services Estimate Profile Block for React

Edit CATEGORIES: each category has services with an id, a name, a flat price in dollars and the minutes the job takes on site. CALL_OUT is the call-out fee, WAIVED_FROM is the job size from which it is waived, and EMERGENCY is the flat surcharge for a visit within four hours. The subtotal, the fees, the total and the time on site are all worked out from the services that are on, so nothing is typed twice. Keep every category at the same number of services so the menu keeps its height when you switch tabs.

The subtotal is the sum of the services added. The call-out fee is added once for the visit, unless the subtotal reaches the waiver, in which case the line says Waived; with nothing added there is no fee at all. The emergency surcharge is added only while the switch is on and at least one service is added. The total is those three lines, and the time on site is the sum of the minutes, shown as hours and minutes. The note under the lines says it is an estimate, not a quote.

Nothing leaves the page. With services added it records the request and the status line says Requested in this demo and that nothing was sent; with none added it says to add a service first. Every change to the menu or the switch has its own line, so the status always says what just happened. To make it real, send the services, the switch and the total to your own booking API in the submit handler and show its answer in the same line.

Yes. The added services belong to the page, not to a tab, so switching between repairs, installs and safety checks keeps everything and the estimate keeps adding it up. An added service shows a check and a solid button wherever you see it. Arrow keys move between the tabs, and the panel follows the tab you choose.

Each Add button is named for its service, so several rows never share the same name, and its pressed state is announced. The switch is named, the estimate is a description list, and the status line is a polite live region present from the start. Prices keep their order in a right-to-left layout, and nothing depends on colour: an added service shows a check as well as a fill.

The estimate comes first, then the tabs and the menu under it, each service on one line with its price and the Add button. The foot with the request stays pinned to the bottom of the screen while the panel scrolls, and settles at the panel's end from the medium breakpoint. The opening days badge in the person band is hidden below the small breakpoint.