function MainComponent() { const [bookings, setBookings] = React.useState([]); const [loading, setLoading] = React.useState(false); const fetchBookings = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "system", content: "Show the current pod bookings" } ], system_prompt: 'Retrieve pod bookings' }) }); const data = await response.json(); if (data.status) { setBookings(data.result); // Assuming data.result is the bookings array } else { console.error('Failed to fetch bookings'); } } catch (error) { console.error('Fetch error: ', error); } setLoading(false); }; React.useEffect(()=>{ fetchBookings(); }, []); const renderCalendar = ()=>{ if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 39, columnNumber: 14 }, __self: this }, "Loading..."); } if (!bookings.length) { return /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 14 }, __self: this }, "No bookings found."); } return bookings.map((booking, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, booking.podName), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, new Date(booking.date).toLocaleDateString())))); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F4F8] p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#10375C] mb-10", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Pod Booking Calendar"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg leading-6 font-medium text-gray-900", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Upcoming Bookings")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, renderCalendar()))); }