248 lines
9.5 KiB
TypeScript
248 lines
9.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { useLanguage } from '@/context/LanguageContext';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
import { adminApi, DashboardData } from '@/lib/api';
|
|
import Card from '@/components/ui/Card';
|
|
import {
|
|
UsersIcon,
|
|
CalendarIcon,
|
|
TicketIcon,
|
|
CurrencyDollarIcon,
|
|
EnvelopeIcon,
|
|
UserGroupIcon,
|
|
ExclamationTriangleIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
export default function AdminDashboardPage() {
|
|
const { t, locale } = useLanguage();
|
|
const { user } = useAuth();
|
|
const [data, setData] = useState<DashboardData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
adminApi.getDashboard()
|
|
.then(({ dashboard }) => setData(dashboard))
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
timeZone: 'America/Asuncion',
|
|
});
|
|
};
|
|
|
|
const statCards = data ? [
|
|
{
|
|
label: t('admin.dashboard.stats.users'),
|
|
value: data.stats.totalUsers,
|
|
icon: UsersIcon,
|
|
color: 'bg-blue-100 text-blue-600',
|
|
href: '/admin/users',
|
|
},
|
|
{
|
|
label: t('admin.dashboard.stats.events'),
|
|
value: data.stats.totalEvents,
|
|
icon: CalendarIcon,
|
|
color: 'bg-purple-100 text-purple-600',
|
|
href: '/admin/events',
|
|
},
|
|
{
|
|
label: t('admin.dashboard.stats.tickets'),
|
|
value: data.stats.confirmedTickets,
|
|
icon: TicketIcon,
|
|
color: 'bg-green-100 text-green-600',
|
|
href: '/admin/tickets',
|
|
},
|
|
{
|
|
label: t('admin.dashboard.stats.revenue'),
|
|
value: `${data.stats.totalRevenue.toLocaleString()} PYG`,
|
|
icon: CurrencyDollarIcon,
|
|
color: 'bg-yellow-100 text-yellow-600',
|
|
href: '/admin/payments',
|
|
},
|
|
] : [];
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-primary-dark">{t('admin.dashboard.title')}</h1>
|
|
<p className="text-gray-600">
|
|
{t('admin.dashboard.welcome')}, {user?.name}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
{statCards.map((stat) => (
|
|
<Link key={stat.label} href={stat.href}>
|
|
<Card className="p-6 hover:shadow-card-hover transition-shadow">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-500">{stat.label}</p>
|
|
<p className="mt-2 text-2xl font-bold text-primary-dark">{stat.value}</p>
|
|
</div>
|
|
<div className={`w-12 h-12 rounded-btn flex items-center justify-center ${stat.color}`}>
|
|
<stat.icon className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Alerts */}
|
|
<Card className="p-6">
|
|
<h2 className="font-semibold text-lg mb-4">Alerts</h2>
|
|
<div className="space-y-3">
|
|
{/* Low capacity warnings */}
|
|
{data?.upcomingEvents
|
|
.filter(event => {
|
|
const spotsLeft = Math.max(0, event.capacity - (event.bookedCount || 0));
|
|
const percentFull = ((event.bookedCount || 0) / event.capacity) * 100;
|
|
return percentFull >= 80 && spotsLeft > 0;
|
|
})
|
|
.map(event => {
|
|
const spotsLeft = Math.max(0, event.capacity - (event.bookedCount || 0));
|
|
const percentFull = Math.round(((event.bookedCount || 0) / event.capacity) * 100);
|
|
return (
|
|
<Link
|
|
key={event.id}
|
|
href="/admin/events"
|
|
className="flex items-center justify-between p-3 bg-orange-50 rounded-btn hover:bg-orange-100 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<ExclamationTriangleIcon className="w-5 h-5 text-orange-600" />
|
|
<div>
|
|
<span className="text-sm font-medium">{event.title}</span>
|
|
<p className="text-xs text-gray-500">Only {spotsLeft} spots left ({percentFull}% full)</p>
|
|
</div>
|
|
</div>
|
|
<span className="badge badge-warning">Low capacity</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
|
|
{/* Sold out events */}
|
|
{data?.upcomingEvents
|
|
.filter(event => Math.max(0, event.capacity - (event.bookedCount || 0)) === 0)
|
|
.map(event => (
|
|
<Link
|
|
key={event.id}
|
|
href="/admin/events"
|
|
className="flex items-center justify-between p-3 bg-red-50 rounded-btn hover:bg-red-100 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<ExclamationTriangleIcon className="w-5 h-5 text-red-600" />
|
|
<div>
|
|
<span className="text-sm font-medium">{event.title}</span>
|
|
<p className="text-xs text-gray-500">Event is sold out!</p>
|
|
</div>
|
|
</div>
|
|
<span className="badge badge-danger">Sold out</span>
|
|
</Link>
|
|
))}
|
|
|
|
{data && data.stats.pendingPayments > 0 && (
|
|
<Link
|
|
href="/admin/payments"
|
|
className="flex items-center justify-between p-3 bg-yellow-50 rounded-btn hover:bg-yellow-100 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<CurrencyDollarIcon className="w-5 h-5 text-yellow-600" />
|
|
<span className="text-sm">Pending payments</span>
|
|
</div>
|
|
<span className="badge badge-warning">{data.stats.pendingPayments}</span>
|
|
</Link>
|
|
)}
|
|
{data && data.stats.newContacts > 0 && (
|
|
<Link
|
|
href="/admin/contacts"
|
|
className="flex items-center justify-between p-3 bg-blue-50 rounded-btn hover:bg-blue-100 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<EnvelopeIcon className="w-5 h-5 text-blue-600" />
|
|
<span className="text-sm">New messages</span>
|
|
</div>
|
|
<span className="badge badge-info">{data.stats.newContacts}</span>
|
|
</Link>
|
|
)}
|
|
|
|
{/* No alerts */}
|
|
{data &&
|
|
data.stats.pendingPayments === 0 &&
|
|
data.stats.newContacts === 0 &&
|
|
!data.upcomingEvents.some(e => ((e.bookedCount || 0) / e.capacity) >= 0.8) && (
|
|
<p className="text-gray-500 text-sm text-center py-2">No alerts at this time</p>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Upcoming Events */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="font-semibold text-lg">Upcoming Events</h2>
|
|
<Link href="/admin/events" className="text-sm text-secondary-blue hover:underline">
|
|
{t('common.viewAll')}
|
|
</Link>
|
|
</div>
|
|
{data?.upcomingEvents.length === 0 ? (
|
|
<p className="text-gray-500 text-sm">No upcoming events</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{data?.upcomingEvents.slice(0, 5).map((event) => (
|
|
<Link
|
|
key={event.id}
|
|
href={`/admin/events`}
|
|
className="flex items-center justify-between p-3 bg-secondary-gray rounded-btn hover:bg-gray-200 transition-colors"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-sm">{event.title}</p>
|
|
<p className="text-xs text-gray-500">{formatDate(event.startDatetime)}</p>
|
|
</div>
|
|
<span className="text-sm text-gray-600">
|
|
{event.bookedCount || 0}/{event.capacity}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Quick Stats */}
|
|
<Card className="p-6">
|
|
<h2 className="font-semibold text-lg mb-4">Quick Stats</h2>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="text-center p-4 bg-secondary-gray rounded-btn">
|
|
<UserGroupIcon className="w-8 h-8 mx-auto text-gray-400" />
|
|
<p className="mt-2 text-2xl font-bold">{data?.stats.totalSubscribers || 0}</p>
|
|
<p className="text-xs text-gray-500">Subscribers</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-secondary-gray rounded-btn">
|
|
<TicketIcon className="w-8 h-8 mx-auto text-gray-400" />
|
|
<p className="mt-2 text-2xl font-bold">{data?.stats.totalTickets || 0}</p>
|
|
<p className="text-xs text-gray-500">Total Bookings</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|