Thêm tính năng owner có thể thêm thành viên, member thêm thành viên sẽ pending

.continue/config.yaml

@@ -0,0 +1,8 @@
+name: Local Config
+version: 1.0.0
+schema: v1
+models:
+  - name: Autodetect
+    provider: lmstudio
+    model: AUTODETECT
+    apiBase: http://192.168.1.12:1234/v1/

.kilo/kilo.jsonc

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://app.kilo.ai/config.json"
+}

AddMemberModal.tsx

@@ -1,16 +1,18 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { X, Search, UserPlus, Loader2, Shield, Trash2 } from 'lucide-react';
+import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock, Check } from 'lucide-react';
 
 interface AddMemberModalProps {
   isOpen: boolean;
   onClose: () => void;
   tourId: string;
   participants?: Array<{ userId: string; role: string; user?: { id: string; name: string; email: string } }>;
+  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;
 }
 
-export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], onRemoveMember, onMemberAdded }) => {
+export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole }) => {
   const [query, setQuery] = useState('');
   const [users, setUsers] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
@@ -21,10 +23,14 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
   const [submitError, setSubmitError] = useState('');
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [confirmTarget, setConfirmTarget] = useState<{ userId: string; name: string } | null>(null);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
 
   const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [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 fetchUsers = async () => {
     setLoading(true);
     setFetchError('');
@@ -76,28 +82,56 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
     }
   };
 
+  const handleRequestAction = async (reqId: string, action: 'accept' | 'reject', userName: string) => {
+    if (!onMemberAdded) return;
+    setActionLoading(reqId);
+    try {
+      const API_BASE = `http://${window.location.hostname}:3001`;
+      const endpoint = action === 'accept'
+        ? `${API_BASE}/api/v1/tours/${tourId}/join-requests/${reqId}/accept`
+        : `${API_BASE}/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) {
+      alert(err.message || 'Thao tác thất bại');
+    } finally {
+      setActionLoading(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`, {
+      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(`${API_BASE}${endpoint}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${localStorage.getItem('token')}`,
         },
-        body: JSON.stringify({ userId: selectedUser, role }),
+        body: JSON.stringify(body),
       });
       if (!res.ok) {
         const data = await res.json();
-        throw new Error(data.message || 'Thêm thành viên thất bại');
+        throw new Error(data.message || data.error || 'Thao tác thất bại');
       }
-      onMemberAdded?.();
+      await onMemberAdded?.();
       onClose();
     } catch (err: any) {
-      setSubmitError(err.message || 'Thêm thành viên thất bại');
+      setSubmitError(err.message || 'Thao tác thất bại');
     } finally {
       setSubmitting(false);
     }
@@ -112,9 +146,11 @@ 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" /> Thêm thành viên
+              <UserPlus className="w-5 h-5 text-blue-600" /> {canCreateDirectly ? 'Thêm thành viên' : 'Mời tham gia tour'}
             </h2>
-            <p className="text-xs text-gray-500">Chọn người dùng và phân quyền cho tour này.</p>
+            <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.'}
+            </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" />
@@ -163,31 +199,61 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
             </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
-              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>
+          {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', req.user?.name || req.userId)}
+                        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', req.user?.name || req.userId)}
+                        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>
+          )}
 
-          <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>
+          {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>
+          )}
 
           <div className="space-y-2">
             {fetchError && (
@@ -210,9 +276,10 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                     <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) || '?'}
@@ -250,7 +317,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
             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'}
+            {submitting ? 'Đang xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời'}
           </button>
         </div>
       </div>

ConfirmModal.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  isOpen,
+  title = 'Xác nhận',
+  message,
+  confirmText = 'Xác nhận',
+  cancelText = 'Hủy',
+  onConfirm,
+  onCancel,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[2200] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-gray-900/70 backdrop-blur-sm" onClick={onCancel} />
+      <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">{title}</h3>
+        <p className="mt-2 text-sm text-gray-600">{message}</p>
+        <div className="mt-4 flex justify-end gap-2">
+          <button onClick={onCancel} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
+            {cancelText}
+          </button>
+          <button onClick={onConfirm} className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors">
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

ExploreMap.tsx

@@ -152,37 +152,37 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
         
         <MarkerClusterGroup chunkedLoading>
           {publicTours.map((tour) => {
-          const startLoc = tour.legs?.[0]?.locations?.[0];
-          if (!startLoc) return null;
+            const startLoc = tour.legs?.[0]?.locations?.[0];
+            const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
+            const markerPos = startLoc
+              ? [startLoc.latitude, startLoc.longitude] as [number, number]
+              : userPos;
 
-          const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
-
-          return (
-            <React.Fragment key={tour.id}>
-              {/* Tour Marker - Bong bóng chứa thumbnail. Click chuyển vào Dashboard */}
-              <Marker 
-                position={[startLoc.latitude, startLoc.longitude]}
-                eventHandlers={{
-                  click: () => onViewTour(tour.id)
-                }}
-                icon={L.divIcon({
-                  className: 'custom-bubble',
-                  html: `
-                    <div class="relative group">
-                      <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
-                        <img src="${tourImage}" class="w-full h-full object-cover" />
+            return (
+              <React.Fragment key={tour.id}>
+                <Marker
+                  position={markerPos}
+                  eventHandlers={{
+                    click: () => onViewTour(tour.id)
+                  }}
+                  icon={L.divIcon({
+                    className: 'custom-bubble',
+                    html: `
+                      <div class="relative group">
+                        <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
+                          <img src="${tourImage}" class="w-full h-full object-cover" />
+                        </div>
+                        <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
+                          S
+                        </div>
                       </div>
-                      <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
-                        S
-                      </div>
-                    </div>
-                  `,
-                  iconSize: [48, 48],
-                  iconAnchor: [24, 24]
-                })}
-              />
-            </React.Fragment>
-          );
+                    `,
+                    iconSize: [48, 48],
+                    iconAnchor: [24, 24]
+                  })}
+                />
+              </React.Fragment>
+            );
           })}
         </MarkerClusterGroup>
       </MapContainer>

ItineraryTimeline.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
 import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
