Skip to content

fix: resolve QR scan attendance issues

Damanagari Sathwika requested to merge fix/qr-scanner into develop

Overview

Fixes QR attendance marking failures caused by mismatched QR generation and missing scanned QR data in attendance API requests.

What does this MR do and why?

fix(frontend): resolve QR attendance marking failures

This MR fixes two issues affecting QR-based attendance marking in the medical camp module.

The first issue was caused by server QR override behavior. When the backend returned a qr_code field, the frontend used that server-generated QR image instead of generating the QR from the actual userUUID. The server QR encoded a URL rather than the bare UUID expected by the attendance API. As a result, scanning the QR produced a URL string, and attendance marking failed because the backend attempted to use the URL as the user identifier.

The second issue was caused by missing scanned_qr_data in QR attendance API requests. While QR attendance requests correctly sent attendance_method: 'qr', they did not include the scanned QR value required by backend validation. This caused attendance marking requests to fail.

Manual attendance continued to work because it uses attendance_method: 'manual' and submits the correct UUID entered manually.

This MR updates the QR generation and attendance submission flow to ensure QR attendance behaves consistently and uses the correct user identifier.

Changes Made

  • Updated QR generation logic to use userUUID consistently
  • Removed server QR override behavior when backend returns qr_code
  • Fixed QR scan attendance submission flow
  • Added scanned_qr_data to QR attendance API requests
  • Ensured scanned QR value is passed to backend during attendance marking
  • Improved QR attendance request consistency with backend expectations

Technical Details

Root Cause 1: Server QR Override

The frontend previously prioritized backend-provided qr_code values instead of generating QR codes directly from userUUID.

This caused:

  • Displayed user ID and QR contents to differ
  • QR scans to return URL strings instead of UUID values
  • Attendance API failures when scanned data was interpreted as a user ID

The fix ensures QR codes are generated directly from the correct UUID source.

Root Cause 2: Missing scanned_qr_data

QR attendance API requests were sent without scanned_qr_data.

Previous request:

{
  "attendance_method": "qr",
  "logout": false,
  "camp_role": "volunteer"
}

Updated request:

{
  "attendance_method": "qr",
  "scanned_qr_data": "<scanned_uuid>",
  "logout": false,
  "camp_role": "volunteer"
}

This aligns frontend requests with backend validation requirements for QR attendance.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • Fixes QR attendance marking failures
  • Related to medical camp attendance flow

Screenshots or Screen Recordings

Before After
QR generated from server qr_code and attendance failed QR generated from correct UUID and attendance succeeds

How to Set Up and Validate Locally

  1. Checkout this branch

  2. Install dependencies:

    bun install

  3. Run frontend:

    bun dev

  4. Open medical camp attendance page

  5. Generate or view participant QR

  6. Scan QR using admin attendance scanner

  7. Verify attendance request payload includes:

    • attendance_method: "qr"
    • scanned_qr_data

  8. Expected result:

    • QR content matches displayed UUID
    • Attendance marking succeeds without errors

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Manual attendance marking Attendance marked successfully ✅
QR generation QR matches displayed UUID ✅
QR attendance marking Attendance marked successfully ✅
QR API payload validation scanned_qr_data present ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined
  • ESLint and Prettier checks pass

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules
  • State management is appropriate
  • No unnecessary re-renders
  • Event handlers are properly cleaned up

API & Data Fetching

  • Loading and error states handled
  • API types defined where applicable
  • Errors handled gracefully

Documentation

  • README.md updated (if needed)
  • .env.example updated (if needed)
  • CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

Backend still returns HTTP 500 on malformed QR attendance requests instead of graceful validation errors. Backend-side validation improvements may be required for stronger error handling.

Additional Notes

This MR focuses on frontend QR generation and QR attendance request correctness. Backend validation logic remains unchanged.

Merge request reports