start working on the frontend side

frontend/src/hooks/useWebSocket.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react'
+import { useAuthStore } from '@/store/auth'
+
+export interface WebSocketEvent {
+  type: 'alert' | 'task' | 'metric' | 'event'
+  data: any
+  timestamp: string
+}
+
+export function useWebSocket(url: string) {
+  const [isConnected, setIsConnected] = useState(false)
+  const [lastMessage, setLastMessage] = useState<WebSocketEvent | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
+  const { token } = useAuthStore()
+
+  useEffect(() => {
+    if (!token) return
+
+    const connect = () => {
+      try {
+        // Convert HTTP URL to WebSocket URL
+        const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://')
+        const ws = new WebSocket(`${wsUrl}?token=${token}`)
+
+        ws.onopen = () => {
+          setIsConnected(true)
+          console.log('WebSocket connected')
+        }
+
+        ws.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data)
+            setLastMessage(data)
+          } catch (error) {
+            console.error('Failed to parse WebSocket message:', error)
+          }
+        }
+
+        ws.onerror = (error) => {
+          console.error('WebSocket error:', error)
+        }
+
+        ws.onclose = () => {
+          setIsConnected(false)
+          console.log('WebSocket disconnected')
+          
+          // Reconnect after 3 seconds
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect()
+          }, 3000)
+        }
+
+        wsRef.current = ws
+      } catch (error) {
+        console.error('Failed to create WebSocket:', error)
+      }
+    }
+
+    connect()
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current)
+      }
+      if (wsRef.current) {
+        wsRef.current.close()
+      }
+    }
+  }, [url, token])
+
+  return { isConnected, lastMessage }
+}
+