merge: giải quyết xung đột env và dashboard giữa 2 máy

backend/.env

@@ -0,0 +1 @@
+../.env

frontend/src/App.tsx

@@ -11,7 +11,116 @@ import { AdminDashboard } from './pages/AdminDashboard';
 import { ShareJourneyPage } from './pages/ShareJourneyPage';
 import { TourNavigationPage } from './pages/TourNavigationPage';
 import { ConfirmProvider } from './hooks/useConfirm';
-import { NotificationProvider } from './hooks/useNotification';
+import { NotificationProvider, useNotification } from './hooks/useNotification';
+import { io } from 'socket.io-client';
+
+interface GlobalNotificationListenerProps {
+  user: any;
+  currentPage: string;
+  currentTourId: string | null;
+}
+
+const GlobalNotificationListener: React.FC<GlobalNotificationListenerProps> = ({ user, currentPage, currentTourId }) => {
+  const notify = useNotification();
+
+  // Request browser Notification permission once on mount
+  useEffect(() => {
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!user?.id) return;
+
+    const socketInstance = io();
+
+    socketInstance.on('connect', () => {
+      console.log('[WS] Global notification socket connected:', socketInstance.id);
+      socketInstance.emit('joinUser', user.id);
+    });
+
+    socketInstance.on('tourMessageNotification', (data: any) => {
+      // Dispatch custom window event
+      window.dispatchEvent(new CustomEvent('app:tourMessageNotification', { detail: data }));
+
+      // Check if user is actively viewing this specific tour chat
+      const isViewingThisTourChat = currentPage === 'tourDetail' && currentTourId === data.tourId && (window as any).activeTourChatTab;
+
+      if (!isViewingThisTourChat) {
+        notify({
+          title: `Tin nhắn mới trong tour "${data.tourTitle}"`,
+          message: `${data.senderName}: "${data.content.substring(0, 30)}${data.content.length > 30 ? '...' : ''}"`,
+          type: 'success'
+        });
+
+        // Show push notification on desktop browser
+        if ('Notification' in window && Notification.permission === 'granted') {
+          try {
+            new Notification(`Tin nhắn mới trong tour "${data.tourTitle}"`, {
+              body: `${data.senderName}: ${data.content}`,
+              icon: '/favicon.ico'
+            });
+          } catch (e) {
+            console.error('System Notification error:', e);
+          }
+        }
+      }
+    });
+
+    socketInstance.on('messageReceived', (message: any) => {
+      // Dispatch custom window event
+      window.dispatchEvent(new CustomEvent('app:messageReceived', { detail: message }));
+
+      // Check if user is actively chatting with the sender
+      const isChattingWithSender = currentPage === 'dashboard' && (window as any).activeChatUserId === message.senderId;
+
+      if (!isChattingWithSender) {
+        notify({
+          title: 'Tin nhắn mới',
+          message: `${message.sender?.name || 'Ai đó'} gửi: "${message.content.substring(0, 30)}${message.content.length > 30 ? '...' : ''}"`,
+          type: 'success'
+        });
+
+        // Show push notification on desktop browser
+        if ('Notification' in window && Notification.permission === 'granted') {
+          try {
+            new Notification(`Tin nhắn mới từ ${message.sender?.name || 'Thành viên'}`, {
+              body: message.content,
+              icon: '/favicon.ico'
+            });
+          } catch (e) {
+            console.error('System Notification error:', e);
+          }
+        }
+      }
+    });
+
+    socketInstance.on('connectionAccepted', (data: any) => {
+      window.dispatchEvent(new CustomEvent('app:connectionAccepted', { detail: data }));
+      notify({
+        title: 'Kết nối mới',
+        message: `${data.acceptedByName} đã chấp nhận yêu cầu kết nối của bạn.`,
+        type: 'success'
+      });
+    });
+
+    socketInstance.on('joinRequestAccepted', (data: any) => {
+      window.dispatchEvent(new CustomEvent('app:joinRequestAccepted', { detail: data }));
+      notify({
+        title: 'Yêu cầu tham gia được duyệt',
+        message: `Yêu cầu tham gia hành trình "${data.tourTitle}" của bạn đã được chấp nhận!`,
+        type: 'success'
+      });
+    });
+
+    return () => {
+      socketInstance.disconnect();
+    };
+  }, [user?.id, currentPage, currentTourId]);
+
+  return null;
+};
 
 function App() {
   const params = new URLSearchParams(window.location.search);
@@ -223,7 +332,14 @@ function App() {
   return (
     <ConfirmProvider>
       <NotificationProvider>
-      {(() => {
+        {user && (
+          <GlobalNotificationListener
+            user={user}
+            currentPage={currentPage}
+            currentTourId={currentTourId}
+          />
+        )}
+        {(() => {
         if (currentPage === 'admin') {
           return (
             <AdminDashboard

frontend/src/components/TourChat.tsx

@@ -601,7 +601,7 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
       )}
 
       {/* Locked Chat Input Footer */}
-      <div className="locked-chat-input-footer !flex-shrink-0 !w-full !border-t border-gray-200 bg-white !z-40" style={{ paddingBottom: 'env(safe-area-inset-bottom, 12px)' }}>
+      <div className="locked-chat-input-footer relative !flex-shrink-0 !w-full !border-t border-gray-200 bg-white !z-40" style={{ paddingBottom: 'env(safe-area-inset-bottom, 12px)' }}>
         {/* Mention list dropdown */}
         {showMentionList && filteredParticipants.length > 0 && (
           <div 
@@ -612,7 +612,14 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
               <button
                 key={member.id}
                 type="button"
-                onClick={() => insertMention(member)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  insertMention(member);
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  insertMention(member);
+                }}
                 className={`px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition-colors ${
                   index === mentionIndex 
                     ? 'bg-blue-50 text-blue-700' 

frontend/src/pages/MemberDashboard.tsx

@@ -91,7 +91,14 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
   const [chatMessages, setChatMessages] = useState<any[]>([]);
   const [newMessage, setNewMessage] = useState('');
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const socketRef = useRef<Socket | null>(null);
+
+
+  useEffect(() => {
+    (window as any).activeChatUserId = activeChatUser?.id;
+    return () => {
+      (window as any).activeChatUserId = undefined;
+    };
+  }, [activeChatUser]);
 
   const [unreadChatSenders, setUnreadChatSenders] = useState<string[]>([]);
   const [unreadTourSenders, setUnreadTourSenders] = useState<string[]>([]);
@@ -334,26 +341,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // Request browser Notification permission
-  useEffect(() => {
-    if ('Notification' in window && Notification.permission === 'default') {
-      Notification.requestPermission();
-    }
-  }, []);
 
-  const showSystemNotification = (title: string, body: string) => {
-    if (muteNotificationsRef.current) return;
-    if ('Notification' in window && Notification.permission === 'granted') {
-      try {
-        new Notification(title, {
-          body,
-          icon: '/favicon.ico'
-        });
-      } catch (e) {
-        console.error('System Notification error:', e);
-      }
-    }
-  };
 
   const isMemberOfMyTours = (senderId: string) => {
     if (!publicTours) return false;
@@ -536,7 +524,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
     muteNotificationsRef.current = muteNotifications;
   });
 
-  // Socket connection for realtime messaging
+  // Socket connection for realtime messaging - changed to listen to global socket events
   useEffect(() => {
     if (!user?.id) return;
 
@@ -556,68 +544,37 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
       if (activeChatUser && (message.senderId === activeChatUser.id || message.receiverId === activeChatUser.id)) {
         setChatMessages(prev => [...prev, message]);
       } else {
-        if (!muteNotificationsRef.current) {
-          // Show notification toast for new message
-          notify({
-            title: 'Tin nhắn mới',
-            message: `${message.sender?.name || 'Ai đó'} gửi: "${message.content.substring(0, 30)}${message.content.length > 30 ? '...' : ''}"`,
-            type: 'success'
-          });
-          // Show push notification
-          showSystemNotification(
-            `Tin nhắn mới từ ${message.sender?.name || 'Thành viên'}`,
-            message.content
-          );
-        }
         // Add to unread states
         setUnreadChatSenders(prev => prev.includes(message.senderId) ? prev : [...prev, message.senderId]);
         if (isMemberOfMyToursRef.current(message.senderId)) {
           setUnreadTourSenders(prev => prev.includes(message.senderId) ? prev : [...prev, message.senderId]);
         }
       }
-    });
+    };
 
-    socket.on('connectionAccepted', (data: any) => {
+    const handleConnectionAccepted = () => {
-      if (!muteNotificationsRef.current) {
-        notify({
-          title: 'Kết nối mới',
-          message: `${data.acceptedByName} đã chấp nhận yêu cầu kết nối của bạn.`,
-          type: 'success'
-        });
-      }
       fetchConnectionsRef.current();
-    });
+    };
-
-    socket.on('tourMessageNotification', (data: any) => {
-      if (!muteNotificationsRef.current) {
-        notify({
-          title: `Tin nhắn mới trong tour "${data.tourTitle}"`,
-          message: `${data.senderName}: "${data.content.substring(0, 30)}${data.content.length > 30 ? '...' : ''}"`,
-          type: 'success'
-        });
-
-        showSystemNotification(
-          `Tin nhắn mới trong tour "${data.tourTitle}"`,
-          `${data.senderName}: ${data.content}`
-        );
-      }
 
+    const handleTourMessageNotification = (e: Event) => {
+      const data = (e as CustomEvent).detail;
       setUnreadTourChats(prev => prev.includes(data.tourId) ? prev : [...prev, data.tourId]);
-    });
+    };
 
-    socket.on('joinRequestAccepted', (data: any) => {
+    const handleJoinRequestAccepted = () => {
-      if (!muteNotificationsRef.current) {
-        notify({
-          title: 'Yêu cầu tham gia được duyệt',
-          message: `Yêu cầu tham gia hành trình "${data.tourTitle}" của bạn đã được chấp nhận!`,
-          type: 'success'
-        });
-      }
       fetchPublicToursRef.current();
-    });
+    };
+
+    window.addEventListener('app:messageReceived', handleMessageReceived);
+    window.addEventListener('app:connectionAccepted', handleConnectionAccepted);
+    window.addEventListener('app:tourMessageNotification', handleTourMessageNotification);
+    window.addEventListener('app:joinRequestAccepted', handleJoinRequestAccepted);
 
     return () => {
-      socket.disconnect();
+      window.removeEventListener('app:messageReceived', handleMessageReceived);
+      window.removeEventListener('app:connectionAccepted', handleConnectionAccepted);
+      window.removeEventListener('app:tourMessageNotification', handleTourMessageNotification);
+      window.removeEventListener('app:joinRequestAccepted', handleJoinRequestAccepted);
     };
   }, [user?.id, activeChatUser]);
 
@@ -881,7 +838,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
   };
 
   // Helper function to render a user's initials avatar
-const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
+  const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
     const initials = name
       ? name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase()
       : 'U';
@@ -930,11 +887,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
                   type: 'info'
                 });
               }}
-              className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${
+              className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${muteNotifications
-                muteNotifications 
                   ? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
                   : 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
-              }`}
+                }`}
               title={muteNotifications ? "Bật thông báo đẩy" : "Tắt thông báo đẩy"}
             >
               {muteNotifications ? (
@@ -998,11 +954,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
         <div className="flex-1 p-4 flex flex-col gap-3">
           <button
             onClick={() => handleSelectTab('tours')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'tours'
-              activeTab === 'tours' 
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-850/80 border-slate-700/80'
-            }`}
+              }`}
           >
             <div className="flex items-center gap-3">
               <Compass className="w-5 h-5 text-indigo-400" />
@@ -1026,11 +981,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
 
           <button
             onClick={() => handleSelectTab('photos')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'photos'
-              activeTab === 'photos' 
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-850/80 border-slate-700/80'
-            }`}
+              }`}
           >
             <div className="flex items-center gap-3">
               <ImageIcon className="w-5 h-5 text-indigo-400" />
@@ -1052,11 +1006,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
         <div className="p-4 flex flex-col gap-3">
           <button
             onClick={() => handleSelectTab('connections')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'connections'
-              activeTab === 'connections' 
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-900/60 border-slate-800/60'
-            }`}
+              }`}
           >
             <div className="flex items-center gap-3">
               <Users className="w-5 h-5 text-indigo-400" />
@@ -1080,11 +1033,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
 
           <button
             onClick={() => handleSelectTab('chats')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'chats'
-              activeTab === 'chats' 
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-900/60 border-slate-800/60'
-            }`}
+              }`}
           >
             <div className="flex items-center gap-3">
               <MessageSquare className="w-5 h-5 text-indigo-400" />
@@ -1123,18 +1075,17 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
     );
   }
 
-return (
+  return (
     <div className="h-auto min-h-dvh w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white flex flex-col md:flex-row p-3 sm:p-6 gap-4 sm:gap-6 overflow-x-hidden">
 
       {/* Background Glow */}
       <div className="hidden md:block absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
       <div className="hidden md:block absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
 
-      <div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${
+      <div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${isMobile
-        isMobile 
           ? 'flex-col h-full bg-slate-950'
           : 'max-w-7xl h-[90vh] bg-slate-900/30 border border-slate-800/80 shadow-2xl rounded-3xl backdrop-blur-md'
-      }`}>
+        }`}>
 
         {/* Mobile Detail Header: Only on Mobile detail mode */}
         {showMobileHeader && (
@@ -1187,11 +1138,10 @@ return (
                       type: 'info'
                     });
                   }}
-                  className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${
+                  className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${muteNotifications
-                    muteNotifications 
                       ? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
                       : 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
-                  }`}
+                    }`}
                   title={muteNotifications ? "Bật thông báo đẩy" : "Tắt thông báo đẩy"}
                 >
                   {muteNotifications ? (
@@ -1253,11 +1203,10 @@ return (
             <nav className="flex-1 px-3 py-6 flex flex-col gap-1.5 overflow-y-auto">
               <button
                 onClick={() => handleSelectTab('tours')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'tours'
-                  activeTab === 'tours' 
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
-                }`}
+                  }`}
               >
                 <div className="flex items-center gap-3">
                   <Compass className="w-4 h-4" />
@@ -1273,11 +1222,10 @@ return (
 
               <button
                 onClick={() => handleSelectTab('photos')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'photos'
-                  activeTab === 'photos' 
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
-                }`}
+                  }`}
               >
                 <div className="flex items-center gap-3">
                   <ImageIcon className="w-4 h-4" />
@@ -1293,11 +1241,10 @@ return (
 
               <button
                 onClick={() => handleSelectTab('chats')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'chats'
-                  activeTab === 'chats' 
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
-                }`}
+                  }`}
               >
                 <div className="flex items-center gap-3">
                   <MessageSquare className="w-4 h-4" />
@@ -1312,11 +1259,10 @@ return (
 
               <button
                 onClick={() => handleSelectTab('connections')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'connections'
-                  activeTab === 'connections' 
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
-                }`}
+                  }`}
               >
                 <div className="flex items-center gap-3">
                   <Users className="w-4 h-4" />
@@ -1360,11 +1306,10 @@ return (
           )}
 
           {/* Tab content renders here */}
-          <div className={`flex-1 relative z-10 flex flex-col ${
+          <div className={`flex-1 relative z-10 flex flex-col ${activeTab === 'chats' || activeTab === 'photos'
-            activeTab === 'chats' || activeTab === 'photos' 
               ? 'overflow-hidden p-0'
               : 'p-4 md:p-8 overflow-y-auto'
-          }`}>
+            }`}>
 
             {/* TAB 1: MY TOURS */}
             {activeTab === 'tours' && (
@@ -1407,7 +1352,7 @@ return (
 
                       const participant = tour.participants?.find((p: any) => p.userId === user?.id);
                       const roleLabel = participant?.role === 'OWNER' ? 'Chủ tour' :
-                                        participant?.role === 'MANAGER' ? 'Quản lý' : 'Thành viên';
+                        participant?.role === 'MANAGER' ? 'Quản lý' : 'Thành viên';
 
                       return (
                         <div
@@ -1498,13 +1443,13 @@ return (
                                     <span>Chụp ảnh</span>
                                   </button>
 
-                                   <button
+                                  <button
-                                     onClick={() => handleNavigateToItinerary(tour)}
+                                    onClick={() => handleNavigateToItinerary(tour)}
-                                     className="flex-1 py-2 px-2 bg-slate-900 hover:bg-slate-800 text-slate-850 hover:text-white rounded-xl text-xs font-bold transition-all border border-slate-800 hover:border-slate-700 flex items-center justify-center gap-1"
+                                    className="flex-1 py-2 px-2 bg-slate-900 hover:bg-slate-800 text-slate-850 hover:text-white rounded-xl text-xs font-bold transition-all border border-slate-800 hover:border-slate-700 flex items-center justify-center gap-1"
-                                   >
+                                  >
-                                     <span>Chi tiết hành trình</span>
+                                    <span>Chi tiết hành trình</span>
-                                     <ChevronRight className="w-3.5 h-3.5" />
+                                    <ChevronRight className="w-3.5 h-3.5" />
-                                   </button>
+                                  </button>
                                 </div>
 
                                 {/* Emergency Share Button - moved to bottom */}
@@ -1556,31 +1501,28 @@ return (
                 <div className="flex gap-2 border-b border-slate-800/60 pb-3 mb-6">
                   <button
                     onClick={() => setConnectionSubTab('list')}
-                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${
+                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${connectionSubTab === 'list'
-                      connectionSubTab === 'list' 
                         ? 'bg-indigo-600 text-white shadow-md'
                         : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
-                    }`}
+                      }`}
                   >
                     Danh sách kết nối
                   </button>
                   <button
                     onClick={() => setConnectionSubTab('search')}
-                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
+                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${connectionSubTab === 'search'
-                      connectionSubTab === 'search' 
                         ? 'bg-indigo-600 text-white shadow-md'
                         : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
-                    }`}
+                      }`}
                   >
                     <Search className="w-3.5 h-3.5" /> Tìm thành viên mới
                   </button>
                   <button
                     onClick={() => setConnectionSubTab('pending')}
-                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${
+                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${connectionSubTab === 'pending'
-                      connectionSubTab === 'pending' 
                         ? 'bg-indigo-600 text-white shadow-md'
                         : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
-                    }`}
+                      }`}
                   >
                     Yêu cầu chờ duyệt
                     {receivedRequests.length > 0 && (
@@ -1629,11 +1571,10 @@ return (
                                   <h4 className="text-sm font-bold text-white truncate">{connUser.name}</h4>
                                   <p className="text-[10px] text-slate-400 truncate">{connUser.email}</p>
                                   <div className="mt-1.5 flex items-center gap-1.5">
-                                    <span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${
+                                    <span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${conn.type === 'FAMILY'
-                                      conn.type === 'FAMILY' 
                                         ? 'bg-rose-950/40 text-rose-300 border-rose-900/50'
                                         : 'bg-indigo-950/40 text-indigo-300 border-indigo-900/50'
-                                    }`}>
+                                      }`}>
                                       {conn.type === 'FAMILY' ? t('familyGroup') : t('friends')}
                                     </span>
                                   </div>
@@ -1737,11 +1678,10 @@ return (
 
                                 <div>
                                   {statusText ? (
-                                    <span className={`px-3 py-1 rounded-lg text-xs font-bold border ${
+                                    <span className={`px-3 py-1 rounded-lg text-xs font-bold border ${statusText === t('friends') || statusText === t('familyGroup')
-                                      statusText === t('friends') || statusText === t('familyGroup')
                                         ? 'bg-emerald-950/30 border-emerald-900/50 text-emerald-300'
                                         : 'bg-slate-800/80 border-slate-700 text-slate-400'
-                                    }`}>
+                                      }`}>
                                       {statusText}
                                     </span>
                                   ) : (
@@ -1876,9 +1816,9 @@ return (
               </div>
             )}
 
-{/* TAB 4: REALTIME CHAT */}
+            {/* TAB 4: REALTIME CHAT */}
-             {activeTab === 'chats' && (
+            {activeTab === 'chats' && (
-               <div className="flex flex-col h-[100dvh] md:h-auto w-full bg-slate-900/40 border-0 md:border border-slate-800/80 md:rounded-3xl overflow-hidden flex animate-in fade-in slide-in-from-bottom-2 duration-300">
+              <div className="flex flex-col h-[100dvh] md:h-auto w-full bg-slate-900/40 border-0 md:border border-slate-800/80 md:rounded-3xl overflow-hidden flex animate-in fade-in slide-in-from-bottom-2 duration-300">
 
                 {/* Chats List sidebar: show if not mobile OR if mobile and no active chat user */}
                 {(!isMobile || !activeChatUser) && (
@@ -1901,11 +1841,10 @@ return (
                             <button
                               key={conn.id}
                               onClick={() => handleSelectChatUser(connUser)}
-                              className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${
+                              className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${isActive
-                                isActive 
                                   ? 'bg-indigo-650 text-white shadow-md'
                                   : 'text-slate-350 hover:bg-slate-850/40 hover:text-slate-100'
-                              }`}
+                                }`}
                             >
                               {connUser.avatar ? (
                                 <img
@@ -1989,11 +1928,10 @@ return (
                                   key={msg.id}
                                   className={`flex flex-col max-w-[70%] ${isMe ? 'self-end items-end' : 'self-start items-start'}`}
                                 >
-                                  <div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${
+                                  <div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${isMe
-                                    isMe 
                                       ? 'bg-indigo-650 text-white rounded-br-none shadow-md shadow-indigo-950/20'
                                       : 'bg-slate-800 text-slate-200 rounded-bl-none border border-slate-700/60'
-                                  }`}>
+                                    }`}>
                                     {msg.attachmentUrl && (
                                       <div className="relative rounded-lg overflow-hidden border border-black/10 max-w-xs group/img">
                                         <img
@@ -2017,11 +1955,10 @@ return (
                                         href={`https://www.google.com/maps/search/?api=1&query=${msg.latitude},${msg.longitude}`}
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${
+                                        className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${isMe
-                                          isMe 
                                             ? 'bg-indigo-750 border-indigo-750/30 text-indigo-100 hover:bg-indigo-800'
                                             : 'bg-slate-900/60 border-slate-800/80 text-slate-200 hover:bg-slate-900'
-                                        }`}
+                                          }`}
                                       >
                                         <MapPin className="w-3.5 h-3.5 text-rose-500 shrink-0 animate-bounce" />
                                         <div className="flex flex-col text-left">
