function MainComponent() { const [tasks, setTasks] = React.useState([ { user: 'John Doe', taskName: 'Complete React project', regDateTime: '2023-10-01T10:00', dueDate: '2023-10-15', taskStatus: 'Pending' }, { user: 'Jane Smith', taskName: 'Prepare for meeting', regDateTime: '2023-10-03T14:00', dueDate: '2023-10-05', taskStatus: 'In Progress' } ]); const [editingTask, setEditingTask] = React.useState(null); const [formData, setFormData] = React.useState({ user: '', taskName: '', regDateTime: '', dueDate: '', taskStatus: 'Pending' }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); if (editingTask !== null) { const updatedTasks = tasks.map((task, index)=>index === editingTask ? formData : task); setTasks(updatedTasks); setEditingTask(null); } else { setTasks([ ...tasks, formData ]); } setFormData({ user: '', taskName: '', regDateTime: '', dueDate: '', taskStatus: 'Pending' }); }; const handleEdit = (index)=>{ setFormData(tasks[index]); setEditingTask(index); }; const handleDelete = (index)=>{ const filteredTasks = tasks.filter((_, i)=>i !== index); setTasks(filteredTasks); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Task Management"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", id: "task-form", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "User Name"), /*#__PURE__*/ React.createElement("input", { name: "user", type: "text", value: formData.user, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Task Name"), /*#__PURE__*/ React.createElement("input", { name: "taskName", type: "text", value: formData.taskName, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Registration Date and Time"), /*#__PURE__*/ React.createElement("input", { name: "regDateTime", type: "datetime-local", value: formData.regDateTime, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Due Date"), /*#__PURE__*/ React.createElement("input", { name: "dueDate", type: "date", value: formData.dueDate, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Task Status"), /*#__PURE__*/ React.createElement("select", { name: "taskStatus", value: formData.taskStatus, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Pending", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "Pending"), /*#__PURE__*/ React.createElement("option", { value: "In Progress", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "In Progress"), /*#__PURE__*/ React.createElement("option", { value: "Completed", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "Completed"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white px-3 py-2 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, editingTask !== null ? 'Update Task' : 'Add Task')), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-h-[400px] overflow-y-auto", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, "User"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, "Task Name"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 137, columnNumber: 19 }, __self: this }, "Reg. Date Time"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, "Due Date"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 140, columnNumber: 19 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 146, columnNumber: 21 }, __self: this }, task.user), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 147, columnNumber: 21 }, __self: this }, task.taskName), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, task.regDateTime), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, task.dueDate), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }, task.taskStatus), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 151, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEdit(index), className: "text-blue-500 font-awesome fa-edit mx-1", __source: { fileName: "", lineNumber: 152, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(index), className: "text-red-500 font-awesome fa-trash-alt mx-1", __source: { fileName: "", lineNumber: 156, columnNumber: 23 }, __self: this })))))))))); }

User	Task Name	Reg. Date Time	Due Date	Status	Actions
John Doe	Complete React project	2023-10-01T10:00	2023-10-15	Pending
Jane Smith	Prepare for meeting	2023-10-03T14:00	2023-10-05	In Progress