Thêm thành viên bằng địa chỉ email

AddMemberModal.tsx

@@ -1,13 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { X, Search, UserPlus, Loader2, Shield, ShieldAlert } from 'lucide-react';
+import React, { useState, useEffect, useMemo } from 'react';
+import { X, Search, UserPlus, Loader2, Shield, Trash2 } from 'lucide-react';
 
 interface AddMemberModalProps {
   isOpen: boolean;
   onClose: () => void;
   tourId: string;
+  participants?: Array<{ userId: string; role: string; user?: { id: string; name: string; email: string } }>;
+  onRemoveMember?: (userId: string) => Promise<void>;
+  onMemberAdded?: () => void;
 }
 
-export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId }) => {
+export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], onRemoveMember, onMemberAdded }) => {
   const [query, setQuery] = useState('');
   const [users, setUsers] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
@@ -16,6 +19,11 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
   const [submitting, setSubmitting] = useState(false);
   const [fetchError, setFetchError] = useState('');
   const [submitError, setSubmitError] = useState('');
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  const [confirmTarget, setConfirmTarget] = useState<{ userId: string; name: string } | null>(null);
+
+  const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [participants]);
+  const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
 
   const fetchUsers = async () => {
     setLoading(true);
@@ -27,7 +35,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
       });
       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);
+      setUsers(Array.isArray(data) ? data : []);
     } catch (err: any) {
       setFetchError(err.message || 'Không thể tải danh sách người dùng');
     } finally {
@@ -46,12 +54,32 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
       setSelectedUser(null);
       setRole('MEMBER');
       setFetchError('');
+      setSubmitError('');
     }
   }, [isOpen]);
 
+  const handleRemove = async (userId: string, memberName: string) => {
+    if (!onRemoveMember) return;
+    setConfirmTarget({ userId, name: memberName });
+    setIsConfirmOpen(true);
+  };
+
+  const confirmRemove = async () => {
+    if (!confirmTarget || !onRemoveMember) return;
+    try {
+      await onRemoveMember(confirmTarget.userId);
+    } catch (err: any) {
+      setSubmitError(err.message || 'Không thể xóa thành viên');
+    } finally {
+      setIsConfirmOpen(false);
+      setConfirmTarget(null);
+    }
+  };
+
   const handleAdd = async () => {
     if (!selectedUser) return;
     setSubmitting(true);
+    setSubmitError('');
     try {
       const API_BASE = `http://${window.location.hostname}:3001`;
       const res = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
@@ -66,9 +94,10 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
         const data = await res.json();
         throw new Error(data.message || 'Thêm thành viên thất bại');
       }
+      onMemberAdded?.();
       onClose();
     } catch (err: any) {
-      alert(err.message);
+      setSubmitError(err.message || 'Thêm thành viên thất bại');
     } finally {
       setSubmitting(false);
     }
@@ -93,6 +122,47 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
         </div>
 
         <div className="p-5 space-y-4">
+          <div>
+            <p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.length})</p>
+            <div className="flex flex-wrap gap-3">
+              {participants.map((p) => {
+                const rawToken = localStorage.getItem('token');
+                let currentUserId: string | null = null;
+                try {
+                  const payload = JSON.parse(atob((rawToken || '').split('.')[1]));
+                  currentUserId = payload.sub;
+                } catch {
+                  currentUserId = null;
+                }
+                const isCurrentUser = currentUserId && p.userId === currentUserId;
+                const isOwner = p.role === 'OWNER';
+                const canRemove = onRemoveMember && !isCurrentUser && !isOwner;
+                return (
+                  <div key={p.userId} className="flex flex-col items-center gap-1">
+                    <div className="relative">
+                      <div className="w-10 h-10 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
+                        {p.user?.name?.charAt(0) || '?'}
+                      </div>
+                      {canRemove && (
+                        <button
+                          onClick={() => handleRemove(p.userId, p.user?.name || p.userId)}
+                          className="absolute -top-1 -right-1 w-4 h-4 bg-gray-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white"
+                          aria-label="Remove item"
+                        >
+                          <Trash2 size={10} />
+                        </button>
+                      )}
+                    </div>
+                    <span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{p.user?.name || p.userId}</span>
+                  </div>
+                );
+              })}
+              {participants.length === 0 && (
+                <span className="text-xs text-gray-400">Chưa có thành viên nào</span>
+              )}
+            </div>
+          </div>
+
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
             <input
