シフト概要

'; dailyEvents.forEach((shift)=>{ overview += `

${shift.title}: ${shift.start.split('T')[1].slice(0, 5)} - ${shift.end.split('T')[1].slice(0, 5)}

`; }); setDailyOverview(overview); }; const renderCalendar = ()=>{ const monthStart = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1); const monthEnd = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0); const startDate = new Date(monthStart); startDate.setDate(startDate.getDate() - startDate.getDay()); const endDate = new Date(monthEnd); endDate.setDate(endDate.getDate() + (6 - endDate.getDay())); const dateFormat = new Intl.DateTimeFormat('ja-JP', { weekday: 'short' }); const monthFormat = new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long' }); const weeks = []; let days = []; let day = startDate; while(day <= endDate){ for(let i = 0; i < 7; i++){ const cloneDay = new Date(day); days.push(/*#__PURE__*/ React.createElement("div", { key: day, className: `border p-1 ${day.getMonth() !== currentMonth.getMonth() ? 'bg-gray-200' : ''}`, __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, day.getDate()), shifts.filter((shift)=>new Date(shift.start).toDateString() === cloneDay.toDateString()).map((shift, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-xs p-1 mt-1 rounded", style: { backgroundColor: shift.backgroundColor }, __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, shift.title, ": ", shift.start.split('T')[1].slice(0, 5), "-", shift.end.split('T')[1].slice(0, 5))))); day = new Date(day.setDate(day.getDate() + 1)); } weeks.push(/*#__PURE__*/ React.createElement("div", { key: day, className: "grid grid-cols-7", __source: { fileName: "", lineNumber: 169, columnNumber: 18 }, __self: this }, days)); days = []; } return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() - 1))), className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, "前月"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, monthFormat.format(currentMonth)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() + 1))), className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "次月")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1 mb-2", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 7 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-center font-bold", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, dateFormat.format(new Date(2021, 0, index + 1))))), weeks); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-sans p-4", __source: { fileName: "", lineNumber: 193, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, "コンビニシフト管理アプリ"), renderCalendar(), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4 flex flex-wrap gap-2 mt-4", __source: { fileName: "", lineNumber: 198, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: formData.date, onChange: (e)=>setFormData({ ...formData, date: e.target.value }), required: true, className: "border p-2", __source: { fileName: "", lineNumber: 199, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", name: "startTime", value: formData.startTime, onChange: (e)=>setFormData({ ...formData, startTime: e.target.value }), required: true, className: "border p-2", __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", name: "endTime", value: formData.endTime, onChange: (e)=>setFormData({ ...formData, endTime: e.target.value }), required: true, className: "border p-2", __source: { fileName: "", lineNumber: 201, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: (e)=>setFormData({ ...formData, name: e.target.value }), placeholder: "従業員名", required: true, className: "border p-2", __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, "シフトを追加")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 206, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: searchData.date, onChange: (e)=>setSearchData({ ...searchData, date: e.target.value }), className: "border p-2", __source: { fileName: "", lineNumber: 207, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: searchData.name, onChange: (e)=>setSearchData({ ...searchData, name: e.target.value }), placeholder: "従業員名で検索", className: "border p-2", __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "bg-green-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 212, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleExport, className: "bg-purple-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 213, columnNumber: 9 }, __self: this }, "シフトをエクスポート"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".csv", onChange: handleImport, className: "border p-2", __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>document.querySelector('input[type="file"]').click(), className: "bg-yellow-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, "シフトをインポート")), /*#__PURE__*/ React.createElement("div", { id: "statistics", className: "mb-4", __source: { fileName: "", lineNumber: 218, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 219, columnNumber: 9 }, __self: this }, "シフト統計"), Object.entries(statistics).map(([name, stats])=>/*#__PURE__*/ React.createElement("p", { key: name, __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, name, ": 合計 ", stats.totalHours.toFixed(2), " 時間, ", stats.shiftCount, " シフト"))), modalData && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, "シフト詳細"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, "従業員名: ", modalData.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, "日付: ", modalData.date), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, "開始時間: ", modalData.start), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "終了時間: ", modalData.end), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setModalData(null), className: "mt-2 bg-red-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, "閉じる"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 238, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this }, "1日のシフト概要"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: overviewDate, onChange: (e)=>setOverviewDate(e.target.value), className: "border p-2", __source: { fileName: "", lineNumber: 241, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleShowOverview, className: "bg-indigo-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, "概要を表示")), /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: dailyOverview }, className: "mt-2", __source: { fileName: "", lineNumber: 244, columnNumber: 9 }, __self: this }))); }

コンビニシフト管理アプリ

2025年7月

シフト統計

1日のシフト概要