Split Bill Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Split the check button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SplitFields component and share the block's state, so an item shared in the copy is shared in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Everything is whole cents. Each item is cut among the people who shared it with evenParts: every sharer gets the same whole number of cents and the odd cents go to the first sharers in table order. Tax and tip are each worked out once, from the items that have someone, and rounded to a cent; then apportion spreads each of them over the people in proportion to what they ordered, with the largest-remainder rule, so the parts add up to the total exactly. A person's total is items plus their tax plus their tip, and the line under the list adds the four shares back up to prove they match the check.

The totals count only the items that have someone, and the line under them lists the rest ("Unassigned: Fries $6.00", two items by name, more as a count and a sum). Save split stays on the page with a quiet look and says it is waiting to anyone who points at it; pressing it names the first item that still needs a person, moves focus to that item's initials and speaks it in the status message. Clear every initial in a row to unassign an item again.

The list scrolls and the totals become a strip pinned above the actions: four names and their amounts and the unassigned line, so you see what each toggle does without scrolling. The per-person breakdown and the proof line are kept for wider screens, and the real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.

No. Save split keeps the shares in local state, writes Split 4 ways and each amount on the drawn check behind the dialog, closes, and says in a polite status message that nothing was shared or charged. In your app send the assignments to your server in save and let the server do the cents arithmetic too, since it owns the check; show a refusal in the status message with the dialog still open. The people, items, tax and tip rates are typed constants at the top of the file.

Yes. The real dialog is named by its title and described by its sentence, focus starts at the first row of initials and stays inside until it closes, and Escape, Cancel and the close button all return focus to Split the check. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Each row is a group you move through with the arrow keys, named for its item and its sharers ("Burrata shared by Maya, Jo"), and each initial is a toggle named with the person's name. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.