Update verification review detail with correct info

app.py

@@ -5552,6 +5552,22 @@ def verification_review_detail(record_id):
         # Get the QR code information for additional context
         qr_code = QRCode.query.get(record.qr_code_id) if record.qr_code_id else None
         
+        # Get employee name from Employee table
+        employee_name = None
+        try:
+            if record.employee_id:
+                employee = Employee.query.filter_by(id=int(record.employee_id)).first()
+                if employee:
+                    employee_name = f"{employee.lastName}, {employee.firstName}"
+                else:
+                    employee_name = f"Unknown (ID: {record.employee_id})"
+        except (ValueError, TypeError) as e:
+            logger_handler.logger.warning(f"Could not lookup employee name for ID {record.employee_id}: {e}")
+            employee_name = f"Unknown (ID: {record.employee_id})"
+
+        # Get event type from QR code (Check In/Check Out)
+        location_event = qr_code.location_event if qr_code and qr_code.location_event else 'N/A'
+
         # Log the access for audit trail
         logger_handler.logger.info(
             f"User {session.get('username')} ({session.get('role')}) "
@@ -5573,7 +5589,9 @@ def verification_review_detail(record_id):
                      record=record,
                      qr_code=qr_code,
                      check_in_date=check_in_date,
-                             check_in_time=check_in_time)
+                     check_in_time=check_in_time,
+                     employee_name=employee_name,
+                     location_event=location_event)
     
     except Exception as e:
         logger_handler.logger.error(f"Error loading verification review detail: {e}")

templates/verification_review_detail.html

@@ -1,53 +1,50 @@
-{% extends "base_authenticated.html" %}
+{% extends "base_authenticated.html" %} {% block title %}Verification Review -
-
+QR Code Management{% endblock %} {% block extra_head %}
-{% block title %}Verification Review - QR Code Management{% endblock %}
-
-{% block extra_head %}
 <style>
-.verification-review-page {
+  .verification-review-page {
     max-width: 1200px;
     margin: 0 auto;
     padding: 30px 20px;
-}
+  }
 
-.review-header {
+  .review-header {
     background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
     color: white;
     padding: 30px;
     border-radius: 12px;
     margin-bottom: 30px;
     box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
-}
+  }
 
-.review-header h1 {
+  .review-header h1 {
     margin: 0 0 10px 0;
     font-size: 2rem;
     display: flex;
     align-items: center;
     gap: 15px;
-}
+  }
 
-.review-header p {
+  .review-header p {
     margin: 0;
     opacity: 0.9;
     font-size: 1.1rem;
-}
+  }
 
-.review-content {
+  .review-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     margin-bottom: 30px;
-}
+  }
 
-.review-section {
+  .review-section {
     background: white;
     border-radius: 12px;
     padding: 25px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
+  }
 
-.review-section h2 {
+  .review-section h2 {
     margin: 0 0 20px 0;
     font-size: 1.3rem;
     color: #1f2937;
@@ -56,107 +53,107 @@
     gap: 10px;
     padding-bottom: 15px;
     border-bottom: 2px solid #e5e7eb;
-}
+  }
 
-.info-row {
+  .info-row {
     display: flex;
     justify-content: space-between;
     padding: 12px 0;
     border-bottom: 1px solid #f3f4f6;
-}
+  }
 
-.info-row:last-child {
+  .info-row:last-child {
     border-bottom: none;
-}
+  }
 
-.info-label {
+  .info-label {
     color: #6b7280;
     font-weight: 500;
     text-transform: uppercase;
     font-size: 0.85rem;
     letter-spacing: 0.5px;
-}
+  }
 
-.info-value {
+  .info-value {
     color: #1f2937;
     font-weight: 600;
     text-align: right;
-}
+  }
 
-.distance-badge {
+  .distance-badge {
     display: inline-block;
     padding: 6px 12px;
     border-radius: 6px;
     font-weight: 600;
     font-size: 0.9rem;
-}
+  }
 
-.distance-high {
+  .distance-high {
     background: #fee2e2;
     color: #991b1b;
-}
+  }
 
-.distance-medium {
+  .distance-medium {
     background: #fef3c7;
     color: #92400e;
-}
+  }
 
-.distance-low {
+  .distance-low {
     background: #d1fae5;
     color: #065f46;
-}
+  }
 
-.status-badge {
+  .status-badge {
     display: inline-block;
     padding: 8px 16px;
     border-radius: 20px;
     font-weight: 600;
     font-size: 0.95rem;
-}
+  }
 
-.status-pending {
+  .status-pending {
     background: #fef3c7;
     color: #92400e;
-}
+  }
 
-.status-approved {
+  .status-approved {
     background: #d1fae5;
     color: #065f46;
-}
+  }
 
-.status-rejected {
+  .status-rejected {
     background: #fee2e2;
     color: #991b1b;
-}
+  }
 
-.photo-section {
+  .photo-section {
     grid-column: 1 / -1;
-}
+  }
 
-.verification-photo {
+  .verification-photo {
     max-width: 100%;
     height: auto;
     border-radius: 12px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     display: block;
     margin: 20px auto;
-}
+  }
 
-.no-photo {
+  .no-photo {
     text-align: center;
     padding: 60px 20px;
     background: #f9fafb;
     border-radius: 12px;
     color: #6b7280;
-}
+  }
 
-.no-photo i {
+  .no-photo i {
     font-size: 4rem;
     margin-bottom: 20px;
     color: #d1d5db;
-}
+  }
 
-.action-buttons {
+  .action-buttons {
     display: flex;
     gap: 15px;
     justify-content: center;
@@ -164,9 +161,9 @@
     background: white;
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
+  }
 
-.action-buttons .btn {
+  .action-buttons .btn {
     padding: 14px 40px;
     font-size: 1.1rem;
     font-weight: 600;
@@ -178,63 +175,63 @@
     gap: 10px;
     transition: all 0.2s;
     text-decoration: none;
-}
+  }
 
-.btn-approve {
+  .btn-approve {
     background: #10b981;
     color: white;
-}
+  }
 
-.btn-approve:hover {
+  .btn-approve:hover {
     background: #059669;
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
-}
+  }
 
-.btn-reject {
+  .btn-reject {
     background: #ef4444;
     color: white;
-}
+  }
 
-.btn-reject:hover {
+  .btn-reject:hover {
     background: #dc2626;
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
-}
+  }
 
-.btn-back {
+  .btn-back {
     background: #6b7280;
     color: white;
-}
+  }
 
-.btn-back:hover {
+  .btn-back:hover {
     background: #4b5563;
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(107, 114, 128, 0.3);
-}
+  }
 
-.alert {
+  .alert {
     padding: 15px 20px;
     border-radius: 8px;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 10px;
-}
+  }
 
-.alert-warning {
+  .alert-warning {
     background: #fef3c7;
     color: #92400e;
     border-left: 4px solid #f59e0b;
-}
+  }
 
-.alert-info {
+  .alert-info {
     background: #dbeafe;
     color: #1e40af;
     border-left: 4px solid #3b82f6;
-}
+  }
 
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
     .review-content {
       grid-template-columns: 1fr;
     }
@@ -251,11 +248,9 @@
     .review-header h1 {
       font-size: 1.5rem;
     }
-}
+  }
 </style>
