Refactor Alpine.js components: remove memory cleanup code from requests, fix keyboard event handling in validation

app/Views/shared/script_requests.php

@@ -112,9 +112,6 @@ document.addEventListener('alpine:init', () => {
 			this.totalPages = Math.ceil(this.filtered.length / this.pageSize) || 1;
 		},
 
-		// Track timeouts for cleanup
-		toastTimeouts: [],
-		
 		init() {
 			this.today = new Date().toISOString().slice(0, 10);
 			this.filter.date1 = this.today;
@@ -123,57 +120,35 @@ document.addEventListener('alpine:init', () => {
 			const defaultPrinter = '<?= $config[session()->get("userrole")]["sampleDialog"]["defaultPrinter"] ?? "lab" ?>';
 			this.selectedPrinter = defaultPrinter || 'lab';
 			
-			// Single consolidated watcher for list changes
+			// Watchers for reactive updates
 			this.$watch('list', () => {
 				this.computeFiltered();
 				this.computeValidatedCount();
 			});
 			
-			// Single watcher for filter changes
 			this.$watch('filterKey', () => this.computeFiltered());
 			this.$watch('filterTable', () => {
 				this.currentPage = 1;
 				this.computeFiltered();
 			});
 			
-			// Single watcher for computed chain
 			this.$watch('filtered', () => {
 				this.computeSorted();
 				this.computeTotalPages();
 			});
 			
-			// Sort changes trigger pagination update
 			this.$watch('sortCol', () => this.computeSorted());
 			this.$watch('sortAsc', () => this.computeSorted());
 			this.$watch('sorted', () => this.computePaginated());
 			this.$watch('currentPage', () => this.computePaginated());
 			
-			// Watch audit data changes to recompute events
 			this.$watch('auditData', () => {
 				this.computeAuditEvents();
 			});
 			
-			// Register cleanup on destroy
-			this.$cleanup(() => this.destroy());
-			
+			// Initial load only - no auto-refresh
 			this.fetchList();
 		},
-		
-		// Cleanup method to prevent memory leaks
-		destroy() {
-			// Clear all tracked timeouts
-			this.toastTimeouts.forEach(id => clearTimeout(id));
-			this.toastTimeouts = [];
-			
-			// Clear large data structures
-			this.list = [];
-			this.filtered = [];
-			this.sorted = [];
-			this.paginated = [];
-			this.auditData = null;
-			this.item = null;
-			this.previewItem = null;
-		},
 
 		fetchList() {
 			this.isLoading = true;
@@ -557,13 +532,7 @@ document.addEventListener('alpine:init', () => {
 			toast.className = `alert alert-${type} fixed top-4 right-4 z-50`;
 			toast.innerHTML = `<i class="fa ${type === 'error' ? 'fa-times-circle' : 'fa-check-circle'}"></i> ${message}`;
 			document.body.appendChild(toast);
-			const timeoutId = setTimeout(() => {
-				toast.remove();
-				// Remove from tracking array
-				const idx = this.toastTimeouts.indexOf(timeoutId);
-				if (idx > -1) this.toastTimeouts.splice(idx, 1);
-			}, 2000);
-			this.toastTimeouts.push(timeoutId);
+			setTimeout(() => toast.remove(), 2000);
 		},
 	}));
 });

app/Views/shared/script_validation.php

@@ -86,7 +86,7 @@ document.addEventListener('alpine:init', () => {
 				this.currentPage = 1;
 			});
 
-			// Set up watchers to update cached computed properties
+			// Watchers for reactive updates
 			this.$watch('unvalidatedList', () => {
 				this.computeUnvalidatedFiltered();
 				this.computeUnvalidatedCount();
@@ -111,13 +111,12 @@ document.addEventListener('alpine:init', () => {
 				this.computeUnvalidatedPaginated();
 			});
 
-			// Auto-fetch on page load
+			// Initial load only - no auto-refresh
 			this.fetchUnvalidated();
 
-			// Keyboard shortcuts for dialog
-			document.addEventListener('keydown', (e) => {
+			// Keyboard shortcuts - added/removed when dialog opens/closes
+			this._keyboardHandler = (e) => {
 				if (this.isDialogValOpen) {
-					// N key - skip to next
 					if (e.key === 'n' || e.key === 'N') {
 						if (!e.target.closest('input, textarea, button')) {
 							e.preventDefault();
@@ -125,7 +124,8 @@ document.addEventListener('alpine:init', () => {
 						}
 					}
 				}
-			});
+			};
+			document.addEventListener('keydown', this._keyboardHandler);
 		},
 
 		fetchUnvalidated() {
@@ -198,6 +198,10 @@ document.addEventListener('alpine:init', () => {
 			this.valAccessnumber = item.SP_ACCESSNUMBER;
 			this.valItem = item;
 			this.isDialogValOpen = true;
+			// Re-add keyboard handler when dialog opens
+			if (this._keyboardHandler) {
+				document.addEventListener('keydown', this._keyboardHandler);
+			}
 			setTimeout(() => {
 				const btn = document.getElementById('validate-btn');
 				if (btn) btn.focus();
@@ -225,6 +229,11 @@ document.addEventListener('alpine:init', () => {
 			}
 			this.validationDelayRemaining = 0;
 			this.isIframeLoaded = false;
+			// Remove keyboard handler when dialog closes
+			if (this._keyboardHandler) {
+				document.removeEventListener('keydown', this._keyboardHandler);
+				this._keyboardHandler = null;
+			}
 		},
 
 		skipToNext() {