function MainComponent({ month, year, availableRooms, actions }) { const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const selectedMonth = monthNames[month - 1]; const handleRoomOccupancyClick = ()=>{ actions.goToRoomOccupancy(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-6 max-w-[600px] mx-auto my-20 pb-20", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-crimson-text font-bold text-[#121212]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "InnJoy's mission is to help you run your inn like a pro. We're here to help you every step of the way."), /*#__PURE__*/ React.createElement("div", { className: "flex items-center px-4 py-2 border border-[#121212] rounded-full bg-white", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-xl text-[#121212]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full pl-4 pr-8 py-2 bg-transparent text-lg font-roboto text-[#121212]", type: "search", placeholder: "Search your guests, invoices, and more", name: "search", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-4 px-4 py-2 border border-[#121212] rounded-md bg-white", onClick: actions.goToMonthSelection, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-calendar-alt text-xl text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "bg-transparent text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Select month"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 px-6 py-4 border border-[#121212] rounded-md bg-white", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Room occupancy"), /*#__PURE__*/ React.createElement("div", { onClick: handleRoomOccupancyClick, className: "cursor-pointer", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-crimson-text font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, `${selectedMonth} ${year}`), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, availableRooms)), /*#__PURE__*/ React.createElement("a", { href: "/new-project", target: "_self", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 51 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 px-6 py-4 border border-[#121212] rounded-md bg-white", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Quick actions"), actions.list.map((action, index)=>/*#__PURE__*/ React.createElement("button", { key: `action-${index}`, className: "flex justify-between items-center w-full text-left", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${action.icon} text-xl text-[#121212]`, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-crimson-text font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, action.name), /*#__PURE__*/ React.createElement("p", { className: "text-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, action.description))), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }))))); } function StoryComponent() { const [selectedMonth, setSelectedMonth] = React.useState(null); const year = new Date().getFullYear(); const goToMonthSelection = ()=>{ // ...Month selection logic // Assuming we simulate selecting May (Month 5) setSelectedMonth(5); }; const availableRooms = "4 rooms available"; const actions = { goToMonthSelection: goToMonthSelection, goToRoomOccupancy: ()=>{ /* Navigate to room occupancy page */ }, list: [ { name: "Inn settings", description: "Set up your inn's information", icon: "fas fa-cog" }, { name: "View report", description: "View the generated report", icon: "fas fa-clipboard-list" } ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 min-h-screen bg-[#f5f5f5] overflow-auto", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { month: selectedMonth, year: year, availableRooms: availableRooms, actions: actions, __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this })); }