feat: Add QR code scanner for event tickets by Inventor77 · Pull Request #57 · bwhtech/buzz

Inventor77 · 2025-10-11T23:47:23Z

🎫 Event Check-in Scanner Feature

This PR introduces a comprehensive QR code-based check-in system for event ticket validation, enabling event organizers to efficiently scan and validate attendee tickets at event entrances.

✨ Features Added

Backend API

Ticket Validation API (validate_ticket_for_checkin)
- Validates ticket existence and booking status
- Checks for duplicate check-ins
- Returns detailed ticket information including add-ons
- Comprehensive error handling with user-friendly messages
Check-in Processing API (checkin_ticket)
- Processes successful ticket check-ins
- Creates check-in records in the database
- Prevents duplicate check-ins

Frontend Components

QR Scanner Component (QRScanner.vue)
- Real-time QR code scanning using device camera
- Manual ticket ID entry as fallback
- Automatic ticket ID extraction from QR codes
- Start/stop scanner controls
Event Selector Component (EventSelector.vue)
- Multi-event support for organizers managing multiple events
- Event status indicators (Ongoing, Upcoming, Past)
- Clean, responsive event selection interface
Ticket Details Modal (TicketDetailsModal.vue)
- Displays comprehensive ticket information
- Shows attendee details, ticket type, and add-ons
- Handles different states: valid ticket, already checked-in, invalid ticket
- One-click check-in processing

User Experience

Audio Feedback
- Success beep for valid tickets
- Error beep for invalid/duplicate tickets
- Enhanced user experience during scanning
Responsive Design
- Mobile-optimized scanner interface
- Touch-friendly controls
- Dark mode support

🔧 Technical Implementation

Dependencies Added

html5-qrcode - QR code scanning library
Updated package.json and yarn.lock

New Files Created

dashboard/src/pages/CheckInScanner.vue - Main scanner page
dashboard/src/components/QRScanner.vue - QR scanning component
dashboard/src/components/EventSelector.vue - Event selection
dashboard/src/components/TicketDetailsModal.vue - Ticket details display
dashboard/src/composables/useTicketValidation.js - Reusable validation logic
dashboard/src/assets/audio/ - Audio feedback files

API Endpoints

buzz.api.validate_ticket_for_checkin(ticket_id) - Validate ticket
buzz.api.checkin_ticket(ticket_id) - Process check-in

🚀 Usage

Navigate to /dashboard/checkin-scanner
Select the event to scan tickets for
Use camera to scan QR codes or manually enter ticket IDs
Review ticket details in the modal
Process check-ins with audio feedback

🎯 Benefits

Efficient Check-in Process - Quick QR code scanning reduces wait times
Error Prevention - Validates tickets and prevents duplicate check-ins
Multi-Event Support - Organizers can manage multiple events
Offline Capable - Works without internet for basic scanning
User-Friendly - Clear feedback and intuitive interface

🧪 Testing

QR code scanning with various ticket formats
Manual ticket ID entry
Duplicate check-in prevention
Error handling for invalid tickets
Audio feedback functionality
Mobile responsiveness
Event selection workflow

📱 Mobile Support

The scanner is fully optimized for mobile devices with:

Touch-friendly controls
Responsive camera viewport
Mobile-optimized modal dialogs
Gesture support for scanner controls

Ready for review and testing! 🎉

- Add validate_ticket_for_checkin() endpoint for ticket validation - Add checkin_ticket() endpoint for processing check-ins - Include comprehensive error handling and validation - Support for checking ticket status, booking confirmation, and duplicate check-ins - Return detailed ticket information including add-ons and event details

- Add html5-qrcode package for QR code scanning functionality - Update package.json and yarn.lock with new dependencies - Enable QR code scanning capabilities for ticket validation

- Create useTicketValidation composable for reusable ticket validation logic - Handle ticket validation and check-in API calls - Manage loading states and error handling - Provide centralized state management for scanner components

- Add QRScanner component with html5-qrcode integration - Add EventSelector component for event selection - Add TicketDetailsModal component for ticket validation display - Include comprehensive error handling and user feedback - Support both QR scanning and manual ticket ID entry

- Add CheckInScanner page with complete scanner interface - Update router to include /checkin-scanner route - Integrate all scanner components with audio feedback - Include event selection and ticket validation workflow

- Add beep.wav for successful scan feedback - Add beep-fail.wav for error feedback - Provide audio cues for better user experience during scanning