@@ -125,11 +195,16 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                 {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">
-                {users.map((u) => {
+                {visibleUsers.map((u) => {
                   const isSelected = selectedUser === u.id;
                   return (
                     <button
@@ -158,7 +233,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                     </button>
                   );
                 })}
-                {!loading && users.length === 0 && (
+                {!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>
@@ -179,6 +254,26 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
           </button>
         </div>
       </div>
+
+      {isConfirmOpen && (
+        <div className="fixed inset-0 z-[2100] flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-gray-900/70 backdrop-blur-sm" onClick={() => setIsConfirmOpen(false)} />
+          <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
+            <h3 className="text-base font-bold text-gray-900">Xác nhận xóa thành viên</h3>
+            <p className="mt-2 text-sm text-gray-600">
+              Bạn có chắc muốn xóa <span className="font-semibold text-gray-800">{confirmTarget?.name}</span> khỏi tour này?
+            </p>
+            <div className="mt-4 flex justify-end gap-2">
+              <button onClick={() => setIsConfirmOpen(false)} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
+                Hủy
+              </button>
+              <button onClick={confirmRemove} className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors">
+                Xóa
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

CreateTourModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { X, Map as MapIcon, Loader2 } from 'lucide-react';
+import { Trash2 } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
 
 export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolean, onClose: () => void, onSuccess: (tour: any) => void }) => {
@@ -7,19 +7,57 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const createTour = useTourStore(state => state.createTour);
+  const createTour = useTourStore((state) => state.createTour);
+
+  const [members, setMembers] = useState<any[]>([]);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<any[]>([]);
+  const [error, setError] = useState('');
 
   if (!isOpen) return null;
 
+  const searchUsers = async (value: string) => {
+    setQuery(value);
+    if (!value.trim()) {
+      setResults([]);
+      return;
+    }
+    try {
+      const API_BASE = `http://${window.location.hostname}:3001`;
+      const res = await fetch(`${API_BASE}/api/v1/users?q=${encodeURIComponent(value)}`, {
+        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+      });
+      if (!res.ok) throw new Error('Không thể tải người dùng');
+      const data = await res.json();
+      setResults(Array.isArray(data) ? data : []);
+    } catch (e: any) {
+      setResults([]);
+      setError(e.message || 'Không thể tải người dùng');
+    }
+  };
+
+  const confirmAddMember = (user: any) => {
+    setMembers((prev) => (prev.some((m) => m.id === user.id) ? prev : [...prev, user]));
+    setQuery('');
+    setResults([]);
+    setError('');
+  };
+
+  const removeMember = (userId: string) => {
+    setMembers((prev) => prev.filter((m) => m.id !== userId));
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
+    setError('');
     try {
-      const tour = await createTour({ title, startDate, endDate });
+      const memberIds = members.map((m) => m.id);
+      const tour = await createTour({ title, startDate, endDate, memberIds });
       onSuccess(tour);
       onClose();
-    } catch (error) {
-      alert('Lỗi khi tạo tour');
+    } catch (e: any) {
+      setError(e.message || 'Lỗi khi tạo tour');
     } finally {
       setIsLoading(false);
     }
@@ -28,55 +66,101 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
   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 p-8">
-        <div className="flex justify-between items-center mb-6">
-          <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
-            <MapIcon className="w-6 h-6 text-blue-600" /> Tạo Tour mới
-          </h2>
-          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-            <X className="w-6 h-6 text-gray-400" />
-          </button>
+      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold text-gray-900">Tạo Tour mới</h2>
+          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">✕</button>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label className="block text-sm font-bold text-gray-700 mb-1">Tên Tour</label>
-            <input 
+            <input
               required
               className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
               value={title}
-              onChange={e => setTitle(e.target.value)}
+              onChange={(e) => setTitle(e.target.value)}
               placeholder="VD: Khám phá Đà Lạt"
             />
           </div>
+
           <div className="grid grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-bold text-gray-700 mb-1">Bắt đầu</label>
-              <input 
+              <input
                 type="date"
                 className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
                 value={startDate}
-                onChange={e => setStartDate(e.target.value)}
+                onChange={(e) => setStartDate(e.target.value)}
               />
             </div>
             <div>
               <label className="block text-sm font-bold text-gray-700 mb-1">Kết thúc</label>
-              <input 
+              <input
                 type="date"
                 className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
                 value={endDate}
-                onChange={e => setEndDate(e.target.value)}
+                onChange={(e) => setEndDate(e.target.value)}
               />
             </div>
           </div>
-          <button 
+
+          <div>
+            <label className="block text-sm font-bold text-gray-700 mb-2">Thành viên tham gia</label>
+            <div className="flex flex-wrap gap-3">
+              {members.map((m) => (
+                <div key={m.id} className="relative">
+                  <div className="w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
+                    {m.name}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removeMember(m.id)}
+                    className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-gray-500 hover:bg-red-600 text-white flex items-center justify-center transition-colors"
+                    aria-label="Remove item"
+                  >
+                    <Trash2 size={12} />
+                  </button>
+                  <div className="text-[10px] text-center mt-1 max-w-[70px] truncate">{m.name}</div>
+                </div>
+              ))}
+
+              <div className="relative">
+                <input
+                  className="w-36 px-2 py-1 text-sm border border-gray-200 rounded-lg outline-none"
+                  placeholder="Tìm email..."
+                  value={query}
+                  onChange={(e) => searchUsers(e.target.value)}
+                />
+                {results.length > 0 && (
+                  <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-100 rounded-xl shadow-lg z-10 max-h-60 overflow-y-auto">
+                    {results.map((u) => (
+                      <button
+                        key={u.id}
+                        type="button"
+                        onClick={() => confirmAddMember(u)}
+                        className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50"
+                      >
+                        <span className="font-bold text-gray-900">{u.name}</span>
+                        <span className="block text-xs text-gray-500">{u.email}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+            {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
+          </div>
+
+          <button
+            type="submit"
             disabled={isLoading}
-            className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2"
+            className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2"
           >
-            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Xác nhận tạo Tour'}
+            {isLoading ? 'Đang tạo...' : 'Xác nhận tạo Tour'}
           </button>
         </form>
       </div>
     </div>
   );
-};
+};

TourDetailPage.tsx

@@ -179,7 +179,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   const { 
     currentTour, legs, fetchTour, fetchPublicTours, publicTours, 
     userRole, mapCenter, setMapCenter, updateTourStartPoint, 
-    updateTourEndPoint, initializeLegs, addLocation, addMember 
+    updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember 
   } = useTourStore();
 
   const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
@@ -623,6 +623,9 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
           isOpen={isAddMemberOpen}
           onClose={() => setIsAddMemberOpen(false)}
           tourId={currentTour.id}
+          participants={currentTour.participants || []}
+          onRemoveMember={(userId) => removeMember(currentTour.id, userId)}
+          onMemberAdded={() => fetchTour(currentTour.id)}
         />
       )}
 

dist/AddMemberModal.d.ts

@@ -3,6 +3,17 @@ interface AddMemberModalProps {
     isOpen: boolean;
     onClose: () => void;
     tourId: string;
+    participants?: Array<{
+        userId: string;
+        role: string;
+        user?: {
+            id: string;
+            name: string;
+            email: string;
+        };
+    }>;
+    onRemoveMember?: (userId: string) => Promise<void>;
+    onMemberAdded?: () => void;
 }
 export declare const AddMemberModal: React.FC<AddMemberModalProps>;
 export {};

dist/AddMemberModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { X, Search, UserPlus, Loader2, Shield } from 'lucide-react';
-export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
+import { useState, useEffect, useMemo } from 'react';
+import { X, Search, UserPlus, Loader2, Shield, Trash2 } from 'lucide-react';
+export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], onRemoveMember, onMemberAdded }) => {
     const [query, setQuery] = useState('');
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -10,6 +10,10 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
     const [submitting, setSubmitting] = useState(false);
     const [fetchError, setFetchError] = useState('');
     const [submitError, setSubmitError] = useState('');
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+    const [confirmTarget, setConfirmTarget] = useState(null);
+    const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [participants]);
+    const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
     const fetchUsers = async () => {
         setLoading(true);
         setFetchError('');
@@ -21,7 +25,7 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
             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);
+            setUsers(Array.isArray(data) ? data : []);
         }
         catch (err) {
             setFetchError(err.message || 'Không thể tải danh sách người dùng');
@@ -41,12 +45,34 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
             setSelectedUser(null);
             setRole('MEMBER');
             setFetchError('');
+            setSubmitError('');
         }
     }, [isOpen]);
+    const handleRemove = async (userId, memberName) => {
+        if (!onRemoveMember)
+            return;
+        setConfirmTarget({ userId, name: memberName });
+        setIsConfirmOpen(true);
+    };
+    const confirmRemove = async () => {
+        if (!confirmTarget || !onRemoveMember)
+            return;
+        try {
+            await onRemoveMember(confirmTarget.userId);
+        }
+        catch (err) {
+            setSubmitError(err.message || 'Không thể xóa thành viên');
+        }
+        finally {
+            setIsConfirmOpen(false);
+            setConfirmTarget(null);
+        }
+    };
     const handleAdd = async () => {
         if (!selectedUser)
             return;
         setSubmitting(true);
+        setSubmitError('');
         try {
             const API_BASE = `http://${window.location.hostname}:3001`;
             const res = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
@@ -61,10 +87,11 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
                 const data = await res.json();
                 throw new Error(data.message || 'Thêm thành viên thất bại');
             }
+            onMemberAdded?.();
             onClose();
         }
         catch (err) {
-            alert(err.message);
+            setSubmitError(err.message || 'Thêm thành viên thất bại');
         }
         finally {
             setSubmitting(false);
@@ -72,9 +99,23 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
     };
     if (!isOpen)
         return null;
-    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]", children: [_jsxs("div", { className: "p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-lg font-bold text-gray-900 flex items-center gap-2", children: [_jsx(UserPlus, { className: "w-5 h-5 text-blue-600" }), " Th\u00EAm th\u00E0nh vi\u00EAn"] }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1ECDn ng\u01B0\u1EDDi d\u00F9ng v\u00E0 ph\u00E2n quy\u1EC1n cho tour n\u00E0y." })] }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-200 rounded-full transition-colors", children: _jsx(X, { className: "w-5 h-5 text-gray-400" }) })] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }), _jsx("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\u00ECm theo t\u00EAn ho\u1EB7c email...", value: query, onChange: (e) => setQuery(e.target.value), onBlur: fetchUsers })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-xs font-bold text-gray-700 ml-1", children: "Ph\u00E2n quy\u1EC1n" }), _jsxs("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), children: [_jsx("option", { value: "OWNER", children: "OWNER" }), _jsx("option", { value: "MANAGER", children: "MANAGER" }), _jsx("option", { value: "MEMBER", children: "MEMBER" }), _jsx("option", { value: "MEMBER_NO_FINANCE", children: "MEMBER_NO_FINANCE" }), _jsx("option", { value: "VIEWER_ONLY", children: "VIEWER_ONLY" })] })] }), _jsxs("div", { className: "space-y-2", children: [fetchError && (_jsx("div", { className: "p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100", children: fetchError })), loading ? (_jsx("div", { className: "flex justify-center py-10", children: _jsx(Loader2, { className: "w-8 h-8 animate-spin text-blue-600" }) })) : (_jsxs("div", { className: "space-y-2 max-h-[40vh] overflow-y-auto pr-1", children: [users.map((u) => {
+    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]", children: [_jsxs("div", { className: "p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-lg font-bold text-gray-900 flex items-center gap-2", children: [_jsx(UserPlus, { className: "w-5 h-5 text-blue-600" }), " Th\u00EAm th\u00E0nh vi\u00EAn"] }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1ECDn ng\u01B0\u1EDDi d\u00F9ng v\u00E0 ph\u00E2n quy\u1EC1n cho tour n\u00E0y." })] }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-200 rounded-full transition-colors", children: _jsx(X, { className: "w-5 h-5 text-gray-400" }) })] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsxs("div", { children: [_jsxs("p", { className: "text-[11px] font-bold text-gray-500 mb-2", children: ["Th\u00E0nh vi\u00EAn c\u1EE7a tour (", participants.length, ")"] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [participants.map((p) => {
+                                                const rawToken = localStorage.getItem('token');
+                                                let currentUserId = null;
+                                                try {
+                                                    const payload = JSON.parse(atob((rawToken || '').split('.')[1]));
+                                                    currentUserId = payload.sub;
+                                                }
+                                                catch {
+                                                    currentUserId = null;
+                                                }
+                                                const isCurrentUser = currentUserId && p.userId === currentUserId;
+                                                const isOwner = p.role === 'OWNER';
+                                                const canRemove = onRemoveMember && !isCurrentUser && !isOwner;
+                                                return (_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden", children: p.user?.name?.charAt(0) || '?' }), canRemove && (_jsx("button", { onClick: () => handleRemove(p.userId, p.user?.name || p.userId), className: "absolute -top-1 -right-1 w-4 h-4 bg-gray-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white", "aria-label": "Remove item", children: _jsx(Trash2, { size: 10 }) }))] }), _jsx("span", { className: "text-[10px] font-semibold text-gray-700 max-w-[72px] truncate", children: p.user?.name || p.userId })] }, p.userId));
+                                            }), participants.length === 0 && (_jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 th\u00E0nh vi\u00EAn n\u00E0o" }))] })] }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }), _jsx("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\u00ECm theo t\u00EAn ho\u1EB7c email...", value: query, onChange: (e) => setQuery(e.target.value), onBlur: fetchUsers })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-xs font-bold text-gray-700 ml-1", children: "Ph\u00E2n quy\u1EC1n" }), _jsxs("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), children: [_jsx("option", { value: "OWNER", children: "OWNER" }), _jsx("option", { value: "MANAGER", children: "MANAGER" }), _jsx("option", { value: "MEMBER", children: "MEMBER" }), _jsx("option", { value: "MEMBER_NO_FINANCE", children: "MEMBER_NO_FINANCE" }), _jsx("option", { value: "VIEWER_ONLY", children: "VIEWER_ONLY" })] })] }), _jsxs("div", { className: "space-y-2", children: [fetchError && (_jsx("div", { className: "p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100", children: fetchError })), submitError && (_jsx("div", { className: "p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100", children: submitError })), loading ? (_jsx("div", { className: "flex justify-center py-10", children: _jsx(Loader2, { className: "w-8 h-8 animate-spin text-blue-600" }) })) : (_jsxs("div", { className: "space-y-2 max-h-[40vh] overflow-y-auto pr-1", children: [visibleUsers.map((u) => {
                                                 const isSelected = selectedUser === u.id;
                                                 return (_jsxs("button", { 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'}`, children: [_jsx("div", { className: "w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold", children: u.name?.charAt(0) || '?' }), _jsxs("div", { className: "flex-1 text-left", children: [_jsx("div", { className: "text-sm font-bold text-gray-900", children: u.name || 'Chưa đặt tên' }), _jsx("div", { className: "text-[11px] text-gray-500", children: u.email }), _jsxs("div", { className: "text-[11px] text-gray-400", children: [u.phone || '', " ", u.address ? `• ${u.address}` : ''] })] }), _jsxs("div", { className: "flex items-center gap-1 text-[10px] font-bold text-gray-500", children: [u.isAdmin ? (_jsx("span", { className: "px-2 py-1 bg-purple-50 text-purple-600 rounded-md border border-purple-100", children: "ADMIN" })) : (_jsx("span", { className: "px-2 py-1 bg-gray-50 text-gray-500 rounded-md border border-gray-100", children: "USER" })), isSelected && _jsx(Shield, { className: "w-3 h-3 text-blue-600" })] })] }, u.id));
-                                            }), !loading && users.length === 0 && (_jsx("div", { className: "text-center py-8 text-sm text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y ng\u01B0\u1EDDi d\u00F9ng ph\u00F9 h\u1EE3p" }))] }))] })] }), _jsxs("div", { className: "p-5 border-t border-gray-100 flex justify-end gap-2", children: [_jsx("button", { onClick: onClose, className: "px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: "H\u1EE7y" }), _jsx("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", children: submitting ? 'Đang thêm...' : 'Thêm vào tour' })] })] })] }));
+                                            }), !loading && visibleUsers.length === 0 && (_jsx("div", { className: "text-center py-8 text-sm text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y ng\u01B0\u1EDDi d\u00F9ng ph\u00F9 h\u1EE3p" }))] }))] })] }), _jsxs("div", { className: "p-5 border-t border-gray-100 flex justify-end gap-2", children: [_jsx("button", { onClick: onClose, className: "px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: "H\u1EE7y" }), _jsx("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", children: submitting ? 'Đang thêm...' : 'Thêm vào tour' })] })] }), isConfirmOpen && (_jsxs("div", { className: "fixed inset-0 z-[2100] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/70 backdrop-blur-sm", onClick: () => setIsConfirmOpen(false) }), _jsxs("div", { className: "relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5", children: [_jsx("h3", { className: "text-base font-bold text-gray-900", children: "X\u00E1c nh\u1EADn x\u00F3a th\u00E0nh vi\u00EAn" }), _jsxs("p", { className: "mt-2 text-sm text-gray-600", children: ["B\u1EA1n c\u00F3 ch\u1EAFc mu\u1ED1n x\u00F3a ", _jsx("span", { className: "font-semibold text-gray-800", children: confirmTarget?.name }), " kh\u1ECFi tour n\u00E0y?"] }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { onClick: () => setIsConfirmOpen(false), className: "px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: "H\u1EE7y" }), _jsx("button", { onClick: confirmRemove, className: "px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors", children: "X\u00F3a" })] })] })] }))] }));
 };
 //# sourceMappingURL=AddMemberModal.js.map

