+
-
- {/* Sticky toolbar */}
-
-
-
- {/* Starter banner (shown until the bill has meaningful items) */}
- {!hideStarter && !hasMeaningfulItems && (
-
-
-
-
-
-
-
- Tab/Enter to commit
- Esc to exit
-
-
-
- )}
- {/* Live Roster */}
-
-
-
-
-
- Start splitting in 3 quick steps
-
- Click a cell and type, then press Tab/Enter to move like Sheets.
-
-
-
-
-
-
-
-
-
-
- 1
-
-
- Add people
- ⌘⇧P
-
-
-
-
-
-
- 2
-
-
- Add items
- ⌘⇧N
-
-
-
-
-
- 3
-
-
- Scan receipt
- Optional
-
-
-
- {/* Sticky Header */}
-
- Live Breakdown
-
-
- {people.length === 0 ? (
-
-
- ) : (
- people.map(p => {
- const stats = personFinalShares[p.id]
- const colorObj = COLORS[p.colorIdx || 0]
- const percent = stats ? (stats.total / (grandTotal || 1)) * 100 : 0
- return (
-
-
- {p.name.split(' ')[0]}
-
- {formatCurrencySimple(stats?.total || 0)}
-
-
- ({percent.toFixed(0)}%)
-
-
- )
- })
- )}
-
-
#
- Item Description
- Price
- Qty
+
+
+
+
+
+
- {people.map(p => {
- const colorObj = COLORS[p.colorIdx || 0]
- const initials = p.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
- return (
- Items & split
++ Add items, set prices, and assign people to split each line. +
+ setHoveredColumn(p.id)}
- onMouseLeave={() => setHoveredColumn(null)}
- onClick={() => setEditingPerson(p)}
- >
-
- {initials}
+ {/* Sticky toolbar */}
+
+
+
- )
- })}
-
+
+
+
+
+
+
+ Tab/Enter to commit
+ Esc to exit
-
- {p.name.split(' ')[0]}
-
-
-
- Total
-
-
+
+ {/* Sticky Header */}
+
+
- {/* Body */}
- #
+ Item Description
+ Price
+ Qty
+
+ {people.map(p => {
+ const colorObj = COLORS[p.colorIdx || 0]
+ const initials = p.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+ return (
+
+ )
+ })}
+
+
+
+ Total
+
+
- {calculatedItems.length === 0 && (
-
-
- )}
-
- {calculatedItems.map((item, rIdx) => (
-
-
- No items yet
-- Add your first item to start splitting the bill. Press ⌘⇧N or click the button below. -
- - handleContextMenu(e, item.id)}
- >
- {/* Index / "Equal" Button */}
-
+ )}
- {/* Inline actions */}
-
- {String(rIdx + 1).padStart(2, '0')}
-
-
+ {/* Body */}
+
+ {calculatedItems.length === 0 && (
+
-
- {/* Price */}
-
+
+ )}
- {/* Name + Split Method Selector */}
-
+
+ No items yet
++ Add your first item to start splitting the bill. Press ⌘⇧N or click the button below. +
+ +
-
-
-
-
-
+ {calculatedItems.map((item, rIdx) => (
+
+
+
+
+ duplicateItem(item)}
+ >
+
+ toggleAllAssignments(item.id)}
+ >
+
+ clearRowAssignments(item.id)}
+ >
+
+ openDeleteDialog(item)}
+ >
+
+
+
+ ))}
+
+ {/* Add Row Button */}
+ {calculatedItems.length > 0 && (
-
-
- {splitMethodOptions.map(option => (
- {
- e.preventDefault()
- changeSplitMethod(item.id, option.value)
- }}
- className={`text-xs flex items-center gap-2 font-inter ${item.method === option.value ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-600'}`}
- >
- {React.createElement(option.icon, { size: 12 })}
- {option.label}
-
- ))}
-
-
+ )}
+
+ {/* Index / "Equal" Button */}
+
+
+ {String(rIdx + 1).padStart(2, '0')}
+
+
+
+ {/* Name + Split Method Selector */}
+
+
+
+ {/* Price */}
+
+
+
+
+
+
+
+
+ {splitMethodOptions.map(option => (
+ {
+ e.preventDefault()
+ changeSplitMethod(item.id, option.value)
+ }}
+ className={cn(
+ "text-xs flex items-center gap-2 font-inter",
+ item.method === option.value ? "bg-indigo-50 text-indigo-700 font-bold" : "text-slate-600"
+ )}
+ >
+ {React.createElement(option.icon, { size: 12 })}
+ {option.label}
+
+ ))}
+
+
+
+
+
+
+ {/* Qty */}
+
+
+
+ {/* Person Cells (The "Cards") */}
+ {people.map(p => {
+ const isAssigned = item.splitWith.includes(p.id)
+ const isSelected = selectedCell.row === rIdx && selectedCell.col === p.id
+ const color = COLORS[p.colorIdx || 0]
+
+ return (
+
+ )
+ })}
+
+ {/* Inline actions */}
+
+
+
+
+
+ {/* Row Total */}
+
+ ${(item.totalItemPrice || 0).toFixed(2)}
+
+
-
-
- {/* Qty */}
-
-
-
- {/* Person Cells (The "Cards") */}
- {people.map(p => {
- const isAssigned = item.splitWith.includes(p.id)
- const isSelected = selectedCell.row === rIdx && selectedCell.col === p.id
- const color = COLORS[p.colorIdx || 0]
-
- return (
- {
- e.stopPropagation()
- handleContextMenu(e, item.id, p.id)
+
+
+
+
-
+
+
- ))}
-
- {/* Add Row Button */}
- {calculatedItems.length > 0 && (
-
- )}
-
- {/* Summary Rows Section */}
-
+
- {/* Row Total */}
-
+
People
+Track who is splitting the bill.
+
- ${(item.totalItemPrice || 0).toFixed(2)}
-
-
- {/* Subtotal Row */}
-
-
-
- Subtotal
-
-
- ${subtotal.toFixed(2)}
-
-
-
- {people.map(p => {
- const stats = personFinalShares[p.id]
- return (
-
- ${(stats?.subtotal || 0).toFixed(2)}
+
+ {people.length === 0 ? (
+
- {/* Tax Row */}
-
+ No people yet. Add someone to start splitting.
- )
- })}
-
-
-
- ${subtotal.toFixed(2)}
+ ) : (
+ people.map(p => {
+ const stats = personFinalShares[p.id]
+ const colorObj = COLORS[p.colorIdx || 0]
+ const percent = stats ? (stats.total / (grandTotal || 1)) * 100 : 0
+ return (
+
+ )
+ })
+ )}
-
-
- Tax
+
@@ -1587,7 +1599,7 @@ function DesktopBillSplitter() {
{/* BREAKDOWN VIEW */}
{activeView === 'breakdown' && (
-
+
-
- {/* Tip Row */}
-
+
-
+
Bill totals
+Adjust tax, tip, and discounts.
+
- {
- dispatch({ type: 'SET_TAX', payload: e.target.value })
- analytics.trackTaxTipDiscountUsed("tax", e.target.value, state.currentBill.taxTipAllocation)
- }}
- className="w-full bg-white rounded px-2 py-1.5 border border-slate-200 shadow-inner focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:bg-indigo-50/30 transition-all text-xs font-space-mono text-slate-700 text-right"
- placeholder="0.00"
- />
-
-
-
- {people.map(p => {
- const stats = personFinalShares[p.id]
- return (
-
- ${(stats?.tax || 0).toFixed(2)}
-
- )
- })}
-
-
-
- ${taxAmount.toFixed(2)}
-
-
-
-
-
- {/* Discount Row */}
-
- Tip
-
-
- {
- dispatch({ type: 'SET_TIP', payload: e.target.value })
- analytics.trackTaxTipDiscountUsed("tip", e.target.value, state.currentBill.taxTipAllocation)
- }}
- className="w-full bg-white rounded px-2 py-1.5 border border-slate-200 shadow-inner focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:bg-indigo-50/30 transition-all text-xs font-space-mono text-slate-700 text-right"
- placeholder="0.00"
- />
-
-
- {people.map(p => {
- const stats = personFinalShares[p.id]
- return (
-
- ${(stats?.tip || 0).toFixed(2)}
-
- )
- })}
-
-
-
- ${tipAmount.toFixed(2)}
-
-
-
-
- Discount
-
-
- {
- dispatch({ type: 'SET_DISCOUNT', payload: e.target.value })
- analytics.trackTaxTipDiscountUsed("discount", e.target.value, state.currentBill.taxTipAllocation)
- }}
- className="w-full bg-white rounded px-2 py-1.5 border border-slate-200 shadow-inner focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:bg-indigo-50/30 transition-all text-xs font-space-mono text-slate-700 text-right"
- placeholder="0.00"
- />
-
-
-
- {people.map(p => {
- const stats = personFinalShares[p.id]
- return (
-
- ${(stats?.discount || 0).toFixed(2)}
+
+
+
+
+ {
+ dispatch({ type: 'SET_TAX', payload: e.target.value })
+ analytics.trackTaxTipDiscountUsed("tax", e.target.value, state.currentBill.taxTipAllocation)
+ }}
+ className="w-full h-9 rounded-md border border-slate-200 bg-white px-2 text-right font-space-mono text-slate-700 tabular-nums focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
+ placeholder="0.00"
+ />
+
+
+
+ {
+ dispatch({ type: 'SET_TIP', payload: e.target.value })
+ analytics.trackTaxTipDiscountUsed("tip", e.target.value, state.currentBill.taxTipAllocation)
+ }}
+ className="w-full h-9 rounded-md border border-slate-200 bg-white px-2 text-right font-space-mono text-slate-700 tabular-nums focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
+ placeholder="0.00"
+ />
+
+
+
+ {
+ dispatch({ type: 'SET_DISCOUNT', payload: e.target.value })
+ analytics.trackTaxTipDiscountUsed("discount", e.target.value, state.currentBill.taxTipAllocation)
+ }}
+ className="w-full h-9 rounded-md border border-slate-200 bg-white px-2 text-right font-space-mono text-slate-700 tabular-nums focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
+ placeholder="0.00"
+ />
+
+
+
+
-
- {/* Grand Total Row */}
-
+ {formatCurrencySimple(subtotal)}
- )
- })}
-
-
-
- -${discountAmount.toFixed(2)}
-
-
-
-
-
-
-
- {people.map(p => {
- const stats = personFinalShares[p.id]
- const colorObj = COLORS[p.colorIdx || 0]
- return (
-
- Grand Total
+
-
- )
- })}
-
-
- ${(stats?.total || 0).toFixed(2)}
-
-
- ${grandTotal.toFixed(2)}
+
-
-
+
+ Tax
+ {formatCurrencySimple(taxAmount)}
+
+
+ Tip
+ {formatCurrencySimple(tipAmount)}
+
+
+ Discount
+ -{formatCurrencySimple(discountAmount)}
+
+
+ Grand total
+ {formatCurrencySimple(grandTotal)}
+
+
{/* LEFT: Bill Summary Receipt */}
@@ -1596,11 +1608,11 @@ function DesktopBillSplitter() {
-
- {title}
-Bill Summary
+{title}
+Bill Summary
+
{calculatedItems.map(item => (
{item.name}
@@ -1609,7 +1621,7 @@ function DesktopBillSplitter() {
))}
-
+
Subtotal
{formatCurrencySimple(subtotal)}
@@ -1643,12 +1655,15 @@ function DesktopBillSplitter() {
-
-
+
-
{initials}
- {p.name}
+ {p.name}
+
@@ -1657,7 +1672,7 @@ function DesktopBillSplitter() {
{formatCurrencySimple(stats?.total || 0)}
Share
- {stats?.ratio.toFixed(1) || 0}%
+ {stats?.ratio.toFixed(1) || 0}%
{[...Array(10)].map((_, i) => {
@@ -1665,7 +1680,10 @@ function DesktopBillSplitter() {
return (
)
})}
@@ -1678,14 +1696,14 @@ function DesktopBillSplitter() {
{item.name}
-
+
{formatCurrencySimple(item.pricePerPerson)}
))}
+
Sub: {formatCurrencySimple(stats?.subtotal || 0)}
@@ -1709,42 +1727,101 @@ function DesktopBillSplitter() {
)}
+
+
+
+ Start a new bill?
+
+ Your current bill will be cleared unless you share it first.
+
+
+
+ Cancel
+ Start new bill
+
+
+
+
+ {
+ setIsDeleteDialogOpen(open)
+ if (!open) setPendingDeleteItem(null)
+ }}
+ >
+
+
+ Delete this item?
+
+ This action can’t be undone.
+
+
+
+ setPendingDeleteItem(null)}>
+ Cancel
+
+ Delete item
+
+
+
+
+ {
+ setIsRemovePersonDialogOpen(open)
+ if (!open) setPendingRemovePerson(null)
+ }}
+ >
+
+
+ Remove this person?
+
+ {pendingRemovePerson?.name || "This person"} will be removed from the bill and their splits cleared.
+
+
+
+ setPendingRemovePerson(null)}>
+ Cancel
+
+ Remove person
+
+
+
+
{/* --- Footer --- */}