Cho phép xóa tour và xóa chặng trong Tour Dashboard

TourDetailPage.tsx

@@ -63,7 +63,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   const [activeTab, setActiveTab] = useState<'plan' | 'expense' | 'photo' | 'settings'>('plan');
   const [viewMode, setViewMode] = useState<'map' | 'timeline'>('timeline');
   const [isAddLocationOpen, setIsAddLocationOpen] = useState(false);
-  const { currentTour, fetchTour, fetchPublicTours, publicTours, userRole, legs } = useTourStore();
+  const { currentTour, fetchTour, fetchPublicTours, publicTours, userRole, legs, addLocation } = useTourStore();
 
   useEffect(() => {
     const loadData = async () => {
@@ -82,6 +82,33 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
     }
   }, [publicTours, currentTour, fetchTour]);
 
+  const handleMapAction = async (action: string, latlng: L.LatLng) => {
+    if (!currentTour || legs.length === 0) return;
+
+    let targetLegId = legs[0].id; // Mặc định là chặng đầu
+    let defaultName = "Địa điểm mới";
+
+    if (action === 'START') defaultName = "Điểm bắt đầu";
+    if (action === 'END') {
+      targetLegId = legs[legs.length - 1].id;
+      defaultName = "Điểm kết thúc";
+    }
+    if (action.startsWith('ADD_TO_LEG_')) {
+      targetLegId = action.replace('ADD_TO_LEG_', '');
+    }
+
+    const name = window.prompt("Nhập tên địa điểm:", defaultName);
+    if (name) {
+      await addLocation(currentTour.id, {
+        name,
+        latitude: latlng.lat,
+        longitude: latlng.lng,
+        legId: targetLegId,
+        type: 'VISIT'
+      });
+    }
+  };
+
   // Định nghĩa các tab dựa trên quyền hạn (RBAC) từ store
   const tabs = [
     { id: 'plan', label: 'Lộ trình', icon: MapIcon, visible: true },
@@ -237,7 +264,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                 <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">
                   <MapContainer center={[10.7769, 106.7009]} zoom={13} className="h-full w-full">
                     <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-                    <MapContextMenu onAction={(action, latlng) => console.log(action, latlng)} />
+                    <MapContextMenu onAction={handleMapAction} />
                     
                     {/* Vẽ đường Polyline nối các điểm */}
                     {legs.map(leg => {