Tạo UI cho người dùng tạo Tour

2026-06-13 20:46:31 +07:00
parent c51ddc34c7
commit 25fcd5d926
28 changed files with 767 additions and 76 deletions
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { X, Map as MapIcon, Loader2 } from 'lucide-react';
+import { useTourStore } from './useTourStore.js';
+
+export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolean, onClose: () => void, onSuccess: (tour: any) => void }) => {
+  const [title, setTitle] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const createTour = useTourStore(state => state.createTour);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    try {
+      const tour = await createTour({ title, startDate, endDate });
+      onSuccess(tour);
+      onClose();
+    } catch (error) {
+      alert('Lỗi khi tạo tour');
+    } 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-md bg-white rounded-3xl shadow-2xl overflow-hidden p-8">
+        <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" /> Tạo Tour mới
+          </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>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-bold text-gray-700 mb-1">Tên Tour</label>
+            <input 
+              required
+              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"
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              placeholder="VD: Khám phá Đà Lạt"
+            />
+          </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="date"
+                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"
+                value={startDate}
+                onChange={e => setStartDate(e.target.value)}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-bold text-gray-700 mb-1">Kết thúc</label>
+              <input 
+                type="date"
+                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"
+                value={endDate}
+                onChange={e => setEndDate(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 shadow-lg transition-all flex items-center justify-center gap-2"
+          >
+            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Xác nhận tạo Tour'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};