updates

Frontend/src/pages/admin/BookingManagementPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Search, Eye, XCircle, CheckCircle, Loader2, FileText, Plus, Mail } from 'lucide-react';
 import bookingService, { Booking } from '../../features/bookings/services/bookingService';
 import invoiceService from '../../features/payments/services/invoiceService';
@@ -35,13 +35,29 @@ const BookingManagementPage: React.FC = () => {
   const [totalItems, setTotalItems] = useState(0);
   const itemsPerPage = 5;
   const showOnlyWithoutInvoices = searchParams.get('createInvoice') === 'true';
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
     setCurrentPage(1);
   }, [filters]);
 
   useEffect(() => {
+    // Cancel previous request if exists
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    // Create new abort controller
+    abortControllerRef.current = new AbortController();
+
     fetchBookings();
+
+    // Cleanup: abort request on unmount
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
   }, [filters, currentPage]);
 
   useEffect(() => {
@@ -68,6 +84,11 @@ const BookingManagementPage: React.FC = () => {
         setTotalItems(response.data.pagination.total);
       }
     } catch (error: any) {
+      // Handle AbortError silently
+      if (error.name === 'AbortError') {
+        return;
+      }
+      logger.error('Error fetching bookings', error);
       toast.error(error.response?.data?.message || 'Unable to load bookings list');
     } finally {
       setLoading(false);
@@ -170,7 +191,6 @@ const BookingManagementPage: React.FC = () => {
       const response = await invoiceService.createInvoice(invoiceData);
       
       // Log the full response for debugging
-      console.log('Invoice creation response:', JSON.stringify(response, null, 2));
       logger.info('Invoice creation response', { response });
       
       // Check response structure - handle different possible formats
@@ -178,11 +198,10 @@ const BookingManagementPage: React.FC = () => {
       if (response.status === 'success' && response.data) {
         // Try different possible response structures
         invoice = response.data.invoice || response.data.data?.invoice || response.data;
-        console.log('Extracted invoice:', invoice);
+        logger.debug('Extracted invoice', { invoice });
       }
       
       if (!invoice) {
-        console.error('Failed to create invoice - no invoice in response', response);
         logger.error('Failed to create invoice - no invoice in response', { response });
         toast.error(response.message || 'Failed to create invoice - no invoice data received');
         return;
@@ -192,7 +211,6 @@ const BookingManagementPage: React.FC = () => {
       let invoiceId = invoice.id;
       
       // Log the invoice ID for debugging
-      console.log('Extracted invoice ID:', { invoiceId, type: typeof invoiceId, invoice });
       logger.info('Extracted invoice ID', { invoiceId, type: typeof invoiceId, invoice });
       
       // Convert to number if it's a string
@@ -202,7 +220,7 @@ const BookingManagementPage: React.FC = () => {
       
       // Validate invoice ID before navigation
       if (!invoiceId || isNaN(invoiceId) || invoiceId <= 0 || !isFinite(invoiceId)) {
-        console.error('Invalid invoice ID received from server', { 
+        logger.error('Invalid invoice ID received from server', { 
           originalInvoiceId: invoice.id,
           convertedInvoiceId: invoiceId, 
           type: typeof invoiceId,