[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_116":117,"_118":119},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","jazzjosan","name","business-crm-pipeline","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/jazzjosan/business-crm-pipeline/code/frontend/components/App.tsx","extension","id","db1e80ae-1d47-4f54-8979-56de49dcad1f","App.tsx","fileId","019ff6bd-25c1-7561-b0e1-f285b48b9df3","parentId","019ff6bd-25c1-7561-b0e1-fa213f0cc08d","branchId","ba081567-e40f-45c3-9e10-0d1a4ab91fb3","branchVersion",3,"latest",true,"createdAt",["D",1786551098514],"version",1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst STAGE_COLORS: Record = {\n \"New Lead\": \"bg-slate-100 text-slate-700\",\n \"Contacted\": \"bg-blue-100 text-blue-700\",\n \"Quoted\": \"bg-amber-100 text-amber-700\",\n \"Contract Signed\": \"bg-purple-100 text-purple-700\",\n \"Active Client\": \"bg-emerald-100 text-emerald-700\",\n \"Renewal Due\": \"bg-orange-100 text-orange-700\",\n \"Lost\": \"bg-red-100 text-red-700\",\n};\n\nconst BUSINESS_COLORS: Record = {\n \"We Staff Canada\": \"border-l-blue-500\",\n \"Can Clean Solutions\": \"border-l-emerald-500\",\n \"Zeus Security Services\": \"border-l-slate-700\",\n};\n\nconst emptyForm = {\n id: null as number | null,\n business: \"\",\n company_name: \"\",\n contact_name: \"\",\n email: \"\",\n phone: \"\",\n stage: \"New Lead\",\n source: \"\",\n notes: \"\",\n next_follow_up: \"\",\n contract_renewal_date: \"\",\n bill_rate: \"\",\n};\n\nfunction daysUntil(dateStr: string) {\n if (!dateStr) return null;\n const diff = (new Date(dateStr).getTime() - new Date().setHours(0, 0, 0, 0)) / 86400000;\n return Math.round(diff);\n}\n\nexport function App() {\n const [meta, setMeta] = useState<{ businesses: string[]; stages: string[] }>({ businesses: [], stages: [] });\n const [contacts, setContacts] = useState([]);\n const [activeBusiness, setActiveBusiness] = useState(\"all\");\n const [loading, setLoading] = useState(true);\n const [showForm, setShowForm] = useState(false);\n const [form, setForm] = useState(emptyForm);\n const [saving, setSaving] = useState(false);\n\n async function loadMeta() {\n const res = await fetch(\"/api/meta\");\n setMeta(await res.json());\n }\n\n async function loadContacts(business: string) {\n setLoading(true);\n const res = await fetch(`/api/contacts?business=${encodeURIComponent(business)}`);\n setContacts(await res.json());\n setLoading(false);\n }\n\n useEffect(() => {\n loadMeta();\n }, []);\n\n useEffect(() => {\n loadContacts(activeBusiness);\n }, [activeBusiness]);\n\n const dueSoon = useMemo(() => {\n return contacts.filter((c) => {\n const f = daysUntil(c.next_follow_up);\n const r = daysUntil(c.contract_renewal_date);\n return (f !== null && f <= 7) || (r !== null && r <= 30);\n });\n }, [contacts]);\n\n function openNew() {\n setForm({ ...emptyForm, business: activeBusiness !== \"all\" ? activeBusiness : meta.businesses[0] ?? \"\" });\n setShowForm(true);\n }\n\n function openEdit(c: any) {\n setForm({\n id: c.id,\n business: c.business ?? \"\",\n company_name: c.company_name ?? \"\",\n contact_name: c.contact_name ?? \"\",\n email: c.email ?? \"\",\n phone: c.phone ?? \"\",\n stage: c.stage ?? \"New Lead\",\n source: c.source ?? \"\",\n notes: c.notes ?? \"\",\n next_follow_up: c.next_follow_up ?? \"\",\n contract_renewal_date: c.contract_renewal_date ?? \"\",\n bill_rate: c.bill_rate ?? \"\",\n });\n setShowForm(true);\n }\n\n async function saveForm(e: React.FormEvent) {\n e.preventDefault();\n setSaving(true);\n const payload = { ...form };\n delete (payload as any).id;\n if (form.id == null) {\n await fetch(\"/api/contacts\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n } else {\n await fetch(`/api/contacts/${form.id}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n }\n setSaving(false);\n setShowForm(false);\n loadContacts(activeBusiness);\n }\n\n async function quickStageChange(c: any, stage: string) {\n await fetch(`/api/contacts/${c.id}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ stage }),\n });\n loadContacts(activeBusiness);\n }\n\n async function removeContact(id: number) {\n if (!confirm(\"Delete this lead/client record? This cannot be undone.\")) return;\n await fetch(`/api/contacts/${id}`, { method: \"DELETE\" });\n loadContacts(activeBusiness);\n }\n\n return (\n

Business CRM & Pipeline

We Staff Canada · Can Clean Solutions · Zeus Security Services

\n \n + New Lead / Client\n \n

\n\n

\n setActiveBusiness(\"all\")}\n className={`px-3 py-1.5 rounded-full text-sm font-medium ${\n activeBusiness === \"all\" ? \"bg-gray-900 text-white\" : \"bg-gray-100 text-gray-700 hover:bg-gray-200\"\n }`}\n >\n All Businesses\n \n {meta.businesses.map((b) => (\n setActiveBusiness(b)}\n className={`px-3 py-1.5 rounded-full text-sm font-medium ${\n activeBusiness === b ? \"bg-gray-900 text-white\" : \"bg-gray-100 text-gray-700 hover:bg-gray-200\"\n }`}\n >\n {b}\n \n ))}\n

\n\n {dueSoon.length > 0 && (\n

\n {dueSoon.length} lead{dueSoon.length === 1 ? \"\" : \"s\"}/client{dueSoon.length === 1 ? \"\" : \"s\"} need\n {\" \"}attention soon — a follow-up due within 7 days or a contract renewal within 30 days.\n

\n )}\n\n {loading ? (\n

Loading…

\n ) : contacts.length === 0 ? (\n

No leads or clients yet for this view.

\n \n

\n ) : (\n

\n \n \n \n \n {activeBusiness === \"all\" && }\n \n \n \n \n \n \n \n \n {contacts.map((c) => (\n \n \n {activeBusiness === \"all\" && }\n \n \n \n \n \n \n ))}\n \n

Company	Business	Contact	Stage	Next follow-up	Renewal
openEdit(c)}>\n {c.company_name}\n	{c.business}	\n {c.contact_name}\n {c.email && {c.email} }\n	\n quickStageChange(c, e.target.value)}\n className={`text-xs font-medium rounded-full px-2 py-1 border-0 ${STAGE_COLORS[c.stage] ?? \"bg-gray-100\"}`}\n >\n {meta.stages.map((s) => (\n \n ))}\n \n	\n {c.next_follow_up \|\| \"—\"}\n	\n {c.contract_renewal_date \|\| \"—\"}\n	\n \n \n

\n )}\n\n {showForm && (\n

{form.id == null ? \"New Lead / Client\" : \"Edit\"}

\n Business\n setForm({ ...form, business: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n >\n \n {meta.businesses.map((b) => (\n \n ))}\n \n

\n Company name\n setForm({ ...form, company_name: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Contact name\n setForm({ ...form, contact_name: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Stage\n setForm({ ...form, stage: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n >\n {meta.stages.map((s) => (\n \n ))}\n \n

\n Email\n setForm({ ...form, email: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Phone\n setForm({ ...form, phone: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Next follow-up\n setForm({ ...form, next_follow_up: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Contract renewal date\n setForm({ ...form, contract_renewal_date: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Lead source\n setForm({ ...form, source: e.target.value })}\n placeholder=\"Referral, website, cold call…\"\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Bill rate / deal size\n setForm({ ...form, bill_rate: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n Notes\n setForm({ ...form, notes: e.target.value })}\n rows={3}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\"\n />\n

\n setShowForm(false)}\n className=\"px-4 py-2 text-sm text-gray-600 hover:text-gray-900\"\n >\n Cancel\n \n \n {saving ? \"Saving…\" : \"Save\"}\n \n

\n )}\n\n

\n View source\n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","7c6a501b-e747-4e1f-bd71-901982117925",["D",1786551016582],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","CRM & pipeline for Jazz's 3 companies","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789595999&sig=18aeddca3c1af95e36337c6aea2eb1cd1f097b3d06250b7665ca0274d3dfffd8","userId","33eebb42-9c30-4a4a-8f03-08cc7719b29c","pinnedFileId","019ff6bd-25c1-7561-b0e2-1445d01fd242","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019f7111-ccb7-7573-846a-5b3c406f66b6","tursoName","7c6a501be7474e1fbd71901982117925","tursoHostname","7c6a501be7474e1fbd71901982117925-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789517443998],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_115":111},"org",{"_9":10,"_108":109,"_110":111,"_60":61,"_112":113,"_114":44},"branch",{"_37":94,"_11":95,"_22":30,"_96":49,"_97":98,"_99":100,"_101":54,"_102":103,"_104":105,"_106":12,"_107":10},"isOwned",4,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",91,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","displayName","Jazz Josan","avatar","https://lh3.googleusercontent.com/a/ACg8ocJ0EO2QvJB-H6IDSyBgOtypsx04l9w0nKeesMqanfWKiROY3tUx=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_87":-5,"_149":150,"_151":152,"_153":154,"_155":44,"_156":44,"_157":44,"_158":34,"_159":-5,"_160":-7,"_161":-7,"_162":68,"_163":44,"_164":44,"_165":-5,"_166":44,"_167":44,"_168":44,"_169":-5},"ENV",{"_120":121,"_122":123,"_124":95,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]