quality_app-v2/documentation/FG_SCAN_MODAL_QUICK_REFERENCE.md

FG Scan Modal Fix - Quick Reference Card

The Problem (1 Line)

The "Create Box" button is hidden in the form instead of being visible in the modal popup that appears after scanning.

The Solution (3 Simple Steps)

Step 1️⃣: DELETE (Lines 53-56)

Remove this from the form:

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

Step 2️⃣: REPLACE (Lines 109-129)

Replace the entire modal with this (includes the button INSIDE):

<!-- 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>

Step 3️⃣: UPDATE (Around Line 809-810)

Update the modal show logic:

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
    setTimeout(() => {
        document.getElementById('boxNumber').focus();
    }, 100);
}

---

Result: What Changes

Before Fix ❌

Modal appears:
  [Only shows box input field]
  [Cancel] [Assign]
  
User: "Where's the create button?"
User: Confused
Feature: Seems broken

After Fix ✅

Modal appears:
  📦 QUICK BOX LABEL CREATION (green)
  ━━━━━━━  OR  ━━━━━━━
  Scan Box Number: ___
  [Skip] [Assign to Box]
  
User: "I can create boxes OR assign to existing!"
User: Clear what to do
Feature: Works perfectly

---

Test It (3 Quick Tests)

Test 1: Create New Box

1. Check "Scan to Boxes" ✓
2. Scan: OP001, CP-ABC, OC01, OC02, 000
3. See modal with green button? ✓
4. Click green button
5. Box created + label prints? ✓
6. Can now scan box and assign? ✓

Test 2: Scan Existing

1. Modal appears
2. Enter existing box number (or scan)
3. Click "Assign to Box"
4. CP linked to box? ✓

Test 3: Skip

1. Modal appears
2. Click "Skip"
3. Modal closes
4. Scan saved but NO box assignment? ✓

---

Files Involved

File to edit:

/srv/quality_app-v2/app/templates/modules/quality/fg_scan.html
- Delete lines 53-56
- Replace lines 109-129
- Update lines 809-810

Reference files (in documentation/):

• OLD_APP_BOX_WORKFLOW_REFERENCE.md - See what old app does
• BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md - Side-by-side comparison
• FG_SCAN_MODAL_FIX_GUIDE.md - Detailed implementation
• FG_SCAN_MODAL_VISUAL_GUIDE.md - Visual diagrams
• FG_SCAN_BOX_WORKFLOW_ANALYSIS.md - Full analysis

---

Why This Matters

Current State (Broken):

• Feature exists in code ✓
• Button exists somewhere ✓
• But users can't see it ✗
• Users think feature is broken ✗

After Fix:

• Feature visible ✓
• Users understand workflow ✓
• Three clear choices presented ✓
• Complete box tracking workflow ✓

---

Time Estimate

• Reading docs: 5-10 minutes
• Making changes: 5 minutes
• Testing: 5-10 minutes
• Total: 15-25 minutes

---

Checklist

Before You Start:

• Read this card ✓ (you are here)
• Review BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md
• Have file open: /srv/quality_app-v2/app/templates/modules/quality/fg_scan.html

Making Changes:

• Step 1: Delete lines 53-56
• Step 2: Replace lines 109-129 (full modal HTML)
• Step 3: Update lines 809-810 (show logic)

Testing:

• Test Create New Box workflow
• Test Scan Existing box workflow
• Test Skip option
• Test non-000 defect (no modal)
• Check console for errors

After Testing:

• Deploy updated file
• Monitor for issues
• Users now have full workflow ✓

---

Common Questions

Q: Will this break anything else? A: No. You're moving the button from hidden form section to visible modal. All handlers stay the same.

Q: Do I need to change backend code? A: No. Endpoints already exist and are called by existing JavaScript handlers.

Q: Will old scans be affected? A: No. This only affects new scans going forward.

Q: What if QZ Tray isn't available? A: User sees warning but box is still created. Manual workflow continues.

Q: Can users still enter box manually? A: Yes. Both "Quick Create" and manual entry work. Modal now shows BOTH options clearly.

---

Troubleshooting

Problem: Modal doesn't appear after scanning 000

• Check: Is "Scan to Boxes" checkbox enabled? (Should be checked)
• Check: Did defect code = 000 exactly?
• Check: Check browser console for errors

Problem: Green button doesn't appear in modal

• Check: Did you replace the entire modal HTML (Step 2)?
• Check: Did you use the exact HTML from this guide?

Problem: Button works but modal closes too soon

• Check: Modal should stay open after box creation
• Check: The line document.getElementById('boxAssignmentModal').style.display should keep showing modal

Problem: CP code not showing in modal

• Check: Did you add the id="modal-cp-code" element?
• Check: Did you update the show logic to set .textContent = currentCpCode?

---

Support

Reference materials:

• Detailed walkthrough: FG_SCAN_MODAL_FIX_GUIDE.md
• Visual explanation: FG_SCAN_MODAL_VISUAL_GUIDE.md
• Old app code to compare: /srv/quality_app/py_app/app/templates/fg_scan.html
• Current file: /srv/quality_app-v2/app/templates/modules/quality/fg_scan.html

---

Status: ✅ Ready to implement Priority: 🔴 High (Feature incomplete) Complexity: 🟢 Low (3 simple changes) Impact: 🟢 High (Completes feature)