${includeMeta ? `

${code}

${notes ? `

${notes}

` : ""} ${expiryDate ? `

L\xE4uft ab am: ${new Date( expiryDate ).toLocaleDateString("de-DE")}

` : ""}

`; iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); }; const [duplicateDialog, setDuplicateDialog] = useState(null); const videoRef = useRef(null); const [isScanning, setIsScanning] = useState(false); const [error, setError] = useState(null); const [stream, setStream] = useState(null); const [scannedCode, setScannedCode] = useState(null); const [duplicateCodeData, setDuplicateCodeData] = useState(null); const [barcodeType, setBarcodeType] = useState(""); const [lastScannedCode, setLastScannedCode] = useState(null); const [scannedCodes, setScannedCodes] = useState([]); const [zxingReader, setZxingReader] = useState(null); const [deleteConfirmId, setDeleteConfirmId] = useState(null); const [searchQuery, setSearchQuery] = useState(""); const [expiryDays, setExpiryDays] = useState(""); const [isSaving, setIsSaving] = useState(false); const [sortConfig, setSortConfig] = useState({ key: "expires_at", direction: "asc" }); const [selectedCodes, setSelectedCodes] = useState(/* @__PURE__ */ new Set()); const [isDeleting, setIsDeleting] = useState(false); const [isChecking, setIsChecking] = useState(false); const [showEmailInput, setShowEmailInput] = useState(false); const [notificationEmail, setNotificationEmail] = useState(""); const [isSavingEmail, setIsSavingEmail] = useState(false); const [saveError, setSaveError] = useState(null); const [isLoading, setIsLoading] = useState(true); const [justSavedId, setJustSavedId] = useState(null); const [typeFilter, setTypeFilter] = useState("all"); const [expiryFilter, setExpiryFilter] = useState("all"); const [editingNote, setEditingNote] = useState(null); const [initialNote, setInitialNote] = useState(""); const [itemsPerPage, setItemsPerPage] = useState(10); const [currentPage, setCurrentPage] = useState(1); const [isExporting, setIsExporting] = useState(false); const [showQRDialog, setShowQRDialog] = useState(false); const [qrText, setQrText] = useState(""); const [showQRInput, setShowQRInput] = useState(false); const [printWithName, setPrintWithName] = useState(false); const [showPrintDialog, setShowPrintDialog] = useState(false); const [qrCodeData, setQrCodeData] = useState(""); const [qrValue, setQrValue] = useState(""); const handlePrint = () => { const printContent = document.getElementById("qrPreview"); const originalContents = document.body.innerHTML; document.body.innerHTML = `

${printContent.innerHTML}

`; window.print(); document.body.innerHTML = originalContents; window.location.reload(); }; const [expiryDaysTouched, setExpiryDaysTouched] = useState(false); const [attemptedSave, setAttemptedSave] = useState(false); const showExpiryError = (expiryDays === "" || Number(expiryDays) <= 0) && (expiryDaysTouched || attemptedSave); useEffect(() => { const loadInitialData = async () => { try { setIsLoading(true); const emailResponse = await fetch("/api/settings/get", { method: "POST" }); const emailData = await emailResponse.json(); if (emailData.settings?.notification_email) { setNotificationEmail(emailData.settings.notification_email); } const codesResponse = await fetch("/api/codes/list", { method: "POST" }); const codesData = await codesResponse.json(); setScannedCodes(codesData.codes || []); } catch (err) { console.error("Fehler beim Laden der Daten:", err); } finally { setIsLoading(false); } }; loadInitialData(); }, []); useEffect(() => { console.log("Current scannedCodes:", scannedCodes); }, [scannedCodes]); const loadEmail = async () => { try { const response = await fetch("/api/settings/get", { method: "POST" }); const data = await response.json(); console.log("Geladene Einstellungen:", data); if (data.settings?.notification_email) { setNotificationEmail(data.settings.notification_email); } } catch (err) { console.error("Fehler beim Laden der E-Mail:", err); } }; const saveEmail = async (e) => { e.preventDefault(); setSaveError(null); console.log("Trying to save email value:", notificationEmail); const cleanEmail = notificationEmail.replace(/[\[\]]/g, ""); console.log("Cleaned email to save:", cleanEmail); try { const response = await fetch("/api/settings/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ notification_email: cleanEmail }) }); const data = await response.json(); console.log("Save response:", data); if (data.success) { alert("E-Mail erfolgreich gespeichert!"); setShowEmailInput(false); const getResponse = await fetch("/api/settings/get", { method: "POST" }); const getResult = await getResponse.json(); console.log("Reloaded settings:", getResult); if (getResult.settings?.notification_email) { setNotificationEmail(getResult.settings.notification_email); } } else { setSaveError(data.message); } } catch (err) { console.error("Save error:", err); setSaveError("Fehler beim Speichern"); } }; const SortIcon = ({ columnKey }) => { if (sortConfig.key !== columnKey) { return /* @__PURE__ */ React.createElement("span", { className: "text-gray-400" }, "\u2195"); } return /* @__PURE__ */ React.createElement("span", { className: "text-gray-700 dark:text-gray-300" }, sortConfig.direction === "asc" ? "\u2191" : "\u2193"); }; const requestSort = (key) => { setSortConfig((current) => ({ key, direction: current.key === key && current.direction === "asc" ? "desc" : "asc" })); }; const getDaysRemaining = (expiryDate) => { if (!expiryDate) return null; const today = /* @__PURE__ */ new Date(); today.setHours(0, 0, 0, 0); const expiry = new Date(expiryDate); expiry.setHours(0, 0, 0, 0); const diffTime = expiry - today; const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24)); return diffDays; }; const deleteSelectedCodes = async () => { try { setIsDeleting(true); for (const id of selectedCodes) { await fetch("/api/codes/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id, action: "delete" }) }); } await loadScannedCodes(); setSelectedCodes(/* @__PURE__ */ new Set()); setDeleteConfirmId(null); } catch (err) { console.error("Fehler beim L\xF6schen:", err); alert("Fehler beim L\xF6schen der ausgew\xE4hlten Codes"); } finally { setIsDeleting(false); } }; const toggleCodeSelection = (id) => { const newSelected = new Set(selectedCodes); if (newSelected.has(id)) { newSelected.delete(id); } else { newSelected.add(id); } setSelectedCodes(newSelected); }; const toggleAllCodes = () => { if (selectedCodes.size === sortedCodes.length) { setSelectedCodes(/* @__PURE__ */ new Set()); } else { setSelectedCodes(new Set(sortedCodes.map((code) => code.id))); } }; const sortedCodes = React.useMemo(() => { let filteredCodes = [...scannedCodes]; if (searchQuery.trim() !== "") { filteredCodes = filteredCodes.filter( (code) => code.code.toLowerCase().includes(searchQuery.toLowerCase()) ); } if (typeFilter !== "all") { filteredCodes = filteredCodes.filter( (code) => code.code_type === typeFilter ); } if (expiryFilter !== "all") { const today = /* @__PURE__ */ new Date(); today.setHours(0, 0, 0, 0); const nextWeek = new Date(today); nextWeek.setDate(nextWeek.getDate() + 7); filteredCodes = filteredCodes.filter((code) => { if (!code.expires_at) return false; const expiryDate = new Date(code.expires_at); expiryDate.setHours(0, 0, 0, 0); switch (expiryFilter) { case "expired": return expiryDate < today; case "today": return expiryDate.getTime() === today.getTime(); case "soon": return expiryDate > today && expiryDate <= nextWeek; default: return true; } }); } filteredCodes.sort((a, b) => { if (sortConfig.key === "expires_at") { if (!a.expires_at) return 1; if (!b.expires_at) return -1; return sortConfig.direction === "asc" ? new Date(a.expires_at) - new Date(b.expires_at) : new Date(b.expires_at) - new Date(a.expires_at); } if (sortConfig.key === "scanned_at") { return sortConfig.direction === "asc" ? new Date(a.scanned_at) - new Date(b.scanned_at) : new Date(b.scanned_at) - new Date(a.scanned_at); } if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === "asc" ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === "asc" ? 1 : -1; } return 0; }); return filteredCodes; }, [scannedCodes, sortConfig, searchQuery, typeFilter, expiryFilter]); const availableTypes = React.useMemo(() => { const types = new Set(scannedCodes.map((code) => code.code_type)); return Array.from(types).sort(); }, [scannedCodes]); const paginatedCodes = React.useMemo(() => { const startIndex = (currentPage - 1) * itemsPerPage; return sortedCodes.slice(startIndex, startIndex + itemsPerPage); }, [sortedCodes, currentPage, itemsPerPage]); const checkExpiringCodes = async () => { try { setIsChecking(true); const response = await fetch("/api/codes/check-expiring", { method: "POST" }); const data = await response.json(); alert(data.message); } catch (err) { alert("Fehler beim Pr\xFCfen der ablaufenden Codes: " + err.message); } finally { setIsChecking(false); } }; const loadScannedCodes = async () => { try { setIsLoading(true); const response = await fetch("/api/codes/list", { method: "POST" }); const data = await response.json(); console.log("Fetched codes:", data.codes); setScannedCodes(data.codes || []); } catch (err) { console.error("Fehler beim Laden der Codes:", err); } finally { setIsLoading(false); } }; useEffect(() => { const script = document.createElement("script"); script.src = "https://unpkg.com/@zxing/library@latest/umd/index.min.js"; script.async = true; script.onload = () => { if (window.ZXing) { const hints = /* @__PURE__ */ new Map(); const formats = [ window.ZXing.BarcodeFormat.EAN_13, window.ZXing.BarcodeFormat.EAN_8, window.ZXing.BarcodeFormat.QR_CODE, window.ZXing.BarcodeFormat.CODE_128, window.ZXing.BarcodeFormat.CODE_39 ]; const reader = new window.ZXing.BrowserMultiFormatReader(); setZxingReader(reader); } }; document.body.appendChild(script); return () => { if (zxingReader) { zxingReader.reset(); } }; }, []); const getCodeTypeName = (format) => { const types = { 1: "QR-Code", 2: "CODE-128", 4: "CODE-39", 7: "EAN-13", 8: "EAN-8", 9: "UPC-A", 10: "UPC-E" }; return types[format] || `Barcode (${format})`; }; const scanBarcode = async () => { if (!videoRef.current || !isScanning || !zxingReader) return; try { const result = await zxingReader.decode(videoRef.current); if (result && result.text && result.text !== lastScannedCode) { const checkResponse = await fetch("/api/codes/check", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: result.text }) }); const checkResult = await checkResponse.json(); if (checkResult.isDuplicate) { setDuplicateCodeData(result.text); setBarcodeType(getCodeTypeName(result.format)); setDuplicateDialog(true); setIsScanning(false); return; } const codeType = getCodeTypeName(result.format); setScannedCode(result.text); setBarcodeType(codeType); setLastScannedCode(result.text); setIsScanning(false); } } catch (err) { if (!err.message?.includes("not found") && !err.message?.includes("No MultiFormat Readers")) { console.error("Scan-Fehler:", err); } } }; useEffect(() => { let scanInterval; if (isScanning && videoRef.current) { let count = 0; const fast = setInterval(() => { if (count < 10) { scanBarcode(); count++; } else { clearInterval(fast); scanInterval = setInterval(scanBarcode, 200); } }, 100); scanInterval = setInterval(scanBarcode, 150); } return () => { if (scanInterval) { clearInterval(scanInterval); } }; }, [isScanning]); const startCamera = async () => { try { const constraints = { video: { facingMode: "environment", width: { ideal: 1280 }, height: { ideal: 720 } } }; const mediaStream = await navigator.mediaDevices.getUserMedia(constraints); videoRef.current.srcObject = mediaStream; setStream(mediaStream); await videoRef.current.play(); setIsScanning(true); setError(null); setLastScannedCode(null); } catch (err) { console.error("Kamera-Fehler:", err); setError("Kamera-Fehler: " + err.message); } }; const stopCamera = () => { if (stream) { stream.getTracks().forEach((track) => track.stop()); setStream(null); } if (videoRef.current) { videoRef.current.srcObject = null; } setIsScanning(false); setLastScannedCode(null); }; const saveScannedCode = async (barcodeData) => { if (isSaving) return; try { setIsSaving(true); console.log("Speichere Code:", barcodeData); const response = await fetch("/api/codes/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(barcodeData) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("Serverantwort:", data); if (!data.success) { if (data.isDuplicate) { setDuplicateDialog(true); setIsScanning(false); } else { alert(data.message || "Fehler beim Speichern"); } return; } if (barcodeData.id) { await loadScannedCodes(); setEditingNote(null); } else { await loadScannedCodes(); setScannedCode(null); setExpiryDays(""); setInitialNote(""); stopCamera(); setJustSavedId(data.code.id); setTimeout(() => { setJustSavedId(null); }, 2e3); } } catch (err) { console.error("Save error:", err); alert("Fehler beim Speichern: " + err.message); } finally { setIsSaving(false); } }; return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", { jsx: true, global: true }, ` body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; background-color: #111827; } :root { background-color: #111827; } `), !isAuthenticated ? /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("div", { className: "bg-gray-800 rounded-lg p-6 max-w-sm w-full" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-bold text-white mb-4" }, "Zugriff gesch\xFCtzt"), /* @__PURE__ */ React.createElement("form", { onSubmit: handlePasswordSubmit }, /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement( "input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), className: "w-full px-3 py-2 bg-gray-700 text-white rounded border border-gray-600 focus:border-[#44C7F4] focus:ring-1 focus:ring-[#44C7F4]", placeholder: "Passwort eingeben" } ), authError && /* @__PURE__ */ React.createElement("p", { className: "text-[#f079b6] text-sm mt-2" }, authError)), /* @__PURE__ */ React.createElement( "button", { type: "submit", className: "w-full px-4 py-2 bg-[#44C7F4] text-gray-900 rounded-lg hover:bg-[#3BB8E5]" }, "Best\xE4tigen" )))) : /* @__PURE__ */ React.createElement("div", { style: { backgroundColor: "#111827" } }, /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-gray-900" }, /* @__PURE__ */ React.createElement("div", { className: "dark:bg-gray-900 pt-10 p-4" }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement( "link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/650d110d-606a-416f-9a56-e12028d224ec/-/format/auto/" } ), /* @__PURE__ */ React.createElement("meta", { name: "apple-mobile-web-app-capable", content: "yes" }), /* @__PURE__ */ React.createElement("meta", { name: "mobile-web-app-capable", content: "yes" }), /* @__PURE__ */ React.createElement( "meta", { name: "apple-mobile-web-app-status-bar-style", content: "black-translucent" } ), /* @__PURE__ */ React.createElement("meta", { name: "apple-mobile-web-app-title", content: "QR Scanner" }), /* @__PURE__ */ React.createElement( "meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" } ), /* @__PURE__ */ React.createElement( "link", { rel: "apple-touch-icon", href: "https://ucarecdn.com/650d110d-606a-416f-9a56-e12028d224ec/-/format/auto/" } ), /* @__PURE__ */ React.createElement("title", null, "Expired QR-Code Reminder")), /* @__PURE__ */ React.createElement("div", { className: "max-w-[860px] mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement( "img", { src: "https://ucarecdn.com/b973e3e0-b1d9-4e4c-bb8b-be1b39e02b20/-/format/auto/", alt: "QM Spot Logo", className: "h-20 w-20 object-contain" } ), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white" }, "Expired QR-Code", /* @__PURE__ */ React.createElement("br", null), "Reminder")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2" }, typeof window !== "undefined" && window.navigator.standalone && /* @__PURE__ */ React.createElement( "button", { onClick: () => window.location.reload(), className: "p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", title: "Aktualisieren" }, /* @__PURE__ */ React.createElement( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" } ) ) ), showEmailInput ? /* @__PURE__ */ React.createElement( "form", { onSubmit: saveEmail, className: "flex items-center space-x-2" }, /* @__PURE__ */ React.createElement( "input", { type: "email", value: notificationEmail, onChange: (e) => { setNotificationEmail(e.target.value); }, className: "px-2 py-1 border rounded dark:bg-gray-700 dark:text-white", placeholder: "ihre@email.de" } ), /* @__PURE__ */ React.createElement("button", { type: "submit", className: "text-green-500" }, "\u2713"), /* @__PURE__ */ React.createElement( "button", { type: "button", onClick: () => { setShowEmailInput(false); setSaveError(null); }, className: "text-red-500" }, "\u2715" ) ) : /* @__PURE__ */ React.createElement( "button", { onClick: () => setShowEmailInput(true), className: "p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", title: notificationEmail ? `Aktuelle E-Mail: ${notificationEmail}` : "E-Mail Einstellungen" }, /* @__PURE__ */ React.createElement( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281Z" } ), /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" } ) ) ), saveError && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 text-sm" }, saveError), /* @__PURE__ */ React.createElement( "button", { onClick: checkExpiringCodes, disabled: isChecking, className: "px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg flex items-center space-x-2 text-gray-700 dark:text-gray-200" }, isChecking ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-gray-700 dark:border-gray-200" })) : /* @__PURE__ */ React.createElement( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" } ) ) ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { try { setIsExporting(true); const response = await fetch( "/api/codes/export-filtered", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ codeIds: Array.from(selectedCodes), searchQuery, typeFilter, expiryFilter }) } ); const data = await response.json(); if (data.success) { const blob = new Blob([data.data], { type: "text/csv;charset=utf-8;" }); const link = document.createElement("a"); if (link.download !== void 0) { const url = URL.createObjectURL(blob); link.setAttribute("href", url); link.setAttribute("download", data.filename); link.style.visibility = "hidden"; document.body.appendChild(link); link.click(); window.URL.revokeObjectURL(url); document.body.removeChild(link); } } } catch (err) { console.error("Export error:", err); alert("Fehler beim Export der Daten"); } finally { setIsExporting(false); } }, disabled: isExporting, className: "px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg flex items-center space-x-2 text-gray-700 dark:text-gray-200" }, isExporting ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-gray-700 dark:border-gray-200" }), /* @__PURE__ */ React.createElement("span", null, "Exportiere...")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" } ) ), /* @__PURE__ */ React.createElement("span", null, selectedCodes.size > 0 ? `Auswahl (${selectedCodes.size})` : `Export (${sortedCodes.length})`)) ))), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement( "div", { className: `relative bg-black rounded-lg overflow-hidden transition-all duration-300 ${isScanning ? "h-[300px] opacity-100" : "h-[1px] opacity-0"}` }, /* @__PURE__ */ React.createElement( "video", { ref: videoRef, style: { width: "100%", height: "100%", objectFit: "cover" }, playsInline: true, muted: true } ), /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React.createElement( "div", { className: `w-64 h-64 border-2 border-white/50 transition-opacity ${isScanning ? "opacity-100" : "opacity-0"}` } )) ), error && /* @__PURE__ */ React.createElement("div", { className: "text-[#f079b6] text-sm" }, error), showQRInput && /* @__PURE__ */ React.createElement("div", { className: "mt-4 bg-gray-800 rounded-lg p-4 animate-fade-in" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold mb-4 text-white" }, "QR-Code erstellen"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: qrText, onChange: (e) => setQrText(e.target.value), className: "flex-1 px-3 py-2 border border-gray-600 rounded-md bg-gray-700 text-white", placeholder: "Text oder URL f\xFCr QR-Code eingeben..." } ), /* @__PURE__ */ React.createElement( "button", { onClick: () => { setShowQRInput(false); setQrText(""); }, className: "px-4 py-2 bg-[#f079b6] text-white rounded-lg hover:bg-[#e16ba8]" }, "Schlie\xDFen" )), /* @__PURE__ */ React.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2" }, "L\xE4uft ab in Tagen", " ", /* @__PURE__ */ React.createElement("span", { className: "text-[#f079b6]" }, "(erforderlich)*"), ":"), /* @__PURE__ */ React.createElement( "input", { type: "number", min: "1", value: expiryDays, onChange: (e) => setExpiryDays(e.target.value), onBlur: () => setExpiryDaysTouched(true), className: "w-full px-3 py-2 border border-gray-600 rounded-md bg-gray-700 text-white", placeholder: "Bitte Anzahl der Tage eingeben" } ), showExpiryError && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-[#f079b6] mt-1" }, "Dieses Feld muss ausgef\xFCllt werden")), /* @__PURE__ */ React.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2" }, "Regal - Platznummer / Notiz (optional):"), /* @__PURE__ */ React.createElement( "textarea", { value: initialNote || "", onChange: (e) => setInitialNote(e.target.value), className: "w-full px-3 py-2 border border-gray-600 rounded-md bg-gray-700 text-white", rows: 3, placeholder: "Notiz zum QR-Code eingeben..." } )), qrText && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex justify-center animate-fade-in" }, /* @__PURE__ */ React.createElement( "img", { src: `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent( qrText )}`, alt: "Generierter QR-Code", className: "border-4 border-white rounded-lg" } )), /* @__PURE__ */ React.createElement("div", { className: "mt-4 border-t border-gray-600 pt-4" }, /* @__PURE__ */ React.createElement("h4", { className: "text-white mb-3" }, "Druckoptionen:"), /* @__PURE__ */ React.createElement("label", { className: "flex items-center space-x-2 text-gray-300 mb-3" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", className: "form-checkbox h-4 w-4 text-[#44C7F4]", checked: printWithName, onChange: (e) => setPrintWithName(e.target.checked) } ), /* @__PURE__ */ React.createElement("span", null, "Mit Beschreibung drucken")), /* @__PURE__ */ React.createElement( "button", { onClick: () => { const expiryDate = expiryDays ? new Date( Date.now() + expiryDays * 24 * 60 * 60 * 1e3 ) : null; printQRCode( qrText, initialNote, expiryDate, printWithName ); }, className: "w-full px-4 py-2 bg-[#44C7F4] text-gray-900 rounded-lg hover:bg-[#3BB8E5] flex items-center justify-center gap-2" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" } ) ), "QR-Code drucken" ), /* @__PURE__ */ React.createElement("div", { className: "space-y-2 mt-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => { setShowQRInput(false); setQrText(""); setInitialNote(""); }, className: "flex-1 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600" }, "Abbrechen" ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { if (!qrText) return; setAttemptedSave(true); if (!expiryDays || Number(expiryDays) <= 0) return; try { setIsSaving(true); let expiresAt = null; if (expiryDays && !isNaN(expiryDays)) { const date = /* @__PURE__ */ new Date(); date.setDate( date.getDate() + parseInt(expiryDays) ); expiresAt = date.toISOString().split("T")[0]; } await saveScannedCode({ code: qrText, code_type: "QR-Code", notes: initialNote || "", expires_at: expiresAt }); setShowQRInput(false); setQrText(""); setExpiryDays(""); setInitialNote(""); setExpiryDaysTouched(false); setAttemptedSave(false); await loadScannedCodes(); } catch (error2) { console.error( "Fehler beim Speichern:", error2 ); } finally { setIsSaving(false); } }, className: "flex-1 px-4 py-2 bg-[#44C7F4] text-gray-900 rounded-lg hover:bg-[#3BB8E5] disabled:opacity-50 relative", disabled: !qrText || !expiryDays || Number(expiryDays) <= 0 || isSaving }, isSaving ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "opacity-0" }, "Speichern"), /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-gray-900" }))) : "Speichern" )))))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 mb-4" }, /* @__PURE__ */ React.createElement( "button", { onClick: isScanning ? stopCamera : startCamera, disabled: showQRInput, className: `flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-200 ${showQRInput ? "opacity-50 cursor-not-allowed bg-gray-400 text-gray-700" : isScanning ? "bg-[#f079b6] hover:bg-[#e16ba8] text-white" : "bg-[#44C7F4] hover:bg-[#3BB8E5] text-gray-900"}` }, /* @__PURE__ */ React.createElement( "svg", { className: `w-5 h-5 mr-2 ${isScanning ? "animate-pulse" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4h2m16 0h-2M3 20h2m16 0h-2M5 4v2m14-2v2M5 18v2m14-2v2M7 8h10M7 12h10M7 16h10" } ) ), isScanning ? "Scanner stoppen" : "Code scannen" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => { if (showQRInput) { setQrText(""); setInitialNote(""); } setShowQRInput(!showQRInput); }, disabled: isScanning || showQRInput, className: `flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-200 flex-1 ${isScanning || showQRInput ? "opacity-50 cursor-not-allowed bg-gray-400 text-gray-700" : "bg-[#f079b6] hover:bg-[#e16ba8] text-white"}` }, !showQRInput && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" } ) ), /* @__PURE__ */ React.createElement("span", null, "QR-Code erstellen")), showQRInput && /* @__PURE__ */ React.createElement("span", null, "QR-Code wird erstellt...") )), /* @__PURE__ */ React.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 mb-4" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Nach Code suchen...", className: "flex-1 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" } ), /* @__PURE__ */ React.createElement( "select", { value: typeFilter, onChange: (e) => setTypeFilter(e.target.value), className: "px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" }, /* @__PURE__ */ React.createElement("option", { value: "all" }, "Alle Typen"), availableTypes.map((type) => /* @__PURE__ */ React.createElement("option", { key: type, value: type }, type)) ), /* @__PURE__ */ React.createElement( "select", { value: expiryFilter, onChange: (e) => setExpiryFilter(e.target.value), className: "px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" }, /* @__PURE__ */ React.createElement("option", { value: "all" }, "Alle Ablaufzeiten"), /* @__PURE__ */ React.createElement("option", { value: "expired" }, "Abgelaufen"), /* @__PURE__ */ React.createElement("option", { value: "today" }, "L\xE4uft heute ab"), /* @__PURE__ */ React.createElement("option", { value: "soon" }, "L\xE4uft bald ab") )), /* @__PURE__ */ React.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-bold text-gray-900 dark:text-white" }, "Archivierte Codes (", sortedCodes.length, ")"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement( "select", { value: itemsPerPage, onChange: (e) => { setItemsPerPage(Number(e.target.value)); setCurrentPage(1); }, className: "px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" }, /* @__PURE__ */ React.createElement("option", { value: 10 }, "10 Eintr\xE4ge"), /* @__PURE__ */ React.createElement("option", { value: 20 }, "20 Eintr\xE4ge"), /* @__PURE__ */ React.createElement("option", { value: 50 }, "50 Eintr\xE4ge") ), selectedCodes.size > 0 && /* @__PURE__ */ React.createElement( "button", { onClick: () => setDeleteConfirmId("multiple"), className: "px-4 py-2 bg-[#f079b6] text-white rounded-lg hover:bg-[#f079b6] flex items-center space-x-2", disabled: isDeleting }, isDeleting ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }), /* @__PURE__ */ React.createElement("span", null, "L\xF6sche...")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", null, "Ausgew\xE4hlte l\xF6schen (", selectedCodes.size, ")")) ))), isLoading ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-center items-center py-20" }, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-[#44C7F4]" })) : /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow" }, /* @__PURE__ */ React.createElement("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700" }, /* @__PURE__ */ React.createElement("thead", { className: "bg-gray-50 dark:bg-gray-700" }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: "px-4 py-3 text-left" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", checked: selectedCodes.size === sortedCodes.length && sortedCodes.length > 0, onChange: toggleAllCodes, className: "accent-[#44C7F4] rounded border-gray-300 focus:ring-[#44C7F4]" } )), /* @__PURE__ */ React.createElement( "th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer", onClick: () => requestSort("code") }, "Code ", /* @__PURE__ */ React.createElement(SortIcon, { columnKey: "code" }) ), /* @__PURE__ */ React.createElement( "th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer", onClick: () => requestSort("code_type") }, "Typ ", /* @__PURE__ */ React.createElement(SortIcon, { columnKey: "code_type" }) ), /* @__PURE__ */ React.createElement( "th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer", onClick: () => requestSort("scanned_at") }, "Gescannt am", " ", /* @__PURE__ */ React.createElement(SortIcon, { columnKey: "scanned_at" }) ), /* @__PURE__ */ React.createElement( "th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer", onClick: () => requestSort("expires_at") }, "Ablauf ", /* @__PURE__ */ React.createElement(SortIcon, { columnKey: "expires_at" }) ), /* @__PURE__ */ React.createElement("th", { className: "px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider" }, "Aktion"))), /* @__PURE__ */ React.createElement("tbody", { className: "bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" }, paginatedCodes.map((code, index) => { const daysRemaining = getDaysRemaining( code.expires_at ); return /* @__PURE__ */ React.createElement( "tr", { key: code.id, className: ` ${index % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700"} ${justSavedId === code.id ? "saved-highlight" : ""} ` }, /* @__PURE__ */ React.createElement("td", { className: "px-4 py-4" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", checked: selectedCodes.has(code.id), onChange: () => toggleCodeSelection(code.id), className: "accent-[#44C7F4] rounded border-gray-300 focus:ring-[#44C7F4]" } )), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-4 whitespace-nowrap text-sm" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement( "span", { className: "text-[#44C7F4] font-medium", title: code.code }, code.code.length > 20 ? code.code.substring(0, 20) + "..." : code.code ), code.notes && /* @__PURE__ */ React.createElement( "button", { className: "ml-2 text-gray-400 hover:text-gray-300 focus:outline-none group relative", "aria-label": "Notiz anzeigen" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" } ) ), /* @__PURE__ */ React.createElement("div", { className: "invisible group-hover:visible group-focus:visible absolute left-0 top-full mt-2 p-4 bg-[#44C7F4] text-gray-900 text-sm rounded-lg shadow-lg min-w-[280px] max-w-[480px] whitespace-normal break-words z-50" }, code.notes) ))), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300" }, code.code_type), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300" }, new Date(code.scanned_at).toLocaleString( "de-DE" )), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-4 whitespace-nowrap text-sm" }, daysRemaining !== null ? /* @__PURE__ */ React.createElement( "span", { className: `${daysRemaining <= 0 ? "text-[#f079b6] font-bold" : daysRemaining < 7 ? "text-[#44C7F4]" : "text-[#ffffff]"}` }, daysRemaining < 0 ? "Abgelaufen" : daysRemaining === 0 ? "Heute" : `in ${daysRemaining} ${daysRemaining === 1 ? "Tag" : "Tagen"}`, code.expires_at && /* @__PURE__ */ React.createElement("span", { className: "text-gray-500 dark:text-gray-400 ml-2 font-normal" }, "(", new Date( code.expires_at ).toLocaleDateString("de-DE"), ")") ) : "-"), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-4 whitespace-nowrap text-right text-sm flex justify-end items-center" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => { setEditingNote({ id: code.id, code: code.code, notes: code.notes || "", expires_at: code.expires_at }); }, className: "text-[#44C7F4] hover:text-[#3BB8E5] mr-3", title: "Bearbeiten" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" } ) ) ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setDeleteConfirmId(code.id), className: "text-[#f079b6] hover:text-[#f079b6] dark:hover:text-[#f079b6]", disabled: isDeleting, "aria-label": "L\xF6schen" }, isDeleting && deleteConfirmId === code.id ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-[#f079b6]" }) : /* @__PURE__ */ React.createElement( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" } ) ) )) ); }), sortedCodes.length === 0 && /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement( "td", { colSpan: "6", className: "px-4 py-4 text-center text-sm text-gray-500 dark:text-gray-300" }, searchQuery ? "Keine Ergebnisse gefunden" : "Noch keine Codes gescannt" )))), sortedCodes.length > itemsPerPage && /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex justify-end items-center px-4 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setCurrentPage((p) => Math.max(1, p - 1)), disabled: currentPage === 1, className: "px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-200 disabled:opacity-50" }, "\u2190" ), /* @__PURE__ */ React.createElement("span", { className: "px-3 py-1 text-gray-600 dark:text-gray-300" }, "Seite ", currentPage, " von", " ", Math.ceil(sortedCodes.length / itemsPerPage)), /* @__PURE__ */ React.createElement( "button", { onClick: () => setCurrentPage( (p) => Math.min( Math.ceil( sortedCodes.length / itemsPerPage ), p + 1 ) ), disabled: currentPage >= Math.ceil(sortedCodes.length / itemsPerPage), className: "px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-200 disabled:opacity-50" }, "\u2192" ))))))), scannedCode && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 max-w-sm w-full success-glow" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold mb-4 text-gray-900 dark:text-white" }, "Code gefunden!"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 mb-2" }, "Typ: ", barcodeType), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 mb-4" }, "Code: ", scannedCode), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "L\xE4uft ab in Tagen", " ", /* @__PURE__ */ React.createElement("span", { className: "text-[#f079b6]" }, "(erforderlich)*"), ":"), /* @__PURE__ */ React.createElement( "input", { type: "number", min: "1", value: expiryDays, onChange: (e) => setExpiryDays(e.target.value), onBlur: () => setExpiryDaysTouched(true), className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm dark:bg-gray-700 dark:text-white", placeholder: "Bitte Anzahl der Tage eingeben" } ), showExpiryError && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-[#f079b6] mt-1" }, "Dieses Feld muss ausgef\xFCllt werden")), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "Regal - Platznummer / Notiz (optional):"), /* @__PURE__ */ React.createElement( "textarea", { value: initialNote || "", onChange: (e) => setInitialNote(e.target.value), className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm dark:bg-gray-700 dark:text-white", rows: 2, placeholder: "Notiz zum Code eingeben..." } )), /* @__PURE__ */ React.createElement("div", { className: "flex justify-end space-x-3" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => { setScannedCode(null); setExpiryDays(""); setInitialNote(""); setExpiryDaysTouched(false); setAttemptedSave(false); stopCamera(); setTimeout(() => { startCamera(); }, 1e3); }, disabled: isSaving, className: "px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 disabled:opacity-50" }, "Erneut scannen" ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { setAttemptedSave(true); if (!expiryDays || Number(expiryDays) <= 0) return; let expiresAt = null; if (expiryDays && !isNaN(expiryDays)) { const date = /* @__PURE__ */ new Date(); date.setDate( date.getDate() + parseInt(expiryDays) ); expiresAt = date.toISOString().split("T")[0]; } await saveScannedCode({ code: scannedCode, code_type: barcodeType, notes: initialNote || "", expires_at: expiresAt }); }, disabled: !expiryDays || Number(expiryDays) <= 0 || isSaving, className: "px-4 py-2 bg-[#44C7F4] text-gray-900 rounded hover:bg-[#3BB8E5] disabled:opacity-50 relative" }, isSaving ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "opacity-0" }, "Speichern"), /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-white" }))) : "Speichern" )))), deleteConfirmId && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 max-w-sm w-full" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold mb-4 text-gray-900 dark:text-white" }, deleteConfirmId === "multiple" ? `${selectedCodes.size} Codes l\xF6schen?` : "Code l\xF6schen?"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 mb-4" }, deleteConfirmId === "multiple" ? "M\xF6chtest du die ausgew\xE4hlten Codes wirklich l\xF6schen?" : "M\xF6chtest du diesen Code wirklich l\xF6schen?"), /* @__PURE__ */ React.createElement("div", { className: "flex justify-end space-x-3" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setDeleteConfirmId(null), className: "px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600" }, "Abbrechen" ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { if (deleteConfirmId === "multiple") { await deleteSelectedCodes(); } else { try { setIsDeleting(true); await fetch("/api/codes/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: deleteConfirmId, action: "delete" }) }); await loadScannedCodes(); setDeleteConfirmId(null); } catch (err) { console.error("Fehler beim L\xF6schen:", err); alert("Fehler beim L\xF6schen des Codes"); } finally { setIsDeleting(false); } } }, className: "px-4 py-2 bg-[#f079b6] text-white rounded hover:bg-[#f079b6]" }, isDeleting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }) : "L\xF6schen" )))), duplicateDialog && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 max-w-sm w-full duplicate-alert" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold mb-4 text-gray-900 dark:text-white" }, "Duplikat gefunden!"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 mb-4" }, "Dieser Code ist schon in deinem Archiv:", " ", duplicateCodeData), /* @__PURE__ */ React.createElement( "button", { onClick: () => { console.log("Button clicked"); console.log( "Duplicate code data:", duplicateCodeData ); const existingCode = scannedCodes.find( (code) => code.code === duplicateCodeData ); if (existingCode) { setEditingNote({ id: existingCode.id, code: existingCode.code, notes: existingCode.notes || "", expires_at: existingCode.expires_at }); } setDuplicateDialog(false); setDuplicateCodeData(null); stopCamera(); }, className: "w-full px-4 py-2 mb-3 bg-[#f079b6] text-white rounded hover:bg-[#e16ba8]" }, "Code im Archiv bearbeiten" ), /* @__PURE__ */ React.createElement("div", { className: "flex justify-end space-x-3" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => { setDuplicateDialog(false); setDuplicateCodeData(null); stopCamera(); }, className: "px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded" }, "Abbrechen" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => { setDuplicateDialog(false); setDuplicateCodeData(null); setTimeout(() => { startCamera(); }, 500); }, className: "px-4 py-2 bg-[#44C7F4] text-gray-900 rounded hover:bg-[#3BB8E5]" }, "Erneut scannen" )))), editingNote && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg max-w-sm w-full flex flex-col max-h-[90vh]" }, /* @__PURE__ */ React.createElement("div", { className: "p-6 border-b border-gray-700" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold text-white" }, "Notiz f\xFCr Code:", " ", /* @__PURE__ */ React.createElement("span", { className: "text-[#44C7F4]" }, editingNote.code))), /* @__PURE__ */ React.createElement("div", { className: "p-6 overflow-y-auto flex-1" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2" }, "Regal - Platznummer / Notiz:"), /* @__PURE__ */ React.createElement( "textarea", { value: editingNote.notes || "", onChange: (e) => setEditingNote({ ...editingNote, notes: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm dark:bg-gray-700 dark:text-white mb-4", rows: 2, placeholder: "Notiz eingeben..." } ), editingNote && /* @__PURE__ */ React.createElement("div", { className: "border-t border-gray-600 pt-4" }, /* @__PURE__ */ React.createElement("h4", { className: "text-white mb-3" }, "QR-Code Vorschau:"), /* @__PURE__ */ React.createElement("div", { className: "bg-white p-4 rounded-lg flex justify-center" }, /* @__PURE__ */ React.createElement( "img", { src: `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent( editingNote.code )}`, alt: "QR Code", className: "w-48 h-48" } )), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("label", { className: "flex items-center space-x-2 text-gray-300" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", className: "form-checkbox h-4 w-4 text-[#44C7F4]", checked: printWithName, onChange: (e) => setPrintWithName(e.target.checked) } ), /* @__PURE__ */ React.createElement("span", null, "Mit Beschreibung drucken"))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => printQRCode( editingNote.code, editingNote.notes, editingNote.expires_at, printWithName ), className: "w-full px-4 py-2 bg-[#44C7F4] text-gray-900 rounded-lg hover:bg-[#3BB8E5] flex items-center justify-center gap-2" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" } ) ), "QR-Code drucken" ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { try { const imgSrc = `https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=${encodeURIComponent( editingNote.code )}`; const response = await fetch(imgSrc); const blob = await response.blob(); const defaultFilename = `QR-Code-${editingNote.code.substring( 0, 30 )}.png`; if ("showSaveFilePicker" in window) { try { const handle = await window.showSaveFilePicker({ suggestedName: defaultFilename, types: [ { description: "PNG Bild", accept: { "image/png": [".png"] } } ] }); const writable = await handle.createWritable(); await writable.write(blob); await writable.close(); } catch (err) { if (err.name !== "AbortError") { throw err; } } } else { const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = defaultFilename; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } } catch (error2) { console.error( "Fehler beim Speichern:", error2 ); alert( "Fehler beim Speichern der Datei: " + error2.message ); } }, className: "bg-[#44C7F4] text-gray-900 w-full px-4 py-2 rounded-lg hover:bg-[#3BB8E5] flex items-center justify-center" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" } ) ), "Auf Ger\xE4t speichern" ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { if (!navigator.share) { alert( "Teilen wird auf diesem Ger\xE4t nicht unterst\xFCtzt" ); return; } try { const imgSrc = `https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=${encodeURIComponent( editingNote.code )}`; const blob = await fetch(imgSrc).then( (r) => r.blob() ); const file = new File( [blob], `qr-code-${editingNote.code}.png`, { type: "image/png" } ); await navigator.share({ title: "QR Code", text: printWithName ? `${editingNote.code} ${editingNote.notes || ""} ${editingNote.expires_at ? `L\xE4uft ab am: ${new Date( editingNote.expires_at ).toLocaleDateString("de-DE")}` : ""}` : editingNote.code, files: [file] }); } catch (error2) { console.error("Error sharing:", error2); } }, className: "bg-[#44C7F4] text-gray-900 w-full px-4 py-2 rounded-lg hover:bg-[#3BB8E5] flex items-center justify-center" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" } ) ), "QR-Code teilen" )))), /* @__PURE__ */ React.createElement("div", { className: "p-6 border-t border-gray-700" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col space-y-3" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setEditingNote(null), className: "w-full px-4 py-2 bg-[#f079b6] text-white rounded-lg hover:bg-[#e16ba8]" }, "Abbrechen" ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { try { setIsSaving(true); const notesToSave = editingNote.notes?.trim() || ""; const response = await fetch( "/api/codes/save", { method: "POST", headers: { "Content-Type": "application/json", "Cache-Control": "no-cache" }, body: JSON.stringify({ id: editingNote.id, notes: notesToSave }) } ); if (!response.ok) { throw new Error( `HTTP error! status: ${response.status}` ); } const data = await response.json(); if (data.success) { await loadScannedCodes(); setEditingNote(null); } else { alert( "Fehler beim Speichern: " + (data.message || "Unbekannter Fehler") ); } } catch (err) { console.error( "Details zum Speicherfehler:", err ); alert( "Fehler beim Speichern der Notiz: " + (err.message || "Unbekannter Fehler") ); } finally { setIsSaving(false); } }, disabled: isSaving, className: "w-full px-4 py-2 bg-[#44C7F4] text-gray-900 rounded-lg hover:bg-[#3BB8E5] relative" }, isSaving ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "opacity-0" }, "Speichern"), /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-gray-900" }))) : "Speichern" ))))), showPrintDialog && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-medium" }, "QR-Code speichern/drucken"), /* @__PURE__ */ React.createElement( "button", { onClick: () => setShowPrintDialog(false), className: "text-gray-500" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" } ) ) )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "p-4 bg-white rounded-lg shadow flex flex-col items-center" }, /* @__PURE__ */ React.createElement( "img", { src: qrCodeData, alt: "QR Code", className: "max-w-[200px] mb-2" } ), /* @__PURE__ */ React.createElement("p", { className: "text-center font-medium" }, qrValue)), /* @__PURE__ */ React.createElement( "button", { onClick: () => window.print(), className: "bg-[#44C7F4] text-white w-full px-4 py-2 rounded-lg hover:bg-[#3BB8E5] flex items-center justify-center" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" } ) ), "QR-Code drucken" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => { const link = document.createElement("a"); link.download = `qr-code-${qrValue}.png`; link.href = qrCodeData; link.click(); }, className: "bg-[#44C7F4] text-white w-full px-4 py-2 rounded-lg hover:bg-[#3BB8E5] flex items-center justify-center" }, /* @__PURE__ */ React.createElement( "svg", { className: "w-5 h-5 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React.createElement( "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" } ) ), "Auf Ger\xE4t speichern" ), /* @__PURE__ */ React.createElement( "button", { onClick: async () => { if (!navigator.share) { alert( "Teilen wird auf diesem Ger\xE4t nicht unterst\xFCtzt" ); return; } try { const blob = await fetch(qrCodeData).then( (r) => r.blob() ); const file = new File( [blob], `qr-code-${qrValue}.png`, { type: "image/png" } ); await navigator.share({ title: "QR Code", text: qrValue, files: [file] }); } catch (error2) { console.error("Error sharing:", error2); } }, className: "bg-[#44C7F4] text-white w-full px-4 py-2 rounded-lg hover:bg-[#3BB8E5]" } ))))))))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();

Zugriff geschützt