function MainComponent() { const [formData, setFormData] = React.useState({ dataStructure: '', volume: '', dataTypes: [], customPatterns: '', outputFormat: '' }); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; if (type === 'checkbox') { setFormData((prevState)=>({ ...prevState, dataTypes: checked ? [ ...prevState.dataTypes, value ] : prevState.dataTypes.filter((type)=>type !== value) })); } else { setFormData((prevState)=>({ ...prevState, [name]: value })); } }; const handleSubmit = async (e)=>{ e.preventDefault(); const responseArea = document.getElementById("responseArea"); responseArea.value = "Processing..."; try { const response = await fetch('/generate-script', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); const data = await response.json(); responseArea.value = data.script; } catch (error) { responseArea.value = "Failed to generate script."; console.error("Failed to submit form: ", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-2xl text-center my-8", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Dynamic Data Generation Platform (DDGP)"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dataStructure", className: "block mb-2 text-sm font-medium", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Data Structure"), /*#__PURE__*/ React.createElement("select", { id: "dataStructure", name: "dataStructure", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", onChange: handleChange, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Select a structure"), /*#__PURE__*/ React.createElement("option", { value: "relational", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Relational"), /*#__PURE__*/ React.createElement("option", { value: "hierarchical", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Hierarchical"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "volume", className: "block mb-2 text-sm font-medium", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Volume of Records"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "volume", name: "volume", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "1000", onChange: handleChange, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block mb-2 text-sm font-medium", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Data Types"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "date", type: "checkbox", name: "dataTypes", value: "Date", className: "w-4 h-4", onChange: handleChange, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: "ml-2 text-sm font-medium", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Date")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "integer", type: "checkbox", name: "dataTypes", value: "Integer", className: "w-4 h-4", onChange: handleChange, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "integer", className: "ml-2 text-sm font-medium", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Integer")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "string", type: "checkbox", name: "dataTypes", value: "String", className: "w-4 h-4", onChange: handleChange, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "string", className: "ml-2 text-sm font-medium", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "String"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "customPatterns", className: "block mb-2 text-sm font-medium", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Custom Patterns (optional)"), /*#__PURE__*/ React.createElement("textarea", { id: "customPatterns", name: "customPatterns", rows: "4", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "Define custom patterns for each selected data type...", onChange: handleChange, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "outputFormat", className: "block mb-2 text-sm font-medium", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Output Format"), /*#__PURE__*/ React.createElement("select", { id: "outputFormat", name: "outputFormat", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", onChange: handleChange, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Select format"), /*#__PURE__*/ React.createElement("option", { value: "json", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "JSON"), /*#__PURE__*/ React.createElement("option", { value: "csv", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "CSV"), /*#__PURE__*/ React.createElement("option", { value: "xml", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "XML"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full text-white bg-blue-500 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Generate Data Script")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "responseArea", className: "block mb-2 text-sm font-medium", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Generated Script"), /*#__PURE__*/ React.createElement("textarea", { id: "responseArea", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 h-48", readOnly: true, __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }))); }