updated to set boxes , and updated to fill boxes

py_app/app/templates/fg_scan.html

@@ -15,7 +15,128 @@
     }
 </style>
 <script>
+// Global variables for scan-to-boxes feature - must be accessible by all scripts
+let scanToBoxesEnabled = false;
+let currentCpCode = null;
+
+// Define scan-to-boxes functions at global scope
+async function submitScanWithBoxAssignment() {
+    const form = document.getElementById('fg-scan-form');
+    const formData = new FormData(form);
+    
+    console.log('=== submitScanWithBoxAssignment called ===');
+    console.log('Form data entries:');
+    for (let [key, value] of formData.entries()) {
+        console.log(`  ${key}: ${value}`);
+    }
+    
+    try {
+        const response = await fetch(window.location.href, {
+            method: 'POST',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            },
+            body: formData
+        });
+        
+        console.log('Response status:', response.status);
+        console.log('Response ok:', response.ok);
+        
+        if (response.ok) {
+            currentCpCode = formData.get('cp_code');
+            const defectCode = formData.get('defect_code') || '000';
+            
+            console.log('CP Code:', currentCpCode);
+            console.log('Defect Code:', defectCode);
+            
+            showNotification('✅ Scan recorded successfully!', 'success');
+            
+            // Only show box modal if quality code is 000
+            if (defectCode === '000' || defectCode === '0') {
+                console.log('Should show box modal');
+                showBoxModal(currentCpCode);
+            } else {
+                console.log('Defect code not 000, reloading page');
+                setTimeout(() => window.location.reload(), 1000);
+            }
+            
+            // Clear form fields (except operator code)
+            document.getElementById('cp_code').value = '';
+            document.getElementById('oc1_code').value = '';
+            document.getElementById('oc2_code').value = '';
+            document.getElementById('defect_code').value = '';
+        } else {
+            console.error('Response not OK');
+            showNotification('❌ Scan submission failed', 'error');
+        }
+    } catch (error) {
+        console.error('Error in submitScanWithBoxAssignment:', error);
+        showNotification('❌ Error: ' + error.message, 'error');
+    }
+}
+
+function showBoxModal(cpCode) {
+    document.getElementById('modal-cp-code').textContent = cpCode;
+    document.getElementById('box-assignment-modal').style.display = 'block';
+    document.getElementById('scan-box-input').value = '';
+    document.getElementById('scan-box-input').focus();
+}
+
+function closeBoxModal() {
+    document.getElementById('box-assignment-modal').style.display = 'none';
+    window.location.reload();
+}
+
+async function assignCpToBox(boxNumber) {
+    const response = await fetch('/warehouse/assign_cp_to_box', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            box_number: boxNumber,
+            cp_code: currentCpCode
+        })
+    });
+    
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to assign CP to box');
+    }
+    
+    return await response.json();
+}
+
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: ${type === 'success' ? '#4CAF50' : type === 'error' ? '#f44336' : type === 'warning' ? '#ff9800' : '#2196F3'};
+        color: white;
+        padding: 15px 20px;
+        border-radius: 5px;
+        z-index: 10001;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+        font-weight: bold;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        if (notification.parentNode) {
+            notification.parentNode.removeChild(notification);
+        }
+    }, 4000);
+}
+
 document.addEventListener('DOMContentLoaded', function() {
+    // Load toggle state FIRST
+    const savedState = localStorage.getItem('scan_to_boxes_enabled');
+    if (savedState === 'true') {
+        scanToBoxesEnabled = true;
+    }
+    console.log('Initial scanToBoxesEnabled:', scanToBoxesEnabled);
+    
     const operatorCodeInput = document.getElementById('operator_code');
     const cpCodeInput = document.getElementById('cp_code');
     const oc1CodeInput = document.getElementById('oc1_code');
@@ -23,6 +144,17 @@ document.addEventListener('DOMContentLoaded', function() {
     const defectCodeInput = document.getElementById('defect_code');
     const form = document.getElementById('fg-scan-form');
     
+    // Set up toggle checkbox
+    const toggleElement = document.getElementById('scan-to-boxes-toggle');
+    if (toggleElement) {
+        toggleElement.checked = scanToBoxesEnabled;
+        toggleElement.addEventListener('change', function() {
+            scanToBoxesEnabled = this.checked;
+            localStorage.setItem('scan_to_boxes_enabled', this.checked);
+            console.log('Toggle changed - Scan to boxes:', scanToBoxesEnabled);
+        });
+    }
+    
     // Restore saved operator code from localStorage (only Quality Operator Code)
     const savedOperatorCode = localStorage.getItem('fg_scan_operator_code');
     
@@ -417,13 +549,20 @@ document.addEventListener('DOMContentLoaded', function() {
             localStorage.setItem('fg_scan_last_cp', cpCodeInput.value);
             localStorage.setItem('fg_scan_last_defect', defectCodeInput.value);
             
-            // Submit the form
-            form.submit();
+            // Check if scan-to-boxes is enabled and defect code is 000
+            if (scanToBoxesEnabled && this.value === '000') {
+                console.log('Auto-submit: Scan-to-boxes enabled, calling submitScanWithBoxAssignment');
+                submitScanWithBoxAssignment();
+            } else {
+                console.log('Auto-submit: Normal form submission');
+                // Submit the form normally
+                form.submit();
+            }
         }
     });
     
     // Validate form on submit
-    form.addEventListener('submit', function(e) {
+    form.addEventListener('submit', async function(e) {
         let hasError = false;
         
         if (!operatorCodeInput.value.startsWith('OP')) {
@@ -477,6 +616,15 @@ document.addEventListener('DOMContentLoaded', function() {
                 hasError = true;
             }
         }
+        
+        // If validation passed and scan-to-boxes is enabled, intercept submission
+        if (!hasError && scanToBoxesEnabled) {
+            console.log('Validation passed, intercepting for scan-to-boxes');
+            e.preventDefault();
+            e.stopPropagation();
+            await submitScanWithBoxAssignment();
+            return false;
+        }
     });
     
     // Add functionality for clear saved codes button
@@ -501,6 +649,65 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 </script>
+
+<script>
+// Functions for scan-to-boxes feature
+document.addEventListener('DOMContentLoaded', function() {
+    // Quick box creation button
+    document.getElementById('quick-box-create-btn').addEventListener('click', async function() {
+        try {
+            const createResponse = await fetch('/warehouse/manage_boxes', {
+                method: 'POST',
+                headers: { 
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: 'action=add_box'
+            });
+            
+            if (!createResponse.ok) throw new Error('Failed to create box');
+            
+            const result = await createResponse.json();
+            
+            if (result.success && result.box_number) {
+                await assignCpToBox(result.box_number);
+                showNotification(`✅ Box ${result.box_number} created and CP assigned!`, 'success');
+                closeBoxModal();
+            } else {
+                throw new Error(result.error || 'Failed to create box');
+            }
+        } catch (error) {
+            showNotification('❌ Error creating box: ' + error.message, 'error');
+        }
+    });
+    
+    // Assign to scanned box button
+    document.getElementById('assign-to-box-btn').addEventListener('click', async function() {
+        const boxNumber = document.getElementById('scan-box-input').value.trim();
+        if (!boxNumber) {
+            showNotification('⚠️ Please scan or enter a box number', 'warning');
+            return;
+        }
+        
+        try {
+            await assignCpToBox(boxNumber);
+            showNotification(`✅ CP ${currentCpCode} assigned to box ${boxNumber}`, 'success');
+            setTimeout(() => closeBoxModal(), 1000);
+        } catch (error) {
+            showNotification('❌ Error: ' + error.message, 'error');
+        }
+    });
+});
+
+// Close modal when clicking outside
+window.onclick = function(event) {
+    const modal = document.getElementById('box-assignment-modal');
+    if (event.target == modal) {
+        closeBoxModal();
+    }
+}
+</script>
+
 {% endblock %}
 {% block content %}
 <div class="scan-container">
@@ -531,6 +738,17 @@ document.addEventListener('DOMContentLoaded', function() {
 
             <button type="submit" class="btn">Submit</button>
             <button type="button" class="btn" id="clear-saved-btn" style="background-color: #ff6b6b; margin-left: 10px;">Clear Quality Operator</button>
+            
+            <!-- Enable/Disable Scan to Boxes Toggle -->
+            <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
+                <label style="display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;">
+                    <span style="font-weight: bold;">Enable Scan to Boxes:</span>
+                    <input type="checkbox" id="scan-to-boxes-toggle" style="width: 20px; height: 20px; cursor: pointer;">
+                </label>
+                <p style="font-size: 0.85em; color: #666; text-align: center; margin-top: 8px;">
+                    When enabled, good quality scans (000) will prompt for box assignment
+                </p>
+            </div>
         </form>
     </div>
 
@@ -573,4 +791,118 @@ document.addEventListener('DOMContentLoaded', function() {
         </div>
     </div>
 </div>
+
+<!-- Box Assignment Popup Modal -->
+<div id="box-assignment-modal" class="box-modal" style="display: none;">
+    <div class="box-modal-content">
+        <div class="box-modal-header">
+            <h3>Assign to Box</h3>
+            <span class="box-modal-close" onclick="closeBoxModal()">&times;</span>
+        </div>
+        <div class="box-modal-body">
+            <p>CP Code: <strong id="modal-cp-code"></strong></p>
+            
+            <!-- Quick Box Creation -->
+            <div style="margin: 20px 0; padding: 15px; background: #f0f8ff; border-radius: 5px;">
+                <button type="button" id="quick-box-create-btn" class="btn" style="width: 100%; background: #28a745; color: white;">
+                    📦 Quick Box Label Creation
+                </button>
+                <p style="font-size: 0.85em; color: #666; margin-top: 8px; text-align: center;">
+                    Creates new box and prints label immediately
+                </p>
+            </div>
+            
+            <div style="text-align: center; margin: 15px 0; color: #999;">— OR —</div>
+            
+            <!-- Scan Existing Box -->
+            <div style="margin: 20px 0;">
+                <label style="font-weight: bold;">Scan Box Number:</label>
+                <input type="text" id="scan-box-input" placeholder="Scan or enter box number" style="width: 100%; padding: 8px; font-size: 1em; margin-top: 5px;">
+                <p style="font-size: 0.85em; color: #666; margin-top: 5px;">
+                    Scan an existing box label to assign this CP code to that box
+                </p>
+            </div>
+            
+            <div class="box-modal-buttons" style="margin-top: 20px;">
+                <button type="button" class="btn" onclick="closeBoxModal()" style="background: #6c757d;">Skip</button>
+                <button type="button" id="assign-to-box-btn" class="btn" style="background: #007bff;">Assign to Box</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.box-modal {
+    position: fixed;
+    z-index: 10000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.box-modal-content {
+    background-color: #fefefe;
+    margin: 10% auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 500px;
+    max-width: 90%;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+}
+
+.box-modal-header {
+    padding: 15px 20px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.box-modal-header h3 {
+    margin: 0;
+}
+
+.box-modal-close {
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    line-height: 20px;
+}
+
+.box-modal-close:hover {
+    color: #ccc;
+}
+
+.box-modal-body {
+    padding: 20px;
+}
+
+.box-modal-buttons {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+body.dark-mode .box-modal-content {
+    background-color: #1e293b;
+    border: 1px solid #334155;
+}
+
+body.dark-mode .box-modal-body {
+    color: #e2e8f0;
+}
+
+body.dark-mode #scan-box-input {
+    background: #0f172a;
+    border: 1px solid #334155;
+    color: #e2e8f0;
+}
+</style>
+
 {% endblock %}