updates

Frontend/src/pages/customer/MyBookingsPage.tsx

@@ -25,10 +25,12 @@ import {
 import useAuthStore from '../../store/useAuthStore';
 import Loading from '../../components/common/Loading';
 import EmptyState from '../../components/common/EmptyState';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
 
 const MyBookingsPage: React.FC = () => {
   const navigate = useNavigate();
   const { isAuthenticated } = useAuthStore();
+  const { formatCurrency } = useFormatCurrency();
 
   const [bookings, setBookings] = useState<Booking[]>([]);
   const [filteredBookings, setFilteredBookings] = 
@@ -174,12 +176,7 @@ const MyBookingsPage: React.FC = () => {
     });
   };
 
-  const formatPrice = (price: number) => {
-    return new Intl.NumberFormat('de-DE', {
-      style: 'currency',
-      currency: 'EUR',
-    }).format(price);
-  };
+  const formatPrice = (price: number) => formatCurrency(price);
 
   const getStatusConfig = (status: string) => {
     switch (status) {
@@ -223,11 +220,8 @@ const MyBookingsPage: React.FC = () => {
   };
 
   const canCancelBooking = (booking: Booking) => {
-    // Can only cancel pending or confirmed bookings
-    return (
-      booking.status === 'pending' || 
-      booking.status === 'confirmed'
-    );
+    // Only allow cancellation of pending bookings
+    return booking.status === 'pending';
   };
 
   if (loading) {
@@ -406,10 +400,14 @@ const MyBookingsPage: React.FC = () => {
                       lg:flex-row gap-6"
                     >
                       {/* Room Image */}
-                      {roomType?.images?.[0] && (
+                      {((room?.images && room.images.length > 0) 
+                        ? room.images[0] 
+                        : roomType?.images?.[0]) && (
                         <div className="lg:w-48 flex-shrink-0">
                           <img
-                            src={roomType.images[0]}
+                            src={(room?.images && room.images.length > 0) 
+                              ? room.images[0] 
+                              : (roomType?.images?.[0] || '')}
                             alt={roomType.name}
                             className="w-full h-48 lg:h-full 
                               object-cover rounded-lg"
@@ -587,12 +585,15 @@ const MyBookingsPage: React.FC = () => {
                           {/* Cancel Booking */}
                           {canCancelBooking(booking) && (
                             <button
-                              onClick={() =>
+                              type="button"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
                                 handleCancelBooking(
                                   booking.id,
                                   booking.booking_number
-                                )
-                              }
+                                );
+                              }}
                               disabled={
                                 cancellingId === booking.id
                               }
@@ -602,7 +603,7 @@ const MyBookingsPage: React.FC = () => {
                                 rounded-lg hover:bg-red-700 
                                 transition-colors font-medium 
                                 text-sm disabled:bg-gray-400 
-                                disabled:cursor-not-allowed"
+                                disabled:cursor-not-allowed cursor-pointer"
                             >
                               {cancellingId === booking.id ? (
                                 <>