@@ -2109,9 +2046,8 @@ return (
                             type="button"
                             onClick={handleGetLocation}
                             disabled={isLocating}
-                            className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${
+                            className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${isLocating ? 'animate-pulse' : ''
-                              isLocating ? 'animate-pulse' : ''
+                              }`}
-                            }`}
                             title="Chia sẻ vị trí GPS hiện tại"
                           >
                             {isLocating ? (
@@ -2153,128 +2089,128 @@ return (
               </div>
             )}
 
-      {/* Emergency Share Configuration Modal */}
+            {/* Emergency Share Configuration Modal */}
-      {sharingTour && (
+            {sharingTour && (
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300">
+              <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300">
-          <div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[32px] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
+                <div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[32px] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
-            {/* Modal Header */}
+                  {/* Modal Header */}
-            <div className="p-6 border-b border-slate-800/80 flex items-center justify-between">
+                  <div className="p-6 border-b border-slate-800/80 flex items-center justify-between">
-              <div className="flex items-center gap-3 text-rose-500">
+                    <div className="flex items-center gap-3 text-rose-500">
-                <ShieldAlert className="w-6 h-6 animate-pulse" />
+                      <ShieldAlert className="w-6 h-6 animate-pulse" />
-                <h3 className="text-lg font-black uppercase tracking-tight text-white">{t('emergencyShare')}</h3>
+                      <h3 className="text-lg font-black uppercase tracking-tight text-white">{t('emergencyShare')}</h3>
-              </div>
-              <button
-                onClick={() => setSharingTour(null)}
-                className="p-2 hover:bg-slate-800 rounded-xl text-slate-400 hover:text-white transition-all active:scale-95"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* Modal Body */}
-            <div className="p-6 space-y-6">
-              <div>
-                <h4 className="text-sm font-bold text-white mb-1">{sharingTour.title}</h4>
-                <p className="text-xs text-slate-450 leading-relaxed">{t('emergencyShareTooltip')}</p>
-              </div>
-
-              {loadingShare ? (
-                <div className="py-8 flex flex-col items-center justify-center gap-2">
-                  <Loader2 className="w-8 h-8 text-rose-500 animate-spin" />
-                  <span className="text-xs text-slate-500 font-bold">{t('loading')}</span>
-                </div>
-              ) : (
-                <>
-                  {/* Share Activation Toggle */}
-                  <div className="bg-slate-950/40 border border-slate-800/60 p-4 rounded-2xl flex items-center justify-between">
-                    <div>
-                      <span className="text-xs font-bold text-slate-300">Kích hoạt đường dẫn cứu hộ</span>
                     </div>
-                    {shareStatus && (
+                    <button
-                      <label className="relative inline-flex items-center cursor-pointer">
+                      onClick={() => setSharingTour(null)}
-                        <input
+                      className="p-2 hover:bg-slate-800 rounded-xl text-slate-400 hover:text-white transition-all active:scale-95"
-                          type="checkbox"
+                    >
-                          checked={shareStatus.isEnabled}
+                      <X className="w-5 h-5" />
-                          onChange={(e) => handleToggleShare(e.target.checked)}
+                    </button>
-                          className="sr-only peer"
+                  </div>
-                        />
+
-                        <div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
+                  {/* Modal Body */}
-                      </label>
+                  <div className="p-6 space-y-6">
+                    <div>
+                      <h4 className="text-sm font-bold text-white mb-1">{sharingTour.title}</h4>
+                      <p className="text-xs text-slate-450 leading-relaxed">{t('emergencyShareTooltip')}</p>
+                    </div>
+
+                    {loadingShare ? (
+                      <div className="py-8 flex flex-col items-center justify-center gap-2">
+                        <Loader2 className="w-8 h-8 text-rose-500 animate-spin" />
+                        <span className="text-xs text-slate-500 font-bold">{t('loading')}</span>
+                      </div>
+                    ) : (
+                      <>
+                        {/* Share Activation Toggle */}
+                        <div className="bg-slate-950/40 border border-slate-800/60 p-4 rounded-2xl flex items-center justify-between">
+                          <div>
+                            <span className="text-xs font-bold text-slate-300">Kích hoạt đường dẫn cứu hộ</span>
+                          </div>
+                          {shareStatus && (
+                            <label className="relative inline-flex items-center cursor-pointer">
+                              <input
+                                type="checkbox"
+                                checked={shareStatus.isEnabled}
+                                onChange={(e) => handleToggleShare(e.target.checked)}
+                                className="sr-only peer"
+                              />
+                              <div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
+                            </label>
+                          )}
+                        </div>
+
+                        {shareStatus?.isEnabled && (
+                          <>
+                            {/* Configuration: Language and Theme selectors */}
+                            <div className="grid grid-cols-2 gap-4">
+                              <div className="space-y-2">
+                                <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('languageSelect')}</label>
+                                <select
+                                  value={lang}
+                                  onChange={(e) => changeLanguage(e.target.value as any)}
+                                  className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
+                                >
+                                  <option value="vi">Tiếng Việt</option>
+                                  <option value="en">English</option>
+                                  <option value="zh">中文</option>
+                                </select>
+                              </div>
+
+                              <div className="space-y-2">
+                                <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('themeSelect')}</label>
+                                <select
+                                  value={theme}
+                                  onChange={(e) => changeTheme(e.target.value as any)}
+                                  className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
+                                >
+                                  <option value="light">{t('themeLight')}</option>
+                                  <option value="dark">{t('themeDark')}</option>
+                                  <option value="system">{t('themeSystem')}</option>
+                                </select>
+                              </div>
+                            </div>
+
+                            {/* Shareable Link Input with Copy button */}
+                            <div className="bg-rose-950/10 border border-rose-950/20 p-4 rounded-2xl space-y-2">
+                              <div className="text-[10px] font-black text-rose-400 uppercase tracking-widest">Đường dẫn khẩn cấp:</div>
+                              <div className="flex items-center gap-2">
+                                <input
+                                  type="text"
+                                  readOnly
+                                  value={`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`}
+                                  className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-xs text-slate-200 select-all outline-none"
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    navigator.clipboard.writeText(`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`);
+                                    notify({ title: 'Thành công', message: 'Đã sao chép liên kết!', type: 'success' });
+                                  }}
+                                  className="bg-rose-600 hover:bg-rose-700 text-white font-bold px-4 py-2.5 rounded-xl text-xs transition-all active:scale-95 shrink-0"
+                                >
+                                  {t('copyShareLink')}
+                                </button>
+                              </div>
+                            </div>
+                          </>
+                        )}
+                      </>
                     )}
                   </div>
 
-                  {shareStatus?.isEnabled && (
+                  {/* Modal Footer */}
-                    <>
+                  <div className="p-6 bg-slate-950/20 border-t border-slate-800/80 flex justify-end">
-                      {/* Configuration: Language and Theme selectors */}
+                    <button
-                      <div className="grid grid-cols-2 gap-4">
+                      type="button"
-                        <div className="space-y-2">
+                      onClick={() => setSharingTour(null)}
-                          <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('languageSelect')}</label>
+                      className="py-2.5 px-6 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs transition-all active:scale-95"
-                          <select
+                    >
-                            value={lang}
+                      Đóng
-                            onChange={(e) => changeLanguage(e.target.value as any)}
+                    </button>
-                            className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
+                  </div>
-                          >
+                </div>
-                            <option value="vi">Tiếng Việt</option>
+              </div>
-                            <option value="en">English</option>
+            )}
-                            <option value="zh">中文</option>
-                          </select>
-                        </div>
-
-                        <div className="space-y-2">
-                          <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('themeSelect')}</label>
-                          <select
-                            value={theme}
-                            onChange={(e) => changeTheme(e.target.value as any)}
-                            className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
-                          >
-                            <option value="light">{t('themeLight')}</option>
-                            <option value="dark">{t('themeDark')}</option>
-                            <option value="system">{t('themeSystem')}</option>
-                          </select>
-                        </div>
-                      </div>
-
-                      {/* Shareable Link Input with Copy button */}
-                      <div className="bg-rose-950/10 border border-rose-950/20 p-4 rounded-2xl space-y-2">
-                        <div className="text-[10px] font-black text-rose-400 uppercase tracking-widest">Đường dẫn khẩn cấp:</div>
-                        <div className="flex items-center gap-2">
-                          <input
-                            type="text"
-                            readOnly
-                            value={`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`}
-                            className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-xs text-slate-200 select-all outline-none"
-                          />
-                          <button
-                            type="button"
-                            onClick={() => {
-                              navigator.clipboard.writeText(`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`);
-                              notify({ title: 'Thành công', message: 'Đã sao chép liên kết!', type: 'success' });
-                            }}
-                            className="bg-rose-600 hover:bg-rose-700 text-white font-bold px-4 py-2.5 rounded-xl text-xs transition-all active:scale-95 shrink-0"
-                          >
-                            {t('copyShareLink')}
-                          </button>
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </>
-              )}
-            </div>
-
-            {/* Modal Footer */}
-            <div className="p-6 bg-slate-950/20 border-t border-slate-800/80 flex justify-end">
-              <button
-                type="button"
-                onClick={() => setSharingTour(null)}
-                className="py-2.5 px-6 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs transition-all active:scale-95"
-              >
-                Đóng
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
 
           </div>
         </main>

frontend/src/pages/TourDetailPage.tsx

@@ -399,6 +399,13 @@ export const TourDetailPage = ({
   const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
   const [isAddPhotoOpen, setIsAddPhotoOpen] = useState(false);
 
+  useEffect(() => {
+    (window as any).activeTourChatTab = activeTab === 'chat';
+    return () => {
+      (window as any).activeTourChatTab = false;
+    };
+  }, [activeTab]);
+
   const [isRatingModalOpen, setIsRatingModalOpen] = useState(false);
   const [ratingTargetUser, setRatingTargetUser] = useState<any>(null);
   const [ratingScores, setRatingScores] = useState({