05/19 Update QR code photo verification togglable

models/qrcode.py

@@ -43,6 +43,8 @@ class QRCode(base.db.Model):
     # 'standard' = fixed single location (existing behavior, default)
     # 'dynamic'  = employee selects location from a list at scan time
     qr_type = base.db.Column(base.db.String(20), nullable=False, default='standard')
+    # Per-QR photo verification toggle (default: enabled)
+    photo_verification_enabled = base.db.Column(base.db.Boolean, nullable=False, default=True)
 
     # Relationship to style
     style = base.db.relationship('QRCodeStyle', backref='qr_codes')

routes/qr_codes.py

@@ -160,6 +160,8 @@ def create_qr_code():
                                          styles=QRCodeStyle.query.all())
 
             # Create new QR code record first (without URL and image)
+            photo_verification_enabled = request.form.get('photo_verification_enabled', '1') != '0'
+
             new_qr_code = QRCode(
                 name=name,
                 location=location,
@@ -174,6 +176,7 @@ def create_qr_code():
                 coordinate_accuracy=coordinate_accuracy if has_coordinates else None,
                 coordinates_updated_date=datetime.utcnow() if has_coordinates else None,
                 qr_type=qr_type,  # ADDED: store QR type
+                photo_verification_enabled=photo_verification_enabled,
                 # NEW: Customization fields (only if columns exist)
                 **({
                     'fill_color': fill_color,
@@ -220,6 +223,7 @@ def create_qr_code():
                     'location_address': location_address,
                     'location_event': location_event,
                     'has_coordinates': has_coordinates,
+                    'photo_verification_enabled': photo_verification_enabled,
                     'customization': {
                         'fill_color': fill_color,
                         'back_color': back_color,
@@ -514,6 +518,9 @@ def edit_qr_code(qr_id):
             else:
                 qr_code.project_id = None
 
+            # Per-QR photo verification toggle
+            qr_code.photo_verification_enabled = request.form.get('photo_verification_enabled', '1') != '0'
+
             # Handle QR code customization (only if columns exist)
             fill_color = request.form.get('fill_color', '#000000')
             back_color = request.form.get('back_color', '#FFFFFF')
@@ -558,6 +565,11 @@ def edit_qr_code(qr_id):
 
             db.session.commit()
 
+            logger_handler.logger.info(
+                f"QR Code '{qr_code.name}' (ID: {qr_id}) updated by user {session.get('username', 'unknown')} — "
+                f"photo_verification_enabled={qr_code.photo_verification_enabled}"
+            )
+
             # Success message
             flash(f'QR Code "{qr_code.name}" updated successfully!', 'success')
             return redirect(url_for('dashboard.dashboard'))
@@ -890,11 +902,12 @@ def qr_checkin(qr_url):
                     logger_handler.logger.warning("Could not calculate location accuracy — calculation returned None")
 
                 # CHECK DISTANCE THRESHOLD FOR PHOTO VERIFICATION
-                logger_handler.logger.debug(f"Photo verification enabled: {current_app.config.get('PHOTO_VERIFICATION_ENABLED', True)}")
+                logger_handler.logger.debug(f"Photo verification — global: {current_app.config.get('PHOTO_VERIFICATION_ENABLED', True)}, per-QR: {getattr(qr_code, 'photo_verification_enabled', True)}")
                 requires_verification = False
                 verification_photo_data = None
                 
-                if current_app.config.get('PHOTO_VERIFICATION_ENABLED', True) and location_accuracy is not None and location_accuracy > current_app.config.get('DISTANCE_THRESHOLD_FOR_VERIFICATION', 0.3):
+                qr_photo_verification = getattr(qr_code, 'photo_verification_enabled', True)
+                if qr_photo_verification and current_app.config.get('PHOTO_VERIFICATION_ENABLED', True) and location_accuracy is not None and location_accuracy > current_app.config.get('DISTANCE_THRESHOLD_FOR_VERIFICATION', 0.3):
                     logger_handler.logger.info(f"Distance ({location_accuracy:.3f} mi) exceeds verification threshold for employee {employee_id}")
                     
                     # Check if photo was provided

templates/edit_qr_code.html

@@ -2,6 +2,29 @@
 {% block title %}Edit QR Code - QR Management System{% endblock %}
 
 {% block extra_head %}
+<style>
+  /* Photo Verification Toggle */
+  #photo_verification_enabled:checked+.toggle-slider {
+    background: var(--success-color, #10b981);
+  }
+
+  .toggle-slider::before {
+    content: "";
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    left: 4px;
+    bottom: 4px;
+    background: white;
+    border-radius: 50%;
+    transition: 0.3s;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  #photo_verification_enabled:checked+.toggle-slider::before {
+    transform: translateX(24px);
+  }
+</style>
 <style>
   :root {
     --primary-color: #2563eb;
@@ -289,7 +312,7 @@
     background: var(--primary-color);
     cursor: pointer;
     border: 2px solid white;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }
 
   .range-input-group input[type="range"]::-moz-range-thumb {
@@ -299,7 +322,7 @@
     background: var(--primary-color);
     cursor: pointer;
     border: 2px solid white;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }
 
   .range-value {
@@ -579,9 +602,17 @@
   }
 
   @keyframes pulse {
-    0% { transform: scale(1); }
+    0% {
-    50% { transform: scale(1.05); }
+      transform: scale(1);
-    100% { transform: scale(1); }
+    }
+
+    50% {
+      transform: scale(1.05);
+    }
+
+    100% {
+      transform: scale(1);
+    }
   }
 
   /* Toast notification styles */
@@ -616,7 +647,7 @@
       </div>
 
       <form method="POST" class="form" id="editQRForm">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <!-- Basic Information Section -->
         <div class="form-section">
           <div class="section-header">
@@ -632,19 +663,10 @@
               <i class="fas fa-tag"></i>
               QR Code Name <span style="color: var(--error-color)">*</span>
             </label>
-            <input
+            <input type="text" id="name" name="name" required value="{{ qr_code.name }}"
-              type="text"
+              data-original="{{ qr_code.name }}" placeholder="e.g., Main Office Entrance, Conference Room A"
-              id="name"
+              maxlength="100" />
-              name="name"
+            <small class="form-help">A unique name to identify this QR code</small>
-              required
-              value="{{ qr_code.name }}"
-              data-original="{{ qr_code.name }}"
-              placeholder="e.g., Main Office Entrance, Conference Room A"
-              maxlength="100"
-            />
-            <small class="form-help"
-              >A unique name to identify this QR code</small
-            >
             <div class="character-counter">
               <span id="nameCounter">{{ qr_code.name|length }}/100</span>
             </div>
@@ -658,8 +680,10 @@
               <span style="color: var(--error-color)">*</span>
             </label>
             <select id="qr_type" name="qr_type" class="form-control" onchange="toggleQRTypeSection()">
-              <option value="standard" {% if qr_code.qr_type != 'dynamic' %}selected{% endif %}>Standard — Fixed Location</option>
+              <option value="standard" {% if qr_code.qr_type !='dynamic' %}selected{% endif %}>Standard — Fixed Location
-              <option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</option>
+              </option>
+              <option value="dynamic" {% if qr_code.qr_type=='dynamic' %}selected{% endif %}>Dynamic — Employee Selects
+                Location</option>
             </select>
             <small class="form-help">
               <strong>Standard:</strong> employee checks in at one fixed location.<br>
@@ -669,30 +693,23 @@
           <!-- ===== END ADDED ===== -->
 
           <!-- ADDED: wrapper to hide/show for standard QR only -->
-          <div id="standardLocationNameGroup" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
+          <div id="standardLocationNameGroup" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
-          <div class="form-group">
+            <div class="form-group">
-            <label for="location">
+              <label for="location">
-              <i class="fas fa-map-marker-alt"></i>
+                <i class="fas fa-map-marker-alt"></i>
-              Location Name <span style="color: var(--error-color)">*</span>
+                Location Name <span style="color: var(--error-color)">*</span>
-            </label>
+              </label>
-            <input
+              <input type="text" id="location" name="location" {% if qr_code.qr_type !='dynamic' %}required{% endif %}
-              type="text"
+                value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
-              id="location"
+                data-original="{{ qr_code.location }}" placeholder="e.g., Corporate Headquarters, Branch Office"
-              name="location"
+                maxlength="100" />
-              {% if qr_code.qr_type != 'dynamic' %}required{% endif %}
+              <small class="form-help">The name of the physical location where this QR code will be
-              value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
+                used</small>
-              data-original="{{ qr_code.location }}"
+              <div class="character-counter">
-              placeholder="e.g., Corporate Headquarters, Branch Office"
+                <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0'
-              maxlength="100"
+                  }}/100</span>
-            />
+              </div>
-            <small class="form-help"
-              >The name of the physical location where this QR code will be
-              used</small
-            >
-            <div class="character-counter">
-              <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
             </div>
-          </div>
           </div><!-- end standardLocationNameGroup -->
 
           <div class="form-group">
@@ -700,10 +717,11 @@
               <i class="fas fa-folder"></i>
               Project (Optional)
             </label>
-            <select id="project_id" name="project_id" class="form-select" data-original="{{ qr_code.project_id or '' }}">
+            <select id="project_id" name="project_id" class="form-select"
+              data-original="{{ qr_code.project_id or '' }}">
               <option value="">Select a project (Optional)</option>
               {% for project in projects %}
-              <option value="{{ project.id }}" {% if qr_code.project_id == project.id %}selected{% endif %}>
+              <option value="{{ project.id }}" {% if qr_code.project_id==project.id %}selected{% endif %}>
                 {{ project.name }} ({{ project.qr_count }} QR codes)
               </option>
               {% endfor %}
@@ -716,96 +734,81 @@
         </div>
 
         <!-- Location Details Section — hidden when Dynamic QR type is selected -->
-        <div id="standardLocationDetailsSection" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
+        <div id="standardLocationDetailsSection" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
-        <div class="form-section">
+          <div class="form-section">
-          <div class="section-header">
+            <div class="section-header">
-            <h3>
+              <h3>
-              <i class="fas fa-building"></i>
+                <i class="fas fa-building"></i>
-              Location Details
+                Location Details
-            </h3>
+              </h3>
-            <p>Update the complete address and event information</p>
+              <p>Update the complete address and event information</p>
-          </div>
-
-          <div class="form-group">
-            <label for="location_address">
-              <i class="fas fa-home"></i>
-              Complete Address
-              <span style="color: var(--error-color)">*</span>
-            </label>
-            <textarea
-              id="location_address"
-              name="location_address"
-              required
-              data-original="{{ qr_code.location_address }}"
-              placeholder="Enter the full address including street, city, state, and ZIP code"
-              rows="3"
-              maxlength="500"
-            >{{ qr_code.location_address }}</textarea>
-            <small class="form-help"
-              >Include all address details for accurate location
-              identification</small
-            >
-            <div class="character-counter">
-              <span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
             </div>
 
-            <!-- Address Coordinates Section -->
+            <div class="form-group">
-            <div class="coordinates-section" id="coordinatesSection">
+              <label for="location_address">
-              <div class="coordinates-header">
+                <i class="fas fa-home"></i>
-                <i class="fas fa-crosshairs"></i>
+                Complete Address
-                <h4>Address Coordinates</h4>
+                <span style="color: var(--error-color)">*</span>
+              </label>
+              <textarea id="location_address" name="location_address" required
+                data-original="{{ qr_code.location_address }}"
+                placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
+                maxlength="500">{{ qr_code.location_address }}</textarea>
+              <small class="form-help">Include all address details for accurate location
+                identification</small>
+              <div class="character-counter">
+                <span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
               </div>
 
-              <div class="coordinates-content">
+              <!-- Address Coordinates Section -->
-                <div class="coordinate-display">
+              <div class="coordinates-section" id="coordinatesSection">
-                  <div class="coordinate-info">
+                <div class="coordinates-header">
-                    <div class="coordinate-value" id="latitudeDisplay">
+                  <i class="fas fa-crosshairs"></i>
-                      {% if qr_code.has_coordinates %}
+                  <h4>Address Coordinates</h4>
-                      {{ "%.6f"|format(qr_code.address_latitude) }}
-                      {% else %}
-                      ---.----------
-                      {% endif %}
-                    </div>
-                    <div class="coordinate-label">Latitude</div>
-                  </div>
-                  <div class="coordinate-info">
-                    <div class="coordinate-value" id="longitudeDisplay">
-                      {% if qr_code.has_coordinates %}
-                      {{ "%.6f"|format(qr_code.address_longitude) }}
-                      {% else %}
-                      ---.----------
-                      {% endif %}
-                    </div>
-                    <div class="coordinate-label">Longitude</div>
-                  </div>
                 </div>
 
-                <div class="coordinates-actions">
+                <div class="coordinates-content">
-                  <button
+                  <div class="coordinate-display">
-                    type="button"
+                    <div class="coordinate-info">
-                    class="btn-coordinate"
+                      <div class="coordinate-value" id="latitudeDisplay">
-                    id="geocodeBtn"
+                        {% if qr_code.has_coordinates %}
-                  >
+                        {{ "%.6f"|format(qr_code.address_latitude) }}
-                    <i class="fas fa-search-location"></i>
+                        {% else %}
-                    {% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates
+                        ---.----------
-                  </button>
+                        {% endif %}
-                  <button
+                      </div>
-                    type="button"
+                      <div class="coordinate-label">Latitude</div>
-                    class="btn-coordinate"
+                    </div>
-                    id="clearCoordinatesBtn"
+                    <div class="coordinate-info">
-                    style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};"
+                      <div class="coordinate-value" id="longitudeDisplay">
-                  >
+                        {% if qr_code.has_coordinates %}
-                    <i class="fas fa-times"></i>
+                        {{ "%.6f"|format(qr_code.address_longitude) }}
-                    Clear
+                        {% else %}
-                  </button>
+                        ---.----------
-                </div>
+                        {% endif %}
+                      </div>
+                      <div class="coordinate-label">Longitude</div>
+                    </div>
+                  </div>
 
-                <div id="coordinateStatus"></div>
+                  <div class="coordinates-actions">
+                    <button type="button" class="btn-coordinate" id="geocodeBtn">
+                      <i class="fas fa-search-location"></i>
+                      {% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates
+                    </button>
+                    <button type="button" class="btn-coordinate" id="clearCoordinatesBtn"
+                      style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};">
+                      <i class="fas fa-times"></i>
+                      Clear
+                    </button>
+                  </div>
+
+                  <div id="coordinateStatus"></div>
+                </div>
               </div>
             </div>
-          </div>
 
-        </div>
+          </div>
         </div><!-- end standardLocationDetailsSection -->
 
         <!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
@@ -816,24 +819,52 @@
               Event or Purpose
               <span style="color: var(--error-color)">*</span>
             </label>
-            <select
+            <select id="location_event" name="location_event" required class="form-control"
-              id="location_event"
+              data-original="{{ qr_code.location_event }}">
-              name="location_event"
-              required
-              class="form-control"
-              data-original="{{ qr_code.location_event }}"
-            >
               <option value="">Select Event Type</option>
-              <option value="Check In" {% if qr_code.location_event == 'Check In' %}selected{% endif %}>Check In</option>
+              <option value="Check In" {% if qr_code.location_event=='Check In' %}selected{% endif %}>Check In</option>
-              <option value="Check Out" {% if qr_code.location_event == 'Check Out' %}selected{% endif %}>Check Out</option>
+              <option value="Check Out" {% if qr_code.location_event=='Check Out' %}selected{% endif %}>Check Out
+              </option>
             </select>
-            <small class="form-help"
+            <small class="form-help">Select the event type for this QR code</small>
-              >Select the event type for this QR code</small
-            >
           </div>
 
         </div>
 
+
+        <!-- Photo Verification Toggle -->
+        <div class="form-section">
+          <div class="section-header">
+            <h3>
+              <i class="fas fa-camera"></i>
+              Photo Verification
+            </h3>
+            <p>Require a photo when employee check-in location is too far from the QR code</p>
+          </div>
+          <div class="form-group">
+            <label class="toggle-label" for="photo_verification_enabled"
+              style="display:flex;align-items:center;gap:0.75rem;cursor:pointer;">
+              <div class="toggle-switch" id="photoVerifyToggle"
+                style="position:relative;display:inline-block;width:52px;height:28px;">
+                <input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1" {% if
+                  qr_code.photo_verification_enabled !=False %}checked{% endif %}
+                  style="opacity:0;width:0;height:0;position:absolute;">
+                <span class="toggle-slider"
+                  style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
+              </div>
+              <span id="photoVerifyLabel"
+                style="font-weight:600;font-size:0.875rem;
+                {% if qr_code.photo_verification_enabled != False %}color:var(--success-color,#10b981){% else %}color:var(--error-color,#ef4444){% endif %}">
+                {% if qr_code.photo_verification_enabled != False %}Enabled{% else %}Disabled{% endif %}
+              </span>
+            </label>
+            <input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden"
+              value="{% if qr_code.photo_verification_enabled != False %}1{% else %}0{% endif %}">
+            <small class="form-help">When disabled, photo verification is skipped for this QR code regardless of
+              distance</small>
+          </div>
+        </div>
+
         <!-- QR Code Customization Section -->
         <div class="form-section">
           <div class="section-header">
@@ -853,13 +884,9 @@
             <select id="style_id" name="style_id" onchange="applyStylePreset()">
               <option value="">Custom Style</option>
               {% for style in styles %}
-              <option 
+              <option value="{{ style.id }}" {% if qr_code.style_id==style.id %}selected{% endif %}
-                value="{{ style.id }}" 
+                data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
-                {% if qr_code.style_id == style.id %}selected{% endif %}
+                data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
-                data-fill="{{ style.fill_color }}" 
-                data-back="{{ style.back_color }}"
-                data-box-size="{{ style.box_size }}"
-                data-border="{{ style.border }}"
                 data-error-correction="{{ style.error_correction }}">
                 {{ style.name }}
               </option>
@@ -876,21 +903,10 @@
                 QR Code Color
               </label>
               <div class="color-input-group">
-                <input 
+                <input type="color" id="fill_color" name="fill_color" value="{{ qr_code.fill_color or '#000000' }}"
-                  type="color" 
+                  onchange="updatePreview()" />
-                  id="fill_color" 
+                <input type="text" id="fill_color_text" value="{{ qr_code.fill_color or '#000000' }}"
-                  name="fill_color" 
+                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000" onchange="syncColorInput('fill')" />
-                  value="{{ qr_code.fill_color or '#000000' }}"
-                  onchange="updatePreview()"
-                />
-                <input 
-                  type="text" 
-                  id="fill_color_text" 
-                  value="{{ qr_code.fill_color or '#000000' }}" 
-                  pattern="^#[0-9A-Fa-f]{6}$"
-                  placeholder="#000000"
-                  onchange="syncColorInput('fill')"
-                />
               </div>
               <span class="form-help">Color of the QR code modules</span>
             </div>
@@ -901,21 +917,10 @@
                 Background Color
               </label>
               <div class="color-input-group">
-                <input 
+                <input type="color" id="back_color" name="back_color" value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  type="color" 
+                  onchange="updatePreview()" />
-                  id="back_color" 
+                <input type="text" id="back_color_text" value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  name="back_color" 
+                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF" onchange="syncColorInput('back')" />
-                  value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  onchange="updatePreview()"
-                />
-                <input 
-                  type="text" 
-                  id="back_color_text" 
-                  value="{{ qr_code.back_color or '#FFFFFF' }}" 
-                  pattern="^#[0-9A-Fa-f]{6}$"
-                  placeholder="#FFFFFF"
-                  onchange="syncColorInput('back')"
-                />
               </div>
               <span class="form-help">Background color of the QR code</span>
             </div>
@@ -929,15 +934,8 @@
                 Module Size
               </label>
               <div class="range-input-group">
-                <input 
+                <input type="range" id="box_size" name="box_size" min="5" max="20" value="{{ qr_code.box_size or 10 }}"
-                  type="range" 
+                  oninput="updateRangeValue('box_size'); updatePreview()" />
-                  id="box_size" 
-                  name="box_size" 
-                  min="5" 
-                  max="20" 
-                  value="{{ qr_code.box_size or 10 }}"
-                  oninput="updateRangeValue('box_size'); updatePreview()"
-                />
                 <span class="range-value" id="box_size_value">{{ qr_code.box_size or 10 }}px</span>
               </div>
               <span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -949,15 +947,8 @@
                 Border Size
               </label>
               <div class="range-input-group">
-                <input 
+                <input type="range" id="border" name="border" min="1" max="10" value="{{ qr_code.border or 4 }}"
-                  type="range" 
+                  oninput="updateRangeValue('border'); updatePreview()" />
-                  id="border" 
-                  name="border" 
-                  min="1" 
-                  max="10" 
-                  value="{{ qr_code.border or 4 }}"
-                  oninput="updateRangeValue('border'); updatePreview()"
-                />
                 <span class="range-value" id="border_value">{{ qr_code.border or 4 }} modules</span>
               </div>
               <span class="form-help">White border around the QR code</span>
@@ -971,10 +962,11 @@
               Error Correction Level
             </label>
             <select id="error_correction" name="error_correction" onchange="updatePreview()">
-              <option value="L" {% if qr_code.error_correction == 'L' %}selected{% endif %}>Low (7% recovery)</option>
+              <option value="L" {% if qr_code.error_correction=='L' %}selected{% endif %}>Low (7% recovery)</option>
-              <option value="M" {% if qr_code.error_correction == 'M' %}selected{% endif %}>Medium (15% recovery)</option>
+              <option value="M" {% if qr_code.error_correction=='M' %}selected{% endif %}>Medium (15% recovery)</option>
-              <option value="Q" {% if qr_code.error_correction == 'Q' %}selected{% endif %}>Quartile (25% recovery)</option>
+              <option value="Q" {% if qr_code.error_correction=='Q' %}selected{% endif %}>Quartile (25% recovery)
-              <option value="H" {% if qr_code.error_correction == 'H' %}selected{% endif %}>High (30% recovery)</option>
+              </option>
+              <option value="H" {% if qr_code.error_correction=='H' %}selected{% endif %}>High (30% recovery)</option>
             </select>
             <span class="form-help">Higher levels allow QR code to work even if partially damaged</span>
           </div>
@@ -1009,24 +1001,12 @@
         </div>
 
         <!-- Hidden coordinate fields for form submission -->
-        <input
+        <input type="hidden" id="address_latitude" name="address_latitude"
-          type="hidden"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}" />
-          id="address_latitude"
+        <input type="hidden" id="address_longitude" name="address_longitude"
-          name="address_latitude"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}" />
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}"
+        <input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy"
-        />
+          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}" />
-        <input
-          type="hidden"
-          id="address_longitude"
-          name="address_longitude"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}"
-        />
-        <input
-          type="hidden"
-          id="coordinate_accuracy"
-          name="coordinate_accuracy"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}"
-        />
 
         <!-- Form Actions -->
         <div class="form-actions">
