perf: optimize cart operations and item rendering performance

- Remove blocking toast notifications on item add for instant UI response
- Add v-memo directive to item cards to prevent unnecessary re-renders
- Cache tax rate calculations to avoid repeated loops
- Optimize offer snapshot sync with memoization and nextTick
- Improve offer reapplication with hash-based change detection
- Increase debounce delay to 800ms for better batching

Author: Ahmed Osama

POS/src/components/sale/ItemsSelector.vue

@@ -180,6 +180,7 @@
 					<div
 						v-for="item in paginatedItems"
 						:key="item.item_code"
+						v-memo="[item.item_code, item.actual_qty, item.stock_qty, item.rate, item.price_list_rate]"
 						@click="handleItemClick(item)"
 						class="relative bg-white border border-gray-200 rounded-lg p-1.5 sm:p-2.5 cursor-pointer hover:border-blue-400 hover:shadow-lg transition-all touch-manipulation active:scale-95 active:shadow-xl"
 					>
@@ -310,6 +311,7 @@
 						<tr
 							v-for="item in paginatedItems"
 							:key="item.item_code"
+							v-memo="[item.item_code, item.actual_qty, item.stock_qty, item.rate, item.price_list_rate]"
 							@click="handleItemClick(item)"
 							class="cursor-pointer hover:bg-blue-50 transition-colors touch-manipulation active:bg-blue-100"
 						>

POS/src/composables/useInvoice.js

@@ -271,6 +271,36 @@ export function useInvoice() {
 		})
 	}
 
+	// Performance: Cache tax calculation to avoid repeated loops
+	let cachedTaxRate = 0
+	let taxRulesCacheKey = ''
+
+	function calculateTotalTaxRate() {
+		// Create cache key from tax rules
+		const currentKey = JSON.stringify(taxRules.value)
+
+		// Return cached value if tax rules haven't changed
+		if (currentKey === taxRulesCacheKey && cachedTaxRate !== 0) {
+			return cachedTaxRate
+		}
+
+		// Calculate total tax rate
+		let totalRate = 0
+		if (taxRules.value && taxRules.value.length > 0) {
+			for (const taxRule of taxRules.value) {
+				if (taxRule.charge_type === "On Net Total" || taxRule.charge_type === "On Previous Row Total") {
+					totalRate += (taxRule.rate || 0)
+				}
+			}
+		}
+
+		// Cache the result
+		cachedTaxRate = totalRate
+		taxRulesCacheKey = currentKey
+
+		return totalRate
+	}
+
 	function recalculateItem(item) {
 		// Step 1: Calculate base amount (rate * quantity)
 		const baseAmount = item.quantity * item.rate
@@ -290,15 +320,9 @@ export function useInvoice() {
 		// Step 3: Calculate net amount (after discount, before tax)
 		const netAmount = baseAmount - discountAmount
 
-		// Step 4: Calculate tax on net amount
-		let taxAmount = 0
-		if (taxRules.value && taxRules.value.length > 0) {
-			for (const taxRule of taxRules.value) {
-				if (taxRule.charge_type === "On Net Total" || taxRule.charge_type === "On Previous Row Total") {
-					taxAmount += (netAmount * (taxRule.rate || 0)) / 100
-				}
-			}
-		}
+		// Step 4: Calculate tax on net amount (optimized with cached tax rate)
+		const totalTaxRate = calculateTotalTaxRate()
+		const taxAmount = (netAmount * totalTaxRate) / 100
 		item.tax_amount = taxAmount
 
 		// Step 5: Calculate final item amount (net amount + tax)

POS/src/pages/POSSale.vue

@@ -644,6 +644,9 @@ const logoutAfterClose = ref(false)
 // Debounce timer for offer reapplication
 const offerReapplyTimer = ref(null)
 
+// Performance: Cache previous cart state to avoid unnecessary reapplications
+let previousCartHash = ''
+
 // Promotion dialog
 const showPromotionManagement = ref(false)
 
@@ -742,22 +745,37 @@ watch(() => shiftStore.hasOpenShift, value => {
 	}
 })
 
-// Watch for cart changes to re-apply offers (optimized - uses computed key instead of deep watch + debounced)
-// Tracks: item_code, quantity, rate, discount_percentage, discount_amount to catch all pricing changes
+// Watch for cart changes to re-apply offers (optimized - only watch length and defer expensive calculations)
+// Performance: Only recalculate hash if cart length changed, then check if content actually changed
 watch(
-	() => cartStore.invoiceItems.map(i =>
-		`${i.item_code}-${i.quantity}-${i.rate}-${i.discount_percentage || 0}-${i.discount_amount || 0}`
-	).join(','),
+	() => cartStore.invoiceItems.length,
 	() => {
+		// Only proceed if there are applied offers
+		if (cartStore.appliedOffers.length === 0) {
+			return
+		}
+
+		// Calculate hash only when length changes
+		const currentHash = cartStore.invoiceItems.map(i =>
+			`${i.item_code}-${i.quantity}-${i.rate}-${i.discount_percentage || 0}-${i.discount_amount || 0}`
+		).join(',')
+
+		// Skip if cart content hasn't actually changed
+		if (currentHash === previousCartHash) {
+			return
+		}
+
+		previousCartHash = currentHash
+
 		// Clear existing timer to prevent multiple API calls
 		if (offerReapplyTimer.value) {
 			clearTimeout(offerReapplyTimer.value)
 		}
 
-		// Set new timer - reapply offers after 500ms of no changes
+		// Set new timer - reapply offers after 800ms of no changes (increased for better performance)
 		offerReapplyTimer.value = setTimeout(async () => {
 			await cartStore.reapplyOffer(shiftStore.currentProfile)
-		}, 500)
+		}, 800)
 	}
 )
 

