fix sidebar of companies

2026-06-02 02:03:16 -04:00
parent 29886c3397
commit b5a974ee14
2 changed files with 101 additions and 12 deletions
@@ -15,6 +15,23 @@ function computeInitials(name: string): string {
  return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
 }

+function resolveSocketOrigin(): string | null {
+  if (typeof window === 'undefined') return null
+
+  const configuredApiUrl = process.env.NEXT_PUBLIC_API_URL
+  if (configuredApiUrl) {
+    try {
+      return new URL(configuredApiUrl, window.location.origin).origin
+    } catch {}
+  }
+
+  if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+    return 'http://localhost:4000'
+  }
+
+  return window.location.origin
+}
+
 export default function TopBar() {
  const { dict } = useDashboardI18n()
  const pathname = usePathname()
@@ -75,15 +92,31 @@ export default function TopBar() {
    const token = window.localStorage.getItem(EMPLOYEE_TOKEN_KEY)
    if (!token) return

-    const socketUrl = (process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1').replace('/api/v1', '')
-    const socket = io(socketUrl, { auth: { token }, transports: ['websocket'] })
+    const socketOrigin = resolveSocketOrigin()
+    if (!socketOrigin) return

-    socket.on('notification', () => {
-      setUnreadCount((prev) => prev + 1)
-      window.dispatchEvent(new Event('notifications:updated'))
+    const socket = io(socketOrigin, {
+      autoConnect: false,
+      auth: { token },
+      transports: ['polling', 'websocket'],
    })

-    return () => { socket.disconnect() }
+    const handleNotification = () => {
+      setUnreadCount((prev) => prev + 1)
+      window.dispatchEvent(new Event('notifications:updated'))
+    }
+
+    socket.on('notification', handleNotification)
+
+    const connectTimer = window.setTimeout(() => {
+      socket.connect()
+    }, 0)
+
+    return () => {
+      window.clearTimeout(connectTimer)
+      socket.off('notification', handleNotification)
+      socket.disconnect()
+    }
  }, [])

  useEffect(() => {
@@ -177,7 +210,7 @@ export default function TopBar() {
  }

  return (
-    <header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/78 px-6 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/76">
+    <header className="relative z-[70] flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/78 px-6 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/76">
      <h1 className="text-lg font-semibold text-blue-950 dark:text-stone-50">{title}</h1>

      <div className="flex items-center gap-3">
@@ -195,7 +228,7 @@ export default function TopBar() {
          </button>

          {showNotifs ? (
-            <div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-[1.75rem] border border-stone-200/80 bg-white/95 p-4 shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+            <div className="absolute right-0 top-full z-[80] mt-2 w-80 rounded-[1.75rem] border border-stone-200/80 bg-white/95 p-4 shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
              <div className="mb-2 flex items-center justify-between gap-2">
                <p className="text-sm font-medium text-blue-950 dark:text-stone-100">{dict.notifications}</p>
                <button