bugs: lỗi khi người dùng link để tham gia tour nhưng không xuất hiện trong danh sách thành viên

2026-06-20 20:59:01 +07:00
parent 52706cab7d
commit 36157bd53b
18 changed files with 1419 additions and 188 deletions
@@ -4,6 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <title>Travel Planner</title>
  </head>
  <body>
@@ -5,6 +5,7 @@ import { TourDetailPage } from './pages/TourDetailPage';
 import SignupPage from './pages/SignupPage';
 import { MyPhotosPage } from './pages/MyPhotosPage';
 import { MyNotePage } from './pages/MyNotePage';
+import { JoinTourPage } from './pages/JoinTourPage';
 import { useTourStore } from './store/useTourStore';
 import { ConfirmProvider } from './hooks/useConfirm';
 import { NotificationProvider } from './hooks/useNotification';
@@ -14,7 +15,9 @@ function App() {
  const viewTourId = params.get('viewTour');

  const [user, setUser] = useState<any>(null);
-  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos' | 'notes'>(viewTourId ? 'tourDetail' : 'landing');
+  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos' | 'notes' | 'joinTour'>(
+    viewTourId ? 'tourDetail' : (window.location.pathname === '/join-tour' || params.has('token') ? 'joinTour' : 'landing')
+  );
  const [currentTourId, setCurrentTourId] = useState<string | null>(viewTourId);
  const [isPublicTourView, setIsPublicTourView] = useState(!!viewTourId);

@@ -25,32 +28,45 @@ function App() {
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const viewTourId = params.get('viewTour');
+    const isJoinTour = window.location.pathname === '/join-tour' || params.has('token');

-    if (viewTourId) {
-      // Không gọi replaceState ngay để tránh mất ID khi component re-render hoặc refresh
-    } else {
-      // Kiểm tra đăng nhập bình thường nếu không có tham số viewTour
-      const token = localStorage.getItem('token');
-      const storedUser = localStorage.getItem('user');
-      if (token && storedUser) {
-        try {
-          setUser(JSON.parse(storedUser));
-          setCurrentPage('explore'); // Chuyển đến bản đồ khám phá nếu đã đăng nhập
-        } catch (e) {
-          console.error("Lỗi khi phân tích dữ liệu người dùng từ localStorage", e);
-          localStorage.removeItem('token');
-          localStorage.removeItem('user');
-          setCurrentPage('landing'); // Quay về trang Landing nếu dữ liệu lỗi
-        }
-      } else {
-        setCurrentPage('landing'); // Quay về trang Landing nếu chưa đăng nhập
+    // Khôi phục thông tin đăng nhập nếu có
+    const token = localStorage.getItem('token');
+    const storedUser = localStorage.getItem('user');
+    let loggedInUser = null;
+    if (token && storedUser) {
+      try {
+        loggedInUser = JSON.parse(storedUser);
+        setUser(loggedInUser);
+      } catch (e) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
      }
    }
-  }, []); // Chỉ chạy một lần khi component mount
+
+    if (isJoinTour) {
+      setCurrentPage('joinTour');
+    } else if (viewTourId) {
+      setCurrentPage('tourDetail');
+    } else {
+      if (loggedInUser) {
+        setCurrentPage('explore');
+      } else {
+        setCurrentPage('landing');
+      }
+    }
+  }, []);

  const handleLoginSuccess = (loggedInUser: any) => {
    setUser(loggedInUser);
-    setCurrentPage('explore');
+    
+    // Nếu có pending token, ta vẫn giữ ở trang joinTour để nó tự động thực hiện join
+    const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+    if (pendingInviteToken) {
+      setCurrentPage('joinTour');
+    } else {
+      setCurrentPage('explore');
+    }
  };

  const handleLogout = () => {
@@ -78,11 +94,22 @@ function App() {
  };

  const handleBackFromSignup = () => {
-    setCurrentPage('landing');
+    const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+    if (pendingInviteToken) {
+      setCurrentPage('joinTour');
+    } else {
+      setCurrentPage('landing');
+    }
  };

  const handleSignupSuccess = () => {
-    setCurrentPage('landing'); // Quay về trang Landing sau khi đăng ký thành công
+    // Sau khi đăng ký, ta có thể tự động đăng nhập hoặc quay lại landing/joinTour
+    const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+    if (pendingInviteToken) {
+      setCurrentPage('joinTour');
+    } else {
+      setCurrentPage('landing');
+    }
  };

  return (
@@ -127,6 +154,24 @@ function App() {
          return <SignupPage onBack={handleBackFromSignup} onSuccess={handleSignupSuccess} />;
        }

+        if (currentPage === 'joinTour') {
+          return (
+            <JoinTourPage
+              onLoginSuccess={handleLoginSuccess}
+              onGoToSignup={() => setCurrentPage('signup')}
+              onViewTour={(tourId) => {
+                setCurrentTourId(tourId);
+                setIsPublicTourView(false);
+                setCurrentPage('tourDetail');
+              }}
+              onGoToHome={() => {
+                const loggedIn = !!localStorage.getItem('token');
+                setCurrentPage(loggedIn ? 'explore' : 'landing');
+              }}
+            />
+          );
+        }
+
        return <LandingPage onContinue={() => setCurrentPage('explore')} onGoToSignup={() => setCurrentPage('signup')} onGoToMap={() => setCurrentPage('explore')} onLoginSuccess={handleLoginSuccess} isInitialSetup={false} />;
      })()}
      </NotificationProvider>
