function MainComponent() { const [currentDate, setCurrentDate] = React.useState(new Date()); const [viewType, setViewType] = React.useState("day"); const [shiftData, setShiftData] = React.useState([]); const [filterStaff, setFilterStaff] = React.useState(""); const [filterGroup, setFilterGroup] = React.useState(""); React.useEffect(()=>{ setShiftData(generateShiftData(currentDate)); }, [ currentDate, viewType ]); const handlePrevious = ()=>{ if (viewType === "day") { setCurrentDate((prevDate)=>new Date(prevDate.setDate(prevDate.getDate() - 1))); } else if (viewType === "week") { setCurrentDate((prevDate)=>new Date(prevDate.setDate(prevDate.getDate() - 7))); } else { setCurrentDate((prevDate)=>new Date(prevDate.setMonth(prevDate.getMonth() - 1))); } }; const handleNext = ()=>{ if (viewType === "day") { setCurrentDate((prevDate)=>new Date(prevDate.setDate(prevDate.getDate() + 1))); } else if (viewType === "week") { setCurrentDate((prevDate)=>new Date(prevDate.setDate(prevDate.getDate() + 7))); } else { setCurrentDate((prevDate)=>new Date(prevDate.setMonth(prevDate.getMonth() + 1))); } }; const renderShiftTable = ()=>{ const timeSlots = generateTimeSlots(); const days = Array.from({ length: viewType === "day" ? 1 : viewType === "week" ? 7 : 30 }, (_, i)=>{ const date = new Date(currentDate); date.setDate(currentDate.getDate() + i); return date; }); const filteredShiftData = shiftData.filter((pharmacist)=>{ return (filterStaff === "" || pharmacist.name.includes(filterStaff)) && (filterGroup === "" || pharmacist.group === filterGroup); }); return /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full border-collapse", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100 text-sm", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "日付"), timeSlots.map((time)=>/*#__PURE__*/ React.createElement("th", { key: time, className: "border p-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, days.map((date)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: date, __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-bold", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, `${date.getMonth() + 1}/${date.getDate()} (${[ "日", "月", "火", "水", "木", "金", "土" ][date.getDay()]})`), timeSlots.map((time)=>/*#__PURE__*/ React.createElement("td", { key: time, className: "border p-2 text-center", __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, time))), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-bold", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, "処方箋枚数"), timeSlots.map((time, index)=>/*#__PURE__*/ React.createElement("td", { key: time, className: `border p-2 text-center ${getPrescriptionColor(index)}`, __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this }, getPrescriptionCount(index)))), filteredShiftData.map((pharmacist, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-bold", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }, pharmacist.name), timeSlots.map((time, timeIndex)=>/*#__PURE__*/ React.createElement("td", { key: `${pharmacist.name}-${time}`, className: "border p-2 text-center", __source: { fileName: "", lineNumber: 107, columnNumber: 23 }, __self: this }, renderShiftCell(pharmacist.shifts[timeIndex])))))))))); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans bg-gray-50", __source: { fileName: "", lineNumber: 125, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center text-gray-800", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, "勤務シフト ", currentDate.getFullYear(), "年 ", currentDate.getMonth() + 1, "月"), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex justify-center space-x-4", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevious, className: "px-6 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left mr-2", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }), " 前"), /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "px-6 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "次 ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right ml-2", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex justify-center space-x-4", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setViewType("day"), className: `px-4 py-2 rounded-full ${viewType === "day" ? "bg-blue-500 text-white" : "bg-white text-gray-700"} transition duration-300`, __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, "1日"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setViewType("week"), className: `px-4 py-2 rounded-full ${viewType === "week" ? "bg-blue-500 text-white" : "bg-white text-gray-700"} transition duration-300`, __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, "1週間"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setViewType("month"), className: `px-4 py-2 rounded-full ${viewType === "month" ? "bg-blue-500 text-white" : "bg-white text-gray-700"} transition duration-300`, __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, "1ヶ月")), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex justify-center space-x-4", __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "スタッフ名でフィルター", value: filterStaff, onChange: (e)=>setFilterStaff(e.target.value), className: "px-4 py-2 border rounded-full", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: filterGroup, onChange: (e)=>setFilterGroup(e.target.value), className: "px-4 py-2 border rounded-full", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, "全てのグループ"), /*#__PURE__*/ React.createElement("option", { value: "A", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, "グループA"), /*#__PURE__*/ React.createElement("option", { value: "B", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, "グループB"))), renderShiftTable()); } function generateTimeSlots() { const slots = []; for(let hour = 8; hour <= 20; hour++){ slots.push(`${hour.toString().padStart(2, "0")}:00`); slots.push(`${hour.toString().padStart(2, "0")}:30`); } return slots; } function generateShiftData(date) { const timeSlots = generateTimeSlots(); const numPharmacists = 4; const shiftTypes = [ "勤務", "休憩", "余剰", "早番", "遅番", "休" ]; const groups = [ "A", "B" ]; return Array.from({ length: numPharmacists }, (_, i)=>({ name: `Pharmacist_${i + 1}`, group: groups[i % groups.length], shifts: timeSlots.map((time, index)=>{ const hour = parseInt(time.split(":")[0]); const minute = parseInt(time.split(":")[1]); if (hour < 9 || hour >= 18) return ""; if (i === 0 && hour >= 9 && hour < 13) return "早番"; if (i === 1 && hour >= 14 && hour < 18) return "遅番"; if (hour === 12 && minute === 0 && (i === 0 || i === 1)) return "休憩"; if (hour === 12 && minute === 30 && (i === 2 || i === 3)) return "休憩"; if (hour === 13 && minute === 0 && (i === 0 || i === 1)) return "休憩"; if (hour === 13 && minute === 30 && (i === 2 || i === 3)) return "休憩"; if (i === numPharmacists - 1 && (hour === 9 && minute === 30 || hour === 10 && minute === 0)) return "余剰"; if (Math.random() < 0.05) return "休"; return "勤務"; }) })); } function renderShiftCell(shiftType) { const shiftColors = { 勤務: "bg-green-100 text-green-800", 休憩: "bg-gray-100 text-gray-800", 余剰: "bg-yellow-100 text-yellow-800", 早番: "bg-blue-100 text-blue-800", 遅番: "bg-purple-100 text-purple-800", 休: "bg-red-100 text-red-800" }; return shiftType ? /*#__PURE__*/ React.createElement("div", { className: `font-medium ${shiftColors[shiftType]} rounded-full px-2 py-1`, __source: { fileName: "", lineNumber: 248, columnNumber: 5 }, __self: this }, shiftType) : null; } function getPrescriptionCount(index) { const hour = Math.floor(index / 2) + 8; if (hour < 9 || hour >= 18) return ""; if (hour === 10 || hour === 16) return Math.floor(Math.random() * 10) + 10; return Math.floor(Math.random() * 5) + 1; } function getPrescriptionColor(index) { const hour = Math.floor(index / 2) + 8; if (hour < 9 || hour >= 18) return "bg-white"; return "bg-red-100 text-red-800"; }

日付	08:00	08:30	09:00	09:30	10:00	10:30	11:00	11:30	12:00	12:30	13:00	13:30	14:00	14:30	15:00	15:30	16:00	16:30	17:00	17:30	18:00	18:30	19:00	19:30	20:00	20:30
12/4 (木)	08:00	08:30	09:00	09:30	10:00	10:30	11:00	11:30	12:00	12:30	13:00	13:30	14:00	14:30	15:00	15:30	16:00	16:30	17:00	17:30	18:00	18:30	19:00	19:30	20:00	20:30
処方箋枚数			1	4	15	17	1	5	3	5	5	2	4	1	4	1	13	19	4	5

勤務シフト 2025年 12月

勤務シフト 2025年 12月