function DataCollectionAndProcessingTool({ onExportClick, onFileChange, dataPreview, userSettings }) { const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); onFileChange(formData.get('dataInput')); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col items-center justify-center min-h-screen bg-[#F7F7F7] font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full max-w-[500px] bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Data Collection Portal")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "dataInput", className: "mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mb-4 w-full py-2 px-4 bg-blue-600 text-white rounded", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Upload Data")), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Data Preview"), /*#__PURE__*/ React.createElement("textarea", { readOnly: true, value: dataPreview, className: "w-full p-4 border border-gray-300 rounded h-[200px]", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, userSettings)), /*#__PURE__*/ React.createElement("button", { onClick: onExportClick, type: "button", className: "w-full py-2 px-4 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Export as CSV"))); } function DataCollectionAndProcessingToolStory() { const handleExportClickMock = ()=>console.log('Export to CSV'); const handleFileChangeMock = (file)=>console.log('File uploaded:', file); const dataPreviewMock = "Sample data content preview..."; const userSettingsMock = /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 40, columnNumber: 28 }, __self: this }, "User-specific settings displayed here."); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DataCollectionAndProcessingTool, { onExportClick: handleExportClickMock, onFileChange: handleFileChangeMock, dataPreview: dataPreviewMock, userSettings: userSettingsMock, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this })); } function MainComponent() { const [dataPreview, setDataPreview] = React.useState(''); const [userSettings, setUserSettings] = React.useState(''); const handleExportClick = ()=>{ // Logic to format the cleaned data as CSV and trigger download }; const handleFileChange = (fileInputName, file)=>{ // Logic to handle file input change and update dataPreview }; const handleSubmit = (e)=>{ e.preventDefault(); // Logic to handle form submission for manual data and file uploads }; const settingsContent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Scrape URL"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "scrapeUrl", placeholder: "Enter URL to scrape data", className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "API Key"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "apiKey", placeholder: "Enter API Key for external data push", className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-6 min-h-screen bg-[#F0F0F0] font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-center font-semibold mb-8 text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Android Data Management Tool"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-4xl m-auto", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "manualDataInput", className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Manual Data Entry"), /*#__PURE__*/ React.createElement("textarea", { id: "manualDataInput", name: "manualDataInput", rows: 3, className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm", placeholder: "Type or paste data here", onChange: (e)=>setDataPreview(e.target.value), value: dataPreview, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex flex-col space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "pdfInput", className: "file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700", onChange: (e)=>handleFileChange('pdfInput', e.target.files[0]), __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "docInput", className: "file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700", onChange: (e)=>handleFileChange('docInput', e.target.files[0]), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "videoInput", className: "file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700", onChange: (e)=>handleFileChange('videoInput', e.target.files[0]), __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "audioInput", className: "file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700", onChange: (e)=>handleFileChange('audioInput', e.target.files[0]), __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "imageInput", className: "file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700", onChange: (e)=>handleFileChange('imageInput', e.target.files[0]), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full mb-6 bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Upload & Clean")), /*#__PURE__*/ React.createElement(DataCollectionAndProcessingTool, { onExportClick: handleExportClick, onFileChange: (file)=>handleFileChange('dataInput', file), dataPreview: dataPreview, userSettings: settingsContent, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this })); }