@@ -16,6 +16,7 @@ interface AddMemberModalProps {
 }

 export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole, isPublicView }) => {
+  const [activeTab, setActiveTab] = useState<'search' | 'email'>('search');
  const [query, setQuery] = useState('');
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
@@ -26,6 +27,13 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
  const [submitError, setSubmitError] = useState('');
  const [actionLoading, setActionLoading] = useState<string | null>(null);

+  // Trạng thái cho tab mời qua email
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteRole, setInviteRole] = useState<'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY'>('MEMBER');
+  const [inviteLoading, setInviteLoading] = useState(false);
+  const [inviteError, setInviteError] = useState('');
+  const [inviteSuccess, setInviteSuccess] = useState('');
+
  const confirm = useConfirm();
  const notify = useNotification();

@@ -34,6 +42,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
  const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
  
  const canCreateDirectly = !userRole || userRole === 'OWNER' || userRole === 'MANAGER';
+  const canInviteByEmail = userRole === 'OWNER' || userRole === 'MANAGER';

  const handleManualAdd = async () => {
    const name = query.trim();
@@ -79,14 +88,44 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
    }
  };

+  const handleSendInvite = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inviteEmail.trim()) return;
+    setInviteLoading(true);
+    setInviteError('');
+    setInviteSuccess('');
+    try {
+      const res = await fetch(`/api/v1/tours/${tourId}/invitations`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`,
+        },
+        body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.message || 'Gửi lời mời thất bại');
+      }
+      setInviteSuccess(`Lời mời đã được gửi thành công đến ${inviteEmail}!`);
+      setInviteEmail('');
+      notify({ title: 'Thành công', message: `Lời mời đã gửi tới ${inviteEmail}`, type: 'success' });
+      await onMemberAdded?.();
+    } catch (err: any) {
+      setInviteError(err.message || 'Thao tác thất bại');
+    } finally {
+      setInviteLoading(false);
+    }
+  };
+
  useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || activeTab !== 'search') return;
    const delayDebounceFn = setTimeout(() => {
      fetchUsers();
    }, 300);

    return () => clearTimeout(delayDebounceFn);
-  }, [query, isOpen]);
+  }, [query, isOpen, activeTab]);

  useEffect(() => {
    if (!isOpen) {
@@ -95,6 +134,11 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
      setRole('MEMBER');
      setFetchError('');
      setSubmitError('');
+      setInviteEmail('');
+      setInviteRole('MEMBER');
+      setInviteError('');
+      setInviteSuccess('');
+      setActiveTab('search');
    }
  }, [isOpen]);

@@ -176,10 +220,10 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
        <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
          <div>
            <h2 className="text-lg font-bold text-gray-900 flex items-center gap-2">
-              <UserPlus className="w-5 h-5 text-blue-600" /> {canCreateDirectly ? 'Thêm thành viên' : 'Mời tham gia tour'}
+              <UserPlus className="w-5 h-5 text-blue-600" /> {canCreateDirectly ? 'Thành viên hành trình' : 'Mời tham gia tour'}
            </h2>
            <p className="text-xs text-gray-500">
-              {canCreateDirectly ? 'Chọn người dùng và phân quyền cho tour này.' : 'Mời sẽ được gửi và chờ người quản lý phê duyệt.'}
+              {canCreateDirectly ? 'Quản lý, thêm thành viên và mời người khác tham gia.' : 'Mời sẽ được gửi và chờ người quản lý phê duyệt.'}
            </p>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors">
@@ -187,7 +231,33 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
          </button>
        </div>

-        <div className="p-5 space-y-4">
+        {canInviteByEmail && (
+          <div className="flex border-b border-gray-100 bg-gray-50/30">
+            <button
+              onClick={() => setActiveTab('search')}
+              className={`flex-1 py-3 text-center text-sm font-bold border-b-2 transition-all ${
+                activeTab === 'search'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              Tìm thành viên
+            </button>
+            <button
+              onClick={() => setActiveTab('email')}
+              className={`flex-1 py-3 text-center text-sm font-bold border-b-2 transition-all ${
+                activeTab === 'email'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              Mời qua Email
+            </button>
+          </div>
+        )}
+
+        <div className="p-5 space-y-4 overflow-y-auto flex-1">
+          {/* Danh sách thành viên hiện tại */}
          <div>
            <p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.filter(p => p.user || p.displayName).length})</p>
            <div className="flex flex-wrap gap-3">
@@ -230,6 +300,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
            </div>
          </div>

+          {/* Danh sách chờ duyệt */}
          {joinRequests.length > 0 && (
            <div>
              <p className="text-[11px] font-bold text-gray-500 mb-2 flex items-center gap-1">
@@ -269,128 +340,190 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
            </div>
          )}

-          {canCreateDirectly && (
-            <div className="space-y-1.5">
-              <label className="text-xs font-bold text-gray-700 ml-1">Phân quyền</label>
-              <select
-                className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm"
-                value={role}
-                onChange={(e) => setRole(e.target.value as any)}
-              >
-                <option value="OWNER">OWNER</option>
-                <option value="MANAGER">MANAGER</option>
-                <option value="MEMBER">MEMBER</option>
-                <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE</option>
-                <option value="VIEWER_ONLY">VIEWER_ONLY</option>
-              </select>
-            </div>
-          )}
+          <hr className="border-gray-100" />

-          <div className="space-y-2">
-            <div className="relative mb-2">
-              <input
-                type="text"
-                placeholder="Tìm kiếm theo tên hoặc địa chỉ email..."
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                className="w-full pl-10 pr-10 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm font-bold text-gray-800"
-              />
-              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500" />
-              {query && (
+          {activeTab === 'search' ? (
+            <div className="space-y-4">
+              {canCreateDirectly && (
+                <div className="space-y-1.5">
+                  <label className="text-xs font-bold text-gray-700 ml-1">Phân quyền khi thêm</label>
+                  <select
+                    className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm font-bold text-gray-800"
+                    value={role}
+                    onChange={(e) => setRole(e.target.value as any)}
+                  >
+                    <option value="OWNER">OWNER</option>
+                    <option value="MANAGER">MANAGER</option>
+                    <option value="MEMBER">MEMBER</option>
+                    <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE</option>
+                    <option value="VIEWER_ONLY">VIEWER_ONLY</option>
+                  </select>
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <div className="relative mb-2">
+                  <input
+                    type="text"
+                    placeholder="Tìm kiếm theo tên hoặc địa chỉ email..."
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    className="w-full pl-10 pr-10 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm font-bold text-gray-800"
+                  />
+                  <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500" />
+                  {query && (
+                    <button
+                      type="button"
+                      onClick={() => setQuery('')}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-gray-200 rounded-full text-gray-400 transition-colors"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  )}
+                </div>
+
+                {fetchError && (
+                  <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
+                    {fetchError}
+                  </div>
+                )}
+                {submitError && (
+                  <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
+                    {submitError}
+                  </div>
+                )}
+                {loading ? (
+                  <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-600" /></div>
+                ) : (
+                  <div className="space-y-2 max-h-[30vh] overflow-y-auto pr-1">
+                    {query.trim() && canCreateDirectly && (
+                      <button
+                        type="button"
+                        onClick={handleManualAdd}
+                        disabled={submitting}
+                        className="w-full flex items-center gap-3 p-3 rounded-2xl border border-dashed border-blue-300 hover:border-blue-400 bg-blue-50/20 text-blue-700 transition-all text-left mb-2"
+                      >
+                        <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
+                          +
+                        </div>
+                        <div className="flex-1 text-left">
+                          <div className="text-sm font-bold">Thêm thành viên thủ công</div>
+                          <div className="text-[11px] text-gray-500">Thêm "{query.trim()}" trực tiếp vào danh sách thành viên</div>
+                        </div>
+                        {submitting ? (
+                          <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
+                        ) : (
+                          <span className="px-2.5 py-1 bg-blue-600 text-white rounded-xl text-xs font-bold transition-all">Thêm</span>
+                        )}
+                      </button>
+                    )}
+                    {visibleUsers.map((u) => {
+                      const isSelected = selectedUser === u.id;
+                      return (
+                        <button
+                          key={u.id}
+                          onClick={() => setSelectedUser(u.id)}
+                          disabled={requestUserIds.has(u.id)}
+                          className={`w-full flex items-center gap-3 p-3 rounded-2xl border transition-all ${
+                            isSelected ? 'border-blue-500 bg-blue-50/60' : 'border-gray-100 hover:border-blue-200'
+                          } ${requestUserIds.has(u.id) ? 'opacity-60' : ''}`}
+                        >
+                          <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
+                            {u.name?.charAt(0) || '?'}
+                          </div>
+                          <div className="flex-1 text-left">
+                            <div className="text-sm font-bold text-gray-900">{u.name || 'Chưa đặt tên'}</div>
+                            <div className="text-[11px] text-gray-500">{u.email}</div>
+                          </div>
+                          <div className="flex items-center gap-1 text-[10px] font-bold text-gray-500">
+                            {isSelected && <Shield className="w-3 h-3 text-blue-600" />}
+                          </div>
+                        </button>
+                      );
+                    })}
+                    {!loading && visibleUsers.length === 0 && (
+                      <div className="text-center py-8 text-sm text-gray-500">Không tìm thấy người dùng phù hợp</div>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="flex justify-end gap-2 pt-2">
+                <button onClick={onClose} className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
+                  Hủy
+                </button>
+                <button
+                  disabled={!selectedUser || submitting}
+                  onClick={handleAdd}
+                  className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all"
+                >
+                  {submitting ? 'Đang xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <form onSubmit={handleSendInvite} className="space-y-4">
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-gray-700 ml-1">Email người nhận</label>
+                <input
+                  required
+                  type="email"
+                  placeholder="nhap.email@example.com"
+                  value={inviteEmail}
+                  onChange={(e) => setInviteEmail(e.target.value)}
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm font-bold text-gray-800"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-gray-700 ml-1">Vai trò trong Tour</label>
+                <select
+                  className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm font-bold text-gray-800"
+                  value={inviteRole}
+                  onChange={(e) => setInviteRole(e.target.value as any)}
+                >
+                  <option value="MEMBER">MEMBER (Thành viên tài chính)</option>
+                  <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE (Thành viên phi tài chính)</option>
+                  <option value="MANAGER">MANAGER (Đồng quản trị viên)</option>
+                  <option value="VIEWER_ONLY">VIEWER_ONLY (Chỉ xem thông tin)</option>
+                </select>
+              </div>
+
+              {inviteError && (
+                <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
+                  {inviteError}
+                </div>
+              )}
+              {inviteSuccess && (
+                <div className="p-3 bg-green-50 text-green-700 rounded-xl text-xs font-bold border border-green-100">
+                  {inviteSuccess}
+                </div>
+              )}
+
+              <div className="flex justify-end gap-2 pt-2">
                <button
                  type="button"
-                  onClick={() => setQuery('')}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-gray-200 rounded-full text-gray-400 transition-colors"
+                  onClick={onClose}
+                  className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors"
                >
-                  <X className="w-4 h-4" />
+                  Đóng
+                </button>
+                <button
+                  type="submit"
+                  disabled={inviteLoading || !inviteEmail}
+                  className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all flex items-center gap-2"
+                >
+                  {inviteLoading ? (
+                    <>
+                      Đang gửi...
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    </>
+                  ) : (
+                    'Gửi thư mời'
+                  )}
                </button>
-              )}
-            </div>
-
-            {fetchError && (
-              <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
-                {fetchError}
              </div>
-            )}
-            {submitError && (
-              <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
-                {submitError}
-              </div>
-            )}
-            {loading ? (
-              <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-600" /></div>
-            ) : (
-              <div className="space-y-2 max-h-[40vh] overflow-y-auto pr-1">
-                {query.trim() && canCreateDirectly && (
-                  <button
-                    type="button"
-                    onClick={handleManualAdd}
-                    disabled={submitting}
-                    className="w-full flex items-center gap-3 p-3 rounded-2xl border border-dashed border-blue-300 hover:border-blue-400 bg-blue-50/20 text-blue-700 transition-all text-left mb-2"
-                  >
-                    <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
-                      +
-                    </div>
-                    <div className="flex-1 text-left">
-                      <div className="text-sm font-bold">Thêm thành viên thủ công</div>
-                      <div className="text-[11px] text-gray-500">Thêm "{query.trim()}" trực tiếp vào danh sách thành viên</div>
-                    </div>
-                    {submitting ? (
-                      <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
-                    ) : (
-                      <span className="px-2.5 py-1 bg-blue-600 text-white rounded-xl text-xs font-bold transition-all">Thêm</span>
-                    )}
-                  </button>
-                )}
-                {visibleUsers.map((u) => {
-                  const isSelected = selectedUser === u.id;
-                  return (
-                    <button
-                      key={u.id}
-                      onClick={() => setSelectedUser(u.id)}
-                      disabled={requestUserIds.has(u.id)}
-                      className={`w-full flex items-center gap-3 p-3 rounded-2xl border transition-all ${
-                        isSelected ? 'border-blue-500 bg-blue-50/60' : 'border-gray-100 hover:border-blue-200'
-                      } ${requestUserIds.has(u.id) ? 'opacity-60' : ''}`}
-                    >
-                      <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
-                        {u.name?.charAt(0) || '?'}
-                      </div>
-                      <div className="flex-1 text-left">
-                        <div className="text-sm font-bold text-gray-900">{u.name || 'Chưa đặt tên'}</div>
-                        <div className="text-[11px] text-gray-500">{u.email}</div>
-                        <div className="text-[11px] text-gray-400">{u.phone || ''} {u.address ? `• ${u.address}` : ''}</div>
-                      </div>
-                      <div className="flex items-center gap-1 text-[10px] font-bold text-gray-500">
-                        {u.isAdmin ? (
-                          <span className="px-2 py-1 bg-purple-50 text-purple-600 rounded-md border border-purple-100">ADMIN</span>
-                        ) : (
-                          <span className="px-2 py-1 bg-gray-50 text-gray-500 rounded-md border border-gray-100">USER</span>
-                        )}
-                        {isSelected && <Shield className="w-3 h-3 text-blue-600" />}
-                      </div>
-                    </button>
-                  );
-                })}
-                {!loading && visibleUsers.length === 0 && (
-                  <div className="text-center py-8 text-sm text-gray-500">Không tìm thấy người dùng phù hợp</div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="p-5 border-t border-gray-100 flex justify-end gap-2">
-          <button onClick={onClose} className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
-            Hủy
-          </button>
-          <button
-            disabled={!selectedUser || submitting}
-            onClick={handleAdd}
-            className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all"
-          >
-            {submitting ? 'Đang xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời'}
-          </button>
+            </form>
+          )}
        </div>
      </div>
    </div>
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { X, Mail, Lock, ArrowRight, Loader2 } from 'lucide-react';

 interface LoginModalProps {
@@ -14,6 +14,79 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

+  const handleGoogleLogin = async (googleResponse: any) => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/v1/auth/google`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ credential: googleResponse.credential }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Đăng nhập Google thất bại');
+      }
+
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+
+      // Tự động gia nhập tour nếu có pendingInviteToken
+      const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+      if (pendingInviteToken) {
+        try {
+          const joinRes = await fetch(`/api/v1/tours/join-by-token`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${data.access_token}`,
+            },
+            body: JSON.stringify({ token: pendingInviteToken }),
+          });
+          if (joinRes.ok) {
+            localStorage.removeItem('pendingInviteToken');
+          }
+        } catch (e) {
+          console.error('Lỗi tự động gia nhập:', e);
+        }
+      }
+
+      if (onLoginSuccess) {
+        onLoginSuccess(data.user);
+      }
+      onClose();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const timer = setTimeout(() => {
+      if (typeof window !== 'undefined' && (window as any).google) {
+        try {
+          (window as any).google.accounts.id.initialize({
+            client_id: (import.meta as any).env.VITE_GOOGLE_CLIENT_ID || '864264639911-dummyid.apps.googleusercontent.com',
+            callback: handleGoogleLogin,
+          });
+          
+          (window as any).google.accounts.id.renderButton(
+            document.getElementById('google-signin-btn-login'),
+            { theme: 'outline', size: 'large', width: '380' }
+          );
+        } catch (e) {
+          console.error('Lỗi khởi tạo Google Sign-in:', e);
+        }
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+
  if (!isOpen) return null;

  const handleSubmit = async (e: React.FormEvent) => {
@@ -37,6 +110,26 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
      localStorage.setItem('token', data.access_token);
      localStorage.setItem('user', JSON.stringify(data.user));
      
+      // Tự động gia nhập tour nếu có pendingInviteToken
+      const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+      if (pendingInviteToken) {
+        try {
+          const joinRes = await fetch(`/api/v1/tours/join-by-token`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${data.access_token}`,
+            },
+            body: JSON.stringify({ token: pendingInviteToken }),
+          });
+          if (joinRes.ok) {
+            localStorage.removeItem('pendingInviteToken');
+          }
+        } catch (e) {
+          console.error('Lỗi tự động gia nhập:', e);
+        }
+      }
+
      if (onLoginSuccess) {
        onLoginSuccess(data.user);
      }
