From 5544b5e6318b9fda39785adceff3ff88908d6960 Mon Sep 17 00:00:00 2001
From: NotAbdelrahmanelsayed <NotAbdelrahmanelsayed@users.noreply.github.com>
Date: Tue, 7 Apr 2026 10:49:04 +0200
Subject: [PATCH] feat: focus first quick-amount button on payment dialog open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the payment dialog opens on desktop, the first quick-amount button
(always the exact grand total) is auto-focused. The cashier can press
Enter immediately to pay the exact amount and complete the invoice —
no mouse click needed.

Also adds Enter-to-complete to the mobile custom-amount input and the
numpad: pressing Enter after a payment auto-completes the invoice if
fully paid. Entering 0 + Enter on mobile triggers pay-on-account when
credit sale is enabled.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 POS/src/components/sale/PaymentDialog.vue | 67 ++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/POS/src/components/sale/PaymentDialog.vue b/POS/src/components/sale/PaymentDialog.vue
index 2f843e62..af7984a7 100644
--- a/POS/src/components/sale/PaymentDialog.vue
+++ b/POS/src/components/sale/PaymentDialog.vue
@@ -633,7 +633,23 @@
 						</div>
 						<div class="grid grid-cols-4 gap-1.5">
 							<button
-								v-for="amount in quickAmounts"
+								v-if="quickAmounts.length > 0"
+								ref="firstQuickAmountBtnRef"
+								@click="addCustomPayment(lastSelectedMethod, quickAmounts[0])"
+								@keydown.enter.stop.prevent="handleFirstQuickAmountEnter"
+								:disabled="isQuickAmountDisabled(quickAmounts[0])"
+								:class="[
+									'font-semibold rounded-lg border-2 transition-all',
+									isCompactMode ? 'px-2 py-2 text-sm' : 'px-2 py-2 text-sm',
+									isQuickAmountDisabled(quickAmounts[0])
+										? 'bg-gray-50 border-gray-100 text-gray-300 cursor-not-allowed'
+										: 'bg-white border-gray-200 hover:border-blue-400 hover:bg-blue-50 text-gray-700 hover:text-blue-600'
+								]"
+							>
+								{{ formatCurrency(quickAmounts[0]) }}
+							</button>
+							<button
+								v-for="amount in quickAmounts.slice(1)"
 								:key="amount"
 								@click="addCustomPayment(lastSelectedMethod, amount)"
 								:disabled="isQuickAmountDisabled(amount)"
@@ -685,6 +701,7 @@
 										isExactAmountModeActive && !isCashPaymentMethod(lastSelectedMethod) ? 'text-gray-300' : 'text-gray-400'
 									]">{{ currencySymbol }}</span>
 									<input
+										ref="mobileAmountInputRef"
 										v-model="mobileCustomAmount"
 										type="number"
 										inputmode="decimal"
@@ -699,6 +716,7 @@
 												? 'bg-gray-50 border-gray-100 text-gray-300 cursor-not-allowed'
 												: 'bg-white border-gray-200 focus:ring-1 focus:ring-blue-500'
 										]"
+										@keydown.enter.prevent="handleMobileAmountEnter"
 									/>
 								</div>
 								<button
@@ -1178,12 +1196,16 @@ watch(
 function handleNumpadEnter(value) {
 	if (value > 0 && lastSelectedMethod.value) {
 		numpadAddPayment()
+		nextTick(() => {
+			if (remainingAmount.value === 0 && totalPaid.value > 0 && canComplete.value) {
+				completePayment()
+			}
+		})
 	} else if (
 		remainingAmount.value === 0 &&
 		totalPaid.value > 0 &&
 		canComplete.value
 	) {
-		// If fully paid and can complete, trigger complete payment
 		completePayment()
 	}
 }
@@ -1203,6 +1225,10 @@ const {
 
 // Mobile custom amount state
 const mobileCustomAmount = ref("")
+const mobileAmountInputRef = ref(null)
+
+// Desktop first quick-amount button ref (focused on open for Enter-to-pay)
+const firstQuickAmountBtnRef = ref(null)
 
 function addMobileCustomPayment() {
 	const amount = Number.parseFloat(mobileCustomAmount.value)
@@ -1212,6 +1238,33 @@ function addMobileCustomPayment() {
 	}
 }
 
+async function handleMobileAmountEnter() {
+	const amount = Number.parseFloat(mobileCustomAmount.value)
+	if (amount > 0 && lastSelectedMethod.value) {
+		await addCustomPayment(lastSelectedMethod.value, amount)
+		mobileCustomAmount.value = ""
+		nextTick(() => {
+			mobileAmountInputRef.value?.focus()
+			mobileAmountInputRef.value?.select()
+		})
+		if (canComplete.value && !isSubmitting.value) {
+			completePayment()
+		}
+	} else if (canComplete.value && !isSubmitting.value) {
+		completePayment()
+	} else if (props.allowCreditSale && paymentEntries.value.length === 0) {
+		addCreditAccountPayment()
+	}
+}
+
+async function handleFirstQuickAmountEnter() {
+	if (!lastSelectedMethod.value || !quickAmounts.value?.[0]) return
+	await addCustomPayment(lastSelectedMethod.value, quickAmounts.value[0])
+	if (canComplete.value && !isSubmitting.value) {
+		completePayment()
+	}
+}
+
 function numpadAddPayment() {
 	if (numpadValue.value > 0 && lastSelectedMethod.value) {
 		addCustomPayment(lastSelectedMethod.value, numpadValue.value)
@@ -1990,6 +2043,16 @@ watch(show, (newVal) => {
 			lastSelectedMethod.value = defaultMethod || paymentMethods.value[0]
 		}
 
+		// Pre-populate mobile input and focus first quick-amount button on desktop
+		if (props.grandTotal > 0) {
+			mobileCustomAmount.value = props.grandTotal.toFixed(2)
+			nextTick(() => {
+				mobileAmountInputRef.value?.focus()
+				mobileAmountInputRef.value?.select()
+				firstQuickAmountBtnRef.value?.focus()
+			})
+		}
+
 		// Customer credit and balance is pre-fetched when customer changes (see watcher above)
 		// Just log for debugging
 		const creditEnabled = props.allowCreditSale || props.allowCustomerCreditPayment