+import { ConfirmModal } from './ConfirmModal.js';
 
 const TimeVariance = ({ planned, actual }: { planned: string, actual: string | null }) => {
   if (!actual) return null;
@@ -40,6 +41,7 @@ export const ItineraryTimeline = ({
   onEditLocation 
 }: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void }) => {
   const { currentTour, legs, optimizeRouting, userRole, addLeg, updateLeg, deleteLeg, initializeLegs, deleteLocation } = useTourStore();
+  const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
 
   const toggleComplete = async (locationId: string) => {
     // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
@@ -69,21 +71,35 @@ export const ItineraryTimeline = ({
   };
 
   const handleDeleteLeg = async (legId: string) => {
-    if (window.confirm("Bạn có chắc chắn muốn xóa chặng này?")) {
-      try {
-        await deleteLeg(legId);
-      } catch (err: any) {
-        alert(err.message);
-      }
-    }
+    setConfirmState({
+      open: true,
+      title: 'Xóa chặng',
+      message: 'Bạn có chắc chắn muốn xóa chặng này?',
+      onConfirm: async () => {
+        try {
+          await deleteLeg(legId);
+        } catch (err: any) {
+          alert(err.message);
+        } finally {
+          setConfirmState({ open: false });
+        }
+      },
+    });
   };
 
   const handleDeleteLocation = async (id: string) => {
-    if (window.confirm("Bạn có chắc chắn muốn xóa địa điểm này?")) {
-      try {
-        await deleteLocation(id);
-      } catch (err: any) { alert(err.message); }
-    }
+    setConfirmState({
+      open: true,
+      title: 'Xóa địa điểm',
+      message: 'Bạn có chắc chắn muốn xóa địa điểm này?',
+      onConfirm: async () => {
+        try {
+          await deleteLocation(id);
+        } catch (err: any) { alert(err.message); } finally {
+          setConfirmState({ open: false });
+        }
+      },
+    });
   };
 
   return (
@@ -338,6 +354,13 @@ export const ItineraryTimeline = ({
           </div>
         )}
       </div>
+      <ConfirmModal
+        isOpen={confirmState.open}
+        title={confirmState.title}
+        message={confirmState.message}
+        onConfirm={() => confirmState.onConfirm?.()}
+        onCancel={() => setConfirmState({ open: false })}
+      />
     </div>
   );
 };

TourDetailPage.tsx

@@ -4,6 +4,8 @@ import { ExpenseManager } from './ExpenseManager.js';
 import { useTourStore } from './useTourStore.js';
 import { AddLocationModal } from './AddLocationModal.js';
 import { AddMemberModal } from './AddMemberModal.js';
+import { ConfirmModal } from './ConfirmModal.js';
+import { NotificationModal, useNotificationModal } from './components/NotificationModal.js';
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
@@ -21,7 +23,10 @@ import {
   List,
   Map as MapIconLucide,
   MapPin,
-  Flag
+  Flag,
+  Clock,
+  Check,
+  X
 } from 'lucide-react';
 import L from 'leaflet';
 
@@ -164,6 +169,20 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
   const [targetLegId, setTargetLegId] = useState<string | null>(null);
   const [editingLocation, setEditingLocation] = useState<any>(null);
+  const [selectedMember, setSelectedMember] = useState<any>(null);
+  const [isMemberDetailOpen, setIsMemberDetailOpen] = useState(false);
+  const [joinRequests, setJoinRequests] = useState<any[]>([]);
+  const [joinRequestActionId, setJoinRequestActionId] = useState<string | null>(null);
+  const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
+
+  const { 
+    currentTour, legs, fetchTour, fetchPublicTours, publicTours, 
+    userRole, mapCenter, setMapCenter, updateTourStartPoint, 
+    updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember,
+    fetchJoinRequests, acceptJoinRequest, rejectJoinRequest
+  } = useTourStore();
+
+  const notificationModal = useNotificationModal();
 
   // Khôi phục vị trí và mức zoom từ localStorage
   const [initialViewState] = useState(() => {
@@ -175,15 +194,15 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   });
 
   // SỬA LỖI: Sử dụng các selectors riêng lẻ để tránh re-render trang khi mapCenter trong store thay đổi
-  // Gom các store actions/state lại để tối ưu hóa re-render
-  const { 
-    currentTour, legs, fetchTour, fetchPublicTours, publicTours, 
-    userRole, mapCenter, setMapCenter, updateTourStartPoint, 
-    updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember 
-  } = useTourStore();
 
   const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
 
+  useEffect(() => {
+    if (currentTour && ['OWNER', 'MANAGER'].includes(userRole || '')) {
+      fetchJoinRequests(currentTour.id).then(setJoinRequests).catch(() => setJoinRequests([]));
+    }
+  }, [currentTour, userRole]);
+
   const [mapZoom] = useState(initialViewState?.zoom || 13);
 
   // Memoize danh sách tọa độ để MapTourBounds không bị trigger thừa
@@ -391,10 +410,85 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
             {/* Member Avatars Stack */}
             <div className="flex items-center gap-2 mt-4">
-              <div className="flex -space-x-3">
+              <div className="flex flex-wrap gap-2">
                 {currentTour?.participants?.slice(0, 5).map((p: any, i: number) => (
-                  <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg">
+                  <button
+                    key={p.userId || i}
+                    onClick={() => {
+                      setSelectedMember(p);
+                      setIsMemberDetailOpen(true);
+                    }}
+                    className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform"
+                    title={p.user?.name || p.userId}
+                  >
                     <img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
+                  </button>
+                ))}
+                {joinRequests.slice(0, 3).map((req: any) => (
+                  <div key={req.id} className="relative group">
+                    <div className="w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg">
+                      {req.user?.name?.charAt(0) || '?'}
+                    </div>
+                      <div className="absolute -top-1 -right-1 flex">
+                        <button
+                          type="button"
+                          disabled={joinRequestActionId === req.id}
+                          onClick={async (e) => {
+                            e.stopPropagation();
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Chấp nhận yêu cầu',
+                              message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await acceptJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          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={joinRequestActionId === req.id}
+                          onClick={async (e) => {
+                            e.stopPropagation();
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Từ chối yêu cầu',
+                              message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await rejectJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          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>
                   </div>
                 ))}
                 {tourInfo.membersCount > 5 && (
@@ -403,18 +497,18 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                   </div>
                 )}
               </div>
-               <button 
-  onClick={() => {
-                    if (!currentTour) return;
-                    if (canEdit) setIsAddMemberOpen(true);
-                  }}
-  disabled={!canEdit}
-  className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
-                    canEdit ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
-                  }`}
->
-                 <Plus className="w-4 h-4" />
-               </button>
+              <button
+                onClick={() => {
+                  if (!currentTour) return;
+                  if (canEdit) setIsAddMemberOpen(true);
+                }}
+                disabled={!canEdit}
+                className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
+                  canEdit ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
+                }`}
+              >
+                <Plus className="w-4 h-4" />
+              </button>
             </div>
           </div>
         </div>
@@ -594,9 +688,94 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
           )}
 
           {activeTab === 'settings' && (
-            <div className="p-8 text-center bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95">
-              <Settings className="w-12 h-12 text-gray-300 mx-auto mb-4" />
-              <p className="text-gray-500 font-medium">Tính năng quản lý thành viên đang được cập nhật...</p>
+            <div className="space-y-4">
+              <div className="p-6 bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95">
+                <div className="flex items-center gap-3 mb-4">
+                  <Clock className="w-6 h-6 text-blue-500" />
+                  <h3 className="text-lg font-bold text-gray-900">Yêu cầu tham gia</h3>
+                  <span className="text-xs font-bold text-gray-500 bg-gray-100 px-2 py-1 rounded-full">{joinRequests.length} đang chờ</span>
+                </div>
+                <div className="space-y-2">
+                  {joinRequests.map((req: any) => (
+                    <div key={req.id} className="flex items-center justify-between gap-3 p-3 rounded-2xl border border-gray-100 bg-white">
+                      <div className="flex items-center gap-3">
+                        <div className="w-9 h-9 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-700 font-bold text-sm">
+                          {req.user?.name?.charAt(0) || '?'}
+                        </div>
+                        <div>
+                          <div className="text-sm font-bold text-gray-800">{req.user?.name || req.userId}</div>
+                          <div className="text-[11px] text-gray-500">
+                            Được mời bởi {req.requestedBy?.name} • {new Date(req.createdAt).toLocaleString('vi-VN')}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex gap-2">
+                        <button
+                          disabled={joinRequestActionId === req.id}
+                          onClick={async () => {
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Chấp nhận yêu cầu',
+                              message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await acceptJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          className="p-2 rounded-xl bg-green-50 text-green-700 hover:bg-green-100 disabled:opacity-50"
+                          aria-label="Accept"
+                        >
+                          <Check className="w-4 h-4" />
+                        </button>
+                        <button
+                          disabled={joinRequestActionId === req.id}
+                          onClick={async () => {
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Từ chối yêu cầu',
+                              message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await rejectJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          className="p-2 rounded-xl bg-red-50 text-red-700 hover:bg-red-100 disabled:opacity-50"
+                          aria-label="Reject"
+                        >
+                          <X className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                  {joinRequests.length === 0 && (
+                    <div className="text-center py-8 text-sm text-gray-500">Không có yêu cầu tham gia nào đang chờ phê duyệt.</div>
+                  )}
+                </div>
+              </div>
+              <div className="p-8 text-center bg-gray-50 rounded-3xl border border-dashed border-gray-200">
+                <Settings className="w-10 h-10 text-gray-300 mx-auto mb-3" />
+                <p className="text-gray-500 font-medium">Tính năng cài đặt khác đang được cập nhật...</p>
+              </div>
             </div>
           )}
         </div>
@@ -624,8 +803,10 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
           onClose={() => setIsAddMemberOpen(false)}
           tourId={currentTour.id}
           participants={currentTour.participants || []}
+          joinRequests={joinRequests}
           onRemoveMember={(userId) => removeMember(currentTour.id, userId)}
           onMemberAdded={() => fetchTour(currentTour.id)}
+          userRole={userRole || undefined}
         />
       )}
 
@@ -639,6 +820,75 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
           tourId={currentTour.id} 
         />
       )}
+
+      {/* Member Detail Popover */}
+      {isMemberDetailOpen && selectedMember && (
+        <div className="fixed inset-0 z-[2100] flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={() => setIsMemberDetailOpen(false)} />
+          <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
+            <div className="flex items-center gap-3">
+              <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">
+                {selectedMember.user?.name?.charAt(0) || '?'}
+              </div>
+              <div>
+                <div className="text-base font-bold text-gray-900">{selectedMember.user?.name || 'Chưa đặt tên'}</div>
+                <div className="text-xs text-gray-500">{selectedMember.user?.email}</div>
+                <div className="text-[10px] font-semibold text-gray-500">{selectedMember.role}</div>
+              </div>
+            </div>
+            {(selectedMember.user?.phone || selectedMember.user?.address) && (
+              <div className="mt-3 text-xs text-gray-600 space-y-1">
+                {selectedMember.user?.phone && <div>📞 {selectedMember.user.phone}</div>}
+                {selectedMember.user?.address && <div>📍 {selectedMember.user.address}</div>}
+              </div>
+            )}
+            <div className="mt-4 flex justify-end gap-2">
+              <button onClick={() => setIsMemberDetailOpen(false)} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100">Đóng</button>
+              {canEdit && selectedMember.role !== 'OWNER' && (
+                <button
+                  onClick={async () => {
+                    if (!currentTour || !selectedMember) return;
+                    try {
+                      await removeMember(currentTour.id, selectedMember.userId);
+                      setIsMemberDetailOpen(false);
+                    } catch (e) {
+                      notificationModal.openModal('Thông báo', 'Không thể xóa thành viên', 'error');
+                    }
+                  }}
+                  className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold"
+                >
+                  Xóa
+                </button>
+              )}
+              {canEdit && selectedMember.role === 'OWNER' && (
+                <button
+                  onClick={() => {
+                    setIsMemberDetailOpen(false);
+                    setIsAddMemberOpen(true);
+                  }}
+                  className="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-sm font-bold"
+                >
+                  Mời thêm người
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+      <ConfirmModal
+        isOpen={confirmState.open}
+        title={confirmState.title}
+        message={confirmState.message}
+        onConfirm={() => confirmState.onConfirm?.()}
+        onCancel={() => setConfirmState({ open: false })}
+      />
+      <NotificationModal
+        isOpen={notificationModal.modalState?.isOpen ?? false}
+        title={notificationModal.modalState?.title}
+        message={notificationModal.modalState?.message}
+        type={notificationModal.modalState?.type}
+        onConfirm={() => notificationModal.closeModal()}
+      />
     </div>
   );
 };

components/NotificationModal.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+
+// Types for notification modal
+export interface NotificationModalProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  type?: 'info' | 'success' | 'warning' | 'error';
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+// Icon components for different types
+const Icons = {
+  info: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+      <path d="M12 16v-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="M12 8h.01" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  ),
+  success: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+      <path d="M8 12l2.5 2.5L15.5 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  warning: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" strokeWidth="2" />
+      <line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="12" cy="17" r="1" fill="currentColor" />
+    </svg>
+  ),
+  error: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+      <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  ),
+};
+
+// Default props
+const defaultProps: Partial<NotificationModalProps> = {
+  title: 'Thông báo',
+  type: 'info',
+  confirmButtonText: 'OK',
+  cancelButtonText: 'Hủy',
+};
+
+export const NotificationModal: React.FC<NotificationModalProps> = ({
+  isOpen,
+  title = defaultProps.title,
+  message,
+  onConfirm,
+  onCancel,
+  type = defaultProps.type,
+  confirmButtonText = defaultProps.confirmButtonText,
+  cancelButtonText = defaultProps.cancelButtonText,
+}) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // Get colors based on type
+  const getTypeStyles = () => {
+    switch (type) {
+      case 'success':
+        return { bg: '#d4edda', border: '#c3e6cb', text: '#155724' };
+      case 'warning':
+        return { bg: '#fff3cd', border: '#ffeeba', text: '#856404' };
+      case 'error':
+        return { bg: '#f8d7da', border: '#f5c6cb', text: '#721c24' };
+      default:
+        return { bg: '#e2e3e5', border: '#d6d8db', text: '#383d41' };
+    }
+  };
+
+  const styles = getTypeStyles();
+
+  // Animation classes based on state
+  const getAnimationClass = () => {
+    if (!isOpen) return 'opacity-0 translate-y-4';
+    if (isAnimating && onCancel) return 'animate-fade-out';
+    return 'animate-fade-in';
+  };
+
+  // Handle confirm click
+  const handleConfirm = () => {
+    setIsAnimating(true);
+    onConfirm?.();
+    setTimeout(() => setIsAnimating(false), 300);
+  };
+
+  // Handle cancel click
+  const handleCancel = () => {
+    setIsAnimating(true);
+    onCancel?.();
+    setTimeout(() => setIsAnimating(false), 300);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
+      <div
+        className={`bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 ${getAnimationClass()}`}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-message"
+      >
+        {/* Header */}
+        <div className={`p-6 border-b ${styles.border}`}>
+          <div className="flex items-center gap-3">
+            {type === 'success' && <Icons.success className="w-5 h-5 text-green-600" />}
+            {type === 'warning' && <Icons.warning className="w-5 h-5 text-yellow-600" />}
+            {type === 'error' && <Icons.error className="w-5 h-5 text-red-600" />}
+            {type === 'info' && <Icons.info className="w-5 h-5 text-blue-600" />}
+            <h2 id="modal-title" className={`text-xl font-semibold ${styles.text}`}>
+              {title}
+            </h2>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-6">
+          <p id="modal-message" className="text-gray-700 leading-relaxed">{message}</p>
+        </div>
+
+        {/* Footer */}
+        <div className={`px-6 py-4 flex justify-end gap-3 border-t ${styles.border}`}>
+          {onCancel && (
+            <button
+              onClick={handleCancel}
+              className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
+            >
+              {cancelButtonText}
+            </button>
+          )}
+          {onConfirm && (
+            <button
+              onClick={handleConfirm}
+              className={`px-4 py-2 text-white rounded-md font-medium transition-colors ${
+                type === 'error'
+                  ? 'bg-red-600 hover:bg-red-700'
+                  : 'bg-blue-600 hover:bg-blue-700'
+              }`}
+            >
+              {confirmButtonText}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Hook for easy usage without props management
+export const useNotificationModal = () => {
+  const [modalState, setModalState] = useState<{
+    isOpen: boolean;
+    title?: string;
+    message: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    onConfirm?: () => void;
+    onCancel?: () => void;
+  } | null>(null);
+
+  const openModal = (
+    title: string,
+    message: string,
+    type: 'info' | 'success' | 'warning' | 'error' = 'info',
+    onConfirm?: () => void,
+    onCancel?: () => void,
+  ) => {
+    setModalState({
+      isOpen: true,
+      title,
+      message,
+      type,
+      onConfirm,
+      onCancel,
+    });
+
+    // Auto-close after 5 seconds if no confirm action
+    const timer = setTimeout(() => {
+      if (onCancel) {
+        setModalState((prev) => ({ ...prev, isOpen: false }));
+      }
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  };
+
+  const closeModal = () => {
+    setModalState((prev) => prev ? { ...prev, isOpen: false } : null);
+  };
+
+  return {
+    modalState,
+    openModal,
+    closeModal,
+  };
+};
+
+export default NotificationModal;

dist/AddMemberModal.d.ts

@@ -12,8 +12,20 @@ interface AddMemberModalProps {
             email: string;
         };
     }>;
+    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;
 }
 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, useMemo } from 'react';
-import { X, Search, UserPlus, Loader2, Shield, Trash2 } from 'lucide-react';
-export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], onRemoveMember, onMemberAdded }) => {
+import { X, UserPlus, Loader2, Shield, Trash2, Clock } from 'lucide-react';
+export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole }) => {
     const [query, setQuery] = useState('');
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -12,8 +12,11 @@ export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], onR
     const [submitError, setSubmitError] = useState('');
     const [isConfirmOpen, setIsConfirmOpen] = useState(false);
     const [confirmTarget, setConfirmTarget] = useState(null);
+    const [actionLoading, setActionLoading] = useState(null);
     const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [participants]);
+    const requestUserIds = useMemo(() => new Set(joinRequests.map((r) => r.userId)), [joinRequests]);
     const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
+    const canCreateDirectly = !userRole || userRole === 'OWNER' || userRole === 'MANAGER';
     const fetchUsers = async () => {
         setLoading(true);
         setFetchError('');
@@ -68,6 +71,32 @@ export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], onR
             setConfirmTarget(null);
         }
     };
+    const handleRequestAction = async (reqId, action, userName) => {
+        if (!onMemberAdded)
+            return;
+        setActionLoading(reqId);
+        try {
+            const API_BASE = `http://${window.location.hostname}:3001`;
+            const endpoint = action === 'accept'
+                ? `${API_BASE}/api/v1/tours/${tourId}/join-requests/${reqId}/accept`
+                : `${API_BASE}/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) {
+            alert(err.message || 'Thao tác thất bại');
+        }
+        finally {
+            setActionLoading(null);
+        }
+    };
     const handleAdd = async () => {
         if (!selectedUser)
             return;
@@ -75,23 +104,27 @@ export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], onR
         setSubmitError('');
         try {
             const API_BASE = `http://${window.location.hostname}:3001`;
-            const res = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
+            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(`${API_BASE}${endpoint}`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     'Authorization': `Bearer ${localStorage.getItem('token')}`,
                 },
-                body: JSON.stringify({ userId: selectedUser, role }),
+                body: JSON.stringify(body),
             });
             if (!res.ok) {
                 const data = await res.json();
-                throw new Error(data.message || 'Thêm thành viên thất bại');
+                throw new Error(data.message || data.error || 'Thao tác thất bại');
             }
-            onMemberAdded?.();
+            await onMemberAdded?.();
             onClose();
         }
         catch (err) {
-            setSubmitError(err.message || 'Thêm thành viên thất bại');
+            setSubmitError(err.message || 'Thao tác thất bại');
         }
         finally {
             setSubmitting(false);
@@ -99,7 +132,7 @@ export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], onR
     };
     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", { 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) => {