@@ -122,6 +215,15 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
            </button>
          </form>

+          <div className="relative my-6 flex items-center justify-center">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-200"></div>
+            </div>
+            <span className="relative px-3 bg-white text-xs font-bold text-gray-400 uppercase">Hoặc</span>
+          </div>
+
+          <div id="google-signin-btn-login" className="w-full flex justify-center"></div>
+
          <div className="mt-10 pt-8 border-t border-gray-100 text-center">
            <p className="text-gray-500">
              Chưa có tài khoản?{' '}
@@ -5,7 +5,7 @@ const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerCluste
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useTourStore } from '@/store/useTourStore';
-import { X, Navigation, Image as ImageIcon, LogOut, Settings, Share2, Filter, MapPin, Loader2 } from 'lucide-react';
+import { X, Navigation, Image as ImageIcon, LogOut, Settings, Share2, Filter, MapPin, Loader2, UserPlus, Clock } from 'lucide-react';
 import { UserManagementModal } from '@/components/UserManagementModal';
 import { useNotification } from '@/hooks/useNotification';
 import { CreateTourModal } from '../components/CreateTourModal';
@@ -174,7 +174,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
  }, [publicTours]);

  // State cho menu chuột phải chia sẻ
-  const [shareMenu, setShareMenu] = useState<{ x: number, y: number, id: string, title: string, canShare: boolean } | null>(null);
+  const [shareMenu, setShareMenu] = useState<{ x: number, y: number, id: string, title: string, canShare: boolean, isParticipant: boolean, hasPendingRequest: boolean } | null>(null);

  const handleShare = (id: string, title: string) => {
    const shareUrl = `${window.location.origin}?viewTour=${id}`;
@@ -211,6 +211,35 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
    setShareMenu(null);
  };

