'use client';
import React from 'react';
import {
IconButton,
Badge,
Menu,
MenuItem,
Box,
Typography,
Divider,
List,
ListItem,
ListItemText,
ListItemAvatar,
Avatar,
Button,
Chip,
useTheme,
Tooltip,
} from '@mui/material';
import {
Notifications as NotificationsIcon,
NotificationsNone as NotificationsNoneIcon,
Person as PersonIcon,
ShoppingCart as OrderIcon,
VolunteerActivism as VolunteerIcon,
Warning as WarningIcon,
MarkEmailRead as MarkReadIcon,
} from '@mui/icons-material';
import {
AdminNotification,
fetchAdminNotifications,
markNotificationsAsRead,
markAllNotificationsAsRead,
} from '@/services/notifications.service';
import { AppLoader } from '@/components/core/app-loader';
const getNotificationIcon = (type: string) => {
switch (type) {
case 'signup':
case 'NEW_SIGNUP':
return ;
case 'volunteer_form':
case 'VOLUNTEER_FORM':
return ;
case 'order':
case 'NEW_ORDER':
case 'ORDER_STATUS':
return ;
case 'admin_alert':
case 'URGENT_ALERT':
return ;
default:
return ;
}
};
const getNotificationColor = (priority: string) => {
switch (priority.toLowerCase()) {
case 'urgent':
return 'error';
case 'high':
return 'warning';
case 'medium':
return 'info';
case 'low':
return 'success';
default:
return 'default';
}
};
const formatTimeAgo = (dateString: string): string => {
const now = new Date();
const date = new Date(dateString);
const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60));
if (diffInMinutes < 1) return 'Just now';
if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
const diffInHours = Math.floor(diffInMinutes / 60);
if (diffInHours < 24) return `${diffInHours}h ago`;
const diffInDays = Math.floor(diffInHours / 24);
if (diffInDays < 7) return `${diffInDays}d ago`;
return date.toLocaleDateString();
};
export function NotificationBell() {
const theme = useTheme();
const [anchorEl, setAnchorEl] = React.useState(null);
const [notifications, setNotifications] = React.useState([]);
const [unreadCount, setUnreadCount] = React.useState(0);
const [loading, setLoading] = React.useState(false);
const open = Boolean(anchorEl);
// Fetch notifications
const fetchNotifications = React.useCallback(async () => {
try {
setLoading(true);
const response = await fetchAdminNotifications({
limit: 10,
sortBy: 'createdAt',
sortOrder: 'desc'
});
console.log('API Response:', response);
// Handle the response structure based on the backend
if (response.success && response.data) {
setNotifications(response.data.notifications || []);
setUnreadCount(response.data.pagination?.unread || 0);
} else {
setNotifications([]);
setUnreadCount(0);
}
} catch (error) {
console.error('Error fetching notifications:', error);
} finally {
setLoading(false);
}
}, []);
// Fetch notifications on component mount and every 30 seconds
React.useEffect(() => {
fetchNotifications();
const interval = setInterval(fetchNotifications, 30000); // 30 seconds
return () => clearInterval(interval);
}, [fetchNotifications]);
const handleClick = (event: React.MouseEvent) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleNotificationClick = async (notification: AdminNotification) => {
// Mark as read if not already read
if (!notification.isRead) {
try {
await markNotificationsAsRead([notification._id]);
// Update local state
setNotifications(prev =>
prev.map(n =>
n._id === notification._id ? { ...n, isRead: true } : n
)
);
setUnreadCount(prev => Math.max(0, prev - 1));
} catch (error) {
console.error('Error marking notification as read:', error);
}
}
// Navigate to related page if URL is provided
if (notification.relatedData?.url) {
window.location.href = notification.relatedData.url;
}
handleClose();
};
const handleMarkAllAsRead = async () => {
try {
await markAllNotificationsAsRead();
setNotifications(prev => prev.map(n => ({ ...n, isRead: true })));
setUnreadCount(0);
} catch (error) {
console.error('Error marking all notifications as read:', error);
}
};
return (
<>
{unreadCount > 0 ? : }
);
}