function MainComponent() { const [preview, setPreview] = useState(null); const [analysis, setAnalysis] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [checks, setChecks] = useState([]); const [loadingChecks, setLoadingChecks] = useState(false); const [expandedCheck, setExpandedCheck] = useState(null); const [selectedImage, setSelectedImage] = useState(null); const [isSaving, setIsSaving] = useState(false); const [isDeleting, setIsDeleting] = useState(null); const [totalCount, setTotalCount] = useState(0); const [darkMode, setDarkMode] = useState(true); const compressImage = useCallback(async (base64Str)=>{ return new Promise((resolve)=>{ const img = new Image(); img.src = base64Str; img.onload = ()=>{ const canvas = document.createElement("canvas"); const MAX_WIDTH = 1200; let width = img.width; let height = img.height; if (width > MAX_WIDTH) { height = Math.round(height * MAX_WIDTH / width); width = MAX_WIDTH; } canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); resolve(canvas.toDataURL("image/jpeg", 0.7)); }; }); }, []); const analyzeImage = useCallback(async ()=>{ if (!preview) return; setLoading(true); setError(null); try { const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: `Bitte analysiere dieses Bild und bewerte, ob der gezeigte Raum sauber und aufgeräumt ist. Erkenne zunächst um welchen Raumtyp es sich handelt (z.B. Küche, Bad, WC, Lager, Büro etc.) und verwende diese spezifische Bezeichnung in deiner Analyse. WICHTIG: Konzentriere dich AUSSCHLIESSLICH auf den Raum und dessen Sauberkeit und Ordnung. Mache KEINE Aussagen über Personen, auch nicht darüber, dass du Personen nicht analysieren kannst. Ignoriere Personen vollständig in deiner Analyse und erwähne sie nicht. NUR BEI LEBENSMITTELRELEVANTEN RÄUMEN - HACCP & LEBENSMITTELSICHERHEIT: Nur wenn es sich um einen lebensmittelrelevanten Bereich handelt (Küche, Kühlhaus, Lager für Lebensmittel, Gastro-Bereich): - Achte besonders auf offene, nicht abgedeckte Lebensmittel - Prüfe auf korrekte Lagerung (Temperatur, Trennung von Lebensmitteln) - Bewerte Hygienezustände bei Arbeitsflächen, die mit Lebensmitteln in Kontakt kommen - Achte auf Anzeichen von Schädlingen oder Verunreinigungen - Prüfe, ob Lebensmittel vom Boden entfernt gelagert werden (mind. 15 cm) - Bewerte die Sauberkeit von Kühlschränken und Kühlhäusern Bei Wohnzimmern, Schlafzimmern, Kinderzimmern, Garagen, Büros oder ähnlichen nicht-lebensmittelrelevanten Räumen: - Erwähne KEINE HACCP-Kriterien oder Lebensmittelsicherheit - Konzentriere dich nur auf allgemeine Sauberkeit und Ordnung Formatiere deine Antwort EXAKT wie folgt: Bei sauberem Zustand: SAUBER Beschreibung: [Detaillierte Beschreibung des sauberen Zustands, verwende die spezifische Raumbezeichnung] Bei unsauberem Zustand: NICHT SAUBER Beschreibung: [Detaillierte Beschreibung des aktuellen Zustands, verwende die spezifische Raumbezeichnung] Verbesserungen: 1. [Liste der notwendigen Verbesserungen] WICHTIG: Bei sauberem Zustand KEINE Verbesserungen auflisten oder erwähnen. Der Abschnitt "Verbesserungen:" soll bei sauberen Räumen komplett weggelassen werden. Wichtig: - Keine Emojis oder Symbole verwenden - Keine Zeitstempel einfügen - Kurze, prägnante Beschreibung des Ist-Zustands - Bei unsauberem Zustand konkrete Verbesserungsvorschläge listen - Bei sauberem Zustand KEINEN Verbesserungsabschnitt einfügen - Immer die spezifische Raumbezeichnung (Küche, Bad, Büro etc.) statt "der Raum" verwenden - Bei lebensmittelrelevanten Räumen auf Lebensmittelsicherheit achten, bei anderen Räumen nicht Bitte gib deine Antwort auf Deutsch.` }, { type: "image_url", image_url: { url: preview } } ] } ] }) }); if (!response.ok) { throw new Error(`Analyse fehlgeschlagen: ${response.status}`); } const result = await response.json(); const analysisText = result.choices[0].message.content; setAnalysis(analysisText); setTimeout(()=>{ const analysisElement = document.querySelector('[role="alert"]') || document.querySelector(".bg-green-500, .bg-red-500"); if (analysisElement) { analysisElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }, 100); } catch (err) { console.error(err); setError(`${err.message}`); } finally{ setLoading(false); } }, [ preview ]); const handleFileChange = useCallback(async (e)=>{ if (e.target.files?.[0]) { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = async (e)=>{ try { const compressedImage = await compressImage(e.target?.result); setPreview(compressedImage); setTimeout(()=>{ const previewElement = document.querySelector(".preview-image-container"); if (previewElement) { previewElement.scrollIntoView({ behavior: "smooth", block: "start" }); } analyzeImage(); }, 300); } catch (err) { console.error("Fehler bei der Bildkomprimierung:", err); setError("Fehler bei der Bildverarbeitung"); } }; reader.onerror = (e)=>{ setError("Fehler beim Laden des Bildes"); }; reader.readAsDataURL(file); } }, [ compressImage, analyzeImage ]); const loadChecks = useCallback(async ()=>{ setLoadingChecks(true); setError(null); try { const response = await fetch("/api/get-cleaning-checks", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error(`HTTP Fehler: ${response.status}`); } const data = await response.json(); setChecks(data.items); setTotalCount(data.total); } catch (err) { console.error("Load error:", err); setError(`Fehler beim Laden: ${err.message}`); } finally{ setLoadingChecks(false); } }, []); const deleteCheck = useCallback(async (id)=>{ try { setIsDeleting(id); const response = await fetch("/api/delete-cleaning-check", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) }); if (!response.ok) { throw new Error(`Löschen fehlgeschlagen: ${response.status}`); } await loadChecks(); } catch (err) { setError(`Fehler beim Löschen: ${err.message}`); } finally{ setIsDeleting(null); } }, [ loadChecks ]); useEffect(()=>{ loadChecks(); }, [ loadChecks ]); useEffect(()=>{ document.title = "Raumanalyse per Foto: Sauber oder nicht?"; }, []); useEffect(()=>{ if (preview) { const timer = setTimeout(()=>{ analyzeImage(); }, 300); return ()=>clearTimeout(timer); } }, [ preview, analyzeImage ]); useEffect(()=>{ const head = document.head; const favicon = document.createElement("link"); favicon.rel = "icon"; favicon.type = "image/png"; favicon.href = "https://ucarecdn.com/9c62c1f0-dffe-4a1b-bccd-44fd738e27a0/-/format/auto/"; head.appendChild(favicon); const appleTouchIcon = document.createElement("link"); appleTouchIcon.rel = "apple-touch-icon"; appleTouchIcon.href = "https://ucarecdn.com/9c62c1f0-dffe-4a1b-bccd-44fd738e27a0/-/format/auto/"; head.appendChild(appleTouchIcon); const msTile = document.createElement("meta"); msTile.name = "msapplication-TileImage"; msTile.content = "https://ucarecdn.com/9c62c1f0-dffe-4a1b-bccd-44fd738e27a0/-/format/auto/"; head.appendChild(msTile); const maskIcon = document.createElement("link"); maskIcon.rel = "mask-icon"; maskIcon.href = "https://ucarecdn.com/9c62c1f0-dffe-4a1b-bccd-44fd738e27a0/-/format/auto/"; maskIcon.color = "#44C7F4"; head.appendChild(maskIcon); const icon192 = document.createElement("link"); icon192.rel = "icon"; icon192.type = "image/png"; icon192.sizes = "192x192"; icon192.href = "https://ucarecdn.com/9c62c1f0-dffe-4a1b-bccd-44fd738e27a0/-/format/auto/"; head.appendChild(icon192); const icon512 = document.createElement("link"); icon512.rel = "icon"; icon512.type = "image/png"; icon512.sizes = "512x512"; icon512.href = "https://ucarecdn.com/9c62c1f0-dffe-4a1b-bccd-44fd738e27a0/-/format/auto/"; head.appendChild(icon512); return ()=>{ head.removeChild(favicon); head.removeChild(appleTouchIcon); head.removeChild(msTile); head.removeChild(maskIcon); head.removeChild(icon192); head.removeChild(icon512); }; }, []); useEffect(()=>{ if (selectedImage) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } }, [ selectedImage ]); return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${darkMode ? "bg-[#111827] text-white" : "bg-[#f9fafb] text-gray-900"}`, __source: { fileName: "", lineNumber: 310, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[860px] mx-auto p-4", __source: { fileName: "", lineNumber: 315, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-6", __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDarkMode(!darkMode), className: `absolute top-2 right-0 w-10 h-10 rounded-full flex items-center justify-center ${darkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"} transition-colors`, "aria-label": darkMode ? "Zum hellen Modus wechseln" : "Zum dunklen Modus wechseln", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${darkMode ? "fa-sun" : "fa-moon"} text-xl ${darkMode ? "text-white" : "text-gray-700"}`, __source: { fileName: "", lineNumber: 331, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4 pt-2", __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/9c62c1f0-dffe-4a1b-bccd-44fd738e27a0/-/format/auto/", alt: "QM Spot Logo", className: "w-[80px] h-[80px] object-contain", onError: (e)=>{ e.target.style.display = "none"; }, __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, "Raumanalyse per Foto: Sauber oder nicht?"))), /*#__PURE__*/ React.createElement("label", { className: `flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg ${darkMode ? "border-gray-600 hover:border-[#44C7F4]" : "border-gray-300 hover:border-[#44C7F4]"} cursor-pointer transition-colors`, role: "button", tabIndex: 0, "aria-label": "Foto aufnehmen", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-2xl mb-2 text-[#44C7F4]", __source: { fileName: "", lineNumber: 364, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#44C7F4]", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, "Foto aufnehmen")), /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", accept: "image/*", capture: "environment", onChange: handleFileChange, "aria-label": "Foto Upload", __source: { fileName: "", lineNumber: 367, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-[#f079b6] text-center text-lg", __source: { fileName: "", lineNumber: 377, columnNumber: 11 }, __self: this }, "Sende mir ein Foto – ich beurteile die Sauberkeit, egal ob Küche, Lager oder Büro."), preview && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 383, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-[480px] w-full mx-auto preview-image-container", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: preview, alt: "Vorschau des hochgeladenen Fotos", className: "w-full h-auto rounded-lg cursor-pointer hover:opacity-90 transition-opacity", onClick: ()=>setSelectedImage(preview), role: "button", tabIndex: 0, onKeyPress: (e)=>e.key === "Enter" && setSelectedImage(preview), __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }), loading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 397, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-2", __source: { fileName: "", lineNumber: 398, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-3xl text-[#44C7F4]", __source: { fileName: "", lineNumber: 399, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 400, columnNumber: 23 }, __self: this }, "Analysiere...")))), /*#__PURE__*/ React.createElement("button", { onClick: analyzeImage, disabled: loading || !preview, className: "bg-[#44C7F4] text-gray-900 py-3 px-4 rounded-lg hover:bg-[#3BB8E5] transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": "Bild erneut analysieren", __source: { fileName: "", lineNumber: 406, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 414, columnNumber: 21 }, __self: this }), "Analysiere...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt", __source: { fileName: "", lineNumber: 419, columnNumber: 21 }, __self: this }), "Erneut analysieren"))), error && /*#__PURE__*/ React.createElement("div", { className: `flex items-center gap-2 ${darkMode ? "bg-red-500 bg-opacity-10" : "bg-red-100"} p-4 rounded-lg text-red-500`, role: "alert", __source: { fileName: "", lineNumber: 428, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-xl", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 435, columnNumber: 15 }, __self: this }, error)), analysis && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg ${analysis.includes("SAUBER") && !analysis.includes("NICHT SAUBER") ? darkMode ? "bg-green-500 bg-opacity-10" : "bg-green-100" : darkMode ? "bg-red-500 bg-opacity-10" : "bg-red-100"}`, __source: { fileName: "", lineNumber: 441, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-4", __source: { fileName: "", lineNumber: 453, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `w-8 h-8 rounded-full flex items-center justify-center ${analysis.includes("SAUBER") && !analysis.includes("NICHT SAUBER") ? "bg-[#34d399]" : "bg-[#f079b6]"}`, role: "img", "aria-label": analysis.includes("SAUBER") && !analysis.includes("NICHT SAUBER") ? "Sauber" : "Nicht sauber", __source: { fileName: "", lineNumber: 454, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${analysis.includes("SAUBER") && !analysis.includes("NICHT SAUBER") ? "fa-check" : "fa-times"} text-white text-lg`, __source: { fileName: "", lineNumber: 469, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: `text-xl font-bold ${analysis.includes("SAUBER") && !analysis.includes("NICHT SAUBER") ? "text-[#34d399]" : "text-[#f079b6]"}`, __source: { fileName: "", lineNumber: 478, columnNumber: 19 }, __self: this }, analysis.includes("SAUBER") && !analysis.includes("NICHT SAUBER") ? "Sauber" : "Nicht sauber")), /*#__PURE__*/ React.createElement("p", { className: `${darkMode ? "text-gray-300" : "text-gray-700"} whitespace-pre-line`, __source: { fileName: "", lineNumber: 492, columnNumber: 17 }, __self: this }, analysis.split("\n").map((line, index)=>line.startsWith("Verbesserungen:") ? /*#__PURE__*/ React.createElement("span", { key: index, className: "text-[#f079b6] block", __source: { fileName: "", lineNumber: 499, columnNumber: 23 }, __self: this }, line) : /*#__PURE__*/ React.createElement("span", { key: index, className: "block", __source: { fileName: "", lineNumber: 503, columnNumber: 23 }, __self: this }, line)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3 mt-4", __source: { fileName: "", lineNumber: 511, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setPreview(null); setAnalysis(""); const fileInput = document.querySelector('input[type="file"]'); if (fileInput) fileInput.value = ""; }, className: `${darkMode ? "bg-gray-600 text-white hover:bg-gray-700" : "bg-gray-300 text-gray-900 hover:bg-gray-400"} py-3 px-4 rounded-lg transition-colors flex-1 flex items-center justify-center gap-2`, __source: { fileName: "", lineNumber: 512, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 526, columnNumber: 19 }, __self: this }), "Abbrechen"), /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ setIsSaving(true); setError(null); // Error zurücksetzen try { const compressedImage = await compressImage(preview); const response = await fetch("/api/save-cleaning-check", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ photo: compressedImage, analysisText: analysis, isClean: analysis.includes("SAUBER") && !analysis.includes("NICHT SAUBER") }) }); if (!response.ok) { const errorText = await response.text(); throw new Error(`Speichern fehlgeschlagen: ${response.status} - ${errorText}`); } const savedCheck = await response.json(); console.log("Gespeicherter Check:", savedCheck); // UI zurücksetzen setPreview(null); setAnalysis(""); const fileInput = document.querySelector('input[type="file"]'); if (fileInput) fileInput.value = ""; // Liste neu laden console.log("Lade Liste neu..."); await loadChecks(); console.log("Liste neu geladen"); } catch (err) { console.error("Speicherfehler:", err); setError(`Fehler beim Speichern: ${err.message}`); } finally{ setIsSaving(false); } }, disabled: isSaving, className: "bg-[#44C7F4] text-gray-900 py-3 px-4 rounded-lg hover:bg-[#3BB8E5] transition-colors flex-1 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": "Analyse speichern", __source: { fileName: "", lineNumber: 530, columnNumber: 17 }, __self: this }, isSaving ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 582, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 583, columnNumber: 23 }, __self: this }), "Speichert...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save", __source: { fileName: "", lineNumber: 588, columnNumber: 23 }, __self: this }), "Speichern")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 597, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `text-lg font-bold mb-4 ${darkMode ? "text-white" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 598, columnNumber: 13 }, __self: this }, "Bisherige Überprüfungen (", totalCount, ")"), loadingChecks && checks.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center p-4", __source: { fileName: "", lineNumber: 606, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 607, columnNumber: 17 }, __self: this })) : checks.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: `${darkMode ? "text-gray-400" : "text-gray-500"} text-center p-4`, __source: { fileName: "", lineNumber: 610, columnNumber: 15 }, __self: this }, "Noch keine Überprüfungen vorhanden") : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 618, columnNumber: 15 }, __self: this }, checks.map((check)=>/*#__PURE__*/ React.createElement("div", { key: check.id, className: `${darkMode ? "bg-[#1F2937]" : "bg-[#ffffff]"} rounded-lg p-6 ${!darkMode && "shadow-md"}`, __source: { fileName: "", lineNumber: 620, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 626, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-32 h-32 flex-shrink-0 relative group", __source: { fileName: "", lineNumber: 627, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: check.photo, alt: "Überprüfungsfoto", className: `w-full h-full object-cover rounded-lg cursor-pointer hover:opacity-90 transition-opacity border-2 ${darkMode ? "border-gray-600" : "border-gray-300"}`, onClick: ()=>setSelectedImage(check.photo), role: "button", tabIndex: 0, onKeyPress: (e)=>e.key === "Enter" && setSelectedImage(check.photo), __source: { fileName: "", lineNumber: 628, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-0 transition-all duration-200 rounded-lg flex items-center justify-center cursor-pointer", onClick: ()=>setSelectedImage(check.photo), __source: { fileName: "", lineNumber: 641, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search-plus text-[#44C7F4] opacity-100 group-hover:opacity-0 transition-opacity duration-200 text-2xl", __source: { fileName: "", lineNumber: 645, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 648, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between gap-2 mb-1", __source: { fileName: "", lineNumber: 649, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 650, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `w-6 h-6 rounded-full flex items-center justify-center ${check.is_clean ? "bg-[#34d399]" : "bg-[#f079b6]"}`, role: "img", "aria-label": check.is_clean ? "Sauber" : "Nicht sauber", __source: { fileName: "", lineNumber: 651, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${check.is_clean ? "fa-check" : "fa-times"} text-white text-sm`, __source: { fileName: "", lineNumber: 660, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: `font-medium ${check.is_clean ? "text-[#34d399]" : "text-[#f079b6]"}`, __source: { fileName: "", lineNumber: 666, columnNumber: 29 }, __self: this }, check.is_clean ? "Sauber" : "Nicht sauber"), /*#__PURE__*/ React.createElement("span", { className: `text-sm ${darkMode ? "text-gray-400" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 675, columnNumber: 29 }, __self: this }, new Date(check.created_at).toLocaleString())), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (window.confirm("Möchten Sie diesen Eintrag wirklich löschen?")) { deleteCheck(check.id); } }, disabled: isDeleting === check.id, className: "text-[#f079b6] hover:text-[#e16ba8] transition-colors min-h-[44px] px-4 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": "Eintrag löschen", __source: { fileName: "", lineNumber: 683, columnNumber: 27 }, __self: this }, isDeleting === check.id ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 698, columnNumber: 31 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-xmark", __source: { fileName: "", lineNumber: 700, columnNumber: 31 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { onClick: ()=>setExpandedCheck(expandedCheck === check.id ? null : check.id), className: "cursor-pointer hover:opacity-90 transition-opacity", role: "button", tabIndex: 0, onKeyPress: (e)=>{ if (e.key === "Enter" || e.key === " ") { setExpandedCheck(expandedCheck === check.id ? null : check.id); } }, __source: { fileName: "", lineNumber: 705, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-base ${darkMode ? "text-gray-300" : "text-gray-700"} whitespace-pre-line ${expandedCheck === check.id ? "" : "line-clamp-3"}`, __source: { fileName: "", lineNumber: 722, columnNumber: 27 }, __self: this }, check.analysis_text.split("\n").slice(1).filter((line)=>line.trim() !== "").map((line, index)=>{ if (line.startsWith("Verbesserungen:")) { return /*#__PURE__*/ React.createElement("span", { key: index, className: "text-[#f079b6] mt-4 block", __source: { fileName: "", lineNumber: 736, columnNumber: 37 }, __self: this }, line); } return /*#__PURE__*/ React.createElement("span", { key: index, className: "block", __source: { fileName: "", lineNumber: 745, columnNumber: 35 }, __self: this }, line); })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 752, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#44C7F4] text-sm flex items-center gap-2", __source: { fileName: "", lineNumber: 753, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${expandedCheck === check.id ? "fa-chevron-up" : "fa-chevron-down"}`, __source: { fileName: "", lineNumber: 754, columnNumber: 31 }, __self: this }), expandedCheck === check.id ? "Weniger anzeigen" : "Mehr Details"))))))), loadingChecks && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center p-4", __source: { fileName: "", lineNumber: 772, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 773, columnNumber: 21 }, __self: this })))))), selectedImage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 783, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 784, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedImage, alt: "Vergrößertes Bild", className: "max-w-full max-h-full rounded-lg", __source: { fileName: "", lineNumber: 785, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedImage(null), className: "absolute top-2 right-2 bg-white text-gray-900 rounded-full p-2", "aria-label": "Schließen", __source: { fileName: "", lineNumber: 790, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 795, columnNumber: 15 }, __self: this }))))); }

Raumanalyse per Foto: Sauber oder nicht?

Bisherige Überprüfungen (0)