@@ -1111,9 +1091,11 @@
         <div class="detail-row">
           <strong>Colors:</strong>
           <span>
-            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
+            <span
+              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
             on
-            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
+            <span
+              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
           </span>
         </div>
       </div>
@@ -1353,26 +1335,26 @@
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-          'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
       },
       body: JSON.stringify({ address: address })
     })
-    .then(response => response.json())
+      .then(response => response.json())
-    .then(data => {
+      .then(data => {
-      if (data.success) {
+        if (data.success) {
-        const lat = data.data.latitude;
+          const lat = data.data.latitude;
-        const lng = data.data.longitude;
+          const lng = data.data.longitude;
 
-        updateCoordinates(lat, lng, 'geocoded');
+          updateCoordinates(lat, lng, 'geocoded');
-        showStatus('success', data.message || 'Coordinates updated successfully');
+          showStatus('success', data.message || 'Coordinates updated successfully');
-      } else {
+        } else {
-        showStatus('warning', data.message || 'No coordinates found for this address');
+          showStatus('warning', data.message || 'No coordinates found for this address');
-      }
+        }
-    })
+      })
-    .catch(error => {
+      .catch(error => {
-      console.error('Geocoding error:', error);
+        console.error('Geocoding error:', error);
-      showStatus('error', 'Failed to get coordinates. Please try again.');
+        showStatus('error', 'Failed to get coordinates. Please try again.');
-    });
+      });
   }
 
   function updateCoordinates(lat, lng, accuracy) {
@@ -1420,7 +1402,7 @@
   }
 
   // Initialize on page load
