type here

can you help me please because I can’t fix it, scanning the qrcode should update the status in my database please help me for the first time to build an angular project with a qrcode scan I tried different scanners installed but it won’t work without a camera come out… sorry if I posted the whole code but I don’t know what to do here for my capstone project. Thank youu!!

<!-- QR code scanner -->
<ngx-scanner-qrcode #action="scanner" (scanned)="onScanned($event)"></ngx-scanner-qrcode>

<!-- Loading indicator -->
<p *ngIf="action.isLoading">⌛ Loading...</p>

<!-- Start/Stop Scanner -->
<button (click)="action.isStart ? action.stop() : action.start()">
  {{ action.isStart ? 'Stop' : 'Start' }}
</button>

<!-- Optional: Display scanned data -->
<p *ngIf="scannedData">Scanned Data: {{ scannedData }}</p>

export class QRScannerDialogComponent {
  scannedData: string | null = null; // Store the scanned QR data

  constructor(private http: HttpClient, private dataService: DataService) {}

  // Called when the QR code is successfully scanned
  onScanned(scannedData: any) {
    console.log('Scanned Data:', scannedData); // Log the raw scanned data
    const qrValue = scannedData[0]?.value;  // Extract the 'value' field from the scanned data
    console.log('QR Value:', qrValue); // Log the extracted QR value
    this.scannedData = qrValue;  // Store the scanned value (BOOK-955995)
    
    if (qrValue) {
      console.log('Calling updateBookingStatus function...'); // Log the function call
      this.updateBookingStatus(qrValue); // Call the function to update the booking status
    } else {
      // Show an error message if no valid QR code value is found
      Swal.fire({
        icon: 'error',
        title: 'Invalid QR Code',
        text: 'No valid QR code value found. Please try again.',
      });
    }
  }
  
  updateBookingStatus(qrValue: string) {
    console.log('updateBookingStatus function started.'); // Log the function start
    const acceptedAt = new Date().toISOString();  // Capture the current timestamp
    
    console.log('Sending data to backend:', {
      complete_booking_reference: qrValue,  // Use the qrValue variable directly
      status: 'Completed',
      accepted_at: acceptedAt
    });
    
    // Send the request using dataService
    this.dataService.request('POST', 'update-booking-status', {
      complete_booking_reference: qrValue,
      status: 'Completed',
      accepted_at: acceptedAt
    }).subscribe(response => {
      console.log('Booking status updated:', response);  // Log the response from the server
      
      // Show a success message using SweetAlert
      Swal.fire({
        icon: 'success',
        title: 'Success',
        text: 'Booking status updated successfully!',
      });

    }, error => {
      console.error('Error updating booking status:', error);  // Log any errors
      
      // Show an error message using SweetAlert
      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'There was an error updating the booking status. Please try again.',
      });
    });
    
    console.log('Request sent to backend.'); // Log the request
  }

I tried things from google and github but I can’t follow it