+    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" }), " ", canCreateDirectly ? 'Thêm thành viên' : 'Mời tham gia tour'] }), _jsx("p", { className: "text-xs text-gray-500", children: 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.' })] }), _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 {
@@ -113,9 +146,9 @@ export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], onR
                                                 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) => {
+                                            }), participants.length === 0 && (_jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 th\u00E0nh vi\u00EAn n\u00E0o" }))] })] }), joinRequests.length > 0 && (_jsxs("div", { children: [_jsxs("p", { className: "text-[11px] font-bold text-gray-500 mb-2 flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3 text-amber-500" }), " \u0110ang ch\u1EDD ph\u00EA duy\u1EC7t (", joinRequests.length, ")"] }), _jsx("div", { className: "flex flex-wrap gap-3", children: joinRequests.map((req) => (_jsxs("div", { className: "flex flex-col items-center gap-1 relative", children: [_jsx("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", children: req.user?.name?.charAt(0) || '?' }), _jsxs("div", { className: "absolute -top-1 -right-1 flex", children: [_jsx("button", { type: "button", disabled: actionLoading === req.id, onClick: () => handleRequestAction(req.id, 'accept', req.user?.name || req.userId), 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", children: "+" }), _jsx("button", { type: "button", disabled: actionLoading === req.id, onClick: () => handleRequestAction(req.id, 'reject', req.user?.name || req.userId), 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", children: "x" })] }), _jsx("span", { className: "text-[10px] font-semibold text-gray-700 max-w-[72px] truncate", children: req.user?.name || req.userId }), _jsx("span", { className: "text-[9px] font-bold text-amber-600 bg-amber-100 px-1.5 py-0.5 rounded-full border border-amber-200", children: "PENDING" })] }, req.id))) })] })), canCreateDirectly && (_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 && 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" })] })] })] }))] }));
+                                                return (_jsxs("button", { 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' : ''}`, 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 && 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 xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời' })] })] }), 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/ConfirmModal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ConfirmModalProps {
+    isOpen: boolean;
+    title?: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export declare const ConfirmModal: React.FC<ConfirmModalProps>;
+export {};

dist/ConfirmModal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ConfirmModal = ({ isOpen, title = 'Xác nhận', message, confirmText = 'Xác nhận', cancelText = 'Hủy', onConfirm, onCancel, }) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-[2200] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/70 backdrop-blur-sm", onClick: onCancel }), _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: title }), _jsx("p", { className: "mt-2 text-sm text-gray-600", children: message }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { onClick: onCancel, className: "px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: cancelText }), _jsx("button", { onClick: onConfirm, className: "px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors", children: confirmText })] })] })] }));
+};
+//# sourceMappingURL=ConfirmModal.js.map

dist/ConfirmModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../ConfirmModal.tsx"],"names":[],"mappings":";AAaA,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,MAAM,EACN,KAAK,GAAG,UAAU,EAClB,OAAO,EACP,WAAW,GAAG,UAAU,EACxB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,QAAQ,GACT,EAAE,EAAE;IACH,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,CACL,eAAK,SAAS,EAAC,6DAA6D,aAC1E,cAAK,SAAS,EAAC,kDAAkD,EAAC,OAAO,EAAE,QAAQ,GAAI,EACvF,eAAK,SAAS,EAAC,8DAA8D,aAC3E,aAAI,SAAS,EAAC,mCAAmC,YAAE,KAAK,GAAM,EAC9D,YAAG,SAAS,EAAC,4BAA4B,YAAE,OAAO,GAAK,EACvD,eAAK,SAAS,EAAC,6BAA6B,aAC1C,iBAAQ,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,0FAA0F,YAC5H,UAAU,GACJ,EACT,iBAAQ,OAAO,EAAE,SAAS,EAAE,SAAS,EAAC,iGAAiG,YACpI,WAAW,GACL,IACL,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

dist/ExploreMap.js

