Voucher Management - Copy this React, Tailwind Component to your project

dùng các api const API_BASE_URL = "https://domstore.azurewebsites.net/api/v1"; axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.getItem("authToken")}`; axios.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { console.log("Unauthorized access - redirecting to login"); } return Promise.reject(error); } ); useEffect(() => { fetchVouchers(); }, []); const fetchVouchers = async () => { try { const response = await axios.get(`${API_BASE_URL}/vouchers`, { headers: { Authorization: `Bearer ${localStorage.getItem("authToken")}` } }); setVouchers(response.data.data.vouchers); } catch (error) { console.error("Error fetching vouchers:", error); if (error.response?.status === 401) { setVouchers([]); } } }; const handleCreateVoucher = async (e) => { e.preventDefault(); setLoading(true); try { await axios.post(`${API_BASE_URL}/vouchers`, formData, { headers: { Authorization: `Bearer ${localStorage.getItem("authToken")}` } }); await fetchVouchers(); setIsCreateModalOpen(false); setFormData({ code: "", discountPercent: "", expirationDate: "", quantity: "" }); } catch (error) { console.error("Error creating voucher:", error); } finally { setLoading(false); } }; const handleEditVoucher = async (e) => { e.preventDefault(); setLoading(true); try { await axios.put(`${API_BASE_URL}/vouchers/${selectedVoucher._id}`, { discountPercent: formData.discountPercent, expirationDate: formData.expirationDate, quantity: formData.quantity }, { headers: { Authorization: `Bearer ${localStorage.getItem("authToken")}` } }); await fetchVouchers(); setIsEditModalOpen(false); setSelectedVoucher(null); } catch (error) { console.error("Error updating voucher:", error); } finally { setLoading(false); } }; const handleDeleteVoucher = async () => { setLoading(true); try { await axios.delete(`${API_BASE_URL}/vouchers/${selectedVoucher._id}`, { headers: { Authorization: `Bearer ${localStorage.getItem("authToken")}` } }); await fetchVouchers(); setIsDeleteModalOpen(false); setSelectedVoucher(null); } catch (error) { console.error("Error deleting voucher:", error); } finally { setLoading(false); } }; const handleDeactivateExpired = async () => { setLoading(true); try { await axios.post(`${API_BASE_URL}/vouchers/deactivate-expired`, {}, { headers: { Authorization: `Bearer ${localStorage.getItem("authToken")}` } }); await fetchVouchers(); } catch (error) { console.error("Error deactivating expired vouchers:", error); } finally { setLoading(false); } }; const fetchVoucherStats = async (voucherId) => { try { const response = await axios.get(`${API_BASE_URL}/vouchers/${voucherId}/stats`, { headers: { Authorization: `Bearer ${localStorage.getItem("authToken")}` } }); setStats(response.data.data); } catch (error) { console.error("Error fetching voucher stats:", error); } }; const Modal = ({ isOpen, onClose, title, children }) => { if (!isOpen) return null; return ( <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="bg-white rounded-lg p-6 w-full max-w-md"> <div className="flex justify-between items-center mb-4"> <h2 className="text-xl font-semibold">{title}</h2> <button onClick={onClose} className="text-gray-500 hover:text-gray-700">×</button> </div> {children} </div> </div> ); };