Refactor admin page layout for improved user experience by adjusting component structure and styling.

src/api/ticketNotifications.ts

@@ -0,0 +1,62 @@
+import apiClient from './client'
+import type { TicketNotificationList, UnreadCountResponse } from '../types'
+
+export const ticketNotificationsApi = {
+  // User notifications
+  getNotifications: async (unreadOnly = false, limit = 50, offset = 0): Promise<TicketNotificationList> => {
+    const response = await apiClient.get('/cabinet/tickets/notifications', {
+      params: { unread_only: unreadOnly, limit, offset }
+    })
+    return response.data
+  },
+
+  getUnreadCount: async (): Promise<UnreadCountResponse> => {
+    const response = await apiClient.get('/cabinet/tickets/notifications/unread-count')
+    return response.data
+  },
+
+  markAsRead: async (notificationId: number): Promise<{ success: boolean }> => {
+    const response = await apiClient.post(`/cabinet/tickets/notifications/${notificationId}/read`)
+    return response.data
+  },
+
+  markAllAsRead: async (): Promise<{ success: boolean; marked_count: number }> => {
+    const response = await apiClient.post('/cabinet/tickets/notifications/read-all')
+    return response.data
+  },
+
+  markTicketAsRead: async (ticketId: number): Promise<{ success: boolean; marked_count: number }> => {
+    const response = await apiClient.post(`/cabinet/tickets/notifications/ticket/${ticketId}/read`)
+    return response.data
+  },
+
+  // Admin notifications
+  getAdminNotifications: async (unreadOnly = false, limit = 50, offset = 0): Promise<TicketNotificationList> => {
+    const response = await apiClient.get('/cabinet/admin/tickets/notifications', {
+      params: { unread_only: unreadOnly, limit, offset }
+    })
+    return response.data
+  },
+
+  getAdminUnreadCount: async (): Promise<UnreadCountResponse> => {
+    const response = await apiClient.get('/cabinet/admin/tickets/notifications/unread-count')
+    return response.data
+  },
+
+  markAdminAsRead: async (notificationId: number): Promise<{ success: boolean }> => {
+    const response = await apiClient.post(`/cabinet/admin/tickets/notifications/${notificationId}/read`)
+    return response.data
+  },
+
+  markAllAdminAsRead: async (): Promise<{ success: boolean; marked_count: number }> => {
+    const response = await apiClient.post('/cabinet/admin/tickets/notifications/read-all')
+    return response.data
+  },
+
+  markAdminTicketAsRead: async (ticketId: number): Promise<{ success: boolean; marked_count: number }> => {
+    const response = await apiClient.post(`/cabinet/admin/tickets/notifications/ticket/${ticketId}/read`)
+    return response.data
+  },
+}
+
+export default ticketNotificationsApi

src/components/TicketNotificationBell.tsx

