532 lines
24 KiB
TypeScript
532 lines
24 KiB
TypeScript
import React, { useState, useEffect, useMemo } from 'react';
|
|
import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock } from 'lucide-react';
|
|
import { useConfirm } from '@/hooks/useConfirm';
|
|
import { useNotification } from '@/hooks/useNotification';
|
|
|
|
interface AddMemberModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
tourId: string;
|
|
participants?: Array<{ id: string; userId?: string | null; role: string; displayName?: string | null; user?: { id: string; name: string; email: string } | null }>;
|
|
joinRequests?: Array<{ id: string; userId: string; user?: { id: string; name: string; email: string }; status: string; requestedById: string }>;
|
|
onRemoveMember?: (userId: string) => Promise<void>;
|
|
onMemberAdded?: () => void;
|
|
userRole?: string; // User's role in the tour
|
|
isPublicView?: boolean; // New prop to indicate public view
|
|
}
|
|
|
|
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);
|
|
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 [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();
|
|
|
|
const participantIds = useMemo(() => new Set(participants.map((p) => p.userId).filter(Boolean) as string[]), [participants]);
|
|
const requestUserIds = useMemo(() => new Set(joinRequests.map((r) => (r as any).userId)), [joinRequests]);
|
|
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();
|
|
if (!name) return;
|
|
setSubmitting(true);
|
|
setSubmitError('');
|
|
try {
|
|
const res = await fetch(`/api/v1/tours/${tourId}/members`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
},
|
|
body: JSON.stringify({ displayName: name, role }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json();
|
|
throw new Error(data.message || data.error || 'Thao tác thất bại');
|
|
}
|
|
await onMemberAdded?.();
|
|
onClose();
|
|
} catch (err: any) {
|
|
setSubmitError(err.message || 'Thao tác thất bại');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const fetchUsers = async () => {
|
|
setLoading(true);
|
|
setFetchError('');
|
|
try {
|
|
const res = await fetch(`/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(Array.isArray(data) ? data : []);
|
|
} catch (err: any) {
|
|
setFetchError(err.message || 'Không thể tải danh sách người dùng');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
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 || activeTab !== 'search') return;
|
|
const delayDebounceFn = setTimeout(() => {
|
|
fetchUsers();
|
|
}, 300);
|
|
|
|
return () => clearTimeout(delayDebounceFn);
|
|
}, [query, isOpen, activeTab]);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setQuery('');
|
|
setSelectedUser(null);
|
|
setRole('MEMBER');
|
|
setFetchError('');
|
|
setSubmitError('');
|
|
setInviteEmail('');
|
|
setInviteRole('MEMBER');
|
|
setInviteError('');
|
|
setInviteSuccess('');
|
|
setActiveTab('search');
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleRemove = async (memberIdOrUserId: string, memberName: string) => {
|
|
if (!onRemoveMember) return;
|
|
const isConfirmed = await confirm({
|
|
title: 'Xóa thành viên',
|
|
message: `Bạn có chắc chắn muốn xóa ${memberName} khỏi tour?`
|
|
});
|
|
|
|
if (isConfirmed) {
|
|
try {
|
|
await onRemoveMember(memberIdOrUserId);
|
|
} catch (err: any) {
|
|
setSubmitError(err.message || 'Không thể xóa thành viên');
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleRequestAction = async (reqId: string, action: 'accept' | 'reject') => {
|
|
if (!onMemberAdded) return;
|
|
setActionLoading(reqId);
|
|
try {
|
|
const endpoint = action === 'accept'
|
|
? `/api/v1/tours/${tourId}/join-requests/${reqId}/accept`
|
|
: `/api/v1/tours/${tourId}/join-requests/${reqId}/reject`;
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data.message || data.error || (action === 'accept' ? 'Không thể chấp nhận' : 'Không thể từ chối'));
|
|
}
|
|
await onMemberAdded();
|
|
} catch (err: any) {
|
|
notify({ title: 'Lỗi', message: err.message || 'Thao tác thất bại', type: 'error' });
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const handleAdd = async () => {
|
|
if (!selectedUser) return;
|
|
setSubmitting(true);
|
|
setSubmitError('');
|
|
try {
|
|
const endpoint = canCreateDirectly ? `/api/v1/tours/${tourId}/members` : `/api/v1/tours/${tourId}/join-requests`;
|
|
const body = canCreateDirectly
|
|
? { userId: selectedUser, role }
|
|
: { userId: selectedUser };
|
|
const res = await fetch(`${endpoint}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
},
|
|
body: JSON.stringify(body),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json();
|
|
throw new Error(data.message || data.error || 'Thao tác thất bại');
|
|
}
|
|
await onMemberAdded?.();
|
|
onClose();
|
|
} catch (err: any) {
|
|
setSubmitError(err.message || 'Thao tác thất bại');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (!isOpen || isPublicView) return null; // Do not render if public view
|
|
|
|
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" /> {canCreateDirectly ? 'Thành viên hành trình' : 'Mời tham gia tour'}
|
|
</h2>
|
|
<p className="text-xs text-gray-500">
|
|
{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">
|
|
<X className="w-5 h-5 text-gray-400" />
|
|
</button>
|
|
</div>
|
|
|
|
{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">
|
|
{participants.filter(p => p.user || p.displayName).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;
|
|
const memberName = p.user?.name || p.displayName || p.userId || 'Thành viên';
|
|
return (
|
|
<div key={p.id} 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">
|
|
{memberName.charAt(0)}
|
|
</div>
|
|
{canRemove && (
|
|
<button
|
|
onClick={() => handleRemove(p.userId || p.id, memberName)}
|
|
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">{memberName}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
{participants.length === 0 && (
|
|
<span className="text-xs text-gray-400">Chưa có thành viên nào</span>
|
|
)}
|
|
</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">
|
|
<Clock className="w-3 h-3 text-amber-500" /> Đang chờ phê duyệt ({joinRequests.length})
|
|
</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
{(joinRequests as any[]).map((req) => (
|
|
<div key={req.id} className="flex flex-col items-center gap-1 relative">
|
|
<div className="w-10 h-10 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-600 font-bold text-sm overflow-hidden">
|
|
{req.user?.name?.charAt(0) || '?'}
|
|
</div>
|
|
<div className="absolute -top-1 -right-1 flex">
|
|
<button
|
|
type="button"
|
|
disabled={actionLoading === req.id}
|
|
onClick={() => handleRequestAction(req.id, 'accept')}
|
|
className="w-4 h-4 bg-green-500 hover:bg-green-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50"
|
|
aria-label="Accept"
|
|
>
|
|
+
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={actionLoading === req.id}
|
|
onClick={() => handleRequestAction(req.id, 'reject')}
|
|
className="w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50 -ml-1"
|
|
aria-label="Reject"
|
|
>
|
|
x
|
|
</button>
|
|
</div>
|
|
<span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{req.user?.name || req.userId}</span>
|
|
<span className="text-[9px] font-bold text-amber-600 bg-amber-100 px-1.5 py-0.5 rounded-full border border-amber-200">PENDING</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<hr className="border-gray-100" />
|
|
|
|
{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={onClose}
|
|
className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors"
|
|
>
|
|
Đó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>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|