Business Hub

\n \n\n\n",[],[131,166],"1fb169c7-6c69-48cc-8725-530042d5a6df","App.tsx","cc313198-8204-11f1-9a1b-1607ee4eb77e",["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",[],[131,173],["D",1784309201718],[148,149,150],[131],["D",1784309107592],["D",1789472446807],{"_16":17,"_87":83},{"_16":17,"_80":81,"_82":83,"_33":34,"_84":85,"_86":26},{"_68":69,"_20":70,"_18":71,"_72":19,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":21,"_79":17},"ctx",{"_61":-5,"_108":220,"_221":222,"_223":224,"_225":26,"_226":26,"_227":26,"_228":38,"_229":-5,"_230":-7,"_231":-7,"_232":42,"_233":26,"_234":26,"_235":-5,"_236":26,"_237":26,"_238":26,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":70,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"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>

Search