-{% endblock %}
+{% endblock %} {% block content %}
-
-{% block content %}
 <div class="verification-review-page">
   <!-- Header -->
   <div class="review-header">
@@ -263,14 +258,20 @@
       <i class="fas fa-camera-retro"></i>
       Verification Photo Review
     </h1>
-        <p>Review and approve/reject employee verification photo for off-site check-in</p>
+    <p>
+      Review and approve/reject employee verification photo for off-site
+      check-in
+    </p>
   </div>
 
   <!-- Alert for already reviewed records -->
   {% if record.verification_status != 'pending' %}
   <div class="alert alert-info">
     <i class="fas fa-info-circle"></i>
-        <span>This verification has already been {{ record.verification_status }}.</span>
+    <span
+      >This verification has already been {{ record.verification_status
+      }}.</span
+    >
   </div>
   {% endif %}
 
@@ -288,7 +289,7 @@
       </div>
       <div class="info-row">
         <span class="info-label">Employee Name</span>
-                <span class="info-value">{{ record.employee_name or 'Unknown' }}</span>
+        <span class="info-value">{{ employee_name or 'Unknown' }}</span>
       </div>
       <div class="info-row">
         <span class="info-label">Check-in Date</span>
@@ -320,27 +321,32 @@
       </div>
       <div class="info-row">
         <span class="info-label">Event</span>
-                <span class="info-value">{{ record.location_event or 'N/A' }}</span>
+        <span class="info-value">{{ location_event or 'N/A' }}</span>
       </div>
       <div class="info-row">
         <span class="info-label">Distance from QR</span>
         <span class="info-value">
-                    {% if record.location_accuracy %}
+          {% if record.location_accuracy %} {% if record.location_accuracy > 0.5
-                        {% if record.location_accuracy > 0.5 %}
+          %}
-                            <span class="distance-badge distance-high">{{ "%.3f"|format(record.location_accuracy) }} miles</span>
+          <span class="distance-badge distance-high"
+            >{{ "%.3f"|format(record.location_accuracy) }} miles</span
+          >
           {% elif record.location_accuracy > 0.2 %}
-                            <span class="distance-badge distance-medium">{{ "%.3f"|format(record.location_accuracy) }} miles</span>
+          <span class="distance-badge distance-medium"
+            >{{ "%.3f"|format(record.location_accuracy) }} miles</span
+          >
           {% else %}
-                            <span class="distance-badge distance-low">{{ "%.3f"|format(record.location_accuracy) }} miles</span>
+          <span class="distance-badge distance-low"
-                        {% endif %}
+            >{{ "%.3f"|format(record.location_accuracy) }} miles</span
-                    {% else %}
+          >
-                        N/A
+          {% endif %} {% else %} N/A {% endif %}
-                    {% endif %}
         </span>
       </div>
       <div class="info-row">
         <span class="info-label">QR Address</span>
-                <span class="info-value">{{ qr_code.address if qr_code else 'N/A' }}</span>
+        <span class="info-value"
+          >{{ qr_code.address if qr_code else 'N/A' }}</span
+        >
       </div>
       <div class="info-row">
         <span class="info-label">Check-in Address</span>
@@ -359,9 +365,11 @@
         Verification Photo
       </h2>
       {% if record.verification_photo %}
-                <img src="{{ record.verification_photo }}" 
+      <img
+        src="{{ record.verification_photo }}"
         alt="Verification Photo for {{ record.employee_id }}"
-                     class="verification-photo">
+        class="verification-photo"
+      />
       {% else %}
       <div class="no-photo">
         <i class="fas fa-image"></i>
@@ -399,7 +407,7 @@
 </div>
 
 <script>
-function updateStatus(status) {
+  function updateStatus(status) {
       const confirmMessage = status === 'approved'
           ? 'Are you sure you want to APPROVE this verification?'
           : 'Are you sure you want to REJECT this verification?';
@@ -435,6 +443,6 @@ function updateStatus(status) {
           console.error('[ERROR] Failed to update verification status:', error);
           alert(`Error: ${error.message}`);
       });
-}
+  }
 </script>
 {% endblock %}