[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_154":155,"_156":157},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":53,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":53,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","731cf55c-1f02-11f1-acb4-42dde27851f2","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport ReactDOM from \"https://esm.sh/react-dom/client\";\n\nconst DAY = 12, DAYS_IN_MONTH = 31;\n\nconst CLIENT_COLORS: Record = {\n Synthesia: { color: \"#6366f1\", bg: \"#eef2ff\" },\n Sanity: { color: \"#f59e0b\", bg: \"#fffbeb\" },\n Zola: { color: \"#ef4444\", bg: \"#fef2f2\" },\n};\nconst DEFAULT_COLOR = { color: \"#64748b\", bg: \"#f8fafc\" };\n\nconst INIT_CLIENTS = [\n { name: \"Synthesia\", actualPct: 70 },\n { name: \"Sanity\", actualPct: 14 },\n { name: \"Zola\", actualPct: 8 },\n];\nconst INIT_EMAILS = [\n { client: \"Synthesia\", goal: 667, sent: 208, shouldHave: 258, pctToGoal: 80.56 },\n { client: \"Sanity\", goal: 2222, sent: 491, shouldHave: 860, pctToGoal: 57.08 },\n];\nconst INIT_PLACEMENTS = [\n { client: \"Synthesia\", opps: 7, made: 7 },\n { client: \"Sanity\", opps: 1, made: 5 },\n { client: \"Zola\", opps: 0, made: 1 },\n];\n\nfunction getStatus(p: number) {\n if (p >= 95) return { label: \"On Track\", color: \"#16a34a\", bg: \"#f0fdf4\" };\n if (p >= 70) return { label: \"Lagging\", color: \"#d97706\", bg: \"#fffbeb\" };\n return { label: \"At Risk\", color: \"#dc2626\", bg: \"#fef2f2\" };\n}\n\nfunction ProgressBar({ pct, color, pacePct }: { pct: number; color: string; pacePct: number }) {\n return (\n

\n );\n}\n\nfunction Input({ value, onChange, style = {} }: { value: number; onChange: (v: string) => void; style?: React.CSSProperties }) {\n return (\n onChange(e.target.value)}\n style={{ width: 70, padding: \"4px 8px\", border: \"1px solid #cbd5e1\", borderRadius: 6, fontSize: 13, textAlign: \"right\" as const, ...style }}\n />\n );\n}\n\nfunction Report() {\n const [clients, setClients] = useState(INIT_CLIENTS);\n const [emailData, setEmailData] = useState(INIT_EMAILS);\n const [placements, setPlacements] = useState(INIT_PLACEMENTS);\n const [expanded, setExpanded] = useState(null);\n const [editing, setEditing] = useState(false);\n const [day, setDay] = useState(DAY);\n\n const pacePct = (day / DAYS_IN_MONTH) * 100;\n const today = new Date().toLocaleDateString(\"en-US\", { month: \"long\", day: \"numeric\", year: \"numeric\" });\n\n const updateClient = (i: number, val: string) => { const c = [...clients]; c[i] = { ...c[i], actualPct: parseFloat(val) || 0 }; setClients(c); };\n const updateClientName = (i: number, val: string) => { const c = [...clients]; c[i] = { ...c[i], name: val }; setClients(c); };\n const addClient = () => setClients([...clients, { name: \"New Client\", actualPct: 0 }]);\n\n const updateEmail = (i: number, field: string, val: string) => {\n const e = [...emailData]; e[i] = { ...e[i], [field]: parseFloat(val) || 0 };\n if (field === \"sent\" || field === \"goal\") {\n const sent = field === \"sent\" ? parseFloat(val)||0 : e[i].sent;\n const goal = field === \"goal\" ? parseFloat(val)||0 : e[i].goal;\n e[i].pctToGoal = goal > 0 ? parseFloat(((sent / goal) * 100).toFixed(2)) : 0;\n }\n setEmailData(e);\n };\n const updateEmailClient = (i: number, val: string) => { const e = [...emailData]; e[i] = { ...e[i], client: val }; setEmailData(e); };\n const addEmail = () => setEmailData([...emailData, { client: \"New Client\", goal: 0, sent: 0, shouldHave: 0, pctToGoal: 0 }]);\n\n const updatePlacement = (i: number, field: string, val: string) => { const p = [...placements]; p[i] = { ...p[i], [field]: parseFloat(val) || 0 }; setPlacements(p); };\n const updatePlacementClient = (i: number, val: string) => { const p = [...placements]; p[i] = { ...p[i], client: val }; setPlacements(p); };\n const addPlacement = () => setPlacements([...placements, { client: \"New Client\", opps: 0, made: 0 }]);\n\n const onTrack = clients.filter(c => (c.actualPct / pacePct) * 100 >= 95).length;\n const lagging = clients.filter(c => { const p = (c.actualPct / pacePct) * 100; return p >= 70 && p < 95; }).length;\n const atRisk = clients.filter(c => (c.actualPct / pacePct) * 100 < 70).length;\n\n return (\n

\n {/* Header */}\n

Monthly Report

Offsite Client MTD Performance

\n Generated {today} · Day{\" \"}\n {editing ? setDay(parseFloat(v) || DAY)} style={{ width: 45 }} /> : {day}}\n {\" \"}of {DAYS_IN_MONTH} · Today's pace target: {pacePct.toFixed(1)}%\n

\n \n

\n\n {/* Summary */}\n

\n {[{ label: \"Clients Tracked\", val: clients.length }, { label: \"On Track\", val: onTrack }, { label: \"Lagging\", val: lagging }, { label: \"At Risk\", val: atRisk }].map(s => (\n

{s.val}

{s.label}

\n ))}\n

\n\n {/* Legend */}\n

\n {[\n { label: \"On Track\", color: \"#16a34a\", bg: \"#f0fdf4\", desc: \"≥95% of today's pace — on course to hit goal\" },\n { label: \"Lagging\", color: \"#d97706\", bg: \"#fffbeb\", desc: \"70–94% of today's pace — behind but recoverable\" },\n { label: \"At Risk\", color: \"#dc2626\", bg: \"#fef2f2\", desc: \"<70% of today's pace — needs immediate action\" },\n ].map(s => (\n

\n {s.label}\n {s.desc}\n

\n ))}\n

\n\n {/* Client cards */}\n

\n {clients.map((c, i) => {\n const { color, bg } = CLIENT_COLORS[c.name] || DEFAULT_COLOR;\n const pctOfPace = (c.actualPct / pacePct) * 100;\n const status = getStatus(pctOfPace);\n const open = expanded === c.name;\n return (\n

!editing && setExpanded(open ? null : c.name)} style={{ padding: \"18px 20px\", cursor: editing ? \"default\" : \"pointer\", background: \"#fff\", display: \"flex\", alignItems: \"center\", gap: 16 }}>\n

{c.name[0]}

\n {editing\n ? updateClientName(i, e.target.value)} style={{ fontWeight: 600, fontSize: 14, border: \"1px solid #cbd5e1\", borderRadius: 6, padding: \"4px 8px\", width: 140 }} />\n : {c.name}}\n

\n {editing ? (\n

\n MTD %: updateClient(i, v)} />\n

\n ) : (\n <>\n {c.actualPct}% MTD\n {Math.round(pctOfPace)}%\n {status.label}\n \n )}\n

\n {!editing && (\n <>\n \n

Gray line = today's pace target ({pacePct.toFixed(1)}%) · Large % = performance vs. today's target

\n \n )}\n

\n {!editing &&

{open ? \"▲\" : \"▼\"}

}\n

\n {!editing && open && (\n

Today's pace target: {pacePct.toFixed(1)}%

Actual MTD: {c.actualPct}%

vs. today's target: = 95 ? \"#16a34a\" : \"#dc2626\" }}>{Math.round(pctOfPace)}%

Projected EOM: {Math.min(Math.round(c.actualPct * 2), 100)}%

\n )}\n

\n );\n })}\n {editing && (\n \n )}\n

\n\n {/* Placement Metrics */}\n

📍 Placement Metrics — March

\n \n \n \n {[\n { label: \"Client\", tip: \"\" },\n { label: \"Placement Opps\", tip: \"Number of placement opportunities identified for the client this month.\" },\n { label: \"Placements Made\", tip: \"Number of placements actually secured and confirmed.\" },\n { label: \"Approval %\", tip: \"Placements Made ÷ Placement Opps. Over 100% means more placements were made than opps identified.\" },\n ].map(h => (\n \n ))}\n \n \n \n {placements.map((r, i) => {\n const { color } = CLIENT_COLORS[r.client] || DEFAULT_COLOR;\n const approvalPct = r.opps === 0 ? null : Math.round((r.made / r.opps) * 100);\n const approvalLabel = approvalPct === null ? \"N/A\" : `${approvalPct}%`;\n const approvalColor = approvalPct === null ? \"#94a3b8\" : approvalPct >= 100 ? \"#16a34a\" : approvalPct >= 50 ? \"#d97706\" : \"#dc2626\";\n return (\n \n \n \n \n \n \n );\n })}\n \n

\n {h.label}{h.tip ? \" ℹ️\" : \"\"}\n
\n {editing ? updatePlacementClient(i, e.target.value)} style={{ width: 100, padding: \"4px 8px\", border: \"1px solid #cbd5e1\", borderRadius: 6, fontSize: 13 }} /> : r.client}\n	{editing ? updatePlacement(i, \"opps\", v)} /> : r.opps}	{editing ? updatePlacement(i, \"made\", v)} /> : r.made}	{!editing && approvalLabel}

\n {editing && (\n \n )}\n

\n\n {/* Email Metrics */}\n

📧 Email Campaign Metrics

\n \n \n \n {[\n { label: \"Client\", tip: \"\" },\n { label: \"Goal\", tip: \"Total emails contracted/committed for the full month.\" },\n { label: \"Emails Sent MTD\", tip: \"Actual emails sent so far this month.\" },\n { label: \"Should Have Sent MTD\", tip: `Expected sends based on linear pacing through Day ${day} of ${DAYS_IN_MONTH}.` },\n { label: \"% to Goal\", tip: \"Actual sends as a percentage of the full monthly target.\" },\n { label: \"Pacing Status\", tip: \"Whether actual sends are ahead or behind today's expected pace.\" },\n ].map(h => (\n \n ))}\n \n \n \n {emailData.map((r, i) => {\n const { color } = CLIENT_COLORS[r.client] || DEFAULT_COLOR;\n const gap = r.sent - r.shouldHave, ahead = gap >= 0;\n return (\n \n \n \n \n \n \n \n \n );\n })}\n \n

\n {h.label}{h.tip ? \" ℹ️\" : \"\"}\n
\n {editing ? updateEmailClient(i, e.target.value)} style={{ width: 100, padding: \"4px 8px\", border: \"1px solid #cbd5e1\", borderRadius: 6, fontSize: 13 }} /> : r.client}\n	{editing ? updateEmail(i, \"goal\", v)} /> : r.goal.toLocaleString()}	{editing ? updateEmail(i, \"sent\", v)} /> : r.sent.toLocaleString()}	{editing ? updateEmail(i, \"shouldHave\", v)} /> : r.shouldHave.toFixed(0)}	{r.pctToGoal}%	\n {!editing && (\n \n {ahead ? `▲ ${Math.abs(gap).toFixed(0)} ahead` : `▼ ${Math.abs(gap).toFixed(0)} behind`}\n \n )}\n

\n {editing && (\n \n )}\n

\n\n {/* Priority table */}\n

🚦 Campaign Push Priority

\n \n \n \n {[\"Priority\", \"Client\", \"Action Needed\", \"Timeline\"].map(h => (\n \n ))}\n \n \n \n {[\n { priority: \"🔴 #1\", client: \"Zola\", action: \"0 campaigns in queue — source & pitch new placements immediately\", timeline: \"Today\" },\n { priority: \"🟠 #2\", client: \"Sanity\", action: \"✅ Publisher follow-up in progress for 1 approved campaign; source additional placements in parallel\", timeline: \"This week\" },\n { priority: \"🟢 #3\", client: \"Synthesia\", action: \"✅ Publisher follow-up in progress for 3 approved campaigns; monitor for over-delivery once live\", timeline: \"This week\" },\n ].map((r, i) => (\n \n \n \n \n \n \n ))}\n \n

{h}
{r.priority}	{r.client}	{r.action}	{r.timeline}

\n\n

\n Projections based on linear pacing through March 31 · Click \"Edit Data\" to update metrics\n

\n );\n}\n\nconst container = document.getElementById(\"root\") ?? (() => {\n const d = document.createElement(\"div\");\n document.body.style.margin = \"0\";\n document.body.appendChild(d);\n return d;\n})();\n\nReactDOM.createRoot(container).render();","export default async function handler(req: Request): Promise {\n const html = `\n\n\n \n \n MTD Offsite Client Report\n \n \n \n \n\n\n

\n \n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","createdAt",["D",1773458066714],"branchVersion","branchId","7319f7c6-1f02-11f1-acb4-42dde27851f2","id","73191950-1f02-11f1-acb4-42dde27851f2","MTD-Report",["D",1773423080660],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","019ce7be-36e1-743e-a18e-c9ee97dc5188","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019ce7be-36e1-743e-a18e-cf9e07abd8cc","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",10,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","airops_offsite","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNBdGFxa2t4cjBYZXZSUFVKYmxHSkNwN2l2TCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":150,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":53,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":151,"_79":152,"_81":153,"_83":25},"tree",[145],"files",[145],"counts",{"_134":61,"_135":136,"_137":61,"_138":139,"_140":141},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":132,"_27":133},"e86ad166-1f53-11f1-a7a2-42dde27851f2","parentId","latest",["D",1773458066714],7,"label","airops-offsite-mtdreport",[28],"pulls","branches",1,"forks","envVars",{"_142":61,"_144":61},"connections",{"_142":61,"_143":61},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":146,"_13":130,"_33":34,"_35":37,"_24":25,"_131":132,"_147":148,"_27":149},["D",1773458066714],"children",[],[28],["D",1773423080660],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":187,"_188":189,"_190":191,"_192":25,"_193":25,"_194":25,"_195":120,"_196":-5,"_197":-7,"_198":-7,"_199":61,"_200":25,"_201":25,"_202":-5,"_203":25,"_204":25,"_205":25,"_206":-5},"ENV",{"_158":159,"_160":161,"_162":85,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"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"]

Diff · v8