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

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-11-21 01:20:51 +02:00
parent a38ab4fa82
commit 6f85b8cf17
242 changed files with 7154 additions and 14492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
Frontend/src/pages/admin/DashboardPage.tsx
View File

@@ -6,11 +6,11 @@ import {
Calendar,
TrendingUp,
RefreshCw,
TrendingDown,
CreditCard,
LogOut
} from 'lucide-react';
import { reportService, ReportData, paymentService, Payment } from '../../services/api';
import { reportService, ReportData, paymentService } from '../../services/api';
import type { Payment } from '../../services/api/paymentService';
import { toast } from 'react-toastify';
import { Loading, EmptyState } from '../../components/common';
import CurrencyIcon from '../../components/common/CurrencyIcon';
@@ -60,7 +60,7 @@ const DashboardPage: React.FC = () => {
useEffect(() => {
execute();
}, [dateRange]); // eslint-disable-line react-hooks/exhaustive-deps
}, [dateRange]);
useEffect(() => {
const fetchPayments = async () => {
@@ -135,7 +135,7 @@ const DashboardPage: React.FC = () => {
return (
<div className="space-y-8 bg-gradient-to-br from-slate-50 via-white to-slate-50 min-h-screen -m-6 p-8">
{/* Luxury Header */}
{}
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6 animate-fade-in">
<div>
<div className="flex items-center gap-3 mb-2">
@@ -147,7 +147,7 @@ const DashboardPage: React.FC = () => {
<p className="text-slate-600 mt-3 text-lg font-light">Hotel operations overview and analytics</p>
</div>
{/* Date Range Filter & Actions */}
{}
<div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
<div className="flex gap-3 items-center">
<input
@@ -185,9 +185,9 @@ const DashboardPage: React.FC = () => {
</div>
</div>
{/* Luxury Stats Cards */}
{}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{/* Total Revenue */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 border-l-4 border-l-emerald-500 animate-slide-up hover:shadow-2xl transition-all duration-300" style={{ animationDelay: '0.1s' }}>
<div className="flex items-center justify-between">
<div>
@@ -207,7 +207,7 @@ const DashboardPage: React.FC = () => {
</div>
</div>
{/* Total Bookings */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 border-l-4 border-l-blue-500 animate-slide-up hover:shadow-2xl transition-all duration-300" style={{ animationDelay: '0.2s' }}>
<div className="flex items-center justify-between">
<div>
@@ -227,7 +227,7 @@ const DashboardPage: React.FC = () => {
</div>
</div>
{/* Available Rooms */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 border-l-4 border-l-purple-500 animate-slide-up hover:shadow-2xl transition-all duration-300" style={{ animationDelay: '0.3s' }}>
<div className="flex items-center justify-between">
<div>
@@ -247,7 +247,7 @@ const DashboardPage: React.FC = () => {
</div>
</div>
{/* Total Customers */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 border-l-4 border-l-amber-500 animate-slide-up hover:shadow-2xl transition-all duration-300" style={{ animationDelay: '0.4s' }}>
<div className="flex items-center justify-between">
<div>
@@ -268,9 +268,9 @@ const DashboardPage: React.FC = () => {
</div>
</div>
{/* Charts Section */}
{}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Revenue Chart */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 animate-fade-in">
<div className="flex items-center justify-between mb-6 pb-4 border-b border-slate-200">
<h2 className="text-xl font-bold text-slate-900">Daily Revenue</h2>
@@ -312,7 +312,7 @@ const DashboardPage: React.FC = () => {
)}
</div>
{/* Bookings by Status */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 animate-fade-in" style={{ animationDelay: '0.2s' }}>
<div className="flex items-center justify-between mb-6 pb-4 border-b border-slate-200">
<h2 className="text-xl font-bold text-slate-900">Booking Status</h2>
@@ -334,7 +334,7 @@ const DashboardPage: React.FC = () => {
confirmed: 'Confirmed',
checked_in: 'Checked in',
checked_out: 'Checked out',
cancelled: 'Cancelled',
cancelled: '❌ Canceled',
};
return (
<div key={status} className="flex items-center justify-between p-3 bg-gradient-to-r from-slate-50 to-white rounded-xl hover:shadow-md transition-all duration-200 border border-slate-100">
@@ -356,9 +356,9 @@ const DashboardPage: React.FC = () => {
</div>
</div>
{/* Top Rooms, Services & Recent Payments */}
{}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Top Rooms */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 animate-fade-in">
<div className="flex items-center justify-between mb-6 pb-4 border-b border-slate-200">
<h2 className="text-xl font-bold text-slate-900">Top Booked Rooms</h2>
@@ -393,7 +393,7 @@ const DashboardPage: React.FC = () => {
)}
</div>
{/* Service Usage */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 animate-fade-in" style={{ animationDelay: '0.2s' }}>
<div className="flex items-center justify-between mb-6 pb-4 border-b border-slate-200">
<h2 className="text-xl font-bold text-slate-900">Services Used</h2>
@@ -423,7 +423,7 @@ const DashboardPage: React.FC = () => {
)}
</div>
{/* Recent Payments */}
{}
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 animate-fade-in" style={{ animationDelay: '0.3s' }}>
<div className="flex items-center justify-between mb-6 pb-4 border-b border-slate-200">
<h2 className="text-xl font-bold text-slate-900">Recent Payments</h2>