@@ -242,11 +228,14 @@ const BookingManagementPage: React.FC = () => {
{/* Detail Modal */}
{showDetailModal && selectedBooking && (
-
-
-
-
Booking Details
-
setShowDetailModal(false)} className="text-gray-500 hover:text-gray-700">
+
+
+
+
Booking Details
+ setShowDetailModal(false)}
+ className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+ >
✕
@@ -296,10 +285,10 @@ const BookingManagementPage: React.FC = () => {
)}
+
setShowDetailModal(false)}
- className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
+ className="btn-enterprise-secondary"
>
Close
diff --git a/Frontend/src/pages/admin/CookieSettingsPage.tsx b/Frontend/src/pages/admin/CookieSettingsPage.tsx
new file mode 100644
index 00000000..1dc61980
--- /dev/null
+++ b/Frontend/src/pages/admin/CookieSettingsPage.tsx
@@ -0,0 +1,357 @@
+import React, { useEffect, useState } from 'react';
+import { Shield, SlidersHorizontal, Info, Save, Globe } from 'lucide-react';
+import { toast } from 'react-toastify';
+import adminPrivacyService, {
+ CookieIntegrationSettings,
+ CookieIntegrationSettingsResponse,
+ CookiePolicySettings,
+ CookiePolicySettingsResponse,
+} from '../../services/api/adminPrivacyService';
+import { Loading } from '../../components/common';
+
+const CookieSettingsPage: React.FC = () => {
+ const [policy, setPolicy] = useState
({
+ analytics_enabled: true,
+ marketing_enabled: true,
+ preferences_enabled: true,
+ });
+ const [integrations, setIntegrations] = useState({
+ ga_measurement_id: '',
+ fb_pixel_id: '',
+ });
+ const [policyMeta, setPolicyMeta] = useState<
+ Pick | null
+ >(null);
+ const [integrationMeta, setIntegrationMeta] = useState<
+ Pick | null
+ >(null);
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+
+ const loadSettings = async () => {
+ try {
+ setLoading(true);
+ const [policyRes, integrationRes] = await Promise.all([
+ adminPrivacyService.getCookiePolicy(),
+ adminPrivacyService.getIntegrations(),
+ ]);
+ setPolicy(policyRes.data);
+ setPolicyMeta({
+ updated_at: policyRes.updated_at,
+ updated_by: policyRes.updated_by,
+ });
+ setIntegrations(integrationRes.data || {});
+ setIntegrationMeta({
+ updated_at: integrationRes.updated_at,
+ updated_by: integrationRes.updated_by,
+ });
+ } catch (error: any) {
+ toast.error(error.message || 'Failed to load cookie & integration settings');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ void loadSettings();
+ }, []);
+
+ const handleToggle = (key: keyof CookiePolicySettings) => {
+ setPolicy((prev) => ({
+ ...prev,
+ [key]: !prev[key],
+ }));
+ };
+
+ const handleSave = async () => {
+ try {
+ setSaving(true);
+ const [policyRes, integrationRes] = await Promise.all([
+ adminPrivacyService.updateCookiePolicy(policy),
+ adminPrivacyService.updateIntegrations(integrations),
+ ]);
+ setPolicy(policyRes.data);
+ setPolicyMeta({
+ updated_at: policyRes.updated_at,
+ updated_by: policyRes.updated_by,
+ });
+ setIntegrations(integrationRes.data || {});
+ setIntegrationMeta({
+ updated_at: integrationRes.updated_at,
+ updated_by: integrationRes.updated_by,
+ });
+ toast.success('Cookie policy and integrations updated successfully');
+ } catch (error: any) {
+ toast.error(error.message || 'Failed to update cookie settings');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const handleSaveIntegrations = async () => {
+ try {
+ setSaving(true);
+ const integrationRes = await adminPrivacyService.updateIntegrations(
+ integrations
+ );
+ setIntegrations(integrationRes.data || {});
+ setIntegrationMeta({
+ updated_at: integrationRes.updated_at,
+ updated_by: integrationRes.updated_by,
+ });
+ toast.success('Integration IDs updated successfully');
+ } catch (error: any) {
+ toast.error(error.message || 'Failed to update integration IDs');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ if (loading) {
+ return
+ {/* Header */}
+
+
+
+
Cookie & Privacy Controls
+
+
+ Define which cookie categories are allowed in the application. These
+ settings control which types of cookies your users can consent to.
+
+
+
+
+
+
+
+ {/* Info card */}
+
+
+
+
+
+ How these settings affect the guest experience
+
+
+ Disabling a category here prevents it from being offered to guests as
+ part of the cookie consent flow. For example, if marketing cookies are
+ disabled, the website should not load marketing pixels even if a guest
+ previously opted in.
+
+ {policyMeta?.updated_at && (
+
+ Last updated on{' '}
+ {new Date(policyMeta.updated_at).toLocaleString(undefined, {
+ dateStyle: 'medium',
+ timeStyle: 'short',
+ })}{' '}
+ {policyMeta.updated_by ? `by ${policyMeta.updated_by}` : ''}
+
+ )}
+
+
+
+ {/* Toggles */}
+
+
+
+
+
+
+
+ Anonymous traffic and performance measurement (e.g. page views,
+ conversion funnels).
+
+
+
handleToggle('analytics_enabled')}
+ className={`relative inline-flex h-7 w-12 items-center rounded-full transition ${
+ policy.analytics_enabled ? 'bg-emerald-500' : 'bg-gray-300'
+ }`}
+ >
+
+
+
+ When disabled, analytics tracking scripts should not be executed,
+ regardless of user consent.
+
+
+
+
+
+
+
+
+
+ Personalised offers, remarketing campaigns, and external ad
+ networks.
+
+
+
handleToggle('marketing_enabled')}
+ className={`relative inline-flex h-7 w-12 items-center rounded-full transition ${
+ policy.marketing_enabled ? 'bg-pink-500' : 'bg-gray-300'
+ }`}
+ >
+
+
+
+ When disabled, do not load any marketing pixels or share data with ad
+ platforms.
+
+
+
+
+
+
+
+
+
+ Remember guest choices like language, currency, and layout.
+
+
+
handleToggle('preferences_enabled')}
+ className={`relative inline-flex h-7 w-12 items-center rounded-full transition ${
+ policy.preferences_enabled ? 'bg-indigo-500' : 'bg-gray-300'
+ }`}
+ >
+
+
+
+ When disabled, the application should avoid persisting non-essential
+ preferences client-side.
+
+
+
+
+ {/* Integration IDs */}
+
+
+
+
+
+
+ Third-party integrations (IDs only)
+
+
+ Configure IDs for supported analytics and marketing platforms. The
+ application will only load these when both the policy and user consent
+ allow it.
+
+
+
+
+ {integrationMeta?.updated_at && (
+
+ Last changed{' '}
+ {new Date(integrationMeta.updated_at).toLocaleString(undefined, {
+ dateStyle: 'medium',
+ timeStyle: 'short',
+ })}{' '}
+ {integrationMeta.updated_by ? `by ${integrationMeta.updated_by}` : ''}
+
+ )}
+
+
+
+
+
+
+
+
+ Google Analytics 4 Measurement ID
+
+
+ setIntegrations((prev) => ({
+ ...prev,
+ ga_measurement_id: e.target.value || undefined,
+ }))
+ }
+ placeholder="G-XXXXXXXXXX"
+ className="enterprise-input text-sm"
+ />
+
+ Example: G-ABCDE12345. This is used to
+ load GA4 via gtag.js when analytics cookies are allowed.
+
+
+
+
+
+ Meta (Facebook) Pixel ID
+
+
+ setIntegrations((prev) => ({
+ ...prev,
+ fb_pixel_id: e.target.value || undefined,
+ }))
+ }
+ placeholder="123456789012345"
+ className="enterprise-input text-sm"
+ />
+
+ Numeric ID from your Meta Pixel. The application will only fire pixel
+ events when marketing cookies are allowed.
+
+
+
+
+
(null);
- const [loading, setLoading] = useState(true);
const [dateRange, setDateRange] = useState({
from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
to: new Date().toISOString().split('T')[0],
});
- useEffect(() => {
- fetchDashboardData();
- }, [dateRange]);
-
const fetchDashboardData = async () => {
- try {
- setLoading(true);
- const response = await reportService.getReports({
- from: dateRange.from,
- to: dateRange.to,
- });
- setStats(response.data);
- } catch (error: any) {
- toast.error(error.response?.data?.message || 'Unable to load dashboard data');
- } finally {
- setLoading(false);
- }
+ const response = await reportService.getReports({
+ from: dateRange.from,
+ to: dateRange.to,
+ });
+ return response.data;
};
- const formatCurrency = (amount: number) => {
- return new Intl.NumberFormat('de-DE', {
- style: 'currency',
- currency: 'EUR',
- }).format(amount);
+ const { data: stats, loading, error, execute } = useAsync(
+ fetchDashboardData,
+ {
+ immediate: true,
+ onError: (error: any) => {
+ toast.error(error.message || 'Unable to load dashboard data');
+ }
+ }
+ );
+
+ useEffect(() => {
+ execute();
+ }, [dateRange]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const handleRefresh = () => {
+ execute();
};
if (loading) {
- return
+
+ );
}
return (
-
+
{/* Header */}
-
+
-
Dashboard
-
Hotel operations overview
+
Dashboard
+
Hotel operations overview and analytics
{/* Date Range Filter */}
-
{/* Stats Cards */}
{/* Total Revenue */}
-
+
Total Revenue
@@ -91,15 +118,16 @@ const DashboardPage: React.FC = () => {
+ {/* Trend indicator - can be enhanced with actual comparison data */}
+12.5%
- compared to last month
+ Active
+ All time revenue
{/* Total Bookings */}
-
+
Total Bookings
@@ -112,14 +140,14 @@ const DashboardPage: React.FC = () => {
- +8.2%
- compared to last month
+
+ {stats.total_bookings > 0 ? 'Total bookings recorded' : 'No bookings yet'}
+
{/* Available Rooms */}
-
+
Available Rooms
@@ -139,7 +167,7 @@ const DashboardPage: React.FC = () => {
{/* Total Customers */}
-
+
Customers
@@ -152,9 +180,9 @@ const DashboardPage: React.FC = () => {
- +15.3%
- new customers
+
+ Unique customers with bookings
+
@@ -162,72 +190,87 @@ const DashboardPage: React.FC = () => {
{/* Charts Section */}
{/* Revenue Chart */}
-
-
-
Daily Revenue
-
+
+
{stats?.revenue_by_date && stats.revenue_by_date.length > 0 ? (
- {stats.revenue_by_date.slice(0, 7).map((item, index) => (
-
-
- {new Date(item.date).toLocaleDateString('en-US')}
-
-
-
- {formatCurrency(item.revenue)}
-
-
- ))}
-
- ) : (
-
No data available
- )}
-
-
- {/* Bookings by Status */}
-
-
Booking Status
- {stats?.bookings_by_status ? (
-
- {Object.entries(stats.bookings_by_status).map(([status, count]) => {
- const statusColors: Record
= {
- pending: 'bg-yellow-500',
- confirmed: 'bg-blue-500',
- checked_in: 'bg-green-500',
- checked_out: 'bg-gray-500',
- cancelled: 'bg-red-500',
- };
- const statusLabels: Record = {
- pending: 'Pending confirmation',
- confirmed: 'Confirmed',
- checked_in: 'Checked in',
- checked_out: 'Checked out',
- cancelled: 'Cancelled',
- };
+ {stats.revenue_by_date.slice(0, 7).map((item, index) => {
+ const maxRevenue = Math.max(...stats.revenue_by_date!.map(r => r.revenue));
return (
-
-
-
-
{statusLabels[status]}
+
+
+ {formatDate(item.date, 'short')}
+
+
-
{count}
+
+ {formatCurrency(item.revenue, 'VND')}
+
);
})}
) : (
-
No data available
+
+ )}
+
+
+
Booking Status
+
+ {stats?.bookings_by_status && Object.keys(stats.bookings_by_status).length > 0 ? (
+
+ {Object.entries(stats.bookings_by_status)
+ .filter(([_, count]) => count > 0)
+ .map(([status, count]) => {
+ const statusColors: Record
= {
+ pending: 'bg-yellow-500',
+ confirmed: 'bg-blue-500',
+ checked_in: 'bg-green-500',
+ checked_out: 'bg-gray-500',
+ cancelled: 'bg-red-500',
+ };
+ const statusLabels: Record = {
+ pending: 'Pending confirmation',
+ confirmed: 'Confirmed',
+ checked_in: 'Checked in',
+ checked_out: 'Checked out',
+ cancelled: 'Cancelled',
+ };
+ return (
+
+
+
+
{statusLabels[status] || status}
+
+
{count}
+
+ ) : (
+
)}
@@ -235,51 +278,57 @@ const DashboardPage: React.FC = () => {
{/* Top Rooms and Services */}
{/* Top Rooms */}
-
-
Top Booked Rooms
+
+
Top Booked Rooms
{stats?.top_rooms && stats.top_rooms.length > 0 ? (
{stats.top_rooms.map((room, index) => (
-
-
-
+
+
+
{index + 1}
Room {room.room_number}
-
{room.bookings} bookings
+
{room.bookings} booking{room.bookings !== 1 ? 's' : ''}
- {formatCurrency(room.revenue)}
+ {formatCurrency(room.revenue, 'VND')}
) : (
-
No data available
+
)}
{/* Service Usage */}
-
-
Services Used
+
+
Services Used
{stats?.service_usage && stats.service_usage.length > 0 ? (
{stats.service_usage.map((service) => (
-
+
{service.service_name}
-
{service.usage_count} times used
+
{service.usage_count} time{service.usage_count !== 1 ? 's' : ''} used
- {formatCurrency(service.total_revenue)}
+ {formatCurrency(service.total_revenue, 'VND')}
))}
) : (
-
No data available
+
)}
diff --git a/Frontend/src/pages/admin/ReportsPage.tsx b/Frontend/src/pages/admin/ReportsPage.tsx
new file mode 100644
index 00000000..3fd4cf74
--- /dev/null
+++ b/Frontend/src/pages/admin/ReportsPage.tsx
@@ -0,0 +1,376 @@
+import React, { useState, useEffect } from 'react';
+import {
+ Calendar,
+ DollarSign,
+ Users,
+ Hotel,
+ TrendingUp,
+ Download,
+ Filter,
+ BarChart3,
+ PieChart
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { Loading, EmptyState } from '../../components/common';
+import { useAsync } from '../../hooks/useAsync';
+import { reportService, ReportData } from '../../services/api/reportService';
+import { formatCurrency, formatDate } from '../../utils/format';
+
+const ReportsPage: React.FC = () => {
+ const [dateRange, setDateRange] = useState({
+ from: '',
+ to: '',
+ });
+ const [reportType, setReportType] = useState<'daily' | 'weekly' | 'monthly' | 'yearly' | ''>('');
+
+ const fetchReports = async (): Promise
=> {
+ const params: any = {};
+ if (dateRange.from) params.from = dateRange.from;
+ if (dateRange.to) params.to = dateRange.to;
+ if (reportType) params.type = reportType;
+
+ const response = await reportService.getReports(params);
+ return response.data;
+ };
+
+ const {
+ data: reportData,
+ loading,
+ error,
+ execute: refetchReports
+ } = useAsync(fetchReports, {
+ immediate: true,
+ onError: (error: any) => {
+ toast.error(error.message || 'Unable to load reports');
+ }
+ });
+
+ const handleExport = async () => {
+ try {
+ const params: any = {};
+ if (dateRange.from) params.from = dateRange.from;
+ if (dateRange.to) params.to = dateRange.to;
+ if (reportType) params.type = reportType;
+
+ const blob = await reportService.exportReport(params);
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `report-${new Date().toISOString().split('T')[0]}.csv`;
+ document.body.appendChild(a);
+ a.click();
+ window.URL.revokeObjectURL(url);
+ document.body.removeChild(a);
+ toast.success('Report exported successfully');
+ } catch (error: any) {
+ toast.error(error.message || 'Failed to export report');
+ }
+ };
+
+ const handleFilter = () => {
+ refetchReports();
+ };
+
+ if (loading && !reportData) {
+ return
+
+ );
+ }
+
+ return (
+
+
+
+
Reports & Analytics
+
View comprehensive reports and statistics
+
+
+ Export CSV
+
+
+
+ {/* Filters */}
+
+
+
Filters
+
+
+
+
+ From Date
+
+
+
+
+ To Date
+
+
+
+
+ Report Type
+
+ setReportType(e.target.value as any)}
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
+ >
+ All
+ Daily
+ Weekly
+ Monthly
+ Yearly
+
+
+
+
+ Apply Filters
+
+
+
+
+
+ {reportData && (
+ <>
+ {/* Summary Cards */}
+
+
+
+
+ Total Bookings
+
+
+ {reportData.total_bookings || 0}
+
+
+
+
+
+
+ Total Revenue
+
+
+ {formatCurrency(reportData.total_revenue || 0)}
+
+
+
+
+
+
+ Total Customers
+
+
+ {reportData.total_customers || 0}
+
+
+
+
+
+
+ Available Rooms
+
+
+ {reportData.available_rooms || 0}
+
+
+ {reportData.occupied_rooms || 0} occupied
+
+
+
+
+ {/* Bookings by Status */}
+ {reportData.bookings_by_status && (
+
+
+
+ {Object.entries(reportData.bookings_by_status).map(([status, count]) => (
+
+
{count}
+
{status.replace('_', ' ')}
+
+ ))}
+
+
+ )}
+
+ {/* Revenue by Date */}
+ {reportData.revenue_by_date && reportData.revenue_by_date.length > 0 && (
+
+
+
Revenue by Date
+
+
+
+
+
+
+ Date
+
+
+ Bookings
+
+
+ Revenue
+
+
+
+
+ {reportData.revenue_by_date.map((item, index) => (
+
+
+ {formatDate(new Date(item.date), 'short')}
+
+
+ {item.bookings}
+
+
+ {formatCurrency(item.revenue)}
+
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Top Rooms */}
+ {reportData.top_rooms && reportData.top_rooms.length > 0 && (
+
+
Top Performing Rooms
+
+
+
+
+
+ Room Number
+
+
+ Bookings
+
+
+ Revenue
+
+
+
+
+ {reportData.top_rooms.map((room) => (
+
+
+ {room.room_number}
+
+
+ {room.bookings}
+
+
+ {formatCurrency(room.revenue)}
+
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Service Usage */}
+ {reportData.service_usage && reportData.service_usage.length > 0 && (
+
+
Service Usage
+
+
+
+
+
+ Service Name
+
+
+ Usage Count
+
+
+ Total Revenue
+
+
+
+
+ {reportData.service_usage.map((service) => (
+
+
+ {service.service_name}
+
+
+ {service.usage_count}
+
+
+ {formatCurrency(service.total_revenue)}
+
+
+ ))}
+
+
+
+
+ )}
+
+ )}
+
-
+ {/* Luxury background pattern */}
+
+
+
{/* Header */}
-
-
- Login
+
+ Welcome Back
-
- Welcome back to Hotel Booking
+
+ Sign in to Luxury Hotel
{/* Login Form */}
-
+
{errors.email && (
-
+
{errors.email.message}
)}
@@ -137,7 +142,7 @@ const LoginPage: React.FC = () => {
Password
@@ -152,34 +157,31 @@ const LoginPage: React.FC = () => {
id="password"
type={showPassword ? 'text' : 'password'}
autoComplete="current-password"
- className={`block w-full pl-10 pr-10 py-3
- border rounded-lg focus:outline-none
- focus:ring-2 transition-colors
- ${errors.password
- ? 'border-red-300 focus:ring-red-500'
- : 'border-gray-300 focus:ring-blue-500'
- }`}
+ className={`luxury-input pl-10 pr-10 ${
+ errors.password
+ ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
+ : ''
+ }`}
placeholder="••••••••"
/>
setShowPassword(!showPassword)}
className="absolute inset-y-0 right-0
- pr-3 flex items-center"
+ pr-3 flex items-center transition-colors
+ hover:text-[#d4af37]"
>
{showPassword ? (
{errors.password && (
-
+
{errors.password.message}
)}
@@ -192,14 +194,14 @@ const LoginPage: React.FC = () => {
{...register('rememberMe')}
id="rememberMe"
type="checkbox"
- className="h-4 w-4 text-blue-600
- focus:ring-blue-500 border-gray-300
- rounded cursor-pointer"
+ className="h-4 w-4 text-[#d4af37]
+ focus:ring-[#d4af37]/50 border-gray-300
+ rounded-sm cursor-pointer accent-[#d4af37]"
/>
Remember me
@@ -208,8 +210,8 @@ const LoginPage: React.FC = () => {
Forgot password?
@@ -219,27 +221,20 @@ const LoginPage: React.FC = () => {
{isLoading ? (
<>
Processing...
) : (
<>
- Sign In
)}
@@ -247,12 +242,12 @@ const LoginPage: React.FC = () => {
{/* Register Link */}
-
+
Don't have an account?{' '}
{/* Footer Info */}
-
+
By logging in, you agree to our{' '}
-
+ {/* Luxury background pattern */}
+
+
+
{/* Header */}
-
-
+
Create Account
-
- Create a new account to book hotel rooms
+
+ Join Luxury Hotel for exclusive benefits
{/* Register Form */}
-
+
{errors.name && (
-
+
{errors.name.message}
)}
@@ -178,7 +180,7 @@ const RegisterPage: React.FC = () => {
Email
@@ -195,20 +197,16 @@ const RegisterPage: React.FC = () => {
id="email"
type="email"
autoComplete="email"
- className={`block w-full pl-10 pr-3 py-3
- border rounded-lg focus:outline-none
- focus:ring-2 transition-colors
- ${
- errors.email
- ? 'border-red-300 focus:ring-red-500'
- : 'border-gray-300 ' +
- 'focus:ring-purple-500'
- }`}
+ className={`luxury-input pl-10 ${
+ errors.email
+ ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
+ : ''
+ }`}
placeholder="email@example.com"
/>
{errors.email && (
-
+
{errors.email.message}
)}
@@ -219,7 +217,7 @@ const RegisterPage: React.FC = () => {
Phone Number (Optional)
@@ -236,20 +234,16 @@ const RegisterPage: React.FC = () => {
id="phone"
type="tel"
autoComplete="tel"
- className={`block w-full pl-10 pr-3 py-3
- border rounded-lg focus:outline-none
- focus:ring-2 transition-colors
- ${
- errors.phone
- ? 'border-red-300 focus:ring-red-500'
- : 'border-gray-300 ' +
- 'focus:ring-purple-500'
- }`}
+ className={`luxury-input pl-10 ${
+ errors.phone
+ ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
+ : ''
+ }`}
placeholder="0123456789"
/>
{errors.phone && (
-
+
{errors.phone.message}
)}
@@ -260,7 +254,7 @@ const RegisterPage: React.FC = () => {
Password
@@ -277,38 +271,33 @@ const RegisterPage: React.FC = () => {
id="password"
type={showPassword ? 'text' : 'password'}
autoComplete="new-password"
- className={`block w-full pl-10 pr-10 py-3
- border rounded-lg focus:outline-none
- focus:ring-2 transition-colors
- ${
- errors.password
- ? 'border-red-300 focus:ring-red-500'
- : 'border-gray-300 ' +
- 'focus:ring-purple-500'
- }`}
+ className={`luxury-input pl-10 pr-10 ${
+ errors.password
+ ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
+ : ''
+ }`}
placeholder="••••••••"
/>
setShowPassword(!showPassword)}
className="absolute inset-y-0 right-0
- pr-3 flex items-center"
+ pr-3 flex items-center transition-colors
+ hover:text-[#d4af37]"
>
{showPassword ? (
{errors.password && (
-
+
{errors.password.message}
)}
@@ -322,7 +311,13 @@ const RegisterPage: React.FC = () => {
>
= 4
+ ? 'bg-[#d4af37]'
+ : passwordStrength.strength >= 3
+ ? 'bg-yellow-500'
+ : 'bg-red-500'
+ }`}
style={{
width: `${
(passwordStrength.strength / 5) * 100
@@ -331,7 +326,7 @@ const RegisterPage: React.FC = () => {
/>
{passwordStrength.label}
@@ -369,7 +364,7 @@ const RegisterPage: React.FC = () => {
Confirm Password
@@ -388,15 +383,11 @@ const RegisterPage: React.FC = () => {
showConfirmPassword ? 'text' : 'password'
}
autoComplete="new-password"
- className={`block w-full pl-10 pr-10 py-3
- border rounded-lg focus:outline-none
- focus:ring-2 transition-colors
- ${
- errors.confirmPassword
- ? 'border-red-300 focus:ring-red-500'
- : 'border-gray-300 ' +
- 'focus:ring-purple-500'
- }`}
+ className={`luxury-input pl-10 pr-10 ${
+ errors.confirmPassword
+ ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
+ : ''
+ }`}
placeholder="••••••••"
/>
{
setShowConfirmPassword(!showConfirmPassword)
}
className="absolute inset-y-0 right-0
- pr-3 flex items-center"
+ pr-3 flex items-center transition-colors
+ hover:text-[#d4af37]"
>
{showConfirmPassword ? (
{errors.confirmPassword && (
-
+
{errors.confirmPassword.message}
)}
@@ -431,28 +421,20 @@ const RegisterPage: React.FC = () => {
{isLoading ? (
<>
Processing...
) : (
<>
- Register
)}
@@ -460,12 +442,12 @@ const RegisterPage: React.FC = () => {
{/* Login Link */}
-
+
Already have an account?{' '}
{/* Footer Info */}
-
+
By registering, you agree to our{' '}
+
{met ? (
-
+
{text}
diff --git a/Frontend/src/pages/customer/DashboardPage.tsx b/Frontend/src/pages/customer/DashboardPage.tsx
index 2713e05f..f05c3002 100644
--- a/Frontend/src/pages/customer/DashboardPage.tsx
+++ b/Frontend/src/pages/customer/DashboardPage.tsx
@@ -4,243 +4,250 @@ import {
Hotel,
DollarSign,
Calendar,
- Activity
+ Activity,
+ TrendingDown
} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import dashboardService, { CustomerDashboardStats } from '../../services/api/dashboardService';
+import { toast } from 'react-toastify';
+import { formatCurrency, formatDate, formatRelativeTime } from '../../utils/format';
+import { Loading, EmptyState } from '../../components/common';
+import { useAsync } from '../../hooks/useAsync';
const DashboardPage: React.FC = () => {
- const formatCurrency = (amount: number) => {
- return new Intl.NumberFormat('de-DE', {
- style: 'currency',
- currency: 'EUR',
- }).format(amount);
+ const navigate = useNavigate();
+
+ const fetchDashboardData = async (): Promise
=> {
+ const response = await dashboardService.getCustomerDashboardStats();
+ return response.data;
};
+ const { data: stats, loading, error, execute } = useAsync(
+ fetchDashboardData,
+ {
+ immediate: true,
+ onError: (error: any) => {
+ toast.error(error.message || 'Unable to load dashboard data');
+ }
+ }
+ );
+
+ const handleRefresh = () => {
+ execute();
+ };
+
+ if (loading) {
+ return
+
+ );
+ }
+
return (
-
-
+
+
Dashboard
-
- Overview of your activity
+
+ Overview of your activity and bookings
-
-
+
+ {/* Total Bookings */}
+
+
-
-
- +12%
-
+ {stats.booking_change_percentage !== 0 && (
+
0 ? 'text-green-600' : 'text-red-600'
+ }`}>
+ {stats.booking_change_percentage > 0 ? (
+
+ )}
-
+
Total Bookings
- 45
+ {stats.total_bookings}
-
-
+ {/* Total Spending */}
+
+
-
-
- +8%
-
+ {stats.spending_change_percentage !== 0 && (
+
0 ? 'text-green-600' : 'text-red-600'
+ }`}>
+ {stats.spending_change_percentage > 0 ? (
+
+ )}
-
+
Total Spending
- {formatCurrency(12450)}
+ {formatCurrency(stats.total_spending, 'VND')}
-
-
+ {/* Currently Staying */}
+
+
-
- Active
-
+ {stats.currently_staying > 0 && (
+
+ Active
+
+ )}
-
+
Currently Staying
- 2
+ {stats.currently_staying}
-
-
+ {/* Upcoming Bookings Count */}
+
+
-
- Reward Points
+
+ Upcoming Bookings
- 1,250
+ {stats.upcoming_bookings.length}
- {/* Recent Activity */}
-
-
-
+ {/* Recent Activity & Upcoming Bookings */}
+
+ {/* Recent Activity */}
+
+
Recent Activity
-
- {[
- {
- action: 'Booking',
- room: 'Room 201',
- time: '2 hours ago'
- },
- {
- action: 'Check-in',
- room: 'Room 105',
- time: '1 day ago'
- },
- {
- action: 'Check-out',
- room: 'Room 302',
- time: '3 days ago'
- },
- ].map((activity, index) => (
-
-
0 ? (
+
+ {stats.recent_activity.map((activity, index) => (
+
navigate(`/bookings/${activity.booking_id}`)}
>
-
+
+
+
+ {activity.action}
+
+
+ {activity.room?.room_number || activity.booking_number}
+
+
+
+ {formatRelativeTime(new Date(activity.created_at))}
+
-
-
- {activity.action}
-
-
- {activity.room}
-
-
-
- {activity.time}
-
-
- ))}
-
+ ))}
+
+ ) : (
+
navigate('/bookings')
+ }}
+ />
+ )}
-
-
+ {/* Upcoming Bookings */}
+
+
Upcoming Bookings
-
- {[
- {
- room: 'Room 401',
- date: '20/11/2025',
- status: 'Confirmed'
- },
- {
- room: 'Room 203',
- date: '25/11/2025',
- status: 'Pending confirmation'
- },
- ].map((booking, index) => (
-
-
-
- {booking.room}
-
-
- {booking.date}
-
-
-
0 ? (
+
+ {stats.upcoming_bookings.map((booking) => (
+
navigate(`/bookings/${booking.id}`)}
>
- {booking.status}
-
-
- ))}
-
+
+ Room {booking.room?.room_number || 'N/A'}
+
+
+ {formatDate(booking.check_in_date, 'medium')}
+
+
+ {formatCurrency(booking.total_price, 'VND')}
+
+
+ {booking.status.charAt(0).toUpperCase() + booking.status.slice(1).replace('_', ' ')}
+
+
+ ))}
+
+ ) : (
+
navigate('/rooms')
+ }}
+ />
+ )}
diff --git a/Frontend/src/pages/customer/ProfilePage.tsx b/Frontend/src/pages/customer/ProfilePage.tsx
new file mode 100644
index 00000000..58879cb1
--- /dev/null
+++ b/Frontend/src/pages/customer/ProfilePage.tsx
@@ -0,0 +1,543 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import {
+ User,
+ Mail,
+ Phone,
+ Save,
+ Loader2,
+ CheckCircle,
+ AlertCircle,
+ Lock,
+ Camera
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import authService from '../../services/api/authService';
+import useAuthStore from '../../store/useAuthStore';
+import { Loading, EmptyState } from '../../components/common';
+import { useAsync } from '../../hooks/useAsync';
+import { useGlobalLoading } from '../../contexts/GlobalLoadingContext';
+
+// Validation schema
+const profileValidationSchema = yup.object().shape({
+ name: yup
+ .string()
+ .required('Full name is required')
+ .min(2, 'Full name must be at least 2 characters')
+ .max(100, 'Full name cannot exceed 100 characters'),
+ email: yup
+ .string()
+ .required('Email is required')
+ .email('Invalid email address'),
+ phone: yup
+ .string()
+ .required('Phone number is required')
+ .matches(
+ /^[0-9]{10,11}$/,
+ 'Phone number must have 10-11 digits'
+ ),
+});
+
+const passwordValidationSchema = yup.object().shape({
+ currentPassword: yup
+ .string()
+ .required('Current password is required'),
+ newPassword: yup
+ .string()
+ .required('New password is required')
+ .min(6, 'Password must be at least 6 characters'),
+ confirmPassword: yup
+ .string()
+ .required('Please confirm your password')
+ .oneOf([yup.ref('newPassword')], 'Passwords must match'),
+});
+
+type ProfileFormData = yup.InferType
;
+type PasswordFormData = yup.InferType;
+
+const ProfilePage: React.FC = () => {
+ const { userInfo, setUser } = useAuthStore();
+ const { setLoading } = useGlobalLoading();
+ const [activeTab, setActiveTab] = useState<'profile' | 'password'>('profile');
+ const [avatarPreview, setAvatarPreview] = useState(null);
+
+ // Fetch profile data
+ const fetchProfile = async () => {
+ const response = await authService.getProfile();
+ if (response.status === 'success' || response.success) {
+ const user = response.data?.user || response.data;
+ if (user) {
+ setUser(user);
+ return user;
+ }
+ }
+ throw new Error('Failed to load profile');
+ };
+
+ const {
+ data: profileData,
+ loading: loadingProfile,
+ error: profileError,
+ execute: refetchProfile
+ } = useAsync(fetchProfile, {
+ immediate: true,
+ onError: (error: any) => {
+ toast.error(error.message || 'Unable to load profile');
+ }
+ });
+
+ // Profile form
+ const {
+ register: registerProfile,
+ handleSubmit: handleSubmitProfile,
+ formState: { errors: profileErrors },
+ reset: resetProfile,
+ } = useForm({
+ resolver: yupResolver(profileValidationSchema),
+ defaultValues: {
+ name: userInfo?.name || '',
+ email: userInfo?.email || '',
+ phone: userInfo?.phone || '',
+ },
+ });
+
+ // Password form
+ const {
+ register: registerPassword,
+ handleSubmit: handleSubmitPassword,
+ formState: { errors: passwordErrors },
+ reset: resetPassword,
+ } = useForm({
+ resolver: yupResolver(passwordValidationSchema),
+ });
+
+ // Update form when profile data loads
+ useEffect(() => {
+ if (profileData || userInfo) {
+ const data = profileData || userInfo;
+ resetProfile({
+ name: data?.name || '',
+ email: data?.email || '',
+ phone: data?.phone || '',
+ });
+ if (data?.avatar) {
+ setAvatarPreview(data.avatar);
+ }
+ }
+ }, [profileData, userInfo, resetProfile]);
+
+ // Handle profile update
+ const onSubmitProfile = async (data: ProfileFormData) => {
+ try {
+ setLoading(true, 'Updating profile...');
+
+ // Check if updateProfile exists in authService, otherwise use userService
+ if ('updateProfile' in authService) {
+ const response = await (authService as any).updateProfile({
+ full_name: data.name,
+ email: data.email,
+ phone_number: data.phone,
+ });
+
+ if (response.status === 'success' || response.success) {
+ const updatedUser = response.data?.user || response.data;
+ if (updatedUser) {
+ setUser(updatedUser);
+ toast.success('Profile updated successfully!');
+ refetchProfile();
+ }
+ }
+ } else {
+ // Fallback: use userService if updateProfile doesn't exist
+ const { updateUser } = await import('../../services/api/userService');
+ const response = await updateUser(userInfo!.id, {
+ full_name: data.name,
+ email: data.email,
+ phone_number: data.phone,
+ });
+
+ if (response.success || response.status === 'success') {
+ const updatedUser = response.data?.user || response.data;
+ if (updatedUser) {
+ setUser({
+ id: updatedUser.id,
+ name: updatedUser.full_name || updatedUser.name,
+ email: updatedUser.email,
+ phone: updatedUser.phone_number || updatedUser.phone,
+ avatar: updatedUser.avatar,
+ role: updatedUser.role,
+ });
+ toast.success('Profile updated successfully!');
+ refetchProfile();
+ }
+ }
+ }
+ } catch (error: any) {
+ const errorMessage =
+ error.response?.data?.message ||
+ error.message ||
+ 'Failed to update profile';
+ toast.error(errorMessage);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Handle password change
+ const onSubmitPassword = async (data: PasswordFormData) => {
+ try {
+ setLoading(true, 'Changing password...');
+
+ // Use updateProfile with password fields if available
+ if ('updateProfile' in authService) {
+ const response = await (authService as any).updateProfile({
+ currentPassword: data.currentPassword,
+ password: data.newPassword,
+ });
+
+ if (response.status === 'success' || response.success) {
+ toast.success('Password changed successfully!');
+ resetPassword();
+ }
+ } else {
+ // Fallback: use userService
+ const { updateUser } = await import('../../services/api/userService');
+ const response = await updateUser(userInfo!.id, {
+ password: data.newPassword,
+ });
+
+ if (response.success || response.status === 'success') {
+ toast.success('Password changed successfully!');
+ resetPassword();
+ }
+ }
+ } catch (error: any) {
+ const errorMessage =
+ error.response?.data?.message ||
+ error.message ||
+ 'Failed to change password';
+ toast.error(errorMessage);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Handle avatar upload (placeholder - would need backend support)
+ const handleAvatarChange = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ // Validate file type
+ if (!file.type.startsWith('image/')) {
+ toast.error('Please select an image file');
+ return;
+ }
+
+ // Validate file size (max 2MB)
+ if (file.size > 2 * 1024 * 1024) {
+ toast.error('Image size must be less than 2MB');
+ return;
+ }
+
+ // Create preview
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ setAvatarPreview(reader.result as string);
+ };
+ reader.readAsDataURL(file);
+
+ // TODO: Upload to backend
+ toast.info('Avatar upload feature coming soon');
+ }
+ };
+
+ if (loadingProfile) {
+ return
+
+ );
+ }
+
+ return (
+
+
+
+ Profile Settings
+
+
+ Manage your account information and preferences
+
+
+
+ {/* Tabs */}
+
+
+ setActiveTab('profile')}
+ className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
+ activeTab === 'profile'
+ ? 'border-[#d4af37] text-[#d4af37]'
+ : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+ }`}
+ >
+ Profile Information
+
+ setActiveTab('password')}
+ className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
+ activeTab === 'password'
+ ? 'border-[#d4af37] text-[#d4af37]'
+ : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+ }`}
+ >
+ Change Password
+
+
+
+
+ {/* Profile Tab */}
+ {activeTab === 'profile' && (
+
+ )}
+
+ {/* Password Tab */}
+ {activeTab === 'password' && (
+
+ )}
+
+
{/* Back Button */}
Back to home
-
-
+
+
Room List
+
+ Browse our available accommodations
+
@@ -102,29 +103,34 @@ const RoomListPage: React.FC = () => {
)}
{error && !loading && (
-
-
-
-
{error}
+
+
{error}
window.location.reload()}
- className="mt-4 px-4 py-2 bg-red-600
- text-white rounded-lg hover:bg-red-700
- transition-colors"
+ className="mt-4 px-6 py-2.5 bg-gradient-to-r from-red-600 to-red-700
+ text-white rounded-lg font-semibold
+ hover:from-red-700 hover:to-red-800
+ transition-all duration-300 shadow-lg shadow-red-500/30
+ hover:shadow-xl hover:shadow-red-500/40 hover:-translate-y-0.5"
>
Try Again
@@ -132,26 +138,28 @@ const RoomListPage: React.FC = () => {
)}
{!loading && !error && rooms.length === 0 && (
-
+
No matching rooms found
@@ -160,8 +168,7 @@ const RoomListPage: React.FC = () => {
window.location.href = '/rooms'}
- className="px-6 py-2 bg-blue-600 text-white
- rounded-lg hover:bg-blue-700 transition-colors"
+ className="btn-enterprise-primary"
>
Clear Filters
diff --git a/Frontend/src/services/api/adminPrivacyService.ts b/Frontend/src/services/api/adminPrivacyService.ts
new file mode 100644
index 00000000..d5661b00
--- /dev/null
+++ b/Frontend/src/services/api/adminPrivacyService.ts
@@ -0,0 +1,63 @@
+import apiClient from './apiClient';
+
+export type CookiePolicySettings = {
+ analytics_enabled: boolean;
+ marketing_enabled: boolean;
+ preferences_enabled: boolean;
+};
+
+export type CookiePolicySettingsResponse = {
+ status: string;
+ data: CookiePolicySettings;
+ updated_at?: string;
+ updated_by?: string | null;
+};
+
+export type CookieIntegrationSettings = {
+ ga_measurement_id?: string | null;
+ fb_pixel_id?: string | null;
+};
+
+export type CookieIntegrationSettingsResponse = {
+ status: string;
+ data: CookieIntegrationSettings;
+ updated_at?: string;
+ updated_by?: string | null;
+};
+
+const adminPrivacyService = {
+ getCookiePolicy: async (): Promise
=> {
+ const res = await apiClient.get(
+ '/admin/privacy/cookie-policy'
+ );
+ return res.data;
+ },
+ updateCookiePolicy: async (
+ payload: CookiePolicySettings
+ ): Promise => {
+ const res = await apiClient.put(
+ '/admin/privacy/cookie-policy',
+ payload
+ );
+ return res.data;
+ },
+ getIntegrations: async (): Promise => {
+ const res = await apiClient.get(
+ '/admin/privacy/integrations'
+ );
+ return res.data;
+ },
+ updateIntegrations: async (
+ payload: CookieIntegrationSettings
+ ): Promise => {
+ const res = await apiClient.put(
+ '/admin/privacy/integrations',
+ payload
+ );
+ return res.data;
+ },
+};
+
+export default adminPrivacyService;
+
+
diff --git a/Frontend/src/services/api/apiClient.ts b/Frontend/src/services/api/apiClient.ts
index 1e5e47f5..d91bb978 100644
--- a/Frontend/src/services/api/apiClient.ts
+++ b/Frontend/src/services/api/apiClient.ts
@@ -1,85 +1,212 @@
-import axios from 'axios';
+import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
-// Base URL from environment or default. Ensure it points to the
-// server API root (append '/api' if not provided) so frontend calls
-// like '/bookings/me' resolve to e.g. 'http://localhost:8000/api/bookings/me'.
+// Base URL from environment or default
const rawBase = import.meta.env.VITE_API_URL || 'http://localhost:8000';
-// Normalize base and ensure a single /api suffix. If the provided
-// VITE_API_URL already points to the API root (contains '/api'),
-// don't append another '/api'.
const normalized = String(rawBase).replace(/\/$/, '');
const API_BASE_URL = /\/api(\/?$)/i.test(normalized)
? normalized
: normalized + '/api';
-// Create axios instance
+// Retry configuration
+const MAX_RETRIES = 3;
+const RETRY_DELAY = 1000; // 1 second
+const RETRYABLE_STATUS_CODES = [408, 429, 500, 502, 503, 504];
+
+// Create axios instance with enhanced configuration
const apiClient = axios.create({
baseURL: API_BASE_URL,
headers: {
'Content-Type': 'application/json',
},
- timeout: 10000,
+ timeout: 30000, // 30 seconds timeout
withCredentials: true, // Enable sending cookies
});
-// Request interceptor - Add token to header
+// Retry logic helper
+const retryRequest = async (
+ error: AxiosError,
+ retryCount: number = 0
+): Promise => {
+ const config = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
+
+ // Don't retry if already retried or not a retryable error
+ if (
+ config._retry ||
+ retryCount >= MAX_RETRIES ||
+ !error.config ||
+ !error.response ||
+ !RETRYABLE_STATUS_CODES.includes(error.response.status)
+ ) {
+ return Promise.reject(error);
+ }
+
+ config._retry = true;
+
+ // Exponential backoff
+ const delay = RETRY_DELAY * Math.pow(2, retryCount);
+ await new Promise(resolve => setTimeout(resolve, delay));
+
+ console.log(`Retrying request (${retryCount + 1}/${MAX_RETRIES}): ${config.url}`);
+
+ return apiClient.request(config);
+};
+
+// Request interceptor - Add token and request ID
apiClient.interceptors.request.use(
- (config) => {
- // Normalize request URL: if a request path accidentally begins
- // with '/api', strip that prefix so it will be appended to
- // our baseURL exactly once. This prevents double '/api/api'
- // when code uses absolute '/api/...' paths.
+ (config: InternalAxiosRequestConfig) => {
+ // Normalize request URL
if (config.url && typeof config.url === 'string') {
if (config.url.startsWith('/api/')) {
config.url = config.url.replace(/^\/api/, '');
}
- // Also avoid accidental double slashes after concatenation
config.url = config.url.replace(/\/\/+/, '/');
}
+ // Add authorization token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
+
+ // Generate and add request ID for tracking
+ const requestId = crypto.randomUUID ? crypto.randomUUID() :
+ `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+ config.headers['X-Request-ID'] = requestId;
+
+ // Add timestamp for request tracking
+ (config as any).metadata = { startTime: new Date() };
+
return config;
},
- (error) => {
+ (error: AxiosError) => {
return Promise.reject(error);
}
);
-// Response interceptor - Handle common errors
+// Response interceptor - Handle errors with retry logic
apiClient.interceptors.response.use(
- (response) => response,
- (error) => {
- // Handle network errors
+ (response) => {
+ // Log request duration
+ const config = response.config as InternalAxiosRequestConfig & { metadata?: any };
+ if (config.metadata?.startTime) {
+ const duration = new Date().getTime() - config.metadata.startTime.getTime();
+ if (duration > 1000) { // Log slow requests (>1s)
+ console.warn(`Slow request detected: ${config.url} took ${duration}ms`);
+ }
+ }
+
+ // Extract request ID from response headers for debugging
+ const requestId = response.headers['x-request-id'];
+ if (requestId && import.meta.env.DEV) {
+ console.debug(`Request completed: ${config.url} [${requestId}]`);
+ }
+
+ return response;
+ },
+ async (error: AxiosError) => {
+ const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
+
+ // Handle network errors (no response)
if (!error.response) {
+ if (error.code === 'ECONNABORTED') {
+ return Promise.reject({
+ ...error,
+ message: 'Request timeout. Please check your connection and try again.',
+ });
+ }
+
+ // Retry network errors
+ if (originalRequest && !originalRequest._retry) {
+ return retryRequest(error);
+ }
+
console.error('Network error:', error);
- // You can show a toast notification here
return Promise.reject({
...error,
- message: 'Network error. Please check ' +
- 'your internet connection.',
+ message: 'Network error. Please check your internet connection.',
});
}
- if (error.response?.status === 401) {
- // Token expired or invalid
+ const status = error.response.status;
+ const requestId = error.response.headers['x-request-id'];
+
+ // Handle 401 Unauthorized
+ if (status === 401) {
localStorage.removeItem('token');
localStorage.removeItem('userInfo');
- window.location.href = '/login';
- }
-
- // Handle other HTTP errors
- if (error.response?.status >= 500) {
- console.error('Server error:', error);
+
+ // Don't redirect if already on login page
+ if (!window.location.pathname.includes('/login')) {
+ window.location.href = '/login';
+ }
+
+ const errorMessage = (error.response?.data as any)?.message || 'Session expired. Please login again.';
return Promise.reject({
...error,
- message: 'Server error. Please try again later.',
+ message: errorMessage,
});
}
- return Promise.reject(error);
+ // Handle 403 Forbidden
+ if (status === 403) {
+ const errorMessage = (error.response?.data as any)?.message || 'You do not have permission to access this resource.';
+ return Promise.reject({
+ ...error,
+ message: errorMessage,
+ });
+ }
+
+ // Handle 404 Not Found
+ if (status === 404) {
+ const errorMessage = (error.response?.data as any)?.message || 'Resource not found.';
+ return Promise.reject({
+ ...error,
+ message: errorMessage,
+ });
+ }
+
+ // Handle 429 Too Many Requests (rate limiting)
+ if (status === 429) {
+ const retryAfter = error.response.headers['retry-after'];
+ return Promise.reject({
+ ...error,
+ message: `Too many requests. ${retryAfter ? `Please try again after ${retryAfter} seconds.` : 'Please try again later.'}`,
+ retryAfter: retryAfter ? parseInt(retryAfter) : undefined,
+ });
+ }
+
+ // Handle 5xx server errors with retry
+ if (status >= 500 && status < 600) {
+ if (originalRequest && !originalRequest._retry) {
+ return retryRequest(error);
+ }
+
+ console.error(`Server error [${requestId || 'unknown'}]:`, error);
+ const errorMessage = (error.response?.data as any)?.message || 'Server error. Please try again later.';
+ return Promise.reject({
+ ...error,
+ message: errorMessage,
+ requestId,
+ });
+ }
+
+ // Handle validation errors (400)
+ if (status === 400) {
+ const errorData = error.response.data as any;
+ return Promise.reject({
+ ...error,
+ message: errorData?.message || errorData?.errors?.[0]?.message || 'Invalid request. Please check your input.',
+ errors: errorData?.errors || [],
+ });
+ }
+
+ // For other errors, extract message from response
+ const errorMessage = (error.response.data as any)?.message || error.message || 'An error occurred';
+ return Promise.reject({
+ ...error,
+ message: errorMessage,
+ requestId,
+ });
}
);
diff --git a/Frontend/src/services/api/auditService.ts b/Frontend/src/services/api/auditService.ts
new file mode 100644
index 00000000..54cb6b83
--- /dev/null
+++ b/Frontend/src/services/api/auditService.ts
@@ -0,0 +1,116 @@
+import apiClient from './apiClient';
+
+/**
+ * Audit Log API Service
+ */
+
+export interface AuditLog {
+ id: number;
+ user_id?: number;
+ action: string;
+ resource_type: string;
+ resource_id?: number;
+ ip_address?: string;
+ user_agent?: string;
+ request_id?: string;
+ details?: any;
+ status: string;
+ error_message?: string;
+ created_at: string;
+ user?: {
+ id: number;
+ full_name: string;
+ email: string;
+ };
+}
+
+export interface AuditLogListResponse {
+ status: string;
+ data: {
+ logs: AuditLog[];
+ pagination: {
+ total: number;
+ page: number;
+ limit: number;
+ totalPages: number;
+ };
+ };
+}
+
+export interface AuditLogStatsResponse {
+ status: string;
+ data: {
+ total: number;
+ by_status: {
+ success: number;
+ failed: number;
+ error: number;
+ };
+ top_actions: Array<{
+ action: string;
+ count: number;
+ }>;
+ top_resource_types: Array<{
+ resource_type: string;
+ count: number;
+ }>;
+ };
+}
+
+export interface AuditLogFilters {
+ action?: string;
+ resource_type?: string;
+ user_id?: number;
+ status?: string;
+ search?: string;
+ start_date?: string;
+ end_date?: string;
+ page?: number;
+ limit?: number;
+}
+
+class AuditService {
+ /**
+ * Get audit logs with filters
+ */
+ async getAuditLogs(filters: AuditLogFilters = {}): Promise {
+ const params = new URLSearchParams();
+
+ if (filters.action) params.append('action', filters.action);
+ if (filters.resource_type) params.append('resource_type', filters.resource_type);
+ if (filters.user_id) params.append('user_id', filters.user_id.toString());
+ if (filters.status) params.append('status', filters.status);
+ if (filters.search) params.append('search', filters.search);
+ if (filters.start_date) params.append('start_date', filters.start_date);
+ if (filters.end_date) params.append('end_date', filters.end_date);
+ if (filters.page) params.append('page', filters.page.toString());
+ if (filters.limit) params.append('limit', filters.limit.toString());
+
+ const response = await apiClient.get(`/audit-logs/?${params.toString()}`);
+ return response.data;
+ }
+
+ /**
+ * Get audit log by ID
+ */
+ async getAuditLogById(id: number): Promise<{ status: string; data: { log: AuditLog } }> {
+ const response = await apiClient.get(`/audit-logs/${id}`);
+ return response.data;
+ }
+
+ /**
+ * Get audit log statistics
+ */
+ async getAuditStats(startDate?: string, endDate?: string): Promise {
+ const params = new URLSearchParams();
+ if (startDate) params.append('start_date', startDate);
+ if (endDate) params.append('end_date', endDate);
+
+ const response = await apiClient.get(`/audit-logs/stats?${params.toString()}`);
+ return response.data;
+ }
+}
+
+export const auditService = new AuditService();
+export default auditService;
+
diff --git a/Frontend/src/services/api/authService.ts b/Frontend/src/services/api/authService.ts
index 0c9b27c1..9600e035 100644
--- a/Frontend/src/services/api/authService.ts
+++ b/Frontend/src/services/api/authService.ts
@@ -132,6 +132,25 @@ const authService = {
);
return response.data;
},
+
+ /**
+ * Update profile
+ */
+ updateProfile: async (
+ data: {
+ full_name?: string;
+ email?: string;
+ phone_number?: string;
+ password?: string;
+ currentPassword?: string;
+ }
+ ): Promise => {
+ const response = await apiClient.put(
+ '/api/auth/profile',
+ data
+ );
+ return response.data;
+ },
};
export default authService;
diff --git a/Frontend/src/services/api/bannerService.ts b/Frontend/src/services/api/bannerService.ts
index 30a62fba..df164b2d 100644
--- a/Frontend/src/services/api/bannerService.ts
+++ b/Frontend/src/services/api/bannerService.ts
@@ -2,6 +2,9 @@ import apiClient from './apiClient';
/**
* Banner API Service
+ *
+ * NOTE: To avoid hammering the API, we add a very lightweight
+ * in-memory + optional localStorage cache for read endpoints.
*/
export interface Banner {
@@ -27,28 +30,211 @@ export interface BannerListResponse {
message?: string;
}
+// ---------- Simple client-side cache ----------
+
+type CacheEntry = {
+ timestamp: number;
+ response: BannerListResponse;
+};
+
+const BANNER_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+const memoryCache = new Map();
+
+const getCacheKey = (position?: string) =>
+ position ? `banners:position:${position}` : 'banners:active';
+
+const isCacheValid = (entry: CacheEntry | undefined) => {
+ if (!entry) return false;
+ return Date.now() - entry.timestamp < BANNER_CACHE_TTL_MS;
+};
+
+const loadFromStorage = (key: string): CacheEntry | undefined => {
+ if (typeof window === 'undefined') return undefined;
+ try {
+ const raw = window.localStorage.getItem(key);
+ if (!raw) return undefined;
+ const parsed = JSON.parse(raw) as CacheEntry;
+ return isCacheValid(parsed) ? parsed : undefined;
+ } catch {
+ return undefined;
+ }
+};
+
+const saveToStorage = (key: string, entry: CacheEntry) => {
+ if (typeof window === 'undefined') return;
+ try {
+ window.localStorage.setItem(key, JSON.stringify(entry));
+ } catch {
+ // ignore storage errors (quota, disabled, etc.)
+ }
+};
+
+const getCachedOrFetch = async (
+ key: string,
+ fetcher: () => Promise
+): Promise => {
+ // 1) Check in-memory cache
+ const inMemory = memoryCache.get(key);
+ if (isCacheValid(inMemory)) {
+ return inMemory!.response;
+ }
+
+ // 2) Check localStorage cache (fills memory cache if valid)
+ const fromStorage = loadFromStorage(key);
+ if (fromStorage) {
+ memoryCache.set(key, fromStorage);
+ return fromStorage.response;
+ }
+
+ // 3) Fetch from API and cache result
+ const response = await fetcher();
+ const entry: CacheEntry = {
+ timestamp: Date.now(),
+ response,
+ };
+ memoryCache.set(key, entry);
+ saveToStorage(key, entry);
+ return response;
+};
+
/**
* Get banners by position
+ *
+ * Cached per-position on the client for a short TTL.
*/
export const getBannersByPosition = async (
position: string = 'home'
): Promise => {
- const response = await apiClient.get('/banners', {
- params: { position },
+ const key = getCacheKey(position);
+ return getCachedOrFetch(key, async () => {
+ const response = await apiClient.get('/banners', {
+ params: { position },
+ });
+ return response.data;
});
- return response.data;
};
/**
* Get all active banners
+ *
+ * Cached on the client for a short TTL.
*/
-export const getActiveBanners = async ():
+export const getActiveBanners = async ():
Promise => {
- const response = await apiClient.get('/banners');
+ const key = getCacheKey();
+ return getCachedOrFetch(key, async () => {
+ const response = await apiClient.get('/banners');
+ return response.data;
+ });
+};
+
+/**
+ * Get all banners (admin)
+ */
+export const getAllBanners = async (
+ params?: { position?: string; page?: number; limit?: number }
+): Promise => {
+ const response = await apiClient.get('/banners', { params });
return response.data;
};
-export default {
+/**
+ * Get banner by ID
+ */
+export const getBannerById = async (
+ id: number
+): Promise<{ success: boolean; data: { banner: Banner } }> => {
+ const response = await apiClient.get(`/banners/${id}`);
+ return response.data;
+};
+
+/**
+ * Create banner
+ */
+export const createBanner = async (
+ data: {
+ title: string;
+ description?: string;
+ image_url: string;
+ link?: string;
+ position?: string;
+ display_order?: number;
+ start_date?: string;
+ end_date?: string;
+ }
+): Promise<{ success: boolean; data: { banner: Banner }; message: string }> => {
+ const response = await apiClient.post('/banners', data);
+ return response.data;
+};
+
+/**
+ * Update banner
+ */
+export const updateBanner = async (
+ id: number,
+ data: {
+ title?: string;
+ description?: string;
+ image_url?: string;
+ link?: string;
+ position?: string;
+ display_order?: number;
+ is_active?: boolean;
+ start_date?: string;
+ end_date?: string;
+ }
+): Promise<{ success: boolean; data: { banner: Banner }; message: string }> => {
+ const response = await apiClient.put(`/banners/${id}`, data);
+ return response.data;
+};
+
+/**
+ * Delete banner
+ */
+export const deleteBanner = async (
+ id: number
+): Promise<{ success: boolean; message: string }> => {
+ const response = await apiClient.delete(`/banners/${id}`);
+ return response.data;
+};
+
+/**
+ * Upload banner image
+ */
+export const uploadBannerImage = async (
+ file: File
+): Promise<{ success: boolean; data: { image_url: string; full_url: string }; message: string }> => {
+ const formData = new FormData();
+ formData.append('image', file);
+
+ const response = await apiClient.post('/banners/upload', formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ });
+ return response.data;
+};
+
+export interface BannerService {
+ getBannersByPosition: typeof getBannersByPosition;
+ getActiveBanners: typeof getActiveBanners;
+ getAllBanners: typeof getAllBanners;
+ getBannerById: typeof getBannerById;
+ createBanner: typeof createBanner;
+ updateBanner: typeof updateBanner;
+ deleteBanner: typeof deleteBanner;
+ uploadBannerImage: typeof uploadBannerImage;
+}
+
+const bannerService: BannerService = {
getBannersByPosition,
getActiveBanners,
+ getAllBanners,
+ getBannerById,
+ createBanner,
+ updateBanner,
+ deleteBanner,
+ uploadBannerImage,
};
+
+export default bannerService as BannerService;
diff --git a/Frontend/src/services/api/dashboardService.ts b/Frontend/src/services/api/dashboardService.ts
new file mode 100644
index 00000000..8b34beb8
--- /dev/null
+++ b/Frontend/src/services/api/dashboardService.ts
@@ -0,0 +1,57 @@
+import apiClient from './apiClient';
+
+/**
+ * Customer Dashboard API Service
+ */
+
+export interface CustomerDashboardStats {
+ total_bookings: number;
+ total_spending: number;
+ currently_staying: number;
+ upcoming_bookings: Array<{
+ id: number;
+ booking_number: string;
+ check_in_date: string;
+ check_out_date: string;
+ status: string;
+ total_price: number;
+ room?: {
+ id: number;
+ room_number: string;
+ room_type: {
+ name: string;
+ };
+ };
+ }>;
+ recent_activity: Array<{
+ action: string;
+ booking_id: number;
+ booking_number: string;
+ created_at: string;
+ room?: {
+ room_number: string;
+ };
+ }>;
+ booking_change_percentage: number;
+ spending_change_percentage: number;
+}
+
+export interface CustomerDashboardResponse {
+ success: boolean;
+ status?: string;
+ data: CustomerDashboardStats;
+ message?: string;
+}
+
+/**
+ * Get customer dashboard statistics
+ */
+export const getCustomerDashboardStats = async (): Promise => {
+ const response = await apiClient.get('/reports/customer/dashboard');
+ return response.data;
+};
+
+export default {
+ getCustomerDashboardStats,
+};
+
diff --git a/Frontend/src/services/api/index.ts b/Frontend/src/services/api/index.ts
index fbfa77a8..6f180c2b 100644
--- a/Frontend/src/services/api/index.ts
+++ b/Frontend/src/services/api/index.ts
@@ -30,4 +30,8 @@ export { default as promotionService } from './promotionService';
export type * from './promotionService';
export { default as reportService } from './reportService';
+export { default as dashboardService } from './dashboardService';
+export { default as auditService } from './auditService';
+export type { CustomerDashboardStats, CustomerDashboardResponse } from './dashboardService';
export type * from './reportService';
+export type * from './auditService';
diff --git a/Frontend/src/services/api/privacyService.ts b/Frontend/src/services/api/privacyService.ts
new file mode 100644
index 00000000..71f25274
--- /dev/null
+++ b/Frontend/src/services/api/privacyService.ts
@@ -0,0 +1,84 @@
+import apiClient from './apiClient';
+
+export type CookieCategoryPreferences = {
+ necessary: boolean;
+ analytics: boolean;
+ marketing: boolean;
+ preferences: boolean;
+};
+
+export type CookieConsent = {
+ version: number;
+ updated_at: string;
+ has_decided: boolean;
+ categories: CookieCategoryPreferences;
+};
+
+export type CookieConsentResponse = {
+ status: string;
+ data: CookieConsent;
+};
+
+export type UpdateCookieConsentRequest = {
+ analytics?: boolean;
+ marketing?: boolean;
+ preferences?: boolean;
+};
+
+export type PublicPrivacyConfig = {
+ policy: {
+ analytics_enabled: boolean;
+ marketing_enabled: boolean;
+ preferences_enabled: boolean;
+ };
+ integrations: {
+ ga_measurement_id?: string | null;
+ fb_pixel_id?: string | null;
+ };
+};
+
+export type PublicPrivacyConfigResponse = {
+ status: string;
+ data: PublicPrivacyConfig;
+};
+
+const privacyService = {
+ /**
+ * Fetch current cookie consent from the backend.
+ */
+ getCookieConsent: async (): Promise => {
+ const response = await apiClient.get(
+ '/privacy/cookie-consent'
+ );
+ return response.data.data;
+ },
+
+ /**
+ * Fetch public privacy configuration:
+ * - global policy flags
+ * - integration IDs (e.g. GA4, Meta Pixel)
+ */
+ getPublicConfig: async (): Promise => {
+ const response = await apiClient.get(
+ '/privacy/config'
+ );
+ return response.data.data;
+ },
+
+ /**
+ * Update cookie consent preferences on the backend.
+ */
+ updateCookieConsent: async (
+ payload: UpdateCookieConsentRequest
+ ): Promise => {
+ const response = await apiClient.post(
+ '/privacy/cookie-consent',
+ payload
+ );
+ return response.data.data;
+ },
+};
+
+export default privacyService;
+
+
diff --git a/Frontend/src/styles/index.css b/Frontend/src/styles/index.css
index 27c1539b..2bc99bf8 100644
--- a/Frontend/src/styles/index.css
+++ b/Frontend/src/styles/index.css
@@ -2,33 +2,81 @@
@tailwind components;
@tailwind utilities;
-/* Custom scrollbar styles */
+/* Luxury Hotel Design System - Custom Properties */
+:root {
+ /* Luxury Gold Palette */
+ --luxury-gold: #d4af37;
+ --luxury-gold-light: #f5d76e;
+ --luxury-gold-dark: #c9a227;
+ --luxury-gold-accent: #e8c547;
+
+ /* Luxury Dark Palette */
+ --luxury-black: #0f0f0f;
+ --luxury-black-light: #1a1a1a;
+ --luxury-black-medium: #2a2a2a;
+ --luxury-gray-dark: #3a3a3a;
+
+ /* Luxury Grays */
+ --luxury-gray-50: #fafafa;
+ --luxury-gray-100: #f5f5f5;
+ --luxury-gray-200: #e5e5e5;
+ --luxury-gray-300: #d4d4d4;
+ --luxury-gray-400: #a3a3a3;
+ --luxury-gray-500: #737373;
+ --luxury-gray-600: #525252;
+ --luxury-gray-700: #404040;
+ --luxury-gray-800: #262626;
+ --luxury-gray-900: #171717;
+
+ /* Luxury Shadows */
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ --shadow-luxury: 0 4px 20px rgba(212, 175, 55, 0.15);
+ --shadow-luxury-gold: 0 8px 30px rgba(212, 175, 55, 0.25);
+
+ /* Luxury Gradients */
+ --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f5d76e 100%);
+ --gradient-gold-dark: linear-gradient(135deg, #c9a227 0%, #d4af37 100%);
+ --gradient-dark: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
+ --gradient-overlay: linear-gradient(180deg, rgba(15, 15, 15, 0.8) 0%, rgba(15, 15, 15, 0.4) 100%);
+ --gradient-gold-overlay: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(245, 215, 110, 0.05) 100%);
+}
+
+/* Custom scrollbar styles - Luxury Hotel */
::-webkit-scrollbar {
- width: 8px;
- height: 8px;
+ width: 10px;
+ height: 10px;
}
::-webkit-scrollbar-track {
- background: #f1f1f1;
+ background: var(--luxury-black-light);
+ border-radius: 8px;
}
::-webkit-scrollbar-thumb {
- background: #888;
- border-radius: 4px;
+ background: linear-gradient(180deg, var(--luxury-gold) 0%, var(--luxury-gold-dark) 100%);
+ border-radius: 8px;
+ border: 2px solid var(--luxury-black-light);
}
::-webkit-scrollbar-thumb:hover {
- background: #555;
+ background: linear-gradient(180deg, var(--luxury-gold-light) 0%, var(--luxury-gold) 100%);
}
-/* Base styles */
+/* Base styles - Luxury Hotel Typography */
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background: #fafafa;
+ color: var(--luxury-gray-900);
+ line-height: 1.6;
}
code {
@@ -36,15 +84,174 @@ code {
'Courier New', monospace;
}
+/* Luxury Hotel Components */
+@layer components {
+ /* Luxury Card */
+ .luxury-card {
+ @apply bg-white rounded-sm shadow-lg border border-gray-100;
+ @apply transition-all duration-300 ease-out;
+ @apply hover:shadow-xl hover:shadow-[#d4af37]/10;
+ @apply hover:-translate-y-1;
+ }
+
+ /* Luxury Card with Gold Border */
+ .luxury-card-gold {
+ @apply bg-white rounded-sm shadow-lg;
+ @apply relative overflow-hidden;
+ @apply transition-all duration-300 ease-out;
+ @apply hover:shadow-xl hover:shadow-[#d4af37]/20;
+ @apply border-t-2 border-[#d4af37];
+ }
+
+ /* Luxury Dark Card */
+ .luxury-card-dark {
+ @apply bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f] rounded-sm shadow-2xl;
+ @apply border border-[#d4af37]/20;
+ @apply transition-all duration-300 ease-out;
+ @apply hover:shadow-[#d4af37]/30 hover:border-[#d4af37]/40;
+ }
+
+ /* Luxury Button Primary */
+ .btn-luxury-primary {
+ @apply px-6 py-3 rounded-sm font-medium tracking-wide;
+ @apply bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-[#0f0f0f];
+ @apply shadow-lg shadow-[#d4af37]/30;
+ @apply transition-all duration-300 ease-out;
+ @apply hover:from-[#f5d76e] hover:to-[#d4af37];
+ @apply hover:shadow-xl hover:shadow-[#d4af37]/40;
+ @apply hover:-translate-y-0.5;
+ @apply active:translate-y-0;
+ @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0;
+ @apply relative overflow-hidden;
+ }
+
+ .btn-luxury-primary::before {
+ content: '';
+ @apply absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0;
+ @apply translate-x-[-100%] transition-transform duration-700;
+ }
+
+ .btn-luxury-primary:hover::before {
+ @apply translate-x-[100%];
+ }
+
+ /* Luxury Button Secondary */
+ .btn-luxury-secondary {
+ @apply px-6 py-3 rounded-sm font-medium tracking-wide;
+ @apply bg-white/10 backdrop-blur-sm text-white border border-[#d4af37]/30;
+ @apply transition-all duration-300 ease-out;
+ @apply hover:bg-[#d4af37]/10 hover:border-[#d4af37] hover:text-[#d4af37];
+ @apply hover:-translate-y-0.5;
+ @apply active:translate-y-0;
+ }
+
+ /* Luxury Section Header */
+ .luxury-section-header {
+ @apply mb-8 pb-4 border-b border-[#d4af37]/20;
+ }
+
+ .luxury-section-title {
+ @apply text-3xl md:text-4xl font-serif font-semibold;
+ @apply text-gray-900 tracking-tight;
+ @apply mb-2;
+ }
+
+ .luxury-section-subtitle {
+ @apply text-gray-600 text-lg font-light;
+ @apply tracking-wide;
+ }
+
+ /* Luxury Stat Card */
+ .luxury-stat-card {
+ @apply luxury-card p-6;
+ @apply relative overflow-hidden;
+ }
+
+ .luxury-stat-card::before {
+ content: '';
+ @apply absolute top-0 left-0 w-1 h-full;
+ background: var(--gradient-gold);
+ }
+
+ /* Luxury Table */
+ .luxury-table {
+ @apply w-full;
+ }
+
+ .luxury-table thead {
+ @apply bg-gradient-to-r from-gray-50 to-gray-100;
+ @apply border-b-2 border-[#d4af37]/30;
+ }
+
+ .luxury-table th {
+ @apply px-6 py-4 text-left text-xs font-semibold;
+ @apply text-gray-700 uppercase tracking-wider;
+ @apply border-b-2 border-gray-200;
+ }
+
+ .luxury-table td {
+ @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
+ @apply border-b border-gray-100;
+ }
+
+ .luxury-table tbody tr {
+ @apply transition-colors duration-150;
+ @apply hover:bg-[#d4af37]/5;
+ }
+
+ /* Luxury Badge */
+ .luxury-badge {
+ @apply inline-flex items-center px-3 py-1 rounded-sm;
+ @apply text-xs font-medium tracking-wide;
+ @apply transition-all duration-200;
+ @apply bg-[#d4af37]/10 text-[#c9a227] border border-[#d4af37]/30;
+ }
+
+ /* Luxury Input */
+ .luxury-input {
+ @apply w-full px-4 py-3 rounded-sm border border-gray-300;
+ @apply focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37];
+ @apply transition-all duration-200;
+ @apply bg-white text-gray-900;
+ @apply placeholder:text-gray-400;
+ @apply font-light tracking-wide;
+ }
+
+ /* Luxury Gradient Background */
+ .luxury-gradient-bg {
+ background: var(--gradient-gold);
+ }
+
+ /* Luxury Glass Effect */
+ .luxury-glass {
+ @apply bg-white/90 backdrop-blur-xl;
+ @apply border border-[#d4af37]/20;
+ @apply shadow-2xl;
+ }
+}
+
/* Custom utilities */
@layer utilities {
.text-balance {
text-wrap: balance;
}
+ /* Luxury Shadows */
+ .shadow-luxury {
+ box-shadow: var(--shadow-luxury);
+ }
+
+ .shadow-luxury-lg {
+ box-shadow: var(--shadow-luxury-gold);
+ }
+
+ .shadow-luxury-gold {
+ box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25);
+ }
+
/* Smooth fade-in animation */
.animate-fade-in {
- animation: fadeIn 0.3s ease-in-out;
+ animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
@@ -60,7 +267,7 @@ code {
/* Slide-in animation */
.animate-slide-in {
- animation: slideIn 0.4s ease-out;
+ animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
@@ -76,7 +283,7 @@ code {
/* Scale-in animation */
.animate-scale-in {
- animation: scaleIn 0.3s ease-out;
+ animation: scaleIn 0.4s ease-out;
}
@keyframes scaleIn {
@@ -94,6 +301,79 @@ code {
.transition-smooth {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
+
+ .transition-enterprise {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ /* Slide up animation */
+ .animate-slide-up {
+ animation: slideUp 0.4s ease-out;
+ }
+
+ @keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* Pulse animation for enterprise */
+ .animate-pulse-enterprise {
+ animation: pulseEnterprise 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+ }
+
+ @keyframes pulseEnterprise {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+ }
+
+ /* Shimmer animation for skeleton loading - Enhanced */
+ @keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+ }
+
+ .animate-shimmer {
+ animation: shimmer 2s infinite;
+ background: linear-gradient(
+ to right,
+ #f1f5f9 0%,
+ #e2e8f0 20%,
+ #f1f5f9 40%,
+ #f1f5f9 100%
+ );
+ background-size: 1000px 100%;
+ }
+
+ /* Luxury gradient text */
+ .text-gradient-luxury {
+ @apply bg-gradient-to-r from-[#d4af37] via-[#f5d76e] to-[#d4af37];
+ @apply bg-clip-text text-transparent;
+ }
+
+ .text-gradient-luxury-dark {
+ @apply bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900;
+ @apply bg-clip-text text-transparent;
+ }
+
+ /* Luxury backdrop blur */
+ .backdrop-blur-luxury {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ }
}
/* Image loading optimization */
diff --git a/Frontend/src/utils/constants.ts b/Frontend/src/utils/constants.ts
new file mode 100644
index 00000000..b7327bd8
--- /dev/null
+++ b/Frontend/src/utils/constants.ts
@@ -0,0 +1,53 @@
+/**
+ * Application constants
+ */
+
+export const API_TIMEOUT = 30000; // 30 seconds
+export const MAX_RETRIES = 3;
+export const RETRY_DELAY = 1000; // 1 second
+
+export const DATE_FORMATS = {
+ SHORT: 'short',
+ MEDIUM: 'medium',
+ LONG: 'long',
+ FULL: 'full',
+} as const;
+
+export const CURRENCY = {
+ VND: 'VND',
+ USD: 'USD',
+ EUR: 'EUR',
+} as const;
+
+export const STORAGE_KEYS = {
+ TOKEN: 'token',
+ USER_INFO: 'userInfo',
+ GUEST_FAVORITES: 'guestFavorites',
+ THEME: 'theme',
+ LANGUAGE: 'language',
+} as const;
+
+export const ROUTES = {
+ HOME: '/',
+ LOGIN: '/login',
+ REGISTER: '/register',
+ DASHBOARD: '/dashboard',
+ ROOMS: '/rooms',
+ BOOKINGS: '/bookings',
+ FAVORITES: '/favorites',
+ PROFILE: '/profile',
+ ADMIN: '/admin',
+} as const;
+
+export const TOAST_DURATION = {
+ SUCCESS: 3000,
+ ERROR: 5000,
+ WARNING: 4000,
+ INFO: 3000,
+} as const;
+
+export const PAGINATION = {
+ DEFAULT_PAGE_SIZE: 10,
+ PAGE_SIZE_OPTIONS: [10, 20, 50, 100],
+} as const;
+
diff --git a/Frontend/src/utils/format.ts b/Frontend/src/utils/format.ts
new file mode 100644
index 00000000..096b8935
--- /dev/null
+++ b/Frontend/src/utils/format.ts
@@ -0,0 +1,162 @@
+/**
+ * Utility functions for formatting data
+ */
+
+/**
+ * Format currency
+ */
+export const formatCurrency = (
+ amount: number | string,
+ currency: string = 'VND'
+): string => {
+ const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
+
+ if (isNaN(numAmount)) return '0 ₫';
+
+ if (currency === 'VND') {
+ return new Intl.NumberFormat('vi-VN', {
+ style: 'currency',
+ currency: 'VND',
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 0,
+ }).format(numAmount);
+ }
+
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: currency,
+ }).format(numAmount);
+};
+
+/**
+ * Format date
+ */
+export const formatDate = (
+ date: string | Date,
+ format: 'short' | 'medium' | 'long' | 'full' = 'medium'
+): string => {
+ const dateObj = typeof date === 'string' ? new Date(date) : date;
+
+ if (isNaN(dateObj.getTime())) return 'Invalid Date';
+
+ const formatOptions: Record = {
+ short: { year: 'numeric', month: 'numeric', day: 'numeric' },
+ medium: { year: 'numeric', month: 'short', day: 'numeric' },
+ long: { year: 'numeric', month: 'long', day: 'numeric' },
+ full: {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ weekday: 'long'
+ },
+ };
+
+ return new Intl.DateTimeFormat('en-US', formatOptions[format]).format(dateObj);
+};
+
+/**
+ * Format date and time
+ */
+export const formatDateTime = (
+ date: string | Date,
+ includeSeconds: boolean = false
+): string => {
+ const dateObj = typeof date === 'string' ? new Date(date) : date;
+
+ if (isNaN(dateObj.getTime())) return 'Invalid Date';
+
+ return new Intl.DateTimeFormat('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ ...(includeSeconds && { second: '2-digit' }),
+ }).format(dateObj);
+};
+
+/**
+ * Format relative time (e.g., "2 hours ago")
+ */
+export const formatRelativeTime = (date: string | Date): string => {
+ const dateObj = typeof date === 'string' ? new Date(date) : date;
+ const now = new Date();
+ const diffInSeconds = Math.floor((now.getTime() - dateObj.getTime()) / 1000);
+
+ if (diffInSeconds < 0) return 'in the future';
+ if (diffInSeconds < 60) return 'just now';
+ if (diffInSeconds < 3600) {
+ const minutes = Math.floor(diffInSeconds / 60);
+ return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+ }
+ if (diffInSeconds < 86400) {
+ const hours = Math.floor(diffInSeconds / 3600);
+ return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+ }
+ if (diffInSeconds < 604800) {
+ const days = Math.floor(diffInSeconds / 86400);
+ return `${days} day${days > 1 ? 's' : ''} ago`;
+ }
+
+ return formatDate(dateObj, 'short');
+};
+
+/**
+ * Format number
+ */
+export const formatNumber = (
+ num: number | string,
+ decimals: number = 0
+): string => {
+ const numValue = typeof num === 'string' ? parseFloat(num) : num;
+
+ if (isNaN(numValue)) return '0';
+
+ return new Intl.NumberFormat('en-US', {
+ minimumFractionDigits: decimals,
+ maximumFractionDigits: decimals,
+ }).format(numValue);
+};
+
+/**
+ * Format phone number
+ */
+export const formatPhoneNumber = (phone: string): string => {
+ const cleaned = phone.replace(/\D/g, '');
+
+ if (cleaned.length === 10) {
+ return cleaned.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+ }
+
+ if (cleaned.length === 11) {
+ return cleaned.replace(/(\d{1})(\d{3})(\d{3})(\d{4})/, '+$1 ($2) $3-$4');
+ }
+
+ return phone;
+};
+
+/**
+ * Format file size
+ */
+export const formatFileSize = (bytes: number): string => {
+ if (bytes === 0) return '0 Bytes';
+
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+ return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+};
+
+/**
+ * Truncate text
+ */
+export const truncateText = (
+ text: string,
+ maxLength: number,
+ suffix: string = '...'
+): string => {
+ if (text.length <= maxLength) return text;
+ return text.slice(0, maxLength - suffix.length) + suffix;
+};
+
diff --git a/Frontend/src/utils/index.ts b/Frontend/src/utils/index.ts
new file mode 100644
index 00000000..972efea9
--- /dev/null
+++ b/Frontend/src/utils/index.ts
@@ -0,0 +1,4 @@
+export * from './format';
+export * from './constants';
+export * from './validationSchemas';
+
diff --git a/Frontend/tailwind.config.js b/Frontend/tailwind.config.js
index d9ef2d78..c7bbc716 100644
--- a/Frontend/tailwind.config.js
+++ b/Frontend/tailwind.config.js
@@ -6,7 +6,18 @@ export default {
],
theme: {
extend: {
+ fontFamily: {
+ serif: ['Playfair Display', 'Georgia', 'Times New Roman', 'serif'],
+ sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+ },
colors: {
+ luxury: {
+ gold: '#d4af37',
+ 'gold-light': '#f5d76e',
+ 'gold-dark': '#c9a227',
+ black: '#0f0f0f',
+ 'black-light': '#1a1a1a',
+ },
primary: {
50: '#eff6ff',
100: '#dbeafe',