gnx/Hotel-Booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-11-21 17:32:29 +02:00
parent f469cf7806
commit 2a105c1170
6 changed files with 1124 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
Frontend/src/pages/admin/BookingManagementPage.tsx
View File

@@ -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>
);
};

37
Frontend/src/pages/admin/ReceptionDashboardPage.tsx
View File

@@ -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>
);
};