function MainComponent() { const [employees, setEmployees] = React.useState([]); const [newEmployee, setNewEmployee] = React.useState({ name: '', phone: '' }); const [attendance, setAttendance] = React.useState({}); const handleAddEmployee = (event)=>{ event.preventDefault(); const updatedEmployees = [ ...employees, { ...newEmployee, id: Date.now() } ]; setEmployees(updatedEmployees); setNewEmployee({ name: '', phone: '' }); }; const handleEmployeeChange = (event)=>{ const { name, value } = event.target; setNewEmployee({ ...newEmployee, [name]: value }); }; const toggleAttendance = (id)=>{ setAttendance((prevAttendance)=>({ ...prevAttendance, [id]: !prevAttendance[id] })); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto my-10 px-8 py-6 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Add New Employee"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddEmployee, className: "space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: newEmployee.name, onChange: handleEmployeeChange, className: "mt-1 w-full rounded-md border-gray-300 shadow-sm p-2 font-roboto", placeholder: "Employee Name", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phone", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "phone", id: "phone", value: newEmployee.phone, onChange: handleEmployeeChange, className: "mt-1 w-full rounded-md border-gray-300 shadow-sm p-2 font-roboto", placeholder: "Employee Phone", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#010101] text-white rounded-md font-semibold hover:bg-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Add Employee"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 my-10 px-8 overflow-auto", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Employees List"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, employees.map((employee)=>/*#__PURE__*/ React.createElement("li", { key: employee.id, className: "flex justify-between items-center bg-white px-6 py-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, employee.name), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, employee.phone))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 my-10 px-8 overflow-auto", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Record Attendance"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, employees.map((employee)=>/*#__PURE__*/ React.createElement("div", { key: employee.id, className: "flex items-center bg-white px-6 py-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "attendance", id: employee.id.toString(), checked: attendance[employee.id] || false, onChange: ()=>toggleAttendance(employee.id), className: "mr-4 h-4 w-4", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: employee.id.toString(), className: "text-md font-roboto text-[#121212] flex-1", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, employee.name)))))); }