@@ -0,0 +1,265 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { ticketNotificationsApi } from '../api/ticketNotifications'
+import { useAuthStore } from '../store/auth'
+import { useToast } from './Toast'
+import { useWebSocket, WSMessage } from '../hooks/useWebSocket'
+import type { TicketNotification } from '../types'
+
+const BellIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+  </svg>
+)
+
+const CheckIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+  </svg>
+)
+
+interface TicketNotificationBellProps {
+  isAdmin?: boolean
+}
+
+export default function TicketNotificationBell({ isAdmin = false }: TicketNotificationBellProps) {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const { isAuthenticated } = useAuthStore()
+  const { showToast } = useToast()
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  // Show toast for WebSocket notification
+  const showWSNotificationToast = useCallback((message: WSMessage) => {
+    const icon = message.type === 'ticket.new' ? '🎫' :
+                 message.type === 'ticket.admin_reply' ? '💬' : '📨'
+
+    const toastMessage = message.message ||
+      (message.type === 'ticket.new'
+        ? t('notifications.newTicket', 'New ticket: {{title}}', { title: message.title })
+        : t('notifications.newReply', 'New reply in ticket'))
+
+    showToast({
+      type: 'info',
+      message: toastMessage,
+      icon: <span className="text-lg">{icon}</span>,
+      onClick: () => {
+        navigate(isAdmin ? `/admin/tickets?ticket=${message.ticket_id}` : `/support?ticket=${message.ticket_id}`)
+      },
+      duration: 8000,
+    })
+  }, [showToast, navigate, isAdmin, t])
+
+  // Handle WebSocket message
+  const handleWSMessage = useCallback((message: WSMessage) => {
+    // Check if this notification is relevant for this user type
+    const isAdminNotification = message.type === 'ticket.new' || message.type === 'ticket.user_reply'
+    const isUserNotification = message.type === 'ticket.admin_reply'
+
+    if ((isAdmin && isAdminNotification) || (!isAdmin && isUserNotification)) {
+      // Show toast
+      showWSNotificationToast(message)
+
+      // Invalidate queries to refresh count and list
+      queryClient.invalidateQueries({
+        queryKey: isAdmin ? ['admin-ticket-notifications-count'] : ['ticket-notifications-count']
+      })
+      queryClient.invalidateQueries({
+        queryKey: isAdmin ? ['admin-ticket-notifications'] : ['ticket-notifications']
+      })
+    }
+  }, [isAdmin, showWSNotificationToast, queryClient])
+
+  // WebSocket connection
+  useWebSocket({
+    onMessage: handleWSMessage,
+  })
+
+  // Fetch unread count (with slower polling as fallback when WS disconnects)
+  const { data: unreadData } = useQuery({
+    queryKey: isAdmin ? ['admin-ticket-notifications-count'] : ['ticket-notifications-count'],
+    queryFn: isAdmin ? ticketNotificationsApi.getAdminUnreadCount : ticketNotificationsApi.getUnreadCount,
+    enabled: isAuthenticated,
+    refetchInterval: 60000, // Poll every 60 seconds as fallback
+    staleTime: 30000,
+  })
+
+  // Fetch notifications when dropdown is open
+  const { data: notificationsData, isLoading } = useQuery({
+    queryKey: isAdmin ? ['admin-ticket-notifications'] : ['ticket-notifications'],
+    queryFn: () => isAdmin
+      ? ticketNotificationsApi.getAdminNotifications(false, 10)
+      : ticketNotificationsApi.getNotifications(false, 10),
+    enabled: isAuthenticated && isOpen,
+    staleTime: 5000,
+  })
+
+  // Mark all as read mutation
+  const markAllReadMutation = useMutation({
+    mutationFn: isAdmin ? ticketNotificationsApi.markAllAdminAsRead : ticketNotificationsApi.markAllAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: isAdmin ? ['admin-ticket-notifications'] : ['ticket-notifications'] })
+      queryClient.invalidateQueries({ queryKey: isAdmin ? ['admin-ticket-notifications-count'] : ['ticket-notifications-count'] })
+    },
+  })
+
+  // Mark single as read mutation
+  const markReadMutation = useMutation({
+    mutationFn: isAdmin ? ticketNotificationsApi.markAdminAsRead : ticketNotificationsApi.markAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: isAdmin ? ['admin-ticket-notifications'] : ['ticket-notifications'] })
+      queryClient.invalidateQueries({ queryKey: isAdmin ? ['admin-ticket-notifications-count'] : ['ticket-notifications-count'] })
+    },
+  })
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const handleNotificationClick = (notification: TicketNotification) => {
+    if (!notification.is_read) {
+      markReadMutation.mutate(notification.id)
+    }
+    setIsOpen(false)
+    navigate(isAdmin ? `/admin/tickets?ticket=${notification.ticket_id}` : `/support?ticket=${notification.ticket_id}`)
+  }
+
+  const formatTime = (dateStr: string) => {
+    const date = new Date(dateStr)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    const diffHours = Math.floor(diffMins / 60)
+    const diffDays = Math.floor(diffHours / 24)
+
+    if (diffMins < 1) return t('notifications.justNow', 'Just now')
+    if (diffMins < 60) return t('notifications.minutesAgo', '{{count}} min ago', { count: diffMins })
+    if (diffHours < 24) return t('notifications.hoursAgo', '{{count}} h ago', { count: diffHours })
+    return t('notifications.daysAgo', '{{count}} d ago', { count: diffDays })
+  }
+
+  const getNotificationIcon = (type: string) => {
+    switch (type) {
+      case 'new_ticket':
+        return <span className="text-lg">🎫</span>
+      case 'admin_reply':
+        return <span className="text-lg">💬</span>
+      case 'user_reply':
+        return <span className="text-lg">📨</span>
+      default:
+        return <span className="text-lg">🔔</span>
+    }
+  }
+
+  const unreadCount = unreadData?.unread_count || 0
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Bell button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative p-2.5 rounded-xl transition-all duration-200 hover:bg-dark-800/50 text-dark-400 hover:text-dark-100"
+        title={t('notifications.ticketNotifications', 'Ticket notifications')}
+      >
+        <BellIcon />
+        {unreadCount > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] flex items-center justify-center text-xs font-bold text-white bg-error-500 rounded-full px-1">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-dark-900 border border-dark-700 rounded-xl shadow-xl overflow-hidden z-50 animate-fade-in">
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-dark-700 bg-dark-800/50">
+            <h3 className="text-sm font-semibold text-dark-100">
+              {t('notifications.ticketNotifications', 'Ticket Notifications')}
+            </h3>
+            {unreadCount > 0 && (
+              <button
+                onClick={() => markAllReadMutation.mutate()}
+                disabled={markAllReadMutation.isPending}
+                className="flex items-center gap-1 text-xs text-accent-400 hover:text-accent-300 disabled:opacity-50"
+              >
+                <CheckIcon />
+                {t('notifications.markAllRead', 'Mark all read')}
+              </button>
+            )}
+          </div>
+
+          {/* Notifications list */}
+          <div className="max-h-80 overflow-y-auto">
+            {isLoading ? (
+              <div className="p-4 text-center text-dark-500">
+                <div className="animate-spin w-6 h-6 border-2 border-accent-500 border-t-transparent rounded-full mx-auto"></div>
+              </div>
+            ) : notificationsData?.items && notificationsData.items.length > 0 ? (
+              notificationsData.items.map((notification) => (
+                <button
+                  key={notification.id}
+                  onClick={() => handleNotificationClick(notification)}
+                  className={`w-full text-left px-4 py-3 border-b border-dark-800 last:border-b-0 hover:bg-dark-800/50 transition-colors ${
+                    !notification.is_read ? 'bg-accent-500/5' : ''
+                  }`}
+                >
+                  <div className="flex gap-3">
+                    <div className="flex-shrink-0 mt-0.5">
+                      {getNotificationIcon(notification.notification_type)}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className={`text-sm ${!notification.is_read ? 'text-dark-100 font-medium' : 'text-dark-300'}`}>
+                        {notification.message}
+                      </p>
+                      <p className="text-xs text-dark-500 mt-1">
+                        {formatTime(notification.created_at)}
+                      </p>
+                    </div>
+                    {!notification.is_read && (
+                      <div className="flex-shrink-0">
+                        <span className="w-2 h-2 bg-accent-500 rounded-full block"></span>
+                      </div>
+                    )}
+                  </div>
+                </button>
+              ))
+            ) : (
+              <div className="p-8 text-center text-dark-500">
+                <BellIcon />
+                <p className="mt-2 text-sm">{t('notifications.noNotifications', 'No notifications')}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          {notificationsData?.items && notificationsData.items.length > 0 && (
+            <div className="px-4 py-2 border-t border-dark-700 bg-dark-800/30">
+              <button
+                onClick={() => {
+                  setIsOpen(false)
+                  navigate(isAdmin ? '/admin/tickets' : '/support')
+                }}
+                className="w-full text-center text-sm text-accent-400 hover:text-accent-300 py-1"
+              >
+                {t('notifications.viewAll', 'View all tickets')}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/Toast.tsx

@@ -0,0 +1,154 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface Toast {
+  id: string
+  message: string
+  type: 'info' | 'success' | 'warning' | 'error'
+  icon?: ReactNode
+  onClick?: () => void
+  duration?: number
+}
+
+interface ToastContextType {
+  showToast: (toast: Omit<Toast, 'id'>) => void
+  hideToast: (id: string) => void
+}
+
+const ToastContext = createContext<ToastContextType | null>(null)
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider')
+  }
+  return context
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const showToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).substring(2, 9)
+    const newToast = { ...toast, id }
+
+    setToasts(prev => [...prev, newToast])
+
+    // Auto remove after duration (default 6 seconds)
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id))
+    }, toast.duration || 6000)
+  }, [])
+
+  const hideToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }, [])
+
+  return (
+    <ToastContext.Provider value={{ showToast, hideToast }}>
+      {children}
+      <ToastContainer toasts={toasts} onClose={hideToast} />
+    </ToastContext.Provider>
+  )
+}
+
+function ToastContainer({ toasts, onClose }: { toasts: Toast[], onClose: (id: string) => void }) {
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+      {toasts.map(toast => (
+        <ToastItem key={toast.id} toast={toast} onClose={onClose} />
+      ))}
+    </div>
+  )
+}
+
+function ToastItem({ toast, onClose }: { toast: Toast, onClose: (id: string) => void }) {
+  const getBgColor = () => {
+    switch (toast.type) {
+      case 'success': return 'bg-success-500/95'
+      case 'warning': return 'bg-warning-500/95'
+      case 'error': return 'bg-error-500/95'
+      default: return 'bg-accent-500/95'
+    }
+  }
+
+  const handleClick = () => {
+    if (toast.onClick) {
+      toast.onClick()
+      onClose(toast.id)
+    }
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      className={`
+        ${getBgColor()}
+        ${toast.onClick ? 'cursor-pointer hover:scale-[1.02]' : ''}
+        pointer-events-auto
+        backdrop-blur-sm
+        text-white
+        px-4 py-3
+        rounded-xl
+        shadow-xl
+        flex items-start gap-3
+        animate-slide-in-right
+        transition-transform duration-200
+      `}
+    >
+      {toast.icon && (
+        <div className="flex-shrink-0 mt-0.5">
+          {toast.icon}
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium">{toast.message}</p>
+        {toast.onClick && (
+          <p className="text-xs opacity-80 mt-0.5">Click to view</p>
+        )}
+      </div>
+      <button
+        onClick={(e) => { e.stopPropagation(); onClose(toast.id) }}
+        className="flex-shrink-0 text-white/70 hover:text-white transition-colors"
+      >
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  )
+}
+
+// Hook for ticket notification toasts
+export function useTicketToast() {
+  const { showToast } = useToast()
+  const navigate = useNavigate()
+
+  const showNewReplyToast = useCallback((ticketId: number, message: string, isAdmin: boolean) => {
+    showToast({
+      type: 'info',
+      message: message || `New reply in ticket #${ticketId}`,
+      icon: <span className="text-lg">💬</span>,
+      onClick: () => {
+        navigate(isAdmin ? `/admin/tickets?ticket=${ticketId}` : `/support?ticket=${ticketId}`)
+      },
+      duration: 8000,
+    })
+  }, [showToast, navigate])
+
+  const showNewTicketToast = useCallback((ticketId: number, title: string) => {
+    showToast({
+      type: 'info',
+      message: `New ticket: ${title}`,
+      icon: <span className="text-lg">🎫</span>,
+      onClick: () => {
+        navigate(`/admin/tickets?ticket=${ticketId}`)
+      },
+      duration: 8000,
+    })
+  }, [showToast, navigate])
+
+  return { showNewReplyToast, showNewTicketToast }
+}

src/hooks/useWebSocket.ts

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useCallback, useState } from 'react'
+import { useAuthStore } from '../store/auth'
+
+export interface WSMessage {
+  type: string
+  ticket_id?: number
+  message?: string
+  title?: string
+  user_id?: number
+  is_admin?: boolean
+}
+
+interface UseWebSocketOptions {
+  onMessage?: (message: WSMessage) => void
+  onConnect?: () => void
+  onDisconnect?: () => void
+}
+
+export function useWebSocket(options: UseWebSocketOptions = {}) {
+  const { accessToken, isAuthenticated } = useAuthStore()
+  const wsRef = useRef<WebSocket | null>(null)
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const pingIntervalRef = useRef<NodeJS.Timeout | null>(null)
+  const [isConnected, setIsConnected] = useState(false)
+  const reconnectAttemptsRef = useRef(0)
+  const maxReconnectAttempts = 5
+  const optionsRef = useRef(options)
+
+  // Update options ref when they change
+  useEffect(() => {
+    optionsRef.current = options
+  }, [options])
+
+  const cleanup = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current)
+      reconnectTimeoutRef.current = null
+    }
+    if (pingIntervalRef.current) {
+      clearInterval(pingIntervalRef.current)
+      pingIntervalRef.current = null
+    }
+    if (wsRef.current) {
+      wsRef.current.close()
+      wsRef.current = null
+    }
+  }, [])
+
+  const connect = useCallback(() => {
+    if (!accessToken || !isAuthenticated) {
+      return
+    }
+
+    // Don't reconnect if already connected
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      return
+    }
+
+    cleanup()
+
+    // Build WebSocket URL
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    const host = import.meta.env.VITE_API_URL
+      ? new URL(import.meta.env.VITE_API_URL).host
+      : window.location.host
+    const wsUrl = `${protocol}//${host}/cabinet/ws?token=${accessToken}`
+
+    try {
+      const ws = new WebSocket(wsUrl)
+      wsRef.current = ws
+
+      ws.onopen = () => {
+        console.log('[WS] Connected')
+        setIsConnected(true)
+        reconnectAttemptsRef.current = 0
+        optionsRef.current.onConnect?.()
+
+        // Setup ping interval (every 25 seconds)
+        pingIntervalRef.current = setInterval(() => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'ping' }))
+          }
+        }, 25000)
+      }
+
+      ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data) as WSMessage
+
+          // Ignore pong messages
+          if (message.type === 'pong' || message.type === 'connected') {
+            return
+          }
+
+          optionsRef.current.onMessage?.(message)
+        } catch (e) {
+          console.error('[WS] Failed to parse message:', e)
+        }
+      }
+
+      ws.onclose = (event) => {
+        console.log('[WS] Disconnected:', event.code, event.reason)
+        setIsConnected(false)
+        optionsRef.current.onDisconnect?.()
+
+        if (pingIntervalRef.current) {
+          clearInterval(pingIntervalRef.current)
+          pingIntervalRef.current = null
+        }
+
+        // Attempt to reconnect if not closed intentionally
+        if (event.code !== 1000 && reconnectAttemptsRef.current < maxReconnectAttempts) {
+          const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000)
+          console.log(`[WS] Reconnecting in ${delay}ms (attempt ${reconnectAttemptsRef.current + 1})`)
+
+          reconnectTimeoutRef.current = setTimeout(() => {
+            reconnectAttemptsRef.current++
+            connect()
+          }, delay)
+        }
+      }
+
+      ws.onerror = (error) => {
+        console.error('[WS] Error:', error)
+      }
+    } catch (e) {
+      console.error('[WS] Failed to connect:', e)
+    }
+  }, [accessToken, isAuthenticated, cleanup])
+
+  // Connect when authenticated
+  useEffect(() => {
+    if (isAuthenticated && accessToken) {
+      connect()
+    } else {
+      cleanup()
+      setIsConnected(false)
+    }
+
+    return cleanup
+  }, [isAuthenticated, accessToken, connect, cleanup])
+
+  return { isConnected }
+}