🍪 KI-Feedback · Der Keksbäcker Hamburg

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_184":185,"_186":187},"routes/_app.x.$handle.$name",{"_104":103,"_38":50,"_112":94,"_33":106,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":32,"_126":127,"_128":30,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":32,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":30,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":32},"version",5,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","24ac9225-5c71-405e-b5d6-db1dca6d7edb","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":32,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":32},"previous","deleted",true,"deletedHere",false,"path","frontend.js","latestPath","fileId","ae9600f6-544f-11f1-a645-ee650bb23af1","name","fileType","script","content","import React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ─── API helpers ────────────────────────────────────────────────────────\nasync function loadResponses() {\n try {\n const res = await fetch(\"/api/responses\");\n return await res.json();\n } catch { return []; }\n}\n\nasync function submitResponse(entry) {\n await fetch(\"/api/responses\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(entry),\n });\n}\n\n// ─── Colour / style tokens ─────────────────────────────────────────────\nconst C = {\n blue: \"#2200CC\",\n accent: \"#EAFF00\",\n dark: \"#0A0A2E\",\n white: \"#F5F5FF\",\n gray: \"#E0E0F0\",\n mid: \"#9988EE\",\n};\n\nconst font = {\n head: \"'Barlow Condensed', sans-serif\",\n body: \"'Barlow', sans-serif\",\n};\n\n// ─── Tiny UI primitives ────────────────────────────────────────────────\nfunction Tag({ children, color = C.blue }) {\n return React.createElement(\"span\", { style: {\n background: color, color: color === C.accent ? C.dark : \"white\",\n fontFamily: font.head, fontWeight: 800, fontSize: 11,\n padding: \"2px 7px\", letterSpacing: \"0.1em\", textTransform: \"uppercase\",\n display: \"inline-block\", marginRight: 8,\n }}, children);\n}\n\nfunction SectionTitle({ n, children }) {\n return React.createElement(\"div\", { style: {\n fontFamily: font.head, fontWeight: 800, fontSize: 12,\n letterSpacing: \"0.2em\", textTransform: \"uppercase\",\n color: C.blue, borderBottom: `3px solid ${C.blue}`,\n paddingBottom: 8, marginBottom: 24, marginTop: 40,\n display: \"flex\", gap: 10, alignItems: \"center\",\n }},\n React.createElement(\"span\", { style: { background: C.blue, color: \"white\", padding: \"2px 8px\" }}, n),\n children\n );\n}\n\nfunction ScaleInput({ value, onChange }) {\n return React.createElement(\"div\", { style: { display: \"flex\", gap: 8, alignItems: \"center\" }},\n [1,2,3,4,5].map(n =>\n React.createElement(\"button\", {\n key: n, onClick: () => onChange(n),\n style: {\n width: 44, height: 44,\n border: `2px solid ${C.blue}`,\n background: value === n ? C.blue : \"white\",\n color: value === n ? \"white\" : C.blue,\n fontFamily: font.head, fontWeight: 800, fontSize: 20,\n cursor: \"pointer\", transition: \"all .15s\",\n }\n }, n)\n ),\n React.createElement(\"span\", { style: { fontSize: 12, color: \"#888\", marginLeft: 4 }},\n value ? `${value} von 5` : \"—\")\n );\n}\n\nfunction CheckList({ options, value = [], onChange }) {\n return React.createElement(\"div\", { style: { display: \"flex\", flexDirection: \"column\", gap: 10 }},\n options.map(opt => {\n const on = value.includes(opt);\n return React.createElement(\"label\", {\n key: opt,\n style: { display: \"flex\", alignItems: \"flex-start\", gap: 10, cursor: \"pointer\" }\n },\n React.createElement(\"div\", {\n onClick: () => onChange(on ? value.filter(v => v !== opt) : [...value, opt]),\n style: {\n width: 22, height: 22, minWidth: 22, border: `2px solid ${C.blue}`,\n background: on ? C.blue : \"white\",\n display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n color: \"white\", fontWeight: 800, fontSize: 14, marginTop: 1,\n }\n }, on ? \"✓\" : \"\"),\n React.createElement(\"span\", { style: { fontSize: 15, fontWeight: 500, lineHeight: 1.35 }}, opt)\n );\n })\n );\n}\n\nfunction Textarea({ value, onChange, placeholder, rows = 3 }) {\n return React.createElement(\"textarea\", {\n value, onChange: e => onChange(e.target.value),\n placeholder, rows,\n style: {\n width: \"100%\", border: `2px solid ${C.blue}`,\n padding: \"10px 12px\", fontFamily: font.body, fontSize: 15,\n resize: \"vertical\", outline: \"none\", background: \"white\",\n color: C.dark, lineHeight: 1.5, boxSizing: \"border-box\",\n }\n });\n}\n\nfunction SelectInput({ value, onChange, options }) {\n return React.createElement(\"select\", {\n value, onChange: e => onChange(e.target.value),\n style: {\n width: \"100%\", border: `2px solid ${C.blue}`,\n padding: \"10px 12px\", fontFamily: font.body, fontSize: 15,\n background: \"white\", color: C.dark, outline: \"none\",\n }\n },\n React.createElement(\"option\", { value: \"\" }, \"Bitte wählen …\"),\n options.map(o => React.createElement(\"option\", { key: o, value: o }, o))\n );\n}\n\n// ─── Constants ──────────────────────────────────────────────────────────\nconst ASSISTANTS = [\n \"Frieda – Rezepte & Produktentwicklung\",\n \"Mara – Vertrieb & Angebote\",\n \"Greta – Büro & Backoffice\",\n \"Vega – Marketing & Content\",\n \"Klara – Buchhaltung & Zahlen\",\n \"Keksentnahme-Digitalisierung (Foto → Excel)\",\n \"Buchungsstapel / Buchhaltungsaufgaben\",\n];\n\nconst NEEDS = [\n \"Mehr Training / Workshop\",\n \"Bessere / klarere Prompts\",\n \"Schritt-für-Schritt-Anleitungen (Cheat Sheets)\",\n \"Mehr Zeit zum Ausprobieren\",\n \"Direkter Ansprechpartner bei Problemen\",\n \"Bessere technische Ausstattung\",\n];\n\nconst FREQ_OPTS = [\"Täglich\",\"Mehrmals pro Woche\",\"Einmal pro Woche\",\"Seltener\",\"Noch gar nicht\"];\n\nconst emptyForm = {\n name: \"\", bereich: \"\", freq: \"\",\n gesamt: 0, helpful: [], positive: \"\",\n integration: 0, problems: \"\", hurts: \"\",\n zeitfresser: \"\", ideen: \"\", needs: [],\n empfehlen: 0, freitext: \"\",\n};\n\n// ─── SURVEY FORM ──────────────────────────────────────────────────────────\nfunction SurveyForm({ onSubmit }) {\n const [f, setF] = useState(emptyForm);\n const [submitted, setSubmitted] = useState(false);\n const [loading, setLoading] = useState(false);\n\n const set = key => val => setF(prev => ({ ...prev, [key]: val }));\n\n const handleSubmit = async () => {\n if (!f.name && !f.bereich) { alert(\"Bitte gib deinen Namen oder Bereich an.\"); return; }\n setLoading(true);\n await onSubmit(f);\n setLoading(false);\n setSubmitted(true);\n };\n\n if (submitted) {\n return React.createElement(\"div\", { style: { textAlign: \"center\", padding: \"80px 24px\" }},\n React.createElement(\"div\", { style: {\n fontFamily: font.head, fontWeight: 900, fontSize: 72,\n textTransform: \"uppercase\", color: C.blue, lineHeight: 0.9,\n }}, \"Vielen\", React.createElement(\"br\"), \"Dank. 🙏\"),\n React.createElement(\"p\", { style: { marginTop: 24, fontSize: 17, color: \"#444\", lineHeight: 1.6 }},\n \"Dein Feedback ist gespeichert.\", React.createElement(\"br\"),\n \"Doreen wertet alles aus und optimiert die Assistenten entsprechend.\"),\n React.createElement(\"p\", { style: { marginTop: 12, fontSize: 13, color: \"#999\" }},\n \"KI ist kein Nice-to-have. Sie ist ab jetzt Teil eurer Arbeitsweise.\"),\n React.createElement(\"button\", {\n onClick: () => { setF(emptyForm); setSubmitted(false); },\n style: {\n marginTop: 32, background: C.blue, color: \"white\",\n border: \"none\", padding: \"12px 28px\",\n fontFamily: font.head, fontWeight: 800, fontSize: 16,\n textTransform: \"uppercase\", cursor: \"pointer\", letterSpacing: \"0.08em\",\n }\n }, \"Weiteres Feedback eingeben\")\n );\n }\n\n function Q({ n, label, children }) {\n return React.createElement(\"div\", { style: { marginBottom: 28 }},\n React.createElement(\"label\", { style: { display: \"block\", fontWeight: 600, fontSize: 16, marginBottom: 10, lineHeight: 1.4 }},\n React.createElement(Tag, null, n), label),\n children\n );\n }\n\n return React.createElement(\"div\", { style: { maxWidth: 720, margin: \"0 auto\", padding: \"32px 20px 80px\" }},\n React.createElement(SectionTitle, { n: \"01\" }, \"Allgemeines\"),\n React.createElement(Q, { n: \"1\", label: \"Name und/oder Bereich im Betrieb\" },\n React.createElement(Textarea, { value: f.name, onChange: set(\"name\"), placeholder: \"z. B. Michi – Produktion …\", rows: 2 })),\n React.createElement(Q, { n: \"2\", label: \"Wie oft hast du die KI-Assistenten genutzt?\" },\n React.createElement(SelectInput, { value: f.freq, onChange: set(\"freq\"), options: FREQ_OPTS })),\n\n React.createElement(SectionTitle, { n: \"02\" }, \"Was hat funktioniert?\"),\n React.createElement(Q, { n: \"3\", label: \"Wie gut hat der Prozess insgesamt funktioniert? (1 = gar nicht · 5 = sehr gut)\" },\n React.createElement(ScaleInput, { value: f.gesamt, onChange: set(\"gesamt\") })),\n React.createElement(Q, { n: \"4\", label: \"Welche Assistenten haben dir am meisten geholfen? (Mehrfachauswahl)\" },\n React.createElement(CheckList, { options: ASSISTANTS, value: f.helpful, onChange: set(\"helpful\") })),\n React.createElement(Q, { n: \"5\", label: \"Was hat dich am meisten positiv überrascht?\" },\n React.createElement(Textarea, { value: f.positive, onChange: set(\"positive\"), placeholder: \"Was hast du nicht erwartet, das aber gut funktioniert hat? …\" })),\n\n React.createElement(SectionTitle, { n: \"03\" }, \"Was war schwierig?\"),\n React.createElement(Q, { n: \"6\", label: \"Wie leicht war die Integration in den Alltag? (1 = sehr schwer · 5 = sehr leicht)\" },\n React.createElement(ScaleInput, { value: f.integration, onChange: set(\"integration\") })),\n React.createElement(Q, { n: \"7\", label: \"Was hat nicht funktioniert oder war frustrierend?\" },\n React.createElement(Textarea, { value: f.problems, onChange: set(\"problems\"), placeholder: \"Konkrete Probleme, Fehler, unklare Abläufe …\" })),\n React.createElement(Q, { n: \"8\", label: \"Wo schadet die KI mehr als sie hilft?\" },\n React.createElement(Textarea, { value: f.hurts, onChange: set(\"hurts\"), placeholder: \"Bereiche, wo du lieber ohne KI arbeitest — und warum …\" })),\n\n React.createElement(SectionTitle, { n: \"04\" }, \"Ideen & Wünsche\"),\n React.createElement(Q, { n: \"9\", label: \"Welche Aufgabe kostet dich die meiste unnötige Zeit?\" },\n React.createElement(Textarea, { value: f.zeitfresser, onChange: set(\"zeitfresser\"), placeholder: \"Diese Aufgabe ärgert mich jede Woche …\" })),\n React.createElement(Q, { n: \"10\", label: \"Ideen für neue KI-Anwendungen beim Keksbäcker?\" },\n React.createElement(Textarea, { value: f.ideen, onChange: set(\"ideen\"), placeholder: \"Egal wie wild — schreib es auf …\" })),\n React.createElement(Q, { n: \"11\", label: \"Was brauchst du, um die KI besser nutzen zu können?\" },\n React.createElement(CheckList, { options: NEEDS, value: f.needs, onChange: set(\"needs\") })),\n\n React.createElement(SectionTitle, { n: \"05\" }, \"Abschluss\"),\n React.createElement(Q, { n: \"12\", label: \"Würdest du KI weiterempfehlen? (1 = nein · 5 = auf jeden Fall)\" },\n React.createElement(ScaleInput, { value: f.empfehlen, onChange: set(\"empfehlen\") })),\n React.createElement(Q, { n: \"13\", label: \"Noch etwas, das du loswerden möchtest?\" },\n React.createElement(Textarea, { value: f.freitext, onChange: set(\"freitext\"), placeholder: \"Freiraum für alles, was sonst nirgends reingepasst hat …\", rows: 4 })),\n\n React.createElement(\"div\", { style: {\n background: C.blue, padding: \"32px 36px\",\n display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\",\n gap: 20, flexWrap: \"wrap\", marginTop: 40,\n }},\n React.createElement(\"p\", { style: { color: \"white\", fontSize: 14, opacity: 0.8, maxWidth: 320, lineHeight: 1.5 }},\n \"Alle Antworten fließen direkt in die nächste Optimierungsrunde ein.\"),\n React.createElement(\"button\", {\n onClick: handleSubmit, disabled: loading,\n style: {\n background: C.accent, color: C.dark, border: \"none\",\n padding: \"14px 36px\", fontFamily: font.head, fontWeight: 800,\n fontSize: 18, textTransform: \"uppercase\", letterSpacing: \"0.08em\",\n cursor: loading ? \"wait\" : \"pointer\", opacity: loading ? 0.6 : 1,\n }\n }, loading ? \"Wird gespeichert …\" : \"Abschicken →\")\n )\n );\n}\n\n// ─── DASHBOARD helpers ──────────────────────────────────────────────────\nfunction avg(arr) {\n const v = arr.filter(Boolean);\n return v.length ? (v.reduce((a,b)=>a+b,0)/v.length).toFixed(1) : \"—\";\n}\n\nfunction countFreq(arr) {\n const m = {};\n arr.flat().forEach(v => { if(v) m[v] = (m[v]||0)+1; });\n return Object.entries(m).sort((a,b)=>b[1]-a[1]);\n}\n\nfunction Bar({ label, count, max }) {\n return React.createElement(\"div\", { style: { marginBottom: 10 }},\n React.createElement(\"div\", { style: { display: \"flex\", justifyContent: \"space-between\", marginBottom: 4 }},\n React.createElement(\"span\", { style: { fontSize: 13, fontWeight: 500 }}, label),\n React.createElement(\"span\", { style: { fontSize: 13, fontWeight: 700, color: C.blue }}, count + \"×\")),\n React.createElement(\"div\", { style: { background: C.gray, height: 10 }},\n React.createElement(\"div\", { style: { background: C.blue, height: \"100%\", width: `${(count/max)*100}%`, transition: \"width .4s\" }}))\n );\n}\n\nfunction ScoreGauge({ value, label, n }) {\n const pct = ((parseFloat(value)||0)/5)*100;\n const color = pct >= 70 ? \"#00CC66\" : pct >= 40 ? \"#FFAA00\" : \"#CC2200\";\n return React.createElement(\"div\", { style: { background: \"white\", border: `2px solid ${C.blue}`, padding: \"20px 24px\", flex: 1, minWidth: 140 }},\n React.createElement(\"div\", { style: { fontFamily: font.head, fontWeight: 900, fontSize: 48, color, lineHeight: 1 }}, value),\n React.createElement(\"div\", { style: { background: C.gray, height: 6, marginTop: 8 }},\n React.createElement(\"div\", { style: { background: color, height: \"100%\", width: `${pct}%` }})),\n React.createElement(\"div\", { style: { fontFamily: font.head, fontWeight: 700, fontSize: 11, letterSpacing: \"0.15em\",\n textTransform: \"uppercase\", color: C.dark, marginTop: 8 }}, label),\n React.createElement(\"div\", { style: { fontSize: 11, color: \"#888\" }}, `Ø von 5 · ${n} Antworten`)\n );\n}\n\n// ─── DASHBOARD ────────────────────────────────────────────────────────────\nfunction Dashboard({ responses, onBack }) {\n if (!responses.length) {\n return React.createElement(\"div\", { style: { padding: 60, textAlign: \"center\" }},\n React.createElement(\"div\", { style: { fontFamily: font.head, fontWeight: 900, fontSize: 40, textTransform: \"uppercase\", color: C.blue }},\n \"Noch keine Antworten.\"),\n React.createElement(\"p\", { style: { marginTop: 16, color: \"#666\" }},\n \"Teile den Fragebogen mit dem Team — dann erscheinen hier die Auswertungen.\"),\n React.createElement(\"button\", {\n onClick: onBack, style: { marginTop: 24, background: C.blue, color: \"white\", border:\"none\",\n padding:\"12px 28px\", fontFamily: font.head, fontWeight:800, fontSize:16,\n textTransform:\"uppercase\", cursor:\"pointer\", letterSpacing:\"0.08em\" }\n }, \"← Zum Fragebogen\")\n );\n }\n\n const n = responses.length;\n const gesamtAvg = avg(responses.map(r=>r.gesamt));\n const integrationAvg = avg(responses.map(r=>r.integration));\n const empfehlenAvg = avg(responses.map(r=>r.empfehlen));\n\n const freqCounts = countFreq(responses.map(r=>r.freq));\n const helpfulCounts = countFreq(responses.map(r=>r.helpful||[]));\n const needsCounts = countFreq(responses.map(r=>r.needs||[]));\n const maxHelpful = helpfulCounts[0]?.[1] || 1;\n const maxNeeds = needsCounts[0]?.[1] || 1;\n\n const textFields = [\n { label: \"Positive Überraschungen\", key: \"positive\" },\n { label: \"Probleme & Frustration\", key: \"problems\" },\n { label: \"Wo KI schadet\", key: \"hurts\" },\n { label: \"Zeitfresser\", key: \"zeitfresser\" },\n { label: \"Neue KI-Ideen\", key: \"ideen\" },\n { label: \"Freitext\", key: \"freitext\" },\n ];\n\n return React.createElement(\"div\", { style: { maxWidth: 860, margin: \"0 auto\", padding: \"32px 20px 80px\" }},\n // Header row\n React.createElement(\"div\", { style: { display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-end\", marginBottom: 32, flexWrap: \"wrap\", gap: 12 }},\n React.createElement(\"div\", null,\n React.createElement(\"div\", { style: { fontFamily: font.head, fontWeight: 900, fontSize: 48, textTransform: \"uppercase\", color: C.blue, lineHeight: 0.9 }}, \"Auswertung\"),\n React.createElement(\"div\", { style: { fontFamily: font.head, fontSize: 13, letterSpacing: \"0.15em\", textTransform: \"uppercase\", color: C.mid, marginTop: 8 }}, \"KI-Feedback · Der Keksbäcker Hamburg\")),\n React.createElement(\"button\", {\n onClick: onBack, style: { background: \"transparent\", border: `2px solid ${C.blue}`,\n color: C.blue, padding: \"8px 20px\", fontFamily: font.head, fontWeight: 800,\n fontSize: 14, textTransform: \"uppercase\", cursor: \"pointer\", letterSpacing: \"0.08em\" }\n }, \"← Fragebogen\")\n ),\n\n // KPI Row\n React.createElement(\"div\", { style: { display: \"flex\", gap: 12, flexWrap: \"wrap\", marginBottom: 32 }},\n React.createElement(\"div\", { style: { background: \"white\", border: `2px solid ${C.blue}`, padding: \"20px 24px\", flex: 1, minWidth: 140 }},\n React.createElement(\"div\", { style: { fontFamily: font.head, fontSize: 48, fontWeight: 900, color: C.blue, lineHeight: 1 }}, n),\n React.createElement(\"div\", { style: { fontFamily: font.head, fontWeight: 700, fontSize: 12, letterSpacing: \"0.15em\", textTransform: \"uppercase\", color: C.dark, marginTop: 6 }}, \"Antworten gesamt\")),\n React.createElement(ScoreGauge, { value: gesamtAvg, label: \"Gesamtzufriedenheit\", n }),\n React.createElement(ScoreGauge, { value: integrationAvg, label: \"Integrationsleichtigkeit\", n }),\n React.createElement(ScoreGauge, { value: empfehlenAvg, label: \"Weiterempfehlung\", n })\n ),\n\n // Nutzungshäufigkeit\n React.createElement(SectionTitle, { n: \"01\" }, \"Nutzungshäufigkeit\"),\n ...freqCounts.map(([label,count]) =>\n React.createElement(Bar, { key: label, label, count, max: freqCounts[0]?.[1]||1 })),\n\n // Hilfreichste Assistenten\n React.createElement(SectionTitle, { n: \"02\" }, \"Hilfreichste Assistenten\"),\n ...(helpfulCounts.length\n ? helpfulCounts.map(([label,count]) => React.createElement(Bar, { key: label, label, count, max: maxHelpful }))\n : [React.createElement(\"p\", { key: \"no-help\", style: { color:\"#888\", fontSize:14 }}, \"Noch keine Auswahl.\")]),\n\n // Needs\n React.createElement(SectionTitle, { n: \"03\" }, \"Was das Team noch braucht\"),\n ...(needsCounts.length\n ? needsCounts.map(([label,count]) => React.createElement(Bar, { key: label, label, count, max: maxNeeds }))\n : [React.createElement(\"p\", { key: \"no-needs\", style: { color:\"#888\", fontSize:14 }}, \"Noch keine Auswahl.\")]),\n\n // Zeitfresser & Ideen\n ...[\"zeitfresser\",\"ideen\"].flatMap(key => {\n const entries = responses.map(r=>r[key]).filter(Boolean);\n if (!entries.length) return [];\n const sectionLabel = key === \"zeitfresser\" ? \"Größte Zeitfresser\" : \"Neue KI-Ideen\";\n const sNum = key === \"zeitfresser\" ? \"04\" : \"05\";\n return [\n React.createElement(SectionTitle, { key: \"sec-\"+key, n: sNum }, sectionLabel),\n React.createElement(\"div\", { key: \"entries-\"+key, style: { display: \"flex\", flexDirection: \"column\", gap: 10 }},\n entries.map((e,i) =>\n React.createElement(\"div\", { key: i, style: {\n background: key===\"ideen\" ? \"#EAFF0022\" : \"white\",\n border: `2px solid ${key===\"ideen\" ? C.accent : C.blue}`,\n padding: \"12px 16px\", fontSize: 14, lineHeight: 1.5,\n }},\n key===\"ideen\" ? React.createElement(\"span\", { style: { fontWeight:700, marginRight:6, color:C.blue }}, \"💡\") : null,\n e\n )\n )\n )\n ];\n }),\n\n // Alle offenen Antworten\n React.createElement(SectionTitle, { n: \"06\" }, \"Alle offenen Antworten\"),\n ...textFields.flatMap(({ label, key }) => {\n const entries = responses.map(r => ({ name: r.name||\"Anonym\", text: r[key] })).filter(r=>r.text);\n if (!entries.length) return [];\n return [\n React.createElement(\"div\", { key: \"txt-\"+key, style: { marginBottom: 28 }},\n React.createElement(\"div\", { style: { fontFamily: font.head, fontWeight: 800, fontSize: 14,\n textTransform: \"uppercase\", letterSpacing: \"0.12em\", color: C.dark,\n marginBottom: 10, background: C.gray, padding: \"6px 12px\" }}, label),\n entries.map((e,i) =>\n React.createElement(\"div\", { key: i, style: { borderLeft: `3px solid ${C.blue}`,\n paddingLeft: 14, marginBottom: 10, fontSize: 14, lineHeight: 1.5 }},\n React.createElement(\"span\", { style: { fontWeight: 700, fontSize: 12, color: C.mid,\n textTransform: \"uppercase\", letterSpacing: \"0.08em\", marginRight: 8 }}, e.name),\n e.text\n )\n )\n )\n ];\n }),\n\n // Raw Table\n React.createElement(SectionTitle, { n: \"07\" }, \"Alle Einträge (Rohdaten)\"),\n React.createElement(\"div\", { style: { overflowX: \"auto\" }},\n React.createElement(\"table\", { style: { width: \"100%\", borderCollapse: \"collapse\", fontSize: 12 }},\n React.createElement(\"thead\", null,\n React.createElement(\"tr\", { style: { background: C.blue, color: \"white\" }},\n [\"#\",\"Name\",\"Datum\",\"Gesamt\",\"Integration\",\"Empfehlen\",\"Nutzung\"].map(h =>\n React.createElement(\"th\", { key: h, style: { padding:\"8px 12px\", textAlign:\"left\", fontFamily:font.head,\n fontWeight:700, letterSpacing:\"0.1em\", textTransform:\"uppercase\" }}, h)))),\n React.createElement(\"tbody\", null,\n responses.map((r,i) =>\n React.createElement(\"tr\", { key: r.id, style: { background: i%2===0?\"white\":C.white, borderBottom:`1px solid ${C.gray}` }},\n React.createElement(\"td\", { style: { padding:\"8px 12px\", color:\"#888\" }}, i+1),\n React.createElement(\"td\", { style: { padding:\"8px 12px\", fontWeight:600 }}, r.name||\"—\"),\n React.createElement(\"td\", { style: { padding:\"8px 12px\", color:\"#888\" }}, r.ts ? new Date(r.ts).toLocaleDateString(\"de-DE\") : \"—\"),\n React.createElement(\"td\", { style: { padding:\"8px 12px\", textAlign:\"center\", fontWeight:700, color:C.blue }}, r.gesamt||\"—\"),\n React.createElement(\"td\", { style: { padding:\"8px 12px\", textAlign:\"center\", fontWeight:700, color:C.blue }}, r.integration||\"—\"),\n React.createElement(\"td\", { style: { padding:\"8px 12px\", textAlign:\"center\", fontWeight:700, color:C.blue }}, r.empfehlen||\"—\"),\n React.createElement(\"td\", { style: { padding:\"8px 12px\" }}, r.freq||\"—\"))))\n )\n )\n );\n}\n\n// ─── HEADER ───────────────────────────────────────────────────────────────\nfunction Header({ view, setView, count }) {\n return React.createElement(\"div\", { style: { background: C.blue, color: \"white\", padding: \"40px 32px 36px\", position:\"relative\", overflow:\"hidden\" }},\n React.createElement(\"div\", { style: { position:\"absolute\", top:-60, right:-60, width:220, height:220,\n background:\"rgba(234,255,0,0.1)\", borderRadius:\"50%\" }}),\n React.createElement(\"div\", { style: { fontFamily:font.head, fontWeight:700, fontSize:12, letterSpacing:\"0.2em\",\n textTransform:\"uppercase\", color:C.accent, marginBottom:10 }},\n \"Der Keksbäcker Hamburg · KI-Implementierung 2026\"),\n React.createElement(\"div\", { style: { fontFamily:font.head, fontWeight:900,\n fontSize:\"clamp(36px, 8vw, 64px)\", textTransform:\"uppercase\", lineHeight:0.9, marginBottom:16 }},\n view === \"form\"\n ? [React.createElement(\"span\", { key: \"a\" }, \"KI-Feedback\"), React.createElement(\"br\", { key: \"b\" }), React.createElement(\"span\", { key: \"c\" }, \"Fragebogen\")]\n : [React.createElement(\"span\", { key: \"a\" }, \"Auswertung\"), React.createElement(\"br\", { key: \"b\" }), React.createElement(\"span\", { key: \"c\" }, \"Dashboard\")]),\n React.createElement(\"div\", { style: { display:\"flex\", gap:10, flexWrap:\"wrap\", marginTop:24 }},\n [\"form\",\"dashboard\"].map(v =>\n React.createElement(\"button\", {\n key: v, onClick: () => setView(v),\n style: {\n background: view===v ? C.accent : \"transparent\",\n color: view===v ? C.dark : \"white\",\n border: `2px solid ${view===v ? C.accent : \"rgba(255,255,255,0.4)\"}`,\n padding:\"8px 20px\", fontFamily:font.head, fontWeight:800, fontSize:13,\n textTransform:\"uppercase\", letterSpacing:\"0.1em\", cursor:\"pointer\",\n }\n }, v === \"form\" ? \"📋 Fragebogen\" : `📊 Auswertung ${count > 0 ? `(${count})` : \"\"}`)\n )\n )\n );\n}\n\n// ─── ROOT ─────────────────────────────────────────────────────────────────\nfunction App() {\n const [view, setView] = useState(\"form\");\n const [responses, setResponses] = useState([]);\n\n useEffect(() => {\n loadResponses().then(setResponses);\n }, []);\n\n const handleSubmit = async (entry) => {\n await submitResponse(entry);\n const updated = await loadResponses();\n setResponses(updated);\n };\n\n return React.createElement(\"div\", { style: { fontFamily:font.body, background:C.white, minHeight:\"100vh\", color:C.dark, margin: 0 }},\n React.createElement(Header, { view, setView, count: responses.length }),\n view === \"form\"\n ? React.createElement(SurveyForm, { onSubmit: handleSubmit })\n : React.createElement(Dashboard, { responses, onBack: () => setView(\"form\") }),\n React.createElement(\"div\", { style: { textAlign: \"center\", padding: \"20px\", fontSize: 12, color: \"#888\" }},\n React.createElement(\"a\", { href: \"/source\", style: { color: C.mid } }, \"Quellcode ansehen\"))\n );\n}\n\n// ─── Mount ────────────────────────────────────────────────────────────────\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(React.createElement(App));\n","createdAt",["D",1779283663331],"branchVersion","branchId","13095692-544f-11f1-93be-ee650bb23af1","id","130882da-544f-11f1-93be-ee650bb23af1","abfrage-tool",["D",1779283402366],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interaktives Abfrage-Tool zum Suchen und Filtern von Daten","imageUrl","1967e611-49ca-46d2-bfbc-3736b9dd8f76","pinnedFileId","2cfc4b04-544f-11f1-92c7-ee650bb23af1","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019e458d-23e6-72fa-b847-06f5666b4cd9","tursoName","130882da544f11f193beee650bb23af1","tursoHostname","130882da544f11f193beee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789492855745],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":106},"org",{"_104":103,"_105":106,"_107":106,"_19":60,"_108":109,"_110":32},"branch",{"_13":93,"_38":94,"_48":47,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":50,"_102":103},"isOwned",10,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","doreentandetzki","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_48":49,"_38":50,"_43":179,"_52":-5,"_53":32,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":30,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":180,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":181,"_88":182,"_90":183,"_92":32},"tree",[166,167,168],"files",[166,167,168],"counts",{"_156":67,"_157":142,"_158":67,"_159":160,"_161":162},"contents",[133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":150,"_38":151,"_36":152,"_138":-5,"_46":47,"_45":153,"_140":32,"_43":154,"_13":142,"_39":40,"_41":106,"_29":32,"_145":-5,"_33":155},{"_48":147,"_38":34,"_36":37,"_138":-5,"_46":47,"_45":14,"_140":32,"_43":148,"_13":67,"_39":40,"_41":42,"_29":32,"_145":-5,"_33":149},{"_48":136,"_38":137,"_36":62,"_138":-5,"_46":47,"_45":139,"_140":32,"_43":141,"_13":142,"_39":143,"_41":144,"_29":32,"_145":-5,"_33":146},"6d0b6d74-544f-11f1-9995-ee650bb23af1","main.tsx","parentId",4,"latest",["D",1779283553369],1,"http","import { Hono } from \"npm:hono@4\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { parseVal, readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\napp.onError((err) => Promise.reject(err));\n\n// ─── DB Setup ────────────────────────────────────────────────────────────\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ki_feedback (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT,\n bereich TEXT,\n freq TEXT,\n gesamt INTEGER DEFAULT 0,\n helpful TEXT DEFAULT '[]',\n positive TEXT,\n integration INTEGER DEFAULT 0,\n problems TEXT,\n hurts TEXT,\n zeitfresser TEXT,\n ideen TEXT,\n needs TEXT DEFAULT '[]',\n empfehlen INTEGER DEFAULT 0,\n freitext TEXT,\n ts TEXT DEFAULT (datetime('now'))\n)`);\n\n// ─── API: Get all responses ──────────────────────────────────────────────\napp.get(\"/api/responses\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM ki_feedback ORDER BY id DESC\");\n const rows = result.rows.map((r: any) => ({\n ...r,\n helpful: JSON.parse(r.helpful || \"[]\"),\n needs: JSON.parse(r.needs || \"[]\"),\n }));\n return c.json(rows);\n});\n\n// ─── API: Submit response ────────────────────────────────────────────────\napp.post(\"/api/responses\", async (c) => {\n const body = await c.req.json();\n await sqlite.execute({\n sql: `INSERT INTO ki_feedback (name, bereich, freq, gesamt, helpful, positive, integration, problems, hurts, zeitfresser, ideen, needs, empfehlen, freitext)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n body.name || \"\",\n body.bereich || \"\",\n body.freq || \"\",\n body.gesamt || 0,\n JSON.stringify(body.helpful || []),\n body.positive || \"\",\n body.integration || 0,\n body.problems || \"\",\n body.hurts || \"\",\n body.zeitfresser || \"\",\n body.ideen || \"\",\n JSON.stringify(body.needs || []),\n body.empfehlen || 0,\n body.freitext || \"\",\n ],\n });\n return c.json({ ok: true });\n});\n\n// ─── Source ──────────────────────────────────────────────────────────────\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Frontend ────────────────────────────────────────────────────────────\napp.get(\"*\", async (c) => {\n const html = `\n\n\n \n \n 🍪 KI-Feedback · Der Keksbäcker Hamburg\n \n \n\n\n

\n \n\n`;\n return c.html(html);\n});\n\nexport default app.fetch;\n","label",[137],"ae960006-544f-11f1-a645-ee650bb23af1",["D",1779283663331],[34],"53116db0-544f-11f1-a4b3-ee650bb23af1","KI_Integration.ts","4c03a628-544f-11f1-b118-ee650bb23af1",3,["D",1779283509788],[151],"pulls","branches","forks","envVars",{"_163":67,"_165":67},"connections",{"_163":67,"_164":67},"count","unfilledCount","emptyCount",{"_48":150,"_38":151,"_36":152,"_138":-5,"_46":47,"_45":153,"_140":32,"_43":176,"_13":142,"_39":40,"_41":106,"_29":32,"_145":-5,"_170":177,"_33":178},{"_48":147,"_38":34,"_36":37,"_138":-5,"_46":47,"_45":14,"_140":32,"_43":173,"_13":67,"_39":40,"_41":42,"_29":32,"_145":-5,"_170":174,"_33":175},{"_48":136,"_38":137,"_36":62,"_138":-5,"_46":47,"_45":139,"_140":32,"_43":169,"_13":142,"_39":143,"_41":144,"_29":32,"_145":-5,"_170":171,"_33":172},["D",1779283553369],"children",[],[137],["D",1779283663331],[],[34],["D",1779283509788],[],[151],["D",1779283402366],["D",1789492855745],{"_104":103,"_111":106},{"_104":103,"_105":106,"_107":106,"_19":60,"_108":109,"_110":32},{"_13":93,"_38":94,"_48":47,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":50,"_102":103},"ctx",{"_86":-5,"_130":217,"_218":219,"_220":221,"_222":32,"_223":32,"_224":32,"_225":30,"_226":-5,"_227":-7,"_228":-7,"_229":67,"_230":32,"_231":32,"_232":-5,"_233":32,"_234":32,"_235":32,"_236":-5},"ENV",{"_188":189,"_190":191,"_192":94,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5