@@ -70,23 +70,24 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }) => {
     }, []);
     return (_jsxs("div", { className: "h-screen w-full relative", children: [_jsx("button", { onClick: onBack, className: "absolute top-6 left-6 z-[1000] bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all", children: _jsx(X, { className: "w-6 h-6 text-gray-800" }) }), onLogout && (_jsxs("button", { onClick: onLogout, className: "absolute top-6 right-6 z-[1000] bg-white px-4 py-3 rounded-2xl shadow-xl hover:bg-red-50 hover:text-red-600 transition-all flex items-center gap-2 font-bold text-gray-700", children: [_jsx(LogOut, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "\u0110\u0103ng xu\u1EA5t" })] })), user?.isAdmin && (_jsxs("button", { onClick: () => setIsAdminModalOpen(true), className: "absolute top-6 right-40 z-[1000] bg-blue-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-blue-700 text-white transition-all flex items-center gap-2 font-bold", children: [_jsx(Settings, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "Qu\u1EA3n l\u00FD h\u1EC7 th\u1ED1ng" })] })), user && (_jsxs("button", { onClick: () => setIsCreateModalOpen(true), className: "absolute top-6 right-80 z-[1000] bg-green-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-green-700 text-white transition-all flex items-center gap-2 font-bold", children: [_jsx(Navigation, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "T\u1EA1o Tour m\u1EDBi" })] })), _jsx("div", { className: "absolute top-6 left-20 z-[1000] bg-white/90 backdrop-blur-md px-6 py-3 rounded-2xl shadow-xl border border-white/20 hidden sm:block", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Navigation, { className: "w-4 h-4 text-blue-600" }), _jsx("span", { className: "font-bold text-gray-800", children: "\u0110ang kh\u00E1m ph\u00E1 khu v\u1EF1c c\u1EE7a b\u1EA1n" })] }) }), _jsxs(MapContainer, { center: userPos, zoom: mapZoom, className: "h-full w-full", preferCanvas: true, children: [_jsx(TileLayer, { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: '\u00A9 OpenStreetMap contributors' }), _jsx(MapTracker, {}), _jsx(RecenterMap, { position: userPos }), _jsx(MarkerClusterGroup, { chunkedLoading: true, children: publicTours.map((tour) => {
                             const startLoc = tour.legs?.[0]?.locations?.[0];
-                            if (!startLoc)
-                                return null;
                             const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
-                            return (_jsx(React.Fragment, { children: _jsx(Marker, { position: [startLoc.latitude, startLoc.longitude], eventHandlers: {
+                            const markerPos = startLoc
+                                ? [startLoc.latitude, startLoc.longitude]
+                                : userPos;
+                            return (_jsx(React.Fragment, { children: _jsx(Marker, { position: markerPos, eventHandlers: {
                                         click: () => onViewTour(tour.id)
                                     }, icon: L.divIcon({
                                         className: 'custom-bubble',
                                         html: `
-                    <div class="relative group">
-                      <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
-                        <img src="${tourImage}" class="w-full h-full object-cover" />
+                      <div class="relative group">
+                        <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
+                          <img src="${tourImage}" class="w-full h-full object-cover" />
+                        </div>
+                        <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
+                          S
+                        </div>
                       </div>
-                      <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
-                        S
-                      </div>
-                    </div>
-                  `,
+                    `,
                                         iconSize: [48, 48],
                                         iconAnchor: [24, 24]
                                     }) }) }, tour.id));

dist/ItineraryTimeline.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
 import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
+import { ConfirmModal } from './ConfirmModal.js';
 const TimeVariance = ({ planned, actual }) => {
     if (!actual)
         return null;
@@ -26,6 +28,7 @@ const formatTravelTime = (minutes) => {
 };
 export const ItineraryTimeline = ({ onAddLocation, onEditLocation }) => {
     const { currentTour, legs, optimizeRouting, userRole, addLeg, updateLeg, deleteLeg, initializeLegs, deleteLocation } = useTourStore();
+    const [confirmState, setConfirmState] = useState({ open: false });
     const toggleComplete = async (locationId) => {
         console.log("Toggle status for location:", locationId);
     };
@@ -49,48 +52,64 @@ export const ItineraryTimeline = ({ onAddLocation, onEditLocation }) => {
         }
     };
     const handleDeleteLeg = async (legId) => {
-        if (window.confirm("Bạn có chắc chắn muốn xóa chặng này?")) {
-            try {
-                await deleteLeg(legId);
-            }
-            catch (err) {
-                alert(err.message);
-            }
-        }
+        setConfirmState({
+            open: true,
+            title: 'Xóa chặng',
+            message: 'Bạn có chắc chắn muốn xóa chặng này?',
+            onConfirm: async () => {
+                try {
+                    await deleteLeg(legId);
+                }
+                catch (err) {
+                    alert(err.message);
+                }
+                finally {
+                    setConfirmState({ open: false });
+                }
+            },
+        });
     };
     const handleDeleteLocation = async (id) => {
-        if (window.confirm("Bạn có chắc chắn muốn xóa địa điểm này?")) {
-            try {
-                await deleteLocation(id);
-            }
-            catch (err) {
-                alert(err.message);
-            }
-        }
+        setConfirmState({
+            open: true,
+            title: 'Xóa địa điểm',
+            message: 'Bạn có chắc chắn muốn xóa địa điểm này?',
+            onConfirm: async () => {
+                try {
+                    await deleteLocation(id);
+                }
+                catch (err) {
+                    alert(err.message);
+                }
+                finally {
+                    setConfirmState({ open: false });
+                }
+            },
+        });
     };
-    return (_jsx("div", { className: "max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen", children: _jsxs("div", { className: "px-2 pt-4", children: [legs.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200", children: [_jsx(List, { className: "w-12 h-12 text-gray-300 mx-auto mb-4" }), _jsx("p", { className: "text-gray-500 font-medium", children: "Ch\u01B0a c\u00F3 ch\u1EB7ng n\u00E0o trong l\u1ED9 tr\u00ECnh." })] })) : (legs.map((leg, legIdx) => {
-                    const totalDwellMinutes = leg.locations.reduce((acc, loc) => {
-                        if (loc.plannedStart && loc.plannedEnd) {
-                            return acc + differenceInMinutes(parseISO(loc.plannedEnd), parseISO(loc.plannedStart));
-                        }
-                        return acc;
-                    }, 0);
-                    const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
-                    return (_jsxs("div", { className: "relative mb-12 animate-in fade-in slide-in-from-bottom-4 duration-300", children: [_jsxs("div", { className: "sticky top-[136px] z-20 bg-gray-50/90 backdrop-blur-sm flex items-center mb-6 py-2 px-2", children: [_jsxs("div", { className: "font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm", children: leg.sequence }), leg.note || `Chi tiết Chặng ${leg.sequence}`] }), prevLegLastLoc && (_jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-400 uppercase tracking-widest ml-10", children: [_jsx(Navigation, { className: "w-2.5 h-2.5 rotate-90" }), " Ti\u1EBFp n\u1ED1i t\u1EEB ", prevLegLastLoc.name] }))] }), _jsxs("div", { className: "flex items-center gap-2 ml-4", children: [['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => onAddLocation?.(leg.id), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", title: "Th\u00EAm \u0111\u1ECBa \u0111i\u1EC3m v\u00E0o ch\u1EB7ng n\u00E0y", children: _jsx(Plus, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleEditLeg(leg), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", children: _jsx(Edit2, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleDeleteLeg(leg.id), className: "p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-all", children: _jsx(Trash2, { className: "w-4 h-4" }) })] })), leg.totalDistance !== undefined && (_jsxs("div", { className: "hidden sm:flex items-center gap-2", children: [_jsxs("div", { className: "text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg border border-blue-100", children: [leg.totalDistance, " km"] }), _jsxs("div", { className: "text-xs font-bold text-gray-500 bg-gray-50 px-2 py-1 rounded-lg border border-gray-100 flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "~ ", formatTravelTime(Math.round((leg.totalDistance / 35) * 60))] })] })), totalDwellMinutes > 0 && (_jsxs("div", { className: "hidden md:flex text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg border border-amber-100 items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "D\u1EEBng: ", formatTravelTime(totalDwellMinutes)] }))] }), ['OWNER', 'MANAGER'].includes(userRole || '') && legs.length > 0 && (_jsxs("button", { onClick: () => optimizeRouting(leg.id), className: "ml-auto flex items-center gap-1.5 text-xs font-bold text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-xl transition-all", children: [_jsx(Zap, { className: "w-3 h-3" }), "T\u1ED1i \u01B0u"] }))] }), _jsx("div", { className: `absolute left-6 top-16 ${legIdx === legs.length - 1 ? 'bottom-0' : 'bottom-[-3.5rem]'} w-0.5 bg-blue-100 -z-0` }), _jsx("div", { className: "ml-2", children: leg.locations.map((location, idx) => {
-                                    const nextLocation = leg.locations[idx + 1] || legs[legIdx + 1]?.locations[0];
-                                    const distanceToNext = nextLocation
-                                        ? calculateDistance(location.latitude, location.longitude, nextLocation.latitude, nextLocation.longitude)
-                                        : null;
-                                    const averageSpeed = 35;
-                                    const travelTimeMinutes = distanceToNext ? Math.round((distanceToNext / averageSpeed) * 60) : null;
-                                    const dwellMinutes = (location.plannedStart && location.plannedEnd)
-                                        ? differenceInMinutes(parseISO(location.plannedEnd), parseISO(location.plannedStart))
-                                        : null;
-                                    const locationExpense = leg.expenses?.find((e) => e.locationId === location.id);
-                                    const isStartPoint = legs[0]?.id === leg.id && idx === 0;
-                                    const isEndPoint = legs[legs.length - 1]?.id === leg.id && idx === leg.locations.length - 1;
-                                    return (_jsxs("div", { children: [_jsxs("div", { className: "relative flex group mb-6", children: [_jsx("div", { className: "z-10 mt-1.5 mr-4", children: _jsx("button", { onClick: () => toggleComplete(location.id), className: `transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`, children: location.status === 'COMPLETED' ? (_jsx(CheckCircle2, { className: "w-8 h-8 bg-white rounded-full" })) : (_jsx(Circle, { className: "w-8 h-8 bg-white rounded-full fill-white" })) }) }), _jsxs("div", { className: `flex-1 bg-white p-4 rounded-xl border transition-all duration-200 ${location.status === 'COMPLETED' ? 'border-green-100 bg-green-50/30' : 'border-gray-100 shadow-sm hover:shadow-md'}`, children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [isStartPoint && (_jsx("span", { className: "inline-block px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider", children: "\u0110i\u1EC3m b\u1EAFt \u0111\u1EA7u" })), isEndPoint && (_jsx("span", { className: "inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc" })), _jsx("h3", { className: `font-semibold text-lg ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`, children: location.name }), _jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [_jsx(MapPin, { className: "w-3 h-3 mr-1" }), _jsx("span", { className: "truncate max-w-[200px] sm:max-w-md", children: location.address })] }), location.note && (_jsx("div", { className: "mt-2 text-xs text-gray-600 bg-gray-50 p-2 rounded-lg border border-gray-100 italic", children: location.note })), dwellMinutes !== null && (_jsxs("div", { className: "flex items-center text-xs text-amber-600 font-medium mt-1", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), _jsxs("span", { children: ["Th\u1EDDi gian d\u1EEBng: ", formatTravelTime(dwellMinutes)] })] })), locationExpense && (_jsxs("div", { className: "mt-2 text-xs text-indigo-600 bg-indigo-50/80 p-2 rounded-lg border border-indigo-100 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1 font-bold", children: [_jsx(Zap, { className: "w-3 h-3" }), _jsxs("span", { children: ["Chi ph\u00ED: ", Number(locationExpense.amount).toLocaleString(), "\u0111 (", locationExpense.category, ")"] })] }), locationExpense.description && (_jsxs("div", { className: "text-[10px] text-gray-600", children: ["D\u1ECBch v\u1EE5: ", locationExpense.description] })), locationExpense.note && (_jsx("div", { className: "text-[10px] text-gray-500 italic", children: locationExpense.note })), locationExpense.paidBy && (_jsxs("div", { className: "text-[10px] font-semibold text-indigo-700", children: ["\u0110\u00E3 thanh to\u00E1n: ", locationExpense.paidBy.name] }))] }))] }), _jsxs("div", { className: "text-right flex flex-col items-end", children: [_jsxs("div", { className: "flex items-center text-sm font-medium text-blue-600", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), location.plannedStart ? format(parseISO(location.plannedStart), 'HH:mm') : '--:--'] }), location.status === 'COMPLETED' && location.actualStart && (_jsxs("div", { className: "text-[10px] text-gray-400 mt-1 italic", children: ["Th\u1EF1c t\u1EBF: ", format(parseISO(location.actualStart), 'HH:mm')] })), ['OWNER', 'MANAGER'].includes(userRole || '') && !isStartPoint && !isEndPoint && (_jsxs("div", { className: "flex gap-1 mt-2", children: [_jsx("button", { onClick: () => onEditLocation?.(location), className: "p-1 text-gray-400 hover:text-blue-600 transition-colors", children: _jsx(Edit2, { className: "w-3.5 h-3.5" }) }), _jsx("button", { onClick: () => handleDeleteLocation(location.id), className: "p-1 text-gray-400 hover:text-red-600 transition-colors", children: _jsx(Trash2, { className: "w-3.5 h-3.5" }) })] }))] })] }), _jsx(TimeVariance, { planned: location.plannedStart || '', actual: location.actualStart || null })] })] }), distanceToNext !== null && travelTimeMinutes !== null && (_jsxs("div", { className: "ml-4 -mt-4 mb-2 flex items-center gap-3", children: [_jsx("div", { className: "w-8 flex justify-center", children: _jsx(Navigation, { className: "w-3 h-3 text-blue-400 rotate-180" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[10px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100", children: [distanceToNext.toFixed(2), " km"] }), _jsxs("span", { className: "text-[10px] font-bold text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100 flex items-center gap-1", children: [_jsx(Clock, { className: "w-2.5 h-2.5" }), "~ ", formatTravelTime(travelTimeMinutes)] })] })] }))] }, location.id));
-                                }) })] }, leg.id));
-                })), ['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs("div", { className: "flex flex-col gap-3 pb-20 mt-8", children: [_jsxs("button", { onClick: handleDeclareLegs, className: "w-full py-4 rounded-2xl bg-white text-blue-600 border-2 border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(List, { className: "w-5 h-5" }), legs.length > 0 ? "Khai báo lại số lượng chặng" : "Bắt đầu bằng việc khai báo số chặng"] }), _jsxs("button", { onClick: handleAddLeg, className: "w-full py-4 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(Plus, { className: "w-5 h-5" }), " Th\u00EAm ch\u1EB7ng l\u1EBB v\u00E0o cu\u1ED1i"] })] }))] }) }));
+    return (_jsxs("div", { className: "max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen", children: [_jsxs("div", { className: "px-2 pt-4", children: [legs.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200", children: [_jsx(List, { className: "w-12 h-12 text-gray-300 mx-auto mb-4" }), _jsx("p", { className: "text-gray-500 font-medium", children: "Ch\u01B0a c\u00F3 ch\u1EB7ng n\u00E0o trong l\u1ED9 tr\u00ECnh." })] })) : (legs.map((leg, legIdx) => {
+                        const totalDwellMinutes = leg.locations.reduce((acc, loc) => {
+                            if (loc.plannedStart && loc.plannedEnd) {
+                                return acc + differenceInMinutes(parseISO(loc.plannedEnd), parseISO(loc.plannedStart));
+                            }
+                            return acc;
+                        }, 0);
+                        const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
+                        return (_jsxs("div", { className: "relative mb-12 animate-in fade-in slide-in-from-bottom-4 duration-300", children: [_jsxs("div", { className: "sticky top-[136px] z-20 bg-gray-50/90 backdrop-blur-sm flex items-center mb-6 py-2 px-2", children: [_jsxs("div", { className: "font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm", children: leg.sequence }), leg.note || `Chi tiết Chặng ${leg.sequence}`] }), prevLegLastLoc && (_jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-400 uppercase tracking-widest ml-10", children: [_jsx(Navigation, { className: "w-2.5 h-2.5 rotate-90" }), " Ti\u1EBFp n\u1ED1i t\u1EEB ", prevLegLastLoc.name] }))] }), _jsxs("div", { className: "flex items-center gap-2 ml-4", children: [['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => onAddLocation?.(leg.id), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", title: "Th\u00EAm \u0111\u1ECBa \u0111i\u1EC3m v\u00E0o ch\u1EB7ng n\u00E0y", children: _jsx(Plus, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleEditLeg(leg), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", children: _jsx(Edit2, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleDeleteLeg(leg.id), className: "p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-all", children: _jsx(Trash2, { className: "w-4 h-4" }) })] })), leg.totalDistance !== undefined && (_jsxs("div", { className: "hidden sm:flex items-center gap-2", children: [_jsxs("div", { className: "text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg border border-blue-100", children: [leg.totalDistance, " km"] }), _jsxs("div", { className: "text-xs font-bold text-gray-500 bg-gray-50 px-2 py-1 rounded-lg border border-gray-100 flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "~ ", formatTravelTime(Math.round((leg.totalDistance / 35) * 60))] })] })), totalDwellMinutes > 0 && (_jsxs("div", { className: "hidden md:flex text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg border border-amber-100 items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "D\u1EEBng: ", formatTravelTime(totalDwellMinutes)] }))] }), ['OWNER', 'MANAGER'].includes(userRole || '') && legs.length > 0 && (_jsxs("button", { onClick: () => optimizeRouting(leg.id), className: "ml-auto flex items-center gap-1.5 text-xs font-bold text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-xl transition-all", children: [_jsx(Zap, { className: "w-3 h-3" }), "T\u1ED1i \u01B0u"] }))] }), _jsx("div", { className: `absolute left-6 top-16 ${legIdx === legs.length - 1 ? 'bottom-0' : 'bottom-[-3.5rem]'} w-0.5 bg-blue-100 -z-0` }), _jsx("div", { className: "ml-2", children: leg.locations.map((location, idx) => {
+                                        const nextLocation = leg.locations[idx + 1] || legs[legIdx + 1]?.locations[0];
+                                        const distanceToNext = nextLocation
+                                            ? calculateDistance(location.latitude, location.longitude, nextLocation.latitude, nextLocation.longitude)
+                                            : null;
+                                        const averageSpeed = 35;
+                                        const travelTimeMinutes = distanceToNext ? Math.round((distanceToNext / averageSpeed) * 60) : null;
+                                        const dwellMinutes = (location.plannedStart && location.plannedEnd)
+                                            ? differenceInMinutes(parseISO(location.plannedEnd), parseISO(location.plannedStart))
+                                            : null;
+                                        const locationExpense = leg.expenses?.find((e) => e.locationId === location.id);
+                                        const isStartPoint = legs[0]?.id === leg.id && idx === 0;
+                                        const isEndPoint = legs[legs.length - 1]?.id === leg.id && idx === leg.locations.length - 1;
+                                        return (_jsxs("div", { children: [_jsxs("div", { className: "relative flex group mb-6", children: [_jsx("div", { className: "z-10 mt-1.5 mr-4", children: _jsx("button", { onClick: () => toggleComplete(location.id), className: `transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`, children: location.status === 'COMPLETED' ? (_jsx(CheckCircle2, { className: "w-8 h-8 bg-white rounded-full" })) : (_jsx(Circle, { className: "w-8 h-8 bg-white rounded-full fill-white" })) }) }), _jsxs("div", { className: `flex-1 bg-white p-4 rounded-xl border transition-all duration-200 ${location.status === 'COMPLETED' ? 'border-green-100 bg-green-50/30' : 'border-gray-100 shadow-sm hover:shadow-md'}`, children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [isStartPoint && (_jsx("span", { className: "inline-block px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider", children: "\u0110i\u1EC3m b\u1EAFt \u0111\u1EA7u" })), isEndPoint && (_jsx("span", { className: "inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc" })), _jsx("h3", { className: `font-semibold text-lg ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`, children: location.name }), _jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [_jsx(MapPin, { className: "w-3 h-3 mr-1" }), _jsx("span", { className: "truncate max-w-[200px] sm:max-w-md", children: location.address })] }), location.note && (_jsx("div", { className: "mt-2 text-xs text-gray-600 bg-gray-50 p-2 rounded-lg border border-gray-100 italic", children: location.note })), dwellMinutes !== null && (_jsxs("div", { className: "flex items-center text-xs text-amber-600 font-medium mt-1", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), _jsxs("span", { children: ["Th\u1EDDi gian d\u1EEBng: ", formatTravelTime(dwellMinutes)] })] })), locationExpense && (_jsxs("div", { className: "mt-2 text-xs text-indigo-600 bg-indigo-50/80 p-2 rounded-lg border border-indigo-100 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1 font-bold", children: [_jsx(Zap, { className: "w-3 h-3" }), _jsxs("span", { children: ["Chi ph\u00ED: ", Number(locationExpense.amount).toLocaleString(), "\u0111 (", locationExpense.category, ")"] })] }), locationExpense.description && (_jsxs("div", { className: "text-[10px] text-gray-600", children: ["D\u1ECBch v\u1EE5: ", locationExpense.description] })), locationExpense.note && (_jsx("div", { className: "text-[10px] text-gray-500 italic", children: locationExpense.note })), locationExpense.paidBy && (_jsxs("div", { className: "text-[10px] font-semibold text-indigo-700", children: ["\u0110\u00E3 thanh to\u00E1n: ", locationExpense.paidBy.name] }))] }))] }), _jsxs("div", { className: "text-right flex flex-col items-end", children: [_jsxs("div", { className: "flex items-center text-sm font-medium text-blue-600", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), location.plannedStart ? format(parseISO(location.plannedStart), 'HH:mm') : '--:--'] }), location.status === 'COMPLETED' && location.actualStart && (_jsxs("div", { className: "text-[10px] text-gray-400 mt-1 italic", children: ["Th\u1EF1c t\u1EBF: ", format(parseISO(location.actualStart), 'HH:mm')] })), ['OWNER', 'MANAGER'].includes(userRole || '') && !isStartPoint && !isEndPoint && (_jsxs("div", { className: "flex gap-1 mt-2", children: [_jsx("button", { onClick: () => onEditLocation?.(location), className: "p-1 text-gray-400 hover:text-blue-600 transition-colors", children: _jsx(Edit2, { className: "w-3.5 h-3.5" }) }), _jsx("button", { onClick: () => handleDeleteLocation(location.id), className: "p-1 text-gray-400 hover:text-red-600 transition-colors", children: _jsx(Trash2, { className: "w-3.5 h-3.5" }) })] }))] })] }), _jsx(TimeVariance, { planned: location.plannedStart || '', actual: location.actualStart || null })] })] }), distanceToNext !== null && travelTimeMinutes !== null && (_jsxs("div", { className: "ml-4 -mt-4 mb-2 flex items-center gap-3", children: [_jsx("div", { className: "w-8 flex justify-center", children: _jsx(Navigation, { className: "w-3 h-3 text-blue-400 rotate-180" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[10px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100", children: [distanceToNext.toFixed(2), " km"] }), _jsxs("span", { className: "text-[10px] font-bold text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100 flex items-center gap-1", children: [_jsx(Clock, { className: "w-2.5 h-2.5" }), "~ ", formatTravelTime(travelTimeMinutes)] })] })] }))] }, location.id));
+                                    }) })] }, leg.id));
+                    })), ['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs("div", { className: "flex flex-col gap-3 pb-20 mt-8", children: [_jsxs("button", { onClick: handleDeclareLegs, className: "w-full py-4 rounded-2xl bg-white text-blue-600 border-2 border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(List, { className: "w-5 h-5" }), legs.length > 0 ? "Khai báo lại số lượng chặng" : "Bắt đầu bằng việc khai báo số chặng"] }), _jsxs("button", { onClick: handleAddLeg, className: "w-full py-4 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(Plus, { className: "w-5 h-5" }), " Th\u00EAm ch\u1EB7ng l\u1EBB v\u00E0o cu\u1ED1i"] })] }))] }), _jsx(ConfirmModal, { isOpen: confirmState.open, title: confirmState.title, message: confirmState.message, onConfirm: () => confirmState.onConfirm?.(), onCancel: () => setConfirmState({ open: false }) })] }));
 };
 //# sourceMappingURL=ItineraryTimeline.js.map

dist/TourDetailPage.js

@@ -5,11 +5,13 @@ import { ExpenseManager } from './ExpenseManager.js';
 import { useTourStore } from './useTourStore.js';
 import { AddLocationModal } from './AddLocationModal.js';
 import { AddMemberModal } from './AddMemberModal.js';
+import { ConfirmModal } from './ConfirmModal.js';
+import { NotificationModal, useNotificationModal } from './components/NotificationModal.js';
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = _MarkerClusterGroup.default || _MarkerClusterGroup;
 import { useMap } from 'react-leaflet';
-import { Map as MapIcon, Wallet, Image as ImageIcon, Calendar, Users, ChevronLeft, Settings, Quote, Plus, List, Map as MapIconLucide, MapPin, Flag } from 'lucide-react';
+import { Map as MapIcon, Wallet, Image as ImageIcon, Calendar, Users, ChevronLeft, Settings, Quote, Plus, List, Map as MapIconLucide, MapPin, Flag, Clock, Check, X } from 'lucide-react';
 import L from 'leaflet';
 delete L.Icon.Default.prototype._getIconUrl;
 L.Icon.Default.mergeOptions({
@@ -97,6 +99,13 @@ export const TourDetailPage = ({ onBack }) => {
     const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
     const [targetLegId, setTargetLegId] = useState(null);
     const [editingLocation, setEditingLocation] = useState(null);
+    const [selectedMember, setSelectedMember] = useState(null);
+    const [isMemberDetailOpen, setIsMemberDetailOpen] = useState(false);
+    const [joinRequests, setJoinRequests] = useState([]);
+    const [joinRequestActionId, setJoinRequestActionId] = useState(null);
+    const [confirmState, setConfirmState] = useState({ open: false });
+    const { currentTour, legs, fetchTour, fetchPublicTours, publicTours, userRole, mapCenter, setMapCenter, updateTourStartPoint, updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember, fetchJoinRequests, acceptJoinRequest, rejectJoinRequest } = useTourStore();
+    const notificationModal = useNotificationModal();
     const [initialViewState] = useState(() => {
         const saved = localStorage.getItem('map_view_state');
         if (saved) {
@@ -109,8 +118,12 @@ export const TourDetailPage = ({ onBack }) => {
         }
         return null;
     });
-    const { currentTour, legs, fetchTour, fetchPublicTours, publicTours, userRole, mapCenter, setMapCenter, updateTourStartPoint, updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember } = useTourStore();
     const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
+    useEffect(() => {
+        if (currentTour && ['OWNER', 'MANAGER'].includes(userRole || '')) {
+            fetchJoinRequests(currentTour.id).then(setJoinRequests).catch(() => setJoinRequests([]));
+        }
+    }, [currentTour, userRole]);
     const [mapZoom] = useState(initialViewState?.zoom || 13);
     const allLocations = useMemo(() => legs.flatMap(l => l.locations), [legs]);
     useEffect(() => {
@@ -238,7 +251,56 @@ export const TourDetailPage = ({ onBack }) => {
         budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
         coverImage: currentTour?.photos?.[0]?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
     };
-    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsxs("div", { className: "sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 py-3 flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(ChevronLeft, { className: "w-6 h-6 text-gray-600" }) }), _jsx("h1", { className: "text-lg font-bold text-gray-800 truncate px-4", children: tourInfo.title }), _jsx("div", { className: "w-10" }), " "] }), _jsxs("div", { className: "relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end", children: [_jsx("img", { src: tourInfo.coverImage, className: "absolute inset-0 w-full h-full object-cover opacity-60", alt: "Tour Cover" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }), _jsx("div", { className: "relative z-10 p-6 text-white pt-28 pb-20", children: _jsxs("div", { className: "max-w-2xl mx-auto space-y-4", children: [_jsx("h2", { className: "text-3xl font-black tracking-tight drop-shadow-md", children: tourInfo.title }), _jsxs("div", { className: "mt-3 text-[11px] sm:text-sm font-bold text-white bg-black/40 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 inline-flex items-center max-w-full", children: [_jsx("span", { className: "text-white/60 mr-1", children: "L\u1ED9 tr\u00ECnh:" }), _jsx("span", { className: "text-blue-300", children: "\u0110i\u1EC3m xu\u1EA5t ph\u00E1t:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: startPoint?.name, children: startPoint?.name || '...' }), _jsx("span", { className: "mx-2 text-white/30", children: "-" }), _jsx("span", { className: "text-green-300", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: endPoint?.name, children: endPoint?.name || '...' })] }), _jsxs("div", { className: "flex flex-wrap gap-4 text-sm font-medium opacity-90", children: [_jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Calendar, { className: "w-4 h-4 mr-1.5" }), tourInfo.date] }), _jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Users, { className: "w-4 h-4 mr-1.5" }), tourInfo.membersCount, " th\u00E0nh vi\u00EAn"] })] }), _jsxs("div", { className: "flex items-center gap-2 mt-4", children: [_jsxs("div", { className: "flex -space-x-3", children: [currentTour?.participants?.slice(0, 5).map((p, i) => (_jsx("div", { className: "w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg", children: _jsx("img", { src: `https://i.pravatar.cc/100?u=${p.userId}`, alt: "Avatar" }) }, i))), tourInfo.membersCount > 5 && (_jsxs("div", { className: "w-10 h-10 rounded-full border-2 border-white bg-gray-800 flex items-center justify-center text-[10px] font-bold text-white shadow-lg", children: ["+", tourInfo.membersCount - 5] }))] }), _jsx("button", { onClick: () => {
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsxs("div", { className: "sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 py-3 flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(ChevronLeft, { className: "w-6 h-6 text-gray-600" }) }), _jsx("h1", { className: "text-lg font-bold text-gray-800 truncate px-4", children: tourInfo.title }), _jsx("div", { className: "w-10" }), " "] }), _jsxs("div", { className: "relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end", children: [_jsx("img", { src: tourInfo.coverImage, className: "absolute inset-0 w-full h-full object-cover opacity-60", alt: "Tour Cover" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }), _jsx("div", { className: "relative z-10 p-6 text-white pt-28 pb-20", children: _jsxs("div", { className: "max-w-2xl mx-auto space-y-4", children: [_jsx("h2", { className: "text-3xl font-black tracking-tight drop-shadow-md", children: tourInfo.title }), _jsxs("div", { className: "mt-3 text-[11px] sm:text-sm font-bold text-white bg-black/40 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 inline-flex items-center max-w-full", children: [_jsx("span", { className: "text-white/60 mr-1", children: "L\u1ED9 tr\u00ECnh:" }), _jsx("span", { className: "text-blue-300", children: "\u0110i\u1EC3m xu\u1EA5t ph\u00E1t:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: startPoint?.name, children: startPoint?.name || '...' }), _jsx("span", { className: "mx-2 text-white/30", children: "-" }), _jsx("span", { className: "text-green-300", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: endPoint?.name, children: endPoint?.name || '...' })] }), _jsxs("div", { className: "flex flex-wrap gap-4 text-sm font-medium opacity-90", children: [_jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Calendar, { className: "w-4 h-4 mr-1.5" }), tourInfo.date] }), _jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Users, { className: "w-4 h-4 mr-1.5" }), tourInfo.membersCount, " th\u00E0nh vi\u00EAn"] })] }), _jsxs("div", { className: "flex items-center gap-2 mt-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [currentTour?.participants?.slice(0, 5).map((p, i) => (_jsx("button", { onClick: () => {
+                                                        setSelectedMember(p);
+                                                        setIsMemberDetailOpen(true);
+                                                    }, className: "w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform", title: p.user?.name || p.userId, children: _jsx("img", { src: `https://i.pravatar.cc/100?u=${p.userId}`, alt: "Avatar" }) }, p.userId || i))), joinRequests.slice(0, 3).map((req) => (_jsxs("div", { className: "relative group", children: [_jsx("div", { className: "w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg", children: req.user?.name?.charAt(0) || '?' }), _jsxs("div", { className: "absolute -top-1 -right-1 flex", children: [_jsx("button", { type: "button", disabled: joinRequestActionId === req.id, onClick: async (e) => {
+                                                                        e.stopPropagation();
+                                                                        if (!currentTour)
+                                                                            return;
+                                                                        setConfirmState({
+                                                                            open: true,
+                                                                            title: 'Chấp nhận yêu cầu',
+                                                                            message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                                                                            onConfirm: async () => {
+                                                                                setJoinRequestActionId(req.id);
+                                                                                try {
+                                                                                    await acceptJoinRequest(currentTour.id, req.id);
+                                                                                    setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                }
+                                                                                catch (e) {
+                                                                                    notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                                                                }
+                                                                                finally {
+                                                                                    setJoinRequestActionId(null);
+                                                                                    setConfirmState({ open: false });
+                                                                                }
+                                                                            },
+                                                                        });
+                                                                    }, 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", children: "+" }), _jsx("button", { type: "button", disabled: joinRequestActionId === req.id, onClick: async (e) => {
+                                                                        e.stopPropagation();
+                                                                        if (!currentTour)
+                                                                            return;
+                                                                        setConfirmState({
+                                                                            open: true,
+                                                                            title: 'Từ chối yêu cầu',
+                                                                            message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                                                                            onConfirm: async () => {
+                                                                                setJoinRequestActionId(req.id);
+                                                                                try {
+                                                                                    await rejectJoinRequest(currentTour.id, req.id);
+                                                                                    setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                }
+                                                                                catch (e) {
+                                                                                    notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                                                                }
+                                                                                finally {
+                                                                                    setJoinRequestActionId(null);
+                                                                                    setConfirmState({ open: false });
+                                                                                }
+                                                                            },
+                                                                        });
+                                                                    }, 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", children: "x" })] })] }, req.id))), tourInfo.membersCount > 5 && (_jsxs("div", { className: "w-10 h-10 rounded-full border-2 border-white bg-gray-800 flex items-center justify-center text-[10px] font-bold text-white shadow-lg", children: ["+", tourInfo.membersCount - 5] }))] }), _jsx("button", { onClick: () => {
                                                 if (!currentTour)
                                                     return;
                                                 if (canEdit)
@@ -259,11 +321,68 @@ export const TourDetailPage = ({ onBack }) => {
                                                             const isEnd = endPoint?.id === loc.id;
                                                             const icon = isStart ? START_ICON : isEnd ? END_ICON : VISIT_ICON;
                                                             return (_jsx(Marker, { position: [loc.latitude, loc.longitude], icon: icon, children: _jsxs(Popup, { children: [_jsx("div", { className: "font-bold", children: loc.name }), _jsx("div", { className: "text-xs text-gray-500", children: loc.type })] }) }, loc.id));
-                                                        }) })] }), _jsx("div", { className: "absolute top-4 left-4 z-[1000] bg-white/90 backdrop-blur-md p-3 rounded-2xl text-[10px] font-bold text-gray-500 shadow-lg border border-white", children: "M\u1EB9o: Nh\u1EA5n gi\u1EEF (Mobile) ho\u1EB7c Chu\u1ED9t ph\u1EA3i \u0111\u1EC3 ghim \u0111\u1ECBa \u0111i\u1EC3m" })] }))] })), activeTab === 'expense' && (_jsx("div", { className: "animate-in fade-in slide-in-from-bottom-4", children: _jsx(ExpenseManager, {}) })), activeTab === 'photo' && (_jsx("div", { className: "grid grid-cols-3 gap-1.5 animate-in fade-in", children: [1, 2, 3, 4, 5, 6].map((i) => (_jsxs("div", { className: "aspect-square bg-gray-200 rounded-xl overflow-hidden relative group border border-white", children: [_jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" }), _jsx("img", { src: `https://picsum.photos/seed/${i + 10}/400/400`, alt: "Tour photo", className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" })] }, i))) })), activeTab === 'settings' && (_jsxs("div", { className: "p-8 text-center bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95", children: [_jsx(Settings, { className: "w-12 h-12 text-gray-300 mx-auto mb-4" }), _jsx("p", { className: "text-gray-500 font-medium", children: "T\u00EDnh n\u0103ng qu\u1EA3n l\u00FD th\u00E0nh vi\u00EAn \u0111ang \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt..." })] }))] })] }), canEdit && (_jsx("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-40", children: _jsx("button", { onClick: () => {
+                                                        }) })] }), _jsx("div", { className: "absolute top-4 left-4 z-[1000] bg-white/90 backdrop-blur-md p-3 rounded-2xl text-[10px] font-bold text-gray-500 shadow-lg border border-white", children: "M\u1EB9o: Nh\u1EA5n gi\u1EEF (Mobile) ho\u1EB7c Chu\u1ED9t ph\u1EA3i \u0111\u1EC3 ghim \u0111\u1ECBa \u0111i\u1EC3m" })] }))] })), activeTab === 'expense' && (_jsx("div", { className: "animate-in fade-in slide-in-from-bottom-4", children: _jsx(ExpenseManager, {}) })), activeTab === 'photo' && (_jsx("div", { className: "grid grid-cols-3 gap-1.5 animate-in fade-in", children: [1, 2, 3, 4, 5, 6].map((i) => (_jsxs("div", { className: "aspect-square bg-gray-200 rounded-xl overflow-hidden relative group border border-white", children: [_jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" }), _jsx("img", { src: `https://picsum.photos/seed/${i + 10}/400/400`, alt: "Tour photo", className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" })] }, i))) })), activeTab === 'settings' && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-6 bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95", children: [_jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsx(Clock, { className: "w-6 h-6 text-blue-500" }), _jsx("h3", { className: "text-lg font-bold text-gray-900", children: "Y\u00EAu c\u1EA7u tham gia" }), _jsxs("span", { className: "text-xs font-bold text-gray-500 bg-gray-100 px-2 py-1 rounded-full", children: [joinRequests.length, " \u0111ang ch\u1EDD"] })] }), _jsxs("div", { className: "space-y-2", children: [joinRequests.map((req) => (_jsxs("div", { className: "flex items-center justify-between gap-3 p-3 rounded-2xl border border-gray-100 bg-white", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-9 h-9 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-700 font-bold text-sm", children: req.user?.name?.charAt(0) || '?' }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-gray-800", children: req.user?.name || req.userId }), _jsxs("div", { className: "text-[11px] text-gray-500", children: ["\u0110\u01B0\u1EE3c m\u1EDDi b\u1EDFi ", req.requestedBy?.name, " \u2022 ", new Date(req.createdAt).toLocaleString('vi-VN')] })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { disabled: joinRequestActionId === req.id, onClick: async () => {
+                                                                            if (!currentTour)
+                                                                                return;
+                                                                            setConfirmState({
+                                                                                open: true,
+                                                                                title: 'Chấp nhận yêu cầu',
+                                                                                message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                                                                                onConfirm: async () => {
+                                                                                    setJoinRequestActionId(req.id);
+                                                                                    try {
+                                                                                        await acceptJoinRequest(currentTour.id, req.id);
+                                                                                        setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                    }
+                                                                                    catch (e) {
+                                                                                        notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                                                                    }
+                                                                                    finally {
+                                                                                        setJoinRequestActionId(null);
+                                                                                        setConfirmState({ open: false });
+                                                                                    }
+                                                                                },
+                                                                            });
+                                                                        }, className: "p-2 rounded-xl bg-green-50 text-green-700 hover:bg-green-100 disabled:opacity-50", "aria-label": "Accept", children: _jsx(Check, { className: "w-4 h-4" }) }), _jsx("button", { disabled: joinRequestActionId === req.id, onClick: async () => {
+                                                                            if (!currentTour)
+                                                                                return;
+                                                                            setConfirmState({
+                                                                                open: true,
+                                                                                title: 'Từ chối yêu cầu',
+                                                                                message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                                                                                onConfirm: async () => {
+                                                                                    setJoinRequestActionId(req.id);
+                                                                                    try {
+                                                                                        await rejectJoinRequest(currentTour.id, req.id);
+                                                                                        setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                    }
+                                                                                    catch (e) {
+                                                                                        notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                                                                    }
+                                                                                    finally {
+                                                                                        setJoinRequestActionId(null);
+                                                                                        setConfirmState({ open: false });
+                                                                                    }
+                                                                                },
+                                                                            });
+                                                                        }, className: "p-2 rounded-xl bg-red-50 text-red-700 hover:bg-red-100 disabled:opacity-50", "aria-label": "Reject", children: _jsx(X, { className: "w-4 h-4" }) })] })] }, req.id))), joinRequests.length === 0 && (_jsx("div", { className: "text-center py-8 text-sm text-gray-500", children: "Kh\u00F4ng c\u00F3 y\u00EAu c\u1EA7u tham gia n\u00E0o \u0111ang ch\u1EDD ph\u00EA duy\u1EC7t." }))] })] }), _jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-3xl border border-dashed border-gray-200", children: [_jsx(Settings, { className: "w-10 h-10 text-gray-300 mx-auto mb-3" }), _jsx("p", { className: "text-gray-500 font-medium", children: "T\u00EDnh n\u0103ng c\u00E0i \u0111\u1EB7t kh\u00E1c \u0111ang \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt..." })] })] }))] })] }), canEdit && (_jsx("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-40", children: _jsx("button", { onClick: () => {
                         setTargetLegId(null);
                         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, 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 }))] }));
