// VELOUR — internal admin dashboard. Six tabs, all reading live data and showing
// nothing rather than something plausible when a request fails:
//
// Members the cohort from api/admin/members — statuses, MRR, churn,
// onboarding answers. Also where a member is added on Premium
// at no charge (a pilot), and where one is deleted.
// Insights what the audience selects at onboarding: goals, tone, first
// ritual, and the write-your-own rituals as real quotes.
// Blog Jennifer's monthly letter. PAID, read on the site. Written
// once here and served to web and mobile from public.posts.
// Newsletter the FREE email — events and news. Composed here, handed to
// Kit as a draft broadcast. Not on the site at all; the two are
// different products and live in different tables.
// Held together the monthly opt-in shared ritual. No leaderboard, no ranking,
// no countdown. Authored here, read by both clients'
// HeldTogetherCard.
// Emails a preview of the transactional receipt, rendered against a
// real member, with the quote rotation it ships with.
//
// Reached at ?view=admin — NOT #admin, which a fragment never sends to a server
// and which Vercel's SSO bounce drops on the way through. No public nav link.
//
// GATED TWICE, SERVER-SIDE, on every request: a valid Supabase session AND an
// email on the ADMIN_EMAILS allowlist, re-checked in api/_auth.js. The sign-in
// screen here is the door; the lock is in the API.
const { Button, Avatar } = window.VelourDesignSystem_380ed4;
/* ---------- no sample members — see the note below ---------- */
// EMPTY ON PURPOSE. Fourteen invented members lived here — names, real-looking
// email addresses, plans, signup dates, cancellation reasons and invoice numbers
// — and useMembers() falls back to this array whenever /api/admin/members has not
// answered. That meant a failed request rendered a populated, plausible business:
// members, MRR, churn and signup bars, all indistinguishable from live data.
//
// Everything downstream already handles a real empty cohort — adStats returns
// zeros and "nobody, this month", the receipt preview says there is nothing to
// preview, SignupBars floors its scale at 1. So the honest fallback is nothing at
// all: an empty dashboard is a true statement about a product with no members.
const ADMIN_MEMBERS = [];
// The quote library — one line rides along on every receipt, rotated by the
// member's invoice count so no one gets the same line twice in a row.
const VELOUR_QUOTES = [
"Small on purpose. The rest can come later.",
"Nothing here is dramatic. That's the point.",
"Day 14 feels like nothing. Day 180 feels like a different life.",
"What you tend to, grows.",
"A ritual is something you return to, not something you owe.",
"The quiet days count too.",
"One kept morning is a whole architecture, begun.",
"Begin again quietly. That's still beginning.",
"The coat worn one more time. The hour kept. It adds up.",
"You don't need a new life. You need the one you have, held.",
"Consistency isn't loud.",
"Soft systems. Sharp life.",
];
// COUNTS invoiceCount, NOT the invoices array. api/admin/members.js returns
// `invoices: []` for everyone — the list lives in Stripe and has never been fetched —
// so counting the array meant every member showed quote 0 forever, including one who
// had been billed. invoiceCount is the real figure and is exactly what the receipt
// pipeline uses (`invoice_count % 12` in _email.js), so the preview now predicts the
// quote the member will actually get instead of a fixed one.
const quoteFor = (member) => VELOUR_QUOTES[(Number(member.invoiceCount) || 0) % VELOUR_QUOTES.length];
const STATUS_META = {
active: { label: "Active", color: "var(--sage)", fill: "var(--sage-fill)", text: "var(--sage-text)" },
trial: { label: "Trial", color: "var(--teal)", fill: "var(--teal-fill)", text: "var(--teal-text)" },
past_due: { label: "Past due", color: "var(--amber)", fill: "var(--amber-fill)", text: "var(--amber-text)" },
paused: { label: "Paused", color: "var(--terracotta)", fill: "var(--terracotta-fill)", text: "var(--terracotta-text)" },
cancelled: { label: "Cancelled", color: "var(--stone)", fill: "var(--surface-sunken)", text: "var(--text-secondary)" },
};
// THESE NUMBERS MUST MATCH THE STRIPE PRICES, and nothing enforces it — the admin
// dashboard is a browser file and the prices live in Stripe, so a price change in
// one place is silent in the other. Annual read $8.50/mo until 2026-08-21, left
// over from a plan that no longer exists: Stripe's annual price is $84/yr and the
// pricing page has always said $7. Every annual member was inflating MRR by $1.50
// a month on the only screen that reports revenue — the last place a wrong number
// should live, because it is the one nobody cross-checks.
//
// LIVE since 3 Sep 2026, on acct_1U5xajR9hCNSFliw (VELOUR LLC):
// monthly price_1UBlkcR9hCNSFliwzFNnafr0 $10/mo,
// annual price_1UBllmR9hCNSFliwdbri5EXz $84/yr = $7/mo.
// The previous pair ended in JYCBzpCjf1, which is the SANDBOX account, not this
// one. Stripe object ids embed their account, so that suffix is how you tell at a
// glance which account a price belongs to — and finding one here again would mean
// production is pointed at the sandbox.
const ANNUAL_MONTHLY = 7, MONTHLY = 10;
const PLAN_LABEL = { free: "Free", annual: `Annual · $${ANNUAL_MONTHLY}/mo`, monthly: `Monthly · $${MONTHLY}` };
// A comped member is on a real Premium plan and pays nothing, so the plan column
// must not print a price beside them. It says what is true instead — and the
// pilot's end date, because an open-ended comp and one that stops in November are
// different facts about the same membership.
const planLabel = (m) => {
if (!m.comped) return PLAN_LABEL[m.plan] || "—";
return m.pilotEndsOn ? `Pilot · no fee, to ${adFmtDate(m.pilotEndsOn)}` : "Pilot · no fee";
};
const FEEL_LABEL = { full: "Full, but scattered", quiet: "Quiet, but drifting", heavy: "Structured, but heavy", varies: "Honestly, it varies" };
const GOAL_META = {
rituals: { name: "Rituals", color: "var(--sage)" }, wellness: { name: "Wellness", color: "var(--teal)" },
wardrobe: { name: "Wardrobe", color: "var(--amber)" }, efficiency: { name: "Efficiency", color: "var(--terracotta)" },
};
// Null-safe: real rows carry fields the sample array always had, so a missing
// date must render as an honest dash. Without the guard, `null + "T00:00:00"`
// parses as "Invalid Date" and prints that to the screen.
const adFmtDate = (iso) => {
if (!iso) return "—";
const d = new Date(iso + "T00:00:00");
return isNaN(d) ? "—" : d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
};
const adMoney = (n) => "$" + n.toFixed(2);
// speaks LOCAL wall-clock with no zone, and the
// column is a timestamptz. These two convert between them without going through
// toISOString().slice(), which yields the UTC day and would shift the moment an
// author picked by up to a day either side of midnight.
function toLocalInput(iso) {
if (!iso) return "";
const d = new Date(iso);
if (isNaN(d)) return "";
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
}
function fromLocalInput(v) {
if (!v) return null;
const d = new Date(v); // parsed as local time, which is what the author typed
return isNaN(d) ? null : d.toISOString();
}
// Real members from api/admin/members. A context rather than prop-drilling: the
// tabs are siblings, and every one of them reads the same list.
//
// The fallback is the EMPTY array above, deliberately. In flight or on failure the
// dashboard shows nothing rather than something coherent — because "coherent" here
// used to mean fourteen fictional members, and a business that looks fine is the
// worst possible way to render a request that did not answer. Read loadError for
// why it is empty; empty alone never means the fetch succeeded.
const MembersContext = React.createContext(null);
function useMembers() {
return React.useContext(MembersContext) || ADMIN_MEMBERS;
}
function adStats(members) {
const active = members.filter((m) => m.status === "active");
const trials = members.filter((m) => m.status === "trial");
// Only paid plans contribute. The ternary this replaces treated every non-annual
// plan as $10/mo, so an active FREE member — which every real signup now is —
// silently added $10 of MRR that nobody is paying.
// Comped members are excluded. They hold plan 'monthly' so that every
// entitlement check grants them Premium through the ordinary path — which means
// that without this test each pilot would add $10 of revenue nobody is paying,
// the third time this one line has been able to invent money. See migration 013.
const mrr = active.reduce((s, m) => s + (m.comped ? 0 : m.plan === "annual" ? ANNUAL_MONTHLY : m.plan === "monthly" ? MONTHLY : 0), 0);
// Current calendar month, not the month the sample data happened to sit in.
const now = new Date();
const thisMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
const cancelledThisMonth = members.filter((m) => m.cancelledAt && m.cancelledAt.startsWith(thisMonth)).length;
return [
{ label: "Members", value: String(members.length), sub: `${active.length} active · ${trials.length} in trial` },
{ label: "MRR", value: adMoney(mrr), sub: "monthly recurring", serif: true },
// `filter: "churned"` makes this tile a control rather than a readout. A count
// with no way to reach the people it counts is the shape of most admin
// dashboards and it is useless: "1 churned" and then a list of seven, every one
// of them reading Active, with the answer only visible by opening each in turn.
// The number IS the question; clicking it should answer it.
{
label: `Churned, ${now.toLocaleDateString("en-US", { month: "long" })}`,
value: String(cancelledThisMonth),
sub: cancelledThisMonth ? "click to see who" : "nobody, this month",
filter: cancelledThisMonth ? "churned" : null,
},
// Genuinely not computable yet: conversion needs trial-to-active history that
// nothing records. A dash beside real zeros is honest; an invented 78% that
// renders identically to the live stats is not.
{ label: "Trial → paid", value: "—", sub: "needs conversion history" },
];
}
// Signups per week, last 8 weeks — same inline-SVG bar language as the product dashboards.
// Eight weekly buckets ending with the current week, counted from real signup
// dates. Derived rather than fixed: hardcoded May–June bars sitting beside live
// member numbers were the one thing on this page that could quietly mislead.
function SignupBars({ members }) {
const weeks = React.useMemo(() => {
const weekStart = new Date();
weekStart.setHours(0, 0, 0, 0);
weekStart.setDate(weekStart.getDate() - weekStart.getDay()); // Sunday of this week
const buckets = [];
for (let i = 7; i >= 0; i--) {
const from = new Date(weekStart);
from.setDate(from.getDate() - i * 7);
const to = new Date(from);
to.setDate(to.getDate() + 7);
buckets.push({ from, to, label: from.toLocaleDateString("en-US", { month: "short", day: "numeric" }), count: 0 });
}
(members || []).forEach((m) => {
if (!m.signedUp) return;
const d = new Date(m.signedUp + "T00:00:00"); // local, matching the app's day keys
if (isNaN(d)) return;
const b = buckets.find((x) => d >= x.from && d < x.to);
if (b) b.count += 1;
});
return buckets;
}, [members]);
const max = Math.max(...weeks.map((w) => w.count), 1);
return (
{weeks.map((w, i) => (
{w.label.split(" ")[1]}
))}
);
}
function StatusChip({ status }) {
// A member whose status the API could not determine renders as "—" rather than
// crashing this component or borrowing another status's colour. Reaching for
// STATUS_META[null] threw a TypeError on s.fill, which is how one bad embed
// would have taken the whole members table down instead of one cell.
const s = STATUS_META[status] || { label: "—", color: "var(--border-strong)", fill: "var(--surface-sunken)", text: "var(--text-tertiary)" };
return (
{s.label}
);
}
/* ---------- member detail panel ---------- */
function MemberDetail({ m, onClose, onMemberChanged, onMemberDeleted }) {
// Hooks before the early return, or the order changes between renders the
// moment the panel opens on a member and then on nobody.
const [ending, setEnding] = React.useState(false);
const [confirmEnd, setConfirmEnd] = React.useState(false);
const [compOpen, setCompOpen] = React.useState(false);
const [compNote, setCompNote] = React.useState("");
const [compEnds, setCompEnds] = React.useState("");
const [granting, setGranting] = React.useState(false);
const [grantError, setGrantError] = React.useState(null);
const [endError, setEndError] = React.useState(null);
const [deleting, setDeleting] = React.useState(false);
const [deleteOpen, setDeleteOpen] = React.useState(false);
const [typedEmail, setTypedEmail] = React.useState("");
const [deleteError, setDeleteError] = React.useState(null);
// Invoices live in Stripe and are read when this panel opens, not carried on
// the members list — see invoicesFor() in api/admin/members.js for why.
// undefined = not asked yet, null = the lookup failed, [] = genuinely none.
const [invoices, setInvoices] = React.useState(undefined);
const [invoiceNote, setInvoiceNote] = React.useState(null);
React.useEffect(() => {
setConfirmEnd(false); setEndError(null);
setDeleteOpen(false); setTypedEmail(""); setDeleteError(null);
setInvoices(undefined); setInvoiceNote(null);
if (!m) return;
let cancelled = false;
window.VelourAdminAuth.fetch(`/api/admin/members?invoices=${encodeURIComponent(m.id)}`)
.then((r) => (r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status))))
.then((body) => {
if (cancelled) return;
setInvoices(body.invoices || []);
setInvoiceNote(body.reason || null);
})
.catch(() => { if (!cancelled) setInvoices(null); });
return () => { cancelled = true; };
}, [m && m.id]);
// Typing the address rather than clicking twice. This is the one control here
// that destroys somebody's data outright, and two clicks in the same spot is
// the shape of an accident — the second one lands wherever the first did.
const removeMember = async () => {
if (deleting) return;
setDeleting(true); setDeleteError(null);
try {
const res = await window.VelourAdminAuth.fetch(
`/api/admin/members?id=${encodeURIComponent(m.id)}&email=${encodeURIComponent(m.email)}`,
{ method: "DELETE" }
);
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || "That did not go through.");
onMemberDeleted(m.id, body);
} catch (err) {
setDeleteError(err.message);
} finally {
setDeleting(false);
}
};
// MOVING AN EXISTING MEMBER ONTO A COMP.
//
// The API has always been able to do this — createAuthUser in api/admin/
// members.js treats an address that already exists as the ordinary case, with
// a comment saying so ("someone already on free agrees to pilot"), and the
// POST upserts the subscription either way. Only the panel could not: it
// offered "End the pilot" to a comped member and, to everyone else, nothing
// but "Delete this member". Granting a comp meant creating a SECOND account at
// a different address, which is how a free member with real data ends up
// stranded beside a comped duplicate.
//
// Same endpoint and same body as "+ Add member", minus the link: somebody who
// is already a member does not need a fresh sign-in link to keep using the
// account they are signed into. The pilot end date is optional here for the
// same reason it is optional there — an open-ended pilot is a real choice.
const grantComp = async () => {
if (granting) return;
setGranting(true); setGrantError(null);
try {
const res = await window.VelourAdminAuth.fetch("/api/admin/members", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
email: m.email,
name: m.name,
note: compNote.trim() || null,
endsOn: compEnds || null,
// They are already a member; a second link would be noise.
sendLink: false,
}),
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || "That did not go through.");
onMemberChanged(body.member);
setCompOpen(false); setCompNote(""); setCompEnds("");
} catch (err) {
setGrantError(err.message);
} finally {
setGranting(false);
}
};
const endPilot = async () => {
if (ending) return;
setEnding(true); setEndError(null);
try {
const res = await window.VelourAdminAuth.fetch(`/api/admin/members?id=${encodeURIComponent(m.id)}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ comped: false }),
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || "That did not go through.");
onMemberChanged(body.member);
} catch (err) {
setEndError(err.message);
} finally {
setEnding(false); setConfirmEnd(false);
}
};
if (!m) return null;
return (
Signed up {adFmtDate(m.signedUp)} · last active {adFmtDate(m.lastActive)}{m.cancelledAt ? ` · cancelled ${adFmtDate(m.cancelledAt)}` : ""}
{/* The pilot, and the way out of it. A comp with no visible end is a
membership someone has to remember about; this is the reminder and the
control in the same place. */}
{m.comped && (
Premium at no charge
{m.pilotEndsOn ? `Runs until ${adFmtDate(m.pilotEndsOn)}, then returns to free on its own.` : "Open-ended — it runs until you end it."}
{m.compNote ? ` ${m.compNote}` : ""}
{endError &&
{endError}
}
)}
{/* The other half of the pilot control. Shown only to a member who is not
already comped — and never to one on a live paid subscription, because
the API refuses that case (cancel it in Stripe first) and offering a
button that always errors is worse than offering none. */}
{!m.comped && !(m.status === "active" && m.plan && m.plan !== "free") && (
Premium at no charge
{!compOpen ? (
<>
Give this member the full paid product at no charge. Nothing is billed, no
card is asked for, and they are not counted in MRR.
Days felt: {FEEL_LABEL[m.onboarding.feel] || m.onboarding.feel || "—"}
First ritual: {m.onboarding.ritual || "—"}
Invoices
{invoices === undefined ? (
Reading Stripe…
) : invoices === null ? (
// A failed lookup is not an empty ledger, and must not read as one.
Stripe would not answer, so this is blank for the wrong reason.
{(Number(m.invoiceCount) || 0) > 0 ? ` The subscription row counts ${m.invoiceCount}.` : ""}
) : invoices.length === 0 ? (
{invoiceNote === "no-stripe-customer"
? "Stripe has never heard of this member — true of every free and every comped account."
: "None yet — nothing has been billed on this account."}
) : invoices.map((inv) => (
{inv.n} · {adFmtDate(inv.date)}{adMoney(inv.amount)}{inv.status}
{/* Stripe is the record; this is a summary of it. The link goes
to the thing itself rather than asking anyone to trust the row. */}
{inv.url && (
open
)}
))}
Next receipt would carry: “{quoteFor(m)}”
{/* Deleting a member. Last in the panel, behind its own disclosure, and it
asks for the address to be typed — this removes the account and every
row belonging to it, and there is nothing behind it. */}
{!deleteOpen ? (
) : (
This removes the account and everything in it — rituals, wellness, closet, stored photos. It cannot be undone.
);
}
/* ---------- emails tab: live merge preview of the invoice template ---------- */
// The three emails VELOUR sends, and who sends each.
//
// Only the receipt was previewable before. The cancellation email GOES OUT FOR
// REAL on Stripe's subscription-deleted webhook and nobody could see it before a
// member did, and the sign-in link is the first email a new member ever receives.
// An email you cannot look at is one you find out about from the person who got it.
//
// Each carries its own merge map, because the placeholder sets differ and the
// merge has to match what actually renders it — api/_email.js for the first two,
// Supabase for the third. Getting this wrong would make the preview a fiction,
// which is worse than no preview.
const ADMIN_EMAIL_TEMPLATES = [
{
key: "invoice_receipt.html",
label: "Receipt",
needsMember: true,
sender: "Resend, on Stripe's invoice.paid webhook",
note: "The quote rotates by the member's invoice count, so no one reads the same line twice in a row.",
merge: (m) => {
// Nothing has ever pulled invoices from Stripe, so there is no real one to
// render. These are named as a preview's stand-in rather than passed off as
// this member's billing history.
// velourDateISO, not toISOString().slice(0,10) — that yields the UTC day,
// which is a day early for anyone behind Greenwich all evening. The rule is
// repo-wide and this preview is not an exception to it.
const today = window.velourDateISO ? window.velourDateISO(new Date()) : null;
const inv = { n: "VLR-0000", amount: m.plan === "annual" ? ANNUAL_MONTHLY * 12 : MONTHLY, date: today };
return {
"{{member_name}}": (m.name || "").split(" ")[0] || "there",
"{{plan_name}}": PLAN_LABEL[m.plan] || "Membership",
"{{amount}}": adMoney(inv.amount),
"{{invoice_number}}": inv.n,
"{{invoice_date}}": adFmtDate(inv.date),
"{{next_renewal}}": "—",
"{{quote}}": quoteFor(m),
};
},
},
{
key: "cancellation.html",
label: "Cancellation",
needsMember: true,
sender: "Resend, on Stripe's customer.subscription.deleted webhook",
note: "Sent when a member cancels. It names the day access actually stops and the refund the terms promise — the part of cancelling that used to be silence.",
// Exactly the four renderCancellation() fills. The template's other {{…}}
// strings live inside HTML comments and never render.
merge: (m) => ({
"{{member_name}}": (m.name || "").split(" ")[0] || "there",
"{{plan_phrase}}": m.plan === "annual" ? "annual membership" : "monthly membership",
"{{ends_on}}": m.cancelledAt ? adFmtDate(m.cancelledAt) : "the end of the period",
"{{refund_line}}": "You keep everything until then, and nothing else will be charged.",
}),
},
{
key: "auth_magic_link.html",
label: "Sign-in link",
// The only one that needs nobody: it fills a URL and a greeting, and it is
// the first email a new member ever gets. Being unable to look at it BECAUSE
// there are no members yet is exactly backwards.
needsMember: false,
sender: "Supabase Auth, not Resend",
note: "The first email a new member ever receives. Supabase renders it and fills {{ .ConfirmationURL }} — this file is the source of truth pasted into the project's auth templates, so a change here only ships once it is pasted there too.",
merge: () => ({ "{{ .ConfirmationURL }}": "https://tryvelour.com/#example-sign-in-link" }),
},
];
const mergeTemplate = (html, map) =>
Object.entries(map).reduce((out, [k, v]) => out.split(k).join(v), html);
function EmailsTab() {
// No initial id: it used to default to the sample member "m02", which does not
// exist once members are real, so find() returned undefined and the next line
// threw. Null means "nothing chosen yet" and the first member stands in.
const [memberId, setMemberId] = React.useState(null);
const [tplKey, setTplKey] = React.useState(ADMIN_EMAIL_TEMPLATES[0].key);
const [tpl, setTpl] = React.useState(null);
const [err, setErr] = React.useState(null);
const chosen = ADMIN_EMAIL_TEMPLATES.find((t) => t.key === tplKey) || ADMIN_EMAIL_TEMPLATES[0];
React.useEffect(() => {
let cancelled = false;
setTpl(null); setErr(null);
// ABSOLUTE, for the same reason the hero and blog images had to be. This
// resolves to /src/emails/… only from the prototype's own depth; the deployed
// admin is served at the site root, where it became /emails/… and 404'd. So
// all three previews showed "Could not load…" in production and rendered
// perfectly on every local check. Third instance of this shape found on
// 4 Sep 2026 — if a path in this repo starts with ../, it is a bet on which
// URL the document was served from, and this one is served from two.
fetch(`/src/emails/${tplKey}`, { cache: "no-store" })
.then((r) => { if (!r.ok) throw new Error(r.status); return r.text(); })
.then((t) => { if (!cancelled) setTpl(t); })
.catch((e) => { if (!cancelled) setErr(String(e)); });
return () => { cancelled = true; };
}, [tplKey]);
const members = useMembers();
const m = members.find((x) => x.id === memberId) || members[0] || null;
// A real cohort can be empty. There is nothing to preview a RECEIPT against, and
// inventing a member to render one for would be the same mistake as the fake
// bars. But this used to return before the template picker rendered, which took
// the sign-in link down with it — the one email that needs no member and the one
// you would most want to check while you still have none.
// The picker comes with it, so the way out of this state is visible from inside
// it — otherwise an empty cohort hides the one email that does not need one.
const picker = (
{ADMIN_EMAIL_TEMPLATES.map((t) => (
))}
);
if (!m && chosen.needsMember) {
return (
Email
{picker}
The {chosen.label.toLowerCase()} email is rendered against a real member, and there are none yet. It fills in with the first signup — the sign-in link above needs nobody and can be read now.
{/* The rotation only exists in the receipt, so it only shows there. */}
{m && tplKey === "invoice_receipt.html" && (
This member's quote
“{quoteFor(m)}”
Quote library · {VELOUR_QUOTES.length}
{VELOUR_QUOTES.map((q) => “{q}”)}
)}
{chosen.key} · merged preview{m ? `to: ${m.email}` : "no member needed"}
{err ? (
Could not load src/emails/{chosen.key} ({err}).
) : merged ? (
) : (
Loading template…
)}
);
}
/* ---------- insights tab: what the audience is telling us at onboarding ---------- */
// The four suggested rituals from the onboarding flow — anything else typed is a
// custom ritual, surfaced separately as real voice-of-member quotes.
const CANONICAL_RITUALS = new Set([
"Morning pages, 10 minutes",
"Stretch before coffee",
"Phone stays outside the bedroom",
"A ten-minute walk, no headphones",
]);
// A MEMBER WHO NEVER ANSWERED IS NOT AN ANSWER.
//
// This counted every member as a respondent, and it only became visible on
// 4 Sep 2026, when api/signup.js finally started writing onboarding_answers —
// until then the table was empty and these panels were uniformly blank, so the
// partial case had never once been rendered. With some members answering and
// some not, three things went wrong at once:
//
// feelCounts[m.onboarding.feel] with feel === null keyed the bucket "null",
// so the panel drew an unlabelled bar and the letter summary read: "null" was
// the most common way people described their days (57%). That sentence sits
// under a "Copy for Jennifer" button, which is the one path in this dashboard
// that ends in something a member reads.
//
// customRituals collected members with no ritual at all, printing “” with a
// real person's name under it.
//
// And every percentage divided by the member count rather than by the number
// who actually answered, which understates every real figure.
//
// Non-answers are now excluded rather than bucketed, and the denominator is the
// people who answered. `scopedCount` stays the member count so the header can
// still say how many of them that was.
function computeInsights(members, windowKey) {
const cutoff = new Date();
cutoff.setDate(cutoff.getDate() - 30);
const scoped = windowKey === "month" ? members.filter((m) => new Date(m.signedUp + "T00:00:00") >= cutoff) : members;
const answered = scoped.filter((m) => {
const o = m.onboarding || {};
return !!o.feel || !!o.ritual || (o.goals || []).length > 0;
});
const total = answered.length || 1;
const goalCounts = {};
Object.keys(GOAL_META).forEach((k) => { goalCounts[k] = 0; });
answered.forEach((m) => (m.onboarding.goals || []).forEach((g) => { if (GOAL_META[g]) goalCounts[g] = (goalCounts[g] || 0) + 1; }));
const feelCounts = {};
Object.keys(FEEL_LABEL).forEach((k) => { feelCounts[k] = 0; });
// Only a value we can name. An unrecognised one is dropped rather than drawn
// as a bar with no label beside it.
answered.forEach((m) => {
const f = m.onboarding.feel;
if (f && FEEL_LABEL[f]) feelCounts[f] = (feelCounts[f] || 0) + 1;
});
const ritualCounts = {};
const customRituals = [];
answered.forEach((m) => {
const r = m.onboarding.ritual;
if (!r) return; // never wrote one — not a quote
if (CANONICAL_RITUALS.has(r)) ritualCounts[r] = (ritualCounts[r] || 0) + 1;
else customRituals.push({ name: m.name, ritual: r });
});
return {
total,
scopedCount: scoped.length,
answeredCount: answered.length,
goalCounts, feelCounts, ritualCounts, customRituals,
};
}
function InsightBar({ label, count, total, color }) {
const pct = Math.round((count / total) * 100);
return (
{label}{pct}% · {count}
);
}
/* ---------- engagement: what members actually did with what we published ---------- */
//
// AGGREGATE ONLY, and that is a decision rather than a limitation of the data.
// Nothing here records who read what. Three sources, all of them things that
// already exist:
//
// Held together members holding the month's ritual, COUNTED from synced
// rituals rather than from a counter — see joinCounts() in
// api/admin/campaigns.js for why that is the better number.
// Letters replies, which are per-member only because writing one is a
// thing a member chose to do.
// Newsletter Kit's own figures for a broadcast.
//
// THE OPEN RATE IS LABELLED, NOT HIDDEN. Apple Mail Privacy Protection loads
// images on a reader's behalf, so an "open" often means a proxy rather than a
// person. VELOUR's first send reported 7 of 7 — a rate that would be remarkable
// if it were real and is simply what image prefetching looks like. Showing it
// unqualified beside honest numbers would let it be read as engagement.
const REACTION_COLORS = ["var(--sage)", "var(--amber)", "var(--teal)"];
function EngagementSection() {
const { posts, loading: postsLoading, loadError: postsError } = usePosts();
const { campaigns, loading: campaignsLoading } = useCampaigns();
const { newsletters, loading: newslettersLoading } = useNewsletters();
const published = posts.filter((p) => p.status === "published");
const totalReplies = published.reduce((n, p) => n + ((p.replies && p.replies.length) || 0), 0);
// Reaction totals across every letter. Ordered by the count, so the shape of
// what people say is the first thing visible rather than the order the chips
// happen to be declared in.
const reactionCounts = {};
for (const p of published) {
for (const r of p.replies || []) {
if (r.reaction) reactionCounts[r.reaction] = (reactionCounts[r.reaction] || 0) + 1;
}
}
const reactions = Object.entries(reactionCounts).sort((a, b) => b[1] - a[1]);
const reactionTotal = reactions.reduce((n, [, c]) => n + c, 0);
const currentMonth = campaigns.find((c) => c.status === "published") || null;
const sentNewsletters = newsletters.filter((n) => n.stats);
const card = { background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: 16, padding: "18px 20px" };
const eyebrow = { fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-tertiary)", marginBottom: 10 };
const quiet = { fontSize: 13, lineHeight: 1.6, color: "var(--text-tertiary)" };
const big = { fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 32, color: "var(--text-primary)", lineHeight: 1, margin: "6px 0 4px" };
return (
Engagement
What members did with what we published
Counts only. Nothing here records who read what — replies name the member because writing one is something they chose to do.
{/* held together */}
Held together
{campaignsLoading ? (
Loading…
) : !currentMonth ? (
No month is published, so there is nothing to join.
Opens, as Kit counts them{sentNewsletters[0].stats.opened ?? "—"}
Treat opens as unreliable: Apple Mail loads images for the reader, which counts as an open whether or not anyone looked. Clicks and unsubscribes are the honest signals.
)}
{/* what the replies said */}
{reactionTotal > 0 && (
What replies said
{reactions.map(([label, count], i) => (
))}
Counted from replies that picked a reaction. A member can write back without choosing one.
)}
);
}
function InsightsTab() {
const [windowKey, setWindowKey] = React.useState("all");
const [copied, setCopied] = React.useState(false);
const data = computeInsights(useMembers(), windowKey);
// Every one of these can be absent with real data, which the sample array never
// showed: goalCounts and feelCounts are pre-seeded with their keys, but
// ritualCounts only gains a key when someone picks a *canonical* ritual — so a
// cohort of write-your-own answers leaves it empty. Reading [0] off that threw
// and took the whole tab down.
const byCount = (o) => Object.entries(o).sort((a, b) => b[1] - a[1])[0] || null;
const topGoal = byCount(data.goalCounts);
const topFeel = byCount(data.feelCounts);
const topRitual = byCount(data.ritualCounts);
const pct = (n) => Math.round((n / data.total) * 100);
// FEEL_LABEL may not know a value either — fall back to what was actually
// recorded rather than printing "undefined" into copy meant for the letter.
// NAMED VALUES ONLY. The old fallback printed the raw key when FEEL_LABEL did
// not know it, which is how the literal string "null" reached a sentence with a
// Copy button under it. computeInsights no longer counts unnamed values at all;
// this is the second guard, because this particular string can end up in a
// letter to members.
const feelText = topFeel && topFeel[1] > 0 && FEEL_LABEL[topFeel[0]] ? FEEL_LABEL[topFeel[0]] : null;
const summary = data.answeredCount === 0
? `No onboarding answers in this ${windowKey === "month" ? "month" : "period"} yet.`
: [
topGoal && topGoal[1] > 0 ? `${pct(topGoal[1])}% of members chose ${GOAL_META[topGoal[0]].name} as a focus this ${windowKey === "month" ? "month" : "period"}.` : null,
feelText ? `“${feelText}” was the most common way people described their days (${pct(topFeel[1])}%).` : null,
topRitual ? `The most-picked first ritual was “${topRitual[0]}.”` : `Every first ritual so far was written by the member rather than picked from the suggestions.`,
].filter(Boolean).join(" ");
const copy = () => {
if (!navigator.clipboard) return;
navigator.clipboard.writeText(summary).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1800); });
};
const card = { background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: 16, padding: "22px 24px" };
const cardHead = { fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-tertiary)", marginBottom: 16 };
return (
{/* Both numbers, because they differ: every percentage below is out of the
people who answered, and the gap between the two is itself worth seeing. */}
{data.answeredCount === data.scopedCount
? `${data.scopedCount} onboarded`
: `${data.answeredCount} of ${data.scopedCount} answered`}
{Object.keys(data.ritualCounts).length === 0 ? (
// This card was simply blank whenever every member wrote their own —
// which, so far, every member has.
{/* What members did with what we published. Below the onboarding answers
because that is the order the questions come in: who joined, then what
they did once they were here. */}
);
}
/* ---------- blog tab: Jennifer's letter, authored once, published to both surfaces ---------- */
const BLOG_STATUS_META = {
draft: { label: "Draft", color: "var(--stone)" },
scheduled: { label: "Scheduled", color: "var(--amber)" },
published: { label: "Published", color: "var(--sage)" },
};
// The five seeded letters that used to live here are gone. They were the whole
// bug: BlogTab held this array in React state and wrote it nowhere, so a letter
// typed into the composer survived exactly as long as the tab did. Letters now
// come from api/admin/posts (public.posts, in migration 001 since the beginning
// and unused until now), and this file no longer carries a copy of anyone's
// writing. The four published letters still ship as the built-in fallback in web
// DashBlog.jsx and mobile BlogScreen.jsx, which is what members read until the
// table has rows of its own.
const adInputStyle = { padding: "10px 12px", borderRadius: 10, border: "1px solid var(--border)", background: "var(--surface-card)", fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-primary)", outline: "none" };
const adGhostBtnStyle = { padding: "8px 14px", borderRadius: 999, border: "1px solid var(--border)", background: "transparent", color: "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: 12.5, cursor: "pointer" };
// Real letters from api/admin/posts. Shared with the Held together tab, whose
// "linked letter" dropdown must offer rows that actually exist — it used to list
// the seed array above, so linking a campaign to a letter stored an id no table
// had ever heard of.
const PostsContext = React.createContext(null);
function usePosts() { return React.useContext(PostsContext) || { posts: [], edits: {}, loadError: null, loading: true }; }
// One dirty editor anywhere in the dashboard, published so the sign-out button
// can ask before throwing the work away. The reported symptom was exactly this:
// a letter written, a sign-out, and nothing left. A beforeunload handler does not
// help — signing out is a React state change, not a navigation, so the browser
// never gets a chance to ask.
//
// `what` is the word the confirmation uses, because two tabs now have editors and
// "this letter has unsaved changes" over an unsaved month would be wrong.
function useUnsavedGuard(dirty, what) {
React.useEffect(() => {
window.velourAdminUnsaved = dirty ? (what || "letter") : null;
const warn = (e) => { if (!dirty) return; e.preventDefault(); e.returnValue = ""; };
window.addEventListener("beforeunload", warn);
return () => {
window.velourAdminUnsaved = null;
window.removeEventListener("beforeunload", warn);
};
}, [dirty, what]);
}
function BlogTab() {
const members = useMembers();
const { posts, loadError, loading, setPosts, edits, setEdits } = usePosts();
const [selectedId, setSelectedId] = React.useState(null);
const [previewMode, setPreviewMode] = React.useState("web");
// Unsaved edits are keyed by id and HELD IN THE SHELL, not here. Two reasons,
// and the second is the one that matters: switching letters in the list must not
// discard what was typed in the one before it — and neither must switching TABS,
// which unmounts this whole component. A half-written letter surviving a click on
// "Held together" and not surviving a click back is the same bug in a smaller
// window.
const [saving, setSaving] = React.useState(false);
const [saveError, setSaveError] = React.useState(null);
const [savedAt, setSavedAt] = React.useState(null);
const [confirmDelete, setConfirmDelete] = React.useState(false);
// Select the newest letter once they arrive, and never fight the author's own
// choice afterwards.
React.useEffect(() => {
if (selectedId === null && posts.length) setSelectedId(posts[0].id);
}, [posts, selectedId]);
const stored = posts.find((p) => p.id === selectedId) || null;
const post = stored ? { ...stored, ...(edits[selectedId] || {}) } : null;
const dirty = !!(selectedId && edits[selectedId]);
useUnsavedGuard(dirty, "letter");
const update = (patch) => {
setSaveError(null); setSavedAt(null); setConfirmDelete(false);
setEdits((e) => ({ ...e, [selectedId]: { ...(e[selectedId] || {}), ...patch } }));
};
const select = (id) => { setSelectedId(id); setSaveError(null); setSavedAt(null); setConfirmDelete(false); };
// Same guards as InsightsTab: with no onboarding answers these are undefined,
// and this text goes into Jennifer's letter — a thrown error or the word
// "undefined" reaching a draft are both worse than declining to insert.
const insertInsight = () => {
const data = computeInsights(members, "all");
const byCount = (o) => Object.entries(o).sort((a, b) => b[1] - a[1])[0] || null;
const topGoal = byCount(data.goalCounts);
const topFeel = byCount(data.feelCounts);
if (!data.scopedCount || !topGoal || !topGoal[1] || !topFeel) return;
const feelText = FEEL_LABEL[topFeel[0]] || topFeel[0];
const line = `This month, ${Math.round((topGoal[1] / data.total) * 100)}% of you told us you wanted ${GOAL_META[topGoal[0]].name.toLowerCase()} to feel different. “${feelText}” was the phrase that came up most.`;
update({ paras: [...post.paras, line] });
};
// A new letter is a local row until it is saved. Its id is not a uuid, which is
// exactly how the server tells an insert from an update.
const newDraft = () => {
const id = "p-draft-" + Date.now().toString(36);
setPosts((ps) => [{ id, month: "", title: "", status: "draft", gated: "paid", publishAt: null, paras: [""], unsaved: true }, ...ps]);
setEdits((e) => ({ ...e, [id]: {} })); // dirty from birth: it exists nowhere else
select(id);
};
const save = async () => {
if (!post || saving) return;
setSaving(true); setSaveError(null);
try {
const res = await window.VelourAdminAuth.fetch("/api/admin/posts", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
id: post.id, month: post.month, title: post.title,
status: post.status, gated: post.gated, publishAt: post.publishAt,
paras: post.paras,
}),
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || "That did not save.");
const saved = body.post;
// The server's copy replaces the local one, id included — an insert comes
// back with the uuid the row actually has, and every later save of this
// letter is an update rather than a second row.
setPosts((ps) => {
const next = ps.map((p) => (p.id === post.id ? saved : p));
// Month drives the order members read these in, so re-sort on it rather
// than leaving a renamed letter sitting where it was typed.
return next.slice().sort((a, b) => String(b.monthStart || "").localeCompare(String(a.monthStart || "")));
});
setEdits((e) => { const next = { ...e }; delete next[post.id]; return next; });
setSelectedId(saved.id);
setSavedAt(Date.now());
} catch (err) {
setSaveError(err.message);
} finally {
setSaving(false);
}
};
const remove = async () => {
if (!post || saving) return;
// Never saved: it only exists in this tab, so dropping it needs no server.
if (post.unsaved) {
setPosts((ps) => ps.filter((p) => p.id !== post.id));
setEdits((e) => { const next = { ...e }; delete next[post.id]; return next; });
setSelectedId(null);
return;
}
setSaving(true); setSaveError(null);
try {
const res = await window.VelourAdminAuth.fetch(`/api/admin/posts?id=${encodeURIComponent(post.id)}`, { method: "DELETE" });
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || "That did not delete.");
setPosts((ps) => ps.filter((p) => p.id !== post.id));
setEdits((e) => { const next = { ...e }; delete next[post.id]; return next; });
setSelectedId(null);
} catch (err) {
setSaveError(err.message);
} finally {
setSaving(false);
setConfirmDelete(false);
}
};
return (
{/* post list */}
{/* Same honesty as the members list: empty because nothing is written yet,
and empty because the request failed, must not look identical. */}
{loadError && (
The letters could not be loaded, so this list is empty for the wrong reason. Saving now could overwrite work that is already there.
)}
{!loadError && !loading && !posts.length && (
No letters yet. The first one starts above.
)}
{posts.map((p) => (
))}
{/* composer */}
{!post ? (
{loading ? "Loading the letters…" : "Choose a letter, or start a new one."}
) : (
update({ month: e.target.value })} placeholder="Month, e.g. July 2026" style={{ ...adInputStyle, flex: 1 }} />
{/* The date only exists for a scheduled letter, and a scheduled letter
cannot be saved without one — api/posts.js publishes on it, so a
missing date means a letter that waits for ever. Shown only when the
status makes it mean something, rather than sitting there greyed. */}
{post.status === "scheduled" && (
update({ publishAt: fromLocalInput(e.target.value) })}
style={{ ...adInputStyle }} />
{post.publishAt && Date.parse(post.publishAt) <= Date.now()
? "That is in the past, so it appears as soon as it is saved."
: "Members see it from this moment. Nothing needs to run."}