dist/CreateTourModal.js

@@ -1,30 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { X, Map as MapIcon, Loader2 } from 'lucide-react';
+import { Trash2 } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
 export const CreateTourModal = ({ isOpen, onClose, onSuccess }) => {
     const [title, setTitle] = useState('');
     const [startDate, setStartDate] = useState('');
     const [endDate, setEndDate] = useState('');
     const [isLoading, setIsLoading] = useState(false);
-    const createTour = useTourStore(state => state.createTour);
+    const createTour = useTourStore((state) => state.createTour);
+    const [members, setMembers] = useState([]);
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [error, setError] = useState('');
     if (!isOpen)
         return null;
+    const searchUsers = async (value) => {
+        setQuery(value);
+        if (!value.trim()) {
+            setResults([]);
+            return;
+        }
+        try {
+            const API_BASE = `http://${window.location.hostname}:3001`;
+            const res = await fetch(`${API_BASE}/api/v1/users?q=${encodeURIComponent(value)}`, {
+                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+            });
+            if (!res.ok)
+                throw new Error('Không thể tải người dùng');
+            const data = await res.json();
+            setResults(Array.isArray(data) ? data : []);
+        }
+        catch (e) {
+            setResults([]);
+            setError(e.message || 'Không thể tải người dùng');
+        }
+    };
+    const confirmAddMember = (user) => {
+        setMembers((prev) => (prev.some((m) => m.id === user.id) ? prev : [...prev, user]));
+        setQuery('');
+        setResults([]);
+        setError('');
+    };
+    const removeMember = (userId) => {
+        setMembers((prev) => prev.filter((m) => m.id !== userId));
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         setIsLoading(true);
+        setError('');
         try {
-            const tour = await createTour({ title, startDate, endDate });
+            const memberIds = members.map((m) => m.id);
+            const tour = await createTour({ title, startDate, endDate, memberIds });
             onSuccess(tour);
             onClose();
         }
-        catch (error) {
-            alert('Lỗi khi tạo tour');
+        catch (e) {
+            setError(e.message || 'Lỗi khi tạo tour');
         }
         finally {
             setIsLoading(false);
         }
     };
-    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-8", children: [_jsxs("div", { className: "flex justify-between items-center mb-6", children: [_jsxs("h2", { className: "text-2xl font-bold text-gray-900 flex items-center gap-2", children: [_jsx(MapIcon, { className: "w-6 h-6 text-blue-600" }), " T\u1EA1o Tour m\u1EDBi"] }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(X, { className: "w-6 h-6 text-gray-400" }) })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "T\u00EAn Tour" }), _jsx("input", { required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500", value: title, onChange: e => setTitle(e.target.value), placeholder: "VD: Kh\u00E1m ph\u00E1 \u0110\u00E0 L\u1EA1t" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "B\u1EAFt \u0111\u1EA7u" }), _jsx("input", { type: "date", className: "w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500", value: startDate, onChange: e => setStartDate(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "K\u1EBFt th\u00FAc" }), _jsx("input", { type: "date", className: "w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500", value: endDate, onChange: e => setEndDate(e.target.value) })] })] }), _jsx("button", { disabled: isLoading, className: "w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2", children: isLoading ? _jsx(Loader2, { className: "w-5 h-5 animate-spin" }) : 'Xác nhận tạo Tour' })] })] })] }));
+    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-6", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-xl font-bold text-gray-900", children: "T\u1EA1o Tour m\u1EDBi" }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: "\u2715" })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "T\u00EAn Tour" }), _jsx("input", { required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VD: Kh\u00E1m ph\u00E1 \u0110\u00E0 L\u1EA1t" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "B\u1EAFt \u0111\u1EA7u" }), _jsx("input", { type: "date", className: "w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500", value: startDate, onChange: (e) => setStartDate(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "K\u1EBFt th\u00FAc" }), _jsx("input", { type: "date", className: "w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500", value: endDate, onChange: (e) => setEndDate(e.target.value) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-2", children: "Th\u00E0nh vi\u00EAn tham gia" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [members.map((m) => (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden", children: m.name }), _jsx("button", { type: "button", onClick: () => removeMember(m.id), className: "absolute -top-1 -right-1 w-5 h-5 rounded-full bg-gray-500 hover:bg-red-600 text-white flex items-center justify-center transition-colors", "aria-label": "Remove item", children: _jsx(Trash2, { size: 12 }) }), _jsx("div", { className: "text-[10px] text-center mt-1 max-w-[70px] truncate", children: m.name })] }, m.id))), _jsxs("div", { className: "relative", children: [_jsx("input", { className: "w-36 px-2 py-1 text-sm border border-gray-200 rounded-lg outline-none", placeholder: "T\u00ECm email...", value: query, onChange: (e) => searchUsers(e.target.value) }), results.length > 0 && (_jsx("div", { className: "absolute top-full left-0 right-0 mt-2 bg-white border border-gray-100 rounded-xl shadow-lg z-10 max-h-60 overflow-y-auto", children: results.map((u) => (_jsxs("button", { type: "button", onClick: () => confirmAddMember(u), className: "w-full text-left px-3 py-2 text-sm hover:bg-blue-50", children: [_jsx("span", { className: "font-bold text-gray-900", children: u.name }), _jsx("span", { className: "block text-xs text-gray-500", children: u.email })] }, u.id))) }))] })] }), error && _jsx("p", { className: "text-xs text-red-600 mt-2", children: error })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2", children: isLoading ? 'Đang tạo...' : 'Xác nhận tạo Tour' })] })] })] }));
 };
 //# sourceMappingURL=CreateTourModal.js.map