+                    }, 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 || [], joinRequests: joinRequests, onRemoveMember: (userId) => removeMember(currentTour.id, userId), onMemberAdded: () => fetchTour(currentTour.id), userRole: userRole || undefined })), currentTour && (_jsx(AddLocationModal, { isOpen: isAddLocationOpen, onClose: () => setIsAddLocationOpen(false), initialLegId: targetLegId || undefined, editingLocation: editingLocation, tourId: currentTour.id })), isMemberDetailOpen && selectedMember && (_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/60 backdrop-blur-sm", onClick: () => setIsMemberDetailOpen(false) }), _jsxs("div", { className: "relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5", children: [_jsxs("div", { className: "flex items-center gap-3", 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", children: selectedMember.user?.name?.charAt(0) || '?' }), _jsxs("div", { children: [_jsx("div", { className: "text-base font-bold text-gray-900", children: selectedMember.user?.name || 'Chưa đặt tên' }), _jsx("div", { className: "text-xs text-gray-500", children: selectedMember.user?.email }), _jsx("div", { className: "text-[10px] font-semibold text-gray-500", children: selectedMember.role })] })] }), (selectedMember.user?.phone || selectedMember.user?.address) && (_jsxs("div", { className: "mt-3 text-xs text-gray-600 space-y-1", children: [selectedMember.user?.phone && _jsxs("div", { children: ["\uD83D\uDCDE ", selectedMember.user.phone] }), selectedMember.user?.address && _jsxs("div", { children: ["\uD83D\uDCCD ", selectedMember.user.address] })] })), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { onClick: () => setIsMemberDetailOpen(false), className: "px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100", children: "\u0110\u00F3ng" }), canEdit && selectedMember.role !== 'OWNER' && (_jsx("button", { onClick: async () => {
+                                            if (!currentTour || !selectedMember)
+                                                return;
+                                            try {
+                                                await removeMember(currentTour.id, selectedMember.userId);
+                                                setIsMemberDetailOpen(false);
+                                            }
+                                            catch (e) {
+                                                notificationModal.openModal('Thông báo', 'Không thể xóa thành viên', 'error');
+                                            }
+                                        }, className: "px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold", children: "X\u00F3a" })), canEdit && selectedMember.role === 'OWNER' && (_jsx("button", { onClick: () => {
+                                            setIsMemberDetailOpen(false);
+                                            setIsAddMemberOpen(true);
+                                        }, className: "px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-sm font-bold", children: "M\u1EDDi th\u00EAm ng\u01B0\u1EDDi" }))] })] })] })), _jsx(ConfirmModal, { isOpen: confirmState.open, title: confirmState.title, message: confirmState.message, onConfirm: () => confirmState.onConfirm?.(), onCancel: () => setConfirmState({ open: false }) }), _jsx(NotificationModal, { isOpen: notificationModal.modalState?.isOpen ?? false, title: notificationModal.modalState?.title, message: notificationModal.modalState?.message, type: notificationModal.modalState?.type, onConfirm: () => notificationModal.closeModal() })] }));
 };
 //# sourceMappingURL=TourDetailPage.js.map

