Business Hub

\n \n\n\n",[18,66],"1fb169c7-6c69-48cc-8725-530042d5a6df",["D",1784309254218],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst BUSINESSES = {\n \"we-staff-canada\": { label: \"We Staff Canada\", accent: \"#0b2545\", tag: \"Staffing & Recruitment\" },\n \"can-clean\": { label: \"Can Clean Solutions\", accent: \"#0d6b3d\", tag: \"Commercial Cleaning\" },\n \"zeus-security\": { label: \"Zeus Security Services\", accent: \"#7a1e1e\", tag: \"Security Guard Services\" },\n} as const;\n\ntype BizKey = keyof typeof BUSINESSES;\n\nfunction cad(cents: number) {\n return (cents / 100).toLocaleString(\"en-CA\", { style: \"currency\", currency: \"CAD\" });\n}\n\nfunction Tabs({ tab, setTab }: { tab: string; setTab: (t: string) => void }) {\n const tabs = [\n [\"dashboard\", \"Dashboard\"],\n [\"lead\", \"New Lead\"],\n [\"quote\", \"Quote Calculator\"],\n ];\n return (\n

\n {tabs.map(([key, label]) => (\n setTab(key)}\n className={`px-4 py-2 rounded-md text-sm font-medium transition ${\n tab === key ? \"bg-slate-900 text-white\" : \"bg-slate-100 text-slate-600 hover:bg-slate-200\"\n }`}\n >\n {label}\n \n ))}\n

