updates

Frontend/src/components/admin/CreateBookingModal.tsx

@@ -0,0 +1,553 @@
+import React, { useState, useEffect } from 'react';
+import { X, Search, Calendar, Users, DollarSign, CreditCard, FileText, User } from 'lucide-react';
+import { bookingService, roomService, userService } from '../../services/api';
+import type { Room } from '../../services/api/roomService';
+import type { User as UserType } from '../../services/api/userService';
+import { toast } from 'react-toastify';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+interface CreateBookingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const CreateBookingModal: React.FC<CreateBookingModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+}) => {
+  const { formatCurrency } = useFormatCurrency();
+  const [loading, setLoading] = useState(false);
+  const [searchingRooms, setSearchingRooms] = useState(false);
+  const [searchingUsers, setSearchingUsers] = useState(false);
+
+  // Form state
+  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
+  const [userSearch, setUserSearch] = useState('');
+  const [userSearchResults, setUserSearchResults] = useState<UserType[]>([]);
+  const [showUserResults, setShowUserResults] = useState(false);
+
+  const [selectedRoom, setSelectedRoom] = useState<Room | null>(null);
+  const [checkInDate, setCheckInDate] = useState<Date | null>(null);
+  const [checkOutDate, setCheckOutDate] = useState<Date | null>(null);
+  const [guestCount, setGuestCount] = useState(1);
+  const [totalPrice, setTotalPrice] = useState<number>(0);
+  const [paymentMethod, setPaymentMethod] = useState<'cash' | 'stripe' | 'paypal'>('cash');
+  const [paymentStatus, setPaymentStatus] = useState<'full' | 'deposit' | 'unpaid'>('unpaid');
+  const [bookingStatus, setBookingStatus] = useState<'pending' | 'confirmed'>('confirmed');
+  const [specialRequests, setSpecialRequests] = useState('');
+  const [availableRooms, setAvailableRooms] = useState<Room[]>([]);
+
+  // Search for users
+  useEffect(() => {
+    if (userSearch.length >= 2) {
+      const timeoutId = setTimeout(async () => {
+        try {
+          setSearchingUsers(true);
+          const response = await userService.getUsers({
+            search: userSearch,
+            role: 'customer',
+            limit: 10,
+          });
+          setUserSearchResults(response.data.users || []);
+          setShowUserResults(true);
+        } catch (error: any) {
+          console.error('Error searching users:', error);
+        } finally {
+          setSearchingUsers(false);
+        }
+      }, 300);
+
+      return () => clearTimeout(timeoutId);
+    } else {
+      setUserSearchResults([]);
+      setShowUserResults(false);
+    }
+  }, [userSearch]);
+
+  // Search for available rooms when dates are selected
+  useEffect(() => {
+    if (checkInDate && checkOutDate && checkInDate < checkOutDate) {
+      const searchRooms = async () => {
+        try {
+          setSearchingRooms(true);
+          const checkInStr = checkInDate.toISOString().split('T')[0];
+          const checkOutStr = checkOutDate.toISOString().split('T')[0];
+          
+          const response = await roomService.searchAvailableRooms({
+            from: checkInStr,
+            to: checkOutStr,
+            limit: 50,
+          });
+          
+          setAvailableRooms(response.data.rooms || []);
+          
+          // Auto-calculate price if room is selected
+          if (selectedRoom) {
+            const nights = Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24));
+            const roomPrice = selectedRoom.room_type?.base_price || selectedRoom.price || 0;
+            setTotalPrice(roomPrice * nights);
+          }
+        } catch (error: any) {
+          console.error('Error searching rooms:', error);
+          toast.error('Failed to search available rooms');
+        } finally {
+          setSearchingRooms(false);
+        }
+      };
+
+      searchRooms();
+    } else {
+      setAvailableRooms([]);
+    }
+  }, [checkInDate, checkOutDate, selectedRoom]);
+
+  // Calculate price when room or dates change
+  useEffect(() => {
+    if (selectedRoom && checkInDate && checkOutDate && checkInDate < checkOutDate) {
+      const nights = Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24));
+      const roomPrice = selectedRoom.room_type?.base_price || selectedRoom.price || 0;
+      setTotalPrice(roomPrice * nights);
+    }
+  }, [selectedRoom, checkInDate, checkOutDate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedUser) {
+      toast.error('Please select a guest');
+      return;
+    }
+
+    if (!selectedRoom) {
+      toast.error('Please select a room');
+      return;
+    }
+
+    if (!checkInDate || !checkOutDate) {
+      toast.error('Please select check-in and check-out dates');
+      return;
+    }
+
+    if (checkInDate >= checkOutDate) {
+      toast.error('Check-out date must be after check-in date');
+      return;
+    }
+
+    if (totalPrice <= 0) {
+      toast.error('Total price must be greater than 0');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      
+      const bookingData = {
+        user_id: selectedUser.id,
+        room_id: selectedRoom.id,
+        check_in_date: checkInDate.toISOString().split('T')[0],
+        check_out_date: checkOutDate.toISOString().split('T')[0],
+        guest_count: guestCount,
+        total_price: totalPrice,
+        payment_method: paymentMethod,
+        payment_status: paymentStatus, // 'full', 'deposit', or 'unpaid'
+        notes: specialRequests,
+        status: bookingStatus,
+      };
+
+      await bookingService.adminCreateBooking(bookingData);
+      toast.success('Booking created successfully!');
+      handleClose();
+      onSuccess();
+    } catch (error: any) {
+      toast.error(error.response?.data?.detail || error.response?.data?.message || 'Failed to create booking');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setSelectedUser(null);
+    setUserSearch('');
+    setUserSearchResults([]);
+    setShowUserResults(false);
+    setSelectedRoom(null);
+    setCheckInDate(null);
+    setCheckOutDate(null);
+    setGuestCount(1);
+    setTotalPrice(0);
+    setPaymentMethod('cash');
+    setPaymentStatus('unpaid');
+    setBookingStatus('confirmed');
+    setSpecialRequests('');
+    setAvailableRooms([]);
+    onClose();
+  };
+
+  const handleSelectUser = (user: UserType) => {
+    setSelectedUser(user);
+    setUserSearch(user.full_name);
+    setShowUserResults(false);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4 animate-fade-in">
+      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden animate-scale-in border border-slate-200">
+        {/* Header */}
+        <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-8 py-6 border-b border-slate-700">
+          <div className="flex justify-between items-center">
+            <div>
+              <h2 className="text-3xl font-bold text-amber-100 mb-1">Create New Booking</h2>
+              <p className="text-amber-200/80 text-sm font-light">Mark a room as booked for specific dates</p>
+            </div>
+            <button
+              onClick={handleClose}
+              className="w-10 h-10 flex items-center justify-center rounded-xl text-amber-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-amber-400"
+            >
+              <X className="w-6 h-6" />
+            </button>
+          </div>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-8 overflow-y-auto max-h-[calc(90vh-120px)]">
+          <div className="space-y-6">
+            {/* Guest Selection */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                <User className="w-5 h-5 text-amber-600" />
+                Guest / Customer *
+              </label>
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
+                <input
+                  type="text"
+                  placeholder="Search for customer by name or email..."
+                  value={userSearch}
+                  onChange={(e) => setUserSearch(e.target.value)}
+                  onFocus={() => setShowUserResults(userSearchResults.length > 0)}
+                  className="w-full pl-10 pr-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                />
+                {showUserResults && userSearchResults.length > 0 && (
+                  <div className="absolute z-10 w-full mt-2 bg-white border-2 border-slate-200 rounded-xl shadow-lg max-h-60 overflow-y-auto">
+                    {userSearchResults.map((user) => (
+                      <button
+                        key={user.id}
+                        type="button"
+                        onClick={() => handleSelectUser(user)}
+                        className="w-full text-left px-4 py-3 hover:bg-amber-50 transition-colors border-b border-slate-100 last:border-0"
+                      >
+                        <div className="font-semibold text-slate-900">{user.full_name}</div>
+                        <div className="text-sm text-slate-500">{user.email}</div>
+                        {user.phone_number && (
+                          <div className="text-xs text-slate-400">{user.phone_number}</div>
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                )}
+                {searchingUsers && (
+                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-amber-600"></div>
+                  </div>
+                )}
+              </div>
+              {selectedUser && (
+                <div className="mt-2 p-3 bg-amber-50 rounded-lg border border-amber-200">
+                  <div className="font-semibold text-slate-900">{selectedUser.full_name}</div>
+                  <div className="text-sm text-slate-600">{selectedUser.email}</div>
+                </div>
+              )}
+            </div>
+
+            {/* Date Selection */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                  <Calendar className="w-5 h-5 text-amber-600" />
+                  Check-in Date *
+                </label>
+                <DatePicker
+                  selected={checkInDate}
+                  onChange={(date: Date | null) => setCheckInDate(date)}
+                  minDate={new Date()}
+                  dateFormat="yyyy-MM-dd"
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                  placeholderText="Select check-in date"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                  <Calendar className="w-5 h-5 text-amber-600" />
+                  Check-out Date *
+                </label>
+                <DatePicker
+                  selected={checkOutDate}
+                  onChange={(date: Date | null) => setCheckOutDate(date)}
+                  minDate={checkInDate || new Date()}
+                  dateFormat="yyyy-MM-dd"
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                  placeholderText="Select check-out date"
+                />
+              </div>
+            </div>
+
+            {/* Room Selection */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 mb-2">
+                Room *
+              </label>
+              {searchingRooms && checkInDate && checkOutDate ? (
+                <div className="p-4 text-center text-slate-500">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600 mx-auto mb-2"></div>
+                  Searching available rooms...
+                </div>
+              ) : availableRooms.length > 0 ? (
+                <select
+                  value={selectedRoom?.id || ''}
+                  onChange={(e) => {
+                    const room = availableRooms.find((r) => r.id === parseInt(e.target.value));
+                    setSelectedRoom(room || null);
+                  }}
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                >
+                  <option value="">Select a room</option>
+                  {availableRooms.map((room) => (
+                    <option key={room.id} value={room.id}>
+                      Room {room.room_number} - {room.room_type?.name || 'Standard'} - {formatCurrency(room.room_type?.base_price || room.price || 0)}/night
+                    </option>
+                  ))}
+                </select>
+              ) : checkInDate && checkOutDate ? (
+                <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-xl text-yellow-800">
+                  No available rooms found for the selected dates. Please try different dates.
+                </div>
+              ) : (
+                <div className="p-4 bg-slate-50 border border-slate-200 rounded-xl text-slate-500">
+                  Please select check-in and check-out dates to see available rooms
+                </div>
+              )}
+            </div>
+
+            {/* Guest Count and Price */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                  <Users className="w-5 h-5 text-amber-600" />
+                  Number of Guests *
+                </label>
+                <input
+                  type="number"
+                  min="1"
+                  value={guestCount}
+                  onChange={(e) => setGuestCount(parseInt(e.target.value) || 1)}
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                  <DollarSign className="w-5 h-5 text-amber-600" />
+                  Total Price *
+                </label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={totalPrice}
+                  onChange={(e) => setTotalPrice(parseFloat(e.target.value) || 0)}
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                />
+                {selectedRoom && checkInDate && checkOutDate && (
+                  <p className="text-xs text-slate-500 mt-1">
+                    {formatCurrency(totalPrice)} for{' '}
+                    {Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24))} night(s)
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Payment Method and Payment Status */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                  <CreditCard className="w-5 h-5 text-amber-600" />
+                  Payment Method *
+                </label>
+                <select
+                  value={paymentMethod}
+                  onChange={(e) => setPaymentMethod(e.target.value as 'cash' | 'stripe' | 'paypal')}
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                >
+                  <option value="cash">Cash</option>
+                  <option value="stripe">Card (Stripe)</option>
+                  <option value="paypal">PayPal</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                  <DollarSign className="w-5 h-5 text-amber-600" />
+                  Payment Status *
+                </label>
+                <select
+                  value={paymentStatus}
+                  onChange={(e) => setPaymentStatus(e.target.value as 'full' | 'deposit' | 'unpaid')}
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+                >
+                  <option value="unpaid">Unpaid (Pay at Check-in)</option>
+                  <option value="deposit">20% Deposit Only (Rest at Check-in)</option>
+                  <option value="full">Fully Paid</option>
+                </select>
+              </div>
+            </div>
+
+            {/* Booking Summary */}
+            {totalPrice > 0 && (
+              <div className="bg-gradient-to-br from-slate-50 to-amber-50/30 rounded-xl border-2 border-amber-200/50 p-6 space-y-3">
+                <h3 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
+                  <FileText className="w-5 h-5 text-amber-600" />
+                  Booking Summary
+                </h3>
+                
+                {selectedRoom && checkInDate && checkOutDate && (
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between items-center">
+                      <span className="text-slate-600">Room:</span>
+                      <span className="font-semibold text-slate-900">
+                        {selectedRoom.room_type?.name || 'Standard Room'} - Room {selectedRoom.room_number}
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-slate-600">Room price/night:</span>
+                      <span className="font-semibold text-slate-900">
+                        {formatCurrency(selectedRoom.room_type?.base_price || selectedRoom.price || 0)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-slate-600">Nights:</span>
+                      <span className="font-semibold text-slate-900">
+                        {Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24))} night(s)
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center border-t border-amber-200 pt-2">
+                      <span className="text-slate-600">Room Total:</span>
+                      <span className="font-semibold text-slate-900">
+                        {formatCurrency((selectedRoom.room_type?.base_price || selectedRoom.price || 0) * Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24)))}
+                      </span>
+                    </div>
+                  </div>
+                )}
+                
+                <div className="border-t border-amber-200 pt-3 space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-slate-600">Subtotal:</span>
+                    <span className="font-semibold text-slate-900">{formatCurrency(totalPrice)}</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-slate-600">Total:</span>
+                    <span className="text-lg font-bold text-slate-900">{formatCurrency(totalPrice)}</span>
+                  </div>
+                </div>
+
+                {paymentStatus === 'deposit' && (
+                  <div className="bg-amber-100/50 rounded-lg p-4 border border-amber-300 space-y-2">
+                    <div className="flex justify-between items-center">
+                      <span className="text-amber-800 font-semibold">Deposit to pay (20%):</span>
+                      <span className="text-lg font-bold text-amber-900">{formatCurrency(totalPrice * 0.2)}</span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-amber-700">Remaining balance:</span>
+                      <span className="font-semibold text-amber-900">{formatCurrency(totalPrice * 0.8)}</span>
+                    </div>
+                    <p className="text-xs text-amber-700 mt-2 italic">
+                      Pay 20% deposit to secure booking, remaining balance on arrival
+                    </p>
+                  </div>
+                )}
+
+                {paymentStatus === 'full' && (
+                  <div className="bg-green-100/50 rounded-lg p-4 border border-green-300">
+                    <div className="flex justify-between items-center">
+                      <span className="text-green-800 font-semibold">Amount to pay:</span>
+                      <span className="text-lg font-bold text-green-900">{formatCurrency(totalPrice)}</span>
+                    </div>
+                    <p className="text-xs text-green-700 mt-2 italic">
+                      Full payment will be marked as completed
+                    </p>
+                  </div>
+                )}
+
+                {paymentStatus === 'unpaid' && (
+                  <div className="bg-blue-100/50 rounded-lg p-4 border border-blue-300">
+                    <div className="flex justify-between items-center">
+                      <span className="text-blue-800 font-semibold">Payment due at check-in:</span>
+                      <span className="text-lg font-bold text-blue-900">{formatCurrency(totalPrice)}</span>
+                    </div>
+                    <p className="text-xs text-blue-700 mt-2 italic">
+                      Guest will pay the full amount upon arrival
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Booking Status */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 mb-2">
+                Booking Status *
+              </label>
+              <select
+                value={bookingStatus}
+                onChange={(e) => setBookingStatus(e.target.value as 'pending' | 'confirmed')}
+                className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all"
+              >
+                <option value="confirmed">Confirmed</option>
+                <option value="pending">Pending</option>
+              </select>
+            </div>
+
+            {/* Special Requests */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                <FileText className="w-5 h-5 text-amber-600" />
+                Special Requests / Notes
+              </label>
+              <textarea
+                value={specialRequests}
+                onChange={(e) => setSpecialRequests(e.target.value)}
+                rows={3}
+                className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all resize-none"
+                placeholder="Any special requests or notes..."
+              />
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="mt-8 pt-6 border-t border-slate-200 flex justify-end gap-4">
+            <button
+              type="button"
+              onClick={handleClose}
+              className="px-6 py-3 bg-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-300 transition-all duration-200"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl"
+            >
+              {loading ? 'Creating...' : 'Create Booking'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default CreateBookingModal;
+

Frontend/src/pages/admin/BookingManagementPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Search, Eye, XCircle, CheckCircle, Loader2, FileText } from 'lucide-react';
+import { Search, Eye, XCircle, CheckCircle, Loader2, FileText, Plus } from 'lucide-react';
 import { bookingService, Booking, invoiceService } from '../../services/api';
 import { toast } from 'react-toastify';
 import Loading from '../../components/common/Loading';
@@ -7,6 +7,7 @@ import Pagination from '../../components/common/Pagination';
 import { useFormatCurrency } from '../../hooks/useFormatCurrency';
 import { parseDateLocal } from '../../utils/format';
 import { useNavigate } from 'react-router-dom';
+import CreateBookingModal from '../../components/admin/CreateBookingModal';
 
 const BookingManagementPage: React.FC = () => {
   const { formatCurrency } = useFormatCurrency();
@@ -18,6 +19,7 @@ const BookingManagementPage: React.FC = () => {
   const [updatingBookingId, setUpdatingBookingId] = useState<number | null>(null);
   const [cancellingBookingId, setCancellingBookingId] = useState<number | null>(null);
   const [creatingInvoice, setCreatingInvoice] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
   const [filters, setFilters] = useState({
     search: '',
     status: '',
@@ -156,15 +158,26 @@ const BookingManagementPage: React.FC = () => {
 
   return (
     <div className="space-y-8 bg-gradient-to-br from-slate-50 via-white to-slate-50 min-h-screen -m-6 p-8">
-      {}
+      {/* Header with Create Button */}
       <div className="animate-fade-in">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="h-1 w-16 bg-gradient-to-r from-amber-400 to-amber-600 rounded-full"></div>
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent tracking-tight">
-            Booking Management
-          </h1>
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
+          <div className="flex-1">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="h-1 w-16 bg-gradient-to-r from-amber-400 to-amber-600 rounded-full"></div>
+              <h1 className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent tracking-tight">
+                Booking Management
+              </h1>
+            </div>
+            <p className="text-slate-600 mt-3 text-base sm:text-lg font-light">Manage and track all hotel bookings with precision</p>
+          </div>
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl whitespace-nowrap w-full sm:w-auto"
+          >
+            <Plus className="w-5 h-5" />
+            Create Booking
+          </button>
         </div>
-        <p className="text-slate-600 mt-3 text-lg font-light">Manage and track all hotel bookings with precision</p>
       </div>
 
       {}
@@ -677,6 +690,16 @@ const BookingManagementPage: React.FC = () => {
           </div>
         </div>
       )}
+
+      {/* Create Booking Modal */}
+      <CreateBookingModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        onSuccess={() => {
+          setShowCreateModal(false);
+          fetchBookings();
+        }}
+      />
     </div>
   );
 };

Frontend/src/pages/admin/ReceptionDashboardPage.tsx

@@ -32,6 +32,7 @@ import Pagination from '../../components/common/Pagination';
 import apiClient from '../../services/api/apiClient';
 import { useFormatCurrency } from '../../hooks/useFormatCurrency';
 import { parseDateLocal } from '../../utils/format';
+import CreateBookingModal from '../../components/admin/CreateBookingModal';
 
 type ReceptionTab = 'overview' | 'check-in' | 'check-out' | 'bookings' | 'rooms' | 'services';
 
@@ -88,6 +89,7 @@ const ReceptionDashboardPage: React.FC = () => {
   const [bookingTotalPages, setBookingTotalPages] = useState(1);
   const [bookingTotalItems, setBookingTotalItems] = useState(0);
   const bookingItemsPerPage = 5;
+  const [showCreateBookingModal, setShowCreateBookingModal] = useState(false);
 
   
   const [rooms, setRooms] = useState<Room[]>([]);
@@ -1949,16 +1951,25 @@ const ReceptionDashboardPage: React.FC = () => {
 
             {}
             <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
-              <div className="space-y-3">
-                <div className="flex items-center gap-3">
-                  <div className="p-2.5 rounded-xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-200/40">
-                    <Calendar className="w-6 h-6 text-blue-600" />
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                <div className="space-y-3 flex-1">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2.5 rounded-xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-200/40">
+                      <Calendar className="w-6 h-6 text-blue-600" />
+                    </div>
+                    <h2 className="text-3xl font-extrabold text-gray-900">Bookings Management</h2>
                   </div>
-                  <h2 className="text-3xl font-extrabold text-gray-900">Bookings Management</h2>
+                  <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
+                    Manage and track all hotel bookings with precision
+                  </p>
                 </div>
-                <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
-                  Manage and track all hotel bookings with precision
-                </p>
+                <button
+                  onClick={() => setShowCreateBookingModal(true)}
+                  className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl whitespace-nowrap w-full sm:w-auto"
+                >
+                  <Plus className="w-5 h-5" />
+                  Create Booking
+                </button>
               </div>
             </div>
 
@@ -3233,6 +3244,16 @@ const ReceptionDashboardPage: React.FC = () => {
           </div>
         )}
       </div>
+
+      {/* Create Booking Modal */}
+      <CreateBookingModal
+        isOpen={showCreateBookingModal}
+        onClose={() => setShowCreateBookingModal(false)}
+        onSuccess={() => {
+          setShowCreateBookingModal(false);
+          fetchBookings();
+        }}
+      />
     </div>
   );
 };

Frontend/src/services/api/bookingService.ts

@@ -283,6 +283,16 @@ export const generateQRCode = (
   return qrUrl;
 };
 
+export const adminCreateBooking = async (
+  bookingData: BookingData & { user_id: number; status?: string }
+): Promise<BookingResponse> => {
+  const response = await apiClient.post<BookingResponse>(
+    '/bookings/admin-create',
+    bookingData
+  );
+  return response.data;
+};
+
 export default {
   createBooking,
   getMyBookings,
@@ -294,4 +304,5 @@ export default {
   generateQRCode,
   getAllBookings,
   updateBooking,
+  adminCreateBooking,
 };