// ===== Absatzprognose — Hauptansicht ===== const { useState: useAbS, useMemo: useAbM } = React; const PATTERN_TINT = { 'regelmäßig': 'var(--good)', 'saisonal': 'var(--accent)', 'erratisch': 'var(--bad)', 'wachsend': 'var(--good)', 'fallend': 'var(--warn)', 'hochvolumig': 'var(--accent)', }; const fmtN = (v) => Math.round(v).toLocaleString('de-DE'); const fmtDe = (s) => { const d = new Date(s + 'T00:00:00Z'); return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' }); }; function AbsatzView({ onCreatePA, paList }) { const articles = window.FC_ARTICLES; const [selId, setSel] = useAbS(articles[0].id); const [plans, setPlans] = useAbS(() => { const o = {}; articles.forEach(a => { o[a.id] = window.FC_ABRUFPLAN[a.id].map(r => ({ ...r })); }); return o; }); const [horizon, setHorizon] = useAbS(270); const article = articles.find(a => a.id === selId); const history = window.FC_RAW[selId]; const abrufplan = plans[selId] || []; const forecast = useAbM(() => window.forecastArticle(history, { horizonDays: horizon }), [selId, horizon]); const compare = useAbM(() => window.comparePlan(forecast, abrufplan), [forecast, abrufplan]); // Plan-Editor const setPlan = (rows) => setPlans(p => ({ ...p, [selId]: rows })); const addRow = () => { const last = abrufplan.length ? abrufplan[abrufplan.length - 1].datum : window.fcIso(window.FC_TODAY); const nd = window.fcAddDays(new Date(last + 'T00:00:00Z'), Math.round(article.intervalMean)); setPlan([...abrufplan, { datum: window.fcIso(nd), menge: article.qtyMean, id: selId + '-c-' + Date.now() }]); }; const updRow = (id, patch) => setPlan(abrufplan.map(r => r.id === id ? { ...r, ...patch } : r)); const delRow = (id) => setPlan(abrufplan.filter(r => r.id !== id)); const applyFc = () => { // ML-Prognose als Abrufplan übernehmen const fut = forecast.points.filter(p => p.future); setPlan(fut.map((p, i) => ({ datum: p.datum, menge: p.menge, id: selId + '-fc-' + i }))); }; // Plan-Spalte (separat von der Kundenabrufmenge) auf die Prognose setzen const takeAllFc = () => setPlan(compare.matches.map(m => ({ ...m.cust, plan: m.fc ? m.fc.menge : m.cust.menge }))); const st = forecast.stats; return (
Absatzprognose ML-Mustererkennung · Kundenabruf-Validierung
Horizont {[90, 180, 270, 365].map(h => ( ))}
{/* Artikelliste */}
Artikel · {articles.length}
{articles.map(a => { const on = a.id === selId; const hist = window.FC_RAW[a.id]; const sa = window.analyzeArticle(hist); return ( ); })}
{/* Detail */}
{/* Chart-Panel */}
{article.name} {article.id} · {article.kunde}
= 0 ? '+' : ''}${fmtN(st.qtySlope)}`} tone={st.qtySlope >= 0 ? 'var(--good-ink)' : 'var(--bad-ink)'} />
{/* Gegenüberstellung */}
{/* Kundenabrufplan (editierbar) */}
Kundenabrufplan {abrufplan.length} Abrufe
{['Datum', 'Abrufmenge', 'Prognose', 'Plan', 'vs. Prog.', ''].map((h, i) => )} {compare.matches.map((m, i) => { const flagged = m.outOfBand || m.within === false; const fcQty = m.fc ? m.fc.menge : null; const planVal = m.cust.plan != null ? m.cust.plan : m.cust.menge; return ( window.kikiMenu(e, { id: article.id, label: `${article.id} · Abruf ${window.fcIso ? '' : ''}${m.cust.datum}`, kind: 'Kundenabruf' })} style={{ borderBottom: '1px solid var(--line)', background: flagged ? 'color-mix(in oklch, var(--bad) 14%, transparent)' : 'transparent' }}> ); })}
= 1 && i <= 3 ? 'right' : 'left' }}>{h}
updRow(m.cust.id, { datum: e.target.value })} style={inp} /> updRow(m.cust.id, { menge: +e.target.value })} style={{ ...inp, width: 74, textAlign: 'right' }} /> {fcQty != null ? {fmtN(fcQty)} : —} updRow(m.cust.id, { plan: +e.target.value })} style={{ ...inp, width: 74, textAlign: 'right' }} /> {m.fc ? 0.25 ? 'var(--bad-ink)' : 'var(--ink-2)' }}> {m.qtyDev >= 0 ? '+' : ''}{(m.qtyDev * 100).toFixed(0)}%{m.dateDeltaDays ? ` · ${m.dateDeltaDays > 0 ? '+' : ''}${m.dateDeltaDays}T` : ''} : —} {(() => { const created = paList && paList.find(p => p.source === 'prognose' && p._row === m.cust.id); return ( ); })()}
Σ Zeitraum {fmtN(compare.matches.reduce((s, m) => s + (m.cust.menge || 0), 0))} {fmtN(compare.matches.reduce((s, m) => s + (m.fc ? m.fc.menge : 0), 0))} {fmtN(compare.matches.reduce((s, m) => s + (m.cust.plan != null ? m.cust.plan : m.cust.menge), 0))}
{/* Validierung / Flags */}
Validierung gegen ML-Prognose
= 0 ? '+' : ''}${compare.devPct.toFixed(0)}%`} tone={Math.abs(compare.devPct) > 15 ? 'var(--bad-ink)' : 'var(--good-ink)'} />
{compare.flags.length === 0 ? (
Abrufplan plausibel — keine Auffälligkeiten zur Prognose.
) : (
{compare.flags.length} Auffälligkeit{compare.flags.length > 1 ? 'en' : ''}
{compare.flags.map((f, i) => (
{fmtDe(f.datum)}
{f.msg}
))}
)}
{/* Rohdaten-Historie */}
Rohdaten — Abruf-Historie {history.length} Abrufe · 2 Jahre
{['#', 'Abrufdatum', 'Menge', 'Intervall', 'Δ Vormonat'].map((h, i) => )} {history.slice().reverse().map((r, ri) => { const idx = history.length - ri; const prev = history[idx - 2]; const iv = prev ? Math.round((new Date(r.datum) - new Date(prev.datum)) / 86400000) : null; return ( ); })}
= 2 ? 'right' : 'left' }}>{h}
{idx} {fmtDe(r.datum)} {fmtN(r.menge)} {iv != null ? iv + ' T' : '—'} {prev ? `${r.menge - prev.menge >= 0 ? '+' : ''}${fmtN(r.menge - prev.menge)}` : '—'}
); } function Kpi({ label, value, sub, tone }) { return (
{value}
{label}{sub ? ` · ${sub}` : ''}
); } const miniBtn = { height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid var(--line-2)', background: 'var(--surface)', color: 'var(--ink-2)', fontSize: 11.5, fontWeight: 500, cursor: 'pointer' }; const inp = { height: 28, padding: '0 7px', boxSizing: 'border-box', fontFamily: 'var(--mono)', fontSize: 12, border: '1px solid var(--line-2)', borderRadius: 5, background: 'var(--surface)', color: 'var(--ink)' }; Object.assign(window, { AbsatzView });