FG Scan form validation improvements with warehouse module updates

- Fixed 3 JavaScript syntax errors in fg_scan.html (lines 951, 840-950, 1175-1215)
- Restored form field validation with proper null safety checks
- Re-enabled auto-advance between form fields
- Re-enabled CP code auto-complete with hyphen detection
- Updated validation error messages with clear format specifications and examples
- Added autocomplete='off' to all input fields
- Removed auto-prefix correction feature
- Updated warehouse routes and modules for box assignment workflow
- Added/improved database initialization scripts
- Updated requirements.txt dependencies

Format specifications implemented:
- Operator Code: OP + 2 digits (example: OP01, OP99)
- CP Code: CP + 8 digits + hyphen + 4 digits (example: CP00000000-0001)
- OC1/OC2 Codes: OC + 2 digits (example: OC01, OC99)
- Defect Code: 3 digits only
This commit is contained in:
Quality App Developer
2026-01-30 10:50:06 +02:00
parent ac24e20fe1
commit b15cc93b9d
48 changed files with 16452 additions and 607 deletions

View File

@@ -0,0 +1,274 @@
# FG Scan Box Workflow - Documentation Index
## Overview
The FG Scan page has a feature called "Scan to Boxes" that allows quality operators to automatically assign scanned products to warehouse boxes. When enabled and a good-quality product (defect code 000) is scanned, a modal popup appears with options to:
1. **Create New Box** - Create an empty box, print label, and assign
2. **Scan Existing Box** - Link product to an already existing box
3. **Skip** - Save scan without box assignment
The **old app** (`/srv/quality_app`) implements this correctly. The **new app** (`/srv/quality_app-v2`) has the code but the modal is **incomplete** - the "Create New Box" button is hidden in the form instead of being visible in the modal.
---
## Documentation Files
### 📋 [FG_SCAN_MODAL_QUICK_REFERENCE.md](FG_SCAN_MODAL_QUICK_REFERENCE.md) ⭐ START HERE
**Best for:** Quick implementation
- 3-step solution
- Exact code to delete/replace
- Testing checklist
- Troubleshooting
- **Read time:** 5 minutes
- **Use when:** You're ready to implement the fix
---
### 📊 [FG_SCAN_BOX_WORKFLOW_ANALYSIS.md](FG_SCAN_BOX_WORKFLOW_ANALYSIS.md)
**Best for:** Understanding the full picture
- Problem statement
- Root cause analysis
- Why it breaks workflow
- Solution overview
- File references
- Before/after comparison
- Success criteria
- **Read time:** 10 minutes
- **Use when:** You want to understand the complete context
---
### 🔀 [BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md](BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md)
**Best for:** Detailed side-by-side comparison
- Old app workflow (lines 1-1242)
- New app workflow (lines 1-1145)
- HTML structure comparison (table)
- Three-option workflows explained
- Code architecture comparison
- Recommended changes (exact code)
- Testing checklist
- Database endpoints required
- **Read time:** 20 minutes
- **Use when:** You want to see exactly what changed and why
---
### 🎨 [FG_SCAN_MODAL_VISUAL_GUIDE.md](FG_SCAN_MODAL_VISUAL_GUIDE.md)
**Best for:** Visual learners
- Before/after modal diagrams
- Workflow flowcharts
- State machine diagrams
- Option 1/2/3 flows illustrated
- Error scenarios
- Database impact visualization
- **Read time:** 15 minutes
- **Use when:** You need to visualize the workflow
---
### 📖 [FG_SCAN_MODAL_FIX_GUIDE.md](FG_SCAN_MODAL_FIX_GUIDE.md)
**Best for:** Step-by-step implementation
- 5 implementation steps
- Exact file locations with line numbers
- Old vs new code comparison
- Step-by-step breakdowns
- Verification checklist
- File reference locations
- **Read time:** 15 minutes
- **Use when:** You're implementing and want detailed walkthrough
---
### 📚 [OLD_APP_BOX_WORKFLOW_REFERENCE.md](OLD_APP_BOX_WORKFLOW_REFERENCE.md)
**Best for:** Reference implementation
- Old app complete workflow explanation
- Endpoint requirements
- Database tables involved
- JavaScript function breakdown
- QZ Tray integration details
- Code snippets with line numbers
- **Read time:** 20 minutes
- **Use when:** You want to understand how the old app does it correctly
---
## Quick Navigation
### I want to... | Read this...
---|---
**Implement the fix right now** | [FG_SCAN_MODAL_QUICK_REFERENCE.md](FG_SCAN_MODAL_QUICK_REFERENCE.md) ⭐
**Understand the problem** | [FG_SCAN_BOX_WORKFLOW_ANALYSIS.md](FG_SCAN_BOX_WORKFLOW_ANALYSIS.md)
**See code comparison** | [BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md](BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md)
**See visual diagrams** | [FG_SCAN_MODAL_VISUAL_GUIDE.md](FG_SCAN_MODAL_VISUAL_GUIDE.md)
**Follow detailed steps** | [FG_SCAN_MODAL_FIX_GUIDE.md](FG_SCAN_MODAL_FIX_GUIDE.md)
**Check old app reference** | [OLD_APP_BOX_WORKFLOW_REFERENCE.md](OLD_APP_BOX_WORKFLOW_REFERENCE.md)
---
## The Problem (1 Paragraph)
When a user enables "Scan to Boxes" and scans a product with defect code 000 (good quality), a modal should appear showing three options: Create New Box (green button), Scan Existing Box (input field), or Skip. The old app shows all three options clearly. The new app has the code but the "Create New Box" button is hidden in the form section (display: none) instead of being visible in the modal. This makes users think the feature is broken because they can't see the button when the modal appears.
---
## The Solution (3 Steps)
1. **Delete** lines 53-56 in `fg_scan.html` - Remove hidden button from form
2. **Replace** lines 109-129 - Update modal HTML to include button and show all options
3. **Update** lines 809-810 - Show modal with CP code display
**Estimated time:** 15 minutes (5 min read + 5 min code + 5 min test)
---
## File Location
All files are in: **`/srv/quality_app-v2/documentation/`**
Code to edit: **`/srv/quality_app-v2/app/templates/modules/quality/fg_scan.html`**
Reference (read-only): **`/srv/quality_app/py_app/app/templates/fg_scan.html`**
---
## Implementation Checklist
### Before You Start:
- [ ] Read [FG_SCAN_MODAL_QUICK_REFERENCE.md](FG_SCAN_MODAL_QUICK_REFERENCE.md) (5 min)
- [ ] Review [BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md](BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md) for side-by-side comparison (10 min)
- [ ] Open `/srv/quality_app-v2/app/templates/modules/quality/fg_scan.html` in editor
### Making Changes:
- [ ] Step 1: Find and delete lines 53-56
- [ ] Step 2: Find and replace lines 109-129 (use exact code from Quick Reference)
- [ ] Step 3: Find and update lines 809-810 (modal show logic)
- [ ] Verify: No syntax errors in editor
### Testing:
- [ ] Enable "Scan to Boxes" checkbox
- [ ] Scan product: OP001, CP-ABC, OC01, OC02, 000 (good quality)
- [ ] Modal appears with all 3 options visible? ✓
- [ ] Click "📦 Quick Box Label Creation" (green)
- [ ] Box created and label prints? ✓
- [ ] Scan the label, click "Assign"
- [ ] CP linked to box in database? ✓
- [ ] Test with defect code 001 (modal should NOT appear) ✓
### After Deploy:
- [ ] Monitor error logs
- [ ] Ask users to test the workflow
- [ ] Verify database updates correctly
---
## Content Summary
| Document | Lines | Purpose | Read Time |
|----------|-------|---------|-----------|
| Quick Reference | ~200 | Implementation | 5 min ⭐ |
| Analysis | ~300 | Understanding | 10 min |
| Comparison | ~400 | Side-by-side code | 20 min |
| Visual Guide | ~400 | Diagrams & flows | 15 min |
| Fix Guide | ~350 | Detailed steps | 15 min |
| Old App Ref | ~350 | Reference impl | 20 min |
| **TOTAL** | ~2000 | Complete coverage | ~85 min |
---
## Key Takeaways
1. **Problem is visible:** Modal appears but misses button
2. **Solution is simple:** Move button from form into modal (3 code changes)
3. **No backend changes:** All endpoints already exist
4. **No database changes:** Schema already supports it (tables already created)
5. **Low risk:** Moving UI element, not changing functionality
6. **High impact:** Completes the box tracking feature
---
## Quick Facts
- **Files to modify:** 1 file (`fg_scan.html`)
- **Lines to change:** ~3 locations (~50 total lines affected)
- **Code complexity:** Low (HTML + 1 JS line update)
- **Endpoints needed:** 4 (all exist: create_box, generate_pdf, assign_cp, submit_scan)
- **Database tables:** 3 (all exist: boxes_crates, box_contents, scanfg_orders)
- **Breaking changes:** None (backwards compatible)
- **Estimated effort:** 15-25 minutes
- **Priority:** High (completes feature)
- **Risk level:** Low (UI only)
---
## Old App vs New App Comparison
| Aspect | Old App | New App | Status |
|--------|---------|---------|--------|
| **Checkbox** | Present | Present | ✅ Same |
| **Auto-submit logic** | Works | Works | ✅ Same |
| **Modal structure** | Complete | Incomplete | ⚠️ Needs fix |
| **Create option** | Visible in modal | Hidden in form | ❌ Wrong |
| **Scan option** | Visible in modal | Visible in modal | ✅ Same |
| **Skip option** | Visible in modal | Visible in modal | ✅ Same |
| **QZ Tray integration** | Working | Working | ✅ Same |
| **JavaScript handlers** | Complete | Complete | ✅ Same |
| **Database endpoints** | All present | All present | ✅ Same |
| **Overall feature** | Complete ✓ | Incomplete ⚠️ | Needs fix |
---
## What Each Option Does
### Option 1: Create New Box 🟢
1. Click "📦 Quick Box Label Creation" (green button)
2. POST /quality/create_quick_box → Empty box created
3. POST /quality/generate_box_label_pdf → PDF generated
4. QZ Tray prints label → Physical label from thermal printer
5. Input field updates → "Scan the printed label now..."
6. User scans newly created box
7. Click "Assign to Box" → Link CP to box
8. Done!
### Option 2: Scan Existing Box 🔵
1. Scan existing box label (or enter manually)
2. Click "Assign to Box"
3. POST /warehouse/assign_cp_to_box → CP linked to box
4. Modal closes
5. Done!
### Option 3: Skip ⚪
1. Click "Skip"
2. Modal closes
3. Scan saved but NOT assigned to any box
4. Done!
---
## Next Steps
**Start with:** [FG_SCAN_MODAL_QUICK_REFERENCE.md](FG_SCAN_MODAL_QUICK_REFERENCE.md)
This is the fast track to implementation. It has:
- The exact problem (1 line)
- The exact solution (3 steps)
- The exact code to use
- A quick test checklist
**Time needed:** 15 minutes total
---
## Support Resources
- **Documentation location:** `/srv/quality_app-v2/documentation/`
- **Code location:** `/srv/quality_app-v2/app/templates/modules/quality/fg_scan.html`
- **Old app reference:** `/srv/quality_app/py_app/app/templates/fg_scan.html`
- **This index:** `/srv/quality_app-v2/documentation/FG_SCAN_BOX_WORKFLOW_DOCUMENTATION_INDEX.md`
---
**Last Updated:** January 28, 2026
**Status:** ✅ Ready for Implementation
**Complexity:** 🟢 Low
**Priority:** 🔴 High
**Effort:** 15-25 minutes