dist/TourDetailPage.js

@@ -109,7 +109,7 @@ export const TourDetailPage = ({ onBack }) => {
         }
         return null;
     });
-    const { currentTour, legs, fetchTour, fetchPublicTours, publicTours, userRole, mapCenter, setMapCenter, updateTourStartPoint, updateTourEndPoint, initializeLegs, addLocation, addMember } = useTourStore();
+    const { currentTour, legs, fetchTour, fetchPublicTours, publicTours, userRole, mapCenter, setMapCenter, updateTourStartPoint, updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember } = useTourStore();
     const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
     const [mapZoom] = useState(initialViewState?.zoom || 13);
     const allLocations = useMemo(() => legs.flatMap(l => l.locations), [legs]);
@@ -264,6 +264,6 @@ export const TourDetailPage = ({ onBack }) => {
                         setEditingLocation(null);
                         if (activeTab === 'plan')
                             setIsAddLocationOpen(true);
-                    }, className: "bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 transition-all flex items-center font-bold", children: activeTab === 'plan' ? 'Thêm địa điểm' : activeTab === 'expense' ? 'Thêm chi phí' : 'Đăng ảnh' }) })), currentTour && (_jsx(AddMemberModal, { isOpen: isAddMemberOpen, onClose: () => setIsAddMemberOpen(false), tourId: currentTour.id })), currentTour && (_jsx(AddLocationModal, { isOpen: isAddLocationOpen, onClose: () => setIsAddLocationOpen(false), initialLegId: targetLegId || undefined, editingLocation: editingLocation, tourId: currentTour.id }))] }));
+                    }, className: "bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 transition-all flex items-center font-bold", children: activeTab === 'plan' ? 'Thêm địa điểm' : activeTab === 'expense' ? 'Thêm chi phí' : 'Đăng ảnh' }) })), currentTour && (_jsx(AddMemberModal, { isOpen: isAddMemberOpen, onClose: () => setIsAddMemberOpen(false), tourId: currentTour.id, participants: currentTour.participants || [], onRemoveMember: (userId) => removeMember(currentTour.id, userId), onMemberAdded: () => fetchTour(currentTour.id) })), currentTour && (_jsx(AddLocationModal, { isOpen: isAddLocationOpen, onClose: () => setIsAddLocationOpen(false), initialLegId: targetLegId || undefined, editingLocation: editingLocation, tourId: currentTour.id }))] }));
 };
 //# sourceMappingURL=TourDetailPage.js.map

