function MainComponent() { const [error, setError] = useState(null); const [errorDetails, setErrorDetails] = useState(null); const [upload, { loading }] = useUpload(); const [pdfFile, setPdfFile] = useState(null); const [convertedData, setConvertedData] = useState(null); const [isDragging, setIsDragging] = useState(false); const [isConverting, setIsConverting] = useState(false); const [previewData, setPreviewData] = useState(null); const [showSuccess, setShowSuccess] = useState(false); const [uploadStatus, setUploadStatus] = useState(""); const [conversionProgress, setConversionProgress] = useState(0); const [retryCount, setRetryCount] = useState(0); const [timeoutId, setTimeoutId] = useState(null); const [errorType, setErrorType] = useState(null); const [lastAttemptTime, setLastAttemptTime] = useState(null); const MAX_RETRIES = 3; const TIMEOUT_DURATION = 30000; const RETRY_DELAY = 2000; const MIN_RETRY_INTERVAL = 5000; const validateFile = (file)=>{ if (!file) return { error: "No File Selected", details: "Please choose a PDF file to convert", type: "validation" }; if (!file.type || !file.type.includes("pdf")) return { error: "Invalid File Type", details: "Only PDF files can be processed. Please select a PDF file.", type: "validation" }; if (file.size === 0) return { error: "Empty File", details: "The selected file appears to be empty", type: "validation" }; if (file.size > 10 * 1024 * 1024) return { error: "File Too Large", details: `Your file is ${(file.size / (1024 * 1024)).toFixed(2)}MB. Maximum size allowed is 10MB.`, type: "validation" }; if (file.name.length > 255) return { error: "File Name Too Long", details: "Please use a shorter file name", type: "validation" }; return null; }; const handleFileUpload = async (file)=>{ try { setError(null); setErrorDetails(null); setErrorType(null); setUploadStatus(""); setConversionProgress(0); const validation = validateFile(file); if (validation) { setError(validation.error); setErrorDetails(validation.details); setErrorType(validation.type); setPdfFile(null); return; } const reader = new FileReader(); reader.onload = ()=>{ if (reader.result.slice(0, 4) !== "%PDF") { setError("Invalid PDF Format"); setErrorDetails("The file appears to be corrupted or not a valid PDF"); setErrorType("validation"); setPdfFile(null); return; } setPdfFile(file); setShowSuccess(false); setConvertedData(null); setPreviewData(null); }; reader.onerror = ()=>{ setError("File Read Error"); setErrorDetails("Failed to read the file. Please try again."); setErrorType("validation"); }; reader.readAsArrayBuffer(file.slice(0, 4)); } catch (err) { setError("Upload Error"); setErrorDetails("An unexpected error occurred while processing the file"); setErrorType("validation"); } }; const handleDrop = async (e)=>{ e.preventDefault(); setIsDragging(false); const file = e.dataTransfer.files[0]; await handleFileUpload(file); }; const handleConvert = async (isRetry = false)=>{ if (timeoutId) clearTimeout(timeoutId); if (isRetry) { const now = Date.now(); if (lastAttemptTime && now - lastAttemptTime < MIN_RETRY_INTERVAL) { setError("Too Many Attempts"); setErrorDetails("Please wait a moment before retrying"); setErrorType("validation"); return; } setLastAttemptTime(now); setRetryCount((prev)=>prev + 1); } else { setRetryCount(0); setLastAttemptTime(Date.now()); } try { setIsConverting(true); setError(null); setErrorDetails(null); setErrorType(null); setShowSuccess(false); setConversionProgress(10); setUploadStatus("Step 1/4: Initializing upload..."); const timeoutPromise = new Promise((_, reject)=>{ const id = setTimeout(()=>{ reject(new Error("Operation timed out")); }, TIMEOUT_DURATION); setTimeoutId(id); }); const { url, error: uploadError } = await Promise.race([ upload({ file: pdfFile }), timeoutPromise ]); if (uploadError) { throw new Error(`Upload failed: ${uploadError}`); } setConversionProgress(30); setUploadStatus("Step 2/4: Processing PDF file..."); const controller = new AbortController(); const response = await Promise.race([ fetch("/api/convert-pdf", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/octet-stream" }, body: JSON.stringify({ url }), signal: controller.signal }), timeoutPromise.catch((err)=>{ controller.abort(); throw err; }) ]); setConversionProgress(60); setUploadStatus("Step 3/4: Converting to Excel format..."); if (!response.ok) { const contentType = response.headers.get("content-type"); if (contentType?.includes("application/json")) { const errorData = await response.json(); throw new Error(errorData.message || "Server error during conversion"); } throw new Error(`Conversion failed (Status: ${response.status})`); } const blob = await response.blob(); if (!blob || blob.size === 0) { throw new Error("The converted file is empty. Please try again."); } const excelUrl = URL.createObjectURL(blob); setConversionProgress(80); setUploadStatus("Step 4/4: Generating preview..."); try { const previewResponse = await Promise.race([ fetch("/api/convert-pdf-to-excel", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }), signal: controller.signal }), timeoutPromise.catch((err)=>{ controller.abort(); throw err; }) ]); if (!previewResponse.ok) { throw new Error("Unable to generate preview. Download may still work."); } const previewData = await previewResponse.json(); if (!previewData?.data) { throw new Error("Preview data is invalid. Download may still work."); } setPreviewData(previewData.data); } catch (previewError) { setError("Preview Generation Issue"); setErrorDetails(previewError.message); setErrorType("preview"); } setConversionProgress(100); setConvertedData({ excelUrl }); setShowSuccess(true); setUploadStatus("Conversion completed successfully!"); } catch (err) { const isTimeout = err.message === "Operation timed out"; const isAborted = err.name === "AbortError"; let errorMessage, details, type; if (isTimeout || isAborted) { errorMessage = "Connection Timeout"; details = "The operation took too long. Please try again with a smaller file or check your connection."; type = "timeout"; } else if (err.message.includes("Upload failed")) { errorMessage = "Upload Error"; details = "Failed to upload your file. Please try again."; type = "upload"; } else if (err.message.includes("Server error")) { errorMessage = "Server Error"; details = "Our servers are having trouble. Please try again in a few minutes."; type = "server"; } else { errorMessage = "Conversion Error"; details = "Something went wrong during conversion. Please try again."; type = "conversion"; } setError(errorMessage); setErrorDetails(details); setErrorType(type); setUploadStatus(""); if (retryCount < MAX_RETRIES && !isTimeout && !isAborted) { setTimeout(()=>handleConvert(true), RETRY_DELAY); } } finally{ if (timeoutId) clearTimeout(timeoutId); if (retryCount >= MAX_RETRIES) { setIsConverting(false); } } }; const downloadFile = (url)=>{ try { if (!url) { setError("Download Error"); setErrorDetails("The file URL is invalid"); return; } const link = document.createElement("a"); link.href = url; link.download = `converted_${Date.now()}.xlsx`; link.type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; document.body.appendChild(link); link.click(); document.body.removeChild(link); setTimeout(()=>{ URL.revokeObjectURL(url); }, 100); } catch (err) { setError("Download Failed"); setErrorDetails("Please try again or check your browser settings"); setErrorType("download"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 308, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl w-full mx-auto space-y-8", __source: { fileName: "", lineNumber: 309, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 310, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-3xl font-bold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 311, columnNumber: 11 }, __self: this }, "Bank Statement PDF to Excel Converter"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-center text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, "Upload your bank statement PDF to convert it to Excel format")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-6", __source: { fileName: "", lineNumber: 319, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-lg ${isDragging ? "bg-blue-50" : "bg-white"}`, onDragOver: (e)=>{ e.preventDefault(); setIsDragging(true); }, onDragLeave: (e)=>{ e.preventDefault(); setIsDragging(false); }, onDrop: handleDrop, __source: { fileName: "", lineNumber: 320, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-8 border-2 border-dashed rounded-lg ${isDragging ? "border-blue-400" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4 text-center", __source: { fileName: "", lineNumber: 335, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-file-pdf text-5xl ${isDragging ? "text-blue-400" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 336, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "relative cursor-pointer rounded-md font-medium text-blue-600 hover:text-blue-500", __source: { fileName: "", lineNumber: 340, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 341, columnNumber: 21 }, __self: this }, "Upload PDF file"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".pdf", onChange: (e)=>handleFileUpload(e.target.files[0]), className: "sr-only", __source: { fileName: "", lineNumber: 342, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 349, columnNumber: 19 }, __self: this }, "or drag and drop"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 350, columnNumber: 19 }, __self: this }, "Maximum file size: 10MB"))))), error && /*#__PURE__*/ React.createElement("div", { className: `border-l-4 p-4 ${errorType === "validation" ? "bg-yellow-50 border-yellow-400" : errorType === "timeout" ? "bg-orange-50 border-orange-400" : errorType === "server" ? "bg-purple-50 border-purple-400" : errorType === "preview" ? "bg-blue-50 border-blue-400" : "bg-red-50 border-red-400"}`, __source: { fileName: "", lineNumber: 359, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${errorType === "validation" ? "fa-exclamation-triangle text-yellow-400" : errorType === "timeout" ? "fa-clock text-orange-400" : errorType === "server" ? "fa-server text-purple-400" : errorType === "preview" ? "fa-eye-slash text-blue-400" : "fa-exclamation-circle text-red-400"} mt-0.5`, __source: { fileName: "", lineNumber: 373, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 386, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-sm ${errorType === "validation" ? "text-yellow-700" : errorType === "timeout" ? "text-orange-700" : errorType === "server" ? "text-purple-700" : errorType === "preview" ? "text-blue-700" : "text-red-700"}`, __source: { fileName: "", lineNumber: 387, columnNumber: 19 }, __self: this }, error), errorDetails && /*#__PURE__*/ React.createElement("p", { className: `text-xs mt-1 ${errorType === "validation" ? "text-yellow-600" : errorType === "timeout" ? "text-orange-600" : errorType === "server" ? "text-purple-600" : errorType === "preview" ? "text-blue-600" : "text-red-600"}`, __source: { fileName: "", lineNumber: 403, columnNumber: 21 }, __self: this }, errorDetails), retryCount > 0 && errorType !== "preview" && /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-600 mt-1", __source: { fileName: "", lineNumber: 420, columnNumber: 21 }, __self: this }, "Retry attempt ", retryCount, "/", MAX_RETRIES), errorType === "server" && /*#__PURE__*/ React.createElement("p", { className: "text-xs text-purple-600 mt-1", __source: { fileName: "", lineNumber: 425, columnNumber: 21 }, __self: this }, "Error Code: ", Date.now().toString(36))))), pdfFile && !error && /*#__PURE__*/ React.createElement("div", { className: "bg-green-50 border-l-4 border-green-400 p-4", __source: { fileName: "", lineNumber: 435, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 436, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-400", __source: { fileName: "", lineNumber: 437, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "ml-3 text-sm text-green-700", __source: { fileName: "", lineNumber: 438, columnNumber: 17 }, __self: this }, pdfFile.name, " selected"))), /*#__PURE__*/ React.createElement("button", { onClick: handleConvert, disabled: !pdfFile || isConverting || loading, className: `w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white ${!pdfFile || isConverting || loading ? "bg-gray-400" : "bg-blue-600 hover:bg-blue-700"}`, __source: { fileName: "", lineNumber: 445, columnNumber: 11 }, __self: this }, isConverting || loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 453, columnNumber: 17 }, __self: this }), uploadStatus || "Processing...") : "Convert to Excel"), isConverting && /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 border-l-4 border-blue-400 p-4", __source: { fileName: "", lineNumber: 462, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 463, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt fa-spin text-blue-400 mr-2", __source: { fileName: "", lineNumber: 465, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 466, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-blue-700", __source: { fileName: "", lineNumber: 467, columnNumber: 21 }, __self: this }, uploadStatus || "Converting your PDF..."), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-blue-600", __source: { fileName: "", lineNumber: 470, columnNumber: 21 }, __self: this }, retryCount > 0 ? `Retry attempt ${retryCount}/${MAX_RETRIES}` : "This may take a few moments"))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-blue-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 477, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full transition-all duration-300", style: { width: `${conversionProgress}%` }, __source: { fileName: "", lineNumber: 478, columnNumber: 19 }, __self: this })))), previewData && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 488, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-4", __source: { fileName: "", lineNumber: 489, columnNumber: 15 }, __self: this }, "Preview"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 492, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 493, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 494, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 495, columnNumber: 21 }, __self: this }, Object.keys(previewData[0] || {}).map((header)=>/*#__PURE__*/ React.createElement("th", { key: header, className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 497, columnNumber: 25 }, __self: this }, header)))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 506, columnNumber: 19 }, __self: this }, previewData.slice(0, 5).map((row, i)=>/*#__PURE__*/ React.createElement("tr", { key: i, __source: { fileName: "", lineNumber: 508, columnNumber: 23 }, __self: this }, Object.values(row).map((cell, j)=>/*#__PURE__*/ React.createElement("td", { key: j, className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 510, columnNumber: 27 }, __self: this }, cell)))))))), convertedData && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-gray-50 p-8 rounded-lg text-center border-2 border-green-100", __source: { fileName: "", lineNumber: 526, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium text-gray-900 mb-4", __source: { fileName: "", lineNumber: 527, columnNumber: 15 }, __self: this }, "Your Excel file is ready!"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 530, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadFile(convertedData.excelUrl, "converted.xlsx"), className: "inline-flex items-center justify-center px-8 py-4 text-lg font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg shadow-lg transform transition hover:scale-105", __source: { fileName: "", lineNumber: 531, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-xl mr-3", __source: { fileName: "", lineNumber: 537, columnNumber: 19 }, __self: this }), "Download Excel File"), showSuccess && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-green-600", __source: { fileName: "", lineNumber: 541, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 542, columnNumber: 21 }, __self: this }), "Conversion completed successfully!"), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 546, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: convertedData.excelUrl, className: "underline hover:text-gray-700", __source: { fileName: "", lineNumber: 547, columnNumber: 19 }, __self: this }, "Direct download link"))))))); }