quality_app-v2/documentation/FG_SCAN_MODAL_FIX_GUIDE.md

Fix FG Scan Modal: Implementation Guide

Problem Summary

The checkbox was enabled but the modal popup workflow is incomplete. The old app has a 3-option workflow (Create/Scan/Skip) that should appear after a good quality scan (defect code 000). The new app's modal is missing the "Create Box" button and has wrong structure.

Solution Overview

Before (Current Issue):

Checkbox enabled → Scan with 000 → Modal appears →
  [Modal shows only]
  Box Number: ___
  Quantity: ___
  [Cancel] [Assign]

Problem: Where is the "Create Box" button? Users can't create new boxes from the modal.

After (Fixed):

Checkbox enabled → Scan with 000 → Modal appears →
  [Modal shows]
  CP Code: CP-123456
  
  ┌─────────────────────────────┐
  │ 📦 Quick Box Label Creation │  ← CREATE OPTION
  └─────────────────────────────┘
  
  — OR —
  
  Scan Box Number: ___          ← SCAN OPTION
  
  [Skip] [Assign to Box]        ← Skip or Assign

Fix: Move "Quick Box Label Creation" button INTO the modal and add visual separation.

---

Implementation Steps

Step 1: Remove Quick Box Section from Form

File: /srv/quality_app-v2/app/templates/modules/quality/fg_scan.html

Find and Delete (Lines 53-56):

<div id="quickBoxSection" style="display: none;" class="quick-box-section">
    <button type="button" class="btn-secondary" id="quickBoxLabel">Quick Box Label Creation</button>
</div>

Why: This button should be in the modal, not in the form. It's confusing when the user sees it before the modal appears.

---

Step 2: Replace Modal HTML

Find (Lines 109-129):

<!-- Box Assignment Modal -->
<div id="boxAssignmentModal" class="box-modal" style="display: none;">
    <div class="box-modal-content">
        <div class="modal-header">
            <h2>Assign to Box</h2>
            <button type="button" class="modal-close" id="closeModal">&times;</button>
        </div>
        <div class="modal-body">
            <label for="boxNumber">Box Number:</label>
            <input type="text" id="boxNumber" placeholder="Enter box number">
            <label for="boxQty">Quantity:</label>
            <input type="number" id="boxQty" placeholder="Enter quantity" min="1">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-secondary" id="cancelModal">Cancel</button>
            <button type="button" class="btn-submit" id="assignToBox">Assign</button>
        </div>
    </div>
</div>

Replace with:

<!-- Box Assignment Modal -->
<div id="boxAssignmentModal" class="box-modal" style="display: none;">
    <div class="box-modal-content">
        <div class="modal-header">
            <h2>Assign to Box</h2>
            <button type="button" class="modal-close" id="closeModal">&times;</button>
        </div>
        <div class="modal-body">
            <!-- Display CP Code -->
            <p style="margin-bottom: 20px; font-size: 0.95em; font-weight: 500;">
                CP Code: <strong id="modal-cp-code" style="color: #007bff;">-</strong>
            </p>
            
            <!-- OPTION 1: Quick Box Creation -->
            <div style="margin: 20px 0; padding: 15px; background: #f0f8ff; border: 1px solid #cce7ff; border-radius: 5px;">
                <button type="button" id="quickBoxLabel" class="btn" 
                        style="width: 100%; background: #28a745; color: white; padding: 10px; font-size: 1em; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">
                    📦 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>
            
            <!-- SEPARATOR -->
            <div style="text-align: center; margin: 20px 0; color: #999; font-size: 0.9em; letter-spacing: 1px;">
                ━━━━━━━  OR  ━━━━━━━
            </div>
            
            <!-- OPTION 2: Scan Existing Box -->
            <div style="margin: 20px 0;">
                <label for="boxNumber" style="font-weight: 600; display: block; margin-bottom: 8px; color: #333;">Scan Box Number:</label>
                <input type="text" id="boxNumber" placeholder="Scan or enter box number" 
                       style="width: 100%; padding: 8px; font-size: 1em; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 1.1em;">
                <p style="font-size: 0.85em; color: #666; margin-top: 5px;">
                    Scan an existing box label or enter the box number manually
                </p>
            </div>
        </div>
        <div class="modal-footer" style="padding: 15px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px;">
            <button type="button" class="btn-secondary" id="cancelModal" style="padding: 8px 16px;">Skip</button>
            <button type="button" class="btn-submit" id="assignToBox" style="padding: 8px 16px;">Assign to Box</button>
        </div>
    </div>
</div>

Why:

