Build a lakehouse-native pipeline for spend analytics that ingests procurement data across all vendor contracts, categorizes spend by taxonomy, detects anomalies, and forecasts future spend with confidence intervals. Outputs feed the VIOS command center.
1<kw>import</kw> React, { useState } <kw>from</kw> "react";23<kw>const</kw> vendors = [4 { name: "TCS", risk: 93, delivery: 95, compliance: 98 },5 { name: "Accenture Federal", risk: 87, delivery: 84, compliance: 92 },6 { name: "Wipro HOLMES", risk: 78, delivery: 82, compliance: 75 },7 { name: "Infosys BPM", risk: 71, delivery: 68, compliance: 74 },8 { name: "Cognizant", risk: 55, delivery: 52, compliance: 61 },9];1011<kw>function</kw> Bar({ value }) {12 <kw>return</kw> (13 <div style={{ display: "flex", alignItems: "center", gap: 8 }}>14 <div style={{ width: 100, height: 5, background: "rgba(255,255,255,0.08)", borderRadius: 3 }}>15 <div style={{ width: value + "%", height: "100%", background: value > 80 ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.2)", borderRadius: 3, transition: "width 0.3s" }} />16 </div>17 <span style={{ fontSize: 11, fontFamily: "monospace", color: "rgba(255,255,255,0.5)" }}>{value}</span>18 </div>19 );20}2122<kw>export</kw> <kw>default</kw> <kw>function</kw> App() {23 <kw>const</kw> [selected, setSelected] = useState(null);24 <kw>return</kw> (25 <div style={{ padding: 20, background: "#0a0914", minHeight: "100vh", color: "white", fontFamily: "system-ui, sans-serif" }}>26 <h2 style={{ fontSize: 16, fontWeight: 600, color: "rgba(255,255,255,0.85)", margin: 0 }}>Vendor Risk Dashboard</h2>27 <p style={{ fontSize: 11, color: "rgba(255,255,255,0.35)", marginTop: 4, marginBottom: 16 }}>Click a vendor to see details</p>28 <table style={{ width: "100%", borderCollapse: "collapse" }}>29 <thead>30 <tr style={{ borderBottom: "1px solid rgba(255,255,255,0.08)" }}>31 {["Vendor", "Risk", "Delivery", "Compliance"].map(h => (32 <th key={h} style={{ textAlign: "left", padding: "6px 0", fontSize: 10, color: "rgba(255,255,255,0.3)", fontWeight: 500 }}>{h}</th>33 ))}34 </tr>35 </thead>36 <tbody>37 {vendors.map(v => (38 <tr key={v.name} onClick={() => setSelected(v.name === selected ? null : v.name)} style={{ borderBottom: "1px solid rgba(255,255,255,0.04)", cursor: "pointer", background: v.name === selected ? "rgba(255,255,255,0.03)" : "transparent" }}>39 <td style={{ padding: "8px 0", fontSize: 12, color: "rgba(255,255,255,0.7)" }}>{v.name}</td>40 <td style={{ padding: "8px 0" }}><Bar value={v.risk} /></td>41 <td style={{ padding: "8px 0" }}><Bar value={v.delivery} /></td>42 <td style={{ padding: "8px 0" }}><Bar value={v.compliance} /></td>43 </tr>44 ))}45 </tbody>46 </table>47 {selected && (48 <div style={{ marginTop: 16, padding: 12, background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: 8 }}>49 <p style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", margin: 0 }}>{selected} — Detail View</p>50 <p style={{ fontSize: 11, color: "rgba(255,255,255,0.35)", marginTop: 4 }}>Risk factors, SLA history, and contract status would render here.</p>51 </div>52 )}53 </div>54 );55}
Click a vendor to see details
| Vendor | Risk | Delivery | Compliance |
|---|---|---|---|
| TCS | 93 | 95 | 98 |
| Accenture Federal | 87 | 84 | 92 |
| Wipro HOLMES | 78 | 82 | 75 |
| Infosys BPM | 71 | 68 | 74 |
| Cognizant | 55 | 52 | 61 |
The spend categorization needs a 4th level of granularity. Current 3-level taxonomy misses sub-categories in IT services.
Extended taxonomy to L4 in the Delta table schema. Backfill job running now — ETA 20 min.
Anomaly detector is catching too many false positives on seasonal spend patterns. Adding time-series decomposition to filter.
anomaly-detector.ts:31