473 lines
23 KiB
TypeScript
473 lines
23 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { format, parseISO } from 'date-fns';
|
|
import { X, MapPin, Loader2, Clock, Map as MapIcon, Navigation, Search } from 'lucide-react';
|
|
import { useTourStore } from '@/store/useTourStore.js';
|
|
import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
|
|
import L from 'leaflet';
|
|
|
|
// Cấu hình Icon mặc định để tránh crash Marker trong Modal
|
|
delete (L.Icon.Default.prototype as any)._getIconUrl;
|
|
L.Icon.Default.mergeOptions({
|
|
iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
|
|
iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
});
|
|
|
|
// Component Helper xử lý việc chọn vị trí trên mini map bằng chuột phải
|
|
const MapPicker = ({ onPick, center }: { onPick: (latlng: L.LatLng) => void, center: [number, number] }) => {
|
|
const [menuPos, setMenuPos] = useState<{ x: number, y: number, latlng: L.LatLng } | null>(null);
|
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
const map = useMap();
|
|
|
|
useMapEvents({
|
|
contextmenu: (e) => {
|
|
L.DomEvent.preventDefault(e.originalEvent);
|
|
L.DomEvent.stopPropagation(e.originalEvent);
|
|
setMenuPos({ x: e.containerPoint.x, y: e.containerPoint.y, latlng: e.latlng });
|
|
},
|
|
click: () => setMenuPos(null),
|
|
dragstart: () => setMenuPos(null),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (menuPos && menuRef.current) {
|
|
L.DomEvent.disableClickPropagation(menuRef.current);
|
|
}
|
|
}, [menuPos]);
|
|
|
|
useEffect(() => {
|
|
map.setView(center, map.getZoom());
|
|
}, [center]);
|
|
|
|
return (
|
|
<>
|
|
{menuPos && (
|
|
<div
|
|
ref={menuRef}
|
|
className="absolute z-[3000] bg-white rounded-xl shadow-xl border border-gray-100 py-1 w-44 animate-in zoom-in-95 duration-200"
|
|
style={{ top: menuPos.y, left: menuPos.x }}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => { onPick(menuPos.latlng); setMenuPos(null); }}
|
|
className="w-full text-left px-4 py-2 hover:bg-blue-50 text-xs font-bold text-blue-600 flex items-center gap-2"
|
|
>
|
|
<MapPin className="w-3 h-3" /> Thêm vào chặng hiện tại
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editingLocation, isPublicView = false }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string, editingLocation?: any, isPublicView?: boolean }) => {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
address: '',
|
|
latitude: 10.7769,
|
|
longitude: 106.7009,
|
|
type: 'VISIT',
|
|
legId: '',
|
|
note: '',
|
|
expenseAmount: '',
|
|
expenseCategory: 'OTHER',
|
|
expenseDescription: '',
|
|
expenseNote: '',
|
|
paidById: '',
|
|
plannedStart: '',
|
|
plannedEnd: ''
|
|
});
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [searchResults, setSearchResults] = useState<any[]>([]);
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const searchTimeout = useRef<any>(null);
|
|
|
|
// 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, currentTour, userRole } = 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(() => {
|
|
if (isOpen) {
|
|
if (editingLocation) {
|
|
const leg = legs.find(l => l.id === editingLocation.legId);
|
|
const expense = leg?.expenses?.find((e: any) => e.locationId === editingLocation.id);
|
|
|
|
setFormData({
|
|
name: editingLocation.name || '',
|
|
address: editingLocation.address || '',
|
|
latitude: editingLocation.latitude,
|
|
longitude: editingLocation.longitude,
|
|
type: editingLocation.type || 'VISIT',
|
|
legId: editingLocation.legId || '',
|
|
note: editingLocation.note || '',
|
|
expenseAmount: expense?.amount ? Number(expense.amount).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") : '',
|
|
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) : ''
|
|
});
|
|
} else {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
name: '', address: '',
|
|
legId: initialLegId || (legs.length > 0 ? legs[0].id : ''),
|
|
note: '', expenseAmount: '', expenseCategory: 'OTHER',
|
|
expenseDescription: '', expenseNote: '', paidById: '',
|
|
plannedStart: '', plannedEnd: ''
|
|
}));
|
|
}
|
|
}
|
|
}, [initialLegId, editingLocation, isOpen]);
|
|
|
|
// Tự động cập nhật vị trí bản đồ theo chặng được chọn (Lấy điểm cuối của chặng đó làm tham chiếu)
|
|
useEffect(() => {
|
|
if (isOpen && !editingLocation && formData.legId && !formData.name) {
|
|
const selectedLeg = legs.find(l => l.id === formData.legId);
|
|
|
|
if (selectedLeg && selectedLeg.locations && selectedLeg.locations.length > 0) {
|
|
// Di chuyển đến địa điểm cuối cùng của chặng để người dùng thấy điểm nối tiếp
|
|
const lastLoc = selectedLeg.locations[selectedLeg.locations.length - 1];
|
|
setFormData(prev => ({
|
|
...prev,
|
|
latitude: lastLoc.latitude,
|
|
longitude: lastLoc.longitude
|
|
}));
|
|
} else {
|
|
// Nếu chặng chưa có điểm nào, mặc định dùng vị trí trung tâm hiện tại của tour
|
|
setFormData(prev => ({ ...prev, latitude: mapCenter[0], longitude: mapCenter[1] }));
|
|
}
|
|
}
|
|
}, [formData.legId, isOpen, editingLocation, legs, mapCenter]);
|
|
|
|
// 2. Thực hiện các tính toán và hàm xử lý
|
|
const currentLegId = formData.legId || (legs.length > 0 ? legs[0].id : '');
|
|
const targetLeg = legs.find(l => l.id === currentLegId);
|
|
const titleText = editingLocation ? `Sửa địa điểm: ${editingLocation.name}` : (initialLegId ? `Thêm địa điểm cho ${targetLeg?.note || `Chặng ${targetLeg?.sequence}`}` : 'Thêm địa điểm mới');
|
|
const buttonText = editingLocation ? 'Cập nhật thay đổi' : (initialLegId ? 'Xác nhận thêm vào chặng' : 'Thêm địa điểm');
|
|
|
|
const handleSearchLocation = (query: string) => {
|
|
setFormData(prev => ({ ...prev, name: query }));
|
|
|
|
if (searchTimeout.current) clearTimeout(searchTimeout.current);
|
|
|
|
if (query.trim().length < 2) {
|
|
setSearchResults([]);
|
|
setIsSearching(false);
|
|
return;
|
|
}
|
|
|
|
setIsSearching(true);
|
|
searchTimeout.current = setTimeout(async () => {
|
|
try {
|
|
const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=8&addressdetails=1&accept-language=vi`);
|
|
const data = await res.json();
|
|
setSearchResults(data);
|
|
} catch (e) {
|
|
console.error("Lỗi tìm kiếm địa điểm:", e);
|
|
} finally {
|
|
setIsSearching(false);
|
|
}
|
|
}, 500);
|
|
};
|
|
|
|
const selectSearchResult = (result: any) => {
|
|
const lat = parseFloat(result.lat);
|
|
const lon = parseFloat(result.lon);
|
|
setFormData(prev => ({
|
|
...prev,
|
|
name: result.display_name.split(',')[0],
|
|
address: result.display_name,
|
|
latitude: lat,
|
|
longitude: lon
|
|
}));
|
|
setSearchResults([]);
|
|
};
|
|
|
|
const handlePickLocation = async (latlng: L.LatLng) => {
|
|
setFormData(prev => ({ ...prev, latitude: latlng.lat, longitude: latlng.lng }));
|
|
|
|
// Tự động lấy tên địa điểm từ tọa độ vừa chọn
|
|
try {
|
|
const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latlng.lat}&lon=${latlng.lng}`);
|
|
const data = await res.json();
|
|
const addr = data.address;
|
|
const detectedName = addr.amenity || addr.building || addr.historic || addr.tourist ||
|
|
addr.shop || addr.office || addr.leisure || addr.attraction ||
|
|
addr.road || addr.neighbourhood || addr.suburb ||
|
|
data.display_name?.split(',')[0] || "";
|
|
|
|
setFormData(prev => ({ ...prev, name: detectedName || prev.name, address: data.display_name || prev.address }));
|
|
} catch (e) {}
|
|
};
|
|
|
|
const handleUseCurrentLocation = () => {
|
|
if (!navigator.geolocation) {
|
|
alert("Trình duyệt hoặc thiết bị của bạn không hỗ trợ định vị GPS.");
|
|
return;
|
|
}
|
|
|
|
// Kiểm tra môi trường Secure Context (HTTPS) - Bắt buộc cho Geolocation trên Mobile
|
|
if (!window.isSecureContext) {
|
|
alert("Tính năng định vị GPS yêu cầu kết nối bảo mật (HTTPS). Nếu bạn đang truy cập qua địa chỉ IP, vui lòng sử dụng HTTPS hoặc Localhost.");
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (pos) => {
|
|
const latlng = L.latLng(pos.coords.latitude, pos.coords.longitude);
|
|
const now = new Date();
|
|
const formattedTime = format(now, "yyyy-MM-dd'T'HH:mm");
|
|
|
|
setFormData(prev => ({
|
|
...prev,
|
|
latitude: latlng.lat,
|
|
longitude: latlng.lng,
|
|
plannedStart: formattedTime
|
|
}));
|
|
|
|
// Tự động thực hiện reverse geocoding để lấy tên địa điểm và địa chỉ
|
|
handlePickLocation(latlng);
|
|
},
|
|
(err) => {
|
|
let errorMessage = "Không thể lấy vị trí: ";
|
|
switch(err.code) {
|
|
case err.PERMISSION_DENIED:
|
|
errorMessage += "Bạn đã từ chối quyền truy cập vị trí.";
|
|
break;
|
|
case err.POSITION_UNAVAILABLE:
|
|
errorMessage += "Thông tin vị trí không khả dụng.";
|
|
break;
|
|
case err.TIMEOUT:
|
|
errorMessage += "Hết thời gian chờ yêu cầu định vị.";
|
|
break;
|
|
default: errorMessage += err.message;
|
|
}
|
|
alert(errorMessage);
|
|
},
|
|
{
|
|
enableHighAccuracy: true, // Ưu tiên dùng GPS thay vì Wifi/Cell tower
|
|
timeout: 10000, // Chờ tối đa 10 giây
|
|
maximumAge: 0 // Không dùng vị trí cũ trong cache
|
|
}
|
|
);
|
|
};
|
|
|
|
// 3. Early return phải nằm SAU tất cả các khai báo Hook
|
|
if (!isOpen || isPublicView) return null; // Do not render if public view
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
try {
|
|
const payload: any = {
|
|
...formData,
|
|
expenseAmount: formData.expenseAmount.replace(/\./g, ''), // Loại bỏ dấu chấm trước khi gửi
|
|
legId: currentLegId,
|
|
latitude: parseFloat(formData.latitude as any),
|
|
longitude: parseFloat(formData.longitude as any),
|
|
};
|
|
|
|
if (editingLocation) {
|
|
await updateLocation(editingLocation.id, payload);
|
|
} else {
|
|
await addLocation(tourId, payload);
|
|
}
|
|
onClose();
|
|
} catch (error) {
|
|
alert('Lỗi khi lưu địa điểm');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
|
|
<div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl overflow-hidden p-8 max-h-[90vh] overflow-y-auto">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
|
<MapIcon className="w-6 h-6 text-blue-600" /> {titleText}
|
|
</h2>
|
|
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
|
<X className="w-6 h-6 text-gray-400" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mini Map Picker */}
|
|
<div className="h-48 w-full rounded-2xl overflow-hidden mb-6 border border-gray-100 relative shadow-inner group">
|
|
<MapContainer center={[formData.latitude, formData.longitude]} zoom={13} className="h-full w-full">
|
|
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
|
<Marker position={[formData.latitude, formData.longitude]} />
|
|
<MapPicker center={[formData.latitude, formData.longitude]} onPick={handlePickLocation} />
|
|
</MapContainer>
|
|
<div className="absolute bottom-2 left-2 z-[1000] bg-white/90 backdrop-blur-sm px-2 py-1 rounded-lg text-[10px] font-black text-gray-500 shadow-sm border border-gray-100">
|
|
CHUỘT PHẢI ĐỂ CHỌN VỊ TRÍ
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nút lấy vị trí và thời gian hiện tại - Chỉ dành cho OWNER/MANAGER khi thêm mới */}
|
|
{!editingLocation && (userRole === 'OWNER' || userRole === 'MANAGER') && (
|
|
<button
|
|
type="button"
|
|
onClick={handleUseCurrentLocation}
|
|
className="w-full mb-6 py-4 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center gap-2 text-xs font-black uppercase tracking-widest border border-indigo-100 transition-all active:scale-95 shadow-sm"
|
|
>
|
|
<Navigation className="w-4 h-4 fill-current" /> Sử dụng vị trí & thời gian hiện tại
|
|
</button>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4" onClick={() => setSearchResults([])}>
|
|
<div className="relative">
|
|
<label className="block text-sm font-bold text-gray-700 mb-1">Tên địa điểm</label>
|
|
<div className="relative group">
|
|
<input
|
|
required
|
|
placeholder="Gõ để tìm kiếm địa điểm..."
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all"
|
|
value={formData.name}
|
|
onChange={e => handleSearchLocation(e.target.value)}
|
|
/>
|
|
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
|
{isSearching ? (
|
|
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
|
|
) : formData.name ? (
|
|
<button type="button" onClick={() => { setFormData({...formData, name: ''}); setSearchResults([]); }} className="hover:text-red-500 transition-colors">
|
|
<X className="w-4 h-4 text-gray-400" />
|
|
</button>
|
|
) : (
|
|
<Search className="w-4 h-4 text-gray-300" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{searchResults.length > 0 && (
|
|
<div className="absolute z-[3100] left-0 right-0 mt-2 bg-white border border-gray-100 rounded-2xl shadow-2xl overflow-hidden max-h-64 overflow-y-auto animate-in slide-in-from-top-2 duration-200">
|
|
{searchResults.map((result, idx) => (
|
|
<button
|
|
key={idx}
|
|
type="button"
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); selectSearchResult(result); }}
|
|
className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-50 last:border-0 transition-all flex flex-col gap-0.5"
|
|
>
|
|
<div className="font-bold text-sm text-gray-900 line-clamp-1">{result.display_name.split(',')[0]}</div>
|
|
<div className="text-[10px] text-gray-500 line-clamp-2 leading-tight">{result.display_name}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 mb-1">Địa chỉ</label>
|
|
<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">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="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="text" 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 => {
|
|
const rawValue = e.target.value.replace(/\D/g, ""); // Chỉ lấy số
|
|
const formattedValue = rawValue.replace(/\B(?=(\d{3})+(?!\d))/g, "."); // Thêm dấu chấm
|
|
setFormData({...formData, expenseAmount: formattedValue});
|
|
}} />
|
|
</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-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) => {
|
|
const name = p.user?.name;
|
|
const email = p.user?.email;
|
|
const label = [name, email && name ? `(${email})` : email].filter(Boolean).join(' ');
|
|
return (
|
|
<option key={p.userId} value={p.userId}>{label || p.userId}</option>
|
|
);
|
|
})}
|
|
</select>
|
|
</div>
|
|
</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'}
|
|
{leg.startDate ? ` (${format(parseISO(leg.startDate), 'dd/MM')})` : ''}
|
|
</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>
|
|
<input type="number" step="any" required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
|
|
value={formData.latitude} onChange={e => setFormData({...formData, latitude: e.target.value as any})} />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 mb-1">Kinh độ</label>
|
|
<input type="number" step="any" required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
|
|
value={formData.longitude} onChange={e => setFormData({...formData, longitude: e.target.value as any})} />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 mb-1">Loại</label>
|
|
<select className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
|
|
value={formData.type} onChange={e => setFormData({...formData, type: e.target.value as any})}>
|
|
<option value="VISIT">Tham quan</option>
|
|
<option value="EAT">Ăn uống</option>
|
|
<option value="REST">Nghỉ ngơi</option>
|
|
<option value="MOVE">Di chuyể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">Bắt đầu</label>
|
|
<input type="datetime-local" className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
|
|
value={formData.plannedStart} onChange={e => setFormData({...formData, plannedStart: e.target.value})} />
|
|
</div>
|
|
</div>
|
|
<button disabled={isLoading} className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl flex items-center justify-center gap-2 mt-4">
|
|
{isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : buttonText}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |