created another one for payment

src/app/attendance/attendance.component.html

@@ -2,7 +2,6 @@
 <div *ngIf="loading">Loading QR Code...</div>
 
 <div *ngIf="!loading && qrData">
-  <h3>Scan to check in:</h3>
   <qrcode 
     [qrdata]="qrData" 
     [width]="256" 

src/app/dashboard/dashboard.component.html

@@ -11,4 +11,8 @@
   <mat-tab label="Attendance">
     <app-attendance></app-attendance>
   </mat-tab>
+
+  <mat-tab label="Payment">
+    <app-payment></app-payment>
+  </mat-tab>
 </mat-tab-group>

src/app/dashboard/dashboard.component.ts

@@ -6,6 +6,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { AttendanceComponent } from '../attendance/attendance.component';
 import { DashboardHomeComponent } from './dashboard.home.component';
+import { PaymentComponent } from '../payment/payment.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -16,6 +17,7 @@ import { DashboardHomeComponent } from './dashboard.home.component';
     MatToolbarModule,
     MatButtonModule,
     DashboardHomeComponent,
+    PaymentComponent,
     AttendanceComponent
   ],
   templateUrl: './dashboard.component.html',

src/app/payment/payment.component.css

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+qrcode {
+  margin-top: 1rem;
+}

src/app/payment/payment.component.html

@@ -0,0 +1,14 @@
+<h1> Scan to make PAYMENT! </h1>
+<div *ngIf="loading">Loading QR Code...</div>
+
+<div *ngIf="!loading && qrData">
+  <qrcode 
+    [qrdata]="qrData" 
+    [width]="256" 
+    [errorCorrectionLevel]="'M'">
+  </qrcode>
+</div>
+
+<div *ngIf="!loading && !qrData">
+  <p>Unable to generate QR code.</p>
+</div>

src/app/payment/payment.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaymentComponent } from './payment.component';
+
+describe('PaymentComponent', () => {
+  let component: PaymentComponent;
+  let fixture: ComponentFixture<PaymentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PaymentComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PaymentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/payment/payment.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AuthService } from '../services/auth.service';
+import { QRCodeComponent } from 'angularx-qrcode';
+@Component({
+  standalone: true,
+  selector: 'app-payment',
+  imports: [CommonModule, QRCodeComponent],
+  templateUrl: `./payment.component.html`,
+  styleUrls: ['./payment.component.css']
+})
+export class PaymentComponent implements OnInit {
+  qrData: string = '';
+  loading = true;
+
+
+  constructor(private auth: AuthService) {
+
+  }
+
+  ngOnInit(): void {
+    this.auth.getServerUrl().subscribe({
+      next: (url) => {
+        console.log('Received server URL:', url);
+        this.qrData = JSON.stringify({ action: 'Payment', serverUrl: url });
+        this.loading = false;
+      },
+      error: (err) => {
+        console.error('Failed to get server URL:', err);
+        this.qrData = '';
+        this.loading = false;
+      }
+    })
+  }
+
+
+}