function MainComponent() { const initialTasks = [ { id: 1, name: 'タスク1', startDate: '2023-10-01', endDate: '2023-10-05', actualStartDate: '2023-10-02', actualEndDate: '2023-10-04', completed: false }, { id: 2, name: 'タスク2', startDate: '2023-10-03', endDate: '2023-10-10', actualStartDate: '2023-10-04', actualEndDate: '2023-10-11', completed: false } ]; const [tasks, setTasks] = React.useState(initialTasks); const [startDate, setStartDate] = React.useState('2023-10-01'); const [endDate, setEndDate] = React.useState('2023-10-11'); const handleCheckboxChange = (taskId)=>{ setTasks(tasks.map((task)=>task.id === taskId ? { ...task, completed: !task.completed } : task)); }; const handleDateInputChange = (taskId, dateType, value, field)=>{ setTasks(tasks.map((task)=>{ if (task.id === taskId) { const key = dateType === 'planned' ? { startDate: value } : { actualStartDate: value }; return { ...task, ...field === 'end' ? { endDate: value } : key }; } return task; })); }; const uniqueDates = React.useMemo(()=>{ const dateArray = []; let currentDate = new Date(startDate); const lastDate = new Date(endDate); while(currentDate <= lastDate){ dateArray.push(currentDate.toISOString().split('T')[0]); currentDate.setDate(currentDate.getDate() + 1); } return dateArray; }, [ startDate, endDate ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "開始日"), /*#__PURE__*/ React.createElement("input", { type: "date", value: startDate, onChange: (e)=>setStartDate(e.target.value), className: "border p-2 mr-4 font-roboto", name: "start-date", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "mr-2 font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "終了日"), /*#__PURE__*/ React.createElement("input", { type: "date", value: endDate, onChange: (e)=>setEndDate(e.target.value), className: "border p-2 font-roboto", name: "end-date", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full table-auto", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-800 text-white font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "完了"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "タスク"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "予定期間"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "実績期間"), uniqueDates.map((date, idx)=>/*#__PURE__*/ React.createElement("th", { key: idx, className: "px-4 py-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, date)))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, tasks.map((task)=>{ const rowClass = task.completed ? 'bg-gray-400' : ''; return /*#__PURE__*/ React.createElement("tr", { key: task.id, className: rowClass, __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 text-center", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: task.completed, onChange: ()=>handleCheckboxChange(task.id), className: "form-checkbox", name: `task-checkbox-${task.id}`, __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: task.startDate, onChange: (e)=>handleDateInputChange(task.id, 'planned', e.target.value, 'start'), className: "border p-2 font-roboto", name: `task-startdate-${task.id}`, __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", value: task.endDate, onChange: (e)=>handleDateInputChange(task.id, 'planned', e.target.value, 'end'), className: "border p-2 font-roboto", name: `task-enddate-${task.id}`, __source: { fileName: "", lineNumber: 96, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: task.actualStartDate, onChange: (e)=>handleDateInputChange(task.id, 'actual', e.target.value, 'start'), className: "border p-2 font-roboto", name: `task-actualstartdate-${task.id}`, __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", value: task.actualEndDate, onChange: (e)=>handleDateInputChange(task.id, 'actual', e.target.value, 'end'), className: "border p-2 font-roboto", name: `task-actualenddate-${task.id}`, __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this })), uniqueDates.map((date, idx)=>{ const isPlanned = date >= task.startDate && date <= task.endDate; const isActual = date >= task.actualStartDate && date <= task.actualEndDate; return /*#__PURE__*/ React.createElement("td", { key: idx, className: "border px-4 py-2 relative", __source: { fileName: "", lineNumber: 124, columnNumber: 23 }, __self: this }, isPlanned && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-blue-200 text-center", __source: { fileName: "", lineNumber: 125, columnNumber: 39 }, __self: this }, "P"), isActual && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 mt-6 bg-green-200 text-center", __source: { fileName: "", lineNumber: 126, columnNumber: 38 }, __self: this }, "A")); })); }))))); }

完了	タスク	予定期間	実績期間	2023-10-01	2023-10-02	2023-10-03	2023-10-04	2023-10-05	2023-10-06	2023-10-07	2023-10-08	2023-10-09	2023-10-10	2023-10-11
	タスク1			P	P A	P A	P A	P
	タスク2					P	P A	P A	P A	P A	P A	P A	P A	A