function MainComponent() { const [isEmployee, setIsEmployee] = useState(false); const [selectedDate, setSelectedDate] = useState(""); const [dresses, setDresses] = useState([ { id: 1, name: "Classic Elegance", price: 1299.99, description: "A timeless A-line wedding dress with lace details", image: "/dress1.jpg", reservedDates: [] }, { id: 2, name: "Modern Princess", price: 1599.99, description: "Ball gown style with pearl embellishments", image: "/dress2.jpg", reservedDates: [] } ]); const [editingDress, setEditingDress] = useState(null); const [showAddForm, setShowAddForm] = useState(false); const handleDateChange = (e)=>{ setSelectedDate(e.target.value); }; const handleReservation = (dressId)=>{ setDresses(dresses.map((dress)=>{ if (dress.id === dressId) { return { ...dress, reservedDates: [ ...dress.reservedDates, selectedDate ] }; } return dress; })); }; const handleAddDress = (e)=>{ e.preventDefault(); const newDress = { id: dresses.length + 1, name: e.target.name.value, price: parseFloat(e.target.price.value), description: e.target.description.value, image: "/placeholder.jpg", reservedDates: [] }; setDresses([ ...dresses, newDress ]); setShowAddForm(false); }; const handleEditDress = (e)=>{ e.preventDefault(); setDresses(dresses.map((dress)=>{ if (dress.id === editingDress.id) { return { ...dress, name: e.target.name.value, price: parseFloat(e.target.price.value), description: e.target.description.value }; } return dress; })); setEditingDress(null); }; const handleDeleteDress = (dressId)=>{ setDresses(dresses.filter((dress)=>dress.id !== dressId)); }; const [showModal, setShowModal] = useState(false); const [selectedDressId, setSelectedDressId] = useState(null); const handleReservationSubmit = (e)=>{ e.preventDefault(); if (selectedDressId) { handleReservation(selectedDressId); setShowModal(false); setSelectedDressId(null); } }; const [sortBy, setSortBy] = useState("dress"); const sortedReservations = dresses.flatMap((dress)=>dress.reservedDates.map((date)=>({ dressName: dress.name, date }))).sort((a, b)=>{ if (sortBy === "dress") { return a.dressName.localeCompare(b.dressName); } return new Date(a.date) - new Date(b.date); }); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f9fa] p-8", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#333]", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Wedding Dress Reservations"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsEmployee(!isEmployee), className: "px-4 py-2 bg-[#6c757d] text-white rounded", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, isEmployee ? "Customer View" : "Employee View")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: selectedDate, onChange: handleDateChange, className: "p-2 border rounded", name: "reservation-date", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this })), isEmployee && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAddForm(true), className: "px-4 py-2 bg-[#28a745] text-white rounded", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Add New Dress")), showAddForm && /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddDress, className: "mb-8 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "name", placeholder: "Dress Name", className: "block w-full mb-2 p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "price", type: "number", step: "0.01", placeholder: "Price", className: "block w-full mb-2 p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "description", placeholder: "Description", className: "block w-full mb-2 p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#28a745] text-white rounded", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Add Dress")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, dresses.map((dress)=>/*#__PURE__*/ React.createElement("div", { key: dress.id, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, editingDress?.id === dress.id ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleEditDress, className: "space-y-2", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "name", defaultValue: dress.name, className: "block w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 173, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "price", type: "number", step: "0.01", defaultValue: dress.price, className: "block w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "description", defaultValue: dress.description, className: "block w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#28a745] text-white rounded", __source: { fileName: "", lineNumber: 194, columnNumber: 21 }, __self: this }, "Save"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setEditingDress(null), className: "px-4 py-2 bg-[#dc3545] text-white rounded", __source: { fileName: "", lineNumber: 200, columnNumber: 21 }, __self: this }, "Cancel"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: dress.image, alt: `Wedding dress ${dress.name}`, className: "w-full h-[300px] object-cover mb-4", __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text mb-2", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, dress.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#6c757d] mb-2", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }, dress.description), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, "$", dress.price), isEmployee ? /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 222, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setEditingDress(dress), className: "px-4 py-2 bg-[#ffc107] text-black rounded", __source: { fileName: "", lineNumber: 223, columnNumber: 23 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteDress(dress.id), className: "px-4 py-2 bg-[#dc3545] text-white rounded", __source: { fileName: "", lineNumber: 229, columnNumber: 23 }, __self: this }, "Delete")) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (selectedDate && !dress.reservedDates.includes(selectedDate)) { setSelectedDressId(dress.id); setShowModal(true); } }, disabled: !selectedDate || dress.reservedDates.includes(selectedDate), className: `px-4 py-2 rounded w-full ${!selectedDate || dress.reservedDates.includes(selectedDate) ? "bg-[#6c757d] cursor-not-allowed" : "bg-[#007bff]"} text-white`, __source: { fileName: "", lineNumber: 237, columnNumber: 21 }, __self: this }, !selectedDate ? "Select a Date" : dress.reservedDates.includes(selectedDate) ? "Unavailable" : "Reserve"))))), isEmployee && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, "Reserved Dresses"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSortBy("dress"), className: "px-4 py-2 bg-[#007bff] text-white rounded", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, "Sort by Dress"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSortBy("date"), className: "px-4 py-2 bg-[#007bff] text-white rounded", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, "Sort by Date")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 290, columnNumber: 13 }, __self: this }, sortedReservations.map((reservation, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }, "Dress: ", reservation.dressName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 296, columnNumber: 19 }, __self: this }, "Date: ", reservation.date))))), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 304, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg w-full max-w-md", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }, "Reservation Details"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleReservationSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "name", placeholder: "Your Name", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "phone", type: "tel", placeholder: "Phone Number", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", placeholder: "Email Address", className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 330, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-1 px-4 py-2 bg-[#007bff] text-white rounded", __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this }, "Confirm"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowModal(false), className: "flex-1 px-4 py-2 bg-[#6c757d] text-white rounded", __source: { fileName: "", lineNumber: 337, columnNumber: 19 }, __self: this }, "Cancel"))))))); }