[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","liambreakspear","name","arcade-scan-register","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/liambreakspear/arcade-scan-register/code/frontend/components/App.tsx","extension","id","4448918e-070a-484e-b3c5-36ab3ccce2db","App.tsx","fileId","01a091fc-5b40-76b9-bbae-a9ea8c140ed0","parentId","01a091fc-5b40-76b9-bbae-b0f5b2bb2bd7","branchId","ad70fe7f-ba79-46e5-9f99-46277b7fffd9","branchVersion",7,"latest",true,"createdAt",["D",1789155705917],"version",4,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { FormEvent } from \"https://esm.sh/react@18.2.0\";\n\ntype Asset = {\n id: number; barcode: string; arcade_name?: string; game_name?: string;\n asset_type?: string; serial_number?: string; location?: string;\n status?: string; condition?: string; notes?: string; updated_at?: string;\n};\n\nconst blank = { barcode: \"\", arcadeName: \"\", gameName: \"\", assetType: \"Arcade machine\", serialNumber: \"\", location: \"\", status: \"In stock\", condition: \"Good\", notes: \"\" };\n\nexport function App() {\n const [assets, setAssets] = useState([]);\n const [form, setForm] = useState(blank);\n const [query, setQuery] = useState(\"\");\n const [showForm, setShowForm] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [editing, setEditing] = useState(null);\n\n async function load() {\n const res = await fetch(`/api/assets${query ? `?q=${encodeURIComponent(query)}` : \"\"}`);\n setAssets(await res.json());\n }\n useEffect(() => { load(); }, [query]);\n\n const stats = useMemo(() => ({ total: assets.length, stock: assets.filter(a => a.status === \"In stock\").length, deployed: assets.filter(a => a.status === \"Deployed\").length }), [assets]);\n\n function update(key: string, value: string) { setForm(f => ({ ...f, [key]: value })); }\n function startNew() { setEditing(null); setForm(blank); setShowForm(true); window.scrollTo({ top: 0, behavior: \"smooth\" }); }\n function edit(a: Asset) { setEditing(a.id); setForm({ barcode: a.barcode, arcadeName: a.arcade_name ?? \"\", gameName: a.game_name ?? \"\", assetType: a.asset_type ?? \"Arcade machine\", serialNumber: a.serial_number ?? \"\", location: a.location ?? \"\", status: a.status ?? \"In stock\", condition: a.condition ?? \"Good\", notes: a.notes ?? \"\" }); setShowForm(true); window.scrollTo({ top: 0, behavior: \"smooth\" }); }\n\n async function save(e: FormEvent) {\n e.preventDefault();\n if (!form.barcode.trim()) { setMessage(\"Enter or scan a barcode first.\"); return; }\n const res = await fetch(editing ? `/api/assets/${editing}` : \"/api/assets\", { method: editing ? \"PUT\" : \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(form) });\n if (!res.ok) { setMessage(\"Could not save record.\"); return; }\n setMessage(editing ? \"Record updated.\" : \"Record saved.\"); setForm(blank); setEditing(null); setShowForm(false); load();\n }\n async function remove(id: number) { if (!confirm(\"Delete this record?\")) return; await fetch(`/api/assets/${id}`, { method: \"DELETE\" }); load(); }\n\n return

Asset control

Arcade Scan Register

🎮

Scan, register and track arcade machines and equipment.

\n {message &&

{message}

}\n \n {showForm &&

{editing ? \"Edit record\" : \"New arcade record\"}

\n Barcode / Asset ID *

update(\"barcode\", e.target.value)} placeholder=\"Scan barcode or type ID\" className=\"flex-1 border rounded-xl px-3 py-3 text-lg\"/>

update(\"arcadeName\", v)} placeholder=\"e.g. Newbury\"/> update(\"gameName\", v)} placeholder=\"e.g. Pac-Man\"/> update(\"assetType\", v)} placeholder=\"Arcade machine\"/> update(\"serialNumber\", v)}/> update(\"location\", v)} placeholder=\"Room / bay / site\"/> update(\"status\", v)} options={[\"In stock\", \"Deployed\", \"Repair\", \"Quarantined\", \"Retired\"]}/> update(\"condition\", v)} options={[\"New\", \"Good\", \"Fair\", \"Damaged\"]}/>

\n Notes

update(\"notes\", e.target.value)} rows={3} className=\"w-full border rounded-xl px-3 py-2\" placeholder=\"Condition notes, accessories, faults...\"/>\n        <button className=\"w-full bg-emerald-600 text-white font-bold py-3 rounded-xl mt-4\">{editing ? \"Update record\" : \"Save record\"}</button>\n      </form>}\n      <div className=\"relative mb-4\"><input value={query} onChange={e => setQuery(e.target.value)} placeholder=\"Search barcode, game, site, serial...\" className=\"w-full bg-white border rounded-xl px-4 py-3 pl-10 shadow-sm\"/><span className=\"absolute left-3 top-3\">⌕</span></div>\n      <div className=\"space-y-3\">{assets.length === 0 ? <div className=\"text-center py-12 text-slate-500 bg-white rounded-2xl\">No records yet. Scan your first arcade machine.</div> : assets.map(a => <article key={a.id} className=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-4\"><div className=\"flex justify-between gap-3\"><div><div className=\"font-bold text-lg\">{a.game_name || a.asset_type || \"Arcade asset\"}</div><div className=\"text-sm text-slate-500\">{a.arcade_name || \"No site\"} · {a.location || \"No location\"}</div></div><span className={`text-xs font-bold px-2 py-1 rounded-full h-fit ${a.status === \"Deployed\" ? \"bg-blue-100 text-blue-700\" : a.status === \"Repair\" ? \"bg-amber-100 text-amber-700\" : \"bg-emerald-100 text-emerald-700\"}`}>{a.status}</span></div><div className=\"grid grid-cols-2 gap-2 text-sm mt-3 text-slate-600\"><div><b>Barcode:</b> {a.barcode}</div><div><b>Serial:</b> {a.serial_number || \"—\"}</div><div><b>Condition:</b> {a.condition || \"—\"}</div><div><b>Updated:</b> {a.updated_at ? new Date(a.updated_at).toLocaleDateString() : \"—\"}</div></div>{a.notes && <p className=\"text-sm mt-2 bg-slate-50 rounded-lg p-2\">{a.notes}</p>}<div className=\"flex gap-2 mt-3\"><button onClick={() => edit(a)} className=\"flex-1 border border-slate-300 rounded-lg py-2 text-sm font-semibold\">Edit</button><button onClick={() => remove(a.id)} className=\"border border-red-200 text-red-600 rounded-lg px-4 py-2 text-sm\">Delete</button></div></article>)}</div>\n      <p className=\"text-center text-xs text-slate-400 mt-8\"><a href=\"/source\" className=\"underline\">View source</a> · Data is stored in this Val Town app's database.</p>\n    </div>\n  </div>;\n}\n\nfunction Stat({label, value}: {label:string; value:number}) { return <div className=\"bg-white rounded-xl p-3 text-center shadow-sm\"><div className=\"text-xl font-bold\">{value}</div><div className=\"text-xs text-slate-500\">{label}</div></div> }\nfunction Field({label,value,onChange,placeholder}: {label:string;value:string;onChange:(v:string)=>void;placeholder?:string}) { return <label className=\"block text-sm font-semibold\">{label}<input value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} className=\"w-full border rounded-xl px-3 py-2 mt-1 font-normal\"/></label> }\nfunction SelectField({label,value,onChange,options}: {label:string;value:string;onChange:(v:string)=>void;options:string[]}) { return <label className=\"block text-sm font-semibold\">{label}<select value={value} onChange={e=>onChange(e.target.value)} className=\"w-full border rounded-xl px-3 py-2 mt-1 font-normal\">{options.map(o=><option key={o}>{o}</option>)}</select></label> }\n","deleted",false,"label",[47,48,24],"frontend","components","095ff555-ec7b-4016-aa1d-072b1754b188",["D",1789155629770],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Mobile arcade scanner and asset register","imageUrl","userId","5a19550b-a696-48d0-823c-fbc8500adfdf","pinnedFileId","01a091fc-5b40-76b9-bbae-cca36f3a2688","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a091fb-7973-74b2-a79d-b7ccf140d2cb","tursoName","095ff555ec7b4016aa1d072b1754b188","tursoHostname","095ff555ec7b4016aa1d072b1754b188-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789503703835],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Liam Breakspear","avatar","https://lh3.googleusercontent.com/a/ACg8ocJfWaPWp6b_B9TmkF2ZGWsb1p9iZBCeTL57zpFsX9yg37I8pz0=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>