function Component({ title }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title)); } function ComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { title: "辰巳会計事務所シフト管理", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentView, setCurrentView] = React.useState('login'); const [loggedInUser, setLoggedInUser] = React.useState(null); const [users, setUsers] = React.useState([]); const [shifts, setShifts] = React.useState([]); const [approvedShifts, setApprovedShifts] = React.useState([]); const [currentMonth, setCurrentMonth] = React.useState(new Date().getMonth()); const [currentYear, setCurrentYear] = React.useState(new Date().getFullYear()); const [showMenu, setShowMenu] = React.useState(false); const [showPopup, setShowPopup] = React.useState(false); const registerUser = (name, userId, password)=>{ setUsers([ ...users, { name, userId, password } ]); setCurrentView('login'); setShowPopup(true); setTimeout(()=>setShowPopup(false), 1000); }; const loginUser = (userId, password)=>{ const user = users.find((u)=>u.userId === userId && u.password === password); if (user) { setLoggedInUser(user); setCurrentView('submitShift'); } }; const submitShift = (date, startTime, endTime)=>{ setShifts([ ...shifts, { userId: loggedInUser.userId, date, startTime, endTime } ]); setShowPopup(true); setTimeout(()=>setShowPopup(false), 1000); }; const approveShift = (shift)=>{ setApprovedShifts([ ...approvedShifts, shift ]); setShifts(shifts.filter((s)=>s !== shift)); }; const deleteUser = (userId)=>{ setUsers(users.filter((u)=>u.userId !== userId)); }; const logout = ()=>{ setLoggedInUser(null); setCurrentView('login'); }; const renderView = ()=>{ switch(currentView){ case 'login': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm", onSubmit: (e)=>{ e.preventDefault(); loginUser(e.target.userId.value, e.target.password.value); }, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userId", placeholder: "ユーザーID", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "パスワード", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "ログイン")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView('register'), className: "mt-2 text-sm text-blue-500", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "新規登録はこちら")); case 'register': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "新規登録"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm", onSubmit: (e)=>{ e.preventDefault(); registerUser(e.target.name.value, e.target.userId.value, e.target.password.value); }, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "名前", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "userId", placeholder: "ユーザーID", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "パスワード", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "登録"))); case 'submitShift': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "希望のシフトを提出する"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "ようこそ、", loggedInUser.name, "さん"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm", onSubmit: (e)=>{ e.preventDefault(); submitShift(e.target.date.value, e.target.startTime.value, e.target.endTime.value); e.target.reset(); }, __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", name: "startTime", min: "07:00", max: "24:00", step: "900", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", name: "endTime", min: "07:00", max: "24:00", step: "900", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "提出")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "申請中のシフト一覧"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, shifts.filter((s)=>s.userId === loggedInUser.userId).map((shift, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, shift.date, ": ", shift.startTime, " - ", shift.endTime)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "承認されたシフト"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, [ ...Array(new Date(currentYear, currentMonth + 1, 0).getDate()).keys() ].map((day)=>{ const date = new Date(currentYear, currentMonth, day + 1); const shiftsForDay = approvedShifts.filter((s)=>s.userId === loggedInUser.userId && new Date(s.date).toDateString() === date.toDateString()); return /*#__PURE__*/ React.createElement("div", { key: day, className: "border p-1 text-center", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }, day + 1), shiftsForDay.map((shift, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-xs", __source: { fileName: "", lineNumber: 127, columnNumber: 25 }, __self: this }, shift.startTime, "-", shift.endTime))); })), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth((prev)=>(prev - 1 + 12) % 12), className: "mr-2", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, "前月"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth((prev)=>(prev + 1) % 12), __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "次月")))); case 'adminLogin': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "管理者ログイン"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm", onSubmit: (e)=>{ e.preventDefault(); if (e.target.password.value === '1611') setCurrentView('admin'); }, __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "パスワード", className: "w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-red-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, "ログイン"))); case 'admin': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "管理者画面"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, "シフト承認"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, shifts.map((shift, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, users.find((u)=>u.userId === shift.userId).name, ": ", shift.date, " ", shift.startTime, "-", shift.endTime, /*#__PURE__*/ React.createElement("button", { onClick: ()=>approveShift(shift), className: "ml-2 bg-green-500 text-white p-1 rounded", __source: { fileName: "", lineNumber: 168, columnNumber: 21 }, __self: this }, "承認"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, "承認済みシフト"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, [ ...Array(new Date(currentYear, currentMonth + 1, 0).getDate()).keys() ].map((day)=>{ const date = new Date(currentYear, currentMonth, day + 1); const shiftsForDay = approvedShifts.filter((s)=>new Date(s.date).toDateString() === date.toDateString()); return /*#__PURE__*/ React.createElement("div", { key: day, className: "border p-1 text-center", __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 183, columnNumber: 23 }, __self: this }, day + 1), shiftsForDay.map((shift, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-xs", __source: { fileName: "", lineNumber: 185, columnNumber: 25 }, __self: this }, users.find((u)=>u.userId === shift.userId).name, ": ", shift.startTime, "-", shift.endTime))); })), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth((prev)=>(prev - 1 + 12) % 12), className: "mr-2", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, "前月"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth((prev)=>(prev + 1) % 12), __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, "次月"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView('userManagement'), className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, "ユーザー管理")); case 'userManagement': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, "ユーザー管理"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }, users.map((user, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, user.name, " (ID: ", user.userId, ")", /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteUser(user.userId), className: "ml-2 bg-red-500 text-white p-1 rounded", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, "削除")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView('admin'), className: "mt-4 bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, "管理者画面に戻る")); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 222, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 223, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { title: "辰巳会計事務所シフト管理", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMenu(!showMenu), className: "text-2xl", __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }, "☰")), showMenu && /*#__PURE__*/ React.createElement("div", { className: "fixed right-0 top-0 h-full w-64 bg-white shadow-lg p-4", __source: { fileName: "", lineNumber: 228, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowMenu(false); setCurrentView('login'); }, className: "block w-full text-left p-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowMenu(false); setCurrentView('submitShift'); }, className: "block w-full text-left p-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, "シフト提出"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowMenu(false); setCurrentView('adminLogin'); }, className: "block w-full text-left p-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, "管理者ログイン"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowMenu(false); logout(); }, className: "block w-full text-left p-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, "ログアウト")), renderView(), showPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4 rounded shadow-lg", __source: { fileName: "", lineNumber: 237, columnNumber: 9 }, __self: this }, currentView === 'register' ? '登録完了' : '提出完了！')); }