function MainComponent() { const [forms, setForms] = React.useState([]); const [showForm, setShowForm] = React.useState(false); const fetchForms = async ()=>{ const response = await fetch('/api/db/schooliddb', { method: 'POST', body: JSON.stringify({ query: 'SELECT `id`, `form_name` FROM `students`' }) }); const result = await response.json(); setForms(result); }; React.useEffect(()=>{ fetchForms(); }, []); const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const data = { id_number: formData.get('id_number'), first_name: formData.get('first_name'), last_name: formData.get('last_name'), dob: formData.get('dob'), height: formData.get('height'), weight: formData.get('weight'), eye_color: formData.get('eye_color') }; await fetch('/api/db/schooliddb', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `students` (`id_number`, `first_name`, `last_name`, `dob`, `height`, `weight`, `eye_color`) VALUES (?, ?, ?, ?, ?, ?, ?)", values: [ data.id_number, data.first_name, data.last_name, data.dob, data.height, data.weight, data.eye_color ] }) }); event.target.reset(); fetchForms(); }; const handlePrint = ()=>{ window.print(); }; const handleNewForm = ()=>{ setShowForm(true); }; const handleBack = ()=>{ setShowForm(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-100 h-screen", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mt-10", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "HOME PAGE"), !showForm && /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleNewForm, className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "New Form"), /*#__PURE__*/ React.createElement("select", { className: "mt-4 block w-full px-3 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, forms.map((form, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: form.id, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, form.form_name)))), showForm && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "NEW ID FORM"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "id-number", className: "block text-md font-roboto mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "ID Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "id-number", name: "id_number", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "first-name", className: "block text-md font-roboto mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "First Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "first-name", name: "first_name", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "last-name", className: "block text-md font-roboto mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Last Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "last-name", name: "last_name", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dob", className: "block text-md font-roboto mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "DOB"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "dob", name: "dob", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block text-md font-roboto mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Height"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "height", name: "height", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "weight", className: "block text-md font-roboto mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Weight"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "weight", name: "weight", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eye-color", className: "block text-md font-roboto mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "Eye Color"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "eye-color", name: "eye_color", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-roboto py-2 rounded-lg", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Save"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handlePrint, className: "w-full bg-green-500 text-white font-roboto py-2 rounded-lg", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Print"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleBack, className: "w-full bg-yellow-500 text-white font-roboto py-2 rounded-lg", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Back"))))); }