Managed Services Pricing Billing Block for Vue

Edit TIERS (the hours a tier starts at and its hourly rate), ALWAYS (the 24/7 uplift in percent), ENGINEER, ROLLOVER, OVERAGE and USES, the months of use. The price, the effective rate, the marked tier and each month's banked, expired and overage hours are worked out from those, in order, month by month.

Each month the allowance is the retainer plus what was banked. Hours used are taken from it, the unused hours up to 10 are banked for the next month and any beyond that expire; use above the allowance is overage at $140 an hour. The dotted part of a bar is overage. Change the slider and the three months are replayed with the new allowance.

Requesting only writes a status line ("Requested in this demo") and nothing is sent. To make it real, post the hours, cover and engineer to your sales or billing API from the request handler, show the reference it returns, and load the customer's real months of use instead of the typed ones.

It is one Tab stop; the arrow keys move it by 10 hours, Home and End go to 10 and 80, and its value is spoken as hours a month. The segments and the switch are ordinary controls, and every change re-prices at once without moving anything on the page.

The side cell stacks under the controls and the price with a rule between, the footer stays pinned to the bottom, and the status line reserves its lines so the pinned footer never changes height when its text does.