- Update components.d.ts with new component type definitions - Include QRScanner, EventSelector, and TicketDetailsModal components - Ensure proper TypeScript support for all new scanner components

NagariaHussain · 2025-10-12T04:38:34Z

Hi 👋

Can you add a demo video?

NagariaHussain · 2025-10-12T04:43:01Z

+def validate_ticket_for_checkin(ticket_id: str) -> dict:
+	try:


Let's use frappe.only_for and check if they have "Frontdesk Manager" role (you will have to create this role too)

…ckin-event

- Replace return statements with frappe.throw() for consistent error handling - Simplify error responses by using Frappe's built-in error handling - Remove redundant error response objects in favor of exceptions

- Add Frontdesk Manager role to fixtures in hooks.py - Grant Frontdesk Manager permissions for Event Check In doctype

EventSelector improvements: - Switch from createResource to createListResource for better data handling - Remove status column and related logic for cleaner UI - Add auto-loading and filtering for published events - Simplify refresh button with icon-left prop QRScanner improvements: - Simplify stop button with icon-left prop - Remove redundant template structure

CheckInScanner improvements: - Simplify event selection display with single button - Remove complex card layout in favor of clean button interface - Add arrow-left icon for better UX Router improvements: - Update route path from /checkin-scanner to /check-in - Update route name from checkin-scanner to check-in for consistency

- Remove unused error parameter in useTicketValidation onError handler - Add LucideX icon component to component types for UI consistency

- Add frappe.only_for("Frontdesk Manager", True) to validate_ticket_for_checkin - Add frappe.only_for("Frontdesk Manager", True) to checkin_ticket - Restrict ticket validation and check-in operations to Frontdesk Manager role only

- Remove try-catch wrapper and simplify error handling - Change validation to check for existing check-ins on the same date instead of any time - Update check-in creation to include date field - Improve error messages to be more specific about date-based check-ins - Remove track-based logic from check-in process

- Replace track field with date field in doctype definition - Add date field to Python class with proper typing - Implement before_insert hook to auto-set date to today if not provided - Update field order and remove track-related configuration

- Add unplugin-auto-import dependency for better development experience - Update yarn.lock with new dependency versions - Update components.d.ts to reflect removed unused icon imports - Clean up auto-generated component declarations

- Create singleton pattern for shared state across components - Add audio feedback for success and error states - Implement modal state management within composable - Add comprehensive error handling with specific toast messages - Integrate ticket validation and check-in logic in one place - Add proper cleanup and state management

- Remove props-based communication in favor of composable integration - Add duplicate scan prevention with 2-second timeout - Improve error handling with specific toast messages - Add proper scanner cleanup on component unmount - Integrate with ticket validation composable for unified state management - Remove unused icon imports and simplify component interface - Add global CSS to hide scanner info icon for cleaner UI

- Remove props-based state management in favor of composable integration - Add safe property access with optional chaining throughout template - Simplify component interface by removing unnecessary props - Improve button layout with better responsive design - Integrate with ticket validation composable for unified state management - Remove unused imports and clean up component structure

- Simplify CheckInScanner page by removing complex state management - Remove track-based check-in button and logic from FE Event doctype - Update EventSelector styling for better mobile experience - Clean up unused imports and simplify component interfaces - Integrate all components with the new composable pattern - Remove legacy track-based check-in functionality

Copilot

Pull Request Overview

This PR implements a comprehensive QR code-based event check-in system that enables event organizers to scan and validate attendee tickets. The feature includes backend validation APIs, frontend scanner components with audio feedback, and support for multiple event management.

Key Changes:

Backend API endpoints for ticket validation and check-in processing with duplicate prevention
QR scanner interface with manual ticket ID entry fallback and real-time camera scanning
Event selector for multi-event support with responsive UI and status indicators

Reviewed Changes

Copilot reviewed 13 out of 17 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
dashboard/src/router.js	Adds check-in route for scanner page
dashboard/src/pages/CheckInScanner.vue	Main scanner page with event selection and ticket validation interface
dashboard/src/composables/useTicketValidation.js	Singleton composable for ticket validation and check-in logic with audio feedback
dashboard/src/components/TicketDetailsModal.vue	Modal displaying ticket information and check-in controls
dashboard/src/components/QRScanner.vue	QR code scanner component with manual entry fallback
dashboard/src/components/EventSelector.vue	Event selection interface with loading and empty states
dashboard/package.json	Adds html5-qrcode and unplugin-auto-import dependencies
buzz/hooks.py	Adds Frontdesk Manager role to fixtures and reformats code
buzz/events/doctype/fe_event/fe_event.py	Removes deprecated check_in method and reformats imports
buzz/events/doctype/fe_event/fe_event.js	Removes old check-in button implementation
buzz/events/doctype/event_check_in/event_check_in.py	Adds date field auto-population logic
buzz/events/doctype/event_check_in/event_check_in.json	Replaces track field with date field and adds Frontdesk Manager permissions
buzz/api.py	Adds validate_ticket_for_checkin and checkin_ticket API endpoints

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-20T07:35:51Z

