Sửa lỗi nhấn + để thêm thành viên của tour

AddMemberModal.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useEffect } from 'react';
+import { X, Search, UserPlus, Loader2, Shield, ShieldAlert } from 'lucide-react';
+
+interface AddMemberModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  tourId: string;
+}
+
+export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId }) => {
+  const [query, setQuery] = useState('');
+  const [users, setUsers] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const [role, setRole] = useState<'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY'>('MEMBER');
+  const [submitting, setSubmitting] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [submitError, setSubmitError] = useState('');
+
+  const fetchUsers = async () => {
+    setLoading(true);
+    setFetchError('');
+    try {
+      const API_BASE = `http://${window.location.hostname}:3001`;
+      const res = await fetch(`${API_BASE}/api/v1/users?q=${encodeURIComponent(query)}`, {
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+      });
+      if (!res.ok) throw new Error('Không thể tải danh sách người dùng');
+      const data = await res.json();
+      setUsers(data);
+    } catch (err: any) {
+      setFetchError(err.message || 'Không thể tải danh sách người dùng');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+    fetchUsers();
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setQuery('');
+      setSelectedUser(null);
+      setRole('MEMBER');
+      setFetchError('');
+    }
+  }, [isOpen]);
+
+  const handleAdd = async () => {
+    if (!selectedUser) return;
+    setSubmitting(true);
+    try {
+      const API_BASE = `http://${window.location.hostname}:3001`;
+      const res = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`,
+        },
+        body: JSON.stringify({ userId: selectedUser, role }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || 'Thêm thành viên thất bại');
+      }
+      onClose();
+    } catch (err: any) {
+      alert(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
+        <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" /> Thêm thành viên
+            </h2>
+            <p className="text-xs text-gray-500">Chọn người dùng và phân quyền cho tour này.</p>
+          </div>
+          <button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors">
+            <X className="w-5 h-5 text-gray-400" />
+          </button>
+        </div>
+
+        <div className="p-5 space-y-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              className="w-full pl-9 pr-4 py-2.5 bg-gray-50 border border-gray-100 rounded-xl outline-none text-sm"
+              placeholder="Tìm theo tên hoặc email..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onBlur={fetchUsers}
+            />
+          </div>
+
+          <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>
+
+          <div className="space-y-2">
+            {fetchError && (
+              <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
+                {fetchError}
+              </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">
+                {users.map((u) => {
+                  const isSelected = selectedUser === u.id;
+                  return (
+                    <button
+                      key={u.id}
+                      onClick={() => setSelectedUser(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'
+                      }`}
+                    >
+                      <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 && users.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 thêm...' : 'Thêm vào tour'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};