Vandana reddy Balannagari requested to merge fix/qrscan-vol into develop Apr 23, 2026

Merge Request

Overview

This MR fixes the frontend issues in the medical camp volunteer flow, specifically addressing QR code display, signup-status handling, and incorrect navigation after registration.

What does this MR do and why?

Previously, the frontend had critical issues:

QR code was not displayed even after successful signup
Users were stuck on the registration page
Frontend generated QR locally instead of using backend QR
Incorrect handling of signup-status response
Missing navigation logic after signup detection

Approach:

Integrated backend-provided QR code into UI
Fixed signup-status API mapping
Implemented automatic redirect based on signup and attendance status
Ensured correct rendering of base64 QR image

Trade-offs:

Removed local QR generation fallback to ensure backend consistency
Navigation now depends strictly on API response

Changes Made

Modified: src/pages/volunteer/QRGenerationPage.tsx → Updated to use backend-provided QR code
Modified: src/lib/api.ts → Fixed API response mapping for signup and attendance

Technical Details

Root Cause

QR code was generated locally instead of using backend response
signup-status response fields were not mapped correctly
Missing navigation logic caused users to remain on registration page

Fix

Used backend qr_code for rendering
Ensured proper base64 handling:

<img src={`data:image/png;base64,${qr_code}`} />

Corrected API mapping:

status.signup
status.attendance
status.qr_code

Added navigation logic:

if (status.signup && !status.attendance) {
  navigate('/volunteer/qr');
} else if (status.signup && status.attendance) {
  navigate('/volunteer/dashboard');
}

Type of Change

Related Issues / References

Fixes QR code not displaying after signup
Fixes user stuck on registration page
Fixes incorrect signup-status handling

Screenshots or Screen Recordings

Screencast_from_2026-04-24_01-07-58

Before	After
QR not visible, user stuck on signup page	Auto redirect to QR page with QR displayed

How to Set Up and Validate Locally

Install dependencies:

bun install

Run frontend:

bun dev

Ensure backend is running:

uvicorn app.main:app --reload

Open:

http://localhost:5173/?role=volunteer

Test flow:

Signup as volunteer
Verify redirect to /volunteer/qr
QR should display
After attendance → redirect to dashboard

Testing Done

Manual testing completed

Test Cases Covered:

Scenario	Expected Result	Status
Volunteer signup	Success	✅
Signup-status mapping	Correct fields used	✅
Redirect to QR	Works correctly	✅
QR display	Visible from backend	✅

Code Quality Checklist

Code Standards

Code follows project conventions
No console.log() left
No unused code
TypeScript types properly defined

React Best Practices

Hooks used correctly
State handled properly
No unnecessary re-renders

API & Data Fetching

Correct API mapping implemented
Error handling present

Error Handling

Errors handled gracefully
User-friendly feedback shown

Documentation

README.md updated
CHANGELOG.md updated

Known Limitations / Technical Debt

Navigation depends on backend response accuracy
Multi-role UI flow can be further improved

Additional Notes

Backend QR is now the single source of truth
Frontend is aligned with role-based backend logic

MR Acceptance Checklist

Code works as intended
No regression issues
Clean and maintainable code

Edited Apr 23, 2026 by Vandana reddy Balannagari

fix: thr qr scanner and volunteer signup