289 lines
12 KiB
TypeScript
289 lines
12 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { X, ShieldAlert, MapPin, Loader2, Phone, Mail, AlertTriangle } from 'lucide-react';
|
|
import { useTranslation } from '../hooks/useTranslation';
|
|
|
|
interface ReportBusinessModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
initialLatitude?: number;
|
|
initialLongitude?: number;
|
|
}
|
|
|
|
export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
initialLatitude,
|
|
initialLongitude
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [type, setType] = useState('RESTAURANT');
|
|
const [name, setName] = useState('');
|
|
const [phone, setPhone] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [address, setAddress] = useState('');
|
|
const [latitude, setLatitude] = useState(initialLatitude ? String(initialLatitude) : '');
|
|
const [longitude, setLongitude] = useState(initialLongitude ? String(initialLongitude) : '');
|
|
const [reason, setReason] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (isOpen) {
|
|
setLatitude(initialLatitude ? String(initialLatitude) : '');
|
|
setLongitude(initialLongitude ? String(initialLongitude) : '');
|
|
setSuccess(false);
|
|
setError('');
|
|
}
|
|
}, [isOpen, initialLatitude, initialLongitude]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleGetCurrentLocation = () => {
|
|
if (!navigator.geolocation) {
|
|
setError('Trình duyệt không hỗ trợ định vị GPS.');
|
|
return;
|
|
}
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
setLatitude(String(position.coords.latitude.toFixed(6)));
|
|
setLongitude(String(position.coords.longitude.toFixed(6)));
|
|
},
|
|
() => {
|
|
setError('Không thể lấy vị trí hiện tại. Vui lòng bật định vị GPS.');
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/reports`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
type,
|
|
name,
|
|
phone: phone || null,
|
|
email: email || null,
|
|
address: address || null,
|
|
latitude: latitude ? parseFloat(latitude) : null,
|
|
longitude: longitude ? parseFloat(longitude) : null,
|
|
reason,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(data.message || 'Gửi báo cáo thất bại.');
|
|
}
|
|
|
|
setSuccess(true);
|
|
setTimeout(() => {
|
|
onClose();
|
|
// Reset form
|
|
setName('');
|
|
setPhone('');
|
|
setEmail('');
|
|
setAddress('');
|
|
setLatitude('');
|
|
setLongitude('');
|
|
setReason('');
|
|
}, 2000);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[3000] flex items-center justify-center p-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-300"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Content Container */}
|
|
<div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 flex flex-col max-h-[90vh]">
|
|
|
|
{/* Header */}
|
|
<div className="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-red-50 text-red-500 rounded-xl">
|
|
<ShieldAlert className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-900">{t('reportModalTitle')}</h2>
|
|
<p className="text-xs text-gray-500 mt-0.5">Báo cáo các hành vi không lành mạnh hoặc lừa đảo kinh doanh.</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-gray-100 rounded-full transition-colors text-gray-400 hover:text-gray-600"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{success ? (
|
|
<div className="p-10 flex flex-col items-center justify-center text-center space-y-4">
|
|
<div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center shadow-lg animate-bounce">
|
|
<ShieldAlert className="w-8 h-8" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900">{t('success')}!</h3>
|
|
<p className="text-sm text-gray-500 max-w-sm">{t('reportSuccess')}</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4 overflow-y-auto flex-1 text-left">
|
|
{error && (
|
|
<div className="p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2">
|
|
<AlertTriangle className="w-4 h-4 shrink-0" />
|
|
<span>{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Loại hình */}
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('businessType')} *</label>
|
|
<select
|
|
value={type}
|
|
onChange={(e) => setType(e.target.value)}
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm font-bold text-gray-800"
|
|
>
|
|
<option value="USER">{t('typeUser')}</option>
|
|
<option value="RESTAURANT">{t('typeRestaurant')}</option>
|
|
<option value="HOTEL">{t('typeHotel')}</option>
|
|
<option value="HOMESTAY">{t('typeHomestay')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Tên */}
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('businessName')} *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="VD: Nhà hàng ABC, Homestay X..."
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{/* Số điện thoại */}
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
|
|
<Phone className="w-3.5 h-3.5 text-gray-400" /> {t('businessPhone')}
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
placeholder="0987xxxxxx"
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
|
|
<Mail className="w-3.5 h-3.5 text-gray-400" /> {t('businessEmail')}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="contact@business.com"
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Địa chỉ */}
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
|
|
<MapPin className="w-3.5 h-3.5 text-gray-400" /> {t('businessAddress')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={address}
|
|
onChange={(e) => setAddress(e.target.value)}
|
|
placeholder="VD: 123 Đường Trần Phú, Đà Lạt..."
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tọa độ địa lý */}
|
|
<div className="space-y-1.5 bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<span className="text-xs font-bold text-blue-700 uppercase tracking-wider flex items-center gap-1.5">
|
|
📍 Vị trí địa lý (Tùy chọn)
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={handleGetCurrentLocation}
|
|
className="text-xs font-bold text-blue-600 hover:text-blue-700 hover:underline flex items-center gap-1"
|
|
>
|
|
Lấy vị trí GPS hiện tại
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Vĩ độ (Latitude)</label>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
value={latitude}
|
|
onChange={(e) => setLatitude(e.target.value)}
|
|
placeholder="11.9404"
|
|
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-xs text-gray-800"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Kinh độ (Longitude)</label>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
value={longitude}
|
|
onChange={(e) => setLongitude(e.target.value)}
|
|
placeholder="108.4382"
|
|
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-xs text-gray-800"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lý do */}
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('reportReason')} *</label>
|
|
<textarea
|
|
required
|
|
rows={3}
|
|
value={reason}
|
|
onChange={(e) => setReason(e.target.value)}
|
|
placeholder="Hãy mô tả hành vi không đàng hoàng, lừa đảo hoặc gian dối của cơ sở/người dùng này..."
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all resize-none text-sm text-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="w-full py-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-2xl shadow-lg shadow-red-100 transition-all flex items-center justify-center gap-2 active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
{isLoading ? 'Đang gửi...' : t('submitReport')}
|
|
{isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : <ShieldAlert className="w-5 h-5" />}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|