dist/components/NotificationModal.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface NotificationModalProps {
+    isOpen: boolean;
+    title?: string;
+    message: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+}
+export declare const NotificationModal: React.FC<NotificationModalProps>;
+export declare const useNotificationModal: () => {
+    modalState: {
+        isOpen: boolean;
+        title?: string;
+        message: string;
+        type?: "info" | "success" | "warning" | "error";
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    };
+    openModal: (title: string, message: string, type?: "info" | "success" | "warning" | "error", onConfirm?: () => void, onCancel?: () => void) => () => void;
+    closeModal: () => void;
+};
+export default NotificationModal;

dist/components/NotificationModal.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const Icons = {
+    info: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 16v-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M12 8h.01", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] })),
+    success: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M8 12l2.5 2.5L15.5 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })),
+    warning: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })] })),
+    error: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
+};
+const defaultProps = {
+    title: 'Thông báo',
+    type: 'info',
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Hủy',
+};
+export const NotificationModal = ({ isOpen, title = defaultProps.title, message, onConfirm, onCancel, type = defaultProps.type, confirmButtonText = defaultProps.confirmButtonText, cancelButtonText = defaultProps.cancelButtonText, }) => {
+    const [isAnimating, setIsAnimating] = useState(false);
+    const getTypeStyles = () => {
+        switch (type) {
+            case 'success':
+                return { bg: '#d4edda', border: '#c3e6cb', text: '#155724' };
+            case 'warning':
+                return { bg: '#fff3cd', border: '#ffeeba', text: '#856404' };
+            case 'error':
+                return { bg: '#f8d7da', border: '#f5c6cb', text: '#721c24' };
+            default:
+                return { bg: '#e2e3e5', border: '#d6d8db', text: '#383d41' };
+        }
+    };
+    const styles = getTypeStyles();
+    const getAnimationClass = () => {
+        if (!isOpen)
+            return 'opacity-0 translate-y-4';
+        if (isAnimating && onCancel)
+            return 'animate-fade-out';
+        return 'animate-fade-in';
+    };
+    const handleConfirm = () => {
+        setIsAnimating(true);
+        onConfirm?.();
+        setTimeout(() => setIsAnimating(false), 300);
+    };
+    const handleCancel = () => {
+        setIsAnimating(true);
+        onCancel?.();
+        setTimeout(() => setIsAnimating(false), 300);
+    };
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4", children: _jsxs("div", { className: `bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 ${getAnimationClass()}`, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "modal-title", "aria-describedby": "modal-message", children: [_jsx("div", { className: `p-6 border-b ${styles.border}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [type === 'success' && _jsx(Icons.success, { className: "w-5 h-5 text-green-600" }), type === 'warning' && _jsx(Icons.warning, { className: "w-5 h-5 text-yellow-600" }), type === 'error' && _jsx(Icons.error, { className: "w-5 h-5 text-red-600" }), type === 'info' && _jsx(Icons.info, { className: "w-5 h-5 text-blue-600" }), _jsx("h2", { id: "modal-title", className: `text-xl font-semibold ${styles.text}`, children: title })] }) }), _jsx("div", { className: "p-6", children: _jsx("p", { id: "modal-message", className: "text-gray-700 leading-relaxed", children: message }) }), _jsxs("div", { className: `px-6 py-4 flex justify-end gap-3 border-t ${styles.border}`, children: [onCancel && (_jsx("button", { onClick: handleCancel, className: "px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors", children: cancelButtonText })), onConfirm && (_jsx("button", { onClick: handleConfirm, className: `px-4 py-2 text-white rounded-md font-medium transition-colors ${type === 'error'
+                                ? 'bg-red-600 hover:bg-red-700'
+                                : 'bg-blue-600 hover:bg-blue-700'}`, children: confirmButtonText }))] })] }) }));
+};
+export const useNotificationModal = () => {
+    const [modalState, setModalState] = useState(null);
+    const openModal = (title, message, type = 'info', onConfirm, onCancel) => {
+        setModalState({
+            isOpen: true,
+            title,
+            message,
+            type,
+            onConfirm,
+            onCancel,
+        });
+        const timer = setTimeout(() => {
+            if (onCancel) {
+                setModalState((prev) => ({ ...prev, isOpen: false }));
+            }
+        }, 5000);
+        return () => clearTimeout(timer);
+    };
+    const closeModal = () => {
+        setModalState((prev) => prev ? { ...prev, isOpen: false } : null);
+    };
+    return {
+        modalState,
+        openModal,
+        closeModal,
+    };
+};
+export default NotificationModal;
+//# sourceMappingURL=NotificationModal.js.map

dist/main.js

@@ -12,7 +12,7 @@ var __param = (this && this.__param) || function (paramIndex, decorator) {
 };
 import 'reflect-metadata';
 import { NestFactory } from '@nestjs/core';
-import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query } from '@nestjs/common';
+import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query, ForbiddenException } from '@nestjs/common';
 import { PrismaService } from './prisma.service.js';
 import 'dotenv/config';
 import * as bcrypt from 'bcrypt';
@@ -126,6 +126,11 @@ let TourController = class TourController {
                         note: 'Chặng khởi đầu'
                     }
                 }
+            },
+            include: {
+                participants: {
+                    include: { user: { select: { id: true, name: true, email: true } } }
+                }
             }
         });
     }
@@ -337,6 +342,28 @@ let TourController = class TourController {
                 include: { user: { select: { id: true, name: true, email: true } } },
             });
         }
+        let currentRole = req.user.tourParticipation?.role;
+        if (!currentRole) {
+            const participation = await this.prisma.tourParticipant.findUnique({
+                where: { tourId_userId: { tourId, userId: req.user.id } },
+            });
+            currentRole = participation?.role;
+        }
+        if (!currentRole || !(currentRole === 'OWNER' || currentRole === 'MANAGER')) {
+            const joinRequest = await this.prisma.joinRequest.create({
+                data: {
+                    tourId,
+                    userId: body.userId,
+                    requestedById: req.user.id,
+                    status: 'PENDING',
+                },
+                include: {
+                    user: { select: { id: true, name: true, email: true } },
+                    requestedBy: { select: { id: true, name: true, email: true } },
+                },
+            });
+            return { ...joinRequest, pendingApproval: true };
+        }
         return this.prisma.tourParticipant.create({
             data: {
                 tourId,
@@ -346,6 +373,116 @@ let TourController = class TourController {
             include: { user: { select: { id: true, name: true, email: true } } },
         });
     }
+    async getJoinRequests(tourId, req) {
+        const requests = await this.prisma.joinRequest.findMany({
+            where: { tourId, status: 'PENDING' },
+            orderBy: { createdAt: 'desc' },
+            include: {
+                user: { select: { id: true, name: true, email: true } },
+                requestedBy: { select: { id: true, name: true, email: true } },
+            },
+        });
+        return requests;
+    }
+    async createJoinRequest(tourId, body, req) {
+        const requestingUserId = body.userId || req.user.id;
+        const existingParticipation = await this.prisma.tourParticipant.findUnique({
+            where: { tourId_userId: { tourId, userId: requestingUserId } },
+        });
+        if (existingParticipation) {
+            throw new BadRequestException('Người dùng này đã là thành viên của tour.');
+        }
+        const pendingRequest = await this.prisma.joinRequest.findFirst({
+            where: { tourId, userId: requestingUserId, status: 'PENDING' },
+        });
+        if (pendingRequest) {
+            return pendingRequest;
+        }
+        const joinRequest = await this.prisma.joinRequest.create({
+            data: {
+                tourId,
+                userId: requestingUserId,
+                requestedById: req.user.id,
+                status: 'PENDING',
+            },
+            include: {
+                user: { select: { id: true, name: true, email: true } },
+                requestedBy: { select: { id: true, name: true, email: true } },
+            },
+        });
+        return joinRequest;
+    }
+    async acceptJoinRequest(tourId, requestId, req) {
+        let role = req.user.tourParticipation?.role;
+        if (!role) {
+            const participation = await this.prisma.tourParticipant.findUnique({
+                where: { tourId_userId: { tourId, userId: req.user.id } },
+            });
+            role = participation?.role;
+        }
+        if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+            throw new ForbiddenException('Bạn không có quyền chấp nhận yêu cầu tham gia.');
+        }
+        const joinRequest = await this.prisma.joinRequest.findUnique({
+            where: { id: requestId },
+        });
+        if (!joinRequest || joinRequest.tourId !== tourId) {
+            throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+        }
+        if (joinRequest.status !== 'PENDING') {
+            throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+        }
+        const existing = await this.prisma.tourParticipant.findUnique({
+            where: { tourId_userId: { tourId, userId: joinRequest.userId } },
+        });
+        if (existing) {
+            await this.prisma.joinRequest.update({
+                where: { id: requestId },
+                data: { status: 'REJECTED' },
+            });
+            return { success: true, message: 'Người dùng đã là thành viên, yêu cầu đã bị từ chối.' };
+        }
+        await this.prisma.$transaction([
+            this.prisma.tourParticipant.create({
+                data: {
+                    tourId,
+                    userId: joinRequest.userId,
+                    role: 'MEMBER',
+                },
+            }),
+            this.prisma.joinRequest.update({
+                where: { id: requestId },
+                data: { status: 'ACCEPTED' },
+            }),
+        ]);
+        return { success: true, message: 'Đã chấp nhận yêu cầu tham gia.' };
+    }
+    async rejectJoinRequest(tourId, requestId, req) {
+        let role = req.user.tourParticipation?.role;
+        if (!role) {
+            const participation = await this.prisma.tourParticipant.findUnique({
+                where: { tourId_userId: { tourId, userId: req.user.id } },
+            });
+            role = participation?.role;
+        }
+        if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+            throw new ForbiddenException('Bạn không có quyền từ chối yêu cầu tham gia.');
+        }
+        const joinRequest = await this.prisma.joinRequest.findUnique({
+            where: { id: requestId },
+        });
+        if (!joinRequest || joinRequest.tourId !== tourId) {
+            throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+        }
+        if (joinRequest.status !== 'PENDING') {
+            throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+        }
+        await this.prisma.joinRequest.update({
+            where: { id: requestId },
+            data: { status: 'REJECTED' },
+        });
+        return { success: true, message: 'Đã từ chối yêu cầu tham gia.' };
+    }
     async removeMember(tourId, userId) {
         const participation = await this.prisma.tourParticipant.findUnique({
             where: { tourId_userId: { tourId, userId } },
@@ -459,6 +596,45 @@ __decorate([
     __metadata("design:paramtypes", [String, Object, Object]),
     __metadata("design:returntype", Promise)
 ], TourController.prototype, "addMember", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Get(':tourId/join-requests'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "getJoinRequests", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Post(':tourId/join-requests'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Body()),
+    __param(2, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, Object, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "createJoinRequest", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Post(':tourId/join-requests/:requestId/accept'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Param('requestId')),
+    __param(2, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "acceptJoinRequest", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Post(':tourId/join-requests/:requestId/reject'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Param('requestId')),
+    __param(2, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "rejectJoinRequest", null);
 __decorate([
     UseGuards(JwtAuthGuard, TourRoleGuard),
     Delete(':tourId/members/:userId'),

dist/rbac.middleware.js

@@ -21,6 +21,10 @@ let TourRoleGuard = class TourRoleGuard {
         if (!user || !tourId) {
             throw new ForbiddenException("Thông tin xác thực hoặc mã Tour không hợp lệ.");
         }
+        if (path.includes('/join-requests') && request.method === 'POST' && (!request.params.requestId || /\/join-requests\/[^/]+\/(accept|reject)$/.test(path))) {
+            request.tourParticipation = null;
+            return true;
+        }
         const participation = await this.prisma.tourParticipant.findUnique({
             where: {
                 tourId_userId: {

dist/rbac.middleware.js.map

@@ -1 +1 @@
-{"version":3,"file":"rbac.middleware.js","sourceRoot":"","sources":["../rbac.middleware.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAiC,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG7C,IAAM,aAAa,GAAnB,MAAM,aAAa;IACxB,YAAoB,MAAqB;QAArB,WAAM,GAAN,MAAM,CAAe;IAAG,CAAC;IAE7C,KAAK,CAAC,WAAW,CAAC,OAAyB;QACzC,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,UAAU,EAAE,CAAC;QACpD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAG1B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC;QAEzB,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,kBAAkB,CAAC,+CAA+C,CAAC,CAAC;QAChF,CAAC;QAOD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC;YACjE,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,IAAI,CAAC,EAAE;iBAChB;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,MAAM,IAAI,kBAAkB,CAAC,4CAA4C,CAAC,CAAC;QAC7E,CAAC;QAGD,OAAO,CAAC,iBAAiB,GAAG,aAAa,CAAC;QAE1C,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAGjD,IACE,CAAC,IAAI,KAAK,mBAAmB,IAAI,IAAI,KAAK,aAAa,CAAC;YACxD,CAAC,UAAU,IAAI,aAAa,CAAC,EAC7B,CAAC;YACD,MAAM,IAAI,kBAAkB,CAAC,0DAA0D,CAAC,CAAC;QAC3F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAlDY,aAAa;IADzB,UAAU,EAAE;qCAEiB,aAAa;GAD9B,aAAa,CAkDzB"}
+{"version":3,"file":"rbac.middleware.js","sourceRoot":"","sources":["../rbac.middleware.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAiC,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG7C,IAAM,aAAa,GAAnB,MAAM,aAAa;IACxB,YAAoB,MAAqB;QAArB,WAAM,GAAN,MAAM,CAAe;IAAG,CAAC;IAE7C,KAAK,CAAC,WAAW,CAAC,OAAyB;QACzC,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,UAAU,EAAE,CAAC;QACpD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC;QAEzB,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,kBAAkB,CAAC,+CAA+C,CAAC,CAAC;QAChF,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,IAAI,0CAA0C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YACzJ,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC;YACjC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC;YACjE,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,IAAI,CAAC,EAAE;iBAChB;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,MAAM,IAAI,kBAAkB,CAAC,4CAA4C,CAAC,CAAC;QAC7E,CAAC;QAED,OAAO,CAAC,iBAAiB,GAAG,aAAa,CAAC;QAE1C,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAEjD,IACE,CAAC,IAAI,KAAK,mBAAmB,IAAI,IAAI,KAAK,aAAa,CAAC;YACxD,CAAC,UAAU,IAAI,aAAa,CAAC,EAC7B,CAAC;YACD,MAAM,IAAI,kBAAkB,CAAC,0DAA0D,CAAC,CAAC;QAC3F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AA/CY,aAAa;IADzB,UAAU,EAAE;qCAEiB,aAAa;GAD9B,aAAa,CA+CzB"}

dist/useTourStore.d.ts

@@ -23,12 +23,16 @@ interface TourState {
     addMember: (tourId: string, member: {
         userId: string;
         role?: string;
-    }) => Promise<void>;
+    }) => Promise<any>;
     removeMember: (tourId: string, userId: string) => Promise<void>;
     setActiveLegId: (id: string | null) => void;
     setMapCenter: (pos: [number, number]) => void;
     fetchTour: (id: string) => Promise<void>;
     fetchPublicTours: () => Promise<void>;
+    createJoinRequest: (tourId: string, userId?: string) => Promise<any>;
+    fetchJoinRequests: (tourId: string) => Promise<any[]>;
+    acceptJoinRequest: (tourId: string, requestId: string) => Promise<any>;
+    rejectJoinRequest: (tourId: string, requestId: string) => Promise<any>;
 }
 export declare const useTourStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TourState>>;
 export {};

dist/useTourStore.js

@@ -65,7 +65,13 @@ export const useTourStore = create((set, get) => ({
             },
             body: JSON.stringify(tourData),
         });
-        return await response.json();
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi tạo Tour');
+        }
+        const tour = await response.json();
+        await get().fetchPublicTours();
+        return tour;
     },
     updateTour: async (id, data) => {
         const API_BASE = `http://${window.location.hostname}:3001`;