+			let errorData = JSON.stringify(error);
+			if (errorData.includes("Ticket not found")) {
+				toast.error("Ticket not found");
+			} else if (
+				errorData.includes("This ticket is not confirmed and cannot be used for check-in")
+			) {
+				toast.error("This ticket is not confirmed and cannot be used for check-in");
+			} else if (errorData.includes("This ticket was already checked in today")) {
+				toast.error("This ticket was already checked in today.");
+			} else {
+				toast.error("Error validating ticket");


Error handling relies on string matching of JSON-serialized error messages, which is fragile and may fail if the error format changes. Consider using error codes or structured error responses from the API instead of string matching. Additionally, the toast message on line 58 ends with a period while others don't, creating inconsistency.

Suggested change

let errorData = JSON.stringify(error);

if (errorData.includes("Ticket not found")) {

toast.error("Ticket not found");

} else if (

errorData.includes("This ticket is not confirmed and cannot be used for check-in")

) {

toast.error("This ticket is not confirmed and cannot be used for check-in");

} else if (errorData.includes("This ticket was already checked in today")) {

toast.error("This ticket was already checked in today.");

} else {

toast.error("Error validating ticket");

const message = error?.message || "";

if (message === "Ticket not found") {

toast.error("Ticket not found.");

} else if (

message === "This ticket is not confirmed and cannot be used for check-in"

) {

toast.error("This ticket is not confirmed and cannot be used for check-in.");

} else if (message === "This ticket was already checked in today") {

toast.error("This ticket was already checked in today.");

} else {

toast.error("Error validating ticket.");

NagariaHussain · 2025-10-20T07:40:47Z

CI failing @Inventor77

…straints to avoid unplugin-utils@0.3.1 engine mismatch (requires Node >=20.19.0)

…k-in - refine QR scanner behavior in dashboard/src/components/QRScanner.vue - adjust buzz/api.py endpoints/logic to support check-in flow

NagariaHussain · 2025-10-23T08:39:20Z

Linters failing again @Inventor77

- Add theme toggle functionality to Navbar component - Update BuzzLogo component with improved SVG design - Enhance dark/light mode support across components

- Add QR code scanning functionality using html5-qrcode library - Implement manual ticket ID entry as fallback option - Add duplicate scan prevention with 2-second timeout - Support multiple QR code formats (ticket ID, URLs with ticket parameter) - Add scanner controls (start/stop) and processing overlay - Improve mobile experience with custom styling overrides

- Add comprehensive ticket validation modal with multiple states - Support valid ticket display with attendee details and add-ons - Handle already checked-in tickets with warning state - Display error states for invalid tickets - Add check-in functionality with loading states - Format date/time display for check-in times - Improve UI with proper icons and color coding for different states

- Add ticket validation resource with success/error handling - Implement check-in resource for ticket processing - Add audio feedback with success and error sounds - Implement debounced toast notifications to prevent spam - Add comprehensive error handling for different ticket states - Support singleton pattern for state management across components - Add loading states for validation and check-in processes

- Remove booking status validation from ticket check-in - Remove redundant success flags from API responses - Remove booking amount/currency from ticket validation response - Simplify check-in flow by removing unnecessary validation checks

- Remove lastScanResult state and use validationResult directly - Simplify TicketDetailsModal by removing redundant success checks - Remove unused LucideAlertTriangle import - Streamline UI logic by removing unnecessary conditional rendering - Update CheckInScanner to use validationResult instead of lastScanResult

- Add Frontdesk Manager role validation to CheckInScanner page - Display access denied message for unauthorized users - Import LucideShieldX icon for security UI - Prevent scanner access without proper permissions

Inventor77 added 7 commits October 12, 2025 05:09

feat: add QR code scanning dependencies

bd7ad7c

- Add html5-qrcode package for QR code scanning functionality - Update package.json and yarn.lock with new dependencies - Enable QR code scanning capabilities for ticket validation

feat: add ticket validation composable

dabf2fc

- Create useTicketValidation composable for reusable ticket validation logic - Handle ticket validation and check-in API calls - Manage loading states and error handling - Provide centralized state management for scanner components

feat: add check-in scanner page and routing

c6f2d6f

- Add CheckInScanner page with complete scanner interface - Update router to include /checkin-scanner route - Integrate all scanner components with audio feedback - Include event selection and ticket validation workflow

feat: add audio feedback assets for scanner

a77d919

- Add beep.wav for successful scan feedback - Add beep-fail.wav for error feedback - Provide audio cues for better user experience during scanning

feat: update TypeScript definitions for new components

6891143

- Update components.d.ts with new component type definitions - Include QRScanner, EventSelector, and TicketDetailsModal components - Ensure proper TypeScript support for all new scanner components

NagariaHussain requested changes Oct 12, 2025

View reviewed changes

Inventor77 added 14 commits October 18, 2025 15:19

Merge branch 'main' of github.com:BuildWithHussain/buzz into feat/che…

1362e37

…ckin-event

refactor(api): improve error handling in ticket validation and check-in

182c2a9

- Replace return statements with frappe.throw() for consistent error handling - Simplify error responses by using Frappe's built-in error handling - Remove redundant error response objects in favor of exceptions

feat(permissions): add Frontdesk Manager role and permissions

138bfa8

- Add Frontdesk Manager role to fixtures in hooks.py - Grant Frontdesk Manager permissions for Event Check In doctype

refactor(types): update composable and component types

5d1c178

- Remove unused error parameter in useTicketValidation onError handler - Add LucideX icon component to component types for UI consistency

NagariaHussain requested a review from Copilot October 20, 2025 07:34

Copilot AI reviewed Oct 20, 2025

View reviewed changes

Inventor77 added 2 commits October 20, 2025 16:24

fix(dashboard): resolve Node 18 build failure by updating package con…

c58c0d1

…straints to avoid unplugin-utils@0.3.1 engine mismatch (requires Node >=20.19.0)

feat(checkin-event): improve QR scanner and update API for event chec…

ecbc3c5

…k-in - refine QR scanner behavior in dashboard/src/components/QRScanner.vue - adjust buzz/api.py endpoints/logic to support check-in flow

Inventor77 requested a review from NagariaHussain October 20, 2025 11:19

Inventor77 added 4 commits October 24, 2025 12:43

feat: update UI components with theme support and logo improvements

22016f1

- Add theme toggle functionality to Navbar component - Update BuzzLogo component with improved SVG design - Enhance dark/light mode support across components

NagariaHussain changed the title ~~Feature: Add QR code scanner for event tickets~~ feat: Add QR code scanner for event tickets Oct 25, 2025

NagariaHussain requested changes Oct 25, 2025

View reviewed changes

Comment thread buzz/api.py Outdated

Comment thread buzz/api.py Outdated

Comment thread buzz/api.py Outdated

Comment thread buzz/api.py Outdated

Inventor77 added 4 commits October 25, 2025 17:43

fix: lint issues across multiple components and modules

96bb2dd

feat(security): add role-based access control to check-in scanner

42abf1c

- Add Frontdesk Manager role validation to CheckInScanner page - Display access denied message for unauthorized users - Import LucideShieldX icon for security UI - Prevent scanner access without proper permissions

Inventor77 force-pushed the feat/checkin-event branch from 1f30ccb to 42abf1c Compare October 25, 2025 14:46

NagariaHussain merged commit 5d18a2c into bwhtech:main Oct 26, 2025
3 checks passed

NagariaHussain mentioned this pull request Oct 27, 2025

Vibe Coded Ticket Scanning experience #46

Closed

		def validate_ticket_for_checkin(ticket_id: str) -> dict:
		try:

Uh oh!

Conversation

Inventor77 commented Oct 11, 2025

🎫 Event Check-in Scanner Feature

✨ Features Added

Backend API

Frontend Components

User Experience

🔧 Technical Implementation

Dependencies Added

New Files Created

API Endpoints

🚀 Usage

🎯 Benefits

🧪 Testing

📱 Mobile Support

Uh oh!

NagariaHussain commented Oct 12, 2025

Uh oh!

Uh oh!

NagariaHussain Oct 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NagariaHussain commented Oct 20, 2025

Uh oh!

NagariaHussain commented Oct 23, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants