fix: add fallback for crypto.randomUUID browser compatibility

Implemented multi-tier UUID generation strategy to support older browsers and environments that don't have native crypto.randomUUID support. Includes RFC4122 v4 compliant fallback using Crypto API and Math.random() for maximum compatibility.

Author: engahmed1190

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+- **Browser Compatibility**
+  - Fixed "crypto.randomUUID is not a function" error in POS Events Store
+  - Added robust UUID generation with multi-tier fallback strategy (native API → Crypto API → Math.random)
+  - Implemented RFC4122 v4 compliant UUID generation for older browsers and environments
+  - Performance optimization with pre-computed byte-to-hex lookup table
+  - Support for globalThis, window.crypto, and legacy environments
+
 ## [1.7.1] - 2025-11-13
 
 ### Added

POS/src/stores/posEvents.js

@@ -17,6 +17,41 @@ import { ref, computed } from 'vue'
 import { logger } from '@/utils/logger'
 
 const log = logger.create('POSEvents')
+const byteToHex = Array.from({ length: 256 }, (_, i) => i.toString(16).padStart(2, '0'))
+
+/**
+ * Generate a UUID with fallback for environments that don't support crypto.randomUUID
+ * @returns {string} - A unique identifier
+ */
+function generateUUID() {
+	const cryptoSource = typeof globalThis !== 'undefined' && globalThis.crypto
+		? globalThis.crypto
+		: (typeof window !== 'undefined' ? window.crypto : undefined)
+
+	if (cryptoSource?.randomUUID) {
+		try {
+			return cryptoSource.randomUUID()
+		} catch (error) {
+			log.warn('crypto.randomUUID failed, falling back to manual generation', error)
+		}
+	}
+
+	const getRandomValues = cryptoSource?.getRandomValues?.bind(cryptoSource)
+	if (getRandomValues && typeof Uint8Array !== 'undefined') {
+		const bytes = getRandomValues(new Uint8Array(16))
+		bytes[6] = bytes[6] & 0x0f | 0x40
+		bytes[8] = bytes[8] & 0x3f | 0x80
+
+		const hex = Array.from(bytes, byte => byteToHex[byte]).join('')
+		return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`
+	}
+
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+		const r = Math.random() * 16 | 0
+		const v = c === 'x' ? r : (r & 0x3 | 0x8)
+		return v.toString(16)
+	})
+}
 
 export const usePOSEventsStore = defineStore('posEvents', () => {
 	// ========================================================================
@@ -82,7 +117,7 @@ export const usePOSEventsStore = defineStore('posEvents', () => {
 			type: eventType,
 			payload,
 			timestamp: Date.now(),
-			id: crypto.randomUUID()
+			id: generateUUID()
 		}
 
 		// Add to history