/* Live Operations canvas — animated 4-stage procurement pipeline. Tokens spawn at REQ, flow rightward through 4 stages on stable lanes, transforming code at each stage. Side panel logs every transition. */ const { useState, useEffect, useRef, useMemo } = React; const FLOW_STAGES = [ { key: 'REQ', label: ['Requisition', 'Αίτημα'], sub: ['site asks', 'εργοτάξιο ζητά'], color: '#5b8df0' }, { key: 'PO', label: ['Purchase order', 'Παραγγελία'], sub: ['procurement approves', 'προμήθειες εγκρίνουν'], color: '#5b8df0' }, { key: 'GRN', label: ['Goods received', 'Παραλαβή'], sub: ['site confirms', 'εργοτάξιο επιβεβαιώνει'], color: '#22c55e' }, { key: 'INV', label: ['Invoice match', 'Συμφωνία τιμολ.'], sub: ['finance reconciles', 'οικονομικά κλείνουν'], color: '#c9a227' }, ]; const FLOW_SITES = [ 'Limassol Tower B', 'Nicosia Marina', 'Larnaca Logistics', 'Paphos Resort', 'Strovolos Office', 'Engomi Hospital' ]; const FLOW_ITEMS = [ { code: 'CS030.21', exp: 'M', name: ['Rebar B500C Ø16', 'Σίδερο B500C Ø16'], sup: 'Sidenor' }, { code: 'CS030.40', exp: 'M', name: ['Ready-mix C30/37', 'Σκυρόδεμα C30/37'], sup: 'Vassiliko' }, { code: 'CS030.40', exp: 'L', name: ['Pump crew · 2 days', 'Συνεργείο αντλίας · 2 ημ.'], sup: 'Lafarge' }, { code: 'CS030.55', exp: 'P', name: ['Formwork panels', 'Καλούπια'], sup: 'Doka' }, { code: 'CS030.55', exp: 'S', name: ['Site PPE kit', 'Εξοπλισμός ΜΑΠ'], sup: 'Safety+' }, { code: 'CS030.21', exp: 'M', name: ['Steel mesh Q188', 'Πλέγμα Q188'], sup: 'Sidenor' }, { code: 'CS030.04', exp: 'L', name: ['Crane operator', 'Χειριστής γερανού'], sup: 'Petrou Lifting' }, { code: 'CS030.62', exp: 'P', name: ['Vibrator IREN 38mm', 'Δονητής IREN 38mm'], sup: 'Doka' }, { code: 'CS030.71', exp: 'M', name: ['Aluminum frames', 'Πλαίσια αλουμινίου'], sup: 'Etem' }, { code: 'CS030.21', exp: 'M', name: ['Cement OPC 42.5', 'Τσιμέντο OPC 42.5'], sup: 'Vassiliko' }, ]; const TOTAL_DURATION = 18000; const DOCK_RATIO = 0.30; const LANES = 4; const fmtMoney = (n) => '€ ' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); function useLang() { const [lang, setLang] = useState(() => document.documentElement.lang || 'en'); useEffect(() => { const mo = new MutationObserver(() => setLang(document.documentElement.lang || 'en')); mo.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] }); return () => mo.disconnect(); }, []); return lang; } const tx = (lang, en, gr) => (lang === 'gr' ? gr : en); function OperisFlow() { const lang = useLang(); const li = lang === 'gr' ? 1 : 0; const [tokens, setTokens] = useState(() => { const t0 = Date.now(); const initial = []; for (let i = 0; i < LANES; i++) initial.push(makeToken(t0 - (i / LANES) * TOTAL_DURATION, i)); return initial; }); const [events, setEvents] = useState(() => seedEvents(lang)); const [now, setNow] = useState(Date.now()); const [paused, setPaused] = useState(false); const [focused, setFocused] = useState(null); const seenStageRef = useRef({}); useEffect(() => { if (paused) return; let raf; const loop = () => { const t = Date.now(); setNow(t); setTokens(ts => { let changed = false; const next = ts.map(tok => { if ((t - tok.spawn) > TOTAL_DURATION) { changed = true; return makeToken(tok.spawn + TOTAL_DURATION, tok.lane); } return tok; }); return changed ? next : ts; }); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [paused]); useEffect(() => { const newEvents = []; for (const tok of tokens) { const stage = computeStage(tok, now); if (stage < 0 || stage > 3) continue; const last = seenStageRef.current[tok.id]; if (last === undefined || stage > last) { seenStageRef.current[tok.id] = stage; if (last !== undefined) newEvents.push(makeEvent(tok, stage, now, lang)); } } if (newEvents.length) setEvents(es => [...newEvents.reverse(), ...es].slice(0, 14)); }, [tokens, now, lang]); const stageCounts = useMemo(() => { const c = [0, 0, 0, 0]; for (const t of tokens) { const s = computeStage(t, now); if (s >= 0 && s < 4) c[s]++; } return c; }, [tokens, now]); const kpis = [ { l: tx(lang, 'Active sites', 'Ενεργά εργοτάξια'), v: '12', d: tx(lang, '+2 this month', '+2 αυτόν τον μήνα') }, { l: tx(lang, 'In-flight POs', 'POs σε εξέλιξη'), v: String(stageCounts[1] + stageCounts[0]).padStart(2,'0'), d: tx(lang, 'across 6 suppliers', 'σε 6 προμηθευτές') }, { l: tx(lang, 'Awaiting GRN', 'Σε αναμονή GRN'), v: String(stageCounts[2]).padStart(2,'0'), d: tx(lang, 'avg dock time 1.4d', 'μέσος χρόνος 1.4η') }, { l: tx(lang, 'Reconciled (24h)', 'Συμφωνημένα (24ώ)'), v: events.filter(e => e.stage === 3).length + 18 + '', d: tx(lang, '3-way match', 'τριμερής αντιστοίχιση') }, ]; return (
/02 — {tx(lang, 'Live operations', 'Ζωντανές λειτουργίες')}

{tx(lang, 'A single operating ledger, from estimate to invoice.', 'Ένα ενιαίο καθολικό λειτουργίας, από εκτίμηση σε τιμολόγιο.')}

{tx(lang, 'Every requisition, PO, delivery and invoice as one continuous flow — across every site, in real time. This is the workflow we replace your spreadsheets with.', 'Κάθε αίτημα, PO, παράδοση και τιμολόγιο σε μια συνεχή ροή — σε κάθε εργοτάξιο, σε πραγματικό χρόνο. Αυτή είναι η ροή που αντικαθιστά τα φύλλα σας.')}

LIVE · {tx(lang, 'simulated', 'προσομοίωση')}
{kpis.map(k => (
{k.l}
{k.v}
{k.d}
))}
{FLOW_STAGES.map((s, i) => ( ))}
{[0.22, 0.42, 0.62, 0.82].map((y, idx) => ( ))} {[0.25, 0.5, 0.75].map((x, idx) => ( ))} {tokens.map(tok => { const phase = (now - tok.spawn) / TOTAL_DURATION; if (phase < 0 || phase > 1.05) return null; const xRaw = 0.06 + phase * 0.88; const x = Math.max(0.07, Math.min(0.93, xRaw)); const laneFrac = (tok.lane + 0.5) / LANES; const y = 0.16 + laneFrac * 0.70; const stage = Math.max(0, Math.min(3, Math.floor(phase * 4))); const stageProgress = (phase * 4) - stage; const isDocked = stageProgress > (1 - DOCK_RATIO); return ; })} {focused !== null && (
{FLOW_STAGES[focused].key} {FOCUS_BLURB[focused][li]}
)}
ops.stream → 4 {tx(lang, 'stages', 'στάδια')} · {tokens.length} {tx(lang, 'in flight', 'σε ροή')} REQ PO GRN INV
{tx(lang, 'Event stream', 'Ροή γεγονότων')} {events.length}
{events.length === 0 && (
{tx(lang, 'awaiting first event…', 'σε αναμονή πρώτου γεγονότος…')}
)}
    {events.map((e, i) => (
  • {e.timeStr} · {FLOW_STAGES[e.stage].key} · {e.site}
    {e.message}
    • ))}
); } function FlowToken({ token, stage, docked, x, y, li }) { const s = FLOW_STAGES[stage]; const code = token.codes[stage]; return (
{code} · {token.item.code} {token.item.exp}
{token.item.name[li]}
{token.site} {token.amountFmt}
); } function makeToken(spawn, lane) { const item = FLOW_ITEMS[Math.floor(Math.random() * FLOW_ITEMS.length)]; const site = FLOW_SITES[Math.floor(Math.random() * FLOW_SITES.length)]; const n = 1000 + Math.floor(Math.random() * 8999); const amt = 400 + Math.floor(Math.random() * 28000) + Math.random(); return { id: spawn + '-' + lane + '-' + Math.random().toString(36).slice(2, 6), spawn, item, site, amount: amt, amountFmt: fmtMoney(amt), lane, codes: ['REQ-26-' + n, 'PO-26-' + (n + 100), 'GRN-' + (7000 + (n % 999)), 'INV-' + (44000 + (n % 999))], }; } function computeStage(tok, now) { const phase = (now - tok.spawn) / TOTAL_DURATION; if (phase < 0) return -1; if (phase > 1) return 4; return Math.max(0, Math.min(3, Math.floor(phase * 4))); } function makeEvent(tok, stage, now, lang) { const t = new Date(now); const timeStr = t.toLocaleTimeString('en-GB', { hour12: false }); const li = lang === 'gr' ? 1 : 0; let msg; if (stage === 0) msg = tx(lang, `Raised ${tok.codes[0]} — ${tok.item.name[0]}`, `Δημιουργήθηκε ${tok.codes[0]} — ${tok.item.name[1]}`); else if (stage === 1) msg = tx(lang, `PO ${tok.codes[1]} issued to ${tok.item.sup} · ${tok.amountFmt}`, `PO ${tok.codes[1]} προς ${tok.item.sup} · ${tok.amountFmt}`); else if (stage === 2) msg = tx(lang, `GRN ${tok.codes[2]} signed at ${tok.site}`, `GRN ${tok.codes[2]} υπογράφηκε στο ${tok.site}`); else msg = tx(lang, `Matched ${tok.codes[3]} — 3-way OK`, `Αντιστοιχίστηκε ${tok.codes[3]} — 3-way OK`); return { id: tok.id, stage, site: tok.site, message: msg, timeStr }; } function seedEvents(lang) { const out = []; const t = Date.now(); for (let i = 0; i < 5; i++) { const tok = makeToken(t - (i + 1) * 9000, i % LANES); const stage = (3 - i + 4) % 4; out.push(makeEvent(tok, stage, t - i * 6500, lang)); } return out; } const FOCUS_BLURB = [ ['Site requisitions raised on phone or tablet — activity code, exp type, quantity, photos.', 'Αιτήματα εργοταξίου από κινητό ή tablet — κωδικός δραστηριότητας, τύπος, ποσότητα, φωτογραφίες.'], ['Procurement turns approved requests into POs with multi-level approvals and budget guardrails.', 'Οι προμήθειες μετατρέπουν τα εγκεκριμένα αιτήματα σε POs με πολυεπίπεδες εγκρίσεις και όρια προϋπολογισμού.'], ['Goods received notes signed at the gate — partial deliveries, damage notes, photos, all linked to PO lines.', 'Σημειώματα παραλαβής υπογεγραμμένα στην πύλη — τμηματικές παραδόσεις, ζημιές, φωτογραφίες, όλα συνδεδεμένα με τις γραμμές PO.'], ['Three-way match — PO ⇄ GRN ⇄ invoice — pushed to your ERP through the open REST API.', 'Τριμερής αντιστοίχιση — PO ⇄ GRN ⇄ τιμολόγιο — αποστολή στο ERP μέσω ανοιχτού REST API.'], ]; const flowRoot = document.getElementById('flow-mount'); if (flowRoot) ReactDOM.createRoot(flowRoot).render();