function InvoiceUploadTool({ name, className, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*,application/pdf", name: name, className: `${className} mt-2 p-2 border border-gray-300 rounded-md w-full`, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function InvoiceUploadToolStory() { const handleFileChange = (event)=>{ const file = event.target.files[0]; // Add file processing logic here }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InvoiceUploadTool, { name: "invoice-image", className: "", onChange: handleFileChange, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleFileChange = async (event)=>{ const file = event.target.files[0]; if (file) { const extractedData = await extractData(file); await uploadToGoogleSheets(extractedData); } }; const extractData = async (file)=>{ return { vendor: "Vendor Name", date: "2023-10-10", amount: "1000" }; }; const uploadToGoogleSheets = async (data)=>{ console.log('Data uploaded to Google Sheets', data); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Invoice Data Extractor"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "invoice-image", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Upload Invoice Image/PDF"), /*#__PURE__*/ React.createElement(InvoiceUploadTool, { name: "invoice-image", className: "", onChange: handleFileChange, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "vendor", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Vendor"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "vendor", className: "mt-2 p-2 border border-gray-300 rounded-md w-full", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "invoice-date", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Date of Invoice"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "invoice-date", className: "mt-2 p-2 border border-gray-300 rounded-md w-full", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-roboto", htmlFor: "invoice-amount", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Amount of Invoice"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "invoice-amount", className: "mt-2 p-2 border border-gray-300 rounded-md w-full", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleFileChange, className: "mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Upload to Google Sheet")); }