function MainComponent() { const currentDate = new Date(); const getCurrentMonthDays = (year, month)=>new Date(year, month + 1, 0).getDate(); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [times, setTimes] = React.useState([]); const [currentMonth, setCurrentMonth] = React.useState(currentDate.getMonth()); const [currentYear, setCurrentYear] = React.useState(currentDate.getFullYear()); const [isMonthRegistered, setIsMonthRegistered] = React.useState(false); const holidays = { "1-1": "元日", "1-2": "振替休日", "1-9": "成人の日", "2-11": "建国記念の日", "2-23": "天皇誕生日", "3-21": "春分の日", "4-29": "昭和の日", "5-3": "憲法記念日", "5-4": "みどりの日", "5-5": "こどもの日", "7-17": "海の日", "8-11": "山の日", "9-18": "敬老の日", "9-23": "秋分の日", "10-9": "スポーツの日", "11-3": "文化の日", "11-23": "勤労感謝の日" }; const getDayOfWeek = (date)=>{ const days = [ "日", "月", "火", "水", "木", "金", "土" ]; return days[date.getDay()]; }; const isHoliday = (date)=>{ const key = `${date.getMonth() + 1}-${date.getDate()}`; return holidays[key]; }; React.useEffect(()=>{ try { const savedTimes = JSON.parse(localStorage.getItem(`times_${currentYear}_${currentMonth + 1}`) || "[]"); setTimes(savedTimes.length > 0 ? savedTimes : Array.from({ length: getCurrentMonthDays(currentYear, currentMonth) }, (_, i)=>{ const date = new Date(currentYear, currentMonth, i + 1); const isWeekend = date.getDay() === 0 || date.getDay() === 6; return { date: date.toISOString(), startTime: isWeekend ? "" : "09:00", endTime: isWeekend ? "" : "17:45", isRegistered: false }; })); setIsMonthRegistered(savedTimes.length > 0 && savedTimes.every((day)=>day.isRegistered)); } catch (error) { console.error("Failed to parse times from localStorage:", error); } }, [ currentMonth, currentYear ]); React.useEffect(()=>{ localStorage.setItem(`times_${currentYear}_${currentMonth + 1}`, JSON.stringify(times)); }, [ times, currentMonth, currentYear ]); const handleLogin = (e)=>{ e.preventDefault(); setIsLoggedIn(e.target.id.value === "user" && e.target.password.value === "password"); }; const handleTimeChange = (index, isStart, e)=>{ if (!times[index].isRegistered) { const newTimes = [ ...times ]; newTimes[index][isStart ? "startTime" : "endTime"] = e.target.value; setTimes(newTimes); } }; const handleRegistration = (index)=>{ const newTimes = times.map((time, i)=>i === index ? { ...time, isRegistered: true } : time); setTimes(newTimes); }; const handleDeregistration = (index)=>{ if (!isMonthRegistered) { const newTimes = times.map((time, i)=>i === index ? { ...time, isRegistered: false } : time); setTimes(newTimes); } }; const handleMonthChange = (direction)=>{ setCurrentMonth((prev)=>{ const newMonth = direction === "next" ? (prev + 1) % 12 : prev === 0 ? 11 : prev - 1; if (newMonth === 0 && direction === "next") setCurrentYear(currentYear + 1); if (newMonth === 11 && direction !== "next") setCurrentYear(currentYear - 1); return newMonth; }); }; const handleMonthRegistration = ()=>{ setTimes(times.map((day)=>({ ...day, isRegistered: true }))); setIsMonthRegistered(true); }; const isAllDaysRegistered = times.every((day)=>day.isRegistered); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-8", __source: { fileName: "", lineNumber: 134, columnNumber: 5 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center font-semibold text-xl mb-6", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "勤怠管理システムログイン"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "id", className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, "ID:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "id", id: "id", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, "パスワード:"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", id: "password", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, "ログイン"))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center font-semibold text-xl mb-6", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, currentYear, "年", currentMonth + 1, "月の出退勤記録"), /*#__PURE__*/ React.createElement("table", { className: "w-full table-auto bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, "出社時刻"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, "退社時刻"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, "操作"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, times.map((time, index)=>{ const day = new Date(time.date); const dayOfWeek = getDayOfWeek(day); const holiday = isHoliday(day); const formattedDayOfMonth = `${day.getDate()}(${dayOfWeek})${holiday ? ` ${holiday}` : ""}`; const isWeekend = day.getDay() === 0 || day.getDay() === 6; const textColorClass = holiday || day.getDay() === 0 ? "text-[#ff4500]" : day.getDay() === 6 ? "text-[#add8e6]" : ""; return /*#__PURE__*/ React.createElement("tr", { key: index, className: textColorClass, __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 204, columnNumber: 21 }, __self: this }, formattedDayOfMonth), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 205, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "time", value: time.startTime, onChange: (e)=>handleTimeChange(index, true, e), className: "w-full p-2 border rounded", disabled: time.isRegistered || isMonthRegistered, __source: { fileName: "", lineNumber: 206, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 214, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "time", value: time.endTime, onChange: (e)=>handleTimeChange(index, false, e), className: "w-full p-2 border rounded", disabled: time.isRegistered || isMonthRegistered, __source: { fileName: "", lineNumber: 215, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 flex justify-between", __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRegistration(index), disabled: time.isRegistered || isMonthRegistered, className: "bg-green-500 text-white p-2 rounded disabled:opacity-50", __source: { fileName: "", lineNumber: 224, columnNumber: 23 }, __self: this }, "登録"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeregistration(index), disabled: !time.isRegistered || isMonthRegistered, className: "bg-red-500 text-white p-2 rounded disabled:opacity-50", __source: { fileName: "", lineNumber: 231, columnNumber: 23 }, __self: this }, "修正"))); }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleMonthChange("previous"), className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, "前の月へ"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleMonthChange("next"), className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, "次の月へ")), !isMonthRegistered && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleMonthRegistration, disabled: !isAllDaysRegistered, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, "月次登録")))); }

勤怠管理システム ログイン

勤怠管理システムログイン