492 lines
25 KiB
TypeScript
492 lines
25 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
BarChart3,
|
|
Users,
|
|
Hotel,
|
|
Calendar,
|
|
TrendingUp,
|
|
RefreshCw,
|
|
CreditCard,
|
|
LogOut
|
|
} from 'lucide-react';
|
|
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';
|
|
import { formatDate } from '../../utils/format';
|
|
import { useFormatCurrency } from '../../hooks/useFormatCurrency';
|
|
import { useAsync } from '../../hooks/useAsync';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import useAuthStore from '../../store/useAuthStore';
|
|
|
|
const DashboardPage: React.FC = () => {
|
|
const { formatCurrency } = useFormatCurrency();
|
|
const navigate = useNavigate();
|
|
const { logout } = useAuthStore();
|
|
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],
|
|
});
|
|
const [recentPayments, setRecentPayments] = useState<Payment[]>([]);
|
|
const [loadingPayments, setLoadingPayments] = useState(false);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logout();
|
|
navigate('/');
|
|
} catch (error) {
|
|
console.error('Logout error:', error);
|
|
}
|
|
};
|
|
|
|
const fetchDashboardData = async () => {
|
|
const response = await reportService.getReports({
|
|
from: dateRange.from,
|
|
to: dateRange.to,
|
|
});
|
|
return response.data;
|
|
};
|
|
|
|
const { data: stats, loading, error, execute } = useAsync<ReportData>(
|
|
fetchDashboardData,
|
|
{
|
|
immediate: true,
|
|
onError: (error: any) => {
|
|
toast.error(error.message || 'Unable to load dashboard data');
|
|
}
|
|
}
|
|
);
|
|
|
|
useEffect(() => {
|
|
execute();
|
|
}, [dateRange]);
|
|
|
|
useEffect(() => {
|
|
const fetchPayments = async () => {
|
|
try {
|
|
setLoadingPayments(true);
|
|
const response = await paymentService.getPayments({ page: 1, limit: 5 });
|
|
if (response.success && response.data?.payments) {
|
|
setRecentPayments(response.data.payments);
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Error fetching payments:', err);
|
|
} finally {
|
|
setLoadingPayments(false);
|
|
}
|
|
};
|
|
fetchPayments();
|
|
}, []);
|
|
|
|
const handleRefresh = () => {
|
|
execute();
|
|
};
|
|
|
|
const getPaymentStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'completed':
|
|
return 'bg-gradient-to-r from-emerald-50 to-green-50 text-emerald-800 border-emerald-200';
|
|
case 'pending':
|
|
return 'bg-gradient-to-r from-amber-50 to-yellow-50 text-amber-800 border-amber-200';
|
|
case 'failed':
|
|
return 'bg-gradient-to-r from-rose-50 to-red-50 text-rose-800 border-rose-200';
|
|
case 'refunded':
|
|
return 'bg-gradient-to-r from-slate-50 to-gray-50 text-slate-700 border-slate-200';
|
|
default:
|
|
return 'bg-gradient-to-r from-slate-50 to-gray-50 text-slate-700 border-slate-200';
|
|
}
|
|
};
|
|
|
|
const getPaymentMethodLabel = (method: string) => {
|
|
switch (method) {
|
|
case 'stripe':
|
|
case 'credit_card':
|
|
return 'Card';
|
|
case 'paypal':
|
|
return 'PayPal';
|
|
case 'bank_transfer':
|
|
return 'Bank Transfer';
|
|
case 'cash':
|
|
return 'Cash';
|
|
default:
|
|
return method;
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <Loading fullScreen text="Loading dashboard..." />;
|
|
}
|
|
|
|
if (error || !stats) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<EmptyState
|
|
title="Unable to Load Dashboard"
|
|
description={error?.message || 'Something went wrong. Please try again.'}
|
|
action={{
|
|
label: 'Retry',
|
|
onClick: handleRefresh
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3 sm:space-y-4 md:space-y-6 lg:space-y-8 bg-gradient-to-br from-slate-50 via-white to-slate-50 min-h-screen max-w-full overflow-x-hidden">
|
|
{}
|
|
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 sm:gap-6 animate-fade-in">
|
|
<div className="w-full lg:w-auto">
|
|
<div className="flex items-center gap-2 sm:gap-3 mb-2">
|
|
<div className="h-1 w-12 sm:w-16 bg-gradient-to-r from-amber-400 to-amber-600 rounded-full"></div>
|
|
<h1 className="text-xl sm:text-2xl md:text-2xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent tracking-tight">
|
|
Dashboard
|
|
</h1>
|
|
</div>
|
|
<p className="text-slate-600 mt-2 sm:mt-3 text-xs sm:text-sm md:text-sm font-light">Hotel operations overview and analytics</p>
|
|
</div>
|
|
|
|
{}
|
|
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
|
|
<div className="flex flex-col xs:flex-row gap-2 sm:gap-3 w-full sm:w-auto">
|
|
<input
|
|
type="date"
|
|
value={dateRange.from}
|
|
onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
|
|
className="flex-1 sm:flex-none px-3 sm:px-4 py-2 sm:py-2.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md text-sm sm:text-base"
|
|
/>
|
|
<span className="hidden xs:inline-flex items-center text-slate-500 font-medium">to</span>
|
|
<input
|
|
type="date"
|
|
value={dateRange.to}
|
|
onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
|
|
className="flex-1 sm:flex-none px-3 sm:px-4 py-2 sm:py-2.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md text-sm sm:text-base"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 sm:gap-3 items-center w-full sm:w-auto">
|
|
<button
|
|
onClick={handleRefresh}
|
|
disabled={loading}
|
|
className="flex-1 sm:flex-none px-4 sm:px-6 py-2 sm:py-2.5 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-xs sm:text-sm"
|
|
>
|
|
<RefreshCw className={`w-3 h-3 sm:w-4 sm:h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
Refresh
|
|
</button>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex-1 sm:flex-none px-4 sm:px-6 py-2 sm:py-2.5 bg-gradient-to-r from-rose-500 to-rose-600 text-white rounded-xl font-semibold hover:from-rose-600 hover:to-rose-700 transition-all duration-200 shadow-lg hover:shadow-xl flex items-center justify-center gap-2 text-xs sm:text-sm"
|
|
title="Logout"
|
|
>
|
|
<LogOut className="w-3 h-3 sm:w-4 sm:h-4" />
|
|
<span className="hidden sm:inline">Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6">
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md: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 className="flex-1 min-w-0 pr-2">
|
|
<p className="text-slate-500 text-xs font-semibold uppercase tracking-wider mb-1 sm:mb-2">Total Revenue</p>
|
|
<p className="text-lg sm:text-xl md:text-2xl font-bold bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent truncate">
|
|
{formatCurrency(stats?.total_revenue || 0)}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-emerald-100 to-emerald-200 p-3 sm:p-4 rounded-xl sm:rounded-2xl shadow-lg flex-shrink-0">
|
|
<CurrencyIcon className="text-emerald-600" size={20} />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center mt-4 sm:mt-5 pt-3 sm:pt-4 border-t border-slate-100">
|
|
<TrendingUp className="w-3 h-3 sm:w-4 sm:h-4 text-emerald-500 mr-1 sm:mr-2 flex-shrink-0" />
|
|
<span className="text-emerald-600 font-semibold text-xs sm:text-sm">Active</span>
|
|
<span className="text-slate-500 ml-1 sm:ml-2 text-xs sm:text-sm truncate">All time revenue</span>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md: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 className="flex-1 min-w-0 pr-2">
|
|
<p className="text-slate-500 text-xs font-semibold uppercase tracking-wider mb-1 sm:mb-2">Total Bookings</p>
|
|
<p className="text-lg sm:text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
|
|
{stats?.total_bookings || 0}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-blue-100 to-blue-200 p-3 sm:p-4 rounded-xl sm:rounded-2xl shadow-lg flex-shrink-0">
|
|
<Calendar className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center mt-4 sm:mt-5 pt-3 sm:pt-4 border-t border-slate-100">
|
|
<span className="text-slate-500 text-xs sm:text-sm truncate">
|
|
{stats.total_bookings > 0 ? 'Total bookings recorded' : 'No bookings yet'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md: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 className="flex-1 min-w-0 pr-2">
|
|
<p className="text-slate-500 text-xs font-semibold uppercase tracking-wider mb-1 sm:mb-2">Available Rooms</p>
|
|
<p className="text-lg sm:text-xl md:text-2xl font-bold bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent">
|
|
{stats?.available_rooms || 0}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-purple-100 to-purple-200 p-3 sm:p-4 rounded-xl sm:rounded-2xl shadow-lg flex-shrink-0">
|
|
<Hotel className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-purple-600" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center mt-4 sm:mt-5 pt-3 sm:pt-4 border-t border-slate-100">
|
|
<span className="text-slate-500 text-xs sm:text-sm truncate">
|
|
{stats?.occupied_rooms || 0} rooms in use
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md: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 className="flex-1 min-w-0 pr-2">
|
|
<p className="text-slate-500 text-xs font-semibold uppercase tracking-wider mb-1 sm:mb-2">Customers</p>
|
|
<p className="text-lg sm:text-xl md:text-2xl font-bold bg-gradient-to-r from-amber-600 to-amber-700 bg-clip-text text-transparent">
|
|
{stats?.total_customers || 0}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-amber-100 to-amber-200 p-3 sm:p-4 rounded-xl sm:rounded-2xl shadow-lg flex-shrink-0">
|
|
<Users className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-amber-600" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center mt-4 sm:mt-5 pt-3 sm:pt-4 border-t border-slate-100">
|
|
<span className="text-slate-500 text-xs sm:text-sm truncate">
|
|
Unique customers with bookings
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5 md:gap-6">
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md:p-6 animate-fade-in">
|
|
<div className="flex items-center justify-between mb-4 sm:mb-5 md:mb-6 pb-3 sm:pb-4 border-b border-slate-200">
|
|
<h2 className="text-sm sm:text-base md:text-base font-bold text-slate-900">Daily Revenue</h2>
|
|
<div className="p-2 sm:p-3 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg sm:rounded-xl shadow-md flex-shrink-0">
|
|
<BarChart3 className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
{stats?.revenue_by_date && stats.revenue_by_date.length > 0 ? (
|
|
<div className="space-y-2 sm:space-y-3">
|
|
{stats.revenue_by_date.slice(0, 7).map((item, index) => {
|
|
const maxRevenue = Math.max(...stats.revenue_by_date!.map(r => r.revenue));
|
|
return (
|
|
<div key={index} className="flex items-center py-1.5 sm:py-2">
|
|
<span className="text-xs sm:text-sm text-slate-600 w-16 sm:w-20 md:w-24 font-medium flex-shrink-0">
|
|
{formatDate(item.date, 'short')}
|
|
</span>
|
|
<div className="flex-1 mx-2 sm:mx-3 md:mx-4 min-w-0">
|
|
<div className="bg-slate-200 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner">
|
|
<div
|
|
className="bg-gradient-to-r from-emerald-500 to-emerald-600 h-4 sm:h-5 rounded-full transition-all shadow-md"
|
|
style={{
|
|
width: `${Math.min((item.revenue / (maxRevenue || 1)) * 100, 100)}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span className="text-xs sm:text-sm font-bold text-slate-900 w-20 sm:w-28 md:w-32 text-right bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent flex-shrink-0">
|
|
{formatCurrency(item.revenue)}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
title="No Revenue Data"
|
|
description="No revenue data available for the selected date range"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md:p-6 animate-fade-in" style={{ animationDelay: '0.2s' }}>
|
|
<div className="flex items-center justify-between mb-4 sm:mb-5 md:mb-6 pb-3 sm:pb-4 border-b border-slate-200">
|
|
<h2 className="text-sm sm:text-base md:text-base font-bold text-slate-900">Booking Status</h2>
|
|
</div>
|
|
{stats?.bookings_by_status && Object.keys(stats.bookings_by_status).length > 0 ? (
|
|
<div className="space-y-3 sm:space-y-4">
|
|
{Object.entries(stats.bookings_by_status)
|
|
.filter(([_, count]) => count > 0)
|
|
.map(([status, count]) => {
|
|
const statusColors: Record<string, string> = {
|
|
pending: 'bg-amber-500',
|
|
confirmed: 'bg-blue-500',
|
|
checked_in: 'bg-emerald-500',
|
|
checked_out: 'bg-slate-500',
|
|
cancelled: 'bg-rose-500',
|
|
};
|
|
const statusLabels: Record<string, string> = {
|
|
pending: 'Pending confirmation',
|
|
confirmed: 'Confirmed',
|
|
checked_in: 'Checked in',
|
|
checked_out: 'Checked out',
|
|
cancelled: '❌ Canceled',
|
|
};
|
|
return (
|
|
<div key={status} className="flex items-center justify-between p-2.5 sm:p-3 bg-gradient-to-r from-slate-50 to-white rounded-lg sm:rounded-xl hover:shadow-md transition-all duration-200 border border-slate-100">
|
|
<div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
|
|
<div className={`w-3 h-3 sm:w-4 sm:h-4 rounded-full shadow-md flex-shrink-0 ${statusColors[status] || 'bg-slate-500'}`} />
|
|
<span className="text-xs sm:text-sm md:text-base text-slate-700 font-medium truncate">{statusLabels[status] || status}</span>
|
|
</div>
|
|
<span className="font-bold text-slate-900 text-sm sm:text-base flex-shrink-0 ml-2">{count}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
title="No Booking Data"
|
|
description="No booking status data available"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md:p-6 animate-fade-in">
|
|
<div className="flex items-center justify-between mb-4 sm:mb-5 md:mb-6 pb-3 sm:pb-4 border-b border-slate-200">
|
|
<h2 className="text-sm sm:text-base md:text-base font-bold text-slate-900">Top Booked Rooms</h2>
|
|
<div className="p-2 bg-gradient-to-br from-amber-100 to-amber-200 rounded-lg sm:rounded-xl flex-shrink-0">
|
|
<Hotel className="w-4 h-4 sm:w-5 sm:h-5 text-amber-600" />
|
|
</div>
|
|
</div>
|
|
{stats?.top_rooms && stats.top_rooms.length > 0 ? (
|
|
<div className="space-y-2 sm:space-y-3">
|
|
{stats.top_rooms.map((room, index) => (
|
|
<div key={room.room_id} className="flex items-center justify-between p-3 sm:p-4 bg-gradient-to-r from-slate-50 to-white rounded-lg sm:rounded-xl hover:from-amber-50 hover:to-yellow-50 transition-all duration-300 border border-slate-200 hover:border-amber-300 hover:shadow-lg">
|
|
<div className="flex items-center gap-2 sm:gap-3 md:gap-4 min-w-0 flex-1">
|
|
<span className="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-amber-500 to-amber-600 text-white rounded-lg sm:rounded-xl font-bold shadow-lg shadow-amber-500/40 text-base sm:text-lg flex-shrink-0">
|
|
{index + 1}
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="font-semibold text-slate-900 text-sm sm:text-base truncate">Room {room.room_number}</p>
|
|
<p className="text-xs sm:text-sm text-slate-500">{room.bookings} booking{room.bookings !== 1 ? 's' : ''}</p>
|
|
</div>
|
|
</div>
|
|
<span className="font-bold text-emerald-600 bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent text-sm sm:text-base flex-shrink-0 ml-2">
|
|
{formatCurrency(room.revenue)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
title="No Room Data"
|
|
description="No room booking data available for the selected date range"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md:p-6 animate-fade-in" style={{ animationDelay: '0.2s' }}>
|
|
<div className="flex items-center justify-between mb-4 sm:mb-5 md:mb-6 pb-3 sm:pb-4 border-b border-slate-200">
|
|
<h2 className="text-sm sm:text-base md:text-base font-bold text-slate-900">Services Used</h2>
|
|
<div className="p-2 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg sm:rounded-xl flex-shrink-0">
|
|
<BarChart3 className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
|
|
</div>
|
|
</div>
|
|
{stats?.service_usage && stats.service_usage.length > 0 ? (
|
|
<div className="space-y-2 sm:space-y-3">
|
|
{stats.service_usage.map((service) => (
|
|
<div key={service.service_id} className="flex items-center justify-between p-3 sm:p-4 bg-gradient-to-r from-slate-50 to-white rounded-lg sm:rounded-xl hover:from-purple-50 hover:to-indigo-50 transition-all duration-300 border border-slate-200 hover:border-purple-300 hover:shadow-lg">
|
|
<div className="min-w-0 flex-1 pr-2">
|
|
<p className="font-semibold text-slate-900 text-sm sm:text-base truncate">{service.service_name}</p>
|
|
<p className="text-xs sm:text-sm text-slate-500">{service.usage_count} time{service.usage_count !== 1 ? 's' : ''} used</p>
|
|
</div>
|
|
<span className="font-bold text-purple-600 bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent text-sm sm:text-base flex-shrink-0">
|
|
{formatCurrency(service.total_revenue)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
title="No Service Data"
|
|
description="No service usage data available for the selected date range"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md:p-6 animate-fade-in" style={{ animationDelay: '0.3s' }}>
|
|
<div className="flex items-center justify-between mb-4 sm:mb-5 md:mb-6 pb-3 sm:pb-4 border-b border-slate-200">
|
|
<h2 className="text-sm sm:text-base md:text-base font-bold text-slate-900">Recent Payments</h2>
|
|
<button
|
|
onClick={() => navigate('/admin/payments')}
|
|
className="text-xs sm:text-sm text-amber-600 hover:text-amber-700 font-semibold hover:underline transition-colors flex-shrink-0 ml-2"
|
|
>
|
|
View All →
|
|
</button>
|
|
</div>
|
|
{loadingPayments ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loading text="Loading payments..." />
|
|
</div>
|
|
) : recentPayments && recentPayments.length > 0 ? (
|
|
<div className="space-y-2 sm:space-y-3">
|
|
{recentPayments.map((payment) => (
|
|
<div
|
|
key={payment.id}
|
|
className="flex items-center justify-between p-3 sm:p-4 bg-gradient-to-r from-slate-50 to-white rounded-lg sm:rounded-xl hover:from-amber-50 hover:to-yellow-50 border border-slate-200 hover:border-amber-300 hover:shadow-lg cursor-pointer transition-all duration-200"
|
|
onClick={() => navigate(`/admin/payments`)}
|
|
>
|
|
<div className="flex items-center space-x-2 sm:space-x-3 md:space-x-4 flex-1 min-w-0">
|
|
<div className="p-2 sm:p-3 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg sm:rounded-xl shadow-md flex-shrink-0">
|
|
<CreditCard className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-bold text-slate-900 truncate text-xs sm:text-sm md:text-base">
|
|
{formatCurrency(payment.amount)}
|
|
</p>
|
|
<div className="flex items-center gap-1 sm:gap-2 mt-1 flex-wrap">
|
|
<p className="text-xs sm:text-sm text-slate-600 font-medium">
|
|
{getPaymentMethodLabel(payment.payment_method)}
|
|
</p>
|
|
{payment.payment_date && (
|
|
<span className="text-xs text-slate-400">
|
|
• {formatDate(payment.payment_date, 'short')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span className={`px-2 sm:px-3 py-1 sm:py-1.5 text-xs font-semibold rounded-full border shadow-sm flex-shrink-0 ml-2 ${getPaymentStatusColor(payment.payment_status)}`}>
|
|
{payment.payment_status.charAt(0).toUpperCase() + payment.payment_status.slice(1)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
title="No Recent Payments"
|
|
description="Recent payment transactions will appear here"
|
|
action={{
|
|
label: 'View All Payments',
|
|
onClick: () => navigate('/admin/payments')
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardPage;
|