Smart Inventory — ระบบจัดเก็บอุปกรณ์

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_333":334,"_335":336},"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",53,"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","backend/database/migrations.ts","latestPath","fileId","a700582c-7e71-11f1-91b2-1607ee4eb77e","name","migrations.ts","fileType","script","content","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","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 \"ALTER TABLE items ADD COLUMN label_done_at TEXT\",\n \"ALTER TABLE locations ADD COLUMN label_done_at TEXT\",\n ];\n for (const sql of alters) {\n try {\n await sqlite.execute(sql);\n } catch {\n // คอลัมน์มีอยู่แล้ว\n }\n }\n}\n","createdAt",["D",1784001175382],"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":328,"_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":329,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":330,"_85":331,"_87":332,"_89":25},"tree",[167,172,185],"files",[167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186],"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":325,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_193":326,"_27":327},{"_44":320,"_32":315,"_30":309,"_138":153,"_42":43,"_41":321,"_140":60,"_39":322,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_193":323,"_27":324},{"_44":316,"_32":33,"_30":31,"_138":309,"_42":43,"_41":14,"_140":60,"_39":317,"_13":139,"_34":35,"_36":38,"_24":25,"_143":-5,"_193":318,"_27":319},{"_44":306,"_32":307,"_30":308,"_138":309,"_42":43,"_41":310,"_140":25,"_39":311,"_13":154,"_34":35,"_36":312,"_24":25,"_143":-5,"_193":313,"_27":314},{"_44":298,"_32":299,"_30":58,"_138":153,"_42":43,"_41":300,"_140":25,"_39":301,"_13":154,"_34":302,"_36":303,"_24":25,"_143":-5,"_193":304,"_27":305},{"_44":145,"_32":146,"_30":147,"_138":-5,"_42":43,"_41":148,"_140":60,"_39":295,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_193":296,"_27":297},{"_44":291,"_32":224,"_30":218,"_138":147,"_42":43,"_41":279,"_140":60,"_39":292,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_193":293,"_27":294},{"_44":283,"_32":284,"_30":285,"_138":218,"_42":43,"_41":286,"_140":60,"_39":287,"_13":139,"_34":35,"_36":288,"_24":25,"_143":-5,"_193":289,"_27":290},{"_44":274,"_32":275,"_30":276,"_138":218,"_42":43,"_41":277,"_140":60,"_39":278,"_13":279,"_34":35,"_36":280,"_24":25,"_143":-5,"_193":281,"_27":282},{"_44":266,"_32":267,"_30":268,"_138":218,"_42":43,"_41":269,"_140":60,"_39":270,"_13":148,"_34":35,"_36":271,"_24":25,"_143":-5,"_193":272,"_27":273},{"_44":257,"_32":258,"_30":259,"_138":218,"_42":43,"_41":260,"_140":25,"_39":261,"_13":262,"_34":35,"_36":263,"_24":25,"_143":-5,"_193":264,"_27":265},{"_44":249,"_32":250,"_30":251,"_138":218,"_42":43,"_41":252,"_140":60,"_39":253,"_13":64,"_34":35,"_36":254,"_24":25,"_143":-5,"_193":255,"_27":256},{"_44":241,"_32":242,"_30":243,"_138":218,"_42":43,"_41":244,"_140":60,"_39":245,"_13":148,"_34":35,"_36":246,"_24":25,"_143":-5,"_193":247,"_27":248},{"_44":233,"_32":234,"_30":235,"_138":218,"_42":43,"_41":236,"_140":60,"_39":237,"_13":154,"_34":35,"_36":238,"_24":25,"_143":-5,"_193":239,"_27":240},{"_44":225,"_32":226,"_30":227,"_138":218,"_42":43,"_41":228,"_140":60,"_39":229,"_13":148,"_34":35,"_36":230,"_24":25,"_143":-5,"_193":231,"_27":232},{"_44":215,"_32":216,"_30":217,"_138":218,"_42":43,"_41":219,"_140":60,"_39":220,"_13":148,"_34":35,"_36":221,"_24":25,"_143":-5,"_193":222,"_27":223},{"_44":207,"_32":208,"_30":209,"_138":147,"_42":43,"_41":210,"_140":60,"_39":211,"_13":154,"_34":20,"_36":212,"_24":25,"_143":-5,"_193":213,"_27":214},{"_44":199,"_32":200,"_30":201,"_138":147,"_42":43,"_41":202,"_140":60,"_39":203,"_13":64,"_34":35,"_36":204,"_24":25,"_143":-5,"_193":205,"_27":206},{"_44":135,"_32":136,"_30":137,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":196,"_13":64,"_34":142,"_36":-5,"_24":25,"_143":-5,"_193":197,"_27":198},{"_44":187,"_32":188,"_30":189,"_138":137,"_42":43,"_41":190,"_140":25,"_39":191,"_13":154,"_34":35,"_36":192,"_24":25,"_143":-5,"_193":194,"_27":195},"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,188],["D",1783916188808],[186],[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();\n",[],[146,200],"58de6aa9-45d0-4ffc-be89-aeda9cabc55a","index.html","b4bf696c-7e71-11f1-948b-1607ee4eb77e",20,["D",1783920814626],"\n\n\n \n \n Smart Inventory — ระบบจัดเก็บอุปกรณ์\n \n \n \n \n \n \n\n\n