\n );\n}\n\nfunction BizPicker({ biz, setBiz }: { biz: BizKey; setBiz: (b: BizKey) => void }) {\n return (\n

\n {(Object.keys(BUSINESSES) as BizKey[]).map((key) => {\n const b = BUSINESSES[key];\n const active = biz === key;\n return (\n setBiz(key)}\n style={{ borderColor: b.accent, ...(active ? { backgroundColor: b.accent, color: \"white\" } : {}) }}\n className={`px-4 py-2 rounded-lg border-2 text-sm font-semibold transition ${\n active ? \"\" : \"bg-white text-slate-700\"\n }`}\n >\n {b.label}\n \n );\n })}\n

\n );\n}\n\nfunction Dashboard({ biz }: { biz: BizKey }) {\n const [leads, setLeads] = useState([]);\n const [loading, setLoading] = useState(true);\n\n async function load() {\n setLoading(true);\n const res = await fetch(`/api/leads?business=${biz}`);\n setLeads(await res.json());\n setLoading(false);\n }\n\n useEffect(() => {\n load();\n }, [biz]);\n\n async function updateStatus(id: number, status: string) {\n await fetch(`/api/leads/${id}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n load();\n }\n\n async function remove(id: number) {\n await fetch(`/api/leads/${id}`, { method: \"DELETE\" });\n load();\n }\n\n const statusColors: Record = {\n new: \"bg-blue-100 text-blue-700\",\n contacted: \"bg-amber-100 text-amber-700\",\n won: \"bg-green-100 text-green-700\",\n lost: \"bg-slate-200 text-slate-600\",\n };\n\n if (loading) return

Loading…

;\n\n return (\n

\n {BUSINESSES[biz].label} — {leads.length} lead{leads.length === 1 ? \"\" : \"s\"}\n

\n \n refresh\n \n

\n {leads.length === 0 ? (\n

\n No leads yet for {BUSINESSES[biz].label}. Add one from the \"New Lead\" tab, or run a quote and save it.\n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {leads.map((l) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

Name	Contact	Service	Estimate	Status	Date
{l.name}{l.company ? {l.company} : null}	{l.email} {l.phone}	{l.service_type \|\| \"—\"}	{l.estimate_cents ? cad(l.estimate_cents) : \"—\"}	\n updateStatus(l.id, e.target.value)}\n className={`rounded px-2 py-1 text-xs font-medium border-0 ${statusColors[l.status] \|\| \"bg-slate-100\"}`}\n >\n \n \n \n \n \n	{l.created_at?.slice(0, 10)}	\n \n

\n )}\n

\n );\n}\n\nfunction Field({ label, children }: { label: string; children: React.ReactNode }) {\n return (\n \n {label}\n {children}\n \n );\n}\n\nconst inputCls = \"w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-300\";\n\nfunction NewLead({ biz }: { biz: BizKey }) {\n const [form, setForm] = useState({ name: \"\", company: \"\", email: \"\", phone: \"\", service_type: \"\", message: \"\" });\n const [saved, setSaved] = useState(false);\n\n async function submit(e: React.FormEvent) {\n e.preventDefault();\n await fetch(\"/api/leads\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ business: biz, ...form }),\n });\n setForm({ name: \"\", company: \"\", email: \"\", phone: \"\", service_type: \"\", message: \"\" });\n setSaved(true);\n setTimeout(() => setSaved(false), 2500);\n }\n\n return (\n

New lead — {BUSINESSES[biz].label}

\n \n setForm({ ...form, name: e.target.value })} />\n \n \n setForm({ ...form, company: e.target.value })} />\n \n

\n \n setForm({ ...form, email: e.target.value })} />\n \n \n setForm({ ...form, phone: e.target.value })} />\n \n

\n \n setForm({ ...form, service_type: e.target.value })} />\n \n \n

setForm({ ...form, message: e.target.value })} />\n      </Field>\n      <button type=\"submit\" className=\"bg-slate-900 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-slate-700\">\n        Save lead\n      </button>\n      {saved && <span className=\"ml-3 text-sm text-green-600\">Saved ✓</span>}\n    </form>\n  );\n}\n\nfunction QuoteCalculator({ biz }: { biz: BizKey }) {\n  const [staffing, setStaffing] = useState({ placementType: \"temp\", payRate: 22, headcount: 1, annualSalary: 60000 });\n  const [clean, setClean] = useState({ sqft: 5000, frequency: \"weekly\", serviceType: \"standard\" });\n  const [security, setSecurity] = useState({ guardCount: 1, hoursPerWeek: 40, guardType: \"unarmed\" });\n  const [result, setResult] = useState<{ estimate_cents: number; breakdown: string[] } | null>(null);\n  const [saving, setSaving] = useState(false);\n  const [savedLead, setSavedLead] = useState({ name: \"\", email: \"\" });\n\n  async function calc() {\n    const params = biz === \"we-staff-canada\" ? staffing : biz === \"can-clean\" ? clean : security;\n    const res = await fetch(\"/api/quote\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ business: biz, ...params }),\n    });\n    setResult(await res.json());\n  }\n\n  async function saveAsLead() {\n    if (!savedLead.name) return;\n    setSaving(true);\n    await fetch(\"/api/leads\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({\n        business: biz,\n        name: savedLead.name,\n        email: savedLead.email,\n        service_type: \"quote\",\n        estimate_cents: result?.estimate_cents,\n        message: result?.breakdown.join(\"; \"),\n      }),\n    });\n    setSaving(false);\n    setResult(null);\n    setSavedLead({ name: \"\", email: \"\" });\n  }\n\n  return (\n    <div className=\"max-w-lg\">\n      <h2 className=\"text-lg font-semibold text-slate-800 mb-4\">Quote calculator — {BUSINESSES[biz].label}</h2>\n\n      {biz === \"we-staff-canada\" && (\n        <>\n          <Field label=\"Placement type\">\n            <select className={inputCls} value={staffing.placementType} onChange={(e) => setStaffing({ ...staffing, placementType: e.target.value })}>\n              <option value=\"temp\">Temporary staffing</option>\n              <option value=\"permanent\">Permanent placement</option>\n            </select>\n          </Field>\n          {staffing.placementType === \"temp\" ? (\n            <div className=\"grid grid-cols-2 gap-3\">\n              <Field label=\"Pay rate ($/hr)\">\n                <input type=\"number\" className={inputCls} value={staffing.payRate} onChange={(e) => setStaffing({ ...staffing, payRate: +e.target.value })} />\n              </Field>\n              <Field label=\"# of workers\">\n                <input type=\"number\" className={inputCls} value={staffing.headcount} onChange={(e) => setStaffing({ ...staffing, headcount: +e.target.value })} />\n              </Field>\n            </div>\n          ) : (\n            <div className=\"grid grid-cols-2 gap-3\">\n              <Field label=\"Annual salary ($)\">\n                <input type=\"number\" className={inputCls} value={staffing.annualSalary} onChange={(e) => setStaffing({ ...staffing, annualSalary: +e.target.value })} />\n              </Field>\n              <Field label=\"# of hires\">\n                <input type=\"number\" className={inputCls} value={staffing.headcount} onChange={(e) => setStaffing({ ...staffing, headcount: +e.target.value })} />\n              </Field>\n            </div>\n          )}\n        </>\n      )}\n\n      {biz === \"can-clean\" && (\n        <>\n          <Field label=\"Square footage\">\n            <input type=\"number\" className={inputCls} value={clean.sqft} onChange={(e) => setClean({ ...clean, sqft: +e.target.value })} />\n          </Field>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Field label=\"Frequency\">\n              <select className={inputCls} value={clean.frequency} onChange={(e) => setClean({ ...clean, frequency: e.target.value })}>\n                <option value=\"daily\">Daily</option>\n                <option value=\"weekly\">Weekly</option>\n                <option value=\"monthly\">Monthly</option>\n              </select>\n            </Field>\n            <Field label=\"Service type\">\n              <select className={inputCls} value={clean.serviceType} onChange={(e) => setClean({ ...clean, serviceType: e.target.value })}>\n                <option value=\"standard\">Standard cleaning</option>\n                <option value=\"deep\">Deep cleaning</option>\n                <option value=\"restoration\">Restoration</option>\n              </select>\n            </Field>\n          </div>\n        </>\n      )}\n\n      {biz === \"zeus-security\" && (\n        <>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Field label=\"# of guards\">\n              <input type=\"number\" className={inputCls} value={security.guardCount} onChange={(e) => setSecurity({ ...security, guardCount: +e.target.value })} />\n            </Field>\n            <Field label=\"Hours/week\">\n              <input type=\"number\" className={inputCls} value={security.hoursPerWeek} onChange={(e) => setSecurity({ ...security, hoursPerWeek: +e.target.value })} />\n            </Field>\n          </div>\n          <Field label=\"Guard type\">\n            <select className={inputCls} value={security.guardType} onChange={(e) => setSecurity({ ...security, guardType: e.target.value })}>\n              <option value=\"unarmed\">Unarmed guard</option>\n              <option value=\"armed\">Armed guard</option>\n              <option value=\"mobile-patrol\">Mobile patrol</option>\n            </select>\n          </Field>\n        </>\n      )}\n\n      <button onClick={calc} className=\"bg-slate-900 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-slate-700 mt-2\">\n        Calculate estimate\n      </button>\n\n      {result && (\n        <div className=\"mt-5 border rounded-lg p-4 bg-slate-50\">\n          <div className=\"text-2xl font-bold text-slate-900\">{cad(result.estimate_cents)}</div>\n          <ul className=\"text-xs text-slate-500 mt-2 space-y-1\">\n            {result.breakdown.map((b, i) => <li key={i}>• {b}</li>)}\n          </ul>\n          <div className=\"text-[11px] text-slate-400 mt-2\">Estimate only — rates are placeholders, edit the logic in main.ts to match your real pricing.</div>\n\n          <div className=\"mt-4 pt-4 border-t grid grid-cols-2 gap-2\">\n            <input placeholder=\"Lead name\" className={inputCls} value={savedLead.name} onChange={(e) => setSavedLead({ ...savedLead, name: e.target.value })} />\n            <input placeholder=\"Email\" className={inputCls} value={savedLead.email} onChange={(e) => setSavedLead({ ...savedLead, email: e.target.value })} />\n          </div>\n          <button onClick={saveAsLead} disabled={saving || !savedLead.name} className=\"mt-2 text-sm text-slate-700 underline disabled:text-slate-300\">\n            Save this quote as a lead\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default function App() {\n  const [biz, setBiz] = useState<BizKey>(\"we-staff-canada\");\n  const [tab, setTab] = useState(\"dashboard\");\n\n  return (\n    <div className=\"min-h-screen bg-slate-50 p-6 md:p-10\">\n      <div className=\"max-w-4xl mx-auto\">\n        <div className=\"flex items-center justify-between mb-1\">\n          <h1 className=\"text-2xl font-bold text-slate-900\">Business Hub</h1>\n          <a href=\"/source\" className=\"text-xs text-slate-400 hover:text-slate-600 underline\">view source</a>\n        </div>\n        <p className=\"text-sm text-slate-500 mb-6\">{BUSINESSES[biz].tag}</p>\n\n        <BizPicker biz={biz} setBiz={setBiz} />\n        <Tabs tab={tab} setTab={setTab} />\n\n        <div className=\"bg-white rounded-xl border p-6\">\n          {tab === \"dashboard\" && <Dashboard biz={biz} />}\n          {tab === \"lead\" && <NewLead biz={biz} />}\n          {tab === \"quote\" && <QuoteCalculator biz={biz} />}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[18,90],"pulls","branches",1,"forks","envVars",{"_197":26,"_199":26},"connections",{"_197":26,"_198":26},"count","unfilledCount","emptyCount",{"_35":167,"_13":18,"_64":91,"_45":-5,"_37":38,"_168":42,"_169":24,"_39":223,"_41":26,"_67":92,"_171":-5,"_68":30,"_172":-5,"_211":224,"_17":225},{"_35":185,"_13":90,"_64":89,"_45":91,"_37":38,"_168":84,"_169":24,"_39":220,"_41":26,"_67":81,"_171":187,"_68":30,"_172":-5,"_211":221,"_17":222},{"_35":181,"_13":66,"_64":65,"_45":91,"_37":38,"_168":42,"_169":24,"_39":217,"_41":26,"_67":21,"_171":183,"_68":30,"_172":-5,"_211":218,"_17":219},{"_35":177,"_13":80,"_64":79,"_45":91,"_37":38,"_168":74,"_169":24,"_39":214,"_41":26,"_67":81,"_171":179,"_68":30,"_172":-5,"_211":215,"_17":216},{"_35":205,"_13":206,"_64":105,"_45":-5,"_37":38,"_168":207,"_169":24,"_39":208,"_41":191,"_67":209,"_171":210,"_68":30,"_172":-5,"_211":212,"_17":213},"639a4f5a-7e45-4bda-bb1f-de35077d876f","main.ts",2,["D",1784309195118],"http","import { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// --- DB setup -------------------------------------------------------\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS leads (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  business TEXT NOT NULL,\n  name TEXT NOT NULL,\n  company TEXT,\n  email TEXT,\n  phone TEXT,\n  service_type TEXT,\n  message TEXT,\n  status TEXT NOT NULL DEFAULT 'new',\n  estimate_cents INTEGER,\n  created_at TEXT NOT NULL DEFAULT (datetime('now'))\n)`);\n\n// --- API --------------------------------------------------------------\n\napp.get(\"/api/leads\", async (c) => {\n  const business = c.req.query(\"business\");\n  const result = business\n    ? await sqlite.execute({\n      sql: \"SELECT * FROM leads WHERE business = ? ORDER BY created_at DESC\",\n      args: [business],\n    })\n    : await sqlite.execute(\"SELECT * FROM leads ORDER BY created_at DESC\");\n  return c.json(result.rows);\n});\n\napp.post(\"/api/leads\", async (c) => {\n  const body = await c.req.json();\n  const { business, name, company, email, phone, service_type, message, estimate_cents } = body;\n  if (!business || !name) {\n    return c.json({ error: \"business and name are required\" }, 400);\n  }\n  const result = await sqlite.execute({\n    sql: `INSERT INTO leads (business, name, company, email, phone, service_type, message, estimate_cents)\n          VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n    args: [\n      business,\n      name,\n      company ?? null,\n      email ?? null,\n      phone ?? null,\n      service_type ?? null,\n      message ?? null,\n      estimate_cents ?? null,\n    ],\n  });\n  return c.json({ id: Number(result.lastInsertRowid) }, 201);\n});\n\napp.patch(\"/api/leads/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  const body = await c.req.json();\n  if (!body.status) return c.json({ error: \"status required\" }, 400);\n  await sqlite.execute({\n    sql: \"UPDATE leads SET status = ? WHERE id = ?\",\n    args: [body.status, id],\n  });\n  return c.json({ ok: true });\n});\n\napp.delete(\"/api/leads/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  await sqlite.execute({ sql: \"DELETE FROM leads WHERE id = ?\", args: [id] });\n  return c.json({ ok: true });\n});\n\n// Quote calculator — simple, editable estimate logic per business.\napp.post(\"/api/quote\", async (c) => {\n  const body = await c.req.json();\n  const { business, ...params } = body;\n  let cents = 0;\n  let breakdown: string[] = [];\n\n  if (business === \"we-staff-canada\") {\n    const { placementType, payRate = 0, headcount = 1, annualSalary = 0 } = params;\n    if (placementType === \"permanent\") {\n      // Permanent placement fee: % of first-year salary\n      const feePct = 0.18;\n      cents = Math.round(annualSalary * feePct * headcount * 100);\n      breakdown.push(`Permanent placement fee: 18% of $${annualSalary.toLocaleString()} x ${headcount} hire(s)`);\n    } else {\n      // Temp staffing: markup over pay rate, billed weekly (40h) as illustrative estimate\n      const markupPct = 0.45;\n      const billRate = payRate * (1 + markupPct);\n      const weekly = billRate * 40 * headcount;\n      cents = Math.round(weekly * 100);\n      breakdown.push(`Temp staffing: $${payRate}/hr pay rate + 45% markup = $${billRate.toFixed(2)}/hr bill rate`);\n      breakdown.push(`Estimated weekly cost for ${headcount} worker(s) @ 40h/wk`);\n    }\n  } else if (business === \"can-clean\") {\n    const { sqft = 0, frequency = \"weekly\", serviceType = \"standard\" } = params;\n    const ratePerSqft = serviceType === \"deep\" ? 0.12 : serviceType === \"restoration\" ? 0.35 : 0.06;\n    const freqMultiplier = frequency === \"daily\" ? 22 : frequency === \"weekly\" ? 4.33 : 1; // visits/month\n    const perVisit = sqft * ratePerSqft;\n    const monthly = perVisit * freqMultiplier;\n    cents = Math.round(monthly * 100);\n    breakdown.push(`${sqft.toLocaleString()} sqft x $${ratePerSqft}/sqft x ${freqMultiplier.toFixed(1)} visits/mo (${frequency}, ${serviceType})`);\n  } else if (business === \"zeus-security\") {\n    const { guardCount = 1, hoursPerWeek = 40, guardType = \"unarmed\" } = params;\n    const hourlyRate = guardType === \"mobile-patrol\" ? 32 : guardType === \"armed\" ? 38 : 26;\n    const weekly = guardCount * hoursPerWeek * hourlyRate;\n    cents = Math.round(weekly * 100);\n    breakdown.push(`${guardCount} guard(s) x ${hoursPerWeek}h/wk x $${hourlyRate}/hr (${guardType})`);\n  } else {\n    return c.json({ error: \"unknown business\" }, 400);\n  }\n\n  return c.json({ estimate_cents: cents, breakdown });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- Frontend -----------------------------------------------------------\n\napp.get(\"/\", async (c) => {\n  const html = await readFile(\"/frontend/index.html\", import.meta.url);\n  return c.html(html);\n});\n\nexport default app.fetch;\n","children",[],[206],["D",1784309209848],[],[18,80],["D",1784309201718],[],[18,66],["D",1784309254218],[],[18,90],["D",1784309201718],[201,202,203],[18],["D",1784309107592],["D",1789472446807],{"_11":12,"_145":71},{"_11":12,"_140":141,"_70":71,"_31":69,"_142":143,"_144":30},{"_41":84,"_13":16,"_35":38,"_132":94,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":14,"_139":12},"ctx",{"_54":-5,"_164":264,"_265":266,"_267":268,"_269":30,"_270":30,"_271":30,"_272":24,"_273":-5,"_274":-7,"_275":-7,"_276":26,"_277":30,"_278":30,"_279":-5,"_280":30,"_281":30,"_282":30,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":16,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

History · frontend