-  document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener('DOMContentLoaded', function () {
     // Set up character counters
     document.getElementById('name').addEventListener('input', () => {
       updateCharacterCount('name', 'nameCounter', 100);
@@ -1446,7 +1428,7 @@
     // Add form validation
     const form = document.getElementById('editQRForm');
     if (form) {
-      form.addEventListener('submit', function(e) {
+      form.addEventListener('submit', function (e) {
         if (!validateQRCustomization()) {
           e.preventDefault();
           return false;
@@ -1455,12 +1437,12 @@
     }
 
     // Add color input synchronization
-    document.getElementById('fill_color').addEventListener('change', function() {
+    document.getElementById('fill_color').addEventListener('change', function () {
       document.getElementById('fill_color_text').value = this.value.toUpperCase();
       updatePreview();
     });
 
-    document.getElementById('back_color').addEventListener('change', function() {
+    document.getElementById('back_color').addEventListener('change', function () {
       document.getElementById('back_color_text').value = this.value.toUpperCase();
       updatePreview();
     });
@@ -1469,7 +1451,7 @@
     const geocodeBtn = document.getElementById('geocodeBtn');
     const clearBtn = document.getElementById('clearCoordinatesBtn');
 
-    geocodeBtn.addEventListener('click', function() {
+    geocodeBtn.addEventListener('click', function () {
       const address = document.getElementById('location_address').value.trim();
       if (address.length > 10) {
         geocodeAddress(address);
@@ -1485,28 +1467,44 @@
 <!-- ===== Dynamic QR Type Toggle ===== -->
 <script>
   function toggleQRTypeSection() {
-    var type      = document.getElementById('qr_type').value;
+    var type = document.getElementById('qr_type').value;
-    var stdName   = document.getElementById('standardLocationNameGroup');
+    var stdName = document.getElementById('standardLocationNameGroup');
-    var stdDetails= document.getElementById('standardLocationDetailsSection');
+    var stdDetails = document.getElementById('standardLocationDetailsSection');
-    var locInput  = document.getElementById('location');
+    var locInput = document.getElementById('location');
     var addrInput = document.getElementById('location_address');
 
     if (type === 'dynamic') {
-      if (stdName)   stdName.style.display    = 'none';
+      if (stdName) stdName.style.display = 'none';
-      if (stdDetails)stdDetails.style.display = 'none';
+      if (stdDetails) stdDetails.style.display = 'none';
-      if (locInput)  locInput.removeAttribute('required');
+      if (locInput) locInput.removeAttribute('required');
       if (addrInput) addrInput.removeAttribute('required');
     } else {
-      if (stdName)   stdName.style.display    = 'block';
+      if (stdName) stdName.style.display = 'block';
-      if (stdDetails)stdDetails.style.display = 'block';
+      if (stdDetails) stdDetails.style.display = 'block';
-      if (locInput)  locInput.setAttribute('required', '');
+      if (locInput) locInput.setAttribute('required', '');
       if (addrInput) addrInput.setAttribute('required', '');
     }
   }
 
-  document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener('DOMContentLoaded', function () {
     toggleQRTypeSection();
   });
 </script>
 <!-- ===== END Dynamic QR Type Toggle ===== -->
+<script>
+  // Photo Verification Toggle
+  document.addEventListener('DOMContentLoaded', function () {
+    var cb = document.getElementById('photo_verification_enabled');
+    var hidden = document.getElementById('photo_verification_hidden');
+    var label = document.getElementById('photoVerifyLabel');
+    if (cb) {
+      cb.addEventListener('change', function () {
+        hidden.value = cb.checked ? '1' : '0';
+        label.textContent = cb.checked ? 'Enabled' : 'Disabled';
+        label.style.color = cb.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)';
+      });
+    }
+  });
+</script>
+<!-- ===== END Photo Verification Toggle ===== -->
 {% endblock %}

tools/migration_photo_verification_toggle.py

@@ -0,0 +1,122 @@
+"""
+migration_photo_verification_toggle.py
+=======================================
+Adds `photo_verification_enabled` column to the `qr_codes` table.
+
+Uses pymysql directly to avoid SQLAlchemy ORM loading the model
+(which would fail if the column doesn't exist yet).
+
+Default: 1 (True) for all existing rows — preserves current behaviour.
+
+Run once on each server (LT and GOV):
+    python3 tools/migration_photo_verification_toggle.py
+
+Safe to re-run — skips if column already exists.
+"""
+
+import os, sys, re
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from dotenv import load_dotenv
+load_dotenv()
+
+import pymysql
+
+TABLE  = 'qr_codes'
+COLUMN = 'photo_verification_enabled'
+
+
+def parse_db_url(url):
+    """
+    Parse DATABASE_URL robustly using regex to handle special characters
+    (including @ or : ) in the password.
+
+    Supports:
+        mysql+pymysql://user:pass@host:port/dbname
+        mysql+pymysql://user:pass@host/dbname
+    """
+    # Strip driver prefix
+    url = re.sub(r'^mysql\+pymysql://', '', url)
+    url = re.sub(r'^mysql://', '', url)
+
+    # Split credentials from host/db on the LAST @ before the host
+    # Pattern: user:password@host[:port]/dbname[?...]
+    m = re.match(
+        r'^(?P<user>[^:]+):(?P<password>.+)@(?P<host>[^@:/]+)(?::(?P<port>\d+))?/(?P<db>[^?]+)',
+        url
+    )
+    if not m:
+        print(f"[ERROR] Could not parse DATABASE_URL. Raw (redacted): {url[:30]}...")
+        sys.exit(1)
+
+    return {
+        'host':     m.group('host'),
+        'port':     int(m.group('port')) if m.group('port') else 3306,
+        'user':     m.group('user'),
+        'password': m.group('password'),
+        'database': m.group('db'),
+    }
+
+
+def get_connection():
+    db_url = os.environ.get('DATABASE_URL', '')
+    if not db_url:
+        print("[ERROR] DATABASE_URL not set in .env")
+        sys.exit(1)
+
+    params = parse_db_url(db_url)
+    return pymysql.connect(
+        host=params['host'],
+        port=params['port'],
+        user=params['user'],
+        password=params['password'],
+        database=params['database'],
+        charset='utf8mb4',
+        autocommit=False,
+    )
+
+
+def run():
+    conn = get_connection()
+    try:
+        with conn.cursor() as cur:
+            # Check if column already exists
+            cur.execute(
+                "SELECT COUNT(*) FROM information_schema.COLUMNS "
+                "WHERE TABLE_SCHEMA = DATABASE() "
+                f"AND TABLE_NAME = '{TABLE}' "
+                f"AND COLUMN_NAME = '{COLUMN}'"
+            )
+            exists = cur.fetchone()[0] > 0
+
+            if exists:
+                print(f"[SKIP] Column '{COLUMN}' already exists on '{TABLE}'. Nothing to do.")
+                return
+
+            print(f"[ADD]  Adding column '{COLUMN}' to '{TABLE}' ...")
+            cur.execute(
+                f"ALTER TABLE `{TABLE}` "
+                f"ADD COLUMN `{COLUMN}` TINYINT(1) NOT NULL DEFAULT 1"
+            )
+            conn.commit()
+
+            # Verify
+            cur.execute(
+                "SELECT COUNT(*) FROM information_schema.COLUMNS "
+                "WHERE TABLE_SCHEMA = DATABASE() "
+                f"AND TABLE_NAME = '{TABLE}' "
+                f"AND COLUMN_NAME = '{COLUMN}'"
+            )
+            if cur.fetchone()[0] > 0:
+                print(f"[OK]   Column '{COLUMN}' added. All existing rows default to 1 (enabled).")
+            else:
+                print(f"[FAIL] Column was not created — check DB permissions.")
+                sys.exit(1)
+
+    finally:
+        conn.close()
+
+
+if __name__ == '__main__':
+    run()