diff --git a/Frontend/src/pages/HomePage.tsx b/Frontend/src/pages/HomePage.tsx
index 4aadb957..723abf87 100644
--- a/Frontend/src/pages/HomePage.tsx
+++ b/Frontend/src/pages/HomePage.tsx
@@ -14,19 +14,23 @@ import {
} from '../components/rooms';
import {
bannerService,
- roomService
+ roomService,
+ pageContentService
} from '../services/api';
import type { Banner } from '../services/api/bannerService';
import type { Room } from '../services/api/roomService';
+import type { PageContent } from '../services/api/pageContentService';
const HomePage: React.FC = () => {
const [banners, setBanners] = useState([]);
const [featuredRooms, setFeaturedRooms] = useState([]);
const [newestRooms, setNewestRooms] = useState([]);
+ const [pageContent, setPageContent] = useState(null);
const [isLoadingBanners, setIsLoadingBanners] =
useState(true);
const [isLoadingRooms, setIsLoadingRooms] = useState(true);
const [isLoadingNewest, setIsLoadingNewest] = useState(true);
+ const [isLoadingContent, setIsLoadingContent] = useState(true);
const [error, setError] = useState(null);
// Combine featured and newest rooms, removing duplicates
@@ -48,6 +52,40 @@ const HomePage: React.FC = () => {
return Array.from(roomMap.values());
}, [featuredRooms, newestRooms]);
+ // Fetch page content
+ useEffect(() => {
+ const fetchPageContent = async () => {
+ try {
+ setIsLoadingContent(true);
+ const response = await pageContentService.getPageContent('home');
+ if (response.status === 'success' && response.data?.page_content) {
+ setPageContent(response.data.page_content);
+
+ // Update document title and meta tags
+ if (response.data.page_content.meta_title) {
+ document.title = response.data.page_content.meta_title;
+ }
+ if (response.data.page_content.meta_description) {
+ let metaDescription = document.querySelector('meta[name="description"]');
+ if (!metaDescription) {
+ metaDescription = document.createElement('meta');
+ metaDescription.setAttribute('name', 'description');
+ document.head.appendChild(metaDescription);
+ }
+ metaDescription.setAttribute('content', response.data.page_content.meta_description);
+ }
+ }
+ } catch (err: any) {
+ console.error('Error fetching page content:', err);
+ // Silently fail - use default content
+ } finally {
+ setIsLoadingContent(false);
+ }
+ };
+
+ fetchPageContent();
+ }, []);
+
// Fetch banners
useEffect(() => {
const fetchBanners = async () => {
@@ -184,10 +222,10 @@ const HomePage: React.FC = () => {
{/* Section Header - Centered */}
- Featured & Newest Rooms
+ {pageContent?.hero_title || 'Featured & Newest Rooms'}
- Discover our most popular accommodations and latest additions
+ {pageContent?.hero_subtitle || pageContent?.description || 'Discover our most popular accommodations and latest additions'}
{/* View All Rooms Button - Golden, Centered */}
diff --git a/Frontend/src/pages/admin/AnalyticsDashboardPage.tsx b/Frontend/src/pages/admin/AnalyticsDashboardPage.tsx
new file mode 100644
index 00000000..c40870e5
--- /dev/null
+++ b/Frontend/src/pages/admin/AnalyticsDashboardPage.tsx
@@ -0,0 +1,1186 @@
+import React, { useState, useEffect } from 'react';
+import {
+ BarChart3,
+ FileText,
+ Calendar,
+ Users,
+ Hotel,
+ TrendingUp,
+ Download,
+ Filter,
+ PieChart,
+ Search,
+ Eye,
+ Activity,
+ AlertCircle,
+ CheckCircle,
+ XCircle,
+ Info,
+ Sparkles,
+ ClipboardList,
+ X,
+ ChevronRight,
+ Star
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { Loading, EmptyState } from '../../components/common';
+import Pagination from '../../components/common/Pagination';
+import CurrencyIcon from '../../components/common/CurrencyIcon';
+import { useAsync } from '../../hooks/useAsync';
+import { reportService, ReportData, reviewService, Review } from '../../services/api';
+import { auditService, AuditLog, AuditLogFilters } from '../../services/api/auditService';
+import { formatDate } from '../../utils/format';
+import { useFormatCurrency } from '../../hooks/useFormatCurrency';
+
+type AnalyticsTab = 'overview' | 'reports' | 'audit-logs' | 'reviews';
+
+const AnalyticsDashboardPage: React.FC = () => {
+ const { formatCurrency } = useFormatCurrency();
+ const [activeTab, setActiveTab] = useState
('overview');
+
+ // Reports State
+ const [dateRange, setDateRange] = useState({
+ from: '',
+ to: '',
+ });
+ const [reportType, setReportType] = useState<'daily' | 'weekly' | 'monthly' | 'yearly' | ''>('');
+
+ // Audit Logs State
+ const [logs, setLogs] = useState([]);
+ const [auditLoading, setAuditLoading] = useState(true);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [totalPages, setTotalPages] = useState(1);
+ const [totalItems, setTotalItems] = useState(0);
+ const [selectedLog, setSelectedLog] = useState(null);
+ const [showDetails, setShowDetails] = useState(false);
+ const itemsPerPage = 20;
+
+ const [auditFilters, setAuditFilters] = useState({
+ page: 1,
+ limit: itemsPerPage,
+ });
+
+ // Reviews State
+ const [reviews, setReviews] = useState([]);
+ const [reviewsLoading, setReviewsLoading] = useState(true);
+ const [reviewsFilters, setReviewsFilters] = useState({
+ status: '',
+ });
+ const [reviewsCurrentPage, setReviewsCurrentPage] = useState(1);
+ const [reviewsTotalPages, setReviewsTotalPages] = useState(1);
+ const [reviewsTotalItems, setReviewsTotalItems] = useState(0);
+ const reviewsPerPage = 5;
+
+ 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: reportsLoading,
+ error: reportsError,
+ execute: refetchReports
+ } = useAsync(fetchReports, {
+ immediate: true,
+ onError: (error: any) => {
+ toast.error(error.message || 'Unable to load reports');
+ }
+ });
+
+ useEffect(() => {
+ if (activeTab === 'audit-logs') {
+ fetchLogs();
+ } else if (activeTab === 'reviews') {
+ fetchReviews();
+ }
+ }, [activeTab, auditFilters, currentPage, reviewsFilters, reviewsCurrentPage]);
+
+ useEffect(() => {
+ setAuditFilters(prev => ({ ...prev, page: currentPage }));
+ }, [currentPage]);
+
+ useEffect(() => {
+ if (activeTab === 'reviews') {
+ setReviewsCurrentPage(1);
+ }
+ }, [reviewsFilters, activeTab]);
+
+ const fetchLogs = async () => {
+ try {
+ setAuditLoading(true);
+ const response = await auditService.getAuditLogs({
+ ...auditFilters,
+ page: currentPage,
+ limit: itemsPerPage,
+ });
+ setLogs(response.data.logs);
+ if (response.data.pagination) {
+ setTotalPages(response.data.pagination.totalPages);
+ setTotalItems(response.data.pagination.total);
+ }
+ } catch (error: any) {
+ console.error('Error fetching audit logs:', error);
+ toast.error(error.response?.data?.message || 'Unable to load audit logs');
+ } finally {
+ setAuditLoading(false);
+ }
+ };
+
+ 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();
+ };
+
+ const handleAuditFilterChange = (key: keyof AuditLogFilters, value: any) => {
+ setAuditFilters(prev => ({ ...prev, [key]: value }));
+ setCurrentPage(1);
+ };
+
+ const handleSearch = (searchTerm: string) => {
+ handleAuditFilterChange('search', searchTerm || undefined);
+ };
+
+ const handleViewDetails = (log: AuditLog) => {
+ setSelectedLog(log);
+ setShowDetails(true);
+ };
+
+ const getStatusIcon = (status: string) => {
+ switch (status) {
+ case 'success':
+ return ;
+ case 'failed':
+ return ;
+ case 'error':
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ const getStatusBadge = (status: string) => {
+ const baseClasses = "px-3 py-1 rounded-full text-xs font-semibold";
+ switch (status) {
+ case 'success':
+ return `${baseClasses} bg-emerald-100 text-emerald-800 border border-emerald-200`;
+ case 'failed':
+ return `${baseClasses} bg-red-100 text-red-800 border border-red-200`;
+ case 'error':
+ return `${baseClasses} bg-amber-100 text-amber-800 border border-amber-200`;
+ default:
+ return `${baseClasses} bg-gray-100 text-gray-800 border border-gray-200`;
+ }
+ };
+
+ // Reviews Functions
+ const fetchReviews = async () => {
+ try {
+ setReviewsLoading(true);
+ const response = await reviewService.getReviews({
+ ...reviewsFilters,
+ page: reviewsCurrentPage,
+ limit: reviewsPerPage,
+ });
+ setReviews(response.data.reviews);
+ if (response.data.pagination) {
+ setReviewsTotalPages(response.data.pagination.totalPages);
+ setReviewsTotalItems(response.data.pagination.total);
+ }
+ } catch (error: any) {
+ toast.error(error.response?.data?.message || 'Unable to load reviews list');
+ } finally {
+ setReviewsLoading(false);
+ }
+ };
+
+ const handleApproveReview = async (id: number) => {
+ try {
+ await reviewService.approveReview(id);
+ toast.success('Review approved successfully');
+ fetchReviews();
+ } catch (error: any) {
+ toast.error(error.response?.data?.message || 'Unable to approve review');
+ }
+ };
+
+ const handleRejectReview = async (id: number) => {
+ if (!window.confirm('Are you sure you want to reject this review?')) return;
+
+ try {
+ await reviewService.rejectReview(id);
+ toast.success('Review rejected successfully');
+ fetchReviews();
+ } catch (error: any) {
+ toast.error(error.response?.data?.message || 'Unable to reject review');
+ }
+ };
+
+ const getReviewStatusBadge = (status: string) => {
+ const badges: Record = {
+ pending: { bg: 'bg-gradient-to-r from-amber-50 to-yellow-50', text: 'text-amber-800', label: 'Pending', border: 'border-amber-200' },
+ approved: { bg: 'bg-gradient-to-r from-emerald-50 to-green-50', text: 'text-emerald-800', label: 'Approved', border: 'border-emerald-200' },
+ rejected: { bg: 'bg-gradient-to-r from-rose-50 to-red-50', text: 'text-rose-800', label: 'Rejected', border: 'border-rose-200' },
+ };
+ const badge = badges[status] || badges.pending;
+ return (
+
+ {badge.label}
+
+ );
+ };
+
+ const renderStars = (rating: number) => {
+ return (
+
+ {[1, 2, 3, 4, 5].map((star) => (
+
+ ))}
+
+ );
+ };
+
+ const tabs = [
+ { id: 'overview' as AnalyticsTab, label: 'Overview', icon: BarChart3 },
+ { id: 'reports' as AnalyticsTab, label: 'Reports', icon: FileText },
+ { id: 'audit-logs' as AnalyticsTab, label: 'Audit Logs', icon: ClipboardList },
+ { id: 'reviews' as AnalyticsTab, label: 'Reviews', icon: Star },
+ ];
+
+ return (
+
+
+ {/* Luxury Header */}
+
+
+
+
+
+
+
+
+
+ Analytics Dashboard
+
+
+
+
+ Comprehensive insights, reports, and system activity tracking
+
+
+
+
+
+ {/* Premium Tab Navigation */}
+
+
+ {tabs.map((tab) => {
+ const Icon = tab.icon;
+ const isActive = activeTab === tab.id;
+ return (
+
+ );
+ })}
+
+
+
+
+
+ {/* Overview Tab */}
+ {activeTab === 'overview' && (
+
+
setActiveTab('reports')}
+ className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-blue-300/60 overflow-hidden"
+ >
+
+
+
+
+
+
+
Reports & Analytics
+
+
+
+
+
+ View comprehensive reports, revenue analytics, and booking statistics
+
+
+
+
+
+
+
setActiveTab('audit-logs')}
+ className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-indigo-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-indigo-300/60 overflow-hidden"
+ >
+
+
+
+
+ Track system activity, user actions, and security events
+
+
+
+
+
+
+
setActiveTab('reviews')}
+ className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-amber-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-amber-300/60 overflow-hidden"
+ >
+
+
+
+
+ Manage customer reviews and ratings
+
+
+
+
+
+
+ )}
+
+ {/* Reports Tab */}
+ {activeTab === 'reports' && (
+
+ {reportsLoading && !reportData ? (
+
+ ) : reportsError && !reportData ? (
+
+
+
+ ) : (
+ <>
+ {/* Section Header */}
+
+
+
+
+
+
+
+
Reports & Analytics
+
+
+ View comprehensive reports and statistics for bookings, revenue, and performance
+
+
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+ setDateRange({ ...dateRange, from: e.target.value })}
+ className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all duration-200"
+ />
+
+
+
+ setDateRange({ ...dateRange, to: e.target.value })}
+ className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all duration-200"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {reportData && (
+ <>
+ {/* Summary Cards */}
+
+ {[
+ { icon: Calendar, label: 'Total Bookings', value: reportData.total_bookings || 0, color: 'blue', border: 'border-blue-500' },
+ { icon: CurrencyIcon, label: 'Total Revenue', value: formatCurrency(reportData.total_revenue || 0), color: 'emerald', border: 'border-emerald-500' },
+ { icon: Users, label: 'Total Customers', value: reportData.total_customers || 0, color: 'purple', border: 'border-purple-500' },
+ { icon: Hotel, label: 'Available Rooms', value: reportData.available_rooms || 0, color: 'orange', border: 'border-orange-500', subtitle: `${reportData.occupied_rooms || 0} occupied` },
+ ].map(({ icon: Icon, label, value, color, border, subtitle }) => {
+ const colorClasses = {
+ blue: { bg: 'bg-blue-100', text: 'text-blue-600', gradient: 'from-blue-500 to-blue-600' },
+ emerald: { bg: 'bg-emerald-100', text: 'text-emerald-600', gradient: 'from-emerald-500 to-emerald-600' },
+ purple: { bg: 'bg-purple-100', text: 'text-purple-600', gradient: 'from-purple-500 to-purple-600' },
+ orange: { bg: 'bg-orange-100', text: 'text-orange-600', gradient: 'from-orange-500 to-orange-600' },
+ }[color];
+
+ return (
+
+
+
+ {Icon === CurrencyIcon ? (
+
+ ) : (
+
+ )}
+
+
+
+
{label}
+
+ {value}
+
+ {subtitle && (
+
{subtitle}
+ )}
+
+ );
+ })}
+
+
+ {/* 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)} |
+
+ ))}
+
+
+
+
+ )}
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Audit Logs Tab */}
+ {activeTab === 'audit-logs' && (
+
+ {/* Section Header */}
+
+
+
+
+ View all system activity, user actions, and security events in real-time
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+
+
+ handleSearch(e.target.value)}
+ className="w-full pl-10 pr-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all duration-200"
+ />
+
+
+
+
+ handleAuditFilterChange('action', e.target.value || undefined)}
+ className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all duration-200"
+ />
+
+
+
+ handleAuditFilterChange('resource_type', e.target.value || undefined)}
+ className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all duration-200"
+ />
+
+
+
+
+
+
+
+ handleAuditFilterChange('start_date', e.target.value || undefined)}
+ className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all duration-200"
+ />
+
+
+
+ handleAuditFilterChange('end_date', e.target.value || undefined)}
+ className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all duration-200"
+ />
+
+
+
+
+ {/* Stats Summary */}
+
+
+
+
+
Total Logs
+
{totalItems}
+
+
+
+
+
+
+
+
+
+
Current Page
+
{currentPage}
+
+
+
+
+
+
+ {/* Logs Table */}
+ {auditLoading && logs.length === 0 ? (
+
+ ) : logs.length === 0 ? (
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+ | ID |
+ Action |
+ Resource |
+ User |
+ Status |
+ IP Address |
+ Date |
+ Actions |
+
+
+
+ {logs.map((log) => (
+
+ | #{log.id} |
+ {log.action} |
+
+ {log.resource_type}
+ {log.resource_id && (
+ ID: {log.resource_id}
+ )}
+ |
+
+ {log.user ? (
+
+ {log.user.full_name}
+ {log.user.email}
+ |
+
+
+ {getStatusIcon(log.status)}
+ {log.status}
+
+ |
+ {log.ip_address || '-'} |
+ {formatDate(log.created_at)} |
+
+
+ |
+
+ ))}
+
+
+
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Reviews Tab */}
+ {activeTab === 'reviews' && (
+
+ {/* Section Header */}
+
+
+
+
+
+
+
Review Management
+
+
+ Approve and manage customer reviews and ratings
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+
+
+
+
+
+ {reviewsTotalItems} review{reviewsTotalItems !== 1 ? 's' : ''}
+
+
+
+
+
+
+ {/* Reviews Table */}
+ {reviewsLoading && reviews.length === 0 ? (
+
+ ) : reviews.length === 0 ? (
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+ | User |
+ Room |
+ Rating |
+ Comment |
+ Created Date |
+ Status |
+ Actions |
+
+
+
+ {reviews.map((review) => (
+
+ |
+ {review.user?.name}
+ {review.user?.email && (
+ {review.user.email}
+ )}
+ |
+
+
+ Room {review.room?.room_number}
+
+ {review.room?.room_type?.name && (
+ {review.room.room_type.name}
+ )}
+ |
+
+
+ {renderStars(review.rating)}
+ ({review.rating})
+
+ |
+
+ {review.comment}
+ |
+
+
+ {new Date(review.created_at).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ })}
+
+ |
+
+ {getReviewStatusBadge(review.status)}
+ |
+
+ {review.status === 'pending' && (
+
+
+
+
+ )}
+ {review.status !== 'pending' && (
+ No actions available
+ )}
+ |
+
+ ))}
+
+
+
+
+
+ {/* Pagination */}
+ {reviewsTotalPages > 1 && (
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Details Modal */}
+ {showDetails && selectedLog && (
+
+
+
+
+
Audit Log Details
+
+
+
+
+
+
+
+
#{selectedLog.id}
+
+
+
+
+ {getStatusIcon(selectedLog.status)}
+ {selectedLog.status}
+
+
+
+
+
{selectedLog.action}
+
+
+
+
{selectedLog.resource_type}
+
+ {selectedLog.resource_id && (
+
+
+
{selectedLog.resource_id}
+
+ )}
+
+
+
{formatDate(selectedLog.created_at)}
+
+ {selectedLog.user && (
+ <>
+
+
+
{selectedLog.user.full_name}
+
{selectedLog.user.email}
+
+
+
+
{selectedLog.user_id}
+
+
+ )}
+ {selectedLog.ip_address && (
+
+
+
{selectedLog.ip_address}
+
+ )}
+ {selectedLog.request_id && (
+
+
+
{selectedLog.request_id}
+
+ )}
+
+
+ {selectedLog.user_agent && (
+
+
+
{selectedLog.user_agent}
+
+ )}
+
+ {selectedLog.error_message && (
+
+
+
{selectedLog.error_message}
+
+ )}
+
+ {selectedLog.details && (
+
+
+
+ {JSON.stringify(selectedLog.details, null, 2)}
+
+
+ )}
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {/* Luxury Header */}
+
+
+
+
+
+
+
+
+
+ Business Dashboard
+
+
+
+
+ Manage invoices, payments, and promotional campaigns
+
+
+
+
+
+ {/* Premium Tab Navigation */}
+
+
+ {tabs.map((tab) => {
+ const Icon = tab.icon;
+ const isActive = activeTab === tab.id;
+ return (
+
+ );
+ })}
+
+
+
+
+
+ {/* Overview Tab */}
+ {activeTab === 'overview' && (
+
+
setActiveTab('invoices')}
+ className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-blue-300/60 overflow-hidden"
+ >
+
+
+
+
+ Manage and track all invoices and billing
+
+
+
+
+
+
+
setActiveTab('payments')}
+ className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-emerald-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-emerald-300/60 overflow-hidden"
+ >
+
+
+
+
+ Track payment transactions and revenue
+
+
+
+
+
+
+
setActiveTab('promotions')}
+ className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-purple-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-purple-300/60 overflow-hidden"
+ >
+
+
+
+
+ Manage discount codes and campaigns
+
+
+
+ View Promotions
+
+
+
+
+
+
+
+ )}
+
+ {/* Invoices Tab */}
+ {activeTab === 'invoices' && (
+
+ {/* Section Header */}
+
+
+
+
+
+
+
+
Invoice Management
+
+
+ Manage and track all invoices and billing information
+
+
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+ setInvoiceFilters({ ...invoiceFilters, search: e.target.value })}
+ className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
+ />
+
+
+
+
+
+ {invoicesTotalItems} invoice{invoicesTotalItems !== 1 ? 's' : ''}
+
+
+
+
+
+ {/* Invoices Table */}
+ {invoicesLoading && invoices.length === 0 ? (
+
+ ) : (
+
+
+
+
+
+ | Invoice # |
+ Customer |
+ Booking |
+ Amount |
+ Status |
+ Due Date |
+ Actions |
+
+
+
+ {invoices.length > 0 ? (
+ invoices.map((invoice) => {
+ const statusBadge = getInvoiceStatusBadge(invoice.status);
+ return (
+
+ |
+
+
+ {invoice.invoice_number}
+
+ |
+
+ {invoice.customer_name}
+ {invoice.customer_email}
+ |
+
+ #{invoice.booking_id}
+ |
+
+
+ {formatCurrency(invoice.total_amount)}
+
+ {invoice.balance_due > 0 && (
+
+ Due: {formatCurrency(invoice.balance_due)}
+
+ )}
+ |
+
+
+ {statusBadge.label}
+
+ |
+
+ {formatDate(invoice.due_date, 'short')}
+ |
+
+
+
+
+
+
+ |
+
+ );
+ })
+ ) : (
+
+ |
+
+ |
+
+ )}
+
+
+
+ {invoicesTotalPages > 1 && (
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Payments Tab */}
+ {activeTab === 'payments' && (
+
+ {/* Section Header */}
+
+
+
+
+
+
+
Payment Management
+
+
+ Track payment transactions and revenue streams
+
+
+
+
+ {/* Filters */}
+
+
+ {/* Payments Table */}
+ {paymentsLoading && payments.length === 0 ? (
+
+ ) : (
+ <>
+
+
+
+
+
+ | Transaction ID |
+ Booking Number |
+ Customer |
+ Method |
+ Amount |
+ Payment Date |
+
+
+
+ {payments.map((payment) => (
+
+ |
+ {payment.transaction_id || `PAY-${payment.id}`}
+ |
+
+ {payment.booking?.booking_number}
+ |
+
+ {payment.booking?.user?.name}
+ |
+
+ {getPaymentMethodBadge(payment.payment_method)}
+ |
+
+
+ {formatCurrency(payment.amount)}
+
+ |
+
+
+ {new Date(payment.payment_date || payment.createdAt).toLocaleDateString('en-US')}
+
+ |
+
+ ))}
+
+
+
+
+
+
+ {/* Summary Card */}
+
+
+
+
Total Revenue
+
+ {formatCurrency(payments.reduce((sum, p) => sum + p.amount, 0))}
+
+
Total {payments.length} transaction{payments.length !== 1 ? 's' : ''}
+
+
+
+
+
+ )}
+
+ )}
+
+ {/* Promotions Tab */}
+ {activeTab === 'promotions' && (
+
+ {/* Section Header */}
+
+
+
+
+
+
+
+
Promotion Management
+
+
+ Manage discount codes and promotional campaigns
+
+
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+ setPromotionFilters({ ...promotionFilters, search: e.target.value })}
+ className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
+ />
+
+
+
+
+
+
+ {/* Promotions Table */}
+ {promotionsLoading && promotions.length === 0 ? (
+
+ ) : (
+
+
+
+
+
+ | Code |
+ Program Name |
+ Value |
+ Period |
+ Used |
+ Status |
+ Actions |
+
+
+
+ {promotions.map((promotion) => (
+
+
+
+
+
+
+ {promotion.code}
+ |
+
+ {promotion.name}
+ {promotion.description}
+ |
+
+
+ {promotion.discount_type === 'percentage'
+ ? `${promotion.discount_value}%`
+ : formatCurrency(promotion.discount_value)}
+
+ |
+
+
+ {promotion.start_date ? new Date(promotion.start_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'N/A'}
+ →
+ {promotion.end_date ? new Date(promotion.end_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'N/A'}
+
+ |
+
+
+ {promotion.used_count || 0}
+ /
+ {promotion.usage_limit || '∞'}
+
+ |
+
+ {getPromotionStatusBadge(promotion.status)}
+ |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+ )}
+
+ {/* Promotion Modal */}
+ {showPromotionModal && (
+
+
+ {/* Modal Header */}
+
+
+
+
+ {editingPromotion ? 'Update Promotion' : 'Add New Promotion'}
+
+
+ {editingPromotion ? 'Modify promotion details' : 'Create a new promotion program'}
+
+
+
+
+
+
+ {/* Modal Content */}
+