feat: Add click navigation for time-off request notifications
Clicking a time-off request notification now navigates to the time blocks page where pending requests can be reviewed. - Added Clock icon for time-off request notifications - Handle notification.data.type === 'time_off_request' to navigate to /time-blocks 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Bell, Check, CheckCheck, Trash2, X, Ticket, Calendar, MessageSquare } from 'lucide-react';
|
||||
import { Bell, Check, CheckCheck, Trash2, X, Ticket, Calendar, MessageSquare, Clock } from 'lucide-react';
|
||||
import {
|
||||
useNotifications,
|
||||
useUnreadNotificationCount,
|
||||
@@ -56,6 +56,13 @@ const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ variant = '
|
||||
}
|
||||
}
|
||||
|
||||
// Handle time-off request notifications - navigate to time blocks page
|
||||
if (notification.data?.type === 'time_off_request') {
|
||||
navigate('/time-blocks');
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigate to target if available
|
||||
if (notification.target_url) {
|
||||
navigate(notification.target_url);
|
||||
@@ -71,8 +78,13 @@ const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ variant = '
|
||||
clearAllMutation.mutate();
|
||||
};
|
||||
|
||||
const getNotificationIcon = (targetType: string | null) => {
|
||||
switch (targetType) {
|
||||
const getNotificationIcon = (notification: Notification) => {
|
||||
// Check for time-off request type in data
|
||||
if (notification.data?.type === 'time_off_request') {
|
||||
return <Clock size={16} className="text-amber-500" />;
|
||||
}
|
||||
|
||||
switch (notification.target_type) {
|
||||
case 'ticket':
|
||||
return <Ticket size={16} className="text-blue-500" />;
|
||||
case 'event':
|
||||
@@ -171,7 +183,7 @@ const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ variant = '
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5">
|
||||
{getNotificationIcon(notification.target_type)}
|
||||
{getNotificationIcon(notification)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`text-sm ${!notification.read ? 'font-medium' : ''} text-gray-900 dark:text-white`}>
|
||||
|
||||
Reference in New Issue
Block a user