Public money controls

Financial management

Every save immediately changes the public ledger.

Open ledger ↗

Post a transaction

setTx({...tx,transaction_date:e.target.value})}/>

setTx({...tx,category:e.target.value})}/>setTx({...tx,payee:e.target.value})}/>

setTx({...tx,description:e.target.value})}/></Field><div className=\"grid grid-cols-2 gap-3\"><Field label=\"Amount ($)\"><input type=\"number\" min=\"0\" step=\".01\" required value={tx.amount} onChange={e=>setTx({...tx,amount:e.target.value})}/></Field><Field label=\"Receipt URL\"><input type=\"url\" value={tx.receipt_url} onChange={e=>setTx({...tx,receipt_url:e.target.value})}/></Field></div><button className=\"bg-[#191919] text-white rounded-full px-5 py-3 font-black\">POST PUBLICLY →</button></form><Settings d={d} save={(b:any)=>request(\"settings\",\"PATCH\",b)}/></div>\n <h3 className=\"text-2xl font-black mt-10\">Budget assumptions</h3><div className=\"grid md:grid-cols-2 gap-4 mt-4\">{d.budget.map((b:any)=><Budget key={b.id} b={b} save={(body:any)=>request(\"budget/\"+b.id,\"PATCH\",body)}/>)}</div>\n {d.transactions.length>0&&<div className=\"mt-10\"><h3 className=\"text-2xl font-black\">Correction controls</h3><div className=\"bg-white border-2 border-[#191919] rounded-2xl mt-4\">{d.transactions.map((t:any)=><div className=\"p-4 border-b last:border-0 flex justify-between gap-4\"><div><b>{t.transaction_date} · {t.description}</b><p className=\"text-sm text-gray-500\">{\"$\"+dollars(t.amount_cents)} · {t.voided_at?\"Voided: \"+t.void_reason:\"Active\"}</p></div>{!t.voided_at&&<button onClick={()=>{const reason=prompt(\"Public reason for voiding this entry:\");if(reason)request(\"transactions/\"+t.id+\"/void\",\"PATCH\",{reason})}} className=\"text-red-700 underline font-bold\">Void</button>}</div>)}</div></div>}{msg&&<div className=\"fixed bottom-5 right-5 bg-[#191919] text-white px-5 py-3 rounded-full font-bold\">{msg}</div>}</section>}\nfunction Field({label,children}:any){return <label className=\"text-sm font-bold block\">{label}<div className=\"[&>*]:block [&>*]:w-full [&>*]:border-2 [&>*]:border-[#191919] [&>*]:rounded-lg [&>*]:p-2 [&>*]:mt-1\">{children}</div></label>}\nfunction Settings({d,save}:any){const q=d.settings;const [f,setF]=useState({period_label:q.period_label,projected_members:q.projected_members,reserve_target:dollars(q.reserve_target_cents),opening_balance:dollars(q.opening_balance_cents)});return <form onSubmit={e=>{e.preventDefault();save(f)}} className=\"bg-white border-2 border-[#191919] rounded-2xl p-6 space-y-4\"><h3 className=\"text-2xl font-black\">Dues assumptions</h3><Field label=\"Quarter label\"><input value={f.period_label} onChange={e=>setF({...f,period_label:e.target.value})}/></Field><Field label=\"Projected participating members\"><input type=\"number\" min=\"1\" value={f.projected_members} onChange={e=>setF({...f,projected_members:Number(e.target.value)})}/></Field><div className=\"grid grid-cols-2 gap-3\"><Field label=\"Reserve target ($)\"><input type=\"number\" step=\".01\" min=\"0\" value={f.reserve_target} onChange={e=>setF({...f,reserve_target:e.target.value})}/></Field><Field label=\"Opening cash ($)\"><input type=\"number\" step=\".01\" value={f.opening_balance} onChange={e=>setF({...f,opening_balance:e.target.value})}/></Field></div><button className=\"bg-[#2364aa] text-white rounded-full px-5 py-3 font-black\">RECALCULATE DUES</button></form>}\nfunction Budget({b,save}:any){const [amount,setAmount]=useState(dollars(b.planned_cents)),[explanation,setExplanation]=useState(b.explanation);return <form onSubmit={e=>{e.preventDefault();save({planned_amount:amount,explanation})}} className=\"bg-white border-2 border-[#191919] rounded-2xl p-5\"><h4 className=\"font-black text-xl\">{b.category}</h4><Field label=\"Planned cost ($)\"><input type=\"number\" min=\"0\" step=\".01\" value={amount} onChange={e=>setAmount(e.target.value)}/></Field><Field label=\"Public explanation\"><textarea value={explanation} onChange={e=>setExplanation(e.target.value)}/></Field><button className=\"mt-3 border-2 border-[#191919] rounded-full px-4 py-2 font-black\">SAVE LINE</button></form>}","label",[156,157,65],"frontend","components","pulls","branches",1,"forks","envVars",{"_166":160,"_168":26},"connections",{"_166":26,"_167":26},"count","unfilledCount","emptyCount",{"_32":260,"_13":156,"_63":208,"_42":-5,"_34":35,"_149":160,"_150":86,"_36":261,"_38":26,"_66":257,"_152":-5,"_68":24,"_154":-5,"_188":262,"_17":263},{"_32":255,"_13":157,"_63":148,"_42":208,"_34":35,"_149":160,"_150":86,"_36":256,"_38":26,"_66":257,"_152":-5,"_68":24,"_154":-5,"_188":258,"_17":259},{"_32":147,"_13":65,"_63":64,"_42":148,"_34":35,"_149":39,"_150":86,"_36":252,"_38":26,"_66":67,"_152":153,"_68":24,"_154":-5,"_188":253,"_17":254},{"_32":244,"_13":245,"_63":246,"_42":148,"_34":35,"_149":112,"_150":86,"_36":247,"_38":248,"_66":67,"_152":249,"_68":24,"_154":-5,"_188":250,"_17":251},{"_32":237,"_13":238,"_63":239,"_42":148,"_34":35,"_149":160,"_150":86,"_36":240,"_38":26,"_66":67,"_152":241,"_68":24,"_154":-5,"_188":242,"_17":243},{"_32":229,"_13":230,"_63":231,"_42":148,"_34":35,"_149":232,"_150":86,"_36":233,"_38":26,"_66":67,"_152":234,"_68":24,"_154":-5,"_188":235,"_17":236},{"_32":221,"_13":222,"_63":223,"_42":208,"_34":35,"_149":224,"_150":86,"_36":225,"_38":160,"_66":21,"_152":226,"_68":24,"_154":-5,"_188":227,"_17":228},{"_32":214,"_13":215,"_63":216,"_42":208,"_34":35,"_149":160,"_150":86,"_36":217,"_38":26,"_66":67,"_152":218,"_68":24,"_154":-5,"_188":219,"_17":220},{"_32":205,"_13":206,"_63":207,"_42":208,"_34":35,"_149":209,"_150":86,"_36":210,"_38":160,"_66":67,"_152":211,"_68":24,"_154":-5,"_188":212,"_17":213},{"_32":198,"_13":199,"_63":200,"_42":-5,"_34":35,"_149":160,"_150":86,"_36":201,"_38":26,"_66":21,"_152":202,"_68":24,"_154":-5,"_188":203,"_17":204},{"_32":191,"_13":192,"_63":193,"_42":-5,"_34":35,"_149":160,"_150":86,"_36":194,"_38":26,"_66":21,"_152":195,"_68":24,"_154":-5,"_188":196,"_17":197},{"_32":181,"_13":182,"_63":84,"_42":-5,"_34":35,"_149":183,"_150":86,"_36":184,"_38":185,"_66":186,"_152":187,"_68":24,"_154":14,"_188":189,"_17":190},"22e31ed7-e684-4f30-a0b2-93f40cc63fbb","index.ts",12,["D",1787750343639],7,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\nasync function setup() {\n  await sqlite.batch([\n    { sql: `CREATE TABLE IF NOT EXISTS members (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL,email TEXT NOT NULL UNIQUE,interests TEXT NOT NULL,experience TEXT NOT NULL,status TEXT NOT NULL DEFAULT 'pending',joined_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP)` },\n    { sql: `CREATE TABLE IF NOT EXISTS cars (id INTEGER PRIMARY KEY,name TEXT NOT NULL,year TEXT NOT NULL,discipline TEXT NOT NULL,status TEXT NOT NULL,detail TEXT NOT NULL,next_ready TEXT,accent TEXT NOT NULL)` },\n    { sql: `CREATE TABLE IF NOT EXISTS events (id INTEGER PRIMARY KEY,title TEXT NOT NULL,event_date TEXT NOT NULL,location TEXT NOT NULL,discipline TEXT NOT NULL,car_id INTEGER,capacity INTEGER NOT NULL,status TEXT NOT NULL,description TEXT NOT NULL)` },\n    { sql: `CREATE TABLE IF NOT EXISTS bookings (id INTEGER PRIMARY KEY AUTOINCREMENT,member_id INTEGER NOT NULL,event_id INTEGER NOT NULL,status TEXT NOT NULL DEFAULT 'confirmed',created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,UNIQUE(member_id,event_id))` },\n    { sql: \"INSERT OR IGNORE INTO cars VALUES (1,?,?,?,?,?,?,?)\", args: [\"Red Five\",\"1999 Mazda MX-5\",\"Drift\",\"Ready\",\"Fresh fluids · 80% tires · aligned\",\"Now\",\"red\"] },\n    { sql: \"INSERT OR IGNORE INTO cars VALUES (2,?,?,?,?,?,?,?)\", args: [\"Blue Monday\",\"2001 Mazda MX-5\",\"Track\",\"Ready\",\"Track inspection passed · new pads\",\"Now\",\"blue\"] },\n    { sql: \"INSERT OR IGNORE INTO cars VALUES (3,?,?,?,?,?,?,?)\", args: [\"Dad Bod\",\"1994 Mazda MX-5\",\"Autocross\",\"Service\",\"Cooling refresh in progress\",\"Sep 8\",\"amber\"] },\n    { sql: \"INSERT OR IGNORE INTO cars VALUES (4,?,?,?,?,?,?,?)\", args: [\"Long Way Round\",\"2006 Mazda MX-5\",\"Off-road pilot\",\"Planning\",\"Rallycross setup under evaluation\",\"2027\",\"green\"] },\n    { sql: \"INSERT OR IGNORE INTO events VALUES (1,?,?,?,?,?,?,?,?)\", args: [\"Drift School: First Slide\",\"2026-09-19\",\"Virginia International Raceway\",\"Drift\",1,8,\"Open\",\"A low-pressure day for learning weight transfer, initiating a slide, and laughing at your first spin.\"] },\n    { sql: \"INSERT OR IGNORE INTO events VALUES (2,?,?,?,?,?,?,?,?)\", args: [\"GT Pace: Full Course\",\"2026-10-17\",\"Dominion Raceway\",\"Track\",2,6,\"Open\",\"Lead-follow laps, coaching, and a properly prepared car without owning a trailer or a torque wrench collection.\"] },\n    { sql: \"INSERT OR IGNORE INTO events VALUES (3,?,?,?,?,?,?,?,?)\", args: [\"Parking Lot Hero\",\"2026-11-08\",\"Hampton Roads Autocross\",\"Autocross\",3,10,\"Waitlist\",\"Cones, timing lights, and friendly competition. The purest dollar-to-grin ratio in motorsport.\"] },\n    { sql: \"INSERT OR IGNORE INTO events VALUES (4,?,?,?,?,?,?,?,?)\", args: [\"Quarterly Garage Social\",\"2026-12-05\",\"The Shared Garage · Norfolk\",\"Social\",null,30,\"Open\",\"Meet the members, see the fleet, vote on next quarter, and help set maintenance priorities.\"] },\n    { sql: `CREATE TABLE IF NOT EXISTS finance_settings (id INTEGER PRIMARY KEY CHECK(id=1),period_label TEXT NOT NULL,projected_members INTEGER NOT NULL DEFAULT 1,reserve_target_cents INTEGER NOT NULL DEFAULT 0,opening_balance_cents INTEGER NOT NULL DEFAULT 0,methodology TEXT NOT NULL,updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP)` },\n    { sql: `CREATE TABLE IF NOT EXISTS finance_budget (id INTEGER PRIMARY KEY AUTOINCREMENT,period_label TEXT NOT NULL,category TEXT NOT NULL,planned_cents INTEGER NOT NULL DEFAULT 0,explanation TEXT NOT NULL,sort_order INTEGER NOT NULL DEFAULT 0)` },\n    { sql: `CREATE TABLE IF NOT EXISTS finance_transactions (id INTEGER PRIMARY KEY AUTOINCREMENT,transaction_date TEXT NOT NULL,type TEXT NOT NULL CHECK(type IN ('income','expense')),category TEXT NOT NULL,payee TEXT NOT NULL,description TEXT NOT NULL,amount_cents INTEGER NOT NULL CHECK(amount_cents>=0),receipt_url TEXT,posted_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,voided_at TEXT,void_reason TEXT)` },\n    { sql: \"INSERT OR IGNORE INTO finance_settings(id,period_label,projected_members,reserve_target_cents,opening_balance_cents,methodology) VALUES(1,?,?,?,?,?)\", args: [\"2026 Q4\",1,0,0,\"Quarterly dues = max(0, planned operating costs + reserve target − current cash balance) ÷ projected participating members. The result is rounded up to the next cent.\"] },\n    { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(1,?,?,?,?,?)\", args: [\"2026 Q4\",\"Track and venue fees\",0,\"Facility rental, event entry, and track access.\",1] },\n    { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(2,?,?,?,?,?)\", args: [\"2026 Q4\",\"Fleet maintenance\",0,\"Parts, fluids, tires, inspections, and specialist labor.\",2] },\n    { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(3,?,?,?,?,?)\", args: [\"2026 Q4\",\"Insurance and compliance\",0,\"Coverage, registrations, waivers, and administrative requirements.\",3] },\n    { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(4,?,?,?,?,?)\", args: [\"2026 Q4\",\"Transport and storage\",0,\"Trailer, fuel, towing, garage, and storage costs.\",4] },\n    { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(5,?,?,?,?,?)\", args: [\"2026 Q4\",\"Instruction and safety\",0,\"Coaches, helmets, extinguishers, and other safety equipment.\",5] }\n  ]);\n}\napp.get(\"/\", async c => { await setup(); return c.html(Root()); });\napp.get(\"/__immutable/*\", c => serveImmutableFile(c.req.path));\napp.get(\"/source\", c => c.redirect(parseVal().links.self.val));\napp.get(\"/api/dashboard\", async c => {\n  await setup();\n  const [cars,events,counts] = await Promise.all([\n    sqlite.execute(\"SELECT * FROM cars ORDER BY id\"),\n    sqlite.execute(`SELECT e.*,c.name car_name,COUNT(b.id) booked FROM events e LEFT JOIN cars c ON c.id=e.car_id LEFT JOIN bookings b ON b.event_id=e.id AND b.status='confirmed' GROUP BY e.id ORDER BY e.event_date`),\n    sqlite.execute(`SELECT (SELECT COUNT(*) FROM members) members,(SELECT COUNT(*) FROM bookings) reservations,(SELECT COUNT(*) FROM cars WHERE status='Ready') ready_cars`)\n  ]);\n  return c.json({cars:cars.rows,events:events.rows,stats:counts.rows[0]});\n});\n\napp.get(\"/api/finance\", async c => {\n  await setup();\n  const [settings,budget,transactions] = await Promise.all([\n    sqlite.execute(\"SELECT * FROM finance_settings WHERE id=1\"),\n    sqlite.execute(\"SELECT * FROM finance_budget ORDER BY sort_order,id\"),\n    sqlite.execute(\"SELECT * FROM finance_transactions ORDER BY transaction_date DESC,id DESC\")\n  ]);\n  const s:any=settings.rows[0];\n  const active=(transactions.rows as any[]).filter(t=>!t.voided_at);\n  const income=active.filter(t=>t.type===\"income\").reduce((n,t)=>n+Number(t.amount_cents),0);\n  const expenses=active.filter(t=>t.type===\"expense\").reduce((n,t)=>n+Number(t.amount_cents),0);\n  const cash=Number(s.opening_balance_cents)+income-expenses;\n  const planned=(budget.rows as any[]).reduce((n,b)=>n+Number(b.planned_cents),0);\n  const needed=Math.max(0,planned+Number(s.reserve_target_cents)-cash);\n  const members=Math.max(1,Number(s.projected_members));\n  const dues=Math.ceil(needed/members);\n  return c.json({settings:s,budget:budget.rows,transactions:transactions.rows,summary:{income_cents:income,expense_cents:expenses,cash_balance_cents:cash,planned_costs_cents:planned,funding_needed_cents:needed,quarterly_dues_cents:dues,projected_members:members}});\n});\n\napp.post(\"/api/members\", async c => {\n  await setup(); const b=await c.req.json();\n  const name=String(b.name||\"\").trim(), email=String(b.email||\"\").trim().toLowerCase();\n  const interests=Array.isArray(b.interests)?b.interests.join(\", \"):\"\", experience=String(b.experience||\"\");\n  if(!name||!email.includes(\"@\")||!interests||!experience)return c.json({error:\"Please complete every field.\"},400);\n  try { await sqlite.execute({sql:\"INSERT INTO members(name,email,interests,experience) VALUES(?,?,?,?)\",args:[name,email,interests,experience]}); return c.json({ok:true,message:\"You're on the founding member list.\"},201); }\n  catch(err){ if(String(err).includes(\"UNIQUE\"))return c.json({error:\"That email is already on the member list.\"},409); throw err; }\n});\napp.post(\"/api/events/:id/join\", async c => {\n  await setup(); const eventId=Number(c.req.param(\"id\")); const b=await c.req.json(); const email=String(b.email||\"\").trim().toLowerCase();\n  const member=await sqlite.execute({sql:\"SELECT id FROM members WHERE email=?\",args:[email]});\n  if(!member.rows.length)return c.json({error:\"Apply for membership first, then reserve your event.\"},404);\n  const event=await sqlite.execute({sql:`SELECT e.capacity,e.status,COUNT(b.id) booked FROM events e LEFT JOIN bookings b ON b.event_id=e.id AND b.status='confirmed' WHERE e.id=? GROUP BY e.id`,args:[eventId]});\n  if(!event.rows.length)return c.json({error:\"Event not found.\"},404);\n  const row:any=event.rows[0]; const status=row.status===\"Waitlist\"||Number(row.booked)>=Number(row.capacity)?\"waitlist\":\"confirmed\";\n  try { await sqlite.execute({sql:\"INSERT INTO bookings(member_id,event_id,status) VALUES(?,?,?)\",args:[Number((member.rows[0] as any).id),eventId,status]}); return c.json({ok:true,message:status===\"confirmed\"?\"Your spot is reserved.\":\"You're on the waitlist.\"},201); }\n  catch(err){ if(String(err).includes(\"UNIQUE\"))return c.json({error:\"You're already registered for this event.\"},409); throw err; }\n});\n\nasync function requireAdmin(c:any) {\n  const session = await getOAuthUserData(c.req.raw);\n  if (!session?.user) return { response: c.json({ error: \"Sign in required\", login: \"/auth/login\" }, 401) };\n  if (session.user.username !== \"pchinjr\") return { response: c.json({ error: \"This dashboard is restricted to the club owner.\" }, 403) };\n  return { session };\n}\napp.get(\"/admin\", async c => {\n  const auth = await requireAdmin(c);\n  if (auth.response) return c.redirect(\"/auth/login\");\n  return c.redirect(\"/#desk\");\n});\napp.get(\"/api/admin/dashboard\", async c => {\n  const auth = await requireAdmin(c); if (auth.response) return auth.response;\n  await setup();\n  const [members,bookings,cars,events] = await Promise.all([\n    sqlite.execute(\"SELECT * FROM members ORDER BY joined_at DESC\"),\n    sqlite.execute(`SELECT b.*,m.name member_name,m.email member_email,e.title event_title FROM bookings b JOIN members m ON m.id=b.member_id JOIN events e ON e.id=b.event_id ORDER BY b.created_at DESC`),\n    sqlite.execute(\"SELECT * FROM cars ORDER BY id\"),\n    sqlite.execute(\"SELECT * FROM events ORDER BY event_date\")\n  ]);\n  return c.json({ user: auth.session?.user.username, members: members.rows, bookings: bookings.rows, cars: cars.rows, events: events.rows });\n});\napp.patch(\"/api/admin/members/:id\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); if(![\"pending\",\"active\",\"paused\"].includes(b.status))return c.json({error:\"Invalid status\"},400);\n  await sqlite.execute({sql:\"UPDATE members SET status=? WHERE id=?\",args:[b.status,Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/cars/:id\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); if(![\"Ready\",\"Service\",\"Planning\"].includes(b.status))return c.json({error:\"Invalid status\"},400);\n  await sqlite.execute({sql:\"UPDATE cars SET status=?,detail=?,next_ready=? WHERE id=?\",args:[b.status,String(b.detail||\"\"),String(b.next_ready||\"\"),Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/events/:id\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); if(![\"Open\",\"Waitlist\",\"Closed\",\"Complete\"].includes(b.status)||Number(b.capacity)<1)return c.json({error:\"Invalid event update\"},400);\n  await sqlite.execute({sql:\"UPDATE events SET status=?,capacity=? WHERE id=?\",args:[b.status,Number(b.capacity),Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/bookings/:id\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); if(![\"confirmed\",\"waitlist\",\"cancelled\",\"attended\"].includes(b.status))return c.json({error:\"Invalid status\"},400);\n  await sqlite.execute({sql:\"UPDATE bookings SET status=? WHERE id=?\",args:[b.status,Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\n\n\napp.post(\"/api/admin/finance/transactions\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); const type=String(b.type),amount=Math.round(Number(b.amount)*100);\n  if(![\"income\",\"expense\"].includes(type)||!Number.isFinite(amount)||amount<0||!b.transaction_date||!b.category||!b.description)return c.json({error:\"Complete all required transaction fields.\"},400);\n  const url=String(b.receipt_url||\"\").trim(); if(url&&!/^https?:\\/\\//i.test(url))return c.json({error:\"Receipt link must begin with http:// or https://\"},400);\n  await sqlite.execute({sql:\"INSERT INTO finance_transactions(transaction_date,type,category,payee,description,amount_cents,receipt_url) VALUES(?,?,?,?,?,?,?)\",args:[String(b.transaction_date),type,String(b.category),String(b.payee||\"\"),String(b.description),amount,url||null]});\n  return c.json({ok:true},201);\n});\napp.patch(\"/api/admin/finance/transactions/:id/void\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); const reason=String(b.reason||\"\").trim(); if(!reason)return c.json({error:\"A public correction reason is required.\"},400);\n  await sqlite.execute({sql:\"UPDATE finance_transactions SET voided_at=CURRENT_TIMESTAMP,void_reason=? WHERE id=? AND voided_at IS NULL\",args:[reason,Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/finance/settings\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); const members=Math.max(1,Math.floor(Number(b.projected_members))); const reserve=Math.max(0,Math.round(Number(b.reserve_target)*100)); const opening=Math.round(Number(b.opening_balance)*100);\n  if(!b.period_label||!Number.isFinite(members)||!Number.isFinite(reserve)||!Number.isFinite(opening))return c.json({error:\"Invalid planning assumptions.\"},400);\n  await sqlite.execute({sql:\"UPDATE finance_settings SET period_label=?,projected_members=?,reserve_target_cents=?,opening_balance_cents=?,updated_at=CURRENT_TIMESTAMP WHERE id=1\",args:[String(b.period_label),members,reserve,opening]});\n  await sqlite.execute({sql:\"UPDATE finance_budget SET period_label=?\",args:[String(b.period_label)]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/finance/budget/:id\", async c => {\n  const auth=await requireAdmin(c); if(auth.response)return auth.response;\n  const b=await c.req.json(); const amount=Math.max(0,Math.round(Number(b.planned_amount)*100)); if(!Number.isFinite(amount)||!b.explanation)return c.json({error:\"Invalid budget line.\"},400);\n  await sqlite.execute({sql:\"UPDATE finance_budget SET planned_cents=?,explanation=? WHERE id=?\",args:[amount,String(b.explanation),Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\n\napp.onError(err=>Promise.reject(err));\nexport default oauthMiddleware(app.fetch);","children",[],[182],"e93ca4d6-3d1b-4f47-be68-a915258e0c74","README.md","01a03bb4-ad04-7558-b577-f661a8929c18",["D",1787708091556],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[192],"866b0aaf-14cc-4ced-bf06-af0ebb6336e2","CHANGELOG.md","01a03bb4-ad04-7558-b577-f25405a25147",["D",1787708091556],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[],[199],"bc0f3650-07b0-4a5e-a346-2c4bf5e6e266","root.tsx","01a03bb4-ad04-7558-b577-e883a46ff32c","01a03bb4-ad04-7558-b577-efb558f986bd",3,["D",1787708273819],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"theme-color\" content=\"#ef3b2d\" />\n          <meta name=\"description\" content=\"Shared cars. Real motorsport. Zero need for a midlife crisis alone.\" />\n          <title>Miata Life Crisis · Social motorsport club</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"m-0 bg-[#f4efe4] text-[#191919] antialiased\">\n          <div id=\"root\" />\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[156,206],"e2c73877-1e07-4ff8-9b9a-6614bd185c36","index.tsx","01a03bb4-ad04-7558-b577-e70137838407",["D",1787708091556],"/** @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\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[156,215],"3992e62b-6a10-4cef-87e2-2198cfd9a0e1","favicon.svg","01a03bb4-ad04-7558-b577-e30d5861b981",2,["D",1787708263613],"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><rect width=\"64\" height=\"64\" rx=\"14\" fill=\"#ef3b2d\"/><circle cx=\"32\" cy=\"32\" r=\"18\" fill=\"none\" stroke=\"#fff\" stroke-width=\"7\"/><circle cx=\"32\" cy=\"32\" r=\"5\" fill=\"#fff\"/><path d=\"M32 14v13M17 38l11-4M47 38l-11-4\" stroke=\"#fff\" stroke-width=\"5\" stroke-linecap=\"round\"/></svg>",[],[156,222],"247796de-c9a4-4e42-8d63-762c758ba149","Finances.tsx","1bc4dafa-a151-11f1-8c59-1607ee4eb77e",13,["D",1787750515541],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect,useState } from \"https://esm.sh/react@18.2.0\";\nconst money=(c:number)=>new Intl.NumberFormat(\"en-US\",{style:\"currency\",currency:\"USD\"}).format(Number(c||0)/100);\nexport function Finances(){\n const [d,setD]=useState<any>(null);useEffect(()=>{fetch(\"/api/finance\").then(r=>r.json()).then(setD)},[]);\n if(!d)return <section className=\"max-w-7xl mx-auto px-4 py-20\"><h1 className=\"text-6xl font-black\">Opening the books…</h1></section>;\n const s=d.summary,q=d.settings;\n return <section className=\"max-w-7xl mx-auto px-4 md:px-8 py-16\">\n  <p className=\"uppercase tracking-[.25em] text-sm font-black text-[#ef3b2d]\">The books are open</p><div className=\"grid lg:grid-cols-3 gap-8 items-end mt-3\"><div className=\"lg:col-span-2\"><h1 className=\"text-5xl md:text-7xl font-black\">Public financial ledger</h1><p className=\"text-xl mt-5\">No mystery fees and no hidden margin. Every posted dollar, assumption, and dues calculation is visible—even while every number is still zero.</p></div><div className=\"bg-[#f7d34b] border-2 border-[#191919] rounded-3xl p-6 shadow-[5px_5px_0_#191919]\"><div className=\"text-sm uppercase tracking-widest font-black\">{q.period_label} dues</div><div className=\"text-5xl font-black mt-2\">{money(s.quarterly_dues_cents)}</div><div className=\"text-sm mt-2\">per member, per quarter</div></div></div>\n  <div className=\"grid md:grid-cols-4 gap-4 mt-12\"><Card label=\"Cash on hand\" value={money(s.cash_balance_cents)}/><Card label=\"Income posted\" value={money(s.income_cents)} blue/><Card label=\"Expenses posted\" value={money(s.expense_cents)} red/><Card label=\"Quarter funding needed\" value={money(s.funding_needed_cents)} yellow/></div>\n  <section className=\"mt-16\"><div className=\"flex flex-wrap justify-between gap-4 items-end\"><div><p className=\"uppercase tracking-widest text-xs font-black text-[#ef3b2d]\">Show your work</p><h2 className=\"text-4xl font-black mt-2\">How dues are calculated</h2></div><span className=\"text-sm text-gray-500\">Updated {q.updated_at} UTC</span></div><div className=\"mt-6 bg-white border-2 border-[#191919] rounded-3xl overflow-hidden\"><div className=\"grid md:grid-cols-5\">{[[money(s.planned_costs_cents),\"Planned costs\"],[money(q.reserve_target_cents),\"Reserve target\"],[\"− \"+money(s.cash_balance_cents),\"Cash available\"],[String(s.projected_members),\"Projected members\"],[money(s.quarterly_dues_cents),\"Dues each\"]].map(([v,l],i)=><div className={\"p-6 \"+(i<4?\"md:border-r-2 border-b-2 md:border-b-0 border-[#191919]\":\"\")}><div className=\"text-2xl font-black\">{v}</div><div className=\"text-sm text-gray-500 mt-1\">{l}</div></div>)}</div><p className=\"border-t-2 border-[#191919] p-6 bg-[#f4efe4] font-semibold\">{q.methodology}</p></div></section>\n  <section className=\"mt-16\"><h2 className=\"text-4xl font-black\">Quarterly operating budget</h2><p className=\"mt-2 text-gray-600\">Planned costs explain what the collective expects to fund before the quarter begins.</p><div className=\"mt-6 grid md:grid-cols-2 gap-4\">{d.budget.map((b:any)=><div className=\"bg-white border-2 border-[#191919] rounded-2xl p-6 flex justify-between gap-5\"><div><h3 className=\"text-xl font-black\">{b.category}</h3><p className=\"text-gray-600 mt-2\">{b.explanation}</p></div><div className=\"text-xl font-black whitespace-nowrap\">{money(b.planned_cents)}</div></div>)}</div></section>\n  <section className=\"mt-16\"><div className=\"flex justify-between items-end\"><div><h2 className=\"text-4xl font-black\">Posted transactions</h2><p className=\"mt-2 text-gray-600\">Entries are never deleted. Corrections remain visible as voided records.</p></div><span className=\"font-black\">{d.transactions.length} entries</span></div><div className=\"mt-6 bg-white border-2 border-[#191919] rounded-2xl overflow-x-auto\"><table className=\"w-full text-left\"><thead className=\"bg-[#191919] text-white\"><tr>{[\"Date\",\"Type\",\"Category / explanation\",\"Payee\",\"Amount\",\"Evidence\"].map(x=><th className=\"p-4 whitespace-nowrap\">{x}</th>)}</tr></thead><tbody>{d.transactions.length?d.transactions.map((t:any)=><tr className={\"border-t \"+(t.voided_at?\"opacity-50 line-through\":\"\")}><td className=\"p-4 whitespace-nowrap\">{t.transaction_date}</td><td className=\"p-4 font-black\">{t.type}</td><td className=\"p-4\"><b>{t.category}</b><div className=\"text-sm text-gray-500\">{t.description}</div>{t.voided_at&&<div className=\"text-xs text-red-700\">VOID: {t.void_reason}</div>}</td><td className=\"p-4\">{t.payee||\"—\"}</td><td className={\"p-4 font-black \"+(t.type===\"income\"?\"text-green-700\":\"text-red-700\")}>{t.type===\"income\"?\"+\":\"−\"}{money(t.amount_cents)}</td><td className=\"p-4\">{t.receipt_url?<a className=\"underline font-bold\" href={t.receipt_url} target=\"_blank\">Receipt ↗</a>:\"—\"}</td></tr>):<tr><td colSpan={6} className=\"p-10 text-center\"><div className=\"text-4xl\">🧾</div><b className=\"block mt-3\">No transactions yet</b><p className=\"text-gray-500 mt-1\">The ledger is functional and begins at exactly zero.</p></td></tr>}</tbody></table></div></section>\n  <div className=\"mt-12 bg-[#2364aa] text-white p-7 rounded-3xl border-2 border-[#191919]\"><h3 className=\"text-2xl font-black\">What this ledger does—and does not—prove</h3><p className=\"mt-3 text-blue-100\">It shows the records entered by the collective, evidence attached to them, and the formula used for dues. It is not an independent audit. Members should reconcile it against the club bank account and vote on material budget changes.</p></div>\n </section>}\nfunction Card({label,value,blue,red,yellow}:any){return <div className={(blue?\"bg-[#2364aa] text-white\":red?\"bg-[#ef3b2d] text-white\":yellow?\"bg-[#f7d34b]\":\"bg-white\")+\" border-2 border-[#191919] rounded-2xl p-5\"}><div className=\"text-sm font-bold opacity-70\">{label}</div><div className=\"text-3xl font-black mt-2\">{value}</div></div>}",[],[156,157,230],"3f434b1a-44f3-4273-9ce2-e2f22fc71ce2","Counter.tsx","01a03bb4-ad03-72f9-9867-74e6d06960a6",["D",1787708091556],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[156,157,238],"d5b53ef4-68ed-49d3-a3e0-d193cf491a8f","App.tsx","01a03bb4-ad03-72f9-9867-7188600c45c0",["D",1787750565467],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect,useState } from \"https://esm.sh/react@18.2.0\";\nimport { Finances } from \"./Finances.tsx\";\nimport { AdminFinance } from \"./AdminFinance.tsx\";\ntype Car={id:number;name:string;year:string;discipline:string;status:string;detail:string;next_ready:string;accent:string};\ntype Event={id:number;title:string;event_date:string;location:string;discipline:string;car_name?:string;capacity:number;status:string;description:string;booked:number};\ntype Data={cars:Car[];events:Event[];stats:{members:number;reservations:number;ready_cars:number}};\nconst fmt=(d:string)=>new Date(d+\"T12:00:00\").toLocaleDateString(\"en-US\",{month:\"short\",day:\"numeric\",year:\"numeric\"});\nconst accent:any={red:\"bg-[#ef3b2d]\",blue:\"bg-[#2364aa]\",amber:\"bg-[#f0a202]\",green:\"bg-[#16835a]\"};\n\nfunction Mark(){return <div className=\"flex items-center gap-3 text-left\"><div className=\"w-11 h-11 rounded-full bg-[#ef3b2d] text-white grid place-items-center font-black text-sm border-2 border-[#191919] shadow-[3px_3px_0_#191919]\">MLC</div><div><div className=\"font-black leading-none text-lg\">MIATA LIFE CRISIS</div><div className=\"text-[10px] uppercase tracking-[.25em] mt-1\">Social motorsport club</div></div></div>}\nfunction Header({view,go}:{view:string;go:(v:string)=>void}){const tabs=[[\"home\",\"How it works\"],[\"events\",\"Events\"],[\"fleet\",\"The fleet\"],[\"finances\",\"Open books\"],[\"join\",\"Join\"],[\"desk\",\"Club desk\"]];return <header className=\"sticky top-0 z-40 bg-[#f4efe4]/95 backdrop-blur border-b-2 border-[#191919]\"><div className=\"max-w-7xl mx-auto px-4 md:px-8 h-20 flex items-center justify-between\"><button onClick={()=>go(\"home\")}><Mark/></button><nav className=\"hidden lg:flex gap-1\">{tabs.map(([id,t])=><button onClick={()=>go(id)} className={\"px-4 py-2 rounded-full text-sm font-bold \"+(view===id?\"bg-[#191919] text-white\":\"hover:bg-white\")}>{t}</button>)}</nav><button onClick={()=>go(\"join\")} className=\"bg-[#ef3b2d] text-white font-black px-5 py-3 rounded-full border-2 border-[#191919] shadow-[3px_3px_0_#191919]\">GET A SEAT</button></div><div className=\"lg:hidden flex overflow-x-auto gap-2 px-3 pb-3\">{tabs.map(([id,t])=><button onClick={()=>go(id)} className={\"whitespace-nowrap px-3 py-1.5 rounded-full text-xs font-bold border border-[#191919] \"+(view===id?\"bg-[#191919] text-white\":\"bg-white\")}>{t}</button>)}</div></header>}\n\nfunction Home({go}:{go:(v:string)=>void}){const steps=[[\"01\",\"Join the club\",\"Tell us what you want to try. Newcomers are genuinely welcome.\"],[\"02\",\"Pay quarterly dues\",\"Dues cover the real costs—not somebody's profit margin.\"],[\"03\",\"Pick an experience\",\"We match demand, car readiness, and member experience.\"],[\"04\",\"Show up & send it\",\"The car arrives prepared. You get coaching, seat time, and friends.\"]];return <><section className=\"relative overflow-hidden border-b-2 border-[#191919]\"><div className=\"absolute inset-0 opacity-[.07]\" style={{backgroundImage:\"linear-gradient(45deg,#191919 25%,transparent 25%),linear-gradient(-45deg,#191919 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#191919 75%),linear-gradient(-45deg,transparent 75%,#191919 75%)\",backgroundSize:\"42px 42px\",backgroundPosition:\"0 0,0 21px,21px -21px,-21px 0\"}}/><div className=\"relative max-w-7xl mx-auto px-4 md:px-8 py-20 md:py-28 grid md:grid-cols-12 gap-10 items-end\"><div className=\"md:col-span-8\"><div className=\"inline-block bg-[#f7d34b] border-2 border-[#191919] rounded-full px-4 py-2 font-bold text-sm rotate-[-2deg] mb-7\">🏁 Cars are expensive. Friends are priceless.</div><h1 className=\"text-6xl md:text-8xl lg:text-9xl font-black tracking-[-.07em] leading-[.82] uppercase\">A little<br/><span className=\"text-[#ef3b2d]\">crisis.</span><br/>A lot of life.</h1></div><div className=\"md:col-span-4\"><p className=\"text-xl md:text-2xl leading-snug font-semibold\">A collectively funded fleet for people who want to drift, race, and wrench—without buying a dedicated car alone.</p><div className=\"flex flex-wrap gap-3 mt-8\"><button onClick={()=>go(\"join\")} className=\"bg-[#191919] text-white rounded-full px-6 py-4 font-black\">JOIN THE COLLECTIVE →</button><button onClick={()=>go(\"events\")} className=\"bg-white border-2 border-[#191919] rounded-full px-6 py-4 font-black\">SEE THE FUN</button></div></div></div></section><div className=\"bg-[#191919] text-white py-4 overflow-hidden whitespace-nowrap font-black tracking-widest\">SHARED CARS ✦ QUARTERLY EVENTS ✦ PROFESSIONAL MAINTENANCE ✦ MORE SEAT TIME ✦ LESS GARAGE GUILT ✦ SHARED CARS ✦ QUARTERLY EVENTS</div><section className=\"max-w-7xl mx-auto px-4 md:px-8 py-20\"><div className=\"grid md:grid-cols-3 gap-8\"><div><p className=\"uppercase tracking-[.25em] text-sm font-black text-[#ef3b2d]\">The pitch</p><h2 className=\"text-4xl md:text-6xl font-black mt-3\">Own the access,<br/>not the headache.</h2></div><div className=\"md:col-span-2 text-xl leading-relaxed\"><p>Miata Life Crisis is social ownership for specialized motorsport. The collective maintains a small fleet centrally and deploys each car just in time for the experiences members choose.</p><p className=\"mt-5\">This is not a rental counter and not an investment. It is a cost-sharing club built to make a ridiculous, joyful pastime more accessible and more social.</p></div></div><div className=\"grid md:grid-cols-4 border-2 border-[#191919] mt-16 bg-white shadow-[8px_8px_0_#ef3b2d]\">{steps.map(([n,t,d],i)=><div className={\"p-6 min-h-60 \"+(i<3?\"md:border-r-2 border-b-2 md:border-b-0 border-[#191919]\":\"\")}><div className=\"text-[#ef3b2d] font-black text-4xl\">{n}</div><h3 className=\"text-xl font-black mt-8\">{t}</h3><p className=\"mt-3 text-gray-600\">{d}</p></div>)}</div></section><section className=\"bg-[#2364aa] text-white border-y-2 border-[#191919]\"><div className=\"max-w-7xl mx-auto px-4 md:px-8 py-16 grid md:grid-cols-3 gap-10\"><div className=\"text-5xl font-black\">ONE EVENT.<br/>EVERY QUARTER.</div><div className=\"md:col-span-2 grid sm:grid-cols-3 gap-6\">{[[\"🌀\",\"Drift\",\"Car control and big stupid grins.\"],[\"🏎️\",\"GT / Track\",\"Coached pace on a real circuit.\"],[\"⛰️\",\"Off-road, soon\",\"Rallycross is on the roadmap.\"]].map(([e,t,d])=><div><div className=\"text-4xl\">{e}</div><h3 className=\"font-black text-xl mt-3\">{t}</h3><p className=\"opacity-80 mt-2\">{d}</p></div>)}</div></div></section></>}\n\nfunction Events({events,pick}:{events:Event[];pick:(e:Event)=>void}){return <Page eyebrow=\"Choose your quarter\" title=\"Upcoming experiences\" intro=\"Small groups, prepped cars, instruction when you need it, and no expectation that you already know the secret handshake.\"><div className=\"grid md:grid-cols-2 gap-6\">{events.map((e,i)=><article className=\"bg-white border-2 border-[#191919] rounded-3xl overflow-hidden shadow-[6px_6px_0_#191919]\"><div className={\"h-3 \"+(i%2?\"bg-[#2364aa]\":\"bg-[#ef3b2d]\")}/><div className=\"p-7\"><div className=\"flex justify-between\"><span className=\"uppercase tracking-widest text-xs font-black\">{e.discipline}</span><span className=\"text-xs font-black bg-green-100 rounded-full px-3 py-1\">{e.status}</span></div><h2 className=\"text-3xl font-black mt-6\">{e.title}</h2><p className=\"text-gray-600 mt-3 min-h-16\">{e.description}</p><div className=\"grid grid-cols-2 gap-4 border-y py-5 my-5 text-sm\"><div><span className=\"block text-gray-500\">When</span><b>{fmt(e.event_date)}</b></div><div><span className=\"block text-gray-500\">Where</span><b>{e.location}</b></div><div><span className=\"block text-gray-500\">Car</span><b>{e.car_name||\"Bring your stories\"}</b></div><div><span className=\"block text-gray-500\">Seats</span><b>{Number(e.booked)}/{e.capacity} claimed</b></div></div><button onClick={()=>pick(e)} className=\"w-full bg-[#191919] hover:bg-[#ef3b2d] text-white rounded-full py-3 font-black\">{e.status===\"Waitlist\"?\"JOIN WAITLIST\":\"RESERVE THIS EXPERIENCE\"}</button></div></article>)}</div></Page>}\nfunction Page({eyebrow,title,intro,children}:any){return <section className=\"max-w-7xl mx-auto px-4 md:px-8 py-16\"><p className=\"uppercase tracking-[.25em] text-sm font-black text-[#ef3b2d]\">{eyebrow}</p><h1 className=\"text-5xl md:text-7xl font-black mt-3\">{title}</h1><p className=\"text-xl mt-5 max-w-3xl\">{intro}</p><div className=\"mt-12\">{children}</div></section>}\nfunction Fleet({cars}:{cars:Car[]}){return <Page eyebrow=\"Collectively kept\" title=\"Meet the fleet\" intro=\"A deliberately small set of cars, maintained centrally and prepared for specific jobs. Members can always see what is ready, what is being serviced, and what is coming next.\"><div className=\"grid md:grid-cols-2 gap-6\">{cars.map(c=><article className=\"relative bg-white border-2 border-[#191919] p-7 rounded-3xl overflow-hidden\"><div className={\"absolute inset-y-0 left-0 w-3 \"+accent[c.accent]}/><div className=\"pl-3 flex justify-between\"><div><div className=\"text-sm font-black uppercase tracking-widest\">{c.discipline}</div><h2 className=\"text-4xl font-black mt-2\">{c.name}</h2><p className=\"text-gray-500\">{c.year}</p></div><span className={\"h-fit rounded-full border-2 border-[#191919] px-3 py-1 text-xs font-black \"+(c.status===\"Ready\"?\"bg-green-200\":c.status===\"Service\"?\"bg-amber-200\":\"bg-gray-100\")}>{c.status}</span></div><div className=\"pl-3 mt-10 border-t pt-5 grid grid-cols-3 gap-4\"><div className=\"col-span-2\"><span className=\"block text-xs text-gray-500 uppercase\">Garage note</span><b>{c.detail}</b></div><div><span className=\"block text-xs text-gray-500 uppercase\">Ready</span><b>{c.next_ready}</b></div></div></article>)}</div></Page>}\n\nfunction Join({reload}:{reload:()=>void}){const [f,setF]=useState({name:\"\",email:\"\",experience:\"\",interests:[] as string[]});const [msg,setMsg]=useState(\"\");const [busy,setBusy]=useState(false);const toggle=(x:string)=>setF({...f,interests:f.interests.includes(x)?f.interests.filter(i=>i!==x):[...f.interests,x]});async function submit(e:any){e.preventDefault();setBusy(true);const r=await fetch(\"/api/members\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify(f)});const j=await r.json();setMsg(j.message||j.error);setBusy(false);if(r.ok)reload()}return <section className=\"max-w-5xl mx-auto px-4 py-16\"><div className=\"grid md:grid-cols-5 bg-white border-2 border-[#191919] rounded-3xl overflow-hidden shadow-[8px_8px_0_#ef3b2d]\"><div className=\"md:col-span-2 bg-[#191919] text-white p-8 md:p-12\"><p className=\"text-[#f7d34b] uppercase tracking-widest text-xs font-black\">Membership application</p><h1 className=\"text-5xl font-black mt-4\">Bring your curiosity.</h1><p className=\"mt-5 text-gray-300\">No race résumé required. We use this to match people with a safe, satisfying first experience.</p><div className=\"mt-10 border-t border-gray-700 pt-8 space-y-5\"><b className=\"block\">Quarterly dues</b><p className=\"text-gray-400 text-sm\">Shared transparently across actual operating costs.</p><b className=\"block\">One event per quarter</b><p className=\"text-gray-400 text-sm\">Additional seats open after every member has a chance.</p><b className=\"block\">Member voice</b><p className=\"text-gray-400 text-sm\">Vote on the calendar, fleet, and priorities.</p></div></div><form onSubmit={submit} className=\"md:col-span-3 p-8 md:p-12 space-y-6\">{[[\"name\",\"Your name\",\"Paul Chin Jr.\"],[\"email\",\"Email\",\"you@example.com\"]].map(([k,l,p])=><label className=\"block\"><span className=\"font-bold text-sm\">{l}</span><input required type={k===\"email\"?\"email\":\"text\"} value={(f as any)[k]} onChange={e=>setF({...f,[k]:e.target.value})} className=\"mt-2 w-full border-2 border-[#191919] rounded-xl p-3 bg-[#f4efe4]\" placeholder={p}/></label>)}<fieldset><legend className=\"font-bold text-sm mb-2\">What sounds fun?</legend><div className=\"flex flex-wrap gap-2\">{[\"Drift\",\"GT / track\",\"Autocross\",\"Off-road\",\"Garage days\"].map(x=><button type=\"button\" onClick={()=>toggle(x)} className={\"rounded-full px-4 py-2 border-2 border-[#191919] font-bold text-sm \"+(f.interests.includes(x)?\"bg-[#f7d34b]\":\"bg-white\")}>{x}</button>)}</div></fieldset><label className=\"block\"><span className=\"font-bold text-sm\">Driving experience</span><select required value={f.experience} onChange={e=>setF({...f,experience:e.target.value})} className=\"mt-2 w-full border-2 border-[#191919] rounded-xl p-3 bg-[#f4efe4]\"><option value=\"\">Choose one</option><option>Brand new to motorsport</option><option>A few autocross or track days</option><option>Experienced driver</option><option>I prefer the garage / community side</option></select></label><button disabled={busy||!f.interests.length} className=\"w-full bg-[#ef3b2d] disabled:opacity-40 text-white border-2 border-[#191919] rounded-full py-4 font-black shadow-[4px_4px_0_#191919]\">{busy?\"SENDING…\":\"APPLY FOR A SEAT →\"}</button>{msg&&<p className=\"font-bold text-center\">{msg}</p>}<p className=\"text-xs text-gray-500 text-center\">This prototype does not collect payment. Dues and operating rules would be approved by founding members.</p></form></div></section>}\n\nfunction Desk({data}:{data:Data}){\n const [admin,setAdmin]=useState<any>(null);const [state,setState]=useState(\"loading\");\n const loadAdmin=()=>fetch(\"/api/admin/dashboard\").then(async r=>{if(r.status===401){setState(\"login\");return}if(r.status===403){setState(\"forbidden\");return}if(!r.ok)throw new Error(\"Admin request failed\");setAdmin(await r.json());setState(\"ready\")}).catch(()=>setState(\"error\"));\n useEffect(()=>{loadAdmin()},[]);\n const patch=async(path:string,body:any)=>{await fetch(\"/api/admin/\"+path,{method:\"PATCH\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify(body)});await loadAdmin()};\n if(state===\"loading\")return <Page eyebrow=\"Private operations\" title=\"Opening the garage…\" intro=\"Checking your coordinator credentials.\"><div className=\"text-5xl animate-pulse\">🏁</div></Page>;\n if(state===\"login\")return <Page eyebrow=\"Private operations\" title=\"Coordinator sign-in\" intro=\"Member records and management controls are protected with your Val Town account.\"><div className=\"bg-white border-2 border-[#191919] rounded-3xl p-8 max-w-xl shadow-[7px_7px_0_#ef3b2d]\"><h2 className=\"text-2xl font-black\">Restricted to Paul</h2><p className=\"mt-3 text-gray-600\">Sign in as <b>pchinjr</b> to review applications, manage event seats, and update the fleet.</p><a href=\"/auth/login\" className=\"inline-block mt-6 bg-[#191919] text-white rounded-full px-6 py-3 font-black\">SIGN IN WITH VAL TOWN →</a></div></Page>;\n if(state===\"forbidden\")return <Page eyebrow=\"Private operations\" title=\"Access denied\" intro=\"You are signed in, but this dashboard is restricted to the club owner.\"><form method=\"POST\" action=\"/auth/logout\"><button className=\"bg-[#191919] text-white rounded-full px-5 py-3 font-black\">SIGN OUT</button></form></Page>;\n if(state===\"error\")return <Page eyebrow=\"Private operations\" title=\"Something stalled\" intro=\"The admin dashboard could not load.\"><button onClick={loadAdmin} className=\"bg-[#191919] text-white rounded-full px-5 py-3 font-black\">TRY AGAIN</button></Page>;\n return <Page eyebrow=\"Authenticated operations\" title=\"Club desk\" intro={\"Signed in as \"+admin.user+\". Member data below is never returned to public visitors.\"}><div className=\"flex justify-end -mt-20 mb-12\"><form method=\"POST\" action=\"/auth/logout\"><button className=\"border-2 border-[#191919] rounded-full px-4 py-2 font-black bg-white\">SIGN OUT</button></form></div><div className=\"grid md:grid-cols-3 gap-5\"><Stat n={admin.members.length} label=\"member applications\"/><Stat n={admin.bookings.length} label=\"event reservations\" blue/><Stat n={admin.cars.filter((c:any)=>c.status===\"Ready\").length+\"/\"+admin.cars.length} label=\"cars ready\" red/></div>\n <AdminFinance/><div className=\"mt-12\"><h2 className=\"text-3xl font-black mb-5\">Members</h2><div className=\"bg-white border-2 border-[#191919] rounded-2xl overflow-x-auto\"><table className=\"w-full text-left\"><thead className=\"bg-[#191919] text-white\"><tr>{[\"Member\",\"Interests\",\"Experience\",\"Status\"].map(x=><th className=\"p-4\">{x}</th>)}</tr></thead><tbody>{admin.members.length?admin.members.map((m:any)=><tr className=\"border-t\"><td className=\"p-4\"><b>{m.name}</b><div className=\"text-sm text-gray-500\">{m.email}</div></td><td className=\"p-4\">{m.interests}</td><td className=\"p-4 text-sm\">{m.experience}</td><td className=\"p-4\"><select value={m.status} onChange={e=>patch(\"members/\"+m.id,{status:e.target.value})} className=\"border-2 border-[#191919] rounded-lg p-2\"><option>pending</option><option>active</option><option>paused</option></select></td></tr>):<tr><td className=\"p-6 text-gray-500\" colSpan={4}>No applications yet.</td></tr>}</tbody></table></div></div>\n <div className=\"grid lg:grid-cols-2 gap-8 mt-12\"><section><h2 className=\"text-3xl font-black mb-5\">Fleet</h2><div className=\"space-y-4\">{admin.cars.map((c:any)=><div className=\"bg-white border-2 border-[#191919] rounded-2xl p-5\"><div className=\"flex justify-between gap-4\"><div><b className=\"text-xl\">{c.name}</b><p className=\"text-sm text-gray-500\">{c.year} · {c.discipline}</p></div><select value={c.status} onChange={e=>patch(\"cars/\"+c.id,{status:e.target.value,detail:c.detail,next_ready:c.next_ready})} className=\"border-2 border-[#191919] rounded-lg p-2\"><option>Ready</option><option>Service</option><option>Planning</option></select></div><p className=\"mt-3 text-sm\">{c.detail}</p></div>)}</div></section>\n <section><h2 className=\"text-3xl font-black mb-5\">Events</h2><div className=\"space-y-4\">{admin.events.map((e:any)=><div className=\"bg-white border-2 border-[#191919] rounded-2xl p-5\"><b className=\"text-xl\">{e.title}</b><p className=\"text-sm text-gray-500\">{fmt(e.event_date)} · capacity {e.capacity}</p><div className=\"flex gap-3 mt-4\"><select value={e.status} onChange={x=>patch(\"events/\"+e.id,{status:x.target.value,capacity:e.capacity})} className=\"border-2 border-[#191919] rounded-lg p-2\"><option>Open</option><option>Waitlist</option><option>Closed</option><option>Complete</option></select><input type=\"number\" min=\"1\" defaultValue={e.capacity} onBlur={x=>patch(\"events/\"+e.id,{status:e.status,capacity:Number(x.target.value)})} className=\"w-24 border-2 border-[#191919] rounded-lg p-2\"/></div></div>)}</div></section></div>\n <section className=\"mt-12\"><h2 className=\"text-3xl font-black mb-5\">Reservations</h2><div className=\"bg-white border-2 border-[#191919] rounded-2xl overflow-hidden\">{admin.bookings.length?admin.bookings.map((b:any)=><div className=\"p-5 border-b last:border-0 flex flex-wrap justify-between gap-4\"><div><b>{b.member_name}</b><div className=\"text-sm text-gray-500\">{b.member_email} · {b.event_title}</div></div><select value={b.status} onChange={e=>patch(\"bookings/\"+b.id,{status:e.target.value})} className=\"border-2 border-[#191919] rounded-lg p-2\"><option>confirmed</option><option>waitlist</option><option>cancelled</option><option>attended</option></select></div>):<p className=\"p-6 text-gray-500\">No reservations yet.</p>}</div></section></Page>}\nfunction Stat({n,label,blue,red}:any){return <div className={(blue?\"bg-[#2364aa]\":red?\"bg-[#ef3b2d]\":\"bg-[#191919]\")+\" text-white p-6 rounded-2xl\"}><div className=\"text-4xl font-black\">{n}</div><div className=\"opacity-70\">{label}</div></div>}\n\nfunction Modal({event,close,reload}:{event:Event;close:()=>void;reload:()=>void}){const [email,setEmail]=useState(\"\");const [msg,setMsg]=useState(\"\");async function submit(e:any){e.preventDefault();const r=await fetch(\"/api/events/\"+event.id+\"/join\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({email})});const j=await r.json();setMsg(j.message||j.error);if(r.ok)reload()}return <div className=\"fixed inset-0 z-50 bg-black/60 grid place-items-center p-4\" onMouseDown={close}><div className=\"bg-[#f4efe4] border-2 border-[#191919] rounded-3xl p-7 max-w-md w-full shadow-[8px_8px_0_#ef3b2d]\" onMouseDown={e=>e.stopPropagation()}><button onClick={close} className=\"float-right font-black text-xl\">×</button><p className=\"text-xs uppercase tracking-widest font-black text-[#ef3b2d]\">{event.discipline}</p><h2 className=\"text-3xl font-black mt-2\">{event.title}</h2><p className=\"mt-3 text-gray-600\">{fmt(event.event_date)} · {event.location}</p><form onSubmit={submit} className=\"mt-7\"><label className=\"font-bold text-sm\">Member email</label><input required type=\"email\" value={email} onChange={e=>setEmail(e.target.value)} className=\"w-full mt-2 p-3 border-2 border-[#191919] rounded-xl bg-white\"/><button className=\"mt-4 w-full bg-[#191919] text-white rounded-full p-3 font-black\">CLAIM MY SEAT</button>{msg&&<p className=\"mt-4 text-center font-bold\">{msg}</p>}</form></div></div>}\n\nexport function App(){const [view,setView]=useState(location.hash.slice(1)||\"home\");const [data,setData]=useState<Data>({cars:[],events:[],stats:{members:0,reservations:0,ready_cars:0}});const [pick,setPick]=useState<Event|null>(null);const load=()=>fetch(\"/api/dashboard\").then(r=>r.json()).then(setData);useEffect(load,[]);const go=(v:string)=>{setView(v);location.hash=v;scrollTo(0,0)};return <div className=\"min-h-screen\"><Header view={view} go={go}/><main>{view===\"home\"&&<Home go={go}/>} {view===\"events\"&&<Events events={data.events} pick={setPick}/>} {view===\"fleet\"&&<Fleet cars={data.cars}/>} {view===\"finances\"&&<Finances/>} {view===\"join\"&&<Join reload={load}/>} {view===\"desk\"&&<Desk data={data}/>}</main><footer className=\"border-t-2 border-[#191919] bg-white\"><div className=\"max-w-7xl mx-auto px-4 py-10 flex flex-wrap justify-between gap-6 items-center\"><Mark/><p className=\"max-w-lg text-sm text-gray-600\">Transparent costs, shared responsibility, safer access, and the radical idea that grown-ups still deserve hobbies.</p><a href=\"/source\" className=\"font-black underline\">View source ↗</a></div></footer>{pick&&<Modal event={pick} close={()=>setPick(null)} reload={load}/>}</div>}",[],[156,157,245],["D",1787750519983],[],[156,157,65],"f410a1a4-0b7d-41f9-be62-dbd2254012dd",["D",1787708091556],"directory",[171,172,173,174],[156,157],"2fb37412-439c-427c-b829-d54e775c2e75",["D",1787708091556],[170,175,176,177],[156],["D",1787708091556],["D",1789533091345],{"_11":12,"_125":71},{"_11":12,"_121":-5,"_70":71,"_30":69,"_122":123,"_124":24},{"_38":112,"_13":16,"_32":35,"_113":73,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_53":-5,"_144":302,"_303":304,"_305":306,"_307":24,"_308":24,"_309":24,"_310":86,"_311":-5,"_312":-7,"_313":-7,"_314":26,"_315":24,"_316":24,"_317":-5,"_318":24,"_319":24,"_320":24,"_321":-5},"ENV",{"_273":274,"_275":276,"_277":16,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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>

History · AdminFinance.tsx