\n \n\n\n",[],[146,208],"54c17914-d782-4a97-a8fd-b8c29390ad5e","lib.tsx","c026e3a2-7e71-11f1-95f4-1607ee4eb77e","a10b3cc0-7e71-11f1-b3f0-1607ee4eb77e",40,["D",1783925295826],"/** @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(path: string, opts?: RequestInit): Promise {\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 {\n const dataUrl = await new Promise((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 Spinner({ label }: { label?: string }) {\n return (\n

\n \n {label ?? \"กำลังโหลด…\"}\n

\n );\n}\n\n/** รูปที่กดค้างเพื่อขยายชั่วคราว (ปล่อยนิ้ว = ปิด) */\nexport function Zoomable({ src, className }: { src: string; className?: string }) {\n const [open, setOpen] = useState(false);\n const timer = useRef(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 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

\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

\n {props.photoKey && (\n \n )}\n \n \n {busy ? \"รอสักครู่…\" : \"ถ่ายรูป\"}\n handle(e.target.files?.[0])} />\n \n \n \n แกลเลอรี\n handle(e.target.files?.[0])} />\n \n {props.photoKey && (\n \n )}\n

\n );\n}\n\nexport function StatusBadge({ item }: { item: Item }) {\n return item.status === \"borrowed\" ? (\n \n \n ยืมโดย {item.borrowed_by}\n \n ) : (\n \n \n อยู่ที่เก็บ\n \n );\n}\n\nexport function LocationPin({ item }: { item: Item }) {\n return (\n \n \n {item.location_code ? `${item.location_code} · ${item.location_name}` : \"ยังไม่กำหนดตำแหน่ง\"}\n \n );\n}\n\nexport function ItemCard(props: { item: Item; onClick?: () => void; children?: any }) {\n const { item } = props;\n return (\n \n {item.photo_key ? (\n \n ) : (\n

\n \n

\n )}\n

\n {item.code}\n \n

{item.name}

\n \n

