[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_323":324,"_325":326},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",38,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/LocationsTab.tsx","latestPath","fileId","d773dee8-7e71-11f1-8792-1607ee4eb77e","name","LocationsTab.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Location } from \"../../shared/types.ts\";\nimport { api, btnPrimary, card, input, PhotoInput } from \"./lib.tsx\";\n\nconst EMPTY = { code: \"\", name: \"\", note: \"\", photo_key: null as string | null };\n\nexport function LocationsTab() {\n const [locations, setLocations] = useState([]);\n const [adding, setAdding] = useState(false);\n const [form, setForm] = useState(EMPTY);\n const [saving, setSaving] = useState(false);\n\n const load = () => api(\"/api/locations\").then(setLocations);\n useEffect(() => { load(); }, []);\n\n return (\n

\n \n\n {adding && (\n {\n e.preventDefault();\n setSaving(true);\n try {\n await api(\"/api/locations\", { method: \"POST\", body: JSON.stringify(form) });\n setForm(EMPTY);\n setAdding(false);\n await load();\n } catch (err) {\n alert(String(err));\n } finally {\n setSaving(false);\n }\n }}\n >\n setForm({ ...form, code: e.target.value.toUpperCase() })}\n placeholder=\"รหัสตำแหน่ง * เช่น A-01-2 (ชั้น A แถว 01 ช่อง 2)\" />\n setForm({ ...form, name: e.target.value })}\n placeholder=\"ชื่อ * เช่น ตู้เครื่องมือ ชั้นบน ช่องซ้าย\" />\n

setForm({ ...form, note: e.target.value })}\n            placeholder=\"หมายเหตุ\" />\n          <PhotoInput photoKey={form.photo_key} onChange={(k) => setForm({ ...form, photo_key: k })} />\n          <button disabled={saving} className={btnPrimary}>\n            {saving ? \"กำลังบันทึก…\" : \"บันทึก\"}\n          </button>\n        </form>\n      )}\n\n      <div className=\"text-xs text-slate-400 px-1\">ทั้งหมด {locations.length} ตำแหน่ง</div>\n      {locations.map((loc) => (\n        <div key={loc.id} className={`${card} p-3 flex gap-3 items-center`}>\n          {loc.photo_key ? (\n            <img src={`/api/photos/${loc.photo_key}`} className=\"w-14 h-14 object-cover rounded-xl\" loading=\"lazy\" />\n          ) : (\n            <div className=\"w-14 h-14 bg-violet-50 rounded-xl flex items-center justify-center text-violet-300\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" className=\"w-6 h-6\">\n                <path d=\"M3 3h18v6H3zM3 15h18v6H3zM7 6h.01M7 18h.01\" />\n              </svg>\n            </div>\n          )}\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"font-mono text-sm font-bold text-indigo-600\">{loc.code}</div>\n            <div className=\"text-sm font-medium text-slate-700 truncate\">{loc.name}</div>\n            <div className=\"text-[11px] text-slate-400\">{loc.item_count ?? 0} ชิ้น{loc.note ? ` · ${loc.note}` : \"\"}</div>\n          </div>\n          <button\n            className=\"text-rose-400 hover:text-rose-600 p-2\"\n            onClick={async () => {\n              if (confirm(`ลบตำแหน่ง ${loc.code}? ของในตำแหน่งนี้จะกลายเป็น \"ไม่กำหนดตำแหน่ง\"`)) {\n                await api(`/api/locations/${loc.code}`, { method: \"DELETE\" });\n                await load();\n              }\n            }}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4\">\n              <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\" />\n            </svg>\n          </button>\n        </div>\n      ))}\n    </div>\n  );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Location } from \"../../shared/types.ts\";\nimport { api, btnPrimary, card, input, PhotoInput, Zoomable, ZONE_COLORS } from \"./lib.tsx\";\n\nconst EMPTY = { code: \"\", name: \"\", note: \"\", photo_key: null as string | null, color: null as string | null };\n\nfunction ColorPicker(props: { value: string | null; onChange: (c: string | null) => void }) {\n  return (\n    <div>\n      <div className=\"text-xs text-slate-400 mb-1.5\">สีประจำตำแหน่ง (แสดงบนป้าย QR ช่วยให้จำโซนง่าย)</div>\n      <div className=\"flex gap-1.5 flex-wrap\">\n        <button type=\"button\" onClick={() => props.onChange(null)}\n          className={`w-8 h-8 rounded-full border-2 flex items-center justify-center text-slate-400 text-xs ${\n            props.value === null ? \"border-indigo-500 ring-2 ring-indigo-200\" : \"border-slate-200\"\n          }`}>\n          —\n        </button>\n        {ZONE_COLORS.map((c) => (\n          <button key={c.value} type=\"button\" title={c.name} onClick={() => props.onChange(c.value)}\n            className={`w-8 h-8 rounded-full border-2 transition-transform ${\n              props.value === c.value ? \"border-slate-800 scale-110 ring-2 ring-slate-300\" : \"border-white\"\n            }`}\n            style={{ backgroundColor: c.value }} />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport function LocationsTab() {\n  const [locations, setLocations] = useState<Location[]>([]);\n  const [adding, setAdding] = useState(false);\n  const [form, setForm] = useState(EMPTY);\n  const [saving, setSaving] = useState(false);\n  const [editColor, setEditColor] = useState<string | null>(null); // location code ที่กำลังแก้สี\n\n  const load = () => api<Location[]>(\"/api/locations\").then(setLocations);\n  useEffect(() => { load(); }, []);\n\n  return (\n    <div className=\"space-y-3\">\n      <button onClick={() => setAdding(!adding)} className={`${btnPrimary} w-full !py-3`}>\n        {adding ? \"ยกเลิก\" : \"＋ เพิ่มตำแหน่งเก็บ\"}\n      </button>\n\n      {adding && (\n        <form\n          className={`${card} p-4 space-y-2.5`}\n          onSubmit={async (e) => {\n            e.preventDefault();\n            setSaving(true);\n            try {\n              await api(\"/api/locations\", { method: \"POST\", body: JSON.stringify(form) });\n              setForm(EMPTY);\n              setAdding(false);\n              await load();\n            } catch (err) {\n              alert(String(err));\n            } finally {\n              setSaving(false);\n            }\n          }}\n        >\n          <input required autoFocus className={`${input} font-mono`} value={form.code}\n            onChange={(e) => setForm({ ...form, code: e.target.value.toUpperCase() })}\n            placeholder=\"รหัสตำแหน่ง * เช่น A-01-2 (ชั้น A แถว 01 ช่อง 2)\" />\n          <input required className={input} value={form.name}\n            onChange={(e) => setForm({ ...form, name: e.target.value })}\n            placeholder=\"ชื่อ * เช่น ตู้เครื่องมือ ชั้นบน ช่องซ้าย\" />\n          <ColorPicker value={form.color} onChange={(color) => setForm({ ...form, color })} />\n          <textarea className={input} value={form.note} rows={2}\n            onChange={(e) => setForm({ ...form, note: e.target.value })}\n            placeholder=\"หมายเหตุ\" />\n          <PhotoInput photoKey={form.photo_key} onChange={(k) => setForm({ ...form, photo_key: k })} />\n          <button disabled={saving} className={btnPrimary}>\n            {saving ? \"กำลังบันทึก…\" : \"บันทึก\"}\n          </button>\n        </form>\n      )}\n\n      <div className=\"text-xs text-slate-400 px-1\">ทั้งหมด {locations.length} ตำแหน่ง</div>\n      {locations.map((loc) => (\n        <div key={loc.id} className={`${card} p-3`}>\n          <div className=\"flex gap-3 items-center\">\n            {loc.photo_key ? (\n              <Zoomable src={`/api/photos/${loc.photo_key}`} className=\"w-14 h-14 object-cover rounded-xl\" />\n            ) : (\n              <div className=\"w-14 h-14 rounded-xl flex items-center justify-center\"\n                style={{ backgroundColor: (loc.color ?? \"#8b5cf6\") + \"18\", color: loc.color ?? \"#c4b5fd\" }}>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" className=\"w-6 h-6\">\n                  <path d=\"M3 3h18v6H3zM3 15h18v6H3zM7 6h.01M7 18h.01\" />\n                </svg>\n              </div>\n            )}\n            <div className=\"flex-1 min-w-0\">\n              <div className=\"flex items-center gap-1.5\">\n                {loc.color && <span className=\"w-2.5 h-2.5 rounded-full shrink-0\" style={{ backgroundColor: loc.color }} />}\n                <span className=\"font-mono text-sm font-bold\" style={{ color: loc.color ?? \"#4f46e5\" }}>{loc.code}</span>\n              </div>\n              <div className=\"text-sm font-medium text-slate-700 truncate\">{loc.name}</div>\n              <div className=\"text-[11px] text-slate-400\">{loc.item_count ?? 0} ชิ้น{loc.note ? ` · ${loc.note}` : \"\"}</div>\n            </div>\n            <button className=\"text-slate-400 hover:text-indigo-600 p-2\" title=\"เปลี่ยนสี\"\n              onClick={() => setEditColor(editColor === loc.code ? null : loc.code)}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4\">\n                <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" /><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" />\n                <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" /><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" />\n                <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\" />\n              </svg>\n            </button>\n            <button\n              className=\"text-rose-400 hover:text-rose-600 p-2\"\n              onClick={async () => {\n                if (confirm(`ลบตำแหน่ง ${loc.code}? ของในตำแหน่งนี้จะกลายเป็น \"ไม่กำหนดตำแหน่ง\"`)) {\n                  await api(`/api/locations/${loc.code}`, { method: \"DELETE\" });\n                  await load();\n                }\n              }}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4\">\n                <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\" />\n              </svg>\n            </button>\n          </div>\n          {editColor === loc.code && (\n            <div className=\"mt-3 pt-3 border-t border-slate-100\">\n              <ColorPicker value={loc.color} onChange={async (color) => {\n                await api(`/api/locations/${loc.code}`, { method: \"PUT\", body: JSON.stringify({ color }) });\n                setEditColor(null);\n                await load();\n              }} />\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n","createdAt",["D",1783924488033],"branchVersion","branchId","af448eeb-7922-4aaa-a659-aa42ee57401b","id","55ec7efc-0177-4dc8-a624-bde4fe9ba584","smart_inventory",["D",1783916173471],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","ระบบจัดเก็บอุปกรณ์ให้ตรงตำแหน่ง","imageUrl","e7e09ecc-b296-440b-aa22-8451cadfb468","pinnedFileId","f4a2db4a-7e71-11f1-af93-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f353a-2c6c-715b-8e24-ae36d53494a6","tursoName","55ec7efc01774dc8a624bde4fe9ba584","tursoHostname","55ec7efc01774dc8a624bde4fe9ba584-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789524079207],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",63,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","thammanoonkarawan","handle","displayName","Thammanoon Karawan","avatar","https://lh3.googleusercontent.com/a/ACg8ocK86-3oUj6Tei8TnGq-HiPlZ0zGWZAeiMJT5jfdKonvUFy-PdD-=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":318,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":319,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":320,"_85":321,"_87":322,"_89":25},"tree",[167,172,184],"files",[167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185],"counts",{"_157":64,"_158":154,"_159":64,"_160":161,"_162":163},"contents",[132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":151,"_32":152,"_30":153,"_138":-5,"_42":43,"_41":154,"_140":60,"_39":155,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_27":156},{"_44":145,"_32":146,"_30":147,"_138":-5,"_42":43,"_41":148,"_140":60,"_39":149,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_27":150},{"_44":135,"_32":136,"_30":137,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":141,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_27":144},"dad23590-dcc3-4845-b80f-64401da2913a","shared","9ef2db96-7e71-11f1-8e71-1607ee4eb77e","parentId",2,"latest",["D",1783916188808],"directory","label",[136],"eb4df453-8942-45b0-bccb-0a5d2e4c0642","frontend","9f337386-7e71-11f1-ab9b-1607ee4eb77e",3,["D",1783916189244],[146],"ab06c930-73b2-4a0c-b439-de76dce04bdf","backend","9eb48a4e-7e71-11f1-9a86-1607ee4eb77e",1,["D",1783916188403],[152],"pulls","branches","forks","envVars",{"_164":64,"_166":64},"connections",{"_164":64,"_165":64},"count","unfilledCount","emptyCount",{"_44":151,"_32":152,"_30":153,"_138":-5,"_42":43,"_41":154,"_140":60,"_39":315,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_192":316,"_27":317},{"_44":310,"_32":301,"_30":295,"_138":153,"_42":43,"_41":311,"_140":60,"_39":312,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_192":313,"_27":314},{"_44":302,"_32":303,"_30":304,"_138":295,"_42":43,"_41":305,"_140":25,"_39":306,"_13":154,"_34":35,"_36":307,"_24":25,"_143":-5,"_192":308,"_27":309},{"_44":292,"_32":293,"_30":294,"_138":295,"_42":43,"_41":296,"_140":25,"_39":297,"_13":154,"_34":35,"_36":298,"_24":25,"_143":-5,"_192":299,"_27":300},{"_44":284,"_32":285,"_30":58,"_138":153,"_42":43,"_41":286,"_140":25,"_39":287,"_13":154,"_34":288,"_36":289,"_24":25,"_143":-5,"_192":290,"_27":291},{"_44":145,"_32":146,"_30":147,"_138":-5,"_42":43,"_41":148,"_140":60,"_39":281,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_192":282,"_27":283},{"_44":276,"_32":223,"_30":217,"_138":147,"_42":43,"_41":277,"_140":60,"_39":278,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_192":279,"_27":280},{"_44":268,"_32":269,"_30":270,"_138":217,"_42":43,"_41":271,"_140":60,"_39":272,"_13":139,"_34":35,"_36":273,"_24":25,"_143":-5,"_192":274,"_27":275},{"_44":260,"_32":261,"_30":262,"_138":217,"_42":43,"_41":263,"_140":25,"_39":264,"_13":148,"_34":35,"_36":265,"_24":25,"_143":-5,"_192":266,"_27":267},{"_44":252,"_32":253,"_30":254,"_138":217,"_42":43,"_41":255,"_140":25,"_39":256,"_13":139,"_34":35,"_36":257,"_24":25,"_143":-5,"_192":258,"_27":259},{"_44":244,"_32":245,"_30":246,"_138":217,"_42":43,"_41":247,"_140":25,"_39":248,"_13":154,"_34":35,"_36":249,"_24":25,"_143":-5,"_192":250,"_27":251},{"_44":240,"_32":33,"_30":31,"_138":217,"_42":43,"_41":14,"_140":25,"_39":241,"_13":139,"_34":35,"_36":38,"_24":25,"_143":-5,"_192":242,"_27":243},{"_44":232,"_32":233,"_30":234,"_138":217,"_42":43,"_41":235,"_140":60,"_39":236,"_13":154,"_34":35,"_36":237,"_24":25,"_143":-5,"_192":238,"_27":239},{"_44":224,"_32":225,"_30":226,"_138":217,"_42":43,"_41":227,"_140":25,"_39":228,"_13":154,"_34":35,"_36":229,"_24":25,"_143":-5,"_192":230,"_27":231},{"_44":214,"_32":215,"_30":216,"_138":217,"_42":43,"_41":218,"_140":25,"_39":219,"_13":139,"_34":35,"_36":220,"_24":25,"_143":-5,"_192":221,"_27":222},{"_44":206,"_32":207,"_30":208,"_138":147,"_42":43,"_41":209,"_140":60,"_39":210,"_13":154,"_34":20,"_36":211,"_24":25,"_143":-5,"_192":212,"_27":213},{"_44":198,"_32":199,"_30":200,"_138":147,"_42":43,"_41":201,"_140":60,"_39":202,"_13":64,"_34":35,"_36":203,"_24":25,"_143":-5,"_192":204,"_27":205},{"_44":135,"_32":136,"_30":137,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":195,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_192":196,"_27":197},{"_44":186,"_32":187,"_30":188,"_138":137,"_42":43,"_41":189,"_140":25,"_39":190,"_13":154,"_34":35,"_36":191,"_24":25,"_143":-5,"_192":193,"_27":194},"0ea98000-dba8-42ba-89e9-b0dc298f918f","types.ts","a42f6de0-7e71-11f1-9478-1607ee4eb77e",29,["D",1783924170610],"export interface Location {\n  id: number;\n  code: string;\n  name: string;\n  note: string | null;\n  photo_key: string | null;\n  color: string | null;\n  label_printed_at: string | null;\n  created_at: string;\n  item_count?: number;\n}\n\nexport interface Item {\n  id: number;\n  code: string;\n  name: string;\n  category: string | null;\n  note: string | null;\n  photo_key: string | null;\n  home_location_id: number | null;\n  status: \"stored\" | \"borrowed\";\n  borrowed_by: string | null;\n  label_printed_at: string | null;\n  created_at: string;\n  // joined fields\n  location_code?: string | null;\n  location_name?: string | null;\n  location_color?: string | null;\n}\n\nexport interface Movement {\n  id: number;\n  item_id: number;\n  action: \"register\" | \"checkout\" | \"checkin\" | \"move\";\n  actor: string | null;\n  note: string | null;\n  created_at: string;\n}\n\nexport type ScanResult =\n  | { type: \"item\"; item: Item }\n  | { type: \"location\"; location: Location; items: Item[] }\n  | { type: \"not_found\"; code: string };\n","children",[],[136,187],["D",1783916188808],[185],[136],"87211446-cda4-425a-a0fe-e3cc1009765a","index.tsx","b58986f2-7e71-11f1-a52f-1607ee4eb77e",10,["D",1783916226714],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render(<App />);\n",[],[146,199],"58de6aa9-45d0-4ffc-be89-aeda9cabc55a","index.html","b4bf696c-7e71-11f1-948b-1607ee4eb77e",20,["D",1783920814626],"<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Smart Inventory — ระบบจัดเก็บอุปกรณ์</title>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n  <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap\" rel=\"stylesheet\" />\n  <script src=\"https://cdn.twind.style\" crossorigin></script>\n  <script src=\"https://esm.town/v/std/catch\"></script>\n  <style>\n    body {\n      font-family: \"Noto Sans Thai\", system-ui, sans-serif;\n      background: #f4f5f7;\n      color: #1e293b;\n    }\n    .font-mono, code { font-family: \"JetBrains Mono\", monospace; }\n    ::selection { background: #c7d2fe; }\n    input, select, textarea { outline: none; }\n    input:focus, select:focus, textarea:focus {\n      border-color: #6366f1 !important;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);\n    }\n  </style>\n</head>\n<body class=\"min-h-screen antialiased\">\n  <div id=\"root\"></div>\n  <script type=\"module\" src=\"/frontend/index.tsx\"></script>\n</body>\n</html>\n",[],[146,207],"1545ab63-b1d7-4507-9860-d0b1571b1a79","lib.tsx","c026e3a2-7e71-11f1-95f4-1607ee4eb77e","a10b3cc0-7e71-11f1-b3f0-1607ee4eb77e",33,["D",1783924320357],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Item } from \"../../shared/types.ts\";\n\nexport async function api<T = any>(path: string, opts?: RequestInit): Promise<T> {\n  const res = await fetch(path, {\n    headers: { \"Content-Type\": \"application/json\" },\n    ...opts,\n  });\n  const data = await res.json();\n  if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);\n  return data;\n}\n\n/** สีประจำตำแหน่ง/โซน (เข้มพอสำหรับปริ้น) */\nexport const ZONE_COLORS = [\n  { name: \"แดง\", value: \"#dc2626\" },\n  { name: \"ส้ม\", value: \"#ea580c\" },\n  { name: \"เหลืองทอง\", value: \"#ca8a04\" },\n  { name: \"เขียว\", value: \"#16a34a\" },\n  { name: \"ฟ้า\", value: \"#0284c7\" },\n  { name: \"น้ำเงิน\", value: \"#4f46e5\" },\n  { name: \"ม่วง\", value: \"#9333ea\" },\n  { name: \"ชมพู\", value: \"#db2777\" },\n  { name: \"น้ำตาล\", value: \"#92400e\" },\n  { name: \"เทา\", value: \"#475569\" },\n];\n\n/** ย่อรูปเป็น JPEG data URL (max 1024px) แล้วอัปโหลด → คืน photo key */\nexport async function uploadPhoto(file: File): Promise<string> {\n  const dataUrl = await new Promise<string>((resolve, reject) => {\n    const img = new Image();\n    img.onload = () => {\n      const scale = Math.min(1, 1024 / Math.max(img.width, img.height));\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = Math.round(img.width * scale);\n      canvas.height = Math.round(img.height * scale);\n      canvas.getContext(\"2d\")!.drawImage(img, 0, 0, canvas.width, canvas.height);\n      resolve(canvas.toDataURL(\"image/jpeg\", 0.8));\n    };\n    img.onerror = reject;\n    img.src = URL.createObjectURL(file);\n  });\n  const { key } = await api<{ key: string }>(\"/api/photos\", {\n    method: \"POST\",\n    body: JSON.stringify({ data: dataUrl }),\n  });\n  return key;\n}\n\n/* ---------- UI primitives ---------- */\n\nexport const card = \"bg-white rounded-2xl border border-slate-200 shadow-sm\";\nexport const input = \"w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-sm placeholder-slate-400 transition-shadow\";\nexport const btnPrimary = \"inline-flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2.5 rounded-xl text-sm font-semibold transition-colors disabled:opacity-40 disabled:pointer-events-none\";\nexport const btnSoft = \"inline-flex items-center justify-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors\";\nexport const btnDanger = \"inline-flex items-center justify-center gap-2 bg-rose-50 hover:bg-rose-100 text-rose-600 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors\";\n\n/** รูปที่กดค้างเพื่อขยายชั่วคราว (ปล่อยนิ้ว = ปิด) */\nexport function Zoomable({ src, className }: { src: string; className?: string }) {\n  const [open, setOpen] = useState(false);\n  const timer = useRef<any>(null);\n  const openedRef = useRef(false);\n\n  const close = () => {\n    clearTimeout(timer.current);\n    if (open) {\n      setOpen(false);\n      // กันไม่ให้ click ทะลุไป card หลังจากขยายรูป\n      setTimeout(() => { openedRef.current = false; }, 50);\n    }\n  };\n\n  return (\n    <>\n      <img\n        src={src}\n        className={className}\n        loading=\"lazy\"\n        draggable={false}\n        onContextMenu={(e) => e.preventDefault()}\n        onPointerDown={() => {\n          timer.current = setTimeout(() => {\n            openedRef.current = true;\n            setOpen(true);\n          }, 280);\n        }}\n        onPointerUp={close}\n        onPointerLeave={close}\n        onPointerCancel={close}\n        onClickCapture={(e) => {\n          if (openedRef.current) {\n            e.preventDefault();\n            e.stopPropagation();\n            openedRef.current = false;\n          }\n        }}\n        style={{ touchAction: \"manipulation\", userSelect: \"none\", WebkitUserSelect: \"none\", WebkitTouchCallout: \"none\" } as any}\n      />\n      {open && (\n        <div className=\"fixed inset-0 z-50 bg-black/75 flex items-center justify-center p-5 pointer-events-none\">\n          <img src={src} className=\"max-w-full max-h-full rounded-2xl shadow-2xl object-contain\" />\n        </div>\n      )}\n    </>\n  );\n}\n\n/** ปุ่มเพิ่มรูป: ถ่ายด้วยกล้อง หรือเลือกจากแกลเลอรี */\nexport function PhotoInput(props: { photoKey: string | null; onChange: (key: string | null) => void }) {\n  const [busy, setBusy] = useState(false);\n\n  const handle = async (file: File | undefined) => {\n    if (!file) return;\n    setBusy(true);\n    try {\n      props.onChange(await uploadPhoto(file));\n    } catch (err) {\n      alert(`อัปโหลดรูปไม่สำเร็จ: ${err}`);\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <div className=\"flex items-center gap-2 flex-wrap\">\n      {props.photoKey && (\n        <Zoomable src={`/api/photos/${props.photoKey}`} className=\"w-14 h-14 object-cover rounded-xl border border-slate-200\" />\n      )}\n      <label className={`${btnSoft} cursor-pointer !px-3`}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4\">\n          <path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3Z\" />\n          <circle cx=\"12\" cy=\"13\" r=\"3\" />\n        </svg>\n        {busy ? \"รอสักครู่…\" : \"ถ่ายรูป\"}\n        <input type=\"file\" accept=\"image/*\" capture=\"environment\" className=\"hidden\" disabled={busy}\n          onChange={(e) => handle(e.target.files?.[0])} />\n      </label>\n      <label className={`${btnSoft} cursor-pointer !px-3`}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" />\n          <circle cx=\"9\" cy=\"9\" r=\"2\" />\n          <path d=\"m21 15-3.5-3.5L6 23\" />\n        </svg>\n        แกลเลอรี\n        <input type=\"file\" accept=\"image/*\" className=\"hidden\" disabled={busy}\n          onChange={(e) => handle(e.target.files?.[0])} />\n      </label>\n      {props.photoKey && (\n        <button type=\"button\" className=\"text-sm text-rose-500 hover:underline\" onClick={() => props.onChange(null)}>\n          ลบรูป\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function StatusBadge({ item }: { item: Item }) {\n  return item.status === \"borrowed\" ? (\n    <span className=\"inline-flex items-center gap-1 text-[11px] font-medium bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 rounded-full\">\n      <span className=\"w-1.5 h-1.5 rounded-full bg-amber-500\" />\n      ยืมโดย {item.borrowed_by}\n    </span>\n  ) : (\n    <span className=\"inline-flex items-center gap-1 text-[11px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 rounded-full\">\n      <span className=\"w-1.5 h-1.5 rounded-full bg-emerald-500\" />\n      อยู่ที่เก็บ\n    </span>\n  );\n}\n\nexport function LocationPin({ item }: { item: Item }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 text-xs font-medium\" style={{ color: item.location_color ?? \"#4f46e5\" }}>\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-3.5 h-3.5\">\n        <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\" />\n        <circle cx=\"12\" cy=\"10\" r=\"3\" />\n      </svg>\n      {item.location_code ? `${item.location_code} · ${item.location_name}` : \"ยังไม่กำหนดตำแหน่ง\"}\n    </span>\n  );\n}\n\nexport function ItemCard(props: { item: Item; onClick?: () => void; children?: any }) {\n  const { item } = props;\n  return (\n    <div\n      className={`${card} p-3 flex gap-3 items-center ${props.onClick ? \"cursor-pointer hover:border-indigo-300 hover:shadow-md transition-all\" : \"\"}`}\n      onClick={props.onClick}\n    >\n      {item.photo_key ? (\n        <Zoomable src={`/api/photos/${item.photo_key}`} className=\"w-14 h-14 object-cover rounded-xl\" />\n      ) : (\n        <div className=\"w-14 h-14 bg-slate-100 rounded-xl flex items-center justify-center text-slate-300\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" className=\"w-6 h-6\">\n            <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n          </svg>\n        </div>\n      )}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          <span className=\"font-mono text-[11px] font-bold text-slate-400\">{item.code}</span>\n          <StatusBadge item={item} />\n        </div>\n        <div className=\"font-semibold text-slate-800 truncate text-sm mt-0.5\">{item.name}</div>\n        <LocationPin item={item} />\n      </div>\n      {props.children}\n    </div>\n  );\n}\n",[],[146,223,215],"components","3c77cd15-9744-47ec-bac0-3b85c338683a","SearchTab.tsx","c3e6005e-7e71-11f1-9ad9-1607ee4eb77e",23,["D",1783920851881],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Item } from \"../../shared/types.ts\";\nimport { api, input, ItemCard } from \"./lib.tsx\";\nimport { ItemDetail } from \"./ItemDetail.tsx\";\n\nexport function SearchTab() {\n  const [q, setQ] = useState(\"\");\n  const [items, setItems] = useState<Item[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [selected, setSelected] = useState<string | null>(null);\n\n  useEffect(() => {\n    const t = setTimeout(async () => {\n      setLoading(true);\n      try {\n        setItems(await api(`/api/items?q=${encodeURIComponent(q)}`));\n      } finally {\n        setLoading(false);\n      }\n    }, 250);\n    return () => clearTimeout(t);\n  }, [q]);\n\n  if (selected) {\n    return <ItemDetail code={selected} onBack={() => setSelected(null)} />;\n  }\n\n  return (\n    <div className=\"space-y-2.5\">\n      <input\n        autoFocus\n        value={q}\n        onChange={(e) => setQ(e.target.value)}\n        placeholder=\"พิมพ์ชื่อของ รหัส หรือหมวดหมู่ เช่น ประแจ, T-0042\"\n        className={`${input} !py-3 !text-base shadow-sm`}\n      />\n      {loading && <div className=\"text-center text-slate-400 py-4 text-sm\">กำลังค้นหา…</div>}\n      {!loading && items.length === 0 && (\n        <div className=\"text-center text-slate-400 py-10 text-sm\">\n          {q ? `ไม่พบ \"${q}\"` : \"ยังไม่มีของในระบบ — ไปที่แท็บ ของ เพื่อลงทะเบียน\"}\n        </div>\n      )}\n      {items.map((item) => (\n        <ItemCard key={item.id} item={item} onClick={() => setSelected(item.code)} />\n      ))}\n    </div>\n  );\n}\n",[],[146,223,225],"3036af58-3591-479d-8c50-6fa57f02a88d","ScanTab.tsx","cad6e3ce-7e71-11f1-8935-1607ee4eb77e",24,["D",1783920865305],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ScanResult } from \"../../shared/types.ts\";\nimport { api, btnPrimary, btnSoft, card, input, ItemCard } from \"./lib.tsx\";\nimport { ItemDetail } from \"./ItemDetail.tsx\";\n\nexport function ScanTab() {\n  const [result, setResult] = useState<ScanResult | null>(null);\n  const [manual, setManual] = useState(\"\");\n  const [scanning, setScanning] = useState(false);\n  const [detail, setDetail] = useState<string | null>(null);\n  const scannerRef = useRef<any>(null);\n\n  const resolve = async (code: string) => {\n    setResult(await api(`/api/scan/${encodeURIComponent(code.trim())}`));\n  };\n\n  const startScan = async () => {\n    setScanning(true);\n    setResult(null);\n    try {\n      const { Html5Qrcode } = await import(\"https://esm.sh/html5-qrcode@2.3.8\");\n      const scanner = new Html5Qrcode(\"qr-reader\");\n      scannerRef.current = scanner;\n      await scanner.start(\n        { facingMode: \"environment\" },\n        { fps: 10, qrbox: { width: 220, height: 220 } },\n        async (text: string) => {\n          await stopScan();\n          await resolve(text);\n        },\n        () => {},\n      );\n    } catch (e) {\n      alert(`เปิดกล้องไม่ได้: ${e}\\nลองพิมพ์รหัสด้วยมือแทน`);\n      setScanning(false);\n    }\n  };\n\n  const stopScan = async () => {\n    try {\n      await scannerRef.current?.stop();\n      scannerRef.current?.clear();\n    } catch {}\n    scannerRef.current = null;\n    setScanning(false);\n  };\n\n  useEffect(() => () => { stopScan(); }, []);\n\n  if (detail) {\n    return <ItemDetail code={detail} onBack={() => setDetail(null)} />;\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className={`${card} p-4 space-y-3`}>\n        {!scanning ? (\n          <button onClick={startScan} className={`${btnPrimary} w-full !py-3.5 !text-base`}>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-5 h-5\">\n              <path d=\"M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 12h10\" />\n            </svg>\n            เปิดกล้องสแกน QR\n          </button>\n        ) : (\n          <button onClick={stopScan} className={`${btnSoft} w-full`}>ปิดกล้อง</button>\n        )}\n        <div id=\"qr-reader\" className={scanning ? \"rounded-xl overflow-hidden\" : \"hidden\"} />\n        <form\n          className=\"flex gap-2\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (manual.trim()) resolve(manual);\n          }}\n        >\n          <input\n            value={manual}\n            onChange={(e) => setManual(e.target.value)}\n            placeholder=\"หรือพิมพ์รหัส เช่น T-0001, A-01-2\"\n            className={input}\n          />\n          <button className={btnSoft}>ค้นหา</button>\n        </form>\n      </div>\n\n      {result?.type === \"item\" && (\n        <div className=\"space-y-2.5\">\n          <div className=\"bg-emerald-50 border border-emerald-200 rounded-2xl p-3.5 text-emerald-800 text-sm\">\n            พบของ — เก็บที่ <b>\n              {result.item.location_code\n                ? `${result.item.location_code} · ${result.item.location_name}`\n                : \"ยังไม่กำหนดตำแหน่ง\"}\n            </b>\n          </div>\n          <ItemCard item={result.item} onClick={() => setDetail(result.item.code)} />\n        </div>\n      )}\n\n      {result?.type === \"location\" && (\n        <div className=\"space-y-2.5\">\n          <div className=\"bg-indigo-50 border border-indigo-200 rounded-2xl p-3.5 text-indigo-800 text-sm\">\n            ตำแหน่ง <b>{result.location.code} · {result.location.name}</b> มีของ {result.items.length} ชิ้น\n          </div>\n          {result.items.map((item) => (\n            <ItemCard key={item.id} item={item} onClick={() => setDetail(item.code)} />\n          ))}\n        </div>\n      )}\n\n      {result?.type === \"not_found\" && (\n        <div className=\"bg-rose-50 border border-rose-200 rounded-2xl p-3.5 text-rose-700 text-sm\">\n          ไม่พบรหัส \"{result.code}\" ในระบบ\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[146,223,233],"67eb2fbc-9796-4e45-b740-16655a0a63f0",["D",1783924488033],[],[146,223,33],"3ce9e90c-0fa1-4135-828d-4919a47d7e44","LabelsTab.tsx","df0261a2-7e71-11f1-b6f0-1607ee4eb77e",28,["D",1783920937404],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Item, Location } from \"../../shared/types.ts\";\nimport { api, btnPrimary, btnSoft, card, input } from \"./lib.tsx\";\n\ninterface Label {\n  code: string;\n  title: string;\n  sub: string;\n  kind: \"item\" | \"location\";\n}\n\n/** ขนาดสติกเกอร์มาตรฐาน A4 (มม.) */\nconst PRESETS = [\n  { id: \"a4-65\", name: \"เล็ก · 38×21 มม.\", detail: \"65 ดวง/แผ่น — ของชิ้นเล็ก\", w: 38.1, h: 21.2, cols: 5, rows: 13 },\n  { id: \"a4-40\", name: \"มาตรฐาน · 52×30 มม.\", detail: \"40 ดวง/แผ่น — แบบร้านค้า\", w: 52.5, h: 29.7, cols: 4, rows: 10 },\n  { id: \"a4-24\", name: \"ใหญ่ · 70×36 มม.\", detail: \"24 ดวง/แผ่น — ติดชั้นวาง\", w: 70, h: 36, cols: 3, rows: 8 },\n  { id: \"a4-12\", name: \"จัมโบ้ · 105×48 มม.\", detail: \"12 ดวง/แผ่น — มองไกล\", w: 105, h: 48, cols: 2, rows: 6 },\n];\n\n/** วาดป้าย 1 ใบเป็น canvas (แบนขาว-ดำ สไตล์ป้ายร้านค้า) */\nfunction renderLabel(qrImg: HTMLImageElement, label: Label, wMm: number, hMm: number): HTMLCanvasElement {\n  const S = 12; // px ต่อ มม. (~300 dpi)\n  const c = document.createElement(\"canvas\");\n  c.width = Math.round(wMm * S);\n  c.height = Math.round(hMm * S);\n  const ctx = c.getContext(\"2d\")!;\n  ctx.fillStyle = \"#fff\";\n  ctx.fillRect(0, 0, c.width, c.height);\n\n  const pad = 1.6 * S;\n  const qrSize = c.height - pad * 2;\n  ctx.imageSmoothingEnabled = false;\n  ctx.drawImage(qrImg, pad, pad, qrSize, qrSize);\n\n  const tx = pad + qrSize + pad * 0.8;\n  const tw = c.width - tx - pad;\n  ctx.fillStyle = \"#000\";\n\n  // รหัส (ตัวหนา อ่านง่าย)\n  const codeSize = Math.min(c.height * 0.26, tw / (label.code.length * 0.62));\n  ctx.font = `700 ${codeSize}px \"JetBrains Mono\", monospace`;\n  ctx.textBaseline = \"top\";\n  ctx.fillText(label.code, tx, pad * 0.9);\n\n  // ชื่อ (ตัดบรรทัดสูงสุด 2 บรรทัด)\n  const nameSize = c.height * 0.155;\n  ctx.font = `500 ${nameSize}px \"Noto Sans Thai\", sans-serif`;\n  const lines: string[] = [];\n  let line = \"\";\n  for (const ch of label.title) {\n    if (ctx.measureText(line + ch).width > tw) {\n      lines.push(line);\n      line = ch;\n      if (lines.length === 2) break;\n    } else line += ch;\n  }\n  if (lines.length < 2 && line) lines.push(line);\n  if (lines.length === 2 && line && lines[1] !== line) lines[1] = lines[1].slice(0, -1) + \"…\";\n  let y = pad * 0.9 + codeSize * 1.25;\n  for (const l of lines) {\n    ctx.fillText(l, tx, y);\n    y += nameSize * 1.3;\n  }\n\n  // บรรทัดล่าง (ตำแหน่ง/ประเภท)\n  if (label.sub) {\n    ctx.font = `500 ${c.height * 0.12}px \"Noto Sans Thai\", sans-serif`;\n    ctx.fillStyle = \"#555\";\n    ctx.fillText(label.sub, tx, c.height - pad - c.height * 0.13);\n  }\n  return c;\n}\n\nexport function LabelsTab() {\n  const [items, setItems] = useState<Item[]>([]);\n  const [locations, setLocations] = useState<Location[]>([]);\n  const [selected, setSelected] = useState<Set<string>>(new Set());\n  const [preset, setPreset] = useState(\"a4-40\");\n  const [filter, setFilter] = useState(\"\");\n  const [progress, setProgress] = useState(\"\");\n\n  useEffect(() => {\n    Promise.all([api<Item[]>(\"/api/items\"), api<Location[]>(\"/api/locations\")])\n      .then(([it, lo]) => { setItems(it); setLocations(lo); });\n  }, []);\n\n  const labels: Label[] = useMemo(() => [\n    ...locations.map((l) => ({ code: l.code, title: l.name, sub: \"ตำแหน่งเก็บ\", kind: \"location\" as const })),\n    ...items.map((i) => ({\n      code: i.code, title: i.name,\n      sub: i.location_code ? `เก็บที่ ${i.location_code}` : (i.category ?? \"\"),\n      kind: \"item\" as const,\n    })),\n  ], [items, locations]);\n\n  const shown = useMemo(() => {\n    const q = filter.trim().toLowerCase();\n    return q ? labels.filter((l) => l.code.toLowerCase().includes(q) || l.title.toLowerCase().includes(q)) : labels;\n  }, [labels, filter]);\n\n  const p = PRESETS.find((x) => x.id === preset)!;\n  const chosen = labels.filter((l) => selected.has(l.code));\n  const pages = Math.ceil(chosen.length / (p.cols * p.rows)) || 0;\n\n  const toggle = (code: string) => {\n    setSelected((prev) => {\n      const next = new Set(prev);\n      next.has(code) ? next.delete(code) : next.add(code);\n      return next;\n    });\n  };\n\n  const selectShown = (kind?: \"item\" | \"location\") => {\n    setSelected((prev) => {\n      const next = new Set(prev);\n      shown.filter((l) => !kind || l.kind === kind).forEach((l) => next.add(l.code));\n      return next;\n    });\n  };\n\n  const makePdf = async () => {\n    if (chosen.length === 0) return;\n    setProgress(\"กำลังเตรียมฟอนต์…\");\n    await (document as any).fonts?.load(`700 20px \"JetBrains Mono\"`);\n    await (document as any).fonts?.load(`500 20px \"Noto Sans Thai\"`);\n\n    setProgress(\"กำลังสร้าง QR…\");\n    const [{ default: QRCode }, { jsPDF }] = await Promise.all([\n      import(\"https://esm.sh/qrcode@1.5.3\"),\n      import(\"https://esm.sh/jspdf@2.5.1\"),\n    ]);\n    // สร้าง QR ทุกใบพร้อมกัน (เร็วสุด)\n    const qrImgs = await Promise.all(chosen.map(async (l) => {\n      const url = await QRCode.toDataURL(l.code, { width: 512, margin: 0, errorCorrectionLevel: \"M\" });\n      const img = new Image();\n      await new Promise((res) => { img.onload = res; img.src = url; });\n      return img;\n    }));\n\n    setProgress(\"กำลังจัดหน้า PDF…\");\n    const doc = new jsPDF({ unit: \"mm\", format: \"a4\" });\n    const mx = (210 - p.cols * p.w) / 2;\n    const my = (297 - p.rows * p.h) / 2;\n    const perPage = p.cols * p.rows;\n\n    for (let i = 0; i < chosen.length; i++) {\n      if (i > 0 && i % perPage === 0) doc.addPage();\n      const idx = i % perPage;\n      const col = idx % p.cols;\n      const row = Math.floor(idx / p.cols);\n      const canvas = renderLabel(qrImgs[i], chosen[i], p.w, p.h);\n      doc.addImage(canvas.toDataURL(\"image/jpeg\", 0.92), \"JPEG\", mx + col * p.w, my + row * p.h, p.w, p.h);\n      if (i % 20 === 19) {\n        setProgress(`กำลังจัดหน้า PDF… ${i + 1}/${chosen.length}`);\n        await new Promise((r) => setTimeout(r, 0)); // ไม่ให้ UI ค้าง\n      }\n    }\n    doc.save(`qr-labels-${new Date().toISOString().slice(0, 10)}.pdf`);\n    setProgress(\"\");\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      {/* เลือกขนาด */}\n      <div className={`${card} p-4 space-y-3`}>\n        <div className=\"text-sm font-semibold text-slate-700\">ขนาดป้ายสติกเกอร์</div>\n        <div className=\"grid grid-cols-2 gap-2\">\n          {PRESETS.map((x) => (\n            <button\n              key={x.id}\n              onClick={() => setPreset(x.id)}\n              className={`text-left p-3 rounded-xl border transition-all ${\n                preset === x.id\n                  ? \"border-indigo-500 bg-indigo-50 ring-1 ring-indigo-500\"\n                  : \"border-slate-200 hover:border-slate-300\"\n              }`}\n            >\n              <div className=\"text-sm font-semibold text-slate-800\">{x.name}</div>\n              <div className=\"text-[11px] text-slate-400 mt-0.5\">{x.detail}</div>\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* เลือกป้าย */}\n      <div className={`${card} p-4 space-y-3`}>\n        <input\n          value={filter}\n          onChange={(e) => setFilter(e.target.value)}\n          placeholder=\"กรองรายการ… (ชื่อหรือรหัส)\"\n          className={input}\n        />\n        <div className=\"flex gap-2 flex-wrap text-sm\">\n          <button onClick={() => selectShown(\"location\")} className={`${btnSoft} !py-1.5 !px-3 !text-xs`}>+ ตำแหน่งทั้งหมด</button>\n          <button onClick={() => selectShown(\"item\")} className={`${btnSoft} !py-1.5 !px-3 !text-xs`}>+ ของทั้งหมด</button>\n          <button onClick={() => setSelected(new Set())} className={`${btnSoft} !py-1.5 !px-3 !text-xs`}>ล้าง</button>\n        </div>\n        <div className=\"max-h-72 overflow-y-auto divide-y divide-slate-100 -mx-1 px-1\">\n          {shown.map((l) => (\n            <label key={l.code} className=\"flex items-center gap-2.5 py-2 cursor-pointer text-sm hover:bg-slate-50 rounded-lg px-1\">\n              <input\n                type=\"checkbox\"\n                checked={selected.has(l.code)}\n                onChange={() => toggle(l.code)}\n                className=\"w-4 h-4 accent-indigo-600\"\n              />\n              <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${\n                l.kind === \"location\" ? \"bg-violet-50 text-violet-600\" : \"bg-sky-50 text-sky-600\"\n              }`}>\n                {l.kind === \"location\" ? \"ตำแหน่ง\" : \"ของ\"}\n              </span>\n              <span className=\"font-mono text-xs font-bold text-slate-400\">{l.code}</span>\n              <span className=\"truncate text-slate-700\">{l.title}</span>\n            </label>\n          ))}\n          {shown.length === 0 && <div className=\"text-slate-400 py-6 text-center text-sm\">ไม่พบรายการ</div>}\n        </div>\n      </div>\n\n      {/* สร้าง PDF */}\n      <div className={`${card} p-4 flex items-center gap-3`}>\n        <div className=\"flex-1 text-sm text-slate-500\">\n          เลือก <b className=\"text-slate-800\">{chosen.length}</b> ป้าย\n          {chosen.length > 0 && <> · {pages} หน้า A4 ({p.name})</>}\n        </div>\n        <button onClick={makePdf} disabled={chosen.length === 0 || !!progress} className={btnPrimary}>\n          {progress || (\n            <>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\" />\n              </svg>\n              ดาวน์โหลด PDF\n            </>\n          )}\n        </button>\n      </div>\n\n      <p className=\"text-xs text-slate-400 px-1\">\n        ไฟล์ PDF จัดตำแหน่งตรงกับกระดาษสติกเกอร์ A4 แบบไดคัทมาตรฐาน — ตอนพิมพ์เลือก \"Actual size\" (อย่าใช้ Fit to page)\n      </p>\n    </div>\n  );\n}\n",[],[146,223,245],"9ad8d129-590d-4721-8ce9-f7474927e1f2","ItemsTab.tsx","d10f3476-7e71-11f1-b904-1607ee4eb77e",37,["D",1783924450185],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Item, Location } from \"../../shared/types.ts\";\nimport { api, btnPrimary, card, input, ItemCard, PhotoInput } from \"./lib.tsx\";\nimport { ItemDetail } from \"./ItemDetail.tsx\";\n\nconst EMPTY = { name: \"\", category: \"\", note: \"\", photo_key: null as string | null, home_location_code: \"\", quantity: 1 };\n\nexport function ItemsTab() {\n  const [items, setItems] = useState<Item[]>([]);\n  const [locations, setLocations] = useState<Location[]>([]);\n  const [categories, setCategories] = useState<string[]>([]);\n  const [adding, setAdding] = useState(false);\n  const [form, setForm] = useState(EMPTY);\n  const [detail, setDetail] = useState<string | null>(null);\n  const [saving, setSaving] = useState(false);\n\n  const load = () => api<Item[]>(\"/api/items\").then(setItems);\n  useEffect(() => {\n    Promise.all([\n      load(),\n      api<Location[]>(\"/api/locations\").then(setLocations),\n      api<string[]>(\"/api/categories\").then(setCategories),\n    ]);\n  }, []);\n\n  if (detail) {\n    return <ItemDetail code={detail} onBack={() => { setDetail(null); load(); }} />;\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <button onClick={() => setAdding(!adding)} className={`${btnPrimary} w-full !py-3`}>\n        {adding ? \"ยกเลิก\" : \"＋ ลงทะเบียนของใหม่\"}\n      </button>\n\n      {adding && (\n        <form\n          className={`${card} p-4 space-y-2.5`}\n          onSubmit={async (e) => {\n            e.preventDefault();\n            setSaving(true);\n            try {\n              const { items: created } = await api<{ items: Item[] }>(\"/api/items\", {\n                method: \"POST\",\n                body: JSON.stringify(form),\n              });\n              const codes = created.map((i) => i.code);\n              alert(\n                created.length === 1\n                  ? `ลงทะเบียนแล้ว: ${codes[0]} ${created[0].name}\\nอย่าลืมพิมพ์ป้าย QR ที่แท็บ ป้าย QR`\n                  : `ลงทะเบียนแล้ว ${created.length} ชิ้น: ${codes[0]} ถึง ${codes[codes.length - 1]}\\nแต่ละชิ้นมี QR ของตัวเอง — พิมพ์ป้ายที่แท็บ ป้าย QR`,\n              );\n              setForm(EMPTY);\n              setAdding(false);\n              await Promise.all([load(), api<string[]>(\"/api/categories\").then(setCategories)]);\n            } catch (err) {\n              alert(String(err));\n            } finally {\n              setSaving(false);\n            }\n          }}\n        >\n          <input required autoFocus className={input} value={form.name}\n            onChange={(e) => setForm({ ...form, name: e.target.value })}\n            placeholder=\"ชื่อของ * เช่น ประแจเลื่อน 10 นิ้ว\" />\n\n          <input className={input} value={form.category} list=\"category-suggest\"\n            onChange={(e) => setForm({ ...form, category: e.target.value })}\n            placeholder=\"หมวดหมู่ — พิมพ์หรือเลือกจากที่เคยใช้\" />\n          <datalist id=\"category-suggest\">\n            {categories.map((c) => <option key={c} value={c} />)}\n          </datalist>\n\n          <div className=\"flex gap-2.5\">\n            <select className={`${input} flex-1`} value={form.home_location_code}\n              onChange={(e) => setForm({ ...form, home_location_code: e.target.value })}>\n              <option value=\"\">— เลือกตำแหน่งเก็บ —</option>\n              {locations.map((l) => (\n                <option key={l.id} value={l.code}>{l.code} · {l.name}</option>\n              ))}\n            </select>\n            <div className=\"w-28\">\n              <input type=\"number\" min={1} max={50} className={input} value={form.quantity}\n                onChange={(e) => setForm({ ...form, quantity: parseInt(e.target.value) || 1 })}\n                title=\"จำนวนชิ้น (แต่ละชิ้นได้รหัส QR แยกกัน)\" />\n              <div className=\"text-[10px] text-slate-400 text-center mt-0.5\">จำนวนชิ้น</div>\n            </div>\n          </div>\n\n          <textarea className={input} value={form.note} rows={2}\n            onChange={(e) => setForm({ ...form, note: e.target.value })}\n            placeholder=\"หมายเหตุ\" />\n          <PhotoInput photoKey={form.photo_key} onChange={(k) => setForm({ ...form, photo_key: k })} />\n          <button disabled={saving} className={btnPrimary}>\n            {saving ? \"กำลังบันทึก…\" : form.quantity > 1 ? `ลงทะเบียน ${form.quantity} ชิ้น` : \"ลงทะเบียน\"}\n          </button>\n        </form>\n      )}\n\n      <div className=\"text-xs text-slate-400 px-1\">ทั้งหมด {items.length} ชิ้น</div>\n      {items.map((item) => (\n        <ItemCard key={item.id} item={item} onClick={() => setDetail(item.code)} />\n      ))}\n    </div>\n  );\n}\n",[],[146,223,253],"dd8e0bc5-1349-4c74-8ed0-c74dabaaf27d","ItemDetail.tsx","e925598c-7e71-11f1-8bce-1607ee4eb77e",36,["D",1783924351239],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Item, Location, Movement } from \"../../shared/types.ts\";\nimport { api, btnDanger, btnPrimary, btnSoft, card, input, PhotoInput, StatusBadge, Zoomable } from \"./lib.tsx\";\n\nconst ACTION_LABEL: Record<string, string> = {\n  register: \"ลงทะเบียน\",\n  checkout: \"ยืมออก\",\n  checkin: \"คืนแล้ว\",\n  move: \"ย้ายตำแหน่ง\",\n};\n\nexport function ItemDetail(props: { code: string; onBack: () => void; onChanged?: () => void }) {\n  const [item, setItem] = useState<(Item & { history: Movement[] }) | null>(null);\n  const [locations, setLocations] = useState<Location[]>([]);\n  const [editing, setEditing] = useState(false);\n  const [form, setForm] = useState<any>({});\n  const [error, setError] = useState(\"\");\n\n  const load = async () => {\n    const it = await api(`/api/items/${props.code}`);\n    setItem(it);\n    setForm({\n      name: it.name,\n      category: it.category ?? \"\",\n      note: it.note ?? \"\",\n      photo_key: it.photo_key,\n      home_location_code: it.location_code ?? \"\",\n    });\n  };\n\n  useEffect(() => {\n    load().catch((e) => setError(String(e)));\n    api(\"/api/locations\").then(setLocations);\n  }, [props.code]);\n\n  if (error) return <div className=\"text-rose-500 p-4 text-sm\">{error}</div>;\n  if (!item) return <div className=\"text-slate-400 text-center py-8 text-sm\">กำลังโหลด…</div>;\n\n  const doAction = async (fn: () => Promise<any>) => {\n    try {\n      await fn();\n      await load();\n      props.onChanged?.();\n    } catch (e) {\n      alert(String(e));\n    }\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      <button onClick={props.onBack} className=\"text-indigo-600 text-sm font-medium hover:underline\">← กลับ</button>\n\n      <div className={`${card} p-4 space-y-3.5`}>\n        <div className=\"flex items-start gap-4\">\n          {item.photo_key ? (\n            <Zoomable src={`/api/photos/${item.photo_key}`} className=\"w-24 h-24 object-cover rounded-2xl\" />\n          ) : (\n            <div className=\"w-24 h-24 bg-slate-100 rounded-2xl flex items-center justify-center text-slate-300\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" className=\"w-9 h-9\">\n                <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n              </svg>\n            </div>\n          )}\n          <div className=\"min-w-0\">\n            <div className=\"font-mono text-xs font-bold text-slate-400\">{item.code}</div>\n            <h2 className=\"text-lg font-bold text-slate-800 leading-snug\">{item.name}</h2>\n            {item.category && <div className=\"text-xs text-slate-400 mb-1\">{item.category}</div>}\n            <StatusBadge item={item} />\n          </div>\n        </div>\n\n        <div className=\"bg-indigo-50 border border-indigo-100 rounded-xl p-3 text-sm text-indigo-800\">\n          ตำแหน่งเก็บ: <b>{item.location_code ? `${item.location_code} · ${item.location_name}` : \"ยังไม่กำหนด\"}</b>\n        </div>\n        {item.note && <div className=\"text-sm text-slate-500\">{item.note}</div>}\n\n        <div className=\"flex gap-2 flex-wrap\">\n          {item.status === \"stored\" ? (\n            <button\n              className={`${btnPrimary} !bg-amber-500 hover:!bg-amber-600`}\n              onClick={() => {\n                const actor = prompt(\"ชื่อผู้ยืม:\");\n                if (actor?.trim()) {\n                  doAction(() =>\n                    api(`/api/items/${item.code}/checkout`, {\n                      method: \"POST\",\n                      body: JSON.stringify({ actor: actor.trim() }),\n                    })\n                  );\n                }\n              }}\n            >\n              ยืมออก\n            </button>\n          ) : (\n            <button\n              className={`${btnPrimary} !bg-emerald-600 hover:!bg-emerald-700`}\n              onClick={() => doAction(() => api(`/api/items/${item.code}/checkin`, { method: \"POST\", body: \"{}\" }))}\n            >\n              คืนของ\n            </button>\n          )}\n          <button className={btnSoft} onClick={() => setEditing(!editing)}>แก้ไข</button>\n          <button\n            className={btnDanger}\n            onClick={() => {\n              if (confirm(`ลบ ${item.code} ${item.name}?`)) {\n                doAction(async () => {\n                  await api(`/api/items/${item.code}`, { method: \"DELETE\" });\n                  props.onBack();\n                });\n              }\n            }}\n          >\n            ลบ\n          </button>\n        </div>\n\n        {editing && (\n          <form\n            className=\"space-y-2.5 border-t border-slate-100 pt-3.5\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              doAction(async () => {\n                await api(`/api/items/${item.code}`, { method: \"PUT\", body: JSON.stringify(form) });\n                setEditing(false);\n              });\n            }}\n          >\n            <input className={input} value={form.name}\n              onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder=\"ชื่อของ\" />\n            <input className={input} value={form.category}\n              onChange={(e) => setForm({ ...form, category: e.target.value })} placeholder=\"หมวดหมู่\" />\n            <select className={input} value={form.home_location_code}\n              onChange={(e) => setForm({ ...form, home_location_code: e.target.value })}>\n              <option value=\"\">— ไม่กำหนดตำแหน่ง —</option>\n              {locations.map((l) => (\n                <option key={l.id} value={l.code}>{l.code} · {l.name}</option>\n              ))}\n            </select>\n            <textarea className={input} value={form.note} rows={2}\n              onChange={(e) => setForm({ ...form, note: e.target.value })} placeholder=\"หมายเหตุ\" />\n            <PhotoInput photoKey={form.photo_key} onChange={(k) => setForm({ ...form, photo_key: k })} />\n            <button className={btnPrimary}>บันทึก</button>\n          </form>\n        )}\n      </div>\n\n      <div className={`${card} p-4`}>\n        <h3 className=\"text-sm font-semibold text-slate-700 mb-2\">ประวัติ</h3>\n        <div className=\"space-y-1.5\">\n          {item.history.map((m) => (\n            <div key={m.id} className=\"text-xs text-slate-500 flex justify-between gap-2\">\n              <span>\n                <b className=\"text-slate-600\">{ACTION_LABEL[m.action] ?? m.action}</b>\n                {m.actor ? ` · ${m.actor}` : \"\"}\n                {m.note ? ` · ${m.note}` : \"\"}\n              </span>\n              <span className=\"text-slate-300 whitespace-nowrap font-mono\">{m.created_at}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[146,223,261],"770f38e3-c03c-495f-9d96-b3da56dc60e2","App.tsx","b940d016-7e71-11f1-9619-1607ee4eb77e",34,["D",1783924341954],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { SearchTab } from \"./SearchTab.tsx\";\nimport { ScanTab } from \"./ScanTab.tsx\";\nimport { ItemsTab } from \"./ItemsTab.tsx\";\nimport { LocationsTab } from \"./LocationsTab.tsx\";\nimport { LabelsTab } from \"./LabelsTab.tsx\";\n\nconst I = {\n  search: <path d=\"M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm10 2-4.35-4.35\" />,\n  scan: <path d=\"M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 12h10\" />,\n  box: <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Zm-18-.27 9 5.15 9-5.15M12 22.08V12\" />,\n  shelf: <path d=\"M3 3h18v6H3zM3 15h18v6H3zM7 6h.01M7 18h.01\" />,\n  tag: <path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42zM7 7h.01\" />,\n};\n\nfunction Icon({ d, className }: { d: any; className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"\n      strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className ?? \"w-5 h-5\"}>\n      {d}\n    </svg>\n  );\n}\n\nconst TABS = [\n  { id: \"search\", label: \"ค้นหา\", icon: I.search },\n  { id: \"scan\", label: \"สแกน\", icon: I.scan },\n  { id: \"items\", label: \"ของ\", icon: I.box },\n  { id: \"locations\", label: \"ตำแหน่ง\", icon: I.shelf },\n  { id: \"labels\", label: \"ป้าย QR\", icon: I.tag },\n] as const;\n\ntype TabId = typeof TABS[number][\"id\"];\n\nexport function App() {\n  const [tab, setTab] = useState<TabId>(\"search\");\n\n  return (\n    <div className=\"max-w-2xl mx-auto px-4 pt-5 pb-28\">\n      <header className=\"mb-5 flex items-center gap-3\">\n        <div className=\"w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center text-white shadow-md shadow-indigo-200\">\n          <Icon d={I.box} className=\"w-5 h-5\" />\n        </div>\n        <div>\n          <h1 className=\"text-lg font-bold leading-tight tracking-tight\">Smart Inventory</h1>\n          <p className=\"text-xs text-slate-400\">\n            ทุกชิ้นมีที่ ทุกที่มีรหัส · <a href=\"/source\" target=\"_blank\" rel=\"noopener\" className=\"hover:text-indigo-500\">source</a>\n          </p>\n        </div>\n      </header>\n\n      <main>\n        {tab === \"search\" && <SearchTab />}\n        {tab === \"scan\" && <ScanTab />}\n        {tab === \"items\" && <ItemsTab />}\n        {tab === \"locations\" && <LocationsTab />}\n        {tab === \"labels\" && <LabelsTab />}\n      </main>\n\n      <nav className=\"fixed bottom-4 left-4 right-4 z-20\">\n        <div className=\"max-w-2xl mx-auto bg-white/90 backdrop-blur border border-slate-200 rounded-2xl shadow-lg shadow-slate-200/60 flex p-1.5\">\n          {TABS.map((t) => (\n            <button\n              key={t.id}\n              onClick={() => setTab(t.id)}\n              className={`flex-1 flex flex-col items-center gap-0.5 py-2 rounded-xl text-[11px] font-medium transition-colors ${\n                tab === t.id\n                  ? \"bg-indigo-600 text-white shadow-sm\"\n                  : \"text-slate-500 hover:bg-slate-100\"\n              }`}\n            >\n              <Icon d={t.icon} className=\"w-5 h-5\" />\n              {t.label}\n            </button>\n          ))}\n        </div>\n      </nav>\n    </div>\n  );\n}\n",[],[146,223,269],"4b31604f-c40a-4f3d-affd-1f04f7a0c8bd",5,["D",1783916192316],[174,175,176,177,178,179,180,181],[146,223],["D",1783916189244],[173,182,183],[146],"34fc7cc1-4288-4b78-bed2-dfcd50a342bc","index.ts",32,["D",1783924258839],"http","import { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport * as db from \"./database/queries.ts\";\nimport type { ScanResult } from \"../shared/types.ts\";\n\nawait runMigrations();\n\nconst app = new Hono();\n\n// ---------- Frontend ----------\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/shared/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ---------- Scan: resolve code เป็น item หรือ location ----------\napp.get(\"/api/scan/:code\", async (c) => {\n  const code = decodeURIComponent(c.req.param(\"code\")).trim();\n  const item = await db.getItemByCode(code);\n  if (item) return c.json({ type: \"item\", item } satisfies ScanResult);\n  const location = await db.getLocationByCode(code);\n  if (location) {\n    const items = await db.itemsAtLocation(location.id);\n    return c.json({ type: \"location\", location, items } satisfies ScanResult);\n  }\n  return c.json({ type: \"not_found\", code } satisfies ScanResult);\n});\n\n// ---------- Items ----------\napp.get(\"/api/items\", async (c) => c.json(await db.searchItems(c.req.query(\"q\") ?? \"\")));\n\napp.post(\"/api/items\", async (c) => {\n  const body = await c.req.json();\n  if (!body.name?.trim()) return c.json({ error: \"ต้องระบุชื่อของ\" }, 400);\n  const qty = Math.min(Math.max(parseInt(body.quantity ?? \"1\", 10) || 1, 1), 50);\n  try {\n    const items = [];\n    for (let i = 0; i < qty; i++) items.push(await db.createItem(body));\n    return c.json({ items }, 201);\n  } catch (e) {\n    return c.json({ error: String(e.message ?? e) }, 400);\n  }\n});\n\napp.get(\"/api/categories\", async (c) => c.json(await db.listCategories()));\n\napp.post(\"/api/labels/printed\", async (c) => {\n  const { codes } = await c.req.json();\n  if (!Array.isArray(codes)) return c.json({ error: \"codes ต้องเป็น array\" }, 400);\n  await db.markLabelsPrinted(codes.slice(0, 500));\n  return c.json({ ok: true });\n});\n\napp.get(\"/api/items/:code\", async (c) => {\n  const item = await db.getItemByCode(c.req.param(\"code\"));\n  if (!item) return c.json({ error: \"ไม่พบของ\" }, 404);\n  const history = await db.itemHistory(item.id);\n  return c.json({ ...item, history });\n});\n\napp.put(\"/api/items/:code\", async (c) => {\n  try {\n    const item = await db.updateItem(c.req.param(\"code\"), await c.req.json());\n    if (!item) return c.json({ error: \"ไม่พบของ\" }, 404);\n    return c.json(item);\n  } catch (e) {\n    return c.json({ error: String(e.message ?? e) }, 400);\n  }\n});\n\napp.delete(\"/api/items/:code\", async (c) => {\n  const ok = await db.deleteItem(c.req.param(\"code\"));\n  return ok ? c.json({ ok: true }) : c.json({ error: \"ไม่พบของ\" }, 404);\n});\n\napp.post(\"/api/items/:code/checkout\", async (c) => {\n  const { actor, note } = await c.req.json();\n  if (!actor?.trim()) return c.json({ error: \"ต้องระบุชื่อผู้ยืม\" }, 400);\n  const item = await db.checkoutItem(c.req.param(\"code\"), actor, note);\n  if (!item) return c.json({ error: \"ไม่พบของ\" }, 404);\n  return c.json(item);\n});\n\napp.post(\"/api/items/:code/checkin\", async (c) => {\n  const { actor, note } = await c.req.json().catch(() => ({}));\n  const item = await db.checkinItem(c.req.param(\"code\"), actor, note);\n  if (!item) return c.json({ error: \"ไม่พบของ\" }, 404);\n  return c.json(item);\n});\n\n// ---------- Locations ----------\napp.get(\"/api/locations\", async (c) => c.json(await db.listLocations()));\n\napp.post(\"/api/locations\", async (c) => {\n  const body = await c.req.json();\n  if (!body.code?.trim() || !body.name?.trim()) {\n    return c.json({ error: \"ต้องระบุรหัสและชื่อตำแหน่ง\" }, 400);\n  }\n  const exists = await db.getLocationByCode(body.code.trim());\n  if (exists) return c.json({ error: `รหัส ${body.code} มีอยู่แล้ว` }, 400);\n  return c.json(await db.createLocation({ ...body, code: body.code.trim() }), 201);\n});\n\napp.get(\"/api/locations/:code\", async (c) => {\n  const loc = await db.getLocationByCode(c.req.param(\"code\"));\n  if (!loc) return c.json({ error: \"ไม่พบตำแหน่ง\" }, 404);\n  const items = await db.itemsAtLocation(loc.id);\n  return c.json({ ...loc, items });\n});\n\napp.put(\"/api/locations/:code\", async (c) => {\n  const loc = await db.updateLocation(c.req.param(\"code\"), await c.req.json());\n  if (!loc) return c.json({ error: \"ไม่พบตำแหน่ง\" }, 404);\n  return c.json(loc);\n});\n\napp.delete(\"/api/locations/:code\", async (c) => {\n  const ok = await db.deleteLocation(c.req.param(\"code\"));\n  return ok ? c.json({ ok: true }) : c.json({ error: \"ไม่พบตำแหน่ง\" }, 404);\n});\n\n// ---------- Photos (Blob storage) ----------\napp.post(\"/api/photos\", async (c) => {\n  const { data } = await c.req.json(); // data URL: \"data:image/jpeg;base64,...\"\n  if (!data?.startsWith(\"data:image/\")) return c.json({ error: \"รูปไม่ถูกต้อง\" }, 400);\n  const [meta, b64] = data.split(\",\");\n  const mime = meta.slice(5, meta.indexOf(\";\"));\n  const bytes = Uint8Array.from(atob(b64), (ch) => ch.charCodeAt(0));\n  const key = `inv-photo-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n  await blob.set(key, bytes, { contentType: mime } as any);\n  return c.json({ key }, 201);\n});\n\napp.get(\"/api/photos/:key\", async (c) => {\n  const res = await blob.get(c.req.param(\"key\"));\n  if (!res) return c.text(\"not found\", 404);\n  const buf = await res.arrayBuffer();\n  return new Response(buf, {\n    headers: { \"Content-Type\": \"image/jpeg\", \"Cache-Control\": \"public, max-age=31536000\" },\n  });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[],[152,285],"d42996a0-0d77-42ef-bead-b74840831ca6","queries.ts","b2e950b2-7e71-11f1-ad53-1607ee4eb77e","a0cd421c-7e71-11f1-8e71-1607ee4eb77e",31,["D",1783924226656],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Item, Location, Movement } from \"../../shared/types.ts\";\n\nconst ITEM_SELECT = `\n  SELECT i.*, l.code AS location_code, l.name AS location_name, l.color AS location_color\n  FROM items i LEFT JOIN locations l ON i.home_location_id = l.id\n`;\n\n// ---------- Locations ----------\n\nexport async function listLocations(): Promise<Location[]> {\n  const r = await sqlite.execute(`\n    SELECT l.*, (SELECT COUNT(*) FROM items i WHERE i.home_location_id = l.id) AS item_count\n    FROM locations l ORDER BY l.code\n  `);\n  return r.rows as unknown as Location[];\n}\n\nexport async function getLocationByCode(code: string): Promise<Location | null> {\n  const r = await sqlite.execute({\n    sql: \"SELECT * FROM locations WHERE code = ? COLLATE NOCASE\",\n    args: [code],\n  });\n  return (r.rows[0] as unknown as Location) ?? null;\n}\n\nexport async function createLocation(\n  data: { code: string; name: string; note?: string; photo_key?: string; color?: string },\n): Promise<Location> {\n  await sqlite.execute({\n    sql: \"INSERT INTO locations (code, name, note, photo_key, color) VALUES (?, ?, ?, ?, ?)\",\n    args: [data.code, data.name, data.note ?? null, data.photo_key ?? null, data.color ?? null],\n  });\n  return (await getLocationByCode(data.code))!;\n}\n\nexport async function updateLocation(\n  code: string,\n  data: { name?: string; note?: string; photo_key?: string; color?: string },\n): Promise<Location | null> {\n  const loc = await getLocationByCode(code);\n  if (!loc) return null;\n  await sqlite.execute({\n    sql: \"UPDATE locations SET name = ?, note = ?, photo_key = ?, color = ? WHERE id = ?\",\n    args: [\n      data.name ?? loc.name,\n      data.note !== undefined ? data.note : loc.note,\n      data.photo_key !== undefined ? data.photo_key : loc.photo_key,\n      data.color !== undefined ? data.color : loc.color,\n      loc.id,\n    ],\n  });\n  return await getLocationByCode(code);\n}\n\nexport async function deleteLocation(code: string): Promise<boolean> {\n  const loc = await getLocationByCode(code);\n  if (!loc) return false;\n  await sqlite.batch([\n    { sql: \"UPDATE items SET home_location_id = NULL WHERE home_location_id = ?\", args: [loc.id] },\n    { sql: \"DELETE FROM locations WHERE id = ?\", args: [loc.id] },\n  ]);\n  return true;\n}\n\nexport async function itemsAtLocation(locationId: number): Promise<Item[]> {\n  const r = await sqlite.execute({\n    sql: `${ITEM_SELECT} WHERE i.home_location_id = ? ORDER BY i.code`,\n    args: [locationId],\n  });\n  return r.rows as unknown as Item[];\n}\n\n// ---------- Items ----------\n\nexport async function searchItems(q: string): Promise<Item[]> {\n  if (!q.trim()) {\n    const r = await sqlite.execute(`${ITEM_SELECT} ORDER BY i.code LIMIT 200`);\n    return r.rows as unknown as Item[];\n  }\n  const like = `%${q.trim()}%`;\n  const r = await sqlite.execute({\n    sql: `${ITEM_SELECT}\n      WHERE i.name LIKE ? OR i.code LIKE ? OR i.category LIKE ? OR i.note LIKE ?\n      ORDER BY i.code LIMIT 200`,\n    args: [like, like, like, like],\n  });\n  return r.rows as unknown as Item[];\n}\n\nexport async function getItemByCode(code: string): Promise<Item | null> {\n  const r = await sqlite.execute({\n    sql: `${ITEM_SELECT} WHERE i.code = ? COLLATE NOCASE`,\n    args: [code],\n  });\n  return (r.rows[0] as unknown as Item) ?? null;\n}\n\nasync function nextItemCode(): Promise<string> {\n  const r = await sqlite.execute(\n    \"SELECT code FROM items WHERE code LIKE 'T-%' ORDER BY CAST(SUBSTR(code, 3) AS INTEGER) DESC LIMIT 1\",\n  );\n  const last = r.rows[0]?.code as string | undefined;\n  const n = last ? parseInt(last.slice(2), 10) + 1 : 1;\n  return `T-${String(n).padStart(4, \"0\")}`;\n}\n\nexport async function createItem(data: {\n  name: string;\n  category?: string;\n  note?: string;\n  photo_key?: string;\n  home_location_code?: string;\n  actor?: string;\n}): Promise<Item> {\n  const code = await nextItemCode();\n  let homeId: number | null = null;\n  if (data.home_location_code) {\n    const loc = await getLocationByCode(data.home_location_code);\n    if (!loc) throw new Error(`ไม่พบตำแหน่ง ${data.home_location_code}`);\n    homeId = loc.id;\n  }\n  await sqlite.execute({\n    sql: `INSERT INTO items (code, name, category, note, photo_key, home_location_id)\n          VALUES (?, ?, ?, ?, ?, ?)`,\n    args: [code, data.name, data.category ?? null, data.note ?? null, data.photo_key ?? null, homeId],\n  });\n  const item = (await getItemByCode(code))!;\n  await addMovement(item.id, \"register\", data.actor, `ลงทะเบียน${homeId ? ` ที่ ${data.home_location_code}` : \"\"}`);\n  return item;\n}\n\nexport async function updateItem(code: string, data: {\n  name?: string;\n  category?: string;\n  note?: string;\n  photo_key?: string;\n  home_location_code?: string | null;\n  actor?: string;\n}): Promise<Item | null> {\n  const item = await getItemByCode(code);\n  if (!item) return null;\n  let homeId = item.home_location_id;\n  if (data.home_location_code !== undefined) {\n    if (data.home_location_code === null || data.home_location_code === \"\") {\n      homeId = null;\n    } else {\n      const loc = await getLocationByCode(data.home_location_code);\n      if (!loc) throw new Error(`ไม่พบตำแหน่ง ${data.home_location_code}`);\n      homeId = loc.id;\n    }\n    if (homeId !== item.home_location_id) {\n      await addMovement(item.id, \"move\", data.actor, `ย้ายไป ${data.home_location_code ?? \"(ไม่ระบุ)\"}`);\n    }\n  }\n  await sqlite.execute({\n    sql: `UPDATE items SET name = ?, category = ?, note = ?, photo_key = ?, home_location_id = ? WHERE id = ?`,\n    args: [\n      data.name ?? item.name,\n      data.category !== undefined ? data.category : item.category,\n      data.note !== undefined ? data.note : item.note,\n      data.photo_key !== undefined ? data.photo_key : item.photo_key,\n      homeId,\n      item.id,\n    ],\n  });\n  return await getItemByCode(code);\n}\n\nexport async function deleteItem(code: string): Promise<boolean> {\n  const item = await getItemByCode(code);\n  if (!item) return false;\n  await sqlite.batch([\n    { sql: \"DELETE FROM movements WHERE item_id = ?\", args: [item.id] },\n    { sql: \"DELETE FROM items WHERE id = ?\", args: [item.id] },\n  ]);\n  return true;\n}\n\n// ---------- Checkout / Checkin ----------\n\nexport async function checkoutItem(code: string, actor: string, note?: string): Promise<Item | null> {\n  const item = await getItemByCode(code);\n  if (!item) return null;\n  await sqlite.execute({\n    sql: \"UPDATE items SET status = 'borrowed', borrowed_by = ? WHERE id = ?\",\n    args: [actor, item.id],\n  });\n  await addMovement(item.id, \"checkout\", actor, note);\n  return await getItemByCode(code);\n}\n\nexport async function checkinItem(code: string, actor?: string, note?: string): Promise<Item | null> {\n  const item = await getItemByCode(code);\n  if (!item) return null;\n  await sqlite.execute({\n    sql: \"UPDATE items SET status = 'stored', borrowed_by = NULL WHERE id = ?\",\n    args: [item.id],\n  });\n  await addMovement(item.id, \"checkin\", actor, note);\n  return await getItemByCode(code);\n}\n\n// ---------- Categories / Labels ----------\n\nexport async function listCategories(): Promise<string[]> {\n  const r = await sqlite.execute(\n    \"SELECT DISTINCT category FROM items WHERE category IS NOT NULL AND category != '' ORDER BY category\",\n  );\n  return r.rows.map((row) => row.category as string);\n}\n\n/** บันทึกว่าป้ายรหัสเหล่านี้ถูกปริ้นแล้ว (ทั้ง items และ locations) */\nexport async function markLabelsPrinted(codes: string[]) {\n  if (codes.length === 0) return;\n  const ph = codes.map(() => \"?\").join(\",\");\n  await sqlite.batch([\n    { sql: `UPDATE items SET label_printed_at = datetime('now') WHERE code IN (${ph})`, args: codes },\n    { sql: `UPDATE locations SET label_printed_at = datetime('now') WHERE code IN (${ph})`, args: codes },\n  ]);\n}\n\n// ---------- Movements ----------\n\nexport async function addMovement(itemId: number, action: string, actor?: string | null, note?: string | null) {\n  await sqlite.execute({\n    sql: \"INSERT INTO movements (item_id, action, actor, note) VALUES (?, ?, ?, ?)\",\n    args: [itemId, action, actor ?? null, note ?? null],\n  });\n}\n\nexport async function itemHistory(itemId: number): Promise<Movement[]> {\n  const r = await sqlite.execute({\n    sql: \"SELECT * FROM movements WHERE item_id = ? ORDER BY id DESC LIMIT 50\",\n    args: [itemId],\n  });\n  return r.rows as unknown as Movement[];\n}\n",[],[152,301,293],"database","99b12697-2ee9-4cf4-bc6a-427a34018d15","migrations.ts","a700582c-7e71-11f1-91b2-1607ee4eb77e",30,["D",1783924187349],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n  await sqlite.batch([\n    `CREATE TABLE IF NOT EXISTS locations (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      code TEXT NOT NULL UNIQUE,\n      name TEXT NOT NULL,\n      note TEXT,\n      photo_key TEXT,\n      created_at TEXT NOT NULL DEFAULT (datetime('now'))\n    )`,\n    `CREATE TABLE IF NOT EXISTS items (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      code TEXT NOT NULL UNIQUE,\n      name TEXT NOT NULL,\n      category TEXT,\n      note TEXT,\n      photo_key TEXT,\n      home_location_id INTEGER REFERENCES locations(id),\n      status TEXT NOT NULL DEFAULT 'stored',\n      borrowed_by TEXT,\n      created_at TEXT NOT NULL DEFAULT (datetime('now'))\n    )`,\n    `CREATE TABLE IF NOT EXISTS movements (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      item_id INTEGER NOT NULL REFERENCES items(id),\n      action TEXT NOT NULL,\n      actor TEXT,\n      note TEXT,\n      created_at TEXT NOT NULL DEFAULT (datetime('now'))\n    )`,\n    `CREATE INDEX IF NOT EXISTS idx_items_name ON items(name)`,\n    `CREATE INDEX IF NOT EXISTS idx_items_home ON items(home_location_id)`,\n    `CREATE INDEX IF NOT EXISTS idx_movements_item ON movements(item_id)`,\n  ]);\n\n  // เพิ่มคอลัมน์ใหม่ (รันซ้ำได้ — ข้ามถ้ามีอยู่แล้ว)\n  const alters = [\n    \"ALTER TABLE items ADD COLUMN label_printed_at TEXT\",\n    \"ALTER TABLE locations ADD COLUMN label_printed_at TEXT\",\n    \"ALTER TABLE locations ADD COLUMN color TEXT\",\n  ];\n  for (const sql of alters) {\n    try {\n      await sqlite.execute(sql);\n    } catch {\n      // คอลัมน์มีอยู่แล้ว\n    }\n  }\n}\n",[],[152,301,303],"d9cfb2c4-abed-4a62-a966-6b21e805c1f9",4,["D",1783916191928],[169,170],[152,301],["D",1783916188403],[168,171],[152],["D",1783916173471],["D",1789524079207],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_129":356,"_357":358,"_359":360,"_361":25,"_362":25,"_363":25,"_364":60,"_365":-5,"_366":-7,"_367":-7,"_368":64,"_369":25,"_370":25,"_371":-5,"_372":25,"_373":25,"_374":25,"_375":-5},"ENV",{"_327":328,"_329":330,"_331":91,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355},"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 · v38