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:
poduck
2025-12-07 17:54:20 -05:00
parent 410b46a896
commit 897a336d0b

View File

@@ -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`}>