// ============================================================ // Flex Line Dashboard — the BD-pitch "money screen" // Includes: summary, active draws, payment calendar (m/w/list), // transaction history, Cash Draw + PayNow full-screen takeovers. // // Terminology (per Smeet): // - "Spending Limit" (not "Total Flex Line") // - "Spending Availability" (not "Available to draw") // - "PayNow Balance" (not "Balance owed") // - "Weekly payment" (not "Daily remittance") // - "PayNow" (one word) is the early-payment feature // - Multiple draws supported; each inherits the parent Flex Line terms // ============================================================ const TODAY = new Date(2026, 4, 14); // May 14, 2026 // --- Mock state: one draw on a single Flex Line --------------- // (Initial draw amount + factor are overridden at render time when the user // picks an offer on the Decision page — see FlexDashboard below.) const DRAWS = [ { id: 1, date: new Date(2026, 1, 20), amount: 25000, factorRate: 1.30, label: "Initial draw" }]; const TOTAL_PAYBACK = DRAWS.reduce((s, d) => s + d.amount * d.factorRate, 0); const TOTAL_DRAWN = DRAWS.reduce((s, d) => s + d.amount, 0); const DASH_STATE = { spendingLimit: 75000, totalDrawn: TOTAL_DRAWN, spendingAvailability: 75000 - TOTAL_DRAWN, totalPayback: TOTAL_PAYBACK, paidSoFar: 5800, payNowBalance: TOTAL_PAYBACK - 5800, weeklyPayment: 650, factorRate: 1.30, earlyPayoffDiscountRate: 0.07, // applied to PayNow Balance fundingAccount: "Chase ····4391" }; // First payment landed the Friday after the first draw const FIRST_PAYMENT_DATE = new Date(2026, 1, 27); // Fri Feb 27 2026 // -------------------------------------------------------------- // Build a weekly-payment + single-draw transaction history. // Newest first. Parameters are pulled from the selected offer at render time. // -------------------------------------------------------------- function buildTransactions({ drawAmount, factor, weeklyPayment, drawDate }) { const events = []; events.push({ date: drawDate, type: "Draw", desc: "Draw · " + DRAWS[0].label, amount: drawAmount, sign: "+", icon: "arrow-down-left" }); let cursor = new Date(FIRST_PAYMENT_DATE); let payNowInserted = false; while (cursor < TODAY) { events.push({ date: new Date(cursor), type: "Payment", desc: "Weekly payment", amount: Math.round(weeklyPayment), sign: "−", icon: "arrow-up-right" }); // Insert a PayNow event at one point if (cursor.getMonth() === 2 && cursor.getDate() < 14 && !payNowInserted) { events.push({ date: new Date(cursor), type: "PayNow", desc: "PayNow · partial payment", amount: 1500, sign: "−", icon: "fast-forward" }); payNowInserted = true; } cursor.setDate(cursor.getDate() + 7); } // Compute running balance going forward let running = 0; for (let i = 0; i < events.length; i++) { if (events[i].type === "Draw") running += events[i].amount * factor;else running -= events[i].amount; events[i].balance = Math.max(0, Math.round(running)); } return events.reverse(); } // ===================================================================== // Payment Calendar — weekly cadence // ===================================================================== const PaymentCalendar = ({ weeklyPayment = DASH_STATE.weeklyPayment }) => { const [view, setView] = React.useState("month"); const [month, setMonth] = React.useState(new Date(2026, 4, 1)); const [popover, setPopover] = React.useState(null); // Map of payment dates → info. Weekly payments fall on Fridays. const paymentDates = React.useMemo(() => { const map = new Map(); // Past payments let c = new Date(FIRST_PAYMENT_DATE); while (c < TODAY) { map.set(c.toDateString(), { amount: Math.round(weeklyPayment), status: "paid" }); c.setDate(c.getDate() + 7); } // Today's marker (find the closest Friday to TODAY) const todayFriday = new Date(TODAY); while (todayFriday.getDay() !== 5) todayFriday.setDate(todayFriday.getDate() + 1); map.set(todayFriday.toDateString(), { amount: Math.round(weeklyPayment), status: "upcoming" }); // Future upcoming + projected let f = new Date(todayFriday); f.setDate(f.getDate() + 7); for (let i = 0; i < 26; i++) { map.set(f.toDateString(), { amount: Math.round(weeklyPayment), status: i < 10 ? "upcoming" : "projected" }); f.setDate(f.getDate() + 7); } return map; }, [weeklyPayment]); const navMonth = (delta) => { const n = new Date(month); n.setMonth(n.getMonth() + delta); setMonth(n); }; const renderMonth = () => { const start = new Date(month.getFullYear(), month.getMonth(), 1); const startDow = start.getDay(); const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate(); const cells = []; for (let i = 0; i < startDow; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(month.getFullYear(), month.getMonth(), d)); while (cells.length % 7 !== 0) cells.push(null); return (
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((d) =>
{d}
)}
{cells.map((c, i) => { if (!c) return
; const info = paymentDates.get(c.toDateString()); const isToday = c.toDateString() === TODAY.toDateString(); const isWeekend = c.getDay() === 0 || c.getDay() === 6; let bg = "var(--tt-5)"; let color = "var(--tt-80)"; let border = "1px solid transparent"; if (info?.status === "paid") {bg = "var(--fp-10)";color = "#075c3e";} else if (info?.status === "upcoming") {bg = "#fff";color = "var(--trust-tech)";border = "1px solid var(--gg-20)";} else if (info?.status === "projected") {bg = "transparent";color = "var(--tt-40)";border = "1px dashed var(--gg-20)";} if (isToday && !info) {bg = "var(--growth-galaxy)";color = "#fff";} if (isWeekend && !info && !isToday) {color = "var(--tt-40)";bg = "transparent";} return ( ); })}
{popover &&
{popover.info.status === "paid" ? "Paid" : popover.info.status === "today" ? "Today" : popover.info.status === "upcoming" ? "Upcoming payment" : "Projected payment"} {popover.info.amount && ` · $${popover.info.amount}`}
{popover.date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })}
}
); }; const renderWeek = () => { const start = new Date(TODAY); start.setDate(start.getDate() - start.getDay()); const days = []; for (let i = 0; i < 7; i++) { const d = new Date(start); d.setDate(start.getDate() + i); days.push(d); } return (
{days.map((c, i) => { const info = paymentDates.get(c.toDateString()); const isToday = c.toDateString() === TODAY.toDateString(); return (
{c.toLocaleDateString("en-US", { weekday: "short" })}
{c.getDate()}
{info ?
{info.status === "paid" ? "Paid" : info.status === "upcoming" ? "Upcoming" : "Projected"}
${info.amount}
: isToday ?
Today
:
—
}
); })}
); }; const renderList = () => { const entries = []; paymentDates.forEach((info, key) => entries.push({ date: new Date(key), info })); entries.sort((a, b) => b.date - a.date); const recent = entries.slice(0, 14); return (
{recent.map((e, i) =>
{e.date.toLocaleDateString("en-US", { month: "short", day: "numeric" })} {e.date.toLocaleDateString("en-US", { weekday: "long" })} · Weekly payment {e.info.status} ${e.info.amount}
)}
); }; return (
Payment calendar
Weekly payment · ${Math.round(weeklyPayment)} every Friday
{view === "month" &&
{month.toLocaleDateString("en-US", { month: "long", year: "numeric" })}
}
{[{ id: "month", l: "Month" }, { id: "week", l: "Week" }, { id: "list", l: "List" }].map((v) => )}
{view === "month" && renderMonth()} {view === "week" && renderWeek()} {view === "list" && renderList()}
Paid Today Upcoming Projected
); }; // ===================================================================== // Transaction History // ===================================================================== const TransactionHistory = ({ drawAmount = DRAWS[0].amount, factor = DASH_STATE.factorRate, weeklyPayment = DASH_STATE.weeklyPayment, drawDate = DRAWS[0].date }) => { const [filter, setFilter] = React.useState("All"); const txs = React.useMemo( () => buildTransactions({ drawAmount, factor, weeklyPayment, drawDate }), [drawAmount, factor, weeklyPayment, drawDate] ); const filtered = txs.filter((t) => filter === "All" ? true : filter === "Draws" ? t.type === "Draw" : filter === "Payments" ? t.type === "Payment" : filter === "PayNow" ? t.type === "PayNow" : true ); const limited = filtered.slice(0, 12); return (
Transaction history
Recent activity
{["All", "Draws", "Payments", "PayNow"].map((f) => )}
DateDescriptionType Amount Balance
{limited.map((t, i) => { const isDraw = t.type === "Draw"; const isPayNow = t.type === "PayNow"; return (
{t.date.toLocaleDateString("en-US", { month: "short", day: "numeric" })}
{t.desc}
{t.type} {t.sign}${t.amount.toLocaleString()} ${t.balance.toLocaleString()}
); })}
View all {txs.length} transactions →
); }; // ===================================================================== // CASH DRAW takeover (3 steps) // ===================================================================== const CashDrawTakeover = ({ tweaks, onClose, onConfirm }) => { const [step, setStep] = React.useState(1); const available = DASH_STATE.spendingAvailability; const [amount, setAmount] = React.useState(15000); const [signed, setSigned] = React.useState(false); const newPayback = DASH_STATE.totalPayback + amount * tweaks.factorRate; const newPayNowBalance = DASH_STATE.payNowBalance + amount * tweaks.factorRate; const newWeekly = Math.round(newPayNowBalance / 42); // soft estimate return (
{step === 1 && <>
Take a cash draw

How much do you want to pull?

{fmtUSD(amount)}
{fmtUSD(available)} available on your line · This draw inherits your Flex Line terms ({tweaks.factorRate.toFixed(2)}× factor rate)
{[5000, 10000, 25000, available].map((v) => )}
What changes
PayNow Balance
{fmtUSD(DASH_STATE.payNowBalance)} →
{fmtUSD(newPayNowBalance)}
Weekly payment
${DASH_STATE.weeklyPayment} →
~${newWeekly}
Active draws
{DRAWS.length} →
{DRAWS.length + 1}
} {step === 2 && <>
Confirm cash draw

Review and sign

Each draw on your Flex Line inherits the parent agreement — same factor rate, same payback structure.

{[ ["You receive", fmtUSD(amount), "var(--growth-galaxy)"], ["Added to payback", fmtUSD(amount * tweaks.factorRate), null], ["Factor rate", tweaks.factorRate.toFixed(2), null], ["New PayNow Balance", fmtUSD(newPayNowBalance), null], ["New weekly payment", "~$" + newWeekly, null], ["Funded to", DASH_STATE.fundingAccount, null]]. map(([k, v, c]) =>
{k} {v}
)}
setSigned(e.target.checked)}> I, Sarah Chen, authorize this cash draw and confirm it's governed by my existing Flex Line agreement.
Revenued's service provides for the purchase of future receivables and is not a loan. Each draw inherits the parent agreement's terms.
} {step === 3 &&
Draw confirmed

{fmtUSD(amount)} is on the way.

Funds typically arrive in your {DASH_STATE.fundingAccount} account within 24 hours.

}
); }; // ===================================================================== // PAYNOW takeover — user enters any amount // ===================================================================== const PayNowTakeover = ({ tweaks, onClose, onConfirm }) => { const [step, setStep] = React.useState(1); const [signed, setSigned] = React.useState(false); const [amount, setAmount] = React.useState(5000); // user-chosen, defaults to a partial payment const balance = DASH_STATE.payNowBalance; const isFullPayoff = amount >= balance; // Early-payoff discount only applies on a full payoff const discount = isFullPayoff ? Math.round(balance * DASH_STATE.earlyPayoffDiscountRate) : 0; const willDebit = Math.max(0, amount - discount); const remainingAfter = Math.max(0, balance - amount); return (
{step === 1 && <> PayNow

Make an extra payment toward your balance

Pay any amount, anytime. Pay it all off and we'll knock {Math.round(DASH_STATE.earlyPayoffDiscountRate * 100)}% off your remaining balance.

{/* Amount input card */}
How much do you want to pay?
{fmtUSD(amount)}
Your PayNow Balance is {fmtUSD(balance)}. Pay any amount up to the full balance.
{[2500, 5000, 10000, balance].map((v) => )}
{isFullPayoff &&
Paying it all off — we'll apply a {Math.round(DASH_STATE.earlyPayoffDiscountRate * 100)}% discount ({fmtUSD(discount)}) to your balance.
}
{/* Side card */}
{isFullPayoff ? "You'll save" : "Payment summary"}
{isFullPayoff ? fmtUSD(discount) : fmtUSD(willDebit)}
{isFullPayoff ? "off your PayNow Balance — debits today." : "debits today. Your weekly payment continues until the balance is delivered."}
{[ ["PayNow Balance today", fmtUSD(balance)], ["You pay", fmtUSD(amount)], isFullPayoff ? ["Early payoff discount", "−" + fmtUSD(discount)] : null, ["Debits from your account", fmtUSD(willDebit)], ["Balance after", fmtUSD(remainingAfter)]]. filter(Boolean).map(([k, v], i, arr) =>
{k} {v}
)}
Revenued's service provides for the purchase of future receivables and is not a loan. The PayNow discount applies only on a full payoff of the outstanding balance.
} {step === 2 && <> Confirm PayNow

Authorize {fmtUSD(willDebit)} payment

{isFullPayoff ? "After this, your balance is zero and your full Spending Limit is back." : "Your weekly payment continues on Fridays until the rest of the balance is delivered."}

{[ ["You pay", fmtUSD(amount), null], isFullPayoff ? ["You save", fmtUSD(discount), "var(--growth-galaxy)"] : null, ["Debits from", DASH_STATE.fundingAccount, null], ["Debit date", "Tomorrow", null], ["Balance after", fmtUSD(remainingAfter), "var(--funding-pool)"]]. filter(Boolean).map(([k, v, c]) =>
{k} {v}
)}
setSigned(e.target.checked)}> I, Sarah Chen, authorize Revenued to debit {fmtUSD(willDebit)} from {DASH_STATE.fundingAccount} toward my PayNow Balance.
} {step === 3 &&
Payment scheduled

{isFullPayoff ? `You just saved ${fmtUSD(discount)}.` : `${fmtUSD(willDebit)} payment scheduled.`}

{fmtUSD(willDebit)} debits from {DASH_STATE.fundingAccount} tomorrow.{" "} {isFullPayoff ? `Once it clears, your ${fmtUSD(DASH_STATE.spendingLimit)} Spending Limit is fully restored.` : `Remaining balance: ${fmtUSD(remainingAfter)}.`}

}
); }; // ===================================================================== // FLEX LINE DASHBOARD // ===================================================================== // ===================================================================== // FLEX LINE DASHBOARD // ===================================================================== const UtilizationDonut = ({ drawn, limit }) => { const targetPct = limit > 0 ? Math.min(1, drawn / limit) : 0; const r = 62; const c = 2 * Math.PI * r; // Animated percentage — eases in on mount and whenever the target changes. const [animPct, setAnimPct] = React.useState(0); React.useEffect(() => { const start = performance.now(); const startVal = animPct; const duration = 900; let raf; const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setAnimPct(startVal + (targetPct - startVal) * eased); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); // eslint-disable-next-line react-hooks/exhaustive-deps }, [targetPct]); return (
Used
{Math.round(animPct * 100)}%
${Math.round(drawn / 1000)}K of ${Math.round(limit / 1000)}K
); }; // Last 12 months ending in May 2026; small dip in Nov from a late payment. const SCORE_HISTORY = [ { month: "Jun", score: 690 }, { month: "Jul", score: 694 }, { month: "Aug", score: 698 }, { month: "Sep", score: 703 }, { month: "Oct", score: 709 }, { month: "Nov", score: 712 }, { month: "Dec", score: 705 }, { month: "Jan", score: 712 }, { month: "Feb", score: 718 }, { month: "Mar", score: 722 }, { month: "Apr", score: 725 }, { month: "May", score: 728 }]; const REPORTING_HISTORY = [ { month: "Jun", status: "ontime" }, { month: "Jul", status: "ontime" }, { month: "Aug", status: "ontime" }, { month: "Sep", status: "ontime" }, { month: "Oct", status: "ontime" }, { month: "Nov", status: "late" }, { month: "Dec", status: "ontime" }, { month: "Jan", status: "ontime" }, { month: "Feb", status: "ontime" }, { month: "Mar", status: "ontime" }, { month: "Apr", status: "ontime" }, { month: "May", status: "ontime" }]; const ScoreSparkline = ({ data, height = 80 }) => { const scores = data.map((d) => d.score); const minRaw = Math.min(...scores); const maxRaw = Math.max(...scores); const min = minRaw - 8; const max = maxRaw + 8; const W = 320; // natural pixel coords — SVG scales uniformly to container const H = height; const PX = 6; const PY = 6; const chartH = H - 12; const points = data.map((d, i) => { const x = PX + i / (data.length - 1) * (W - 2 * PX); const y = PY + (1 - (d.score - min) / (max - min)) * (chartH - PY); return { x, y, ...d }; }); const pathD = points.map((p, i) => i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`).join(" "); const areaD = `${pathD} L ${points[points.length - 1].x} ${chartH} L ${points[0].x} ${chartH} Z`; const last = points[points.length - 1]; const lateIdx = data.findIndex((d, i) => i > 0 && d.score < data[i - 1].score); const late = lateIdx >= 0 ? points[lateIdx] : null; const gradId = "score-spark-grad"; return ( {late && } ); }; const ReportingGrid = ({ data }) => { const colors = { ontime: "var(--funding-pool)", late: "#e0a85f", bounced: "#e07a5f" }; const labels = { ontime: "On-time payment", late: "Late payment", bounced: "Bounced/unpaid" }; return (
{data.map((m, i) =>
{m.month}
)}
); }; const SBFEDashboardCard = () => { const current = SCORE_HISTORY[SCORE_HISTORY.length - 1].score; const yearAgo = SCORE_HISTORY[0].score; const delta = current - yearAgo; const tier = current >= 740 ? { label: "Excellent", color: "#0040BA" } : current >= 670 ? { label: "Good", color: "var(--funding-pool)" } : current >= 580 ? { label: "Fair", color: "#e0a85f" } : { label: "Poor", color: "#e07a5f" }; const ontimeCount = REPORTING_HISTORY.filter((r) => r.status === "ontime").length; return (
{/* Header row */}
Business credit · SBFE
Your SBFE Credit Score
Reported by your Revenued Flex Line · last pulled {TODAY.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
{/* Body grid */}
{/* Score block */}
Current
{current}
{tier.label.toUpperCase()} = 0 ? "trending-up" : "trending-down"} size={13} color="#047a62" /> {delta >= 0 ? "+" : ""}{delta} vs 12 mo
Range 300 – 850
{/* Sparkline trend */}
12-month trend
{yearAgo} → {current}
{SCORE_HISTORY[0].month} {SCORE_HISTORY[SCORE_HISTORY.length - 1].month}
{/* Monthly reporting grid */}
Reported by your Flex Line
{ontimeCount}/12 on time
On time Late Bounced
); }; const FlexDashboard = ({ tweaks, selectedOffer, onDraw, onPayNow }) => { const { partnerName } = tweaks; // If the user picked an initial draw amount on the Decision page, override // the single draw's amount + factor so the dashboard reflects it everywhere. const draws = React.useMemo(() => { if (!selectedOffer || !selectedOffer.initialDraw) return DRAWS; return [{ ...DRAWS[0], amount: selectedOffer.initialDraw, factorRate: selectedOffer.factor }]; }, [selectedOffer]); const totalDrawnLocal = draws.reduce((sum, d) => sum + d.amount, 0); // Derive dashboard state from the offer the user picked on the Decision page, // falling back to defaults when they jumped straight to the dashboard. const s = React.useMemo(() => { if (!selectedOffer) return DASH_STATE; const limit = selectedOffer.limit; const factor = selectedOffer.factor; const days = selectedOffer.days || 260; const totalPayback = draws.reduce((sum, d) => sum + d.amount * factor, 0); const weeks = Math.max(1, Math.round(days / 7)); // Round to nearest $50 like in computeTerms. const weeklyPayment = Math.max(50, Math.round(totalPayback / weeks / 50) * 50); // Roughly scale paid-so-far + payNowBalance proportionally to keep the // dashboard internally consistent without recomputing the whole calendar. const paidRatio = DASH_STATE.paidSoFar / DASH_STATE.totalPayback; const paidSoFar = Math.round(totalPayback * paidRatio); const payNowBalance = Math.max(0, totalPayback - paidSoFar); return { ...DASH_STATE, spendingLimit: limit, totalDrawn: totalDrawnLocal, spendingAvailability: Math.max(0, limit - totalDrawnLocal), factorRate: factor, totalPayback, weeklyPayment, paidSoFar, payNowBalance }; }, [selectedOffer, draws, totalDrawnLocal]); const progressPct = Math.round(s.paidSoFar / s.totalPayback * 100); return (
{/* HERO summary */}
Spending Availability
{fmtUSD(s.spendingAvailability)}
{/* Utilization microbar */}
0 ? Math.min(100, s.totalDrawn / s.spendingLimit * 100) : 0) + "%", background: "var(--funding-pool)", borderRadius: 999, transition: "width 0.3s ease-out" }} />
{fmtUSD(s.totalDrawn)} drawn {fmtUSD(s.spendingAvailability)} available
Pull what you need, when you need it. Each draw inherits your Flex Line terms.
{[ { l: "Spending Limit", v: fmtUSD(s.spendingLimit) }, { l: "PayNow Balance", v: fmtUSD(s.payNowBalance) }, { l: "Factor rate", v: s.factorRate.toFixed(2) }, { l: "Weekly payment", v: "$" + s.weeklyPayment }]. map((k, i) =>
{k.l}
{k.v}
)}
{/* Active draws + PayNow callout */}
Active draws
{draws.length} {draws.length === 1 ? "draw" : "draws"} · {fmtUSD(s.totalDrawn)} total
Factor rate {s.factorRate.toFixed(2)} · weekly payment from your business deposits.
Active
{/* List of individual draws */}
{draws.map((d, i) =>
Draw {i + 1} · {d.label}
{d.date.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })} · {d.factorRate.toFixed(2)}× factor
{fmtUSD(d.amount)}
{fmtUSD(d.amount * d.factorRate)} payback
In delivery
)}
{/* Combined progress */}
Combined progress {progressPct}% delivered
{fmtUSD(s.paidSoFar)} delivered {fmtUSD(s.payNowBalance)} remaining
{/* PayNow callout */}
PayNow
Pay extra and lower your balance
Send any amount toward your balance. Pay it all off and we'll discount what you owe.
{/* SBFE Business Credit Score */} {/* Payment calendar */}
{/* Transaction history */}
Revenued's service provides for the purchase of future receivables and is not a loan. Weekly payment amounts may be reconciled monthly based on actual receivables volume.
); }; Object.assign(window, { FlexDashboard, CashDrawTakeover, PayNowTakeover, DASH_STATE, DRAWS });