• Adds green "Create Box" button with clear description
• Adds visual separator ("━━━━━━━ OR ━━━━━━━")
• Displays CP code so user knows which product is being assigned
• Makes the three options explicit and easy to understand
• Improves styling for readability

---

Step 3: Update Modal Show Logic

Find (around Line 803-810):

if (data.success) {
    showNotification('✅ Scan saved successfully!', 'success');
    
    // Store CP code for modal
    currentCpCode = document.getElementById('cp_code').value.trim();
    
    // Reset form
    resetForm();
    
    // Show box assignment modal
    document.getElementById('boxAssignmentModal').style.display = 'flex';
    document.getElementById('quickBoxLabel').focus();
}

Replace with:

if (data.success) {
    showNotification('✅ Scan saved successfully!', 'success');
    
    // Store CP code for modal
    currentCpCode = document.getElementById('cp_code').value.trim();
    
    // Reset form
    resetForm();
    
    // Show box assignment modal with CP code
    document.getElementById('modal-cp-code').textContent = currentCpCode;
    document.getElementById('boxNumber').value = '';  // Clear previous entry
    document.getElementById('boxAssignmentModal').style.display = 'flex';
    
    // Focus on box number input (for scanned boxes)
    setTimeout(() => {
        document.getElementById('boxNumber').focus();
    }, 100);
}

Why:

• Displays the CP code in the modal so user knows what's being assigned
• Clears the box number field for fresh entry
• Sets focus to help user with keyboard workflow

---

Step 4: Verify Quick Box Button Handler

Check the existing handler (around Line 835-900):

Should already have this structure:

document.getElementById('quickBoxLabel').addEventListener('click', async function() {
    if (!scanToBoxesEnabled) {
        showNotification('⚠️ Please enable "Scan to Boxes" first', 'warning');
        return;
    }
    
    try {
        this.disabled = true;
        this.textContent = '⏳ Creating...';
        
        // Step 1: Create box
        // Step 2: Generate PDF
        // Step 3: Print label
        // Step 4: Update input field
        
    } finally {
        this.disabled = false;
        this.textContent = '📦 Quick Box Label Creation';
    }
});

Verify:

• ✅ Handler exists and works
• ✅ Button disables during creation
• ✅ Modal stays open after creation
• ✅ Input field gets focus after creation

---

Step 5: Verify Cancel/Close Behavior

Existing code (around Line 976-985) should have:

// Close modal
document.getElementById('closeModal').addEventListener('click', function() {
    document.getElementById('boxAssignmentModal').style.display = 'none';
});

// Cancel button
document.getElementById('cancelModal').addEventListener('click', function() {
    document.getElementById('boxAssignmentModal').style.display = 'none';
});

This is correct. Both X button and Cancel/Skip button close the modal.

---

Summary of Changes

Item	Change	Line(s)
Remove quickBoxSection	Delete	53-56
Replace modal HTML	Full restructure	109-129
Update modal show logic	Add CP display + focus	803-810
Total changes	3 edits	~40 lines affected

---

Testing After Changes

1. Enable checkbox:

   • Check "Scan to Boxes"
   • Verify checkbox stays checked
   • See no errors in console

2. Scan with 000 (good quality):

   • Fill form: Operator, CP, OC1, OC2, Defect=000
   • Click Submit
   • Modal should appear with:
     • CP Code displayed
     • Green "📦 Quick Box Label Creation" button
     • "— OR —" separator
     • Box number input field
     • "Skip" and "Assign to Box" buttons

3. Test Create Option:

   • Click green button
   • Box should be created in database
   • PDF generated
   • Label prints (if QZ Tray available)
   • Input field auto-updates: "Scan the printed label now..."
   • Modal stays open
   • Scan the box, click "Assign to Box"

4. Test Scan Option:

   • Modal appears again
   • Scan existing box number (or type manually)
   • Click "Assign to Box"
   • Should link CP to box
   • Modal closes, page reloads

5. Test Skip Option:

   • Click "Skip" button
   • Modal closes
   • Scan recorded but not assigned to any box

6. Test with non-000 defect code:

   • Scan with defect code 001 or higher
   • Modal should NOT appear
   • Form submits normally (old behavior)
   • Page reloads

---

Expected Result

After implementing these changes:

✅ Modal appears after good quality scans
✅ Users see clear "Create" vs "Scan Existing" options
✅ Workflow matches old app
✅ Box tracking feature becomes fully functional
✅ Users understand their choices
✅ No more confusion about where to create boxes

---

Reference Documentation

• Complete comparison: /srv/quality_app-v2/documentation/BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md
• Old app reference: /srv/quality_app/py_app/app/templates/fg_scan.html
• Current file: /srv/quality_app-v2/app/templates/modules/quality/fg_scan.html