1<kw>import</kw> React, { useState } <kw>from</kw> "react";
2
3<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];
10
11<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}
21
22<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}