function MainComponent() { const [books, setBooks] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(""); const [priceFilter, setPriceFilter] = React.useState("all"); const [availabilityFilter, setAvailabilityFilter] = React.useState("all"); const [authorFilter, setAuthorFilter] = React.useState(""); const [cart, setCart] = React.useState([]); const [showCheckout, setShowCheckout] = React.useState(false); const [toast, setToast] = React.useState(null); const [checkoutForm, setCheckoutForm] = React.useState({ fullName: "", email: "", address: "", creditCard: "", cvv: "" }); React.useEffect(()=>{ fetchBooks(); }, [ searchTerm, authorFilter, priceFilter, availabilityFilter ]); const fetchBooks = async ()=>{ let query = "SELECT * FROM `books` WHERE 1=1"; const values = []; if (searchTerm) { query += " AND LOWER(`title`) LIKE LOWER(?)"; values.push(`%${searchTerm}%`); } if (authorFilter) { query += " AND LOWER(`author`) LIKE LOWER(?)"; values.push(`%${authorFilter}%`); } if (priceFilter !== "all") { if (priceFilter === "under2") { query += " AND `cost_per_day` < 2"; } else if (priceFilter === "2to3") { query += " AND `cost_per_day` >= 2 AND `cost_per_day` <= 3"; } else if (priceFilter === "over3") { query += " AND `cost_per_day` > 3"; } } if (availabilityFilter !== "all") { query += " AND `availability` = ?"; values.push(availabilityFilter); } try { const response = await fetch("/api/db/database-of-books-to-borrow", { method: "POST", body: JSON.stringify({ query: query + " ORDER BY `title` ASC", values: values }) }); const data = await response.json(); setBooks(data || []); } catch (error) { console.error("Error fetching books:", error); setBooks([]); } }; const addToCart = (book)=>{ if (book.availability === "Available") { setCart([ ...cart, book ]); } }; const removeFromCart = (bookId)=>{ setCart(cart.filter((item)=>item.id !== bookId)); }; const getTotalCost = ()=>{ return cart.reduce((total, book)=>total + book.cost_per_day, 0).toFixed(2); }; const handleCheckoutSubmit = (e)=>{ e.preventDefault(); setToast("Order confirmed! Your books have been successfully reserved."); setTimeout(()=>setToast(null), 3000); setShowCheckout(false); setCart([]); setCheckoutForm({ fullName: "", email: "", address: "", creditCard: "", cvv: "" }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "BookLender"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart mr-2", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }), "Cart (", cart.length, ")"), cart.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg p-4 z-10", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, cart.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 112, columnNumber: 23 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 113, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm mr-2", __source: { fileName: "", lineNumber: 114, columnNumber: 25 }, __self: this }, "$", item.cost_per_day, "/day"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeFromCart(item.id), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 117, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 121, columnNumber: 27 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "border-t mt-2 pt-2", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between font-bold", __source: { fileName: "", lineNumber: 127, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 128, columnNumber: 23 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 129, columnNumber: 23 }, __self: this }, "$", getTotalCost(), "/day")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCheckout(true), className: "w-full bg-blue-600 text-white rounded-lg py-2 mt-2", __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }, "Checkout"))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search by title...", className: "flex-1 px-4 py-2 rounded border border-gray-300", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search by author...", className: "flex-1 px-4 py-2 rounded border border-gray-300", value: authorFilter, onChange: (e)=>setAuthorFilter(e.target.value), __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "flex-1 px-4 py-2 rounded border border-gray-300", value: priceFilter, onChange: (e)=>setPriceFilter(e.target.value), __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, "All Prices"), /*#__PURE__*/ React.createElement("option", { value: "under2", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "Under $2/day"), /*#__PURE__*/ React.createElement("option", { value: "2to3", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, "$2 - $3/day"), /*#__PURE__*/ React.createElement("option", { value: "over3", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "Over $3/day")), /*#__PURE__*/ React.createElement("select", { className: "flex-1 px-4 py-2 rounded border border-gray-300", value: availabilityFilter, onChange: (e)=>setAvailabilityFilter(e.target.value), __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this }, "All Availability"), /*#__PURE__*/ React.createElement("option", { value: "Available", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, "Available"), /*#__PURE__*/ React.createElement("option", { value: "Out of Stock", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, "Out of Stock")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 184, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, Array.isArray(books) && books.map((book)=>/*#__PURE__*/ React.createElement("div", { key: book.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 194, columnNumber: 19 }, __self: this }, "By ", book.author), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 195, columnNumber: 19 }, __self: this }, "$", book.cost_per_day, "/day"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, "Status:", /*#__PURE__*/ React.createElement("span", { className: book.availability === "Available" ? "text-green-500 ml-2" : "text-red-500 ml-2", __source: { fileName: "", lineNumber: 198, columnNumber: 21 }, __self: this }, book.availability)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4 line-clamp-3", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, book.description), book.availability === "Available" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(book), className: "w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 212, columnNumber: 21 }, __self: this }, "Add to Cart")))))), showCheckout && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, "Checkout"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleCheckoutSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", required: true, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", value: checkoutForm.fullName, onChange: (e)=>setCheckoutForm({ ...checkoutForm, fullName: e.target.value }), __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", required: true, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", value: checkoutForm.email, onChange: (e)=>setCheckoutForm({ ...checkoutForm, email: e.target.value }), __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 262, columnNumber: 17 }, __self: this }, "Address"), /*#__PURE__*/ React.createElement("input", { type: "text", required: true, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", value: checkoutForm.address, onChange: (e)=>setCheckoutForm({ ...checkoutForm, address: e.target.value }), __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, "Credit Card Number"), /*#__PURE__*/ React.createElement("input", { type: "text", required: true, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", value: checkoutForm.creditCard, onChange: (e)=>setCheckoutForm({ ...checkoutForm, creditCard: e.target.value }), __source: { fileName: "", lineNumber: 282, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, "CVV"), /*#__PURE__*/ React.createElement("input", { type: "text", required: true, maxLength: "3", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", value: checkoutForm.cvv, onChange: (e)=>setCheckoutForm({ ...checkoutForm, cvv: e.target.value }), __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-2", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowCheckout(false), className: "bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, "Confirm Order"))))), toast && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 331, columnNumber: 9 }, __self: this }, toast)); }