Staff fix bug

angular.json

@@ -31,7 +31,7 @@
               "src/vendors.scss",
               "src/app/lib/ngm-dev-blocks/styles/ngm-dev-blocks-styles.scss"
             ],
-            "allowedCommonJsDependencies": ["lottie-web"],
+            "allowedCommonJsDependencies": ["lottie-web", "qrcode"],
             "outputPath": "./dist"
           },
           "configurations": {

openapi-spec.json

@@ -1941,6 +1941,14 @@
             "format": "date-time",
             "nullable": true
           },
+          "depositAmount": {
+            "type": "number",
+            "format": "double"
+          },
+          "totalAmount": {
+            "type": "number",
+            "format": "double"
+          },
           "cancelReason": {
             "type": "string",
             "nullable": true

specs/001-staff-booking-flow/quickstart.md

@@ -4,7 +4,7 @@
 
 1. Ensure dependencies are installed with `pnpm install`.
 2. Start the application locally via `pnpm start` and navigate to `http://localhost:4200/staff/bookings` using a staff account.
-3. Open a booking that is deposit-paid and pending approval, then click **Tiếp tục xử lý** to reach `/staff/bookings/:bookingId/fulfillment`.
+3. Open a booking that is deposit-paid and pending approval, then click **Tiếp tục xử lý** to reach `/staff/fulfillment/:bookingId`.
 
 ## Required API Sequence
 

specs/001-staff-booking-flow/spec.md

@@ -65,7 +65,7 @@ With the rental package in place, the staff agent secures both renter and staff
 
 ### Functional Requirements
 
-- **FR-001**: Provide a dedicated fulfillment route (`/staff/bookings/{bookingId}/fulfillment`) available only from the staff bookings workspace for bookings that are deposit-paid and awaiting manual processing; the existing dashboard component must remain unchanged.
+- **FR-001**: Provide a dedicated fulfillment route (`/staff/fulfillment/{bookingId}`) available only from the staff bookings workspace for bookings that are deposit-paid and awaiting manual processing; the existing dashboard component must remain unchanged.
 - **FR-002**: Display booking, renter, vehicle, and rental summaries on the fulfillment route using read-only data from existing staff booking sources so agents can confirm they are working on the correct record.
 - **FR-003**: Present the six required milestones as a sequential checklist that enforces the order `check-in → create rental → create contract → upload inspection → capture renter signature → capture staff signature → confirm vehicle receipt`, unlocking each item only when its predecessors succeed.
 - **FR-004**: When the agent confirms booking check-in, call `/booking/POST/api/Booking/checkin` with `bookingId` and `BookingStatus.Approved`, persist completion metadata, and prevent duplicate submissions while awaiting the response.

src/app/core-logic/auth/auth.interceptor.ts

@@ -1,10 +1,61 @@
 import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
 import { inject } from '@angular/core';
 import { Router } from '@angular/router';
-import { Observable, catchError, finalize, take, throwError } from 'rxjs';
+import {
+  Observable,
+  catchError,
+  finalize,
+  of,
+  shareReplay,
+  switchMap,
+  take,
+  throwError,
+} from 'rxjs';
 import { AuthService } from './auth.service';
 import { TokenService } from '../token/token.service';
 
+let refreshInFlight$: Observable<unknown> | null = null;
+
+const ensureFreshAccessToken = (
+  authService: AuthService,
+  tokenService: TokenService,
+): Observable<unknown> => {
+  const needsRefresh = tokenService.isAccessTokenExpiration();
+  if (!needsRefresh) {
+    return of(null);
+  }
+
+  const hasRefreshToken = !!tokenService.refreshToken.token;
+  if (!hasRefreshToken) {
+    return throwError(() => new Error('Missing refresh token.'));
+  }
+
+  if (!refreshInFlight$) {
+    refreshInFlight$ = authService.invokeAccessTokenExpiration().pipe(
+      finalize(() => {
+        refreshInFlight$ = null;
+      }),
+      shareReplay({ bufferSize: 1, refCount: true }),
+    );
+  }
+
+  return refreshInFlight$;
+};
+
+const attachAuthorizationHeader = (
+  request: HttpRequest<unknown>,
+  tokenService: TokenService,
+): HttpRequest<unknown> => {
+  const accessToken = tokenService.accessToken.token;
+  if (!accessToken) {
+    return request;
+  }
+
+  return request.clone({
+    headers: request.headers.set('Authorization', `Bearer ${accessToken}`),
+  });
+};
+
 /**
  * Intercept
  *
@@ -18,63 +69,28 @@ export const authInterceptor = (
   const authService = inject(AuthService);
   const tokenService = inject(TokenService);
   const router = inject(Router);
-  // Clone the request object
-  let newReq = req.clone();
 
   // Request
   //Check if the user is authenticated
   if (!authService.isAuthenticated) {
     return next(req);
   }
-  // Check if the access token is expiration
-  if (tokenService.isAccessTokenExpiration()) {
-    // Invoke access token expiration
-    authService.invokeAccessTokenExpiration().subscribe({
-      next: () => {
-        newReq = req.clone({
-          headers: req.headers.set('Authorization', 'Bearer ' + tokenService.accessToken.token),
-        });
-      },
-      error: () => {
-        return throwError(() => new Error('Failed to invoke access token expiration.'));
-      },
-    });
-  } else {
-    // If the access token exists, add the Authorization header.
-    newReq = req.clone({
-      headers: req.headers.set('Authorization', 'Bearer ' + tokenService.accessToken.token),
-    });
-  }
-
-  // Response
-  return next(newReq).pipe(
+  return ensureFreshAccessToken(authService, tokenService).pipe(
+    switchMap(() => next(attachAuthorizationHeader(req, tokenService))),
     catchError((error) => {
       // Catch "401 Unauthorized" responses
       if (error instanceof HttpErrorResponse && error.status === 401) {
         //Show alert message about 401 Unauthorized
         // alertService.show('401 Unauthorized');
         // Run when refresh token is expiration
         // Sign out
-        authService
-          .signOut()
-          .pipe(
-            take(1),
-            finalize(() => {
-              // Reload the app
-              location.reload();
-            }),
-          )
-          .subscribe({
-            next: () => {
-              return next(newReq);
-            },
-            error: () => {
-              return throwError(() => error);
-            },
-            complete: () => {
-              return next(newReq);
-            },
-          });
+        return authService.signOut().pipe(
+          take(1),
+          finalize(() => {
+            location.reload();
+          }),
+          switchMap(() => throwError(() => error)),
+        );
       }
       // Catch other errors
       if (error instanceof HttpErrorResponse) {

src/app/core-logic/bookings/bookings.service.ts

@@ -33,6 +33,7 @@ import {
 export interface StaffBookingRecord {
   readonly bookingId: string;
   readonly renterId?: string;
+  readonly renterUserId?: string;
   readonly status?: BookingStatus;
   readonly verificationStatus?: BookingVerificationStatus;
   readonly bookingCreatedAt?: string;
@@ -183,67 +184,82 @@ export class BookingsService {
 
         const bookingIdentifier = this._normalizeString(booking.bookingId) ?? bookingId;
         const renterId = this._normalizeString(booking.renterId);
+        const userIdFromBooking = this._extractUserId(booking);
 
-        const renter$ = renterId
-          ? this._bookingService.apiBookingRenterProfileGet(renterId).pipe(
-              map((response: RenterProfileDtoApiResponse) => response.data ?? undefined),
-              catchError(() => of(undefined)),
-            )
-          : of(undefined);
-
-        const rental$ = renterId
-          ? this._rentalService.apiRentalByRenterGet(renterId).pipe(
-              map((response) => response.data?.items ?? []),
-              map((items) =>
-                items.find((item) => this._normalizeString(item.bookingId) === bookingIdentifier),
-              ),
-              switchMap((match) => {
-                const rentalId = this._normalizeString(match?.rentalId);
-                if (!rentalId) {
-                  return of(undefined);
-                }
-
-                return this._rentalService.apiRentalRentalIdGet(rentalId).pipe(
-                  map((response) => response.data ?? undefined),
+        const userId$ = userIdFromBooking
+          ? of(userIdFromBooking)
+          : this._resolveRenterUserId$(renterId);
+
+        return userId$.pipe(
+          switchMap((resolvedUserId) => {
+            const renterLookupId = resolvedUserId ?? renterId;
+
+            const renter$ = renterLookupId
+              ? this._bookingService.apiBookingRenterProfileGet(renterLookupId).pipe(
+                  map((response: RenterProfileDtoApiResponse) => response.data ?? undefined),
                   catchError(() => of(undefined)),
-                );
-              }),
-              catchError(() => of(undefined)),
-            )
-          : of(undefined);
-
-        return forkJoin({ renter: renter$, rental: rental$ }).pipe(
-          switchMap(({ renter, rental }) => {
-            const vehicleId = this._normalizeString(
-              rental?.vehicle?.vehicleId ?? rental?.vehicleId,
-            );
-            const vehicle$ = vehicleId
-              ? this._bookingService.apiBookingVehiclesVehicleIdGet(vehicleId).pipe(
-                  map((response: VehicleDetailsDtoApiResponse) => response.data ?? undefined),
+                )
+              : of(undefined);
+
+            const rental$ = renterId
+              ? this._rentalService.apiRentalByRenterGet(renterId).pipe(
+                  map((response) => response.data?.items ?? []),
+                  map((items) =>
+                    items.find(
+                      (item) => this._normalizeString(item.bookingId) === bookingIdentifier,
+                    ),
+                  ),
+                  switchMap((match) => {
+                    const rentalId = this._normalizeString(match?.rentalId);
+                    if (!rentalId) {
+                      return of(undefined);
+                    }
+
+                    return this._rentalService.apiRentalRentalIdGet(rentalId).pipe(
+                      map((response) => response.data ?? undefined),
+                      catchError(() => of(undefined)),
+                    );
+                  }),
                   catchError(() => of(undefined)),
                 )
               : of(undefined);
 
-            return vehicle$.pipe(
-              map(
-                (vehicle) =>
-                  ({
-                    bookingId: bookingIdentifier,
-                    renterId,
-                    status: booking.status,
-                    verificationStatus: booking.verificationStatus,
-                    bookingCreatedAt: this._normalizeString(booking.bookingCreatedAt),
-                    startTime: this._normalizeString(booking.startTime),
-                    endTime: this._normalizeString(booking.endTime),
-                    vehicleAtStationId: this._normalizeString(booking.vehicleAtStationId),
-                    verifiedAt: this._normalizeString(booking.verifiedAt),
-                    verifiedByStaffId: this._normalizeString(booking.verifiedByStaffId),
-                    cancelReason: this._normalizeString(booking.cancelReason),
-                    renterProfile: renter,
-                    rental,
-                    vehicleDetails: vehicle,
-                  }) satisfies StaffBookingRecord,
-              ),
+            return forkJoin({ renter: renter$, rental: rental$ }).pipe(
+              switchMap(({ renter, rental }) => {
+                const vehicleId = this._normalizeString(
+                  rental?.vehicle?.vehicleId ?? rental?.vehicleId,
+                );
+                const vehicle$ = vehicleId
+                  ? this._bookingService.apiBookingVehiclesVehicleIdGet(vehicleId).pipe(
+                      map((response: VehicleDetailsDtoApiResponse) => response.data ?? undefined),
+                      catchError(() => of(undefined)),
+                    )
+                  : of(undefined);
+
+                return vehicle$.pipe(
+                  map(
+                    (vehicle) =>
+                      ({
+                        bookingId: bookingIdentifier,
+                        renterId,
+                        renterUserId:
+                          resolvedUserId ?? userIdFromBooking ?? this._extractUserId(renter),
+                        status: booking.status,
+                        verificationStatus: booking.verificationStatus,
+                        bookingCreatedAt: this._normalizeString(booking.bookingCreatedAt),
+                        startTime: this._normalizeString(booking.startTime),
+                        endTime: this._normalizeString(booking.endTime),
+                        vehicleAtStationId: this._normalizeString(booking.vehicleAtStationId),
+                        verifiedAt: this._normalizeString(booking.verifiedAt),
+                        verifiedByStaffId: this._normalizeString(booking.verifiedByStaffId),
+                        cancelReason: this._normalizeString(booking.cancelReason),
+                        renterProfile: renter,
+                        rental,
+                        vehicleDetails: vehicle,
+                      }) satisfies StaffBookingRecord,
+                  ),
+                );
+              }),
             );
           }),
         );
@@ -343,11 +359,13 @@ export class BookingsService {
       const bookingId = booking.bookingId;
       const rental = rentalByBookingId.get(bookingId);
       const renterProfile = booking.renterId ? renterById.get(booking.renterId) : undefined;
+      const renterUserId = this._extractUserId(booking) ?? this._extractUserId(renterProfile);
       const vehicleDetails = this._resolveVehicleDetails(rental, vehicleDetailsMap);
 
       records.push({
         bookingId,
         renterId: this._normalizeString(booking.renterId),
+        renterUserId,
         status: booking.status,
         verificationStatus: booking.verificationStatus,
         bookingCreatedAt: this._normalizeString(booking.bookingCreatedAt),
@@ -553,6 +571,44 @@ export class BookingsService {
     return trimmed.length > 0 ? trimmed : undefined;
   }
 
+  private _extractUserId(source: unknown): string | undefined {
+    if (!source || typeof source !== 'object') {
+      return undefined;
+    }
+
+    const record = source as Record<string, unknown>;
+    const candidateKeys: readonly string[] = ['userId', 'userID', 'identityId', 'accountId'];
+
+    for (const key of candidateKeys) {
+      const candidate = record[key];
+      if (typeof candidate !== 'string') {
+        continue;
+      }
+
+      const normalized = this._normalizeString(candidate);
+      if (normalized) {
+        return normalized;
+      }
+    }
+
+    return undefined;
+  }
+
+  private _resolveRenterUserId$(renterId: string | undefined): Observable<string | undefined> {
+    if (!renterId) {
+      return of(undefined);
+    }
+
+    return this._staffService.apiStaffRentersGet().pipe(
+      map((response: RenterProfileDtoListApiResponse) => response.data ?? []),
+      map((renters) =>
+        renters.find((renter) => this._normalizeString(renter?.renterId) === renterId),
+      ),
+      map((match) => this._extractUserId(match)),
+      catchError(() => of(undefined)),
+    );
+  }
+
   private _compareByDateDesc(first?: string, second?: string): number {
     const firstTime = first ? Date.parse(first) : Number.NaN;
     const secondTime = second ? Date.parse(second) : Number.NaN;