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 10:15:29 +02:00
parent 2251e97688
commit 722997bb19
22 changed files with 235 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Frontend/src/pages/NotFoundPage.tsx
View File

@@ -45,7 +45,7 @@ const NotFoundPage: React.FC = () => {
{/* 404 Number */}
<div className="mb-6 sm:mb-8">
<h1 className="text-8xl sm:text-9xl lg:text-[12rem] font-serif font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#d4af37] via-[#f5d76e] to-[#d4af37] leading-none tracking-tight">
<h1 className="text-8xl sm:text-9xl lg:text-[12rem] font-display font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#d4af37] via-[#f5d76e] to-[#d4af37] leading-none tracking-tight">
404
</h1>
</div>
@@ -59,7 +59,7 @@ const NotFoundPage: React.FC = () => {
{/* Main Message */}
<div className="mb-6 sm:mb-8">
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-serif font-semibold text-gray-900 mb-3 sm:mb-4 tracking-tight">
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-elegant font-semibold text-gray-900 mb-3 sm:mb-4 tracking-tight">
Page Not Found
</h2>
<p className="text-base sm:text-lg text-gray-600 font-light tracking-wide max-w-md mx-auto leading-relaxed">

4
Frontend/src/pages/auth/index.ts
View File

@@ -1,4 +0,0 @@
export { default as LoginPage } from './LoginPage';
export { default as RegisterPage } from './RegisterPage';
export { default as ForgotPasswordPage } from './ForgotPasswordPage';
export { default as ResetPasswordPage } from './ResetPasswordPage';

8
Frontend/src/pages/customer/BookingDetailPage.tsx
View File

@@ -30,6 +30,7 @@ import {
type Booking,
} from '../../services/api/bookingService';
import useAuthStore from '../../store/useAuthStore';
import { useAuthModal } from '../../contexts/AuthModalContext';
import Loading from '../../components/common/Loading';
import PaymentStatusBadge from
'../../components/common/PaymentStatusBadge';
@@ -40,6 +41,7 @@ const BookingDetailPage: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { isAuthenticated } = useAuthStore();
const { openModal } = useAuthModal();
const { formatCurrency } = useFormatCurrency();
const [booking, setBooking] = useState<Booking | null>(
@@ -55,11 +57,9 @@ const BookingDetailPage: React.FC = () => {
toast.error(
'Please login to view booking details'
);
navigate('/login', {
state: { from: `/bookings/${id}` }
});
openModal('login');
}
}, [isAuthenticated, navigate, id]);
}, [isAuthenticated, openModal, id]);
useEffect(() => {

33
Frontend/src/pages/customer/BookingPage.tsx
View File

@@ -35,6 +35,7 @@ import {
import { serviceService, Service, promotionService, Promotion } from '../../services/api';
import { createPayPalOrder } from '../../services/api/paymentService';
import useAuthStore from '../../store/useAuthStore';
import { useAuthModal } from '../../contexts/AuthModalContext';
import {
bookingValidationSchema,
type BookingFormData
@@ -49,6 +50,7 @@ const BookingPage: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { isAuthenticated, userInfo } = useAuthStore();
const { openModal } = useAuthModal();
const { formatCurrency, currency } = useFormatCurrency();
const [room, setRoom] = useState<Room | null>(null);
@@ -71,9 +73,7 @@ const BookingPage: React.FC = () => {
toast.error(
'Please login to make a booking'
);
navigate('/login', {
state: { from: `/booking/${id}` }
});
openModal('login');
} else if (userInfo?.role === 'admin' || userInfo?.role === 'staff') {
toast.error('Admin and staff users cannot make bookings');
if (userInfo?.role === 'admin') {
@@ -1284,17 +1284,13 @@ const BookingPage: React.FC = () => {
</span>
</div>
<p className="text-xs text-gray-400 mb-2 font-light tracking-wide">
Pay the remaining balance on arrival
Requires 20% deposit, remaining balance on arrival
</p>
<div className="bg-gradient-to-br from-orange-900/20 to-orange-800/10
border border-orange-500/30 rounded-lg p-2.5"
>
<p className="text-[10px] sm:text-xs text-orange-300 font-light tracking-wide leading-relaxed">
<strong className="text-orange-200">Note:</strong> You need to pay
<strong className="text-[#d4af37]"> 20% deposit</strong> via
bank transfer immediately after booking to
secure the room. Pay the remaining balance
on arrival.
<strong className="text-orange-200">20% deposit required</strong> to secure your booking. Pay the remaining balance on arrival at the hotel.
</p>
</div>
</div>
@@ -1769,14 +1765,14 @@ const BookingPage: React.FC = () => {
>
Deposit to pay (20%)
</span>
<span className="text-base sm:text-lg font-serif font-semibold
<span className="text-base sm:text-lg font-display font-semibold
text-[#d4af37] tracking-tight"
>
{formatPrice(totalPrice * 0.2)}
</span>
</div>
<p className="text-[10px] sm:text-xs text-orange-300/80 font-light tracking-wide">
Pay via bank transfer to confirm booking
Pay 20% deposit to secure booking, remaining balance on arrival
</p>
</div>
)}
@@ -1791,15 +1787,12 @@ const BookingPage: React.FC = () => {
}`}
>
{paymentMethod === 'cash' ? (
<div className="flex items-start gap-2">
<Shield className="w-3.5 h-3.5 text-orange-400 mt-0.5 flex-shrink-0" />
<p className="text-[10px] sm:text-xs text-orange-300 font-light tracking-wide leading-relaxed">
<strong className="text-orange-200">Required:</strong> Pay 20% deposit
via bank transfer after booking.
Remaining balance ({formatPrice(totalPrice * 0.8)})
to be paid on arrival.
</p>
</div>
<div className="flex items-start gap-2">
<Shield className="w-3.5 h-3.5 text-orange-400 mt-0.5 flex-shrink-0" />
<p className="text-[10px] sm:text-xs text-orange-300 font-light tracking-wide leading-relaxed">
<strong className="text-orange-200">20% deposit required</strong> to secure your booking. Pay the remaining balance ({formatPrice(totalPrice * 0.8)}) on arrival at the hotel.
</p>
</div>
) : (
<div className="flex items-start gap-2">
<Sparkles className="w-3.5 h-3.5 text-[#d4af37] mt-0.5 flex-shrink-0" />

7
Frontend/src/pages/customer/DepositPaymentPage.tsx
View File

@@ -243,7 +243,7 @@ const DepositPaymentPage: React.FC = () => {
</h1>
<p className="text-green-200/80 font-light text-xs sm:text-sm tracking-wide">
Your booking has been confirmed.
Remaining amount to be paid at check-in.
Remaining amount to be paid on arrival at the hotel.
</p>
</div>
</div>
@@ -266,12 +266,11 @@ const DepositPaymentPage: React.FC = () => {
<CreditCard className="w-6 h-6 sm:w-7 sm:h-7 text-[#d4af37]" />
</div>
<div className="flex-1 text-center sm:text-left">
<h1 className="text-base sm:text-lg font-serif font-semibold text-[#d4af37] mb-1 tracking-wide">
<h1 className="text-base sm:text-lg font-elegant font-semibold text-[#d4af37] mb-1 tracking-wide">
Deposit Payment Required
</h1>
<p className="text-gray-300/80 font-light text-xs sm:text-sm tracking-wide">
Please pay <strong className="text-[#d4af37] font-medium">20% deposit</strong> to
confirm your booking
Please pay <strong className="text-[#d4af37] font-medium">20% deposit</strong> to confirm your booking. Pay the remaining balance on arrival at the hotel.
</p>
</div>
</div>

8
Frontend/src/pages/customer/MyBookingsPage.tsx
View File

@@ -23,6 +23,7 @@ import {
type Booking,
} from '../../services/api/bookingService';
import useAuthStore from '../../store/useAuthStore';
import { useAuthModal } from '../../contexts/AuthModalContext';
import Loading from '../../components/common/Loading';
import EmptyState from '../../components/common/EmptyState';
import { useFormatCurrency } from '../../hooks/useFormatCurrency';
@@ -31,6 +32,7 @@ import { parseDateLocal } from '../../utils/format';
const MyBookingsPage: React.FC = () => {
const navigate = useNavigate();
const { isAuthenticated } = useAuthStore();
const { openModal } = useAuthModal();
const { formatCurrency } = useFormatCurrency();
const [bookings, setBookings] = useState<Booking[]>([]);
@@ -48,11 +50,9 @@ const MyBookingsPage: React.FC = () => {
useEffect(() => {
if (!isAuthenticated) {
toast.error('Please login to view your bookings');
navigate('/login', {
state: { from: '/bookings' }
});
openModal('login');
}
}, [isAuthenticated, navigate]);
}, [isAuthenticated, openModal]);
useEffect(() => {

6
Frontend/src/pages/customer/PaymentConfirmationPage.tsx
View File

@@ -24,6 +24,7 @@ import {
import { confirmBankTransfer } from
'../../services/api/paymentService';
import useAuthStore from '../../store/useAuthStore';
import { useAuthModal } from '../../contexts/AuthModalContext';
import Loading from '../../components/common/Loading';
import PaymentStatusBadge from
'../../components/common/PaymentStatusBadge';
@@ -33,6 +34,7 @@ const PaymentConfirmationPage: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { isAuthenticated } = useAuthStore();
const { openModal } = useAuthModal();
const { formatCurrency } = useFormatCurrency();
const [booking, setBooking] = useState<Booking | null>(
@@ -54,9 +56,9 @@ const PaymentConfirmationPage: React.FC = () => {
toast.error(
'Please login to confirm payment'
);
navigate('/login');
openModal('login');
}
}, [isAuthenticated, navigate]);
}, [isAuthenticated, openModal]);
useEffect(() => {
if (id && isAuthenticated) {

2
Frontend/src/pages/customer/RoomDetailPage.tsx
View File

@@ -401,7 +401,7 @@ const RoomDetailPage: React.FC = () => {
>
<Shield className="w-3.5 h-3.5 text-[#d4af37] mt-0.5 flex-shrink-0" />
<p className="text-[10px] sm:text-xs text-gray-300 font-light tracking-wide leading-relaxed">
No immediate charge — secure your booking now and pay at the hotel
<strong className="text-[#d4af37]">20% deposit required</strong> to secure your booking. Pay the remaining balance on arrival at the hotel.
</p>
</div>
)}