+  const handleRequestJoin = async (tourId: string) => {
+    setShareMenu(null);
+    try {
+      const res = await fetch(`/api/v1/tours/${tourId}/join-requests`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`
+        }
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.message || 'Gửi yêu cầu tham gia thất bại.');
+      }
+      notify({
+        title: 'Thành công',
+        message: 'Đã gửi yêu cầu tham gia tour. Vui lòng chờ chủ tour duyệt.',
+        type: 'success'
+      });
+      fetchPublicTours();
+    } catch (err: any) {
+      notify({
+        title: 'Lỗi',
+        message: err.message || 'Không thể gửi yêu cầu tham gia.',
+        type: 'error'
+      });
+    }
+  };
+
  const handleSelectSuggestion = (s: any) => {
    if (s.type === 'tour') {
      onViewTour(s.id);
@@ -471,9 +500,12 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
                  eventHandlers={{
                    click: () => onViewTour(tour.id),
                    contextmenu: (e) => {
-                      // Kiểm tra quyền chia sẻ (OWNER, MANAGER, MEMBER)
-                      const role = tour.participants?.[0]?.role;
-                      const canShare = ['OWNER', 'MANAGER', 'MEMBER'].includes(role);
+                      const currentUserId = user?.id;
+                      const myParticipant = tour.participants?.find((p: any) => p.userId === currentUserId);
+                      const isParticipant = !!myParticipant;
+                      const myRole = myParticipant?.role;
+                      const canShare = isParticipant && ['OWNER', 'MANAGER', 'MEMBER'].includes(myRole);
+                      const hasPendingRequest = tour.joinRequests && tour.joinRequests.length > 0;

                      // Hiển thị menu tại vị trí chuột
                      setShareMenu({
@@ -481,7 +513,9 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
                        y: e.containerPoint.y,
                        id: tour.id,
                        title: tour.title,
-                        canShare
+                        canShare,
+                        isParticipant,
+                        hasPendingRequest
                      });
                    }
                  }}
@@ -575,15 +609,31 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
          style={{ top: shareMenu.y, left: shareMenu.x }}
          onClick={(e) => e.stopPropagation()}
        >
-          {shareMenu.canShare ? (
-            <button 
-              onClick={() => handleShare(shareMenu.id, shareMenu.title)}
-              className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-bold text-gray-700 flex items-center gap-2 transition-colors"
+          {shareMenu.isParticipant ? (
+            shareMenu.canShare ? (
+              <button 
+                onClick={() => handleShare(shareMenu.id, shareMenu.title)}
+                className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-bold text-gray-700 flex items-center gap-2 transition-colors"
+              >
+                <Share2 className="w-4 h-4 text-blue-600" /> Sao chép liên kết
+              </button>
+            ) : (
+              <div className="px-4 py-2 text-xs text-gray-400 italic font-bold">Bạn đã gia nhập tour này</div>
+            )
+          ) : shareMenu.hasPendingRequest ? (
+            <button
+              disabled
+              className="w-full text-left px-4 py-2 text-sm font-bold text-gray-400 flex items-center gap-2 cursor-not-allowed bg-gray-50/50"
            >
-              <Share2 className="w-4 h-4 text-blue-600" /> Sao chép liên kết
+              <Clock className="w-4 h-4 text-gray-400" /> Đang chờ duyệt...
            </button>
          ) : (
-            <div className="px-4 py-2 text-xs text-gray-400 italic">Bạn không có quyền chia sẻ tour này</div>
+            <button 
+              onClick={() => handleRequestJoin(shareMenu.id)}
+              className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-bold text-blue-700 flex items-center gap-2 transition-colors"
+            >
+              <UserPlus className="w-4 h-4 text-blue-600" /> Yêu cầu tham gia Tour
+            </button>
          )}
        </div>
      )}
@@ -0,0 +1,184 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Compass, Loader2, LogIn, UserPlus, AlertCircle, CheckCircle } from 'lucide-react';
+import { LoginModal } from '../components/LoginModal';
+
+interface JoinTourPageProps {
+  onLoginSuccess: (user: any) => void;
+  onGoToSignup: () => void;
+  onViewTour: (tourId: string) => void;
+  onGoToHome: () => void;
+}
+
+export const JoinTourPage: React.FC<JoinTourPageProps> = ({ onLoginSuccess, onGoToSignup, onViewTour, onGoToHome }) => {
+  const [inviteToken, setInviteToken] = useState<string | null>(null);
+  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [successMsg, setSuccessMsg] = useState('');
+  const [tourId, setTourId] = useState<string | null>(null);
+
+  // Guard chống React StrictMode chạy effect 2 lần trong dev mode
+  const hasJoinedRef = useRef(false);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get('token');
+    setInviteToken(token);
+
+    if (token) {
+      localStorage.setItem('pendingInviteToken', token);
+      
+      // Nếu đã đăng nhập, tự động thực hiện join
+      const systemToken = localStorage.getItem('token');
+      if (systemToken && !hasJoinedRef.current) {
+        hasJoinedRef.current = true;
+        handleJoinTour(token, systemToken);
+      }
+    } else {
+      setError('Mã lời mời không tồn tại hoặc không hợp lệ.');
+    }
+  }, []);
+
+  const handleJoinTour = async (token: string, authToken: string) => {
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fetch('/api/v1/tours/join-by-token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${authToken}`
+        },
+        body: JSON.stringify({ token })
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.message || 'Không thể gia nhập tour.');
+      }
+
+      setSuccessMsg(data.message || 'Bạn đã tham gia tour thành công!');
+      setTourId(data.tourId);
+      localStorage.removeItem('pendingInviteToken');
+    } catch (err: any) {
+      setError(err.message || 'Đã xảy ra lỗi.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSuccessLogin = (user: any) => {
+    onLoginSuccess(user);
+    const token = localStorage.getItem('token');
+    const pendingToken = localStorage.getItem('pendingInviteToken') || inviteToken;
+    if (token && pendingToken) {
+      handleJoinTour(pendingToken, token);
+    }
+  };
+
+  const isLoggedIn = !!localStorage.getItem('token');
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 font-sans">
+      <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-3xl shadow-2xl text-center border border-gray-100">
+        
+        {/* Logo/Icon */}
+        <div className="flex justify-center">
+          <div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 shadow-md">
+            <Compass className="w-10 h-10 animate-spin-slow" />
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="space-y-4 py-6">
+            <Loader2 className="w-12 h-12 animate-spin text-blue-600 mx-auto" />
+            <h2 className="text-xl font-bold text-gray-900">Đang xử lý tham gia hành trình...</h2>
+            <p className="text-sm text-gray-500">Vui lòng đợi trong giây lát.</p>
+          </div>
+        ) : error ? (
+          <div className="space-y-4 py-4">
+            <div className="w-12 h-12 bg-red-50 text-red-500 rounded-full flex items-center justify-center mx-auto">
+              <AlertCircle className="w-6 h-6" />
+            </div>
+            <h2 className="text-xl font-bold text-gray-900">Gia nhập thất bại</h2>
+            <p className="text-sm text-red-600 bg-red-50 p-4 rounded-2xl font-semibold border border-red-100">{error}</p>
+            <div className="pt-4 flex flex-col gap-2">
+              {isLoggedIn ? (
+                <button
+                  onClick={onGoToHome}
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 rounded-2xl transition-all shadow-lg"
+                >
+                  Về trang khám phá
+                </button>
+              ) : (
+                <>
+                  <button
+                    onClick={() => setIsLoginOpen(true)}
+                    className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 rounded-2xl transition-all flex items-center justify-center gap-2"
+                  >
+                    <LogIn className="w-5 h-5" /> Thử đăng nhập lại
+                  </button>
+                  <button
+                    onClick={onGoToHome}
+                    className="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-3.5 rounded-2xl transition-all"
+                  >
+                    Về trang chủ
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        ) : successMsg ? (
+          <div className="space-y-4 py-4">
+            <div className="w-12 h-12 bg-green-50 text-green-500 rounded-full flex items-center justify-center mx-auto">
+              <CheckCircle className="w-6 h-6" />
+            </div>
+            <h2 className="text-xl font-bold text-gray-900">Thành công!</h2>
+            <p className="text-sm text-green-700 bg-green-50 p-4 rounded-2xl font-semibold border border-green-100">{successMsg}</p>
+            <div className="pt-4">
+              <button
+                onClick={() => {
+                  if (tourId) onViewTour(tourId);
+                  else onGoToHome();
+                }}
+                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 rounded-2xl transition-all shadow-lg"
+              >
+                Xem chi tiết Tour
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <h2 className="text-2xl font-black text-gray-900 tracking-tight">Chào mừng bạn!</h2>
+            <p className="text-gray-600 text-sm leading-relaxed">
+              Bạn nhận được một lời mời tham gia hành trình du lịch. Vui lòng đăng nhập hoặc tạo tài khoản để có thể join và xem các hoạt động, chi phí của tour.
+            </p>
+            
+            <div className="space-y-3 pt-4">
+              <button
+                onClick={() => setIsLoginOpen(true)}
+                className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-2xl shadow-lg transition-all active:scale-[0.98]"
+              >
+                <LogIn className="w-5 h-5" /> Đăng nhập hệ thống
+              </button>
+              <button
+                onClick={onGoToSignup}
+                className="w-full flex items-center justify-center gap-2 bg-gray-50 hover:bg-gray-100 text-gray-700 font-bold py-4 rounded-2xl border border-gray-200 transition-all active:scale-[0.98]"
+              >
+                <UserPlus className="w-5 h-5" /> Đăng ký tài khoản mới
+              </button>
+            </div>
+          </div>
+        )}
+
+      </div>
+
+      <LoginModal
+        isOpen={isLoginOpen}
+        onClose={() => setIsLoginOpen(false)}
+        onSwitchToSignup={onGoToSignup}
+        onLoginSuccess={handleSuccessLogin}
+      />
+    </div>
+  );
+};
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { User, Mail, Lock, ArrowRight, ChevronLeft, Phone, MapPin, ShieldCheck } from 'lucide-react';

 interface SignupPageProps {
@@ -20,6 +20,71 @@ const SignupPage: React.FC<SignupPageProps> = ({ onBack, onSuccess }) => {
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

+  const handleGoogleLogin = async (googleResponse: any) => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/v1/auth/google`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ credential: googleResponse.credential }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Đăng ký bằng Google thất bại');
+      }
+
+      localStorage.removeItem('guest_token');
+      localStorage.removeItem('guest_user');
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+
+      // Tự động gia nhập tour nếu có pendingInviteToken
+      const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+      if (pendingInviteToken) {
+        await fetch(`/api/v1/tours/join-by-token`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${data.access_token}`,
+          },
+          body: JSON.stringify({ token: pendingInviteToken }),
+        }).catch((e) => console.error('Lỗi tự động gia nhập:', e));
+      }
+
+      onSuccess();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (step !== 'form') return;
+
+    const timer = setTimeout(() => {
+      if (typeof window !== 'undefined' && (window as any).google) {
+        try {
+          (window as any).google.accounts.id.initialize({
+            client_id: (import.meta as any).env.VITE_GOOGLE_CLIENT_ID || '864264639911-dummyid.apps.googleusercontent.com',
+            callback: handleGoogleLogin,
+          });
+          
+          (window as any).google.accounts.id.renderButton(
+            document.getElementById('google-signin-btn-signup'),
+            { theme: 'outline', size: 'large', width: '380' }
+          );
+        } catch (e) {
+          console.error('Lỗi khởi tạo Google Sign-in:', e);
+        }
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [step]);
+
  const handleChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };
@@ -230,6 +295,19 @@ const SignupPage: React.FC<SignupPageProps> = ({ onBack, onSuccess }) => {
            {!isLoading && <ArrowRight className="w-5 h-5" />}
          </button>
        </form>
+
+        {step === 'form' && (
+          <>
+            <div className="relative my-6 flex items-center justify-center">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-gray-200"></div>
+              </div>
+              <span className="relative px-3 bg-white text-xs font-bold text-gray-400 uppercase">Hoặc</span>
+            </div>
+
+            <div id="google-signin-btn-signup" className="w-full flex justify-center"></div>
+          </>
+        )}
      </div>
    </div>
  );
@@ -844,6 +844,27 @@ export const TourDetailPage = ({
  const canUploadPhoto = isPublicView ? false : ['OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE'].includes(userRole || '');
  const isOwner = isPublicView ? false : userRole === 'OWNER';
  const canShare = isPublicView || ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '');
+  const canManage = isOwner || (!isPublicView && userRole === 'MANAGER');
+
+  const duplicateMatches = useMemo(() => {
+    if (!canManage || !currentTour?.participants) return [];
+    
+    const manualMembers = currentTour.participants.filter((p: any) => !p.userId && p.displayName);
+    const systemMembers = currentTour.participants.filter((p: any) => p.userId && p.user?.name);
+    
+    const matches: Array<{ manual: any; system: any }> = [];
+    
+    manualMembers.forEach((m: any) => {
+      const match = systemMembers.find((s: any) => {
+        return s.user.name.trim().toLowerCase() === m.displayName.trim().toLowerCase();
+      });
+      if (match) {
+        matches.push({ manual: m, system: match });
+      }
+    });
+    
+    return matches;
+  }, [canManage, currentTour?.participants]);

  useEffect(() => {
    if (isPublicView) {
@@ -1609,6 +1630,45 @@ export const TourDetailPage = ({
                </button>
              )}
            </div>
+
+            {duplicateMatches.map((match) => (
+              <div key={match.manual.id} className="mt-3 p-3 bg-amber-500/20 backdrop-blur-md border border-amber-500/30 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-xs text-amber-100 animate-in fade-in slide-in-from-top-1 shadow-lg">
+                <div className="flex items-center gap-2">
+                  <span className="w-2.5 h-2.5 rounded-full bg-amber-400 animate-pulse shrink-0"></span>
+                  <span>
+                    Phát hiện thành viên ngoài hệ thống <strong>"{match.manual.displayName}"</strong> trùng tên với tài khoản <strong>"{match.system.user.name}"</strong> vừa tham gia.
+                  </span>
+                </div>
+                <button
+                  onClick={async () => {
+                    try {
+                      const res = await fetch(`/api/v1/tours/${currentTour.id}/members/merge`, {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json',
+                          'Authorization': `Bearer ${localStorage.getItem('token')}`
+                        },
+                        body: JSON.stringify({
+                          manualParticipantId: match.manual.id,
+                          systemUserId: match.system.userId
+                        })
+                      });
+                      const data = await res.json();
+                      if (!res.ok) {
+                        throw new Error(data.message || 'Hợp nhất thất bại.');
+                      }
+                      notify({ title: 'Thành công', message: 'Đã gán thành viên ngoài hệ thống thành công!', type: 'success' });
+                      fetchTour(currentTour.id);
+                    } catch (e: any) {
+                      notify({ title: 'Lỗi', message: e.message || 'Không thể hợp nhất', type: 'error' });
+                    }
+                  }}
+                  className="px-3.5 py-2 bg-amber-500 hover:bg-amber-600 active:scale-95 text-white font-black rounded-xl transition-all shrink-0 shadow-md text-[11px]"
+                >
+                  Gán & Hợp nhất
+                </button>
+              </div>
+            ))}
          </div>
        </div>
      </div>