@@ -266,8 +272,71 @@ export const useTourStore = create((set, get) => ({
             },
             body: JSON.stringify(member),
         });
-        if (!response.ok)
-            throw new Error('Lỗi khi thêm thành viên');
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi thêm thành viên');
+        }
+        const { currentTour } = get();
+        if (currentTour)
+            get().fetchTour(currentTour.id);
+    },
+    createJoinRequest: async (tourId, userId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            },
+            body: JSON.stringify({ userId }),
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi tạo yêu cầu tham gia');
+        }
+        return response.json();
+    },
+    fetchJoinRequests: async (tourId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi tải yêu cầu tham gia');
+        }
+        return response.json();
+    },
+    acceptJoinRequest: async (tourId, requestId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/accept`, {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi chấp nhận yêu cầu');
+        }
+        const { currentTour } = get();
+        if (currentTour)
+            get().fetchTour(currentTour.id);
+    },
+    rejectJoinRequest: async (tourId, requestId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/reject`, {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi từ chối yêu cầu');
+        }
         const { currentTour } = get();
         if (currentTour)
             get().fetchTour(currentTour.id);

main.ts

@@ -1,6 +1,6 @@
 import 'reflect-metadata';
 import { NestFactory } from '@nestjs/core';
-import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query } from '@nestjs/common';
+import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query, ForbiddenException } from '@nestjs/common';
 import { PrismaService } from './prisma.service.js';
 import 'dotenv/config';
 import * as bcrypt from 'bcrypt';
@@ -101,6 +101,11 @@ class TourController {
             note: 'Chặng khởi đầu'
           }
         }
+      },
+      include: {
+        participants: {
+          include: { user: { select: { id: true, name: true, email: true } } }
+        }
       }
     });
   }
@@ -372,6 +377,30 @@ class TourController {
         include: { user: { select: { id: true, name: true, email: true } } },
       });
     }
