function MainComponent() { const [activeTab, setActiveTab] = useState("create"); const [invoiceNumber, setInvoiceNumber] = useState(""); const [jobName, setJobName] = useState(""); const [scanResult, setScanResult] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [createdProduct, setCreatedProduct] = useState(null); const [searchResults, setSearchResults] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [showScanner, setShowScanner] = useState(false); const [scanError, setScanError] = useState(null); const [qrInput, setQrInput] = useState(""); const [generatedQR, setGeneratedQR] = useState(null); const [totalItems, setTotalItems] = useState(0); const [showTotalItemsPrompt, setShowTotalItemsPrompt] = useState(false); const videoRef = React.useRef(null); const requestCameraPermission = async ()=>{ try { if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { throw new Error("Camera access is not supported in your browser"); } await navigator.mediaDevices.getUserMedia({ video: true }); setShowScanner(true); setScanError(null); } catch (err) { if (err.name === "NotAllowedError" || err.name === "PermissionDeniedError") { setScanError("Camera permission was denied. Please click the camera icon in your browser's address bar and allow access to continue."); } else if (err.name === "NotFoundError") { setScanError("No camera found. Please make sure your camera is connected."); } else { setScanError(err.message || "Could not access camera"); } } }; const createNewJob = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); try { const response = await fetch("/api/products/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ invoice_number: invoiceNumber, job_name: jobName }) }); if (!response.ok) { throw new Error(`Failed to create job: [${response.status}] ${response.statusText}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } // Redirect to job details using the generated QR code URL window.location.href = `/job-details?id=${data.product.id}`; setShowTotalItemsPrompt(true); // Show prompt for total items } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const createProduct = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); try { const response = await fetch("/api/products/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ invoice_number: invoiceNumber, job_name: jobName }) }); if (!response.ok) { throw new Error(`Failed to create product: [${response.status}] ${response.statusText}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setCreatedProduct(data.product); setInvoiceNumber(""); setJobName(""); const qrCodeUrl = `/job-details?id=${data.product.id}`; const qrResponse = await fetch("/api/products/qr-code", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: qrCodeUrl }) }); if (!qrResponse.ok) { throw new Error("Failed to generate QR code"); } const qrData = await qrResponse.json(); if (qrData.error) { throw new Error(qrData.error); } setGeneratedQR(qrData.qrCode); window.location.href = `/job-details?id=${data.product.id}`; } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const handleScan = async (qrCode)=>{ setLoading(true); setError(null); try { const response = await fetch("/api/products/get", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ qr_code: qrCode }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } window.location.href = `/job-details?id=${data.product.id}`; } catch (err) { setError(err.message); setLoading(false); } }; const handleSearch = async (e)=>{ e.preventDefault(); if (!searchTerm.trim()) return; setLoading(true); setError(null); try { const response = await fetch("/api/products/search", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ search: searchTerm }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } setSearchResults(data.products); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const handleQrCodeScanned = (result)=>{ try { const url = new URL(result); const jobId = url.searchParams.get("id"); if (!jobId) { throw new Error("Invalid QR code - no job ID found"); } window.location.href = `/job-details?id=${jobId}`; } catch (err) { setScanError("Invalid QR code format"); setTimeout(()=>setScanError(null), 3000); } }; const generateNewQRCode = async (e)=>{ e.preventDefault(); if (!qrInput.trim()) return; setLoading(true); setError(null); try { const qrCodeUrl = `/job-details?id=${qrInput}`; console.log("Generating QR code for URL:", qrCodeUrl); const response = await fetch("/api/products/qr-code", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: qrCodeUrl }) }); if (!response.ok) { throw new Error("Failed to generate QR code"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setGeneratedQR(data.qrCode); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const handleTotalItemsSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); try { const response = await fetch(`/api/products/update-total-items`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ product_id: createdProduct.id, total_items: totalItems }) }); if (!response.ok) { throw new Error(`Failed to update total items: [${response.status}] ${response.statusText}`); } setShowTotalItemsPrompt(false); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const handleItemCheck = (item)=>{ setJobDetails((prevDetails)=>{ if (!prevDetails || !prevDetails.stages) { return prevDetails; } const updatedStages = prevDetails.stages.map((s)=>s.stage_name === activeStage && s.item_number === item ? { ...s, completed: !s.completed } // Toggle completion status : s); const isStageComplete = updatedStages.filter((s)=>s.stage_name === activeStage).every((s)=>s.completed); const updatedStatus = isStageComplete ? "Complete" : "Pending"; return { ...prevDetails, stages: updatedStages, product: { ...prevDetails.product, status: updatedStatus, total_items: prevDetails.product.total_items } }; }); }; useEffect(()=>{ let stream = null; let setupAttempts = 0; let setupInterval = null; const setupCamera = async ()=>{ if (!showScanner) return; try { if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { throw new Error("Camera access is not supported in your browser"); } const videoElement = videoRef.current; if (!videoElement) { if (setupAttempts >= 5) { clearInterval(setupInterval); throw new Error("Could not find video element"); } setupAttempts++; return; } if (setupInterval) { clearInterval(setupInterval); } const devices = await navigator.mediaDevices.enumerateDevices(); const cameras = devices.filter((device)=>device.kind === "videoinput"); if (cameras.length === 0) { throw new Error("No cameras found on your device"); } const constraints = { video: { facingMode: { ideal: "environment" }, width: { ideal: 1280 }, height: { ideal: 720 } } }; try { stream = await navigator.mediaDevices.getUserMedia(constraints); } catch (err) { if (err.name === "NotAllowedError") { throw new Error("Camera permission was denied. Please allow camera access and try again."); } else if (err.name === "NotFoundError") { throw new Error("No camera found. Please make sure your camera is connected and not in use by another application."); } else if (err.name === "NotReadableError") { throw new Error("Camera is in use by another application. Please close other apps using the camera and try again."); } else { throw new Error(`Camera error: ${err.message}`); } } videoElement.srcObject = stream; await new Promise((resolve, reject)=>{ videoElement.onloadedmetadata = resolve; videoElement.onerror = ()=>reject(new Error("Failed to load video stream")); setTimeout(()=>reject(new Error("Video stream timed out")), 10000); }); await videoElement.play().catch((err)=>{ throw new Error(`Failed to play video: ${err.message}`); }); const scanQRCode = async ()=>{ if (!videoElement || !videoElement.videoWidth) return; const canvas = document.createElement("canvas"); canvas.width = videoElement.videoWidth; canvas.height = videoElement.videoHeight; const context = canvas.getContext("2d"); if (!context) { throw new Error("Could not initialize canvas context"); } const scanFrame = ()=>{ if (!videoElement || !showScanner) return; try { context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); if (typeof jsQR !== "function") { throw new Error("QR scanner library not loaded"); } const code = jsQR(imageData.data, imageData.width, imageData.height); if (code) { handleQrCodeScanned(code.data); return; } } catch (err) { console.error("Scanning error:", err); setScanError(`Scanning error: ${err.message}`); } requestAnimationFrame(scanFrame); }; scanFrame(); }; videoElement.onloadedmetadata = ()=>{ setTimeout(scanQRCode, 1000); }; } catch (err) { console.error("Camera setup error:", err); setScanError(err.message || "Could not access camera"); if (stream) { stream.getTracks().forEach((track)=>track.stop()); } } }; if (showScanner) { const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"; script.onerror = ()=>{ setScanError("Failed to load QR scanner library"); }; script.onload = ()=>{ setupInterval = setInterval(setupCamera, 100); }; document.body.appendChild(script); return ()=>{ if (setupInterval) { clearInterval(setupInterval); } if (stream) { stream.getTracks().forEach((track)=>track.stop()); } if (videoRef.current) { videoRef.current.srcObject = null; } document.body.removeChild(script); }; } }, [ showScanner ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 444, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 445, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 446, columnNumber: 9 }, __self: this }, "Glass Manufacturing Tracker"), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 451, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 456, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-6", __source: { fileName: "", lineNumber: 457, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 px-4 text-center ${activeTab === "scan" ? "bg-blue-500 text-white" : "bg-gray-200"}`, onClick: ()=>{ setActiveTab("scan"); setCreatedProduct(null); }, __source: { fileName: "", lineNumber: 458, columnNumber: 13 }, __self: this }, "Scan QR Code"), /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 px-4 text-center ${activeTab === "search" ? "bg-blue-500 text-white" : "bg-gray-200"}`, onClick: ()=>{ setActiveTab("search"); setCreatedProduct(null); }, __source: { fileName: "", lineNumber: 469, columnNumber: 13 }, __self: this }, "Search Jobs"), /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 px-4 text-center ${activeTab === "create" ? "bg-blue-500 text-white" : "bg-gray-200"}`, onClick: ()=>{ setActiveTab("create"); setCreatedProduct(null); }, __source: { fileName: "", lineNumber: 482, columnNumber: 13 }, __self: this }, "Create New Job")), activeTab === "create" && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 498, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: createNewJob, className: "max-w-sm mx-auto", __source: { fileName: "", lineNumber: 499, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 500, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 501, columnNumber: 19 }, __self: this }, "Invoice Number"), /*#__PURE__*/ React.createElement("input", { type: "text", value: invoiceNumber, onChange: (e)=>setInvoiceNumber(e.target.value), className: "w-full p-2 border rounded", placeholder: "Enter invoice number", __source: { fileName: "", lineNumber: 504, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 512, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 513, columnNumber: 19 }, __self: this }, "Job Name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: jobName, onChange: (e)=>setJobName(e.target.value), className: "w-full p-2 border rounded", placeholder: "Enter job name", __source: { fileName: "", lineNumber: 514, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 522, columnNumber: 17 }, __self: this }, loading ? "Creating..." : "Create Job"))), showTotalItemsPrompt && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 534, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleTotalItemsSubmit, className: "max-w-sm mx-auto", __source: { fileName: "", lineNumber: 535, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 539, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 540, columnNumber: 19 }, __self: this }, "Total Items"), /*#__PURE__*/ React.createElement("input", { type: "number", value: totalItems, onChange: (e)=>setTotalItems(Number(e.target.value)), className: "w-full p-2 border rounded", placeholder: "Enter total items", __source: { fileName: "", lineNumber: 543, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 551, columnNumber: 17 }, __self: this }, loading ? "Updating..." : "Update Total Items"))), activeTab === "scan" ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 563, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 564, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: requestCameraPermission, className: "px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2 mx-auto", __source: { fileName: "", lineNumber: 565, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera", __source: { fileName: "", lineNumber: 569, columnNumber: 19 }, __self: this }), "Scan QR Code"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-sm text-gray-600", __source: { fileName: "", lineNumber: 572, columnNumber: 17 }, __self: this }, "Click the button above to enable your camera and scan a QR code")), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-8", __source: { fileName: "", lineNumber: 578, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 579, columnNumber: 17 }, __self: this }, "Generate New QR Code"), /*#__PURE__*/ React.createElement("form", { onSubmit: generateNewQRCode, className: "max-w-sm mx-auto", __source: { fileName: "", lineNumber: 582, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 583, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: qrInput, onChange: (e)=>setQrInput(e.target.value), placeholder: "Enter Job ID", className: "flex-1 p-2 border rounded", __source: { fileName: "", lineNumber: 584, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !qrInput.trim(), className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 591, columnNumber: 21 }, __self: this }, "Generate"))), generatedQR && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 602, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${generatedQR}`, alt: "Generated QR Code", className: "mx-auto", style: { maxWidth: "200px" }, __source: { fileName: "", lineNumber: 603, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const link = document.createElement("a"); link.download = `qr-code-${qrInput}.png`; link.href = `data:image/png;base64,${generatedQR}`; link.click(); }, className: "mt-4 text-blue-500 hover:text-blue-700", __source: { fileName: "", lineNumber: 609, columnNumber: 21 }, __self: this }, "Download QR Code"))), scanError && !showScanner && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-100 text-red-700 rounded-lg max-w-md mx-auto", __source: { fileName: "", lineNumber: 625, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 626, columnNumber: 19 }, __self: this }, scanError), /*#__PURE__*/ React.createElement("button", { onClick: requestCameraPermission, className: "mt-2 text-blue-500 hover:text-blue-700", __source: { fileName: "", lineNumber: 627, columnNumber: 19 }, __self: this }, "Try Again"))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 637, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mb-6", __source: { fileName: "", lineNumber: 638, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 639, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 640, columnNumber: 19 }, __self: this }, "Search by Invoice Number or Job Name"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 643, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "flex-1 p-2 border rounded", placeholder: "Enter invoice number or job name", __source: { fileName: "", lineNumber: 644, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-blue-500 text-white py-2 px-6 rounded hover:bg-blue-600 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 651, columnNumber: 21 }, __self: this }, loading ? "Searching..." : "Search")))), searchResults.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 663, columnNumber: 17 }, __self: this }, searchResults.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "border rounded-lg p-4 hover:border-blue-500 cursor-pointer", onClick: ()=>window.location.href = `/job-details?id=${product.id}`, __source: { fileName: "", lineNumber: 665, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start", __source: { fileName: "", lineNumber: 672, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 673, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 674, columnNumber: 27 }, __self: this }, "Invoice: ", product.invoice_number), product.job_name && /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 678, columnNumber: 29 }, __self: this }, "Job Name: ", product.job_name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 682, columnNumber: 27 }, __self: this }, "Created:", " ", new Date(product.created_at).toLocaleDateString())), /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${product.status === "completed" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800"}`, __source: { fileName: "", lineNumber: 687, columnNumber: 25 }, __self: this }, product.status))))) : searchTerm && !loading ? /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-500", __source: { fileName: "", lineNumber: 701, columnNumber: 17 }, __self: this }, "No jobs found") : null)))); }