POS/src/stores/posCart.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { useInvoice } from '@/composables/useInvoice'
 import { toast } from 'frappe-ui'
 import { parseError } from '@/utils/errorHandler'
@@ -74,23 +74,8 @@ export const usePOSCartStore = defineStore('posCart', () => {
 			}
 		}
 
+		// Add item to cart - no toast notification for performance
 		addItemToInvoice(item, qty)
-
-		if (autoAdd) {
-			toast.create({
-				title: "✓ Auto-Added to Cart",
-				text: `${item.item_name} added to cart`,
-				icon: "check",
-				iconClasses: "text-blue-600",
-			})
-		} else {
-			toast.create({
-				title: "Item Added",
-				text: `${item.item_name} added to cart`,
-				icon: "check",
-				iconClasses: "text-green-600",
-			})
-		}
 	}
 
 	function clearCart() {
@@ -564,28 +549,44 @@ export const usePOSCartStore = defineStore('posCart', () => {
 		}
 	}
 
+	// Performance: Cache previous item codes hash to avoid unnecessary recalculations
+	let previousItemCodesHash = ''
+	let cachedItemCodes = []
+	let cachedItemGroups = []
+	let cachedBrands = []
+
 	function syncOfferSnapshot() {
 		// Only sync if values are initialized
 		if (subtotal.value !== undefined && invoiceItems.value) {
-			// Extract item codes, groups, and brands from cart
-			const itemCodes = invoiceItems.value.map(item => item.item_code)
-			const itemGroups = [...new Set(invoiceItems.value.map(item => item.item_group).filter(Boolean))]
-			const brands = [...new Set(invoiceItems.value.map(item => item.brand).filter(Boolean))]
+			// Create hash for item codes to detect actual changes
+			const currentHash = invoiceItems.value.map(item => item.item_code).join(',')
+
+			// Only recalculate expensive operations if items actually changed
+			if (currentHash !== previousItemCodesHash) {
+				cachedItemCodes = invoiceItems.value.map(item => item.item_code)
+				cachedItemGroups = [...new Set(invoiceItems.value.map(item => item.item_group).filter(Boolean))]
+				cachedBrands = [...new Set(invoiceItems.value.map(item => item.brand).filter(Boolean))]
+				previousItemCodesHash = currentHash
+			}
 
 			offersStore.updateCartSnapshot({
 				subtotal: subtotal.value,
 				itemCount: invoiceItems.value.length,
-				itemCodes,
-				itemGroups,
-				brands,
+				itemCodes: cachedItemCodes,
+				itemGroups: cachedItemGroups,
+				brands: cachedBrands,
 			})
 		}
 	}
 
 	// Watch for cart changes to update offer snapshot (min/max thresholds etc.)
-	watch([subtotal, () => invoiceItems.value.length, () => invoiceItems.value.map(i => i.item_code).join(',')], () => {
-		syncOfferSnapshot()
-	}, { immediate: true })
+	// Optimized: Only watch length and subtotal, calculate hash inside the watcher
+	watch([subtotal, () => invoiceItems.value.length], () => {
+		// Defer to next tick to prevent blocking UI
+		nextTick(() => {
+			syncOfferSnapshot()
+		})
+	}, { immediate: true, flush: 'post' })
 
 	return {
 		// State