@ticketboothapp/booking 1.2.72 → 1.2.75

package/CHANGE_BOOKING_BE_HANDOFF.md

@@ -84,3 +84,19 @@ Pickers show **catalog** prices by default (same booking **currency** as the ori
 - **Currency**: align optional maps and line `amount` values with `currency` / receipt currency; change booking stays in the booking’s sold currency end-to-end on FE.  
 - **Cancellation policy on change**: FE sends the booked policy on reserve/confirm paths; it is **not** chosen from product config during change — preserve the booking’s policy server-side unless product rules say otherwise.  
 - **`serverPreview.completeness`**: the package sets this to **`full`** whenever a preview is built (informational); UI does not gate on `totals_only` vs `full`.
+
+---
+
+## Admin / provider manual line items (signed adjustments)
+
+**Frontend (this package):** `AdminChangeBookingFlow` lets staff add custom receipt lines (label + signed amount). The same values are:
+
+1. **`POST …/change/quote`** — optional request field **`manualLineAdjustments`**: `Array<{ label: string; amount: number }>` in **major units** (same currency as the booking). Amounts are signed (credits negative). Omitted when there are no custom lines.
+2. **Provider apply** — `onChangeBooking` payload field **`pricingAdjustment`**, with **`mode: 'MANUAL_LINES'`** and **`additionalAdjustments`** equal to the **provider** inline editor rows **plus** these admin custom lines (concatenated). `newTotalAmount` remains the full proposed total (already includes those lines on the client).
+
+**Backend expectations**
+
+- **Quote:** When `manualLineAdjustments` is present, add each line to the server’s priced subtotal (before tax) for the change intent, and return quote totals / `amountDue` / line items that **include** these rows so the UI and `clientProposedTotal` stay in tolerance.
+- **Provider change API:** When `pricingAdjustment.additionalAdjustments` includes the same rows, persist them on the new receipt and charge the **same** total as `newTotalAmount` (within your rounding rules).
+
+If the server ignores `manualLineAdjustments` or `additionalAdjustments`, the customer will see the FE total but pay a different amount.

package/README.md

@@ -0,0 +1,9 @@
+# `@ticketboothapp/booking`
+
+Published as `@ticketboothapp/booking` (see `package.json`).
+
+**Local development in TicketBooth provider-dashboard** (link this package without publishing):
+
+- [docs/local-ticketbooth-provider-dashboard.md](./docs/local-ticketbooth-provider-dashboard.md)
+
+**In this monorepo:** apps use `workspace:*` / `transpilePackages`; run e.g. `npm run dev:booking` or `npm run dev:staff` from the website repo root.

package/docs/local-ticketbooth-provider-dashboard.md

@@ -0,0 +1,60 @@
+# Test `@ticketboothapp/booking` in TicketBooth provider-dashboard (local link)
+
+Use this when developing in **viavia-website** and you want **provider-dashboard** (`ticketbooth-fe`) to load your **workspace package** without publishing to npm.
+
+Provider-dashboard already sets `transpilePackages: ['@ticketboothapp/booking']`, so Next will compile the linked package from source.
+
+## Option A — `npm link` (quick toggle)
+
+**1. Register this package globally**
+
+From this repo’s booking package directory:
+
+```bash
+cd /path/to/viavia-website/packages/viavia-booking
+npm link
+```
+
+**2. Point provider-dashboard at that link**
+
+```bash
+cd /path/to/ticketbooth-fe/apps/provider-dashboard
+npm link @ticketboothapp/booking
+```
+
+**3. Run provider-dashboard**
+
+From the TicketBooth frontend monorepo root (typical for that repo):
+
+```bash
+cd /path/to/ticketbooth-fe
+npm run dev:provider
+```
+
+**Undo** (back to the version from the registry):
+
+```bash
+cd /path/to/ticketbooth-fe/apps/provider-dashboard
+npm unlink @ticketboothapp/booking
+npm install
+```
+
+If the workspace layout is odd, run `npm install` once at the `ticketbooth-fe` root after unlink.
+
+---
+
+## Option B — `file:` in `package.json` (stays on until you revert)
+
+In `apps/provider-dashboard/package.json`, set:
+
+```json
+"@ticketboothapp/booking": "file:/absolute/path/to/viavia-website/packages/viavia-booking"
+```
+
+Then from `ticketbooth-fe` root: `npm install` and `npm run dev:provider`.
+
+---
+
+## Option C — `overrides` in `ticketbooth-fe` root `package.json`
+
+Add an `overrides` entry for `@ticketboothapp/booking` pointing at the same `file:` path, then `npm install` at the monorepo root.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.72",
+  "version": "1.2.75",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -726,6 +726,11 @@ export function AdminChangeBookingFlow({
   );
   /** Fetched add-ons for the selected product option */
   const [addOns, setAddOns] = useState<AddOn[]>([]);
+  /** Admin receipt-only adjustments (signed amount); affects FE subtotal/tax/total until persisted server-side. */
+  const [adminCustomReceiptLines, setAdminCustomReceiptLines] = useState<
+    Array<{ id: string; label: string; amountInput: string; amountSign: 1 | -1 }>
+  >([]);
+  const adminCustomLineIdRef = useRef(0);
 
   // Auto-apply promo code when parent page passes one (e.g. partner pages).
   // Seed input only; validate/apply runs after date/time + tickets exist (debounced + handleApplyPromo).
@@ -2909,6 +2914,22 @@ export function AdminChangeBookingFlow({
       : subtotal;
   const effectiveSubtotal = effectiveSubtotalBeforeAddOns + addOnTotal;
 
+  const adminCustomAdjustmentTotal = useMemo(
+    () =>
+      roundMoney(
+        adminCustomReceiptLines.reduce((sum, line) => {
+          const raw = line.amountInput.trim();
+          if (raw === '' || raw === '+' || raw === '-') return sum;
+          const n = Number(raw);
+          if (!Number.isFinite(n)) return sum;
+          const sign = line.amountSign ?? 1;
+          return sum + sign * Math.abs(n);
+        }, 0)
+      ),
+    [adminCustomReceiptLines]
+  );
+  const effectiveSubtotalForCheckout = roundMoney(effectiveSubtotal + adminCustomAdjustmentTotal);
+
   /** Stable signature for promo discount API (avoid effect re-fire on object identity churn). */
   const quantitiesSignature = useMemo(
     () =>
@@ -3123,7 +3144,7 @@ export function AdminChangeBookingFlow({
       selectedAvailability.availabilityId ?? '',
       currency,
       quantitiesSignature,
-      String(Math.round(effectiveSubtotal * 100)),
+      String(Math.round(effectiveSubtotalForCheckout * 100)),
       lockedPromoCode ? String(Math.round((originalReceipt?.promoAmount ?? 0) * 100)) : '',
     ].join('::');
   }, [
@@ -3136,7 +3157,7 @@ export function AdminChangeBookingFlow({
     product.productId,
     currency,
     quantitiesSignature,
-    effectiveSubtotal,
+    effectiveSubtotalForCheckout,
     lockedPromoCode,
     originalReceipt?.promoAmount,
   ]);
@@ -3144,7 +3165,7 @@ export function AdminChangeBookingFlow({
   promoDiscountParamsRef.current = {
     selectedAvailability,
     ticketLineItems: ticketLineItems.map((l) => ({ category: l.category, qty: l.qty })),
-    effectiveSubtotal,
+    effectiveSubtotal: effectiveSubtotalForCheckout,
     appliedPromoCode,
     changeBookingPromo: lockedPromoCode
       ? { priorAmount: originalReceipt?.promoAmount }
@@ -3225,12 +3246,12 @@ export function AdminChangeBookingFlow({
       : 0;
   const effectivePromoDiscountAmount =
     promoDiscountAmount > 0 ? promoDiscountAmount : lockedPromoFallbackAmount;
-  const taxOnSubtotal = isTaxIncludedInPrice ? 0 : effectiveSubtotal * (pricingConfig?.taxRate ?? 0);
+  const taxOnSubtotal = isTaxIncludedInPrice ? 0 : effectiveSubtotalForCheckout * (pricingConfig?.taxRate ?? 0);
   const effectiveTax =
     effectivePromoDiscountAmount > 0 && !isGiftCard && !isVoucher
-      ? (effectiveSubtotal - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
+      ? (effectiveSubtotalForCheckout - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
       : taxOnSubtotal;
-  const totalPrice = effectiveSubtotal + effectiveTax - effectivePromoDiscountAmount;
+  const totalPrice = effectiveSubtotalForCheckout + effectiveTax - effectivePromoDiscountAmount;
   /**
    * FE cart rollup for line math, breakdowns, and `clientProposedTotal` hint to the API. Self-serve **footer** totals
    * prefer `latestChangeQuote` once quote succeeds — this value is not an alternate source of truth for checkout.
@@ -3661,9 +3682,12 @@ export function AdminChangeBookingFlow({
       return currentAmount !== originalAmount || currentLabel !== originalLabel || currentMode !== originalMode;
     });
   const hasEffectiveChangeSelection =
-    hasChangeSelection || providerHasEditedLineOverrides || providerHasAdditionalAdjustments;
+    hasChangeSelection ||
+    providerHasEditedLineOverrides ||
+    providerHasAdditionalAdjustments ||
+    Math.abs(adminCustomAdjustmentTotal) >= 0.005;
 
-  const displayedChangeAmounts = resolveChangeFlowDisplayedAmounts({
+  const displayedChangeAmountsRaw = resolveChangeFlowDisplayedAmounts({
     providerPreview: providerTotalsPreview,
     serverQuotePreview:
       isCustomerSelfServeChange && latestChangeQuote?.serverDisplay
@@ -3671,13 +3695,26 @@ export function AdminChangeBookingFlow({
         : null,
     fromCart: {
       total: changeFlowNewBookingTotal,
-      subtotal: effectiveSubtotal,
+      subtotal: effectiveSubtotalForCheckout,
       tax: effectiveTax,
     },
   });
-  const displayChangeFlowProposedTotal = displayedChangeAmounts.total;
-  const displayChangeFlowSubtotal = displayedChangeAmounts.subtotal;
-  const displayChangeFlowTax = displayedChangeAmounts.tax;
+  /** When cart drives display, {@link effectiveSubtotalForCheckout} already includes admin adjustments — do not add twice. */
+  const displayLayerUsesExternalPricing =
+    Boolean(providerTotalsPreview) ||
+    (isCustomerSelfServeChange && Boolean(latestChangeQuote?.serverDisplay));
+  const adminTaxDeltaForExternalDisplay =
+    displayLayerUsesExternalPricing && !isTaxIncludedInPrice && Math.abs(adminCustomAdjustmentTotal) >= 0.0005
+      ? roundMoney(adminCustomAdjustmentTotal * (pricingConfig?.taxRate ?? 0))
+      : 0;
+  const displayChangeFlowSubtotal = roundMoney(
+    displayedChangeAmountsRaw.subtotal +
+      (displayLayerUsesExternalPricing ? adminCustomAdjustmentTotal : 0)
+  );
+  const displayChangeFlowTax = roundMoney(displayedChangeAmountsRaw.tax + adminTaxDeltaForExternalDisplay);
+  const displayChangeFlowProposedTotal = roundMoney(
+    displayedChangeAmountsRaw.total + adminCustomAdjustmentTotal + adminTaxDeltaForExternalDisplay
+  );
 
   const changeFlowClientEstimateDue = (() => {
     if (!originalReceipt) return totalPrice;
@@ -3772,6 +3809,25 @@ export function AdminChangeBookingFlow({
           .filter((v): v is { label: string; amount: number } => v != null)
       : [];
 
+  /** Same rows as checkout breakdown — sent on provider apply + optional public change-quote for BE parity. */
+  const adminCustomLinesAsAdditionalAdjustments = useMemo((): Array<{ label: string; amount: number }> => {
+    return adminCustomReceiptLines.flatMap((line) => {
+      const raw = line.amountInput.trim();
+      if (raw === '' || raw === '+' || raw === '-') return [];
+      const n = Number(raw);
+      if (!Number.isFinite(n) || Math.abs(n) < 0.0005) return [];
+      const sign = line.amountSign ?? 1;
+      const amount = roundMoney(sign * Math.abs(n));
+      if (Math.abs(amount) < 0.005) return [];
+      return [{ label: line.label.trim() || 'Adjustment', amount }];
+    });
+  }, [adminCustomReceiptLines]);
+
+  const mergedProviderAdditionalAdjustments = useMemo(
+    () => [...providerAdditionalAdjustments, ...adminCustomLinesAsAdditionalAdjustments],
+    [providerAdditionalAdjustments, adminCustomLinesAsAdditionalAdjustments]
+  );
+
   const changeFlowSelectionPreview = useMemo((): ChangeFlowSelectionPreview | null => {
     if (!selectedAvailability || totalQuantity <= 0) return null;
     const ticketsLine = formatTicketLineItemsForSummary(
@@ -3847,7 +3903,7 @@ export function AdminChangeBookingFlow({
       return;
     }
     onPricePreviewChange({
-      subtotal: originalReceipt ? displayChangeFlowSubtotal : effectiveSubtotal,
+      subtotal: originalReceipt ? displayChangeFlowSubtotal : effectiveSubtotalForCheckout,
       tax:
         !isTaxIncludedInPrice
           ? originalReceipt
@@ -3861,7 +3917,7 @@ export function AdminChangeBookingFlow({
     onPricePreviewChange,
     selectedAvailability,
     totalQuantity,
-    effectiveSubtotal,
+    effectiveSubtotalForCheckout,
     effectiveTax,
     displayChangeFlowProposedTotal,
     displayChangeFlowSubtotal,
@@ -3926,6 +3982,9 @@ export function AdminChangeBookingFlow({
             newPassengerCounts: bookingItems,
             // Omit when empty: backend treats [] as "clear all"; missing = preserve stored selections (BookingChangeIntentService).
             ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
+            ...(adminCustomLinesAsAdditionalAdjustments.length > 0
+              ? { manualLineAdjustments: adminCustomLinesAsAdditionalAdjustments }
+              : {}),
             clientProposedTotal: changeFlowNewBookingTotal,
             capacitySeatCredit: {
               enabled: true,
@@ -3939,7 +3998,7 @@ export function AdminChangeBookingFlow({
             quote,
             {
               total: changeFlowNewBookingTotal,
-              subtotal: effectiveSubtotal,
+              subtotal: effectiveSubtotalForCheckout,
               tax: effectiveTax,
             },
             currency
@@ -3947,7 +4006,7 @@ export function AdminChangeBookingFlow({
           setLatestChangeQuote(
             mergeQuoteSliceWithServerPreview(slice, quote, {
               total: changeFlowNewBookingTotal,
-              subtotal: effectiveSubtotal,
+              subtotal: effectiveSubtotalForCheckout,
               tax: effectiveTax,
             }, currency),
           );
@@ -3981,13 +4040,14 @@ export function AdminChangeBookingFlow({
     addOnSelections,
     changeFlowInitialTicketCount,
     changeFlowNewBookingTotal,
-    effectiveSubtotal,
+    effectiveSubtotalForCheckout,
     effectiveTax,
     totalPrice,
     currency,
     activeOptions,
     initialValues?.availabilityId,
     initialValues?.returnAvailabilityId,
+    adminCustomLinesAsAdditionalAdjustments,
   ]);
 
   // Auto-select product option when date is selected: most popular if set, otherwise first available.
@@ -4518,6 +4578,9 @@ export function AdminChangeBookingFlow({
           newReturnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
           newPassengerCounts: bookingItems,
           ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
+          ...(adminCustomLinesAsAdditionalAdjustments.length > 0
+            ? { manualLineAdjustments: adminCustomLinesAsAdditionalAdjustments }
+            : {}),
           clientProposedTotal:
             latestChangeQuote?.serverDisplay?.total ?? changeFlowNewBookingTotal,
         });
@@ -4525,7 +4588,7 @@ export function AdminChangeBookingFlow({
           quote,
           {
             total: changeFlowNewBookingTotal,
-            subtotal: effectiveSubtotal,
+            subtotal: effectiveSubtotalForCheckout,
             tax: effectiveTax,
           },
           currency
@@ -4536,7 +4599,7 @@ export function AdminChangeBookingFlow({
         setLatestChangeQuote(
           mergeQuoteSliceWithServerPreview(quoteSlice, quote, {
             total: changeFlowNewBookingTotal,
-            subtotal: effectiveSubtotal,
+            subtotal: effectiveSubtotalForCheckout,
             tax: effectiveTax,
           }, currency),
         );
@@ -4679,6 +4742,21 @@ export function AdminChangeBookingFlow({
           type: 'FEE' as const,
           quantity: totalQuantity,
         })),
+        ...adminCustomReceiptLines.flatMap((adjLine) => {
+          const raw = adjLine.amountInput.trim();
+          if (raw === '' || raw === '+' || raw === '-') return [];
+          const n = Number(raw);
+          if (!Number.isFinite(n) || Math.abs(n) < 0.0005) return [];
+          const sign = adjLine.amountSign ?? 1;
+          const amount = sign * Math.abs(n);
+          return [
+            {
+              label: adjLine.label.trim() || 'Adjustment',
+              amount,
+              type: 'FEE' as const,
+            },
+          ];
+        }),
         ...(!isTaxIncludedInPrice && taxForBreakdown > 0
           ? [
               {
@@ -4772,7 +4850,7 @@ export function AdminChangeBookingFlow({
           returnPriceAdjustment: checkoutReturnLineAmount,
           cancellationPolicyFee,
           cancellationPolicyLabel: effectiveCancellationPolicyLabel,
-          subtotal: effectiveSubtotal,
+          subtotal: effectiveSubtotalForCheckout,
           tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
           totalQuantity,
           isTaxIncludedInPrice,
@@ -4833,7 +4911,7 @@ export function AdminChangeBookingFlow({
         returnPriceAdjustment: checkoutReturnLineAmount,
         cancellationPolicyFee,
         cancellationPolicyLabel: effectiveCancellationPolicyLabel,
-        subtotal: effectiveSubtotal,
+        subtotal: effectiveSubtotalForCheckout,
         tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
         total: amountDueForCheckout,
         totalQuantity,
@@ -4954,11 +5032,13 @@ export function AdminChangeBookingFlow({
           newTotalAmount: displayChangeFlowProposedTotal,
           additionalHoursCount: null,
           pricingAdjustment:
-            providerPricingOverrides.length > 0 || providerAdditionalAdjustments.length > 0
+            providerPricingOverrides.length > 0 || mergedProviderAdditionalAdjustments.length > 0
               ? {
                   mode: 'MANUAL_LINES',
-                  lineOverrides: providerPricingOverrides,
-                  additionalAdjustments: providerAdditionalAdjustments,
+                  ...(providerPricingOverrides.length > 0 ? { lineOverrides: providerPricingOverrides } : {}),
+                  ...(mergedProviderAdditionalAdjustments.length > 0
+                    ? { additionalAdjustments: mergedProviderAdditionalAdjustments }
+                    : {}),
                 }
               : undefined,
           capacitySeatCredit: {
@@ -5361,73 +5441,188 @@ export function AdminChangeBookingFlow({
                   </>
                 }
                 extraBeforeSubtotal={
-                  showProviderPricingInlineEditor && (providerPricingUi?.additionalAdjustments?.length ?? 0) > 0 ? (
-                    <div className="space-y-1">
-                      {providerPricingUi?.additionalAdjustments?.map((adj) => (
-                        <div key={adj.id} className="flex items-center justify-between gap-2 text-sm">
-                          <div className="flex min-w-0 items-center gap-1">
-                            <button
-                              type="button"
-                              className="rounded border border-stone-300 px-1 text-xs text-stone-600 hover:bg-stone-100"
-                              onClick={() => providerPricingUi?.onRemoveAdditionalAdjustment?.(adj.id)}
-                            >
-                              -
-                            </button>
+                  <>
+                    {showProviderPricingInlineEditor && (providerPricingUi?.additionalAdjustments?.length ?? 0) > 0 ? (
+                      <div className="space-y-1">
+                        {providerPricingUi?.additionalAdjustments?.map((adj) => (
+                          <div key={adj.id} className="flex items-center justify-between gap-2 text-sm">
+                            <div className="flex min-w-0 items-center gap-1">
+                              <button
+                                type="button"
+                                className="rounded border border-stone-300 px-1 text-xs text-stone-600 hover:bg-stone-100"
+                                onClick={() => providerPricingUi?.onRemoveAdditionalAdjustment?.(adj.id)}
+                              >
+                                -
+                              </button>
+                              <input
+                                type="text"
+                                className="w-40 rounded border border-stone-300 px-2 py-0.5 text-sm"
+                                placeholder="Line description"
+                                value={adj.label}
+                                onChange={(e) =>
+                                  providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, { label: e.target.value })
+                                }
+                              />
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <select
+                                className="rounded border border-stone-300 px-1 py-0.5 text-xs"
+                                value={adj.mode}
+                                onChange={(e) =>
+                                  providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
+                                    mode: e.target.value as 'DISCOUNT' | 'CHARGE',
+                                  })
+                                }
+                              >
+                                <option value="DISCOUNT">-</option>
+                                <option value="CHARGE">+</option>
+                              </select>
+                              <input
+                                type="text"
+                                inputMode="decimal"
+                                className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+                                placeholder="0.00"
+                                value={adj.amountInput}
+                                onChange={(e) =>
+                                  providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
+                                    amountInput: e.target.value,
+                                  })
+                                }
+                              />
+                            </div>
+                          </div>
+                        ))}
+                        <button
+                          type="button"
+                          className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
+                          onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
+                        >
+                          + add line item
+                        </button>
+                      </div>
+                    ) : showProviderPricingInlineEditor ? (
+                      <button
+                        type="button"
+                        className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
+                        onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
+                      >
+                        + add line item
+                      </button>
+                    ) : null}
+                    <div className="space-y-3">
+                      <div className="flex justify-center">
+                        <button
+                          type="button"
+                          className="admin-custom-receipt-line-add inline-flex items-center gap-1.5 rounded-full border border-dashed border-stone-300 bg-stone-50/80 text-xs font-medium text-stone-600 hover:border-stone-400 hover:bg-stone-100"
+                          onClick={() => {
+                            adminCustomLineIdRef.current += 1;
+                            setAdminCustomReceiptLines((prev) => [
+                              ...prev,
+                              {
+                                id: `admin-rcpt-${adminCustomLineIdRef.current}`,
+                                label: '',
+                                amountInput: '',
+                                amountSign: 1,
+                              },
+                            ]);
+                          }}
+                        >
+                          <span className="text-base font-semibold leading-none text-stone-700" aria-hidden>
+                            +
+                          </span>
+                          Add custom line
+                        </button>
+                      </div>
+                      {adminCustomReceiptLines.map((adj) => {
+                        const sign = adj.amountSign ?? 1;
+                        return (
+                          <div
+                            key={adj.id}
+                            className="admin-custom-receipt-line flex flex-wrap items-center gap-2 text-sm sm:flex-nowrap"
+                          >
                             <input
                               type="text"
-                              className="w-40 rounded border border-stone-300 px-2 py-0.5 text-sm"
-                              placeholder="Line description"
+                              className="admin-custom-receipt-input min-w-[8rem] flex-1 rounded-md border border-stone-300 bg-white text-sm text-stone-800 placeholder:text-stone-400"
+                              placeholder="Description"
                               value={adj.label}
                               onChange={(e) =>
-                                providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, { label: e.target.value })
+                                setAdminCustomReceiptLines((prev) =>
+                                  prev.map((l) => (l.id === adj.id ? { ...l, label: e.target.value } : l))
+                                )
                               }
                             />
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <select
-                              className="rounded border border-stone-300 px-1 py-0.5 text-xs"
-                              value={adj.mode}
-                              onChange={(e) =>
-                                providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
-                                  mode: e.target.value as 'DISCOUNT' | 'CHARGE',
-                                })
-                              }
+                            <div
+                              className="flex shrink-0 rounded-lg border border-stone-300 bg-stone-100/90 p-0.5 shadow-sm"
+                              role="group"
+                              aria-label="Line adds to total or reduces it"
                             >
-                              <option value="DISCOUNT">-</option>
-                              <option value="CHARGE">+</option>
-                            </select>
+                              <button
+                                type="button"
+                                className={`admin-custom-receipt-segment rounded-md text-xs font-semibold transition-colors sm:text-sm ${
+                                  sign === 1
+                                    ? 'bg-white text-emerald-800 shadow-sm ring-1 ring-stone-200/80'
+                                    : 'text-stone-500 hover:bg-stone-200/60 hover:text-stone-700'
+                                }`}
+                                aria-pressed={sign === 1}
+                                onClick={() =>
+                                  setAdminCustomReceiptLines((prev) =>
+                                    prev.map((l) => (l.id === adj.id ? { ...l, amountSign: 1 } : l))
+                                  )
+                                }
+                              >
+                                Charge (+)
+                              </button>
+                              <button
+                                type="button"
+                                className={`admin-custom-receipt-segment rounded-md text-xs font-semibold transition-colors sm:text-sm ${
+                                  sign === -1
+                                    ? 'bg-white text-red-800 shadow-sm ring-1 ring-stone-200/80'
+                                    : 'text-stone-500 hover:bg-stone-200/60 hover:text-stone-700'
+                                }`}
+                                aria-pressed={sign === -1}
+                                onClick={() =>
+                                  setAdminCustomReceiptLines((prev) =>
+                                    prev.map((l) => (l.id === adj.id ? { ...l, amountSign: -1 } : l))
+                                  )
+                                }
+                              >
+                                Credit (−)
+                              </button>
+                            </div>
                             <input
                               type="text"
                               inputMode="decimal"
-                              className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+                              className="admin-custom-receipt-input-amount w-[7rem] shrink-0 rounded-md border border-stone-300 bg-white text-right text-sm font-medium tabular-nums text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
                               placeholder="0.00"
+                              aria-label="Amount"
                               value={adj.amountInput}
-                              onChange={(e) =>
-                                providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
-                                  amountInput: e.target.value,
-                                })
-                              }
+                              onChange={(e) => {
+                                const v = e.target.value.replace(/[^0-9.]/g, '');
+                                const parts = v.split('.');
+                                const normalized =
+                                  parts.length <= 1 ? v : `${parts[0]}.${parts.slice(1).join('').replace(/\./g, '')}`;
+                                setAdminCustomReceiptLines((prev) =>
+                                  prev.map((l) => (l.id === adj.id ? { ...l, amountInput: normalized } : l))
+                                );
+                              }}
                             />
+                            <button
+                              type="button"
+                              className="admin-custom-receipt-remove ml-auto shrink-0 rounded-md text-stone-400 hover:bg-stone-100 hover:text-stone-700 sm:ml-0"
+                              aria-label="Remove this line"
+                              onClick={() =>
+                                setAdminCustomReceiptLines((prev) => prev.filter((l) => l.id !== adj.id))
+                              }
+                            >
+                              <span className="block text-xl leading-none" aria-hidden>
+                                ×
+                              </span>
+                            </button>
                           </div>
-                        </div>
-                      ))}
-                      <button
-                        type="button"
-                        className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
-                        onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
-                      >
-                        + add line item
-                      </button>
+                        );
+                      })}
                     </div>
-                  ) : showProviderPricingInlineEditor ? (
-                    <button
-                      type="button"
-                      className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
-                      onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
-                    >
-                      + add line item
-                    </button>
-                  ) : undefined
+                  </>
                 }
                 firstName={firstName}
                 lastName={lastName}