dist/main.js

@@ -346,6 +346,18 @@ let TourController = class TourController {
             include: { user: { select: { id: true, name: true, email: true } } },
         });
     }
+    async removeMember(tourId, userId) {
+        const participation = await this.prisma.tourParticipant.findUnique({
+            where: { tourId_userId: { tourId, userId } },
+        });
+        if (!participation) {
+            throw new NotFoundException('Thành viên này không có trong tour');
+        }
+        await this.prisma.tourParticipant.delete({
+            where: { tourId_userId: { tourId, userId } },
+        });
+        return { message: 'Đã xóa thành viên khỏi tour' };
+    }
 };
 __decorate([
     UseGuards(JwtAuthGuard),
@@ -447,6 +459,15 @@ __decorate([
     __metadata("design:paramtypes", [String, Object, Object]),
     __metadata("design:returntype", Promise)
 ], TourController.prototype, "addMember", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Delete(':tourId/members/:userId'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Param('userId', ParseUUIDPipe)),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "removeMember", null);
 TourController = __decorate([
     Controller('v1/tours'),
     __metadata("design:paramtypes", [PrismaService])

dist/useTourStore.d.ts

@@ -24,6 +24,7 @@ interface TourState {
         userId: string;
         role?: string;
     }) => Promise<void>;
+    removeMember: (tourId: string, userId: string) => Promise<void>;
     setActiveLegId: (id: string | null) => void;
     setMapCenter: (pos: [number, number]) => void;
     fetchTour: (id: string) => Promise<void>;

dist/useTourStore.js

@@ -242,6 +242,20 @@ export const useTourStore = create((set, get) => ({
             set({ currentTour: { ...currentTour, legs: updatedLegs }, legs: updatedLegs });
         }
     },
+    removeMember: async (tourId, userId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members/${userId}`, {
+            method: 'DELETE',
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`,
+            },
+        });
+        if (!response.ok)
+            throw new Error('Lỗi khi xóa thành viên');
+        const { currentTour } = get();
+        if (currentTour)
+            get().fetchTour(currentTour.id);
+    },
     addMember: async (tourId, member) => {
         const API_BASE = `http://${window.location.hostname}:3001`;
         const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {

main.ts

@@ -361,7 +361,7 @@ class TourController {
   async addMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId: string; role?: string }, @Req() req: any) {
     const validRoles = ['OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY'] as const;
     const role = validRoles.includes(body.role as any) ? body.role as 'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY' : 'MEMBER';
-    
+
     const participation = await this.prisma.tourParticipant.findUnique({
       where: { tourId_userId: { tourId, userId: body.userId } },
     });
@@ -381,6 +381,21 @@ class TourController {
       include: { user: { select: { id: true, name: true, email: true } } },
     });
   }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Delete(':tourId/members/:userId')
+  async removeMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('userId', ParseUUIDPipe) userId: string) {
+    const participation = await this.prisma.tourParticipant.findUnique({
+      where: { tourId_userId: { tourId, userId } },
+    });
+    if (!participation) {
+      throw new NotFoundException('Thành viên này không có trong tour');
+    }
+    await this.prisma.tourParticipant.delete({
+      where: { tourId_userId: { tourId, userId } },
+    });
+    return { message: 'Đã xóa thành viên khỏi tour' };
+  }
 }
 
 @Controller('v1/locations')

useTourStore.ts

@@ -23,6 +23,7 @@ interface TourState {
   updateTourEndPoint: (tourId: string, data: any) => Promise<void>;
   optimizeRouting: (legId: string) => Promise<void>;
   addMember: (tourId: string, member: { userId: string; role?: string }) => Promise<void>;
+  removeMember: (tourId: string, userId: string) => Promise<void>;
   setActiveLegId: (id: string | null) => void;
   setMapCenter: (pos: [number, number]) => void;
   fetchTour: (id: string) => Promise<void>;
@@ -269,6 +270,18 @@ export const useTourStore = create<TourState>((set, get) => ({
       set({ currentTour: { ...currentTour, legs: updatedLegs }, legs: updatedLegs });
     }
   },
+  removeMember: async (tourId: string, userId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members/${userId}`, {
+      method: 'DELETE',
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`,
+      },
+    });
+    if (!response.ok) throw new Error('Lỗi khi xóa thành viên');
+    const { currentTour } = get();
+    if (currentTour) get().fetchTour(currentTour.id);
+  },
   addMember: async (tourId: string, member: { userId: string; role?: string }) => {
     const API_BASE = `http://${window.location.hostname}:3001`;
     const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {