function MainComponent() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const [assignee, setAssignee] = React.useState(''); const [deadline, setDeadline] = React.useState(''); const [emailSent, setEmailSent] = React.useState(false); const handleTaskChange = (e)=>setNewTask(e.target.value); const handleAssigneeChange = (e)=>setAssignee(e.target.value); const handleDeadlineChange = (e)=>setDeadline(e.target.value); const sendEmail = (task)=>{ // Logic to send an email (will not actually send an email as no backend service to handle this) console.log(`Sending email for task: ${task.content}`); }; const addTask = ()=>{ if (newTask && assignee && deadline) { const task = { id: Date.now(), content: newTask, assignee: assignee, deadline: deadline }; sendEmail(task); setEmailSent(true); setTasks((prevTasks)=>[ ...prevTasks, task ]); setNewTask(''); setAssignee(''); setDeadline(''); } }; const formatDate = (dateString)=>{ const options = { year: 'numeric', month: 'long', day: 'numeric' }; return new Date(dateString).toLocaleDateString(undefined, options); }; React.useEffect(()=>{ if (emailSent) { // Do something when an email is sent, e.g. show a notification alert('An email has been sent to the assignee.'); setEmailSent(false); } }, [ emailSent ]); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 md:p-8", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-3xl md:text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Task Delegation and Monitoring"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "taskName", value: newTask, onChange: handleTaskChange, placeholder: "Enter a new task", className: "p-2 bg-[#f0f0f0] border border-[#dcdcdc] rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "assignee", value: assignee, onChange: handleAssigneeChange, placeholder: "Assignee", className: "p-2 bg-[#f0f0f0] border border-[#dcdcdc] rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "deadline", value: deadline, onChange: handleDeadlineChange, className: "p-2 bg-[#f0f0f0] border border-[#dcdcdc] rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: addTask, className: "bg-[#1a73e8] text-white py-2 px-4 rounded hover:bg-[#1558b3] transition duration-300", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Delegate Task"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, tasks.map(({ id, content, assignee, deadline })=>/*#__PURE__*/ React.createElement("div", { key: id, className: "p-4 bg-[#ffffff] border border-[#dcdcdc] rounded shadow-md", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, content), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#666] mb-1", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Responsible: ", assignee), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Deadline: ", formatDate(deadline)))))); }