[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_185":186,"_187":188},"routes/_app.x.$handle.$name",{"_104":103,"_37":49,"_112":94,"_32":106,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":30,"_126":127,"_128":63,"_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",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_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":30},"version",8,"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":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":39,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","frontend.tsx","latestPath","fileId","fb500680-544f-11f1-8c89-ee650bb23af1","name","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport 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: any) {\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 ────────────────────────────────────────────────\nconst Tag = ({ children, color = C.blue }: any) => (\n {children}\n);\n\nconst SectionTitle = ({ n, children }: any) => (\n

\n {n}\n {children}\n

\n);\n\nconst ScaleInput = ({ value, onChange }: any) => (\n

\n {[1,2,3,4,5].map(n => (\n \n ))}\n \n {value ? `${value} von 5` : \"—\"}\n \n

\n);\n\nconst CheckList = ({ options, value = [], onChange }: any) => (\n

\n {options.map((opt: string) => {\n const on = value.includes(opt);\n return (\n \n

onChange(on ? value.filter((v: string) => 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

\n {opt}\n \n );\n })}\n

\n);\n\nconst Textarea = ({ value, onChange, placeholder, rows = 3 }: any) => (\n onChange(e.target.value)}\n placeholder={placeholder} rows={rows}\n style={{\n width: \"100%\", border: `2px solid ${C.blue}`,\n padding: \"10px 12px\", fontFamily: font.body, fontSize: 15,\n resize: \"vertical\" as const, outline: \"none\", background: \"white\",\n color: C.dark, lineHeight: 1.5, boxSizing: \"border-box\" as const,\n }}\n />\n);\n\nconst SelectInput = ({ value, onChange, options }: any) => (\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: [] as string[], positive: \"\",\n integration: 0, problems: \"\", hurts: \"\",\n zeitfresser: \"\", ideen: \"\", needs: [] as string[],\n empfehlen: 0, freitext: \"\",\n};\n\n// ─── SURVEY FORM ──────────────────────────────────────────────────────────\nfunction SurveyForm({ onSubmit }: any) {\n const [f, setF] = useState(emptyForm);\n const [submitted, setSubmitted] = useState(false);\n const [loading, setLoading] = useState(false);\n\n const set = (key: string) => (val: any) => 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) return (\n

\n Vielen
Dank. 🙏\n

\n Dein Feedback ist gespeichert.
\n Doreen wertet alles aus und optimiert die Assistenten entsprechend.\n

\n KI ist kein Nice-to-have. Sie ist ab jetzt Teil eurer Arbeitsweise.\n

\n \n

\n );\n\n const Q = ({ n, label, children }: any) => (\n

\n \n {n}{label}\n \n {children}\n

\n );\n\n return (\n

\n Allgemeines\n \n

\n      </Q>\n      <Q n=\"2\" label=\"Wie oft hast du die KI-Assistenten genutzt?\">\n        <SelectInput value={f.freq} onChange={set(\"freq\")} options={FREQ_OPTS}/>\n      </Q>\n\n      <SectionTitle n=\"02\">Was hat funktioniert?</SectionTitle>\n      <Q n=\"3\" label=\"Wie gut hat der Prozess insgesamt funktioniert? (1 = gar nicht · 5 = sehr gut)\">\n        <ScaleInput value={f.gesamt} onChange={set(\"gesamt\")}/>\n      </Q>\n      <Q n=\"4\" label=\"Welche Assistenten haben dir am meisten geholfen? (Mehrfachauswahl)\">\n        <CheckList options={ASSISTANTS} value={f.helpful} onChange={set(\"helpful\")}/>\n      </Q>\n      <Q n=\"5\" label=\"Was hat dich am meisten positiv überrascht?\">\n        <Textarea value={f.positive} onChange={set(\"positive\")} placeholder=\"Was hast du nicht erwartet, das aber gut funktioniert hat? …\"/>\n      </Q>\n\n      <SectionTitle n=\"03\">Was war schwierig?</SectionTitle>\n      <Q n=\"6\" label=\"Wie leicht war die Integration in den Alltag? (1 = sehr schwer · 5 = sehr leicht)\">\n        <ScaleInput value={f.integration} onChange={set(\"integration\")}/>\n      </Q>\n      <Q n=\"7\" label=\"Was hat nicht funktioniert oder war frustrierend?\">\n        <Textarea value={f.problems} onChange={set(\"problems\")} placeholder=\"Konkrete Probleme, Fehler, unklare Abläufe …\"/>\n      </Q>\n      <Q n=\"8\" label=\"Wo schadet die KI mehr als sie hilft?\">\n        <Textarea value={f.hurts} onChange={set(\"hurts\")} placeholder=\"Bereiche, wo du lieber ohne KI arbeitest — und warum …\"/>\n      </Q>\n\n      <SectionTitle n=\"04\">Ideen & Wünsche</SectionTitle>\n      <Q n=\"9\" label=\"Welche Aufgabe kostet dich die meiste unnötige Zeit?\">\n        <Textarea value={f.zeitfresser} onChange={set(\"zeitfresser\")} placeholder=\"Diese Aufgabe ärgert mich jede Woche …\"/>\n      </Q>\n      <Q n=\"10\" label=\"Ideen für neue KI-Anwendungen beim Keksbäcker?\">\n        <Textarea value={f.ideen} onChange={set(\"ideen\")} placeholder=\"Egal wie wild — schreib es auf …\"/>\n      </Q>\n      <Q n=\"11\" label=\"Was brauchst du, um die KI besser nutzen zu können?\">\n        <CheckList options={NEEDS} value={f.needs} onChange={set(\"needs\")}/>\n      </Q>\n\n      <SectionTitle n=\"05\">Abschluss</SectionTitle>\n      <Q n=\"12\" label=\"Würdest du KI weiterempfehlen? (1 = nein · 5 = auf jeden Fall)\">\n        <ScaleInput value={f.empfehlen} onChange={set(\"empfehlen\")}/>\n      </Q>\n      <Q n=\"13\" label=\"Noch etwas, das du loswerden möchtest?\">\n        <Textarea value={f.freitext} onChange={set(\"freitext\")} placeholder=\"Freiraum für alles, was sonst nirgends reingepasst hat …\" rows={4}/>\n      </Q>\n\n      <div style={{\n        background: C.blue, padding: \"32px 36px\",\n        display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\",\n        gap: 20, flexWrap: \"wrap\" as const, marginTop: 40,\n      }}>\n        <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        </p>\n        <button onClick={handleSubmit} disabled={loading} style={{\n          background: C.accent, color: C.dark, border: \"none\",\n          padding: \"14px 36px\", fontFamily: font.head, fontWeight: 800,\n          fontSize: 18, textTransform: \"uppercase\" as const, letterSpacing: \"0.08em\",\n          cursor: loading ? \"wait\" : \"pointer\", opacity: loading ? 0.6 : 1,\n        }}>{loading ? \"Wird gespeichert …\" : \"Abschicken →\"}</button>\n      </div>\n    </div>\n  );\n}\n\n// ─── DASHBOARD helpers ──────────────────────────────────────────────────\nfunction avg(arr: number[]) {\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: any[]) {\n  const m: Record<string, number> = {};\n  arr.flat().forEach((v: string) => { if(v) m[v] = (m[v]||0)+1; });\n  return Object.entries(m).sort((a,b)=>b[1]-a[1]);\n}\n\nconst Bar = ({ label, count, max }: any) => (\n  <div style={{ marginBottom: 10 }}>\n    <div style={{ display: \"flex\", justifyContent: \"space-between\", marginBottom: 4 }}>\n      <span style={{ fontSize: 13, fontWeight: 500 }}>{label}</span>\n      <span style={{ fontSize: 13, fontWeight: 700, color: C.blue }}>{count}×</span>\n    </div>\n    <div style={{ background: C.gray, height: 10 }}>\n      <div style={{ background: C.blue, height: \"100%\", width: `${(count/max)*100}%`, transition: \"width .4s\" }}/>\n    </div>\n  </div>\n);\n\nconst ScoreGauge = ({ value, label, n }: any) => {\n  const pct = ((parseFloat(value)||0)/5)*100;\n  const color = pct >= 70 ? \"#00CC66\" : pct >= 40 ? \"#FFAA00\" : \"#CC2200\";\n  return (\n    <div style={{ background: \"white\", border: `2px solid ${C.blue}`, padding: \"20px 24px\", flex: 1, minWidth: 140 }}>\n      <div style={{ fontFamily: font.head, fontWeight: 900, fontSize: 48, color, lineHeight: 1 }}>{value}</div>\n      <div style={{ background: C.gray, height: 6, marginTop: 8 }}>\n        <div style={{ background: color, height: \"100%\", width: `${pct}%` }}/>\n      </div>\n      <div style={{ fontFamily: font.head, fontWeight: 700, fontSize: 11, letterSpacing: \"0.15em\",\n        textTransform: \"uppercase\" as const, color: C.dark, marginTop: 8 }}>{label}</div>\n      <div style={{ fontSize: 11, color: \"#888\" }}>Ø von 5 · {n} Antworten</div>\n    </div>\n  );\n};\n\n// ─── DASHBOARD ────────────────────────────────────────────────────────────\nfunction Dashboard({ responses, onBack }: any) {\n  if (!responses.length) return (\n    <div style={{ padding: 60, textAlign: \"center\" as const }}>\n      <div style={{ fontFamily: font.head, fontWeight: 900, fontSize: 40, textTransform: \"uppercase\" as const, color: C.blue }}>\n        Noch keine Antworten.\n      </div>\n      <p style={{ marginTop: 16, color: \"#666\" }}>Teile den Fragebogen mit dem Team — dann erscheinen hier die Auswertungen.</p>\n      <button 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\" as const, cursor:\"pointer\", letterSpacing:\"0.08em\" }}>← Zum Fragebogen</button>\n    </div>\n  );\n\n  const n = responses.length;\n  const gesamtAvg = avg(responses.map((r: any) => r.gesamt));\n  const integrationAvg = avg(responses.map((r: any) => r.integration));\n  const empfehlenAvg = avg(responses.map((r: any) => r.empfehlen));\n\n  const freqCounts = countFreq(responses.map((r: any) => r.freq));\n  const helpfulCounts = countFreq(responses.map((r: any) => r.helpful || []));\n  const needsCounts = countFreq(responses.map((r: any) => 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 (\n    <div style={{ maxWidth: 860, margin: \"0 auto\", padding: \"32px 20px 80px\" }}>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-end\", marginBottom: 32, flexWrap: \"wrap\" as const, gap: 12 }}>\n        <div>\n          <div style={{ fontFamily: font.head, fontWeight: 900, fontSize: 48, textTransform: \"uppercase\" as const, color: C.blue, lineHeight: 0.9 }}>Auswertung</div>\n          <div style={{ fontFamily: font.head, fontSize: 13, letterSpacing: \"0.15em\", textTransform: \"uppercase\" as const, color: C.mid, marginTop: 8 }}>KI-Feedback · Der Keksbäcker Hamburg</div>\n        </div>\n        <button 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\" as const, cursor: \"pointer\", letterSpacing: \"0.08em\" }}>\n          ← Fragebogen\n        </button>\n      </div>\n\n      {/* KPI Row */}\n      <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" as const, marginBottom: 32 }}>\n        <div style={{ background: \"white\", border: `2px solid ${C.blue}`, padding: \"20px 24px\", flex: 1, minWidth: 140 }}>\n          <div style={{ fontFamily: font.head, fontSize: 48, fontWeight: 900, color: C.blue, lineHeight: 1 }}>{n}</div>\n          <div style={{ fontFamily: font.head, fontWeight: 700, fontSize: 12, letterSpacing: \"0.15em\", textTransform: \"uppercase\" as const, color: C.dark, marginTop: 6 }}>Antworten gesamt</div>\n        </div>\n        <ScoreGauge value={gesamtAvg} label=\"Gesamtzufriedenheit\" n={n}/>\n        <ScoreGauge value={integrationAvg} label=\"Integrationsleichtigkeit\" n={n}/>\n        <ScoreGauge value={empfehlenAvg} label=\"Weiterempfehlung\" n={n}/>\n      </div>\n\n      {/* Nutzungshäufigkeit */}\n      <SectionTitle n=\"01\">Nutzungshäufigkeit</SectionTitle>\n      {freqCounts.map(([label,count]) => (\n        <Bar key={label} label={label} count={count} max={freqCounts[0]?.[1]||1}/>\n      ))}\n\n      {/* Hilfreichste Assistenten */}\n      <SectionTitle n=\"02\">Hilfreichste Assistenten</SectionTitle>\n      {helpfulCounts.length ? helpfulCounts.map(([label,count]) => (\n        <Bar key={label} label={label} count={count} max={maxHelpful}/>\n      )) : <p style={{ color:\"#888\", fontSize:14 }}>Noch keine Auswahl.</p>}\n\n      {/* Needs */}\n      <SectionTitle n=\"03\">Was das Team noch braucht</SectionTitle>\n      {needsCounts.length ? needsCounts.map(([label,count]) => (\n        <Bar key={label} label={label} count={count} max={maxNeeds}/>\n      )) : <p style={{ color:\"#888\", fontSize:14 }}>Noch keine Auswahl.</p>}\n\n      {/* Zeitfresser & Ideen */}\n      {([\"zeitfresser\",\"ideen\"] as const).map(key => {\n        const entries = responses.map((r: any) => r[key]).filter(Boolean);\n        if (!entries.length) return null;\n        const sectionLabel = key === \"zeitfresser\" ? \"Größte Zeitfresser\" : \"Neue KI-Ideen\";\n        return (\n          <div key={key}>\n            <SectionTitle n={key === \"zeitfresser\" ? \"04\" : \"05\"}>{sectionLabel}</SectionTitle>\n            <div style={{ display: \"flex\", flexDirection: \"column\" as const, gap: 10 }}>\n              {entries.map((e: string, i: number) => (\n                <div key={i} style={{ 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                  {key===\"ideen\" && <span style={{ fontWeight:700, marginRight:6, color:C.blue }}>💡</span>}\n                  {e}\n                </div>\n              ))}\n            </div>\n          </div>\n        );\n      })}\n\n      {/* Alle offenen Antworten */}\n      <SectionTitle n=\"06\">Alle offenen Antworten</SectionTitle>\n      {textFields.map(({ label, key }) => {\n        const entries = responses.map((r: any) => ({ name: r.name||\"Anonym\", text: r[key] })).filter((r: any) => r.text);\n        if (!entries.length) return null;\n        return (\n          <div key={key} style={{ marginBottom: 28 }}>\n            <div style={{ fontFamily: font.head, fontWeight: 800, fontSize: 14,\n              textTransform: \"uppercase\" as const, letterSpacing: \"0.12em\", color: C.dark,\n              marginBottom: 10, background: C.gray, padding: \"6px 12px\" }}>{label}</div>\n            {entries.map((e: any, i: number) => (\n              <div key={i} style={{ borderLeft: `3px solid ${C.blue}`,\n                paddingLeft: 14, marginBottom: 10, fontSize: 14, lineHeight: 1.5 }}>\n                <span style={{ fontWeight: 700, fontSize: 12, color: C.mid,\n                  textTransform: \"uppercase\" as const, letterSpacing: \"0.08em\", marginRight: 8 }}>{e.name}</span>\n                {e.text}\n              </div>\n            ))}\n          </div>\n        );\n      })}\n\n      {/* Raw Table */}\n      <SectionTitle n=\"07\">Alle Einträge (Rohdaten)</SectionTitle>\n      <div style={{ overflowX: \"auto\" as const }}>\n        <table style={{ width: \"100%\", borderCollapse: \"collapse\" as const, fontSize: 12 }}>\n          <thead>\n            <tr style={{ background: C.blue, color: \"white\" }}>\n              {[\"#\",\"Name\",\"Datum\",\"Gesamt\",\"Integration\",\"Empfehlen\",\"Nutzung\"].map(h => (\n                <th key={h} style={{ padding:\"8px 12px\", textAlign:\"left\" as const, fontFamily: font.head,\n                  fontWeight:700, letterSpacing:\"0.1em\", textTransform:\"uppercase\" as const }}>{h}</th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {responses.map((r: any, i: number) => (\n              <tr key={r.id} style={{ background: i%2===0?\"white\":C.white, borderBottom:`1px solid ${C.gray}` }}>\n                <td style={{ padding:\"8px 12px\", color:\"#888\" }}>{i+1}</td>\n                <td style={{ padding:\"8px 12px\", fontWeight:600 }}>{r.name||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\", color:\"#888\" }}>{r.ts ? new Date(r.ts).toLocaleDateString(\"de-DE\") : \"—\"}</td>\n                <td style={{ padding:\"8px 12px\", textAlign:\"center\" as const, fontWeight:700, color:C.blue }}>{r.gesamt||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\", textAlign:\"center\" as const, fontWeight:700, color:C.blue }}>{r.integration||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\", textAlign:\"center\" as const, fontWeight:700, color:C.blue }}>{r.empfehlen||\"—\"}</td>\n                <td style={{ padding:\"8px 12px\" }}>{r.freq||\"—\"}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n\n// ─── HEADER ───────────────────────────────────────────────────────────────\nfunction Header({ view, setView, count }: any) {\n  return (\n    <div style={{ background: C.blue, color: \"white\", padding: \"40px 32px 36px\", position:\"relative\" as const, overflow:\"hidden\" }}>\n      <div style={{ position:\"absolute\" as const, top:-60, right:-60, width:220, height:220,\n        background:\"rgba(234,255,0,0.1)\", borderRadius:\"50%\" }}/>\n      <div style={{ fontFamily: font.head, fontWeight:700, fontSize:12, letterSpacing:\"0.2em\",\n        textTransform:\"uppercase\" as const, color:C.accent, marginBottom:10 }}>\n        Der Keksbäcker Hamburg · KI-Implementierung 2026\n      </div>\n      <div style={{ fontFamily: font.head, fontWeight:900,\n        fontSize:\"clamp(36px, 8vw, 64px)\", textTransform:\"uppercase\" as const, lineHeight:0.9, marginBottom:16 }}>\n        {view === \"form\" ? <>KI-Feedback<br/>Fragebogen</> : <>Auswertung<br/>Dashboard</>}\n      </div>\n      <div style={{ display:\"flex\", gap:10, flexWrap:\"wrap\" as const, marginTop:24 }}>\n        {([\"form\",\"dashboard\"] as const).map(v => (\n          <button key={v} onClick={() => setView(v)} 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\" as const, letterSpacing:\"0.1em\", cursor:\"pointer\",\n          }}>\n            {v === \"form\" ? \"📋 Fragebogen\" : `📊 Auswertung ${count > 0 ? `(${count})` : \"\"}`}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ─── ROOT APP ─────────────────────────────────────────────────────────────\nfunction App() {\n  const [view, setView] = useState<\"form\"|\"dashboard\">(\"form\");\n  const [responses, setResponses] = useState<any[]>([]);\n\n  useEffect(() => {\n    loadResponses().then(setResponses);\n  }, []);\n\n  const handleSubmit = async (entry: any) => {\n    await submitResponse(entry);\n    const updated = await loadResponses();\n    setResponses(updated);\n  };\n\n  return (\n    <div style={{ fontFamily: font.body, background: C.white, minHeight:\"100vh\", color: C.dark, margin: 0 }}>\n      <Header view={view} setView={setView} count={responses.length}/>\n      {view === \"form\"\n        ? <SurveyForm onSubmit={handleSubmit}/>\n        : <Dashboard responses={responses} onBack={() => setView(\"form\")}/>\n      }\n      <div style={{ textAlign: \"center\" as const, padding: \"20px\", fontSize: 12, color: \"#888\" }}>\n        <a href=\"/source\" style={{ color: C.mid }}>Quellcode ansehen</a>\n      </div>\n    </div>\n  );\n}\n\n// ─── Mount ────────────────────────────────────────────────────────────────\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(<App/>);\n","createdAt",["D",1779283791072],"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",true,"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":59,"_108":109,"_110":30},"branch",{"_13":93,"_37":94,"_47":46,"_95":48,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":49,"_102":103},"isOwned",10,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","doreentandetzki","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_47":48,"_37":49,"_42":180,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":181,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":182,"_88":183,"_90":184,"_92":30},"tree",[167,168,169],"files",[167,168,169],"counts",{"_157":67,"_158":155,"_159":67,"_160":161,"_162":163},"contents",[133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":150,"_37":151,"_35":152,"_138":-5,"_45":46,"_44":153,"_140":30,"_42":154,"_13":155,"_38":39,"_40":106,"_29":30,"_145":-5,"_32":156},{"_47":147,"_37":33,"_35":36,"_138":-5,"_45":46,"_44":14,"_140":63,"_42":148,"_13":67,"_38":39,"_40":41,"_29":30,"_145":-5,"_32":149},{"_47":136,"_37":137,"_35":61,"_138":-5,"_45":46,"_44":139,"_140":30,"_42":141,"_13":142,"_38":143,"_40":144,"_29":30,"_145":-5,"_32":146},"bb018bf8-544f-11f1-a042-ee650bb23af1","main.tsx","parentId",7,"latest",["D",1779283684166],2,"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// ─── Serve frontend files ────────────────────────────────────────────────\napp.get(\"/frontend.tsx\", async (c) => {\n  const { serveFile } = await import(\"https://esm.town/v/std/utils/index.ts\");\n  return serveFile(\"./frontend.tsx\", import.meta.url);\n});\n\n// ─── Frontend ────────────────────────────────────────────────────────────\napp.get(\"*\", async (c) => {\n  const { httpEndpoint } = await import(\"https://esm.town/v/std/utils/index.ts\");\n  const frontendUrl = httpEndpoint(\"./main.tsx\", import.meta.url) + \"/frontend.tsx\";\n  const html = `<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>🍪 KI-Feedback · Der Keksbäcker Hamburg</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;600&display=swap\" rel=\"stylesheet\" />\n  <script src=\"https://esm.town/v/std/catch\"></script>\n  <style>body{margin:0}</style>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\" src=\"${frontendUrl}\"></script>\n</body>\n</html>`;\n  return c.html(html);\n});\n\nexport default app.fetch;\n","label",[137],"fb5005e0-544f-11f1-8c89-ee650bb23af1",["D",1779283791072],[33],"53116db0-544f-11f1-a4b3-ee650bb23af1","KI_Integration.ts","4c03a628-544f-11f1-b118-ee650bb23af1",3,["D",1779283509788],1,[151],"pulls","branches","forks","envVars",{"_164":67,"_166":67},"connections",{"_164":67,"_165":67},"count","unfilledCount","emptyCount",{"_47":150,"_37":151,"_35":152,"_138":-5,"_45":46,"_44":153,"_140":30,"_42":177,"_13":155,"_38":39,"_40":106,"_29":30,"_145":-5,"_171":178,"_32":179},{"_47":147,"_37":33,"_35":36,"_138":-5,"_45":46,"_44":14,"_140":63,"_42":174,"_13":67,"_38":39,"_40":41,"_29":30,"_145":-5,"_171":175,"_32":176},{"_47":136,"_37":137,"_35":61,"_138":-5,"_45":46,"_44":139,"_140":30,"_42":170,"_13":142,"_38":143,"_40":144,"_29":30,"_145":-5,"_171":172,"_32":173},["D",1779283684166],"children",[],[137],["D",1779283791072],[],[33],["D",1779283509788],[],[151],["D",1779283402366],["D",1789492855745],{"_104":103,"_111":106},{"_104":103,"_105":106,"_107":106,"_19":59,"_108":109,"_110":30},{"_13":93,"_37":94,"_47":46,"_95":48,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":49,"_102":103},"ctx",{"_86":-5,"_130":218,"_219":220,"_221":222,"_223":30,"_224":30,"_225":30,"_226":63,"_227":-5,"_228":-7,"_229":-7,"_230":67,"_231":30,"_232":30,"_233":-5,"_234":30,"_235":30,"_236":30,"_237":-5},"ENV",{"_189":190,"_191":192,"_193":94,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217},"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"]
</article></body></html>

Diff · v8