update to python fastpi

Frontend/src/pages/admin/BookingManagementPage.tsx

@@ -0,0 +1,314 @@
+import React, { useEffect, useState } from 'react';
+import { Search, Eye, XCircle, CheckCircle } from 'lucide-react';
+import { bookingService, Booking } from '../../services/api';
+import { toast } from 'react-toastify';
+import Loading from '../../components/common/Loading';
+import Pagination from '../../components/common/Pagination';
+
+const BookingManagementPage: React.FC = () => {
+  const [bookings, setBookings] = useState<Booking[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [filters, setFilters] = useState({
+    search: '',
+    status: '',
+  });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const itemsPerPage = 5;
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  useEffect(() => {
+    fetchBookings();
+  }, [filters, currentPage]);
+
+  const fetchBookings = async () => {
+    try {
+      setLoading(true);
+      const response = await bookingService.getAllBookings({
+        ...filters,
+        page: currentPage,
+        limit: itemsPerPage,
+      });
+      setBookings(response.data.bookings);
+      if (response.data.pagination) {
+        setTotalPages(response.data.pagination.totalPages);
+        setTotalItems(response.data.pagination.total);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to load bookings list');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpdateStatus = async (id: number, status: string) => {
+    try {
+      await bookingService.updateBooking(id, { status } as any);
+      toast.success('Status updated successfully');
+      fetchBookings();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to update status');
+    }
+  };
+
+  const handleCancelBooking = async (id: number) => {
+    if (!window.confirm('Are you sure you want to cancel this booking?')) return;
+    
+    try {
+      await bookingService.cancelBooking(id);
+      toast.success('Booking cancelled successfully');
+      fetchBookings();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to cancel booking');
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const badges: Record<string, { bg: string; text: string; label: string }> = {
+      pending: { bg: 'bg-yellow-100', text: 'text-yellow-800', label: 'Pending confirmation' },
+      confirmed: { bg: 'bg-blue-100', text: 'text-blue-800', label: 'Confirmed' },
+      checked_in: { bg: 'bg-green-100', text: 'text-green-800', label: 'Checked in' },
+      checked_out: { bg: 'bg-gray-100', text: 'text-gray-800', label: 'Checked out' },
+      cancelled: { bg: 'bg-red-100', text: 'text-red-800', label: 'Cancelled' },
+    };
+    const badge = badges[status] || badges.pending;
+    return (
+      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge.bg} ${badge.text}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('de-DE', {
+      style: 'currency',
+      currency: 'EUR',
+    }).format(amount);
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900">Booking Management</h1>
+        <p className="text-gray-500 mt-1">Manage bookings</p>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              type="text"
+              placeholder="Search by booking number, guest name..."
+              value={filters.search}
+              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <select
+            value={filters.status}
+            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">All statuses</option>
+            <option value="pending">Pending confirmation</option>
+            <option value="confirmed">Confirmed</option>
+            <option value="checked_in">Checked in</option>
+            <option value="checked_out">Checked out</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Booking Number
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Customer
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Room
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Check-in/out
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Total Price
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                Status
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {bookings.map((booking) => (
+              <tr key={booking.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-blue-600">{booking.booking_number}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">{booking.guest_info?.full_name || booking.user?.name}</div>
+                  <div className="text-xs text-gray-500">{booking.guest_info?.email || booking.user?.email}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    Room {booking.room?.room_number} - {booking.room?.room_type?.name}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-900">
+                    {new Date(booking.check_in_date).toLocaleDateString('en-US')}
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    to {new Date(booking.check_out_date).toLocaleDateString('en-US')}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-semibold text-gray-900">
+                    {formatCurrency(booking.total_price)}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  {getStatusBadge(booking.status)}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button
+                    onClick={() => {
+                      setSelectedBooking(booking);
+                      setShowDetailModal(true);
+                    }}
+                    className="text-blue-600 hover:text-blue-900 mr-2"
+                    title="View details"
+                  >
+                    <Eye className="w-5 h-5" />
+                  </button>
+                  {booking.status === 'pending' && (
+                    <>
+                      <button
+                        onClick={() => handleUpdateStatus(booking.id, 'confirmed')}
+                        className="text-green-600 hover:text-green-900 mr-2"
+                        title="Confirm"
+                      >
+                        <CheckCircle className="w-5 h-5" />
+                      </button>
+                      <button
+                        onClick={() => handleCancelBooking(booking.id)}
+                        className="text-red-600 hover:text-red-900"
+                        title="Cancel"
+                      >
+                        <XCircle className="w-5 h-5" />
+                      </button>
+                    </>
+                  )}
+                  {booking.status === 'confirmed' && (
+                    <button
+                      onClick={() => handleUpdateStatus(booking.id, 'checked_in')}
+                      className="text-green-600 hover:text-green-900"
+                      title="Check-in"
+                    >
+                      <CheckCircle className="w-5 h-5" />
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+        />
+      </div>
+
+      {/* Detail Modal */}
+      {showDetailModal && selectedBooking && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">Booking Details</h2>
+              <button onClick={() => setShowDetailModal(false)} className="text-gray-500 hover:text-gray-700">
+                ✕
+              </button>
+            </div>
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Booking Number</label>
+                  <p className="text-lg font-semibold">{selectedBooking.booking_number}</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Status</label>
+                  <div className="mt-1">{getStatusBadge(selectedBooking.status)}</div>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Customer Information</label>
+                <p className="text-gray-900">{selectedBooking.guest_info?.full_name || selectedBooking.user?.name}</p>
+                <p className="text-gray-600">{selectedBooking.guest_info?.email || selectedBooking.user?.email}</p>
+                <p className="text-gray-600">{selectedBooking.guest_info?.phone || selectedBooking.user?.phone}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Room Information</label>
+                <p className="text-gray-900">Room {selectedBooking.room?.room_number} - {selectedBooking.room?.room_type?.name}</p>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Check-in Date</label>
+                  <p className="text-gray-900">{new Date(selectedBooking.check_in_date).toLocaleDateString('en-US')}</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Check-out Date</label>
+                  <p className="text-gray-900">{new Date(selectedBooking.check_out_date).toLocaleDateString('en-US')}</p>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Number of Guests</label>
+                <p className="text-gray-900">{selectedBooking.guest_count} guest(s)</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">Total Price</label>
+                <p className="text-2xl font-bold text-green-600">{formatCurrency(selectedBooking.total_price)}</p>
+              </div>
+              {selectedBooking.notes && (
+                <div>
+                  <label className="text-sm font-medium text-gray-500">Notes</label>
+                  <p className="text-gray-900">{selectedBooking.notes}</p>
+                </div>
+              )}
+            </div>
+            <div className="mt-6 flex justify-end">
+              <button
+                onClick={() => setShowDetailModal(false)}
+                className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BookingManagementPage;