Sửa hiển thị điểm đầu và điểm cuối của chặng

AddLocationModal.tsx

@@ -9,20 +9,26 @@ export const AddLocationModal = ({ isOpen, onClose, tourId }: { isOpen: boolean,
     latitude: 10.7769,
     longitude: 106.7009,
     type: 'VISIT',
+    legId: '',
     plannedStart: '',
     plannedEnd: ''
   });
   const [isLoading, setIsLoading] = useState(false);
+  const legs = useTourStore(state => state.legs);
   const addLocation = useTourStore(state => state.addLocation);
 
   if (!isOpen) return null;
 
+  // Mặc định chọn chặng đầu nếu chưa chọn
+  const currentLegId = formData.legId || (legs.length > 0 ? legs[0].id : '');
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
     try {
       await addLocation(tourId, {
         ...formData,
+        legId: currentLegId,
         latitude: parseFloat(formData.latitude as any),
         longitude: parseFloat(formData.longitude as any),
       });
@@ -58,6 +64,15 @@ export const AddLocationModal = ({ isOpen, onClose, tourId }: { isOpen: boolean,
             <input className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
               value={formData.address} onChange={e => setFormData({...formData, address: e.target.value})} />
           </div>
+          <div>
+            <label className="block text-sm font-bold text-gray-700 mb-1">Gán vào chặng</label>
+            <select required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
+              value={currentLegId} onChange={e => setFormData({...formData, legId: e.target.value})}>
+              {legs.map(leg => (
+                <option key={leg.id} value={leg.id}>Chặng {leg.sequence}: {leg.note || 'Không có tên'}</option>
+              ))}
+            </select>
+          </div>
           <div className="grid grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-bold text-gray-700 mb-1">Vĩ độ</label>