\n {props.children}\n \n );\n}\n",[],[146,224,216],"components","d79b168d-dc03-4b3c-a6fd-160bb55b1945","SearchTab.tsx","c3e6005e-7e71-11f1-9ad9-1607ee4eb77e",47,["D",1783925333515],"/** @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, Spinner } from \"./lib.tsx\";\nimport { ItemDetail } from \"./ItemDetail.tsx\";\n\nexport function SearchTab() {\n const [q, setQ] = useState(\"\");\n const [items, setItems] = useState([]);\n const [loading, setLoading] = useState(false);\n const [selected, setSelected] = useState(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 setSelected(null)} />;\n }\n\n return (\n

\n setQ(e.target.value)}\n placeholder=\"พิมพ์ชื่อของ รหัส หรือหมวดหมู่ เช่น ประแจ, T-0042\"\n className={`${input} !py-3 !text-base shadow-sm`}\n />\n {loading && }\n {!loading && items.length === 0 && (\n

\n {q ? `ไม่พบ \"${q}\"` : \"ยังไม่มีของในระบบ — ไปที่แท็บ ของ เพื่อลงทะเบียน\"}\n

\n )}\n {items.map((item) => (\n setSelected(item.code)} />\n ))}\n

\n );\n}\n",[],[146,224,226],"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(null);\n const [manual, setManual] = useState(\"\");\n const [scanning, setScanning] = useState(false);\n const [detail, setDetail] = useState(null);\n const scannerRef = useRef(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 setDetail(null)} />;\n }\n\n return (\n

\n {!scanning ? (\n \n ) : (\n \n )}\n

\n {\n e.preventDefault();\n if (manual.trim()) resolve(manual);\n }}\n >\n setManual(e.target.value)}\n placeholder=\"หรือพิมพ์รหัส เช่น T-0001, A-01-2\"\n className={input}\n />\n \n \n

\n\n {result?.type === \"item\" && (\n

\n พบของ — เก็บที่ \n {result.item.location_code\n ? `${result.item.location_code} · ${result.item.location_name}`\n : \"ยังไม่กำหนดตำแหน่ง\"}\n \n

\n setDetail(result.item.code)} />\n

\n )}\n\n {result?.type === \"location\" && (\n

\n ตำแหน่ง {result.location.code} · {result.location.name} มีของ {result.items.length} ชิ้น\n

\n {result.items.map((item) => (\n setDetail(item.code)} />\n ))}\n

\n )}\n\n {result?.type === \"not_found\" && (\n

\n ไม่พบรหัส \"{result.code}\" ในระบบ\n

\n )}\n

\n );\n}\n",[],[146,224,234],"518c737a-781f-4555-9d01-5abb9a1585a3","LocationsTab.tsx","d773dee8-7e71-11f1-8792-1607ee4eb77e",52,["D",1783926150743],"/** @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, btnSoft, card, input, PhotoInput, Spinner, Zoomable, ZONE_COLORS } from \"./lib.tsx\";\nimport { LocationDetail } from \"./LocationDetail.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

สีประจำตำแหน่ง (แสดงบนป้าย QR ช่วยให้จำโซนง่าย)

\n \n {ZONE_COLORS.map((c) => (\n

\n );\n}\n\nexport function LocationsTab() {\n const [locations, setLocations] = useState(null);\n const [adding, setAdding] = useState(false);\n const [form, setForm] = useState(EMPTY);\n const [saving, setSaving] = useState(false);\n const [editCode, setEditCode] = useState(null);\n const [editForm, setEditForm] = useState(EMPTY);\n const [detail, setDetail] = useState(null);\n\n const load = () => api(\"/api/locations\").then(setLocations);\n useEffect(() => { load(); }, []);\n\n if (detail) {\n return { setDetail(null); load(); }} />;\n }\n\n const startEdit = (loc: Location) => {\n setEditCode(loc.code);\n setEditForm({ code: loc.code, name: loc.name, note: loc.note ?? \"\", photo_key: loc.photo_key, color: loc.color });\n };\n\n return (\n

\n \n\n {adding && (\n {\n e.preventDefault();\n if (!form.photo_key) {\n alert(\"ต้องถ่ายรูปตำแหน่ง/ชั้นวางก่อนบันทึก จะได้หาเจอง่าย\");\n return;\n }\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, color })} />\n

setForm({ ...form, note: e.target.value })}\n            placeholder=\"หมายเหตุ\" />\n          <PhotoInput photoKey={form.photo_key} onChange={(k) => setForm({ ...form, photo_key: k })} />\n          {!form.photo_key && <div className=\"text-[11px] text-rose-500\">* ต้องมีรูปถึงจะบันทึกได้</div>}\n          <button disabled={saving || !form.photo_key} className={btnPrimary}>\n            {saving ? \"กำลังบันทึก…\" : \"บันทึก\"}\n          </button>\n        </form>\n      )}\n\n      {locations === null ? (\n        <Spinner />\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                <div className=\"cursor-pointer\" onClick={() => setDetail(loc.code)}>\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>\n                <div className=\"flex-1 min-w-0 cursor-pointer\" onClick={() => setDetail(loc.code)}>\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={() => (editCode === loc.code ? setEditCode(null) : startEdit(loc))}>\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4\">\n                    <path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\" />\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\n              {editCode === loc.code && (\n                <form\n                  className=\"mt-3 pt-3 border-t border-slate-100 space-y-2.5\"\n                  onSubmit={async (e) => {\n                    e.preventDefault();\n                    try {\n                      await api(`/api/locations/${loc.code}`, {\n                        method: \"PUT\",\n                        body: JSON.stringify({\n                          name: editForm.name,\n                          note: editForm.note,\n                          photo_key: editForm.photo_key,\n                          color: editForm.color,\n                        }),\n                      });\n                      setEditCode(null);\n                      await load();\n                    } catch (err) {\n                      alert(String(err));\n                    }\n                  }}\n                >\n                  <input required className={input} value={editForm.name}\n                    onChange={(e) => setEditForm({ ...editForm, name: e.target.value })} placeholder=\"ชื่อ *\" />\n                  <ColorPicker value={editForm.color} onChange={(color) => setEditForm({ ...editForm, color })} />\n                  <textarea className={input} value={editForm.note} rows={2}\n                    onChange={(e) => setEditForm({ ...editForm, note: e.target.value })} placeholder=\"หมายเหตุ\" />\n                  <PhotoInput photoKey={editForm.photo_key} onChange={(k) => setEditForm({ ...editForm, photo_key: k })} />\n                  <div className=\"flex gap-2\">\n                    <button className={btnPrimary}>บันทึกการแก้ไข</button>\n                    <button type=\"button\" className={btnSoft} onClick={() => setEditCode(null)}>ยกเลิก</button>\n                  </div>\n                </form>\n              )}\n            </div>\n          ))}\n        </>\n      )}\n    </div>\n  );\n}\n",[],[146,224,242],"5ba589d8-7622-479f-87f2-5149a74c03e7","LocationDetail.tsx","f8ead51c-7e86-11f1-900d-1607ee4eb77e",50,["D",1783925359195],"/** @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, card, ItemCard, Spinner, Zoomable } from \"./lib.tsx\";\nimport { ItemDetail } from \"./ItemDetail.tsx\";\n\n/** หน้ารายละเอียดตำแหน่ง: มีของอะไรอยู่บ้าง + สถานะแต่ละชิ้น */\nexport function LocationDetail(props: { code: string; onBack: () => void }) {\n  const [data, setData] = useState<(Location & { items: Item[] }) | null>(null);\n  const [detail, setDetail] = useState<string | null>(null);\n  const [error, setError] = useState(\"\");\n\n  const load = () => api(`/api/locations/${props.code}`).then(setData).catch((e) => setError(String(e)));\n  useEffect(() => { load(); }, [props.code]);\n\n  if (detail) {\n    return <ItemDetail code={detail} onBack={() => { setDetail(null); load(); }} />;\n  }\n  if (error) return <div className=\"text-rose-500 p-4 text-sm\">{error}</div>;\n  if (!data) return <Spinner />;\n\n  const borrowed = data.items.filter((i) => i.status === \"borrowed\");\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`}>\n        <div className=\"flex items-start gap-4\">\n          {data.photo_key ? (\n            <Zoomable src={`/api/photos/${data.photo_key}`} className=\"w-24 h-24 object-cover rounded-2xl\" />\n          ) : (\n            <div className=\"w-24 h-24 rounded-2xl flex items-center justify-center\"\n              style={{ backgroundColor: (data.color ?? \"#8b5cf6\") + \"18\", color: data.color ?? \"#c4b5fd\" }}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" className=\"w-9 h-9\">\n                <path d=\"M3 3h18v6H3zM3 15h18v6H3zM7 6h.01M7 18h.01\" />\n              </svg>\n            </div>\n          )}\n          <div className=\"min-w-0\">\n            <div className=\"flex items-center gap-1.5\">\n              {data.color && <span className=\"w-3 h-3 rounded-full\" style={{ backgroundColor: data.color }} />}\n              <span className=\"font-mono text-base font-bold\" style={{ color: data.color ?? \"#4f46e5\" }}>{data.code}</span>\n            </div>\n            <h2 className=\"text-lg font-bold text-slate-800 leading-snug\">{data.name}</h2>\n            {data.note && <div className=\"text-xs text-slate-400\">{data.note}</div>}\n            <div className=\"flex gap-2 mt-1.5 flex-wrap\">\n              <span className=\"text-[11px] font-medium bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full\">\n                ทั้งหมด {data.items.length} ชิ้น\n              </span>\n              <span className=\"text-[11px] font-medium bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full\">\n                อยู่ที่เก็บ {data.items.length - borrowed.length}\n              </span>\n              {borrowed.length > 0 && (\n                <span className=\"text-[11px] font-medium bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full\">\n                  ถูกยืม {borrowed.length}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {data.items.length === 0 && (\n        <div className=\"text-center text-slate-400 py-8 text-sm\">ยังไม่มีของในตำแหน่งนี้</div>\n      )}\n      {data.items.map((item) => (\n        <ItemCard key={item.id} item={item} onClick={() => setDetail(item.code)} />\n      ))}\n    </div>\n  );\n}\n",[],[146,224,250],"ab877562-33b1-4caa-ab5f-7a63a2179fe3","LabelsTab.tsx","df0261a2-7e71-11f1-b6f0-1607ee4eb77e",45,["D",1783925329697],7,"/** @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, Spinner } from \"./lib.tsx\";\n\ninterface Label {\n  code: string;\n  title: string;\n  sub: string;\n  kind: \"item\" | \"location\";\n  color: string | null;\n  printed: boolean;\n}\n\n/** ขนาดป้ายสติกเกอร์ (มม.) */\nconst SIZES = [\n  { id: \"xs\", name: \"จิ๋ว · 25×12 มม.\", detail: \"ติดก้านไขควง/ด้ามเครื่องมือ\", w: 25, h: 12 },\n  { id: \"s\", name: \"เล็ก · 38×21 มม.\", detail: \"ของชิ้นเล็ก\", w: 38.1, h: 21.2 },\n  { id: \"m\", name: \"มาตรฐาน · 52×30 มม.\", detail: \"แบบร้านค้า\", w: 52.5, h: 29.7 },\n  { id: \"l\", name: \"ใหญ่ · 70×36 มม.\", detail: \"ติดชั้นวาง\", w: 70, h: 36 },\n  { id: \"xl\", name: \"จัมโบ้ · 105×48 มม.\", detail: \"มองไกล\", w: 105, h: 48 },\n];\n\nconst MARGINS = [\n  { v: 5, name: \"5 มม.\" },\n  { v: 10, name: \"10 มม.\" },\n  { v: 15, name: \"15 มม.\" },\n];\n\nconst KIND_FILTERS = [\n  { id: \"all\", name: \"ทั้งหมด\" },\n  { id: \"item\", name: \"เฉพาะของ\" },\n  { id: \"location\", name: \"เฉพาะตำแหน่ง\" },\n] as const;\n\nconst PRINT_FILTERS = [\n  { id: \"all\", name: \"ทั้งหมด\" },\n  { id: \"unprinted\", name: \"ยังไม่ปริ้น\" },\n  { id: \"printed\", name: \"ปริ้นแล้ว\" },\n] as const;\n\n/** วาดป้าย 1 ใบเป็น canvas (สไตล์ป้ายร้านค้า — QR ดำ, ข้อความใช้สีโซน) */\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 accent = label.color ?? \"#000\";\n  const pad = 1.6 * S;\n\n  // แถบสีข้างซ้าย (ถ้ามีสีโซน) ช่วยกวาดตาเร็ว\n  if (label.color) {\n    ctx.fillStyle = label.color;\n    ctx.fillRect(0, 0, 1.2 * S, c.height);\n  }\n\n  const qrX = (label.color ? 1.2 * S : 0) + pad;\n  const qrSize = c.height - pad * 2;\n  ctx.imageSmoothingEnabled = false;\n  ctx.drawImage(qrImg, qrX, pad, qrSize, qrSize);\n\n  const tx = qrX + qrSize + pad * 0.8;\n  const tw = c.width - tx - pad;\n\n  // รหัส (สีโซน ตัวหนา)\n  const codeSize = Math.min(c.height * 0.26, tw / (label.code.length * 0.62));\n  ctx.fillStyle = accent;\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  ctx.fillStyle = \"#000\";\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 = `600 ${c.height * 0.12}px \"Noto Sans Thai\", sans-serif`;\n    ctx.fillStyle = label.color ?? \"#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 [sizeId, setSizeId] = useState(\"m\");\n  const [margin, setMargin] = useState(10);\n  const [kindFilter, setKindFilter] = useState<\"all\" | \"item\" | \"location\">(\"all\");\n  const [printFilter, setPrintFilter] = useState<\"all\" | \"unprinted\" | \"printed\">(\"all\");\n  const [filter, setFilter] = useState(\"\");\n  const [progress, setProgress] = useState(\"\");\n  const [loaded, setLoaded] = useState(false);\n\n  const loadAll = () =>\n    Promise.all([api<Item[]>(\"/api/items\"), api<Location[]>(\"/api/locations\")])\n      .then(([it, lo]) => { setItems(it); setLocations(lo); setLoaded(true); });\n  useEffect(() => { loadAll(); }, []);\n\n  const labels: Label[] = useMemo(() => [\n    ...locations.map((l) => ({\n      code: l.code, title: l.name, sub: \"ตำแหน่งเก็บ\",\n      kind: \"location\" as const, color: l.color, printed: !!l.label_printed_at,\n    })),\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, color: i.location_color ?? null, printed: !!i.label_printed_at,\n    })),\n  ], [items, locations]);\n\n  const shown = useMemo(() => {\n    const q = filter.trim().toLowerCase();\n    return labels.filter((l) =>\n      (kindFilter === \"all\" || l.kind === kindFilter) &&\n      (printFilter === \"all\" || (printFilter === \"printed\") === l.printed) &&\n      (!q || l.code.toLowerCase().includes(q) || l.title.toLowerCase().includes(q))\n    );\n  }, [labels, filter, kindFilter, printFilter]);\n\n  const size = SIZES.find((x) => x.id === sizeId)!;\n  // คำนวณตารางจากพื้นที่พิมพ์ได้จริง (A4 หักขอบ)\n  const cols = Math.max(1, Math.floor((210 - margin * 2) / size.w));\n  const rows = Math.max(1, Math.floor((297 - margin * 2) / size.h));\n  const perPage = cols * rows;\n  const chosen = labels.filter((l) => selected.has(l.code));\n  const pages = Math.ceil(chosen.length / perPage) || 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 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    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 - cols * size.w) / 2;\n    const my = (297 - rows * size.h) / 2;\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 % cols;\n      const row = Math.floor(idx / cols);\n      const canvas = renderLabel(qrImgs[i], chosen[i], size.w, size.h);\n      doc.addImage(canvas.toDataURL(\"image/jpeg\", 0.92), \"JPEG\", mx + col * size.w, my + row * size.h, size.w, size.h);\n      if (i % 20 === 19) {\n        setProgress(`กำลังจัดหน้า PDF… ${i + 1}/${chosen.length}`);\n        await new Promise((r) => setTimeout(r, 0));\n      }\n    }\n    doc.save(`qr-labels-${new Date().toISOString().slice(0, 10)}.pdf`);\n\n    // บันทึกสถานะ \"ปริ้นแล้ว\"\n    setProgress(\"กำลังบันทึกสถานะ…\");\n    try {\n      await api(\"/api/labels/printed\", { method: \"POST\", body: JSON.stringify({ codes: chosen.map((l) => l.code) }) });\n      await loadAll();\n      setSelected(new Set());\n    } catch {}\n    setProgress(\"\");\n  };\n\n  const chip = (active: boolean) =>\n    `px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${\n      active ? \"bg-indigo-600 text-white\" : \"bg-slate-100 text-slate-500 hover:bg-slate-200\"\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          {SIZES.map((x) => (\n            <button key={x.id} onClick={() => setSizeId(x.id)}\n              className={`text-left p-3 rounded-xl border transition-all ${\n                sizeId === x.id\n                  ? \"border-indigo-500 bg-indigo-50 ring-1 ring-indigo-500\"\n                  : \"border-slate-200 hover:border-slate-300\"\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 className=\"flex items-center gap-2 flex-wrap\">\n          <span className=\"text-xs text-slate-400\">ขอบกระดาษ:</span>\n          {MARGINS.map((m) => (\n            <button key={m.v} onClick={() => setMargin(m.v)} className={chip(margin === m.v)}>{m.name}</button>\n          ))}\n          <span className=\"text-xs text-slate-400 ml-auto\">= {perPage} ดวง/หน้า ({cols}×{rows})</span>\n        </div>\n      </div>\n\n      {/* เลือกป้าย */}\n      <div className={`${card} p-4 space-y-3`}>\n        <div className=\"flex gap-1.5 flex-wrap\">\n          {KIND_FILTERS.map((f) => (\n            <button key={f.id} onClick={() => setKindFilter(f.id)} className={chip(kindFilter === f.id)}>{f.name}</button>\n          ))}\n          <span className=\"w-px bg-slate-200 mx-1\" />\n          {PRINT_FILTERS.map((f) => (\n            <button key={f.id} onClick={() => setPrintFilter(f.id)} className={chip(printFilter === f.id)}>{f.name}</button>\n          ))}\n        </div>\n        <input value={filter} onChange={(e) => setFilter(e.target.value)}\n          placeholder=\"กรองรายการ… (ชื่อหรือรหัส)\" className={input} />\n        <div className=\"flex gap-2 flex-wrap\">\n          <button onClick={() => setSelected((prev) => { const n = new Set(prev); shown.forEach((l) => n.add(l.code)); return n; })}\n            className={`${btnSoft} !py-1.5 !px-3 !text-xs`}>\n            เลือกที่แสดงทั้งหมด ({shown.length})\n          </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          {!loaded && <Spinner />}\n          {loaded && 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 type=\"checkbox\" checked={selected.has(l.code)} onChange={() => toggle(l.code)}\n                className=\"w-4 h-4 accent-indigo-600\" />\n              {l.color\n                ? <span className=\"w-2.5 h-2.5 rounded-full shrink-0\" style={{ backgroundColor: l.color }} />\n                : <span className=\"w-2.5 h-2.5 rounded-full shrink-0 bg-slate-200\" />}\n              <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0 ${\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 shrink-0\">{l.code}</span>\n              <span className=\"truncate text-slate-700 flex-1\">{l.title}</span>\n              {l.printed && (\n                <span className=\"text-[10px] text-emerald-500 shrink-0\" title=\"ปริ้นแล้ว\">✓ ปริ้นแล้ว</span>\n              )}\n            </label>\n          ))}\n          {loaded && 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</>}\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        หลังดาวน์โหลด ระบบจะติ๊ก \"ปริ้นแล้ว\" ให้อัตโนมัติ — คราวหน้ากดฟิลเตอร์ \"ยังไม่ปริ้น\" จะเห็นเฉพาะของใหม่ ·\n        ตอนพิมพ์เลือก \"Actual size\" (อย่าใช้ Fit to page)\n      </p>\n    </div>\n  );\n}\n",[],[146,224,258],"0c42d87c-2a74-454e-af23-8e03a7d0c38f","ItemsTab.tsx","d10f3476-7e71-11f1-b904-1607ee4eb77e",51,["D",1783925399146],"/** @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, Spinner } 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[] | null>(null);\n  const [locations, setLocations] = useState<Location[]>([]);\n  const [categories, setCategories] = useState<string[]>([]);\n  const [adding, setAdding] = useState(false);\n  const [locked, setLocked] = useState(false);\n  const [justAdded, setJustAdded] = useState(\"\");\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  const lockedLoc = locations.find((l) => l.code === form.home_location_code);\n\n  return (\n    <div className=\"space-y-3\">\n      <button onClick={() => { setAdding(!adding); setJustAdded(\"\"); }} 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            if (!form.photo_key) {\n              alert(\"ต้องถ่ายรูปหรือเลือกรูปก่อนบันทึก\");\n              return;\n            }\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              const summary = created.length === 1\n                ? `✓ ${codes[0]} ${created[0].name}`\n                : `✓ ${created.length} ชิ้น (${codes[0]}–${codes[codes.length - 1]}) ${created[0].name}`;\n              if (locked) {\n                // โหมดล็อคตำแหน่ง: เพิ่มต่อเนื่อง — เก็บตำแหน่ง+หมวดไว้ เคลียร์แค่ชื่อ/รูป/หมายเหตุ\n                setJustAdded(summary);\n                setForm({ ...EMPTY, home_location_code: form.home_location_code, category: form.category });\n              } else {\n                alert(`ลงทะเบียนแล้ว: ${summary}\\nอย่าลืมพิมพ์ป้าย QR ที่แท็บ ป้าย QR`);\n                setForm(EMPTY);\n                setAdding(false);\n              }\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          {/* โหมดล็อคตำแหน่ง */}\n          <button\n            type=\"button\"\n            onClick={() => setLocked(!locked)}\n            className={`w-full flex items-center gap-2 p-2.5 rounded-xl border text-left text-sm transition-colors ${\n              locked ? \"border-indigo-500 bg-indigo-50 text-indigo-700\" : \"border-slate-200 text-slate-500 hover:border-slate-300\"\n            }`}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"w-4 h-4 shrink-0\">\n              {locked\n                ? <path d=\"M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4\" />\n                : <path d=\"M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 9.9-1\" />}\n            </svg>\n            <span className=\"flex-1\">\n              <b>โหมดล็อคตำแหน่ง</b>{locked && lockedLoc ? ` — ${lockedLoc.code} · ${lockedLoc.name}` : \"\"}\n              <span className=\"block text-[11px] opacity-70\">\n                {locked ? \"เพิ่มต่อเนื่อง: ใส่แค่ชื่อ + รูป กดบันทึกแล้วฟอร์มพร้อมชิ้นถัดไปทันที\" : \"เปิดเมื่อจะเพิ่มของทั้งโต๊ะรวดเดียว\"}\n              </span>\n            </span>\n            <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${locked ? \"bg-indigo-600 text-white\" : \"bg-slate-100\"}`}>\n              {locked ? \"เปิด\" : \"ปิด\"}\n            </span>\n          </button>\n\n          {justAdded && (\n            <div className=\"bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs rounded-xl px-3 py-2\">\n              {justAdded} — พร้อมเพิ่มชิ้นถัดไป\n            </div>\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          <PhotoInput photoKey={form.photo_key} onChange={(k) => setForm({ ...form, photo_key: k })} />\n          {!form.photo_key && <div className=\"text-[11px] text-rose-500\">* ต้องมีรูปถึงจะบันทึกได้</div>}\n\n          <div className=\"flex gap-2.5\">\n            <select required className={`${input} flex-1`} value={form.home_location_code}\n              disabled={locked && !!form.home_location_code && !!justAdded}\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-24\">\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          {!locked && (\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              <textarea className={input} value={form.note} rows={2}\n                onChange={(e) => setForm({ ...form, note: e.target.value })}\n                placeholder=\"หมายเหตุ\" />\n            </>\n          )}\n\n          <button disabled={saving || !form.photo_key} className={`${btnPrimary} w-full`}>\n            {saving ? \"กำลังบันทึก…\" : form.quantity > 1 ? `บันทึก ${form.quantity} ชิ้น` : locked ? \"บันทึก แล้วเพิ่มชิ้นถัดไป\" : \"ลงทะเบียน\"}\n          </button>\n        </form>\n      )}\n\n      {items === null ? (\n        <Spinner />\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        </>\n      )}\n    </div>\n  );\n}\n",[],[146,224,267],"727d1ede-4b28-43f1-95c5-89840eb06a66","ItemDetail.tsx","e925598c-7e71-11f1-8bce-1607ee4eb77e",49,["D",1783925336594],5,"/** @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, Spinner, 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 <Spinner />;\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,224,275],"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,224,284],"4b31604f-c40a-4f3d-affd-1f04f7a0c8bd",["D",1783916192316],[174,175,176,177,178,179,180,181,182],[146,224],["D",1783916189244],[173,183,184],[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,299],"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,315,307],"database","00c549e8-8c84-4a1a-b12a-aa64d97898ef",["D",1784001175382],[],[152,315,33],"d9cfb2c4-abed-4a62-a966-6b21e805c1f9",4,["D",1783916191928],[169,170],[152,315],["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":366,"_367":368,"_369":370,"_371":25,"_372":25,"_373":25,"_374":60,"_375":-5,"_376":-7,"_377":-7,"_378":64,"_379":25,"_380":25,"_381":-5,"_382":25,"_383":25,"_384":25,"_385":-5},"ENV",{"_337":338,"_339":340,"_341":91,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365},"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 · v53