Bổ sung người thanh toán vào thêm địa điểm

AddLocationModal.tsx

@@ -70,13 +70,16 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
     note: '',
     expenseAmount: '',
     expenseCategory: 'OTHER',
+    expenseDescription: '',
+    expenseNote: '',
+    paidById: '',
     plannedStart: '',
     plannedEnd: ''
   });
   const [isLoading, setIsLoading] = useState(false);
   
   // Gom các selector lại để giảm số lượng Hook gọi nội bộ và tăng hiệu năng
-  const { legs, addLocation, updateLocation, mapCenter } = useTourStore();
+  const { legs, addLocation, updateLocation, mapCenter, currentTour } = useTourStore();
 
   // 1. Luôn khai báo Hook ở cấp cao nhất, không đặt code logic/return giữa các Hook
   useEffect(() => {
@@ -95,6 +98,9 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
           note: editingLocation.note || '',
           expenseAmount: expense?.amount?.toString() || '',
           expenseCategory: expense?.category || 'OTHER',
+          expenseDescription: expense?.description || '',
+          expenseNote: expense?.note || '',
+          paidById: expense?.paidById || '',
           plannedStart: editingLocation.plannedStart ? editingLocation.plannedStart.slice(0, 16) : '',
           plannedEnd: editingLocation.plannedEnd ? editingLocation.plannedEnd.slice(0, 16) : ''
         });
@@ -104,6 +110,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
           name: '', address: '', 
           legId: initialLegId || (legs.length > 0 ? legs[0].id : ''),
           note: '', expenseAmount: '', expenseCategory: 'OTHER',
+          expenseDescription: '', expenseNote: '', paidById: '',
           plannedStart: '', plannedEnd: '' 
         }));
       }
@@ -146,20 +153,17 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
     e.preventDefault();
     setIsLoading(true);
     try {
+      const payload: any = {
+        ...formData,
+        legId: currentLegId,
+        latitude: parseFloat(formData.latitude as any),
+        longitude: parseFloat(formData.longitude as any),
+      };
+
       if (editingLocation) {
-        await updateLocation(editingLocation.id, {
-          ...formData,
-          legId: currentLegId,
-          latitude: parseFloat(formData.latitude as any),
-          longitude: parseFloat(formData.longitude as any),
-        });
+        await updateLocation(editingLocation.id, payload);
       } else {
-        await addLocation(tourId, {
-          ...formData,
-          legId: currentLegId,
-          latitude: parseFloat(formData.latitude as any),
-          longitude: parseFloat(formData.longitude as any),
-        });
+        await addLocation(tourId, payload);
       }
       onClose();
     } catch (error) {
@@ -206,27 +210,52 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
               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">Ghi chú / Dịch vụ sử dụng</label>
+            <label className="block text-sm font-bold text-gray-700 mb-1">Ghi chú địa điểm / Dịch vụ sử dụng</label>
             <textarea className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none resize-none" rows={2}
               placeholder="Ví dụ: Ăn trưa tại quán X, thuê hướng dẫn viên..."
               value={formData.note} onChange={e => setFormData({...formData, note: e.target.value})} />
           </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-bold text-gray-700 mb-1">Số tiền (VNĐ)</label>
-              <input type="number" className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
-                placeholder="0"
-                value={formData.expenseAmount} onChange={e => setFormData({...formData, expenseAmount: e.target.value})} />
+          <div className="bg-blue-50/60 border border-blue-100 rounded-2xl p-4 space-y-3">
+            <p className="text-xs font-black text-blue-500 uppercase tracking-widest">Chi phí nhanh tại điểm này</p>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-bold text-gray-600 mb-1">Số tiền (VNĐ)</label>
+                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  placeholder="0"
+                  value={formData.expenseAmount} onChange={e => setFormData({...formData, expenseAmount: e.target.value})} />
+              </div>
+              <div>
+                <label className="block text-xs font-bold text-gray-600 mb-1">Loại dịch vụ</label>
+                <select className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  value={formData.expenseCategory} onChange={e => setFormData({...formData, expenseCategory: e.target.value})}>
+                  <option value="FOOD">Ăn uống</option>
+                  <option value="TRANSPORT">Di chuyển</option>
+                  <option value="ACCOMMODATION">Chỗ ở</option>
+                  <option value="TICKET">Vé tham quan</option>
+                  <option value="OTHER">Khác</option>
+                </select>
+              </div>
             </div>
             <div>
-              <label className="block text-sm font-bold text-gray-700 mb-1">Loại dịch vụ</label>
-              <select className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
-                value={formData.expenseCategory} onChange={e => setFormData({...formData, expenseCategory: e.target.value})}>
-                <option value="FOOD">Ăn uống</option>
-                <option value="TRANSPORT">Di chuyển</option>
-                <option value="ACCOMMODATION">Chỗ ở</option>
-                <option value="TICKET">Vé tham quan</option>
-                <option value="OTHER">Khác</option>
+              <label className="block text-xs font-bold text-gray-600 mb-1">Dịch vụ / Mô tả</label>
+              <input className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                placeholder="Ví dụ: Ăn trưa, taxi, vé..."
+                value={formData.expenseDescription} onChange={e => setFormData({...formData, expenseDescription: e.target.value})} />
+            </div>
+            <div>
+              <label className="block text-xs font-bold text-gray-600 mb-1">Ghi chú chi phí</label>
+              <textarea className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none resize-none text-sm" rows={2}
+                placeholder="Ghi chú thêm..."
+                value={formData.expenseNote} onChange={e => setFormData({...formData, expenseNote: e.target.value})} />
+            </div>
+            <div>
+              <label className="block text-xs font-bold text-gray-600 mb-1">Thành viên đã thanh toán</label>
+              <select className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                value={formData.paidById} onChange={e => setFormData({...formData, paidById: e.target.value})}>
+                <option value="">-- Chọn người thanh toán --</option>
+                {currentTour?.participants?.map((p: any) => (
+                  <option key={p.userId} value={p.userId}>{p.user?.name || p.userId}</option>
+                ))}
               </select>
             </div>
           </div>