102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Bell, CheckCircle, XCircle, Calendar, MessageCircle } from 'lucide-react';
|
|
import AuthService from '@/app/services/AuthService';
|
|
import { useNotifications } from '@/app/contexts/NotificationsContext';
|
|
|
|
export default function NotificationsPage() {
|
|
const router = useRouter();
|
|
const { notifications, unreadCount, isLoading } = useNotifications();
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (!AuthService.isAuthenticated()) {
|
|
router.push('/login');
|
|
return;
|
|
}
|
|
}, [router]);
|
|
|
|
const markAsRead = (id) => {
|
|
// This will be handled by context if needed
|
|
};
|
|
|
|
const markAllAsRead = () => {
|
|
// This will be handled by context if needed
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
|
<p className="text-gray-600">جاري التحميل...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
|
<h3 className="text-xl font-bold text-gray-700 mb-2">خطأ في التحميل</h3>
|
|
<p className="text-gray-500">{error}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 py-8">
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">الإشعارات</h1>
|
|
<p className="text-gray-600">
|
|
{unreadCount > 0 ? `لديك ${unreadCount} إشعار غير مقروء` : 'جميع الإشعارات مقروءة'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{notifications.length === 0 ? (
|
|
<div className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
|
|
<Bell className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد إشعارات</h3>
|
|
<p className="text-gray-500">ستظهر هنا الإشعارات المتعلقة بحجوزاتك ومدفوعاتك</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{notifications.map((notification, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white rounded-2xl shadow-sm border transition-all hover:shadow-md border-gray-200"
|
|
>
|
|
<div className="p-5 flex gap-4">
|
|
<div className="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center shrink-0">
|
|
<Bell className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<h3 className="font-bold text-gray-900">{notification.title}</h3>
|
|
{notification.message && (
|
|
<p className="text-gray-600 text-sm mt-1">{notification.message}</p>
|
|
)}
|
|
{notification.date && (
|
|
<p className="text-xs text-gray-400 mt-2">{notification.date}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |