From 897a336d0bd5ee23df9fbb89395ac4a128b6ede8 Mon Sep 17 00:00:00 2001
From: poduck <poduck@gmail.com>
Date: Sun, 7 Dec 2025 17:54:20 -0500
Subject: [PATCH] feat: Add click navigation for time-off request notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/components/NotificationDropdown.tsx   | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/NotificationDropdown.tsx b/frontend/src/components/NotificationDropdown.tsx
index 4b509dd..6e9befa 100644
--- a/frontend/src/components/NotificationDropdown.tsx
+++ b/frontend/src/components/NotificationDropdown.tsx
@@ -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`}>