+
+    let currentRole = req.user.tourParticipation?.role;
+    if (!currentRole) {
+      const participation = await this.prisma.tourParticipant.findUnique({
+        where: { tourId_userId: { tourId, userId: req.user.id } },
+      });
+      currentRole = participation?.role;
+    }
+    if (!currentRole || !(currentRole === 'OWNER' || currentRole === 'MANAGER')) {
+      const joinRequest = await this.prisma.joinRequest.create({
+        data: {
+          tourId,
+          userId: body.userId,
+          requestedById: req.user.id,
+          status: 'PENDING',
+        },
+        include: {
+          user: { select: { id: true, name: true, email: true } },
+          requestedBy: { select: { id: true, name: true, email: true } },
+        },
+      });
+      return { ...joinRequest, pendingApproval: true };
+    }
+
     return this.prisma.tourParticipant.create({
       data: {
         tourId,
@@ -382,6 +411,140 @@ class TourController {
     });
   }
 
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Get(':tourId/join-requests')
+  async getJoinRequests(@Param('tourId', ParseUUIDPipe) tourId: string, @Req() req: any) {
+    const requests = await this.prisma.joinRequest.findMany({
+      where: { tourId, status: 'PENDING' },
+      orderBy: { createdAt: 'desc' },
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+        requestedBy: { select: { id: true, name: true, email: true } },
+      },
+    });
+
+    return requests;
+  }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Post(':tourId/join-requests')
+  async createJoinRequest(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId?: string }, @Req() req: any) {
+    const requestingUserId = body.userId || req.user.id;
+
+    const existingParticipation = await this.prisma.tourParticipant.findUnique({
+      where: { tourId_userId: { tourId, userId: requestingUserId } },
+    });
+    if (existingParticipation) {
+      throw new BadRequestException('Người dùng này đã là thành viên của tour.');
+    }
+
+    const pendingRequest = await this.prisma.joinRequest.findFirst({
+      where: { tourId, userId: requestingUserId, status: 'PENDING' },
+    });
+    if (pendingRequest) {
+      return pendingRequest;
+    }
+
+    const joinRequest = await this.prisma.joinRequest.create({
+      data: {
+        tourId,
+        userId: requestingUserId,
+        requestedById: req.user.id,
+        status: 'PENDING',
+      },
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+        requestedBy: { select: { id: true, name: true, email: true } },
+      },
+    });
+
+    return joinRequest;
+  }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Post(':tourId/join-requests/:requestId/accept')
+  async acceptJoinRequest(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('requestId') requestId: string, @Req() req: any) {
+    let role = req.user.tourParticipation?.role;
+    if (!role) {
+      const participation = await this.prisma.tourParticipant.findUnique({
+        where: { tourId_userId: { tourId, userId: req.user.id } },
+      });
+      role = participation?.role;
+    }
+    if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+      throw new ForbiddenException('Bạn không có quyền chấp nhận yêu cầu tham gia.');
+    }
+
+    const joinRequest = await this.prisma.joinRequest.findUnique({
+      where: { id: requestId },
+    });
+    if (!joinRequest || joinRequest.tourId !== tourId) {
+      throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+    }
+    if (joinRequest.status !== 'PENDING') {
+      throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+    }
+
+    const existing = await this.prisma.tourParticipant.findUnique({
+      where: { tourId_userId: { tourId, userId: joinRequest.userId } },
+    });
+    if (existing) {
+      await this.prisma.joinRequest.update({
+        where: { id: requestId },
+        data: { status: 'REJECTED' },
+      });
+      return { success: true, message: 'Người dùng đã là thành viên, yêu cầu đã bị từ chối.' };
+    }
+
+    await this.prisma.$transaction([
+      this.prisma.tourParticipant.create({
+        data: {
+          tourId,
+          userId: joinRequest.userId,
+          role: 'MEMBER',
+        },
+      }),
+      this.prisma.joinRequest.update({
+        where: { id: requestId },
+        data: { status: 'ACCEPTED' },
+      }),
+    ]);
+
+    return { success: true, message: 'Đã chấp nhận yêu cầu tham gia.' };
+  }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Post(':tourId/join-requests/:requestId/reject')
+  async rejectJoinRequest(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('requestId') requestId: string, @Req() req: any) {
+    let role = req.user.tourParticipation?.role;
+    if (!role) {
+      const participation = await this.prisma.tourParticipant.findUnique({
+        where: { tourId_userId: { tourId, userId: req.user.id } },
+      });
+      role = participation?.role;
+    }
+    if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+      throw new ForbiddenException('Bạn không có quyền từ chối yêu cầu tham gia.');
+    }
+
+    const joinRequest = await this.prisma.joinRequest.findUnique({
+      where: { id: requestId },
+    });
+    if (!joinRequest || joinRequest.tourId !== tourId) {
+      throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+    }
+    if (joinRequest.status !== 'PENDING') {
+      throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+    }
+
+    await this.prisma.joinRequest.update({
+      where: { id: requestId },
+      data: { status: 'REJECTED' },
+    });
+
+    return { success: true, message: 'Đã từ chối yêu cầu tham gia.' };
+  }
+
   @UseGuards(JwtAuthGuard, TourRoleGuard)
   @Delete(':tourId/members/:userId')
   async removeMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('userId', ParseUUIDPipe) userId: string) {

prisma/migrations/20260614114952_add_join_request_flow/migration.sql

@@ -0,0 +1,174 @@
+-- CreateEnum
+CREATE TYPE "ParticipantRole" AS ENUM ('OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY');
+
+-- CreateEnum
+CREATE TYPE "JoinRequestStatus" AS ENUM ('PENDING', 'ACCEPTED', 'REJECTED');
+
+-- CreateEnum
+CREATE TYPE "ExpenseCategory" AS ENUM ('ACCOMMODATION', 'FOOD', 'TRANSPORT', 'TICKET', 'OTHER');
+
+-- CreateEnum
+CREATE TYPE "LocationStatus" AS ENUM ('PENDING', 'COMPLETED');
+
+-- CreateEnum
+CREATE TYPE "LocationType" AS ENUM ('MOVE', 'VISIT', 'REST', 'EAT');
+
+-- CreateEnum
+CREATE TYPE "PrivacyLevel" AS ENUM ('PUBLIC', 'TOUR_ONLY', 'PRIVATE');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "passwordHash" TEXT NOT NULL,
+    "name" TEXT,
+    "phone" TEXT,
+    "address" TEXT,
+    "avatar" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isAdmin" BOOLEAN NOT NULL DEFAULT false,
+    "isBlocked" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Tour" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "startDate" TIMESTAMP(3),
+    "endDate" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "totalCost" DECIMAL(15,2) NOT NULL DEFAULT 0,
+    "createdById" TEXT NOT NULL,
+
+    CONSTRAINT "Tour_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JoinRequest" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "requestedById" TEXT NOT NULL,
+    "status" "JoinRequestStatus" NOT NULL DEFAULT 'PENDING',
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "JoinRequest_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TourParticipant" (
+    "tourId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "role" "ParticipantRole" NOT NULL DEFAULT 'MEMBER',
+
+    CONSTRAINT "TourParticipant_pkey" PRIMARY KEY ("tourId","userId")
+);
+
+-- CreateTable
+CREATE TABLE "Leg" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "sequence" INTEGER NOT NULL,
+    "note" TEXT,
+
+    CONSTRAINT "Leg_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Location" (
+    "id" TEXT NOT NULL,
+    "legId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "address" TEXT,
+    "latitude" DOUBLE PRECISION NOT NULL,
+    "longitude" DOUBLE PRECISION NOT NULL,
+    "plannedStart" TIMESTAMP(3),
+    "plannedEnd" TIMESTAMP(3),
+    "actualStart" TIMESTAMP(3),
+    "actualEnd" TIMESTAMP(3),
+    "status" "LocationStatus" NOT NULL DEFAULT 'PENDING',
+    "type" "LocationType" NOT NULL DEFAULT 'VISIT',
+
+    CONSTRAINT "Location_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Expense" (
+    "id" TEXT NOT NULL,
+    "leg_id" TEXT NOT NULL,
+    "location_id" TEXT,
+    "category" "ExpenseCategory" NOT NULL,
+    "amount" DECIMAL(15,2) NOT NULL,
+    "description" TEXT,
+    "note" TEXT,
+    "paid_by_id" TEXT,
+
+    CONSTRAINT "Expense_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Photo" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "locationId" TEXT,
+    "uploaderId" TEXT NOT NULL,
+    "imageUrl" TEXT NOT NULL,
+    "capturedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "metadata" JSONB,
+    "privacy" "PrivacyLevel" NOT NULL DEFAULT 'TOUR_ONLY',
+
+    CONSTRAINT "Photo_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE INDEX "JoinRequest_tourId_status_idx" ON "JoinRequest"("tourId", "status");
+
+-- CreateIndex
+CREATE INDEX "JoinRequest_userId_idx" ON "JoinRequest"("userId");
+
+-- AddForeignKey
+ALTER TABLE "Tour" ADD CONSTRAINT "Tour_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JoinRequest" ADD CONSTRAINT "JoinRequest_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JoinRequest" ADD CONSTRAINT "JoinRequest_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JoinRequest" ADD CONSTRAINT "JoinRequest_requestedById_fkey" FOREIGN KEY ("requestedById") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourParticipant" ADD CONSTRAINT "TourParticipant_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourParticipant" ADD CONSTRAINT "TourParticipant_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Leg" ADD CONSTRAINT "Leg_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Location" ADD CONSTRAINT "Location_legId_fkey" FOREIGN KEY ("legId") REFERENCES "Leg"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Expense" ADD CONSTRAINT "Expense_leg_id_fkey" FOREIGN KEY ("leg_id") REFERENCES "Leg"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Expense" ADD CONSTRAINT "Expense_location_id_fkey" FOREIGN KEY ("location_id") REFERENCES "Location"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Expense" ADD CONSTRAINT "Expense_paid_by_id_fkey" FOREIGN KEY ("paid_by_id") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_locationId_fkey" FOREIGN KEY ("locationId") REFERENCES "Location"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_uploaderId_fkey" FOREIGN KEY ("uploaderId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -19,6 +19,12 @@ enum ParticipantRole {
   VIEWER_ONLY
 }
 
+enum JoinRequestStatus {
+  PENDING
+  ACCEPTED
+  REJECTED
+}
+
 enum ExpenseCategory {
   ACCOMMODATION
   FOOD
@@ -59,10 +65,12 @@ model User {
   isAdmin       Boolean       @default(false)
   isBlocked     Boolean       @default(false)
   
-  createdTours  Tour[]            @relation("TourCreator")
-  tourParticipations TourParticipant[]
-  uploadedPhotos Photo[]
-  paidExpenses  Expense[]         @relation("ExpensePaidBy")
+  createdTours            Tour[]              @relation("TourCreator")
+  tourParticipations      TourParticipant[]
+  requestedJoinRequests   JoinRequest[]      @relation("JoinRequestUser")
+  receivedJoinRequests    JoinRequest[]      @relation("JoinRequester")
+  uploadedPhotos          Photo[]
+  paidExpenses            Expense[]          @relation("ExpensePaidBy")
 }
 
 model Tour {
@@ -77,10 +85,27 @@ model Tour {
   creator     User         @relation("TourCreator", fields: [createdById], references: [id])
   
   participants TourParticipant[]
+  joinRequests JoinRequest[]
   legs         Leg[]
   photos       Photo[]
 }
 
+model JoinRequest {
+  id            String           @id @default(uuid())
+  tourId        String
+  userId        String
+  requestedById String
+  status        JoinRequestStatus @default(PENDING)
+  createdAt     DateTime         @default(now())
+
+  tour          Tour         @relation(fields: [tourId], references: [id], onDelete: Cascade)
+  user          User         @relation("JoinRequestUser", fields: [userId], references: [id], onDelete: Cascade)
+  requestedBy   User         @relation("JoinRequester", fields: [requestedById], references: [id], onDelete: Cascade)
+
+  @@index([tourId, status])
+  @@index([userId])
+}
+
 model TourParticipant {
   tourId      String
   userId      String

rbac.middleware.ts

@@ -7,9 +7,8 @@ export class TourRoleGuard implements CanActivate {
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
     const request = context.switchToHttp().getRequest();
-    const user = request.user; // Giả sử đã qua AuthGuard (Passport/JWT)
+    const user = request.user;
     
-    // UUID không cần parseInt
     const tourId = request.params.id || request.params.tourId;
     const path = request.url;
 
@@ -17,11 +16,11 @@ export class TourRoleGuard implements CanActivate {
       throw new ForbiddenException("Thông tin xác thực hoặc mã Tour không hợp lệ.");
     }
 
-    /**
-     * TỐI ƯU: Chỉ truy vấn Database 1 lần duy nhất để lấy thông tin thành viên.
-     * Chúng ta lưu kết quả vào request object để các interceptor hoặc controller 
-     * sau này có thể dùng lại mà không cần query lại.
-     */
+    if (path.includes('/join-requests') && request.method === 'POST' && (!request.params.requestId || /\/join-requests\/[^/]+\/(accept|reject)$/.test(path))) {
+      request.tourParticipation = null;
+      return true;
+    }
+
     const participation = await this.prisma.tourParticipant.findUnique({
       where: {
         tourId_userId: {
@@ -35,14 +34,12 @@ export class TourRoleGuard implements CanActivate {
       throw new ForbiddenException("Bạn không phải là thành viên của tour này.");
     }
 
-    // Gắn thông tin vào request để sử dụng ở tầng Controller
     request.tourParticipation = participation;
 
     const role = participation.role;
     const isPlanPath = path.includes('/plans');
     const isExpensePath = path.includes('/expenses');
 
-    // Theo định nghĩa mới: MEMBER_NO_FINANCE và VIEWER_ONLY bị hạn chế
     if (
       (role === 'MEMBER_NO_FINANCE' || role === 'VIEWER_ONLY') &&
       (isPlanPath || isExpensePath)

useTourStore.ts

@@ -22,12 +22,16 @@ interface TourState {
   updateTourStartPoint: (tourId: string, data: any) => Promise<void>;
   updateTourEndPoint: (tourId: string, data: any) => Promise<void>;
   optimizeRouting: (legId: string) => Promise<void>;
-  addMember: (tourId: string, member: { userId: string; role?: string }) => Promise<void>;
+  addMember: (tourId: string, member: { userId: string; role?: string }) => Promise<any>;
   removeMember: (tourId: string, userId: string) => Promise<void>;
   setActiveLegId: (id: string | null) => void;
   setMapCenter: (pos: [number, number]) => void;
   fetchTour: (id: string) => Promise<void>;
   fetchPublicTours: () => Promise<void>;
+  createJoinRequest: (tourId: string, userId?: string) => Promise<any>;
+  fetchJoinRequests: (tourId: string) => Promise<any[]>;
+  acceptJoinRequest: (tourId: string, requestId: string) => Promise<any>;
+  rejectJoinRequest: (tourId: string, requestId: string) => Promise<any>;
 }
 
 export const useTourStore = create<TourState>((set, get) => ({
@@ -94,7 +98,13 @@ export const useTourStore = create<TourState>((set, get) => ({
       },
       body: JSON.stringify(tourData),
     });
-    return await response.json();
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi tạo Tour');
+    }
+    const tour = await response.json();
+    await get().fetchPublicTours();
+    return tour;
   },
   updateTour: async (id: string, data: any) => {
     const API_BASE = `http://${window.location.hostname}:3001`;
@@ -292,7 +302,69 @@ export const useTourStore = create<TourState>((set, get) => ({
       },
       body: JSON.stringify(member),
     });
-    if (!response.ok) throw new Error('Lỗi khi thêm thành viên');
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi thêm thành viên');
+    }
+    const { currentTour } = get();
+    if (currentTour) get().fetchTour(currentTour.id);
+  },
+  createJoinRequest: async (tourId: string, userId?: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      },
+      body: JSON.stringify({ userId }),
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi tạo yêu cầu tham gia');
+    }
+    return response.json();
+  },
+  fetchJoinRequests: async (tourId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      }
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi tải yêu cầu tham gia');
+    }
+    return response.json();
+  },
+  acceptJoinRequest: async (tourId: string, requestId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/accept`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      }
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi chấp nhận yêu cầu');
+    }
+    const { currentTour } = get();
+    if (currentTour) get().fetchTour(currentTour.id);
+  },
+  rejectJoinRequest: async (tourId: string, requestId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/reject`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      }
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi từ chối yêu cầu');
+    }
     const { currentTour } = get();
     if (currentTour) get().fetchTour(currentTour.id);
   },