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

\n \n\n\n",[],[96,113],"4b31604f-c40a-4f3d-affd-1f04f7a0c8bd","components","a10b3cc0-7e71-11f1-b3f0-1607ee4eb77e",5,["D",1783916192316],[128,129,130,131,132,133,134,135,136],[96,122],{"_35":202,"_13":203,"_38":204,"_40":123,"_42":43,"_44":205,"_46":47,"_48":206,"_17":50,"_51":52,"_53":207,"_55":56,"_57":-5,"_82":208,"_18":209},{"_35":194,"_13":195,"_38":196,"_40":123,"_42":43,"_44":197,"_46":47,"_48":198,"_17":124,"_51":52,"_53":199,"_55":56,"_57":-5,"_82":200,"_18":201},{"_35":186,"_13":187,"_38":188,"_40":123,"_42":43,"_44":189,"_46":47,"_48":190,"_17":91,"_51":52,"_53":191,"_55":56,"_57":-5,"_82":192,"_18":193},{"_35":177,"_13":178,"_38":179,"_40":123,"_42":43,"_44":180,"_46":47,"_48":181,"_17":182,"_51":52,"_53":183,"_55":56,"_57":-5,"_82":184,"_18":185},{"_35":169,"_13":170,"_38":171,"_40":123,"_42":43,"_44":172,"_46":47,"_48":173,"_17":72,"_51":52,"_53":174,"_55":56,"_57":-5,"_82":175,"_18":176},{"_35":161,"_13":162,"_38":163,"_40":123,"_42":43,"_44":164,"_46":47,"_48":165,"_17":91,"_51":52,"_53":166,"_55":56,"_57":-5,"_82":167,"_18":168},{"_35":153,"_13":154,"_38":155,"_40":123,"_42":43,"_44":156,"_46":47,"_48":157,"_17":117,"_51":52,"_53":158,"_55":56,"_57":-5,"_82":159,"_18":160},{"_35":145,"_13":146,"_38":147,"_40":123,"_42":43,"_44":148,"_46":47,"_48":149,"_17":91,"_51":52,"_53":150,"_55":56,"_57":-5,"_82":151,"_18":152},{"_35":137,"_13":138,"_38":139,"_40":123,"_42":43,"_44":140,"_46":47,"_48":141,"_17":91,"_51":52,"_53":142,"_55":56,"_57":-5,"_82":143,"_18":144},"54c17914-d782-4a97-a8fd-b8c29390ad5e","lib.tsx","c026e3a2-7e71-11f1-95f4-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",[],[96,122,138],"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",[],[96,122,146],"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",[],[96,122,154],"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",[],[96,122,162],"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",[],[96,122,170],"45a4032e-c2a2-4108-b53f-8adec2570da9","LabelsTab.tsx","df0261a2-7e71-11f1-b6f0-1607ee4eb77e",63,["D",1784002994314],13,"/** @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, Zoomable } 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  done: boolean;\n  createdAt: string;\n  photoKey: string | null;\n}\n\n/** ขนาดป้ายสติกเกอร์ (มม.) */\nconst SIZES = [\n  { id: \"xs\", name: \"จิ๋ว · 25×12 มม.\", short: \"จิ๋ว\", detail: \"ติดก้านไขควง/ด้ามเครื่องมือ\", w: 25, h: 12 },\n  { id: \"s\", name: \"เล็ก · 38×21 มม.\", short: \"เล็ก\", detail: \"ของชิ้นเล็ก\", w: 38.1, h: 21.2 },\n  { id: \"m\", name: \"มาตรฐาน · 52×30 มม.\", short: \"กลาง\", detail: \"แบบร้านค้า\", w: 52.5, h: 29.7 },\n  { id: \"l\", name: \"ใหญ่ · 70×36 มม.\", short: \"ใหญ่\", detail: \"ติดชั้นวาง\", w: 70, h: 36 },\n  { id: \"xl\", name: \"จัมโบ้ · 105×48 มม.\", short: \"จัมโบ้\", 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: \"recent\", name: \"🆕 เพิ่มล่าสุด\" },\n  { id: \"unprinted\", name: \"ยังไม่ปริ้น\" },\n  { id: \"printed\", name: \"ปริ้นแล้ว\" },\n  { id: \"done\", name: \"🗄 นำออกแล้ว\" },\n] as const;\n\n/** สีตัวอักษรขาว/ดำ ตามความสว่างของพื้นหลัง */\nfunction textColorFor(bg: string): string {\n  const r = parseInt(bg.slice(1, 3), 16);\n  const g = parseInt(bg.slice(3, 5), 16);\n  const b = parseInt(bg.slice(5, 7), 16);\n  return 0.299 * r + 0.587 * g + 0.114 * b > 150 ? \"#000\" : \"#fff\";\n}\n\nfunction gridFor(sizeId: string, margin: number) {\n  const size = SIZES.find((x) => x.id === sizeId)!;\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  return { size, cols, rows, perPage: cols * rows };\n}\n\n/**\n * วาดป้าย 1 ใบเป็น canvas — layout คำนวณพื้นที่จริง ไม่มีตัวอักษรทับกัน\n * รหัสอยู่บนแถบพื้นหลังสีโซน (ตัวอักษรขาว/ดำอัตโนมัติ), ป้ายจิ๋วแสดงแค่รหัส + ชื่อ 1 บรรทัด\n */\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 tiny = hMm < 16;\n  const pad = Math.max(0.8, hMm * 0.055) * S;\n\n  // QR ซ้าย\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.9;\n  const tw = c.width - tx - pad;\n  if (tw <= 0) return c;\n\n  // --- แถบรหัสพื้นหลังสี ---\n  let codeSize = tiny ? c.height * 0.30 : c.height * 0.22;\n  ctx.font = `700 ${codeSize}px \"JetBrains Mono\", monospace`;\n  let codeW = ctx.measureText(label.code).width;\n  if (codeW > tw * 0.96) {\n    codeSize *= (tw * 0.96) / codeW;\n    ctx.font = `700 ${codeSize}px \"JetBrains Mono\", monospace`;\n    codeW = ctx.measureText(label.code).width;\n  }\n  const chipPadX = codeSize * 0.35;\n  const chipH = codeSize * 1.45;\n  const chipW = Math.min(tw, codeW + chipPadX * 2);\n  const chipY = pad * 0.8;\n  ctx.textBaseline = \"middle\";\n  if (label.color) {\n    ctx.fillStyle = label.color;\n    const r = chipH * 0.22;\n    ctx.beginPath();\n    (ctx as any).roundRect(tx, chipY, chipW, chipH, r);\n    ctx.fill();\n    ctx.fillStyle = textColorFor(label.color);\n  } else {\n    ctx.fillStyle = \"#000\";\n  }\n  ctx.fillText(label.code, tx + (label.color ? chipPadX : 0), chipY + chipH / 2);\n\n  // --- พื้นที่ที่เหลือใต้แถบรหัส ---\n  let y = chipY + chipH + pad * 0.45;\n  const bottom = c.height - pad * 0.8;\n  ctx.textBaseline = \"top\";\n\n  // sub (แสดงเฉพาะป้ายไม่จิ๋ว และมีที่พอ) — จองพื้นที่ล่างไว้ก่อน\n  const subSize = c.height * 0.115;\n  const wantSub = !tiny && !!label.sub;\n\n  // ชื่อ: คำนวณจำนวนบรรทัดที่ใส่ได้จริง\n  const nameSize = tiny ? c.height * 0.24 : c.height * 0.15;\n  const lineH = nameSize * 1.25;\n  const availForName = bottom - y - (wantSub ? subSize * 1.35 : 0);\n  const maxLines = tiny ? 1 : Math.max(0, Math.min(2, Math.floor(availForName / lineH)));\n\n  if (maxLines > 0) {\n    ctx.fillStyle = \"#000\";\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 === maxLines) break;\n      } else line += ch;\n    }\n    if (lines.length < maxLines && line) lines.push(line);\n    else if (lines.length === maxLines && line && lines[maxLines - 1] !== line) {\n      // มีข้อความเหลือ → ตัดท้ายด้วย …\n      let last = lines[maxLines - 1];\n      while (last.length > 0 && ctx.measureText(last + \"…\").width > tw) last = last.slice(0, -1);\n      lines[maxLines - 1] = last + \"…\";\n    }\n    for (const l of lines) {\n      ctx.fillText(l, tx, y);\n      y += lineH;\n    }\n  }\n\n  // sub ชิดล่าง (สีโซน)\n  if (wantSub && bottom - subSize * 1.15 >= y) {\n    ctx.font = `600 ${subSize}px \"Noto Sans Thai\", sans-serif`;\n    ctx.fillStyle = label.color ?? \"#555\";\n    let sub = label.sub;\n    while (sub.length > 0 && ctx.measureText(sub).width > tw) sub = sub.slice(0, -1);\n    ctx.fillText(sub, tx, bottom - subSize * 1.15);\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 [sizeOverrides, setSizeOverrides] = useState<Record<string, string>>({});\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\" | \"recent\" | \"unprinted\" | \"printed\" | \"done\">(\"all\");\n  const [filter, setFilter] = useState(\"\");\n  const [progress, setProgress] = useState(\"\");\n  const [loaded, setLoaded] = useState(false);\n  const [installMode, setInstallMode] = useState(false);\n  const [installFilter, setInstallFilter] = useState(\"\");\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      done: !!l.label_done_at, createdAt: l.created_at, photoKey: l.photo_key,\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      done: !!i.label_done_at, createdAt: i.created_at, photoKey: i.photo_key,\n    })),\n  ], [items, locations]);\n\n  const shown = useMemo(() => {\n    const q = filter.trim().toLowerCase();\n    let list = labels.filter((l) =>\n      (kindFilter === \"all\" || l.kind === kindFilter) &&\n      (!q || l.code.toLowerCase().includes(q) || l.title.toLowerCase().includes(q))\n    );\n    switch (printFilter) {\n      case \"done\": list = list.filter((l) => l.done); break;\n      case \"recent\":\n        list = list.filter((l) => !l.done && !l.printed)\n          .sort((a, b) => b.createdAt.localeCompare(a.createdAt));\n        break;\n      case \"unprinted\": list = list.filter((l) => !l.done && !l.printed); break;\n      case \"printed\": list = list.filter((l) => !l.done && l.printed); break;\n      default: list = list.filter((l) => !l.done);\n    }\n    return list;\n  }, [labels, filter, kindFilter, printFilter]);\n\n  const chosen = labels.filter((l) => selected.has(l.code));\n\n  // จัดกลุ่มตามขนาด (override รายใบ > ขนาดหลัก)\n  const groups = useMemo(() => {\n    const map = new Map<string, Label[]>();\n    for (const l of chosen) {\n      const sid = sizeOverrides[l.code] ?? sizeId;\n      if (!map.has(sid)) map.set(sid, []);\n      map.get(sid)!.push(l);\n    }\n    return SIZES.filter((s) => map.has(s.id)).map((s) => ({ sizeId: s.id, labels: map.get(s.id)! }));\n  }, [chosen, sizeOverrides, sizeId]);\n\n  const totalPages = groups.reduce((sum, g) => sum + Math.ceil(g.labels.length / gridFor(g.sizeId, margin).perPage), 0);\n\n  // ตัวชี้วัดครบหน้า (ขนาดหลัก)\n  const mainGrid = gridFor(sizeId, margin);\n  const mainCount = groups.find((g) => g.sizeId === sizeId)?.labels.length ?? 0;\n  const remainder = mainCount % mainGrid.perPage;\n  const pageFull = mainCount > 0 && remainder === 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 markDone = async (done: boolean) => {\n    if (chosen.length === 0) return;\n    await api(\"/api/labels/done\", {\n      method: \"POST\",\n      body: JSON.stringify({ codes: chosen.map((l) => l.code), done }),\n    });\n    setSelected(new Set());\n    await loadAll();\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 qrCache = new Map<string, HTMLImageElement>();\n    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      qrCache.set(l.code, img);\n    }));\n\n    setProgress(\"กำลังจัดหน้า PDF…\");\n    const doc = new jsPDF({ unit: \"mm\", format: \"a4\" });\n    let firstPage = true;\n    let count = 0;\n    for (const g of groups) {\n      const { size, cols, rows, perPage } = gridFor(g.sizeId, margin);\n      const mx = (210 - cols * size.w) / 2;\n      const my = (297 - rows * size.h) / 2;\n      for (let i = 0; i < g.labels.length; i++) {\n        if (i % perPage === 0) {\n          if (!firstPage) doc.addPage();\n          firstPage = false;\n        }\n        const idx = i % perPage;\n        const col = idx % cols;\n        const row = Math.floor(idx / cols);\n        const canvas = renderLabel(qrCache.get(g.labels[i].code)!, g.labels[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        count++;\n        if (count % 20 === 0) {\n          setProgress(`กำลังจัดหน้า PDF… ${count}/${chosen.length}`);\n          await new Promise((r) => setTimeout(r, 0));\n        }\n      }\n    }\n    doc.save(`qr-labels-${new Date().toISOString().slice(0, 10)}.pdf`);\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      setSizeOverrides({});\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  // รายการที่ปริ้นแล้วแต่ยังไม่ได้ติดป้ายจริง\n  const pending = useMemo(() => {\n    const q = installFilter.trim().toLowerCase();\n    return labels.filter((l) =>\n      l.printed && !l.done &&\n      (!q || l.code.toLowerCase().includes(q) || l.title.toLowerCase().includes(q))\n    );\n  }, [labels, installFilter]);\n  const pendingCount = labels.filter((l) => l.printed && !l.done).length;\n\n  const markOneDone = async (code: string) => {\n    await api(\"/api/labels/done\", { method: \"POST\", body: JSON.stringify({ codes: [code], done: true }) });\n    await loadAll();\n  };\n\n  // ---------- โหมดติดป้าย: เช็คลิสต์พร้อมรูป ----------\n  if (installMode) {\n    return (\n      <div className=\"space-y-3\">\n        <button onClick={() => setInstallMode(false)} className=\"text-indigo-600 text-sm font-medium hover:underline\">\n          ← กลับหน้าปริ้น\n        </button>\n        <div className={`${card} p-4 space-y-2`}>\n          <div className=\"text-base font-bold text-slate-800\">📋 โหมดติดป้าย</div>\n          <p className=\"text-xs text-slate-400\">\n            รายการที่ปริ้นแล้วแต่ยังไม่ยืนยันว่าติดป้ายจริง — ดูรูปเทียบของ ติดเสร็จกด ✓ จะหายจากลิสต์ทันที\n          </p>\n          <input value={installFilter} onChange={(e) => setInstallFilter(e.target.value)}\n            placeholder=\"ค้นหา… (ชื่อหรือรหัส)\" className={input} />\n        </div>\n\n        {!loaded && <Spinner />}\n        {loaded && pending.length === 0 && (\n          <div className=\"bg-emerald-50 border border-emerald-200 text-emerald-700 text-sm rounded-2xl px-4 py-6 text-center font-medium\">\n            🎉 ติดป้ายครบทุกชิ้นแล้ว!\n          </div>\n        )}\n        {pending.map((l) => (\n          <div key={l.code} className={`${card} p-3 flex gap-3 items-center`}>\n            {l.photoKey ? (\n              <Zoomable src={`/api/photos/${l.photoKey}`} className=\"w-16 h-16 object-cover rounded-xl\" />\n            ) : (\n              <div className=\"w-16 h-16 bg-slate-100 rounded-xl flex items-center justify-center text-slate-300 text-2xl\">\n                {l.kind === \"location\" ? \"🗄\" : \"📦\"}\n              </div>\n            )}\n            <div className=\"flex-1 min-w-0\">\n              <span className=\"inline-block font-mono text-xs font-bold px-2 py-0.5 rounded-lg\"\n                style={l.color\n                  ? { backgroundColor: l.color, color: textColorFor(l.color) }\n                  : { backgroundColor: \"#f1f5f9\", color: \"#475569\" }}>\n                {l.code}\n              </span>\n              <div className=\"font-semibold text-slate-800 truncate text-sm mt-1\">{l.title}</div>\n              <div className=\"text-[11px] text-slate-400\">{l.sub}</div>\n            </div>\n            <button\n              onClick={() => markOneDone(l.code)}\n              className=\"shrink-0 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold px-3.5 py-2.5 rounded-xl transition-colors\"\n            >\n              ✓ ติดแล้ว\n            </button>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      {/* โหมดติดป้าย */}\n      <button\n        onClick={() => setInstallMode(true)}\n        className={`w-full flex items-center justify-between p-3 rounded-2xl border text-sm font-medium transition-colors ${\n          pendingCount > 0\n            ? \"border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100\"\n            : \"border-slate-200 bg-white text-slate-400\"\n        }`}\n      >\n        <span>📋 โหมดติดป้าย — เช็คลิสต์พร้อมรูป</span>\n        <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${\n          pendingCount > 0 ? \"bg-amber-500 text-white\" : \"bg-slate-100 text-slate-400\"\n        }`}>\n          รอติด {pendingCount}\n        </span>\n      </button>\n\n      {/* ขนาดป้าย + ขอบกระดาษ */}\n      <div className={`${card} p-4 space-y-3`}>\n        <div className=\"text-sm font-semibold text-slate-700\">\n          ขนาดหลัก <span className=\"text-[11px] font-normal text-slate-400\">(เปลี่ยนรายใบได้ใน dropdown ท้ายรายการที่เลือก)</span>\n        </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-2.5 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\">= {mainGrid.perPage} ดวง/หน้า ({mainGrid.cols}×{mainGrid.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        </div>\n        <div className=\"flex gap-1.5 flex-wrap\">\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          {printFilter === \"done\" ? (\n            <button onClick={() => markDone(false)} disabled={chosen.length === 0}\n              className={`${btnSoft} !py-1.5 !px-3 !text-xs !text-emerald-600 disabled:opacity-40`}>\n              ↩ เอากลับเข้าคิว ({chosen.length})\n            </button>\n          ) : (\n            <button onClick={() => { if (confirm(`นำ ${chosen.length} รายการออกจากคิวปริ้น? (ติดป้ายเสร็จแล้ว)`)) markDone(true); }}\n              disabled={chosen.length === 0}\n              className={`${btnSoft} !py-1.5 !px-3 !text-xs !text-amber-600 disabled:opacity-40`}>\n              🗄 นำออก — ติดป้ายแล้ว ({chosen.length})\n            </button>\n          )}\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 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 && !l.done && (\n                <span className=\"text-[10px] text-emerald-500 shrink-0\" title=\"ปริ้นแล้ว\">✓</span>\n              )}\n              {selected.has(l.code) && (\n                <select\n                  value={sizeOverrides[l.code] ?? \"\"}\n                  onClick={(e) => e.stopPropagation()}\n                  onChange={(e) => {\n                    const v = e.target.value;\n                    setSizeOverrides((prev) => {\n                      const next = { ...prev };\n                      if (v) next[l.code] = v;\n                      else delete next[l.code];\n                      return next;\n                    });\n                  }}\n                  className={`text-[10px] border rounded-lg px-1 py-0.5 shrink-0 ${\n                    sizeOverrides[l.code] ? \"border-amber-400 bg-amber-50 text-amber-700\" : \"border-slate-200 text-slate-400\"\n                  }`}\n                >\n                  <option value=\"\">ขนาดหลัก</option>\n                  {SIZES.map((s) => <option key={s.id} value={s.id}>{s.short}</option>)}\n                </select>\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 space-y-2.5`}>\n        {mainCount > 0 && (\n          pageFull ? (\n            <div className=\"bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs rounded-xl px-3 py-2 font-medium\">\n              ✅ ขนาดหลักครบ {mainCount / mainGrid.perPage} หน้าพอดี ({mainCount} ใบ) — พร้อมปริ้น!\n            </div>\n          ) : (\n            <div className=\"bg-slate-50 border border-slate-200 text-slate-500 text-xs rounded-xl px-3 py-2\">\n              ขนาดหลัก: {remainder}/{mainGrid.perPage} ใบในหน้าสุดท้าย — อีก <b className=\"text-slate-700\">{mainGrid.perPage - remainder}</b> ใบจะครบหน้า A4\n            </div>\n          )\n        )}\n        <div className=\"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 && (\n              <> · {groups.map((g) => `${SIZES.find((s) => s.id === g.sizeId)!.short} ${g.labels.length}`).join(\" + \")} · {totalPages} หน้า</>\n            )}\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      </div>\n\n      <p className=\"text-xs text-slate-400 px-1\">\n        เวิร์กโฟลว์แนะนำ: กด \"🆕 เพิ่มล่าสุด\" → เลือกทั้งหมด → รอครบหน้า → ปริ้น → พอติดป้ายของจริงเสร็จ กลับมาเลือกแล้วกด \"🗄 นำออก\"\n        รายการนั้นจะหายจากคิว (เรียกดู/เอากลับได้ที่ฟิลเตอร์ \"นำออกแล้ว\") · ตอนพิมพ์เลือก \"Actual size\"\n      </p>\n    </div>\n  );\n}\n",[],[96,122,178],"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",[],[96,122,187],"727d1ede-4b28-43f1-95c5-89840eb06a66","ItemDetail.tsx","e925598c-7e71-11f1-8bce-1607ee4eb77e",49,["D",1783925336594],"/** @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",[],[96,122,195],"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",[],[96,122,203],"ab06c930-73b2-4a0c-b439-de76dce04bdf",["D",1783916188403],[214,215],[59],{"_35":68,"_13":60,"_38":41,"_40":69,"_42":43,"_44":70,"_46":47,"_48":225,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_82":226,"_18":227},{"_35":216,"_13":217,"_38":218,"_40":69,"_42":43,"_44":219,"_46":47,"_48":220,"_17":50,"_51":221,"_53":222,"_55":56,"_57":-5,"_82":223,"_18":224},"e691d3eb-4ff0-4381-a3f0-6101c008ce8d","index.ts","f4a2db4a-7e71-11f1-af93-1607ee4eb77e",55,["D",1784001181772],"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.post(\"/api/labels/done\", async (c) => {\n  const { codes, done } = await c.req.json();\n  if (!Array.isArray(codes)) return c.json({ error: \"codes ต้องเป็น array\" }, 400);\n  await db.markLabelsDone(codes.slice(0, 500), done !== false);\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",[],[59,217],["D",1783916191928],[228,229],[59,60],{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":233,"_17":50,"_51":52,"_53":66,"_55":56,"_57":-5,"_82":234,"_18":235},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":230,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_82":231,"_18":232},["D",1784001179212],[],[59,60,37],["D",1784001175382],[],[59,60,62],"55ec7efc-0177-4dc8-a624-bde4fe9ba584",["D",1783916173471],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","ระบบจัดเก็บอุปกรณ์ให้ตรงตำแหน่ง","imageUrl","userId","e7e09ecc-b296-440b-aa22-8451cadfb468","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","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",{"_11":12,"_293":289},"org",{"_11":12,"_286":287,"_288":289,"_246":247,"_290":291,"_292":56},"branch",{"_17":180,"_13":16,"_35":43,"_278":236,"_279":-5,"_280":-5,"_281":-5,"_282":-5,"_283":-5,"_284":14,"_285":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Thammanoon Karawan","avatar","https://lh3.googleusercontent.com/a/ACg8ocK86-3oUj6Tei8TnGq-HiPlZ0zGWZAeiMJT5jfdKonvUFy-PdD-=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":236,"_13":14,"_48":387,"_238":-5,"_239":56,"_240":241,"_242":241,"_243":244,"_245":-5,"_246":247,"_248":218,"_249":47,"_250":-5,"_251":-5,"_252":72,"_253":254,"_255":256,"_257":258,"_259":388,"_261":-5,"_262":263,"_264":263,"_265":266,"_267":266,"_268":266,"_269":263,"_270":263,"_271":389,"_273":390,"_275":391,"_277":56},[327,332,345],"files",[327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346],"counts",{"_318":72,"_319":117,"_320":72,"_32":321,"_322":323},[314,315],{"_35":68,"_13":60,"_38":41,"_40":69,"_42":43,"_44":70,"_46":47,"_48":71,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_18":313},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[59,60],{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":65,"_17":50,"_51":52,"_53":66,"_55":56,"_57":-5,"_18":317},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":316},[59,60,37],[59,60,62],"pulls","branches","forks",{"_324":72,"_326":72},"connections",{"_324":72,"_325":72},"count","unfilledCount","emptyCount",{"_35":210,"_13":59,"_38":69,"_40":-5,"_42":43,"_44":117,"_46":47,"_48":211,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_82":385,"_18":386},{"_35":68,"_13":60,"_38":41,"_40":69,"_42":43,"_44":70,"_46":47,"_48":225,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_82":383,"_18":384},{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":233,"_17":50,"_51":52,"_53":66,"_55":56,"_57":-5,"_82":381,"_18":382},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":230,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_82":379,"_18":380},{"_35":216,"_13":217,"_38":218,"_40":69,"_42":43,"_44":219,"_46":47,"_48":220,"_17":50,"_51":221,"_53":222,"_55":56,"_57":-5,"_82":377,"_18":378},{"_35":95,"_13":96,"_38":97,"_40":-5,"_42":43,"_44":91,"_46":47,"_48":98,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_82":375,"_18":376},{"_35":121,"_13":122,"_38":123,"_40":97,"_42":43,"_44":124,"_46":47,"_48":125,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_82":373,"_18":374},{"_35":202,"_13":203,"_38":204,"_40":123,"_42":43,"_44":205,"_46":47,"_48":206,"_17":50,"_51":52,"_53":207,"_55":56,"_57":-5,"_82":371,"_18":372},{"_35":194,"_13":195,"_38":196,"_40":123,"_42":43,"_44":197,"_46":47,"_48":198,"_17":124,"_51":52,"_53":199,"_55":56,"_57":-5,"_82":369,"_18":370},{"_35":186,"_13":187,"_38":188,"_40":123,"_42":43,"_44":189,"_46":47,"_48":190,"_17":91,"_51":52,"_53":191,"_55":56,"_57":-5,"_82":367,"_18":368},{"_35":177,"_13":178,"_38":179,"_40":123,"_42":43,"_44":180,"_46":47,"_48":181,"_17":182,"_51":52,"_53":183,"_55":56,"_57":-5,"_82":365,"_18":366},{"_35":169,"_13":170,"_38":171,"_40":123,"_42":43,"_44":172,"_46":47,"_48":173,"_17":72,"_51":52,"_53":174,"_55":56,"_57":-5,"_82":363,"_18":364},{"_35":161,"_13":162,"_38":163,"_40":123,"_42":43,"_44":164,"_46":47,"_48":165,"_17":91,"_51":52,"_53":166,"_55":56,"_57":-5,"_82":361,"_18":362},{"_35":153,"_13":154,"_38":155,"_40":123,"_42":43,"_44":156,"_46":47,"_48":157,"_17":117,"_51":52,"_53":158,"_55":56,"_57":-5,"_82":359,"_18":360},{"_35":145,"_13":146,"_38":147,"_40":123,"_42":43,"_44":148,"_46":47,"_48":149,"_17":91,"_51":52,"_53":150,"_55":56,"_57":-5,"_82":357,"_18":358},{"_35":137,"_13":138,"_38":139,"_40":123,"_42":43,"_44":140,"_46":47,"_48":141,"_17":91,"_51":52,"_53":142,"_55":56,"_57":-5,"_82":355,"_18":356},{"_35":112,"_13":113,"_38":114,"_40":97,"_42":43,"_44":115,"_46":47,"_48":116,"_17":117,"_51":24,"_53":118,"_55":56,"_57":-5,"_82":353,"_18":354},{"_35":104,"_13":105,"_38":106,"_40":97,"_42":43,"_44":107,"_46":47,"_48":108,"_17":72,"_51":52,"_53":109,"_55":56,"_57":-5,"_82":351,"_18":352},{"_35":78,"_13":79,"_38":80,"_40":-5,"_42":43,"_44":50,"_46":47,"_48":81,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_82":349,"_18":350},{"_35":86,"_13":87,"_38":88,"_40":80,"_42":43,"_44":89,"_46":47,"_48":90,"_17":91,"_51":52,"_53":92,"_55":56,"_57":-5,"_82":347,"_18":348},[],[79,87],[346],[79],[],[96,105],[],[96,113],[],[96,122,138],[],[96,122,146],[],[96,122,154],[],[96,122,162],[],[96,122,170],[],[96,122,178],[],[96,122,187],[],[96,122,195],[],[96,122,203],[334,335,336,337,338,339,340,341,342],[96,122],[333,343,344],[96],[],[59,217],[],[59,60,37],[],[59,60,62],[329,330],[59,60],[328,331],[59],["D",1783916173471],["D",1789524079207],{"_11":12,"_293":289},{"_11":12,"_286":287,"_288":289,"_246":247,"_290":291,"_292":56},{"_17":180,"_13":16,"_35":43,"_278":236,"_279":-5,"_280":-5,"_281":-5,"_282":-5,"_283":-5,"_284":14,"_285":12},"ctx",{"_271":-5,"_310":425,"_426":427,"_428":429,"_430":56,"_431":56,"_432":56,"_433":47,"_434":-5,"_435":-7,"_436":-7,"_437":72,"_438":56,"_439":56,"_440":-5,"_441":56,"_442":56,"_443":56,"_444":-5},"ENV",{"_396":397,"_398":399,"_400":16,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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>