);
}
// ---- Mock data ------------------------------------------------------------
const LAST_WEEK = {
labels: ['4 Mon', '5 Tue', '6 Wed', '7 Thu', '8 Fri'],
sub: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
trk: [390, 420, 480, 355, 510],
yours: [400, 410, 500, 370, 490],
actual: [385, 432, 471, 338, 524],
};
// ---- Forecast page: the rolling 3-week window -----------------------------
// The submit form always shows the current week plus the next two, computed
// from today. Merchants submit whenever they like; if they don't, the Trunkrs
// forecast is used as-is. The day before today, today, and tomorrow are locked
// — those volumes are already committed to trucks and drivers.
const WD_SHORT = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const TRK_SHAPE = [205, 228, 215, 240, 295]; // Trunkrs baseline, Mon–Fri
// Absolute Trunkrs baseline override for a specific week offset (skips scaling).
// Week +1 (next week) is an unusually low-volume week — good for exercising the
// axis floor. It's inside the editable 3-week window, so it shows in the review
// form too. Keyed by week offset, shared by buildForecastWeeks + buildSchedule.
const TRK_OVERRIDE = { '1': [18, 15, 20, 16, 22] };
const LOCK_REASON = "no more changes can be made to this day's forecast";
function addDays(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; }
function startOfIsoWeek(d) {
const x = new Date(d.getFullYear(), d.getMonth(), d.getDate());
x.setDate(x.getDate() - ((x.getDay() + 6) % 7)); // back to Monday
return x;
}
function isoWeekNumber(d) {
const x = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
x.setUTCDate(x.getUTCDate() + 4 - (x.getUTCDay() || 7)); // nearest Thursday
const yearStart = new Date(Date.UTC(x.getUTCFullYear(), 0, 1));
return Math.ceil((((x - yearStart) / 86400000) + 1) / 7);
}
function isoDate(d) { const p = n => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`; }
function weekDateRange(mon) {
const fri = addDays(mon, 4);
return mon.getMonth() === fri.getMonth()
? `${mon.getDate()} – ${fri.getDate()} ${MONTHS[fri.getMonth()]}`
: `${mon.getDate()} ${MONTHS[mon.getMonth()]} – ${fri.getDate()} ${MONTHS[fri.getMonth()]}`;
}
function buildForecastWeeks() {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const firstEditable = addDays(today, 2); // day-after-tomorrow onward is editable
const week0Mon = startOfIsoWeek(today);
return [0, 1, 2].map(w => {
const monday = addDays(week0Mon, w * 7);
const days = WD_SHORT.map((_, j) => addDays(monday, j));
const fri = days[4];
const dates = monday.getMonth() === fri.getMonth()
? `Mon ${monday.getDate()} – Fri ${fri.getDate()} ${MONTHS[fri.getMonth()]}`
: `Mon ${monday.getDate()} ${MONTHS[monday.getMonth()]} – Fri ${fri.getDate()} ${MONTHS[fri.getMonth()]}`;
return {
key: `fw${w}`,
label: `Week ${isoWeekNumber(monday)}`,
dates,
data: {
labels: days.map((dt, j) => `${dt.getDate()} ${WD_SHORT[j]}`),
sub: [...WD_SHORT],
iso: days.map(isoDate),
trk: TRK_OVERRIDE[String(w)] || TRK_SHAPE.map(v => Math.round(v * (1 + w * 0.04))),
yours: [null, null, null, null, null],
closed: [],
locked: days.map((dt, i) => (dt.getTime() < firstEditable.getTime() ? i : -1)).filter(i => i >= 0),
lockReason: LOCK_REASON,
},
};
});
}
const FORECAST_WEEKS = buildForecastWeeks();
// ---- Dashboard schedule: rolling history + upcoming, anchored to today ------
// Mirrors buildForecastWeeks' dynamic dating so the dashboard trend never shows
// stale week numbers. Weeks run from 5 weeks ago (graded, with actuals) through
// the current week to two upcoming weeks — 5 behind + this week + 2 ahead. The
// two ahead are editable in quick-edit mode.
// editPolicy: 'past' = no edit; 'within7' = current week (edit + warn);
// 'open' = upcoming submitted (edit freely); 'none' = pending.
// "yours" is sparse — a value only where the merchant overrode Trunkrs (null
// otherwise) — a realistic scatter of isolated edits and short runs, which is
// what drives the tether/run rendering in the charts.
function buildSchedule() {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const week0Mon = startOfIsoWeek(today);
// Same near-term lock as the review form (buildForecastWeeks): the day before
// today, today, and tomorrow are already committed to trucks/drivers — the
// first editable day is the day after tomorrow. Quick edit must honour this.
const firstEditable = addDays(today, 2);
// Per-week overrides vs Trunkrs, keyed by week offset: { i: dayIndex, d: delta }.
// Only PAST weeks carry edits (the merchant's submitted history). The current
// and upcoming weeks start blank here so they match the review page, where
// "your forecast" is null until the merchant actually changes a day.
const EDITS = {
'-5': [{ i: 2, d: 22 }], // single isolated Wed
'-4': [{ i: 0, d: -18 }, { i: 1, d: -12 }], // Mon–Tue run
'-3': [{ i: 0, d: 25 }, { i: 3, d: -25 }, { i: 4, d: -15 }], // isolated Mon + Thu–Fri run
'-2': [{ i: 1, d: 30 }], // single isolated Tue
'-1': [{ i: 2, d: 41 }, { i: 4, d: -55 }], // two isolated (Wed, Fri)
};
// Deterministic actual-vs-forecast gap per week. Small values stay within the
// day tolerance (on target); the larger ones deliberately blow it so the grade
// varies and the weekly overview has real misses to explain. Grades below are
// on-target days × 2 (see weekGrade): -5→8, -4→10, -3→6, -2→8, -1→4.
const ACT_WOBBLE = {
'-5': [ 10, -7, 88, -9, 6], // Wed miss → 4/5 → 8
'-4': [ 8, -6, 11, -8, 5], // all on target → 5/5 → 10
'-3': [-90, 8, 12, -7, 92], // Mon + Fri miss → 3/5 → 6
'-2': [ 7, -6, 10, 96, 5], // Thu miss → 4/5 → 8
'-1': [ 9, -88, 90, -8, -92], // Tue + Wed + Fri miss → 2/5 → 4
};
const DEFAULT_WOBBLE = [9, -6, 11, -8, 5];
const specs = [
{ off: -5, status: 'submitted', policy: 'past' },
{ off: -4, status: 'submitted', policy: 'past' },
{ off: -3, status: 'submitted', policy: 'past' },
{ off: -2, status: 'submitted', policy: 'past' },
{ off: -1, status: 'submitted', policy: 'past' },
{ off: 0, status: 'submitted', policy: 'within7' },
{ off: 1, status: 'submitted', policy: 'open' },
{ off: 2, status: 'submitted', policy: 'open' },
];
return specs.map(({ off, status, policy }) => {
const monday = addDays(week0Mon, off * 7);
const isPending = status === 'pending';
const trk = TRK_OVERRIDE[String(off)] || TRK_SHAPE.map(v => Math.round(v * (1 + off * 0.03)));
const edits = EDITS[String(off)] || [];
const days = WD_SHORT.map((wd, j) => {
const dt = addDays(monday, j);
const ov = edits.find(e => e.i === j);
const yours = (isPending || !ov) ? null : trk[j] + ov.d;
const base = yours == null ? trk[j] : yours;
return {
date: `${wd} ${dt.getDate()} ${MONTHS[dt.getMonth()]}`,
iso: isoDate(dt),
yours,
trk: trk[j],
// Any day that has already elapsed carries an actual — so the current
// week's past days show actuals in the schedule modal (and trend) just
// like the fully-past weeks, and today/future stay null until they land.
actual: dt.getTime() < today.getTime() ? base + (ACT_WOBBLE[String(off)] || DEFAULT_WOBBLE)[j] : null,
locked: dt.getTime() < firstEditable.getTime(),
};
});
const week = {
week: isoWeekNumber(monday),
start: isoDate(monday),
label: `Week ${isoWeekNumber(monday)}`,
dates: weekDateRange(monday),
status,
volume: isPending ? null : days.reduce((a, d) => a + (d.yours == null ? d.trk : d.yours), 0),
grade: weekGrade(days),
editPolicy: policy,
days,
};
if (isPending) week.due = `${WD_SHORT[0]} ${monday.getDate()} ${MONTHS[monday.getMonth()]}`;
return week;
});
}
const SCHEDULE = buildSchedule();
// ---- Holidays (dev-simulated) ---------------------------------------------
// Closed days are real in production — Trunkrs doesn't deliver on Dutch public
// holidays — but the rolling 8-week demo window only rarely contains one, so
// there's usually nothing to look at. The dev panel drops a closed day on any
// date; from there down, every surface reads it exactly as it would a real one.
const HOLIDAY_KEY = 'trk_fo_dev_holiday';
const HOLIDAY_DATE_KEY = 'trk_fo_dev_holiday_date';
// Default to Thursday of next week: inside the trend window, and inside the
// review form's editable range, so both surfaces show it the moment you toggle.
const DEFAULT_HOLIDAY_DATE = isoDate(addDays(startOfIsoWeek(new Date()), 10));
// Easter Sunday (anonymous Gregorian computus) — anchors the moving NL holidays.
function easterSunday(year) {
const a = year % 19, b = Math.floor(year / 100), c = year % 100;
const d = Math.floor(b / 4), e = b % 4, f = Math.floor((b + 8) / 25);
const g = Math.floor((b - f + 1) / 3);
const h = (19 * a + b - d - g + 15) % 30;
const i = Math.floor(c / 4), k = c % 4;
const l = (32 + 2 * e + 2 * i - h - k) % 7;
const m = Math.floor((a + 11 * h + 22 * l) / 451);
const month = Math.floor((h + l - 7 * m + 114) / 31);
return new Date(year, month - 1, ((h + l - 7 * m + 114) % 31) + 1);
}
// Fallback name for a closed day that isn't a recognised Dutch public holiday.
// Callers compare against it to avoid copy like "Public holiday — public holiday".
const GENERIC_HOLIDAY = 'Public holiday';
const NL_FIXED = {
'01-01': 'Nieuwjaarsdag', '04-27': 'Koningsdag', '05-05': 'Bevrijdingsdag',
'12-25': 'Eerste Kerstdag', '12-26': 'Tweede Kerstdag',
};
const NL_EASTER_OFFSET = {
'-2': 'Goede Vrijdag', '0': 'Eerste Paasdag', '1': 'Tweede Paasdag',
'39': 'Hemelvaartsdag', '49': 'Eerste Pinksterdag', '50': 'Tweede Pinksterdag',
};
// Name the chosen date when it happens to be a genuine Dutch public holiday, so
// the demo copy reads true; anything else is just an unnamed closed day.
function nlHolidayName(iso) {
const dt = new Date(iso + 'T00:00:00');
if (isNaN(dt)) return GENERIC_HOLIDAY;
if (NL_FIXED[iso.slice(5)]) return NL_FIXED[iso.slice(5)];
const offset = Math.round((dt - easterSunday(dt.getFullYear())) / 86400000);
return NL_EASTER_OFFSET[String(offset)] || GENERIC_HOLIDAY;
}
// { columnIndex: holidayName } for a run of ISO dates — the shape the chart
// (axis chip + line gap) and the review table both consume.
function holidayMap(isoDates, holidayDate) {
if (!holidayDate || !isoDates) return {};
const i = isoDates.indexOf(holidayDate);
return i === -1 ? {} : { [i]: nlHolidayName(holidayDate) };
}
// "Thu 14 May 2026" — the human date shown beside the holiday name.
function holidayDateLabel(iso) {
const dt = new Date(iso + 'T00:00:00');
if (isNaN(dt)) return iso;
return `${_WEEKDAYS[dt.getDay()]} ${dt.getDate()} ${_MONTHS[dt.getMonth()]} ${dt.getFullYear()}`;
}
// ---- Stop mode window -----------------------------------------------------
// Dev control: a stopping merchant's forecast is zeroed for STOP_WEEKS weeks
// starting from the week that contains `stopStart` (an ISO yyyy-mm-dd date).
const STOP_WEEKS = 8;
const STOP_START_KEY = 'trk_fo_dev_stop_start';
// Current week's Monday — the first non-past week, anchored to today.
const DEFAULT_STOP_START = isoDate(startOfIsoWeek(new Date()));
const _MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const _WEEKDAYS = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
function stopWindow(stopStart) {
if (!stopStart) return null;
const dt = new Date(stopStart + 'T00:00:00');
if (isNaN(dt)) return null;
dt.setDate(dt.getDate() - ((dt.getDay() + 6) % 7)); // back up to Monday
const from = dt.getTime();
return { from, to: from + STOP_WEEKS * 7 * 86400000 };
}
// Human-readable Monday the stoppage begins, e.g. "Mon 11 May 2026".
function stopStartLabel(stopStart) {
const win = stopWindow(stopStart);
if (!win) return '';
const d = new Date(win.from);
return `${_WEEKDAYS[d.getDay()]} ${d.getDate()} ${_MONTHS[d.getMonth()]} ${d.getFullYear()}`;
}
// Helpers to synthesize schedule rows for stop-window weeks beyond SCHEDULE.
const _WEEK20_MONDAY = new Date('2026-05-11T00:00:00').getTime(); // Week 20 anchor
function isoLocal(d) {
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}
function weekNumberFor(ms) {
return 20 + Math.round((ms - _WEEK20_MONDAY) / (7 * 86400000));
}
function weekRangeLabel(monday) {
const fri = new Date(monday.getTime() + 4 * 86400000);
const m1 = _MONTHS[monday.getMonth()], m2 = _MONTHS[fri.getMonth()];
return m1 === m2
? `${monday.getDate()} – ${fri.getDate()} ${m2}`
: `${monday.getDate()} ${m1} – ${fri.getDate()} ${m2}`;
}
// SCHEDULE plus synthesized zeroed rows so the full 8-week stoppage is visible.
function scheduleWithStopWindow(stopMode, stopStart) {
if (!stopMode) return SCHEDULE;
const win = stopWindow(stopStart);
if (!win) return SCHEDULE;
const have = new Set(SCHEDULE.map(w => w.start));
const extra = [];
const cur = new Date(win.from);
for (let i = 0; i < STOP_WEEKS; i++) {
const iso = isoLocal(cur);
if (!have.has(iso)) {
const n = weekNumberFor(cur.getTime());
extra.push({ week: n, start: iso, label: `Week ${n}`, dates: weekRangeLabel(new Date(cur)),
status: 'stopped', volume: null, grade: null, editPolicy: 'none', synthetic: true });
}
cur.setDate(cur.getDate() + 7);
}
return [...SCHEDULE, ...extra].sort((a, b) => (a.start < b.start ? -1 : 1));
}
// A week is zeroed when stop mode is on, its Monday falls inside the window,
// and it hasn't already ended (past weeks keep their grades).
function isWeekStopped(w, stopMode, stopStart) {
if (!stopMode || !w || !w.start || w.editPolicy === 'past') return false;
const win = stopWindow(stopStart);
if (!win) return false;
const ms = new Date(w.start + 'T00:00:00').getTime();
return ms >= win.from && ms < win.to;
}
const REASONS = [
{ id: 'promo', title: 'Promotion / sale', desc: 'Marketing campaign or discount', icon: 'trend-up' },
{ id: 'stockout', title: 'Stock-out', desc: 'Low stock limits the volume', icon: 'warning' },
{ id: 'launch', title: 'New launch', desc: 'New product or category', icon: 'package' },
{ id: 'weather', title: 'Weather event', desc: 'Storm or hot weather affects demand', icon: 'info-circle' },
{ id: 'holiday', title: 'Holiday / event', desc: 'Public holiday or special event', icon: 'calendar' },
{ id: 'closed', title: 'Closed for a holiday', desc: 'Business closed — little or no volume', icon: 'lock' },
{ id: 'structural', title: 'Structural volume change', desc: 'A lasting shift in baseline, not a one-off', icon: 'history' },
{ id: 'other', title: 'Something else', desc: 'Explain in the notes below', icon: 'edit' },
];
// ---- Grade (Dutch cijfer, even only) — derived from the tolerance rules ----
// A day is "on target" when |forecast − actual| is within the allowed
// difference, banded by the actual's size:
// actual < 250 → within 50
// 250 ≤ actual < 500 → within 20% of actual
// actual ≥ 500 → within 100
// The forecast judged is what the customer committed: their override, or the
// Trunkrs number on days they accepted it. Grade = on-target days × 2 (five
// operating days → even 0·2·4·6·8·10). Pass line at 6 (3 of 5 days on target).
function dayForecast(d) { return d.yours == null ? d.trk : d.yours; }
function dayAllowedDiff(actual) {
if (actual == null) return null;
if (actual < 250) return 50;
if (actual < 500) return Math.round(actual * 0.2);
return 100;
}
// Per-day verdict, or null when the day can't be judged yet (no actual).
function dayVerdict(d) {
const forecast = dayForecast(d);
if (forecast == null || d.actual == null) return null;
const diff = Math.abs(forecast - d.actual);
const allowed = dayAllowedDiff(d.actual);
return { forecast, actual: d.actual, diff, allowed, within: diff <= allowed };
}
// Week grade + hit breakdown, or null until every operating day has an actual.
function weekGradeInfo(days) {
const ds = days ?? [];
if (!ds.length || ds.some(d => dayVerdict(d) == null)) return null;
const verdicts = ds.map(dayVerdict);
const hits = verdicts.filter(v => v.within).length;
return { hits, total: verdicts.length, grade: Math.round((hits / verdicts.length) * 5) * 2 };
}
function weekGrade(days) { return weekGradeInfo(days)?.grade ?? null; }
// ---- Dev: forced week grade -----------------------------------------------
// The demo actuals only ever produce 8/10/6/8/4, so the edge grades — 0 above
// all, which is the loudest state on the chart — can't be reviewed. Rather than
// stamp a fake `grade` (which would contradict the day rows in the detail
// modal), this rewrites the week's *actuals* so the target grade is genuinely
// earned: every consumer — band, pill, KPI, table, per-day breakdown — then
// agrees, because they all derive from the same verdicts.
const GRADE_MISS_DELTA = 120; // clears every tolerance band
const GRADE_HIT_DELTA = [9, -6, 11, -8, 5]; // comfortably inside tolerance
function withGradeOverride(schedule, grade) {
if (grade == null) return schedule;
// The most recent graded week — also the one behind the "Last week grade" KPI.
let idx = -1;
schedule.forEach((w, i) => { if (w.grade != null) idx = i; });
if (idx === -1) return schedule;
const wk = schedule[idx];
const misses = wk.days.length - grade / 2; // grade = hits × 2
const days = wk.days.map((d, j) => {
const forecast = d.yours == null ? d.trk : d.yours;
const delta = j < misses
? GRADE_MISS_DELTA * (j % 2 ? -1 : 1)
: GRADE_HIT_DELTA[j % GRADE_HIT_DELTA.length];
return { ...d, actual: forecast + delta };
});
return schedule.map((w, i) => (i === idx ? { ...w, days, grade: weekGrade(days) } : w));
}
// 6–10 pass (green), 4 borderline (amber), 0–2 fail (red).
function gradeBand(g) {
if (g == null) return 'neutral';
if (g >= 8) return 'success';
if (g === 6) return 'warning';
return 'danger';
}
// ---- GradeBox -------------------------------------------------------------
function GradeBox({ grade, size = 'md', label, sub }) {
const band = gradeBand(grade);
return (
{label &&
{label}
}
{grade == null ? '—' : grade}
{sub &&
{sub}
}
);
}
// ---- StatusBadge ----------------------------------------------------------
function StatusBadge({ status }) {
if (status === 'submitted') return Submitted;
if (status === 'pending') return Pending;
if (status === 'overdue') return Overdue;
if (status === 'stopped') return Stopped;
return null;
}
// ---- MotdTicker -----------------------------------------------------------
const MOTD = [
{ icon: 'package', text: 'Your forecast helps us choose the right number of trucks for your deliveries.' },
{ icon: 'calendar', text: 'The sooner you flag a change, the more easily we can plan around it.' },
{ icon: 'trend-up', text: 'Better forecasts mean better on-time delivery rates for your customers.' },
{ icon: 'info-circle', text: "No need to review every week — we'll use the Trunkrs forecast unless you change it." },
{ icon: 'package', text: 'Big sale or launch coming? Adjust those days so we can plan ahead.' },
];
function MotdTicker() {
const [idx, setIdx] = React.useState(0);
const [fade, setFade] = React.useState('in');
React.useEffect(() => {
const t = setInterval(() => {
setFade('out');
setTimeout(() => {
setIdx(i => (i + 1) % MOTD.length);
setFade('in');
}, 280);
}, 7000);
return () => clearInterval(t);
}, []);
const msg = MOTD[idx];
return (
{msg.text}
{MOTD.map((_, i) => )}
);
}
// ---- Editor table ---------------------------------------------------------
function isSignificant(v, trk) {
if (v == null || v === trk || trk == null) return false;
const d = Math.abs(v - trk);
return trk > 100 ? d > trk * 0.10 : d > 50;
}
function Editor({ data, predictions, onChange, onHover, hoverIndex, weekBreak, weekBreakLabel, disabled = false }) {
return (
;
}
// ---- Rich tooltip ---------------------------------------------------------
function Tip({ children, title, sub, body, style }) {
const [on, setOn] = React.useState